The hotKey component allows registering hot keys on the page or particular elements and defining client side processing functions for these keys.
Main component attributes are:
In next example we've used selector attribute. Hence the keys will work only if pickList component is focused.
Press Right or Left keys in order to move some selected items between lists. Press Home or End buttons in order to move all items between lists.
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:rich="http://richfaces.org/rich"> <h:form id="form"> <rich:panel style="width:560px;"> <f:facet name="header"> <h:outputText value="Simple pick list" /> </f:facet> <rich:pickList id="pickList" value="#{listSelectBean.selectedCapitals}" sourceCaption="Available cities" targetCaption="Selected cities" listWidth="165px" listHeight="100px" orderable="true"> <f:selectItems value="#{listSelectBean.capitals}" var="capital" itemValue="#{capital}" itemLabel="#{capital.name}" /> <f:converter converterId="CapitalsConverter" /> </rich:pickList> <rich:hotKey selector="#pickList" key="right"> <rich:componentControl target="pickList" operation="add" /> </rich:hotKey> <rich:hotKey selector="#pickList" key="left"> <rich:componentControl target="pickList" operation="remove" /> </rich:hotKey> <rich:hotKey selector="#pickList" key="end"> <rich:componentControl target="pickList" operation="addAll" /> </rich:hotKey> <rich:hotKey selector="#pickList" key="home"> <rich:componentControl target="pickList" operation="removeAll" /> </rich:hotKey> </rich:panel> </h:form> </ui:composition>
