How to launch LOV and Date dialogs using the keyboard

Using the ADF Faces JavaScript API, developers can listen for user keyboard input in input components to filter or respond to specific characters or key combination. The JavaScript shown below can be used with an af:clientListener tag on af:inputListOfValues or af:inputDate. At runtime, the JavaScript code determines the component type it is executed on and either opens the LOV dialog or the input Date popup.  

<af:resource type="javascript">
    /**
    * function to launch dialog if cursor is in LOV or
    * input date field
    * @param evt argument to capture the AdfUIInputEvent object
    */

  function launchPopUpUsingF8(evt) {
     var component = evt.getSource();
     if (evt.getKeyCode() == AdfKeyStroke.F8_KEY) {
     //check for input LOV component
       if (component.getTypeName() == 'AdfRichInputListOfValues') {
           AdfLaunchPopupEvent.queue(component, true);
           //event is handled on the client. Server does not need
           //to be notified
           evt.cancel();
         }
        //check for input Date component      
        else if (component.getTypeName() == 'AdfRichInputDate') {
          //the inputDate af:popup component ID always is ::pop
          var popupClientId = component.getAbsoluteLocator() + '::pop';
          var popup = component.findComponent(popupClientId);
          var hints = {align : AdfRichPopup.ALIGN_END_AFTER,
                       alignId : component.getAbsoluteLocator()};
          popup.show(hints);
          //event is handled on the client. Server does not need
          //to be notified
          evt.cancel();
       }        
     }
}

</af:resource>

The af:clientListener that calls the JavaScript is added as shown below.

<af:inputDate label="Label 1" id="id1">
   <af:clientListener method="launchPopUpUsingF8" type="keyDown"/>
</af:inputDate>

As you may have noticed, the call to open the popup is different for the af:inputListOfValues and the af:inputDate. For the list of values component, an ADF Faces AdfLaunchPopupEvent is queued with the LOV component passed s an argument. Launching the input date popup is a bit more complicate and requires you to lookup the implicit popup dialog and to open it manually. Because the popup is opened manually using the show() method on the af:popup component, the alignment of the dialog also needs to be handled manually. For this, the popup component specifies alignment hints, that for the ALIGN_END_AFTER hint aligns the dialog at the end and below the date component. The align Id hint specifies the component the dialog is relatively positioned to, which of course should be the input date field.

The ADF Faces JavaScript API and how to use it is further explained in the Using JavaScript in ADF Faces Rich Client Applications whitepaper available from the Oracle Technology Network (OTN)

http://www.oracle.com/technetwork/developer-tools/jdev/1-2011-javascript-302460.pdf

An ADF Insider recording about JavaScript in ADF Faces can be watched from here

http://download.oracle.com/otn_hosted_doc/jdeveloper/11gdemos/adf-insider-javascript/adf-insider-javascript.html

Comments:

Post a Comment:
Comments are closed for this entry.
About

The Oracle JDeveloper forum ranks in the Top 5 of the most active forums on the Oracle Technology Network (OTN).



The OTN Harvest blog is a summary of selected topics posted on the OTN Oracle JDeveloper forum.



It is an effort to turn knowledge exchange into an interesting read for developers who enjoy little nuggets of wisdom





Frank Nimphius

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today