The <rich:hotKey> component allows to register hot keys for the page or particular elements and to define client-side processing functions for these keys.

There are two ways to register <rich:hotKey>:

The "key" attribute defines the hot key itself which is processed by the component.

After the hot key has been registered and defined you could set the "handler" attribute which determines a JavaScript function to be called every time when corresponding keys are pressed.

<rich:listShuttle var="cap" sourceValue="#{capitalsBean.capitals}" id="ls">

    <rich:column>

        <f:facet name="header">

            <h:outputText value="State flag"/>

        </f:facet>

        <h:graphicImage value="#{cap.stateFlag}"/>

    </rich:column>

    <rich:column>

        <f:facet name="header">

            <h:outputText value="State name"/>

        </f:facet>

        <h:outputText value="#{cap.name}"/>

    </rich:column>

</rich:listShuttle>

<rich:hotKey selector="#ls" key="right"    handler="#{rich:component('ls')}.copy()"/>

<rich:hotKey selector="#ls" key="left"       handler="#{rich:component('ls')}.remove()"/>

<rich:hotKey selector="#ls" key="end"     handler="#{rich:component('ls')}.copyAll()"/>

<rich:hotKey selector="#ls" key="home" handler="#{rich:component('ls')}.removeAll()"/>

In the example above the "selector" attribute is used. So the keys work only if <rich:listShuttle> component is focused.

You could press Right or Left keys in order to move some selected items between lists. You could press Home or End buttons in order to move all items between lists.

With the help of the "timing" attribute you could manage <rich:hotKey> registration timing. There are three possible values of this attribute:

The "type" attribute defines the type of keyboard event. Possible values are: onkeyup, onkeypress and onkeydown.

The "disableInInput" attribute disables the <rich:hotKey> if it is activated on input elements and the value of this attribute is true.

The "checkParent" attribute defines the hotkey handling of events generated by child components nested into the parent component to which the <rich:hotKey> is attached.

The <rich:hotKey> component also provides a number of JavaScript API functions. There is an example below.

<h:form id="myForm">

    <rich:hotKey id="myKey" key="ctrl+g" handler="alert('Ctrl+G is pressed')" />

    <button onclick="${rich:component('myKey')}.enable(); return false;">Turn Ctrl+G On</button>

    <button onclick="${rich:component('myKey')}.disable(); return false;">Turn Ctrl+G Off</button>

</h:form>

In the example above the Ctrl+G is registered as a global hotkey, so if you press this key combination the alert window with the "Ctrl+G is pressed" text appears. With the help of enable(), disable() JavaScript API fucntions you could enable or disable registered hotkey.

Table of <rich:hotKey> attributes.

Visit the HotKey page at RichFaces LiveDemo for examples of component usage and their sources.