The keyboard shortcut handler component uses the Javascript library Mousetrap (https://github.com/ccampbell/mousetrap).

Installation:

To use the keyboard shortcuts handling, the following JavaScript resources must be included in the header of the used HTML template where all the other JavaScript libraries are defined (e.g. templates/Root.html):

mousetrap.min.js

Third-party library which provide the functionality for the shortcuts handling.

shortcuts.js

Library which binds the shortcuts functionality to the JAXFront Visualizer components.

<script language="JavaScript" src="js/jquery/plugins/mousetrap.min.js" type="text/javascript"></script>
<script language="JavaScript" src="js/jquery/plugins/shortcuts.js" type="text/javascript"></script>

In the XUI-Editor go to the appropriate node and create a XUI Component if necessary. Select "Style" > "Choice" and set the "Visualizer type" to advancedComboBox. The component itself will be configured with a HTML escaped JSON String in the NLS file. For Example:

/rootNode/choice/fahrt%label%choice={"label"&co;"Lokale Verteilfahrt", "desc"&co;"Beschreibung", "imgClass"&co;"lokaleVerteilfahrt"}

This NLS Entry for one element will be rendered as follow: