X

The blog for hints & tips about Oracle Application Development Framework and Mobile Application Framework

  • ADFv
    January 25, 2011

How-to control the keyboard tab behavior in a LOV field

Frank Nimphius
Master Principal Product Manager

The keyboard tabbing behavior of list of value fields in
ADF Faces is such that the focus is set to the LOV icon when navigating out of
the input field.

While this behavior is convenient for those who
frequently use List of Values, it's a bit annoying to users who prefer to type
ahead and either click onto the LOV icon or use a keyboard shortcut to launch
the select dialog if needed.











In the following, I explain how to change the default LOV
behavior in ADF Faces with a little JavaScript.

The modified LOV field tabbing behavior will set
the focus to the next input field when the tab keyboard key is pressed. To
launch the list of values dialog, users press the F2 key.

The JavaScript is added to the page using the af:resource tag. Note that while the
JavaScript code in the sample is added in the tag body, in real life it should
be referenced from an external file.

 <af:document id="d1">

  <af:resource type="javascript">

    function tabOutOfLOVField(evt){       

       keyCode = evt.getKeyCode();

       if (keyCode == AdfKeyStroke.TAB_KEY){

          var lovField = evt.getSource();

          var nextField =
lovField.findComponent("it2");

          nextField.focus();

          evt.cancel();           

       }

       else if(keyCode == AdfKeyStroke.F2_KEY){

         var lovField = evt.getSource();

        
AdfLaunchPopupEvent.queue(lovField,true);

        evt.cancel();           

      }

    }

    </af:resource>

  ...

</af:document>

The JavaScript code first determines the keyboard key a
user pressed. If the key is the TAB key then
the list of value field is referenced from the event object. The next
navigation target, the input field to add focus to next, is found by a relative
search using the input text ID property value. If the user pressed key is F2 then the list of value field is
queued for its popup launch event so the LOV dialog opens. In both cases, as
there is no more to do for ADF Faces on the server side, the event is
cancelled, to suppress server propagation of the keyboard action.

To execute the JavaScript code, an af:clientListener tag is added to the af:inputListOfValues
component as shown below

<af:inputListOfValues id="departmentIdId" ...
>

   <f:validator
binding="#{bindings.DepartmentId.validator}"/>

   <af:convertNumber
groupingUsed="false"

                                    pattern="#{bindings.DepartmentId.format}"/>

    <af:clientListener
method="tabOutOfLOVField" type="keyDown"/>

</af:inputListOfValues>

The client listener tag added to the input component
listens for the keyboard down event and calls the JavaScript function explained
earlier. For the next field, the employee Id field in this sample, to be found from
JavaScript, it must have its clientComponent
property set to true.

<af:inputText value="..."  clientComponent="true">

            ...

  </af:inputText>

ADF Faces uses a hybrid approach in rendering its rich user
interface. For best performance - unlike other Ajax frameworks - only components
with a behavior render client JavaScript objects. To ensure a component is
represented by a JavaScript object, an ADF Faces client side component, the
component clientComponent attribute must
be set to true or a clientListener
tag need to be added. If you forget to set one of the two then any attempts to
access the component from JavaScript fails

Note: Just as a reminder:
Don't use JavaScript DOM access when referencing ADF Faces components. The browser
DOM API operates on the generated markup and not the ADF Faces client
component. When using JavaScript in ADF Faces, always use the ADF Faces client
component API documented here

http://download.oracle.com/docs/cd/E17904_01/apirefs.1111/e12046/toc.htm

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.