<h:form>
<p:panel header="Keyboard Demo">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Default Layout: " />
<p:keyboard value="#{keyboardBean.value1}"/>
<h:outputText value="Basic QWERTY: " />
<p:keyboard value="#{keyboardBean.value2}"
layout="qwertyBasic"/>
<h:outputText value="Alphabetic Layout: " />
<p:keyboard value="#{keyboardBean.value3}"
layout="alphabetic"/>
<h:outputText value="Custom Layout 1: " />
<p:keyboard value="#{keyboardBean.value4}"
layout="custom"
layoutTemplate="prime-back,faces-clear,rocks-close"/>
<h:outputText value="Custom Layout 2: " />
<p:keyboard value="#{keyboardBean.value5}"
layout="custom"
layoutTemplate="create-space-your-close,owntemplate-shift,easily-space-spacebar"/>
<h:outputText value="Default Keypad: " />
<p:keyboard value="#{keyboardBean.value6}" keypadOnly="true"/>
<h:outputText value="Button Mode: " />
<p:keyboard value="#{keyboardBean.value7}"
showMode="button" keypadOnly="true"/>
<h:outputText value="Image Mode: " />
<p:keyboard value="#{keyboardBean.value8}"
showMode="button" buttonImageOnly="true"
buttonImage="/images/keyboardpencil.png"
keypadOnly="true"/>
<h:outputText value="Password Mode: " />
<p:keyboard value="#{keyboardBean.value9}"
password="true" keypadOnly="true"/>
</h:panelGrid>
</p:panel>
<p:commandButton value="Submit" update="display" oncomplete="dialog.show()"/>
<p:dialog widgetVar="dialog" showEffect="fade" hideEffect="fade" header="Values">
<h:panelGrid columns="2" id="display" cellpadding="5">
<h:outputText value="Value1: " />
<h:outputText value="#{keyboardBean.value1}" />
<h:outputText value="Value2:" />
<h:outputText value="#{keyboardBean.value2}" />
<h:outputText value="Value3:" />
<h:outputText value="#{keyboardBean.value3}" />
<h:outputText value="Value4:" />
<h:outputText value="#{keyboardBean.value4}" />
<h:outputText value="Value5:" />
<h:outputText value="#{keyboardBean.value5}" />
<h:outputText value="Value6:" />
<h:outputText value="#{keyboardBean.value6}" />
<h:outputText value="Value7:" />
<h:outputText value="#{keyboardBean.value7}" />
<h:outputText value="Value8:" />
<h:outputText value="#{keyboardBean.value8}" />
<h:outputText value="Value9:" />
<h:outputText value="#{keyboardBean.value9}" />
</h:panelGrid>
</p:dialog>
</h:form>
package org.primefaces.examples.view;
public class KeyboardBean {
private String value1;
private String value2;
private String value3;
private String value4;
private String value5;
private String value6;
private String value7;
private String value8;
private String value9;
public String getValue1() {
return value1;
}
public void setValue1(String value1) {
this.value1 = value1;
}
public String getValue2() {
return value2;
}
public void setValue2(String value2) {
this.value2 = value2;
}
public String getValue3() {
return value3;
}
public void setValue3(String value3) {
this.value3 = value3;
}
public String getValue4() {
return value4;
}
public void setValue4(String value4) {
this.value4 = value4;
}
public String getValue5() {
return value5;
}
public void setValue5(String value5) {
this.value5 = value5;
}
public String getValue6() {
return value6;
}
public void setValue6(String value6) {
this.value6 = value6;
}
public String getValue7() {
return value7;
}
public void setValue7(String value7) {
this.value7 = value7;
}
public String getValue8() {
return value8;
}
public void setValue8(String value8) {
this.value8 = value8;
}
public String getValue9() {
return value9;
}
public void setValue9(String value9) {
this.value9 = value9;
}
}
