A shell like console's basic requirements look like this ;
- Should prompt the user to enter a command.
- Evaluate the command and print the result.
- Should limit the text to be entered only on the prompt line limiting the movement of the caret.
- The new command line should be empty for user to enter a new command.
- Should support AJAX
Since all a JSF component does is rendering HTML and managing state we should actually find a way to implement this with HTML and JavaScript.
Here are two options I could think of ;
- Render a textarea, try to limit the movement of the caret through JavaScript.
- Render a input text for the user command. Print outputs within a 'div'. Blend them together using CSS.
I chose the second approach since JavaScript needed for he first approach is a bit tricky to implement.
Now to implement these as a JSF component we need these :
- A taglib defining our component.
- A State manager component that manages inputs and outputs of the component and beans.
- A Renderer that will output the html depending on components state
The taglib is actually quite simple :
<?xml version="1.0" encoding="UTF-8"?>
<facelet-taglib xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd"
version="2.0">
<namespace>http://mca.org/qmass</namespace>
<tag>
<tag-name>console</tag-name>
<component>
<component-type>UIConsole</component-type>
<renderer-type>UIConsole</renderer-type>
</component>
</tag>
</facelet-taglib>
We will refence this taglib through our xhtml's using namespace and our component tag. Component-type references to what I called state-manager and renderer-type references to the renderer.
The state manager :
Lastly the renderer :
Finally here is how I use the component on a xhtml :
Cheers
The state manager :
@FacesComponent(value = "UIConsole")
public class UIConsole extends UICommand {
public String getCommand() {
return (String) getStateHelper().eval("command");
}
public void setCommand(String command) {
getStateHelper().put("command", command);
getValueExpression("command").setValue(FacesContext.getCurrentInstance().getELContext(), command);
}
public String getOutput() {
return (String) getStateHelper().eval("output");
}
public void setOutput(String output) {
getStateHelper().put("output", output);
}
@Override
public String getFamily() {
return "qmass.jsf.Console";
}
}
Lastly the renderer :
@FacesRenderer(rendererType = "UIConsole", componentFamily = "qmass.jsf.Console")
@ResourceDependencies({
@ResourceDependency(name = "qconsole.css", library = "org.mca.qmass", target = "head"),
@ResourceDependency(name = "jsf.js", library = "javax.faces", target = "body")})
public class ConsoleRenderer extends Renderer {
@Override
public void decode(FacesContext context, UIComponent component) {
UIConsole console = (UIConsole) component;
String val = context.getExternalContext().getRequestParameterMap().get(getCommandId(console));
console.setCommand(val);
console.queueEvent(new ActionEvent(component));
}
private String getCommandId(UIConsole console) {
return console.getClientId() + "_in";
}
@Override
public void encodeBegin(FacesContext context, UIComponent component) throws IOException {
UIConsole comp = (UIConsole) component;
String inId = getCommandId(comp);
String lines = comp.getOutput();
ResponseWriter writer = context.getResponseWriter();
writer.startElement("div", null);
writer.writeAttribute("id", comp.getClientId(), null);
writer.writeAttribute("name", comp.getClientId(), null);
writer.writeAttribute("class", "qconsole", null);
writer.writeAttribute("onmouseover", "document.getElementById('" + inId + "').focus();", null);
String[] lineRay = lines.split("\n");
for (int i = 0; i < lineRay.length; i++) {
writer.startElement("div", null);
writer.writeAttribute("class", "qconsolerow", null);
writer.write(lineRay[i].replaceAll(" ", " "));
if (i + 1 == lineRay.length) {
writer.startElement("input", null);
writer.writeAttribute("id", inId, null);
writer.writeAttribute("name", inId, null);
writer.writeAttribute("onkeypress",
"if(event.keyCode == 13){" +
"jsf.ajax.request(this,event,{execute:'" + comp.getClientId() + "'," +
"render:'" + comp.getClientId() + "'," +
"onevent:function(e) {if(e.status=='success')" +
"document.getElementById('" + inId + "').focus();}});" +
"return false;" +
"}",
null);
writer.writeAttribute("class", "qconsole", null);
writer.writeAttribute("autocomplete", "off", null);
writer.writeAttribute("type", "text", null);
writer.endElement("input");
}
writer.endElement("div");
}
}
@Override
public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
ResponseWriter writer = context.getResponseWriter();
writer.endElement("div");
}
}
Finally here is how I use the component on a xhtml :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:q="http://mca.org/qmass">
...
<q:console id="q" output="#{consoleBean.output}" command="#{consoleBean.input}"
actionListener="#{consoleBean.handleCommand}"/>
...
</html>
Cheers