JBoss.orgCommunity Documentation

6.53.  < rich:hotKey >

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.

Table 6.218. rich : hotKey attributes

Attribute NameDescription
bindingThe attribute takes a value-binding expression for a component property of a backing bean
checkParentDefines the hotkey handling of events generated by child components nested into the parent component to which the <rich:hotKey> is attached.
disableInInputDisables the hotkeys activated on input elements when the value of this attribute is "true".
handlerDefines the JavaScript function name which is called on hotkey activation
idEvery component may have a unique id that is automatically created if omitted
keyDefines the hotkey itself
renderedIf "false", this component is not rendered
selectorDefines a selector for query
timingDefines the key registration timing
typeDefines the type of a keyboard event (onkeyup, onkeypress etc.)

Table 6.219. Component identification parameters

NameValue
component-typeorg.richfaces.HotKey
component-classorg.richfaces.component.html.HtmlHotKey
component-familyorg.richfaces.HotKey
renderer-typeorg.richfaces.HotKeyRenderer

To create the simplest variant on a page use the following syntax:

Example:


...
<rich:hotKey key="alt+a" handler="alert('alt+A is pressed')" />
...

Example:

import org.richfaces.component.html.HtmlHotKey;     

...
HtmlHotKey myHotKey = new HtmlHotKey();
...

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.

Example:


...
<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:

  • "immediate" - the component is rendered in browser immediately

  • "onload" - the component is rendered after the page is fully loaded

  • "onregistercall" - the component is rendered only after JavaScript API for the key registration is used.

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.


<rich:hotKey> has no skin parameters and custom style classes, as the component isn't visual.

Here you can see an example of <rich:hotKey> usage and sources for the given example.