skip to main content
Diagrammer > Programmer's documentation > Building Web applications > Accessible displays in web applications > Configuring the hotkeys
 
Configuring the hotkeys
You can change the default key or key combinations associated with actions and configure your own hotkeys by writing a small amount of customized code. In JSF™ Faces (JSF)™ applications, you must set the hotkeys attribute of your View tag to your own hotkey values, as shown in the following code example.
 
<jvdf:diagrammerView ... ...
                    hotkeys="{singleSelect : {hotkey : IlvUtil.keys.SPACE},
                                  zoomIn : {hotkey : [ IlvUtil.keys.NUMPAD_PLUS, IlvUtil.keys.EQUALS ],
                                            filter : { ctrl : false, shift : true }
                                           }
                            }">
...
</jvdf:diagrammerView>
In JavaScript™ applications, you must create the hotkeys object and then call the setHotkeys method of the View object as shown in the following code example.
 
var diagrammer = new IlvView(x, y, w, h);
...
...
diagrammer.setAccessible(true);
 
var hotkeys = {singleSelect : {hotkey : IlvUtil.keys.SPACE},
                    zoomIn : {hotkey : [ IlvUtil.keys.NUMPAD_PLUS, IlvUtil.keys.EQUALS ],
                              filter : { ctrl : false, shift : true }
                             }
             };
diagrammer.setHotkeys(hotkeys);
The following table lists the actions you can customize.
Action
Description
Default key or key combination
Up
Moves focus to the upper element in accordance with the navigation style.
Up Arrow
Down
Moves focus to the lower element in accordance with the navigation style.
Down Arrow
Left
Moves focus to the element on the left in accordance with the navigation style.
Left Arrow
Right
Moves focus to the element on the right in accordance with the navigation style.
Right Arrow
singleSelect
Selects the graphic element that has the current focus.
Enter
zoomIn
Zooms in on an area of the view.
Ctrl+Plus (+)
zoomOut
Zooms out of an area of the view.
Ctrl+Minus (-)
panLeft
Pans the view to the left.
Ctrl+Left Arrow
panRight
Pans the view to the right.
Ctrl+Right Arrow
panUp
Pans the view up.
Ctrl+Up Arrow
panDown
Pans the view down.
Ctrl+Down Arrow
moveLeft
Moves the selected graph elements left.
Shift+Left Arrow
moveRight
Moves the selected graph elements right.
Shift+Right Arrow
moveUp
Moves the selected graph elements up.
Shift+Up Arrow
moveDown
Moves the selected graph elements down.
Shift+Down Arrow
The following code example shows an object that defines the keys and corresponding keycodes that you can use for hotkeys in JViews web applications.
IlvUtil.keys = {
    BACKSPACE: 8,
    TAB: 9,
    CLEAR: 12,
    ENTER: 13,
    SHIFT: 16,
    CTRL: 17,
    ALT: 18,
    PAUSE: 19,
    CAPS_LOCK: 20,
    ESCAPE: 27,
    SPACE: 32,
    PAGE_UP: 33,
    PAGE_DOWN: 34,
    END: 35,
    HOME: 36,
    LEFT_ARROW: 37,
    UP_ARROW: 38,
    RIGHT_ARROW: 39,
    DOWN_ARROW: 40,
    INSERT: 45,
    DELETE: 46,
    HELP: 47,
    LEFT_WINDOW: 91,
    RIGHT_WINDOW: 92,
    SELECT: 93,
    NUMPAD_0: 96,
    NUMPAD_1: 97,
    NUMPAD_2: 98,
    NUMPAD_3: 99,
    NUMPAD_4: 100,
    NUMPAD_5: 101,
    NUMPAD_6: 102,
    NUMPAD_7: 103,
    NUMPAD_8: 104,
    NUMPAD_9: 105,
    NUMPAD_MULTIPLY: 106,
    NUMPAD_PLUS: 107,
    PLUS: 107,
    NUMPAD_ENTER: 108,
    NUMPAD_MINUS: 109,
    MINUS: 109,
    NUMPAD_PERIOD: 110,
    NUMPAD_DIVIDE: 111,
    EQUALS: 187,
    DASH: 189,
    F1: 112,
    F2: 113,
    F3: 114,
    F4: 115,
    F5: 116,
    F6: 117,
    F7: 118,
    F8: 119,
    F9: 120,
    F10: 121,
    F11: 122,
    F12: 123,
    F13: 124,
    F14: 125,
    F15: 126,
    NUM_LOCK: 144,
    SCROLL_LOCK: 145
  };

Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.