Shifting Focus on Page and Popup using Arrow Keys.

Recently I found many threads in forum inquiring about shifting focus on components via arrow keys. There are no build in properties in adf component that can do this. In order to achieved with the combination of ClientListener and JavaScript.

As we know ClientListener can be used to capture the client event and can raise JavaScript function against it and in the function you can shift the focus to any desired components on the UI.
            
So here is the test case which has two parts:
1. On the page we have two af:commandButtons named as 'Save' and 'Cancel'. Once the focus is on any of the two button we can use Right Arrow Key and Left Arrow Key to shift the focus between then.
2. Same behavior is simulated for the buttons in the popup. This was added to cover one specific issue posted in Oracle forum. In this case a button is provided to launch a popup which contains Dialog. Two commandbutton is dropped inside the toolbar facet. And once the focus is on any of the command buttons they can be shifted using Right and Left Arror Keys.

Here is the javascript code:

and here is the code for the Jspx file:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1">
      <af:resource type="javascript" source="/javascript/MyJavaScript.js"/>
      <af:form id="f1">
        <af:panelHeader text="Change Focus on components directly on Page." id="ph1">
          <f:facet name="context"/>
          <f:facet name="menuBar"/>
          <f:facet name="toolbar"/>
          <f:facet name="legend"/>
          <f:facet name="info"/>
          <af:spacer height="30" id="spacer1"/>
          <af:commandButton text="Save" id="commandButton1">
            <af:clientListener method="shiftFocusToCancel" type="keyUp"/>
          </af:commandButton>
          <af:commandButton text="Cancel" id="commandButton2">
            <af:clientListener method="shiftFocusToSave" type="keyUp"/>
          </af:commandButton>
        </af:panelHeader>
        <af:spacer height="30" id="spacer2"/>
        <af:panelHeader text="Change Focus on components on Popup."
                        id="panelHeader1">
          <f:facet name="context"/>
          <f:facet name="menuBar"/>
          <f:facet name="toolbar"/>
          <f:facet name="legend"/>
          <f:facet name="info"/>
          <af:spacer height="30" id="s1"/>
          <af:commandButton text="Click me to launch Popup." id="cb3"
                            partialSubmit="true">
            <af:showPopupBehavior popupId="p1" triggerType="click"/>
          </af:commandButton>
          <af:popup id="p1">
            <af:dialog id="d2" type="none">
              <f:facet name="buttonBar">
                <af:group id="g1">
                  <af:commandButton text="OK" id="cb1">
                    <af:clientListener method="shiftFocusToPopupCancel"
                                       type="keyUp"/>
                  </af:commandButton>
                  <af:commandButton text="Cancel" id="cb2">
                    <af:clientListener method="shiftFocusToPopupOK" type="keyUp"/>
                  </af:commandButton>
                </af:group>
              </f:facet>
              <af:outputFormatted value="You have got a popup!" id="of1"/>
            </af:dialog>
          </af:popup>
        </af:panelHeader>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>