Sunday, December 9, 2012

Advanced hotkeys in ADF.

In this post I'm going to share a way to get a fully functional hotkeys support in ADF applications.
AccessKey property has many restrictions which I don't like:
  • it is a browser specific feature (accessKey is triggered by browser-specific and platform-specific modifier keys. It even has browser-specific meaning. For example, Internet Explorer 7.0 will set focus when you press Alt+. Firefox 2.0 on some operating systems you press Alt+Shift+. Firefox 2.0 on other operating systems you press Control+);
  • I can't have hotkeys like Ctrl+Space;
  • I can't trigger particular events;
  • I can't set several hotkeys for one component;
  • and so on.
So I've written a script which gives me ability to circumvent this restrictions and easily add hotkeys (and one auxiliary script which provides methods to obtain af:document component, attach listeners to dom elements in different browsers and initialize my custom libraries when document is loaded).




And now to register the hotkey I should only add a clientAttribute with name Accelerator to a component. The value is a key combination like Ctrl+DOM_VK_A or Ctrl+DOM_VK_A,Ctrl+DOM_VK_S (comma-separated list).
 
In this case an ActionEvent will be triggered when the user will press Ctrl+A or Ctrl+S. But not all components support ActionEvent and in this case script can trigger custom events. Event handler.


Sometime I need different logic to be executed depending on hotkey. To achieve this I can send different custom actions to the application server with javascript handler (or the same action with different params). Server listeners. If there is a client attribute with name AcceleratorHandler in the component with hotkey, a javascript handler will be executed when user triggers a hotkey.

Javascript method takes three arguments:
  • aComponent - reference to the component for which the event is triggered;
  • aAccellerator - string value which contains key combination that user has pressed;
  • aEventType - a value of clientAttribute with name AcceleratorEvent if it exists.

There is a performance issue when user inputs the text in the textfield. If the script will react on each keypress, it will be a senselessly work. So by default script doesn't react on key pressed when the focus is in a text field except two cases:
  • it will process only hotkeys for focused component;
  • when component has a client attribute processKeydownAsHotkey with value TRUE.
To make script working you should add resources to document's metacontainer facet and client listener onLoad. Sample application is available here. And simple html page to generate accellerator is here.
CommonUtils.js Hotkeys.js  

4 comments:

  1. Thanks for the Excellent post!! Helped a lot.

    ReplyDelete
  2. Thank it's helpful, But the sample is not available!?

    ReplyDelete
  3. Please i want the examples i didnt find them 😣

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete