Passing Parameters from JavaScript to Manage/Backing bean

Sometimes you cannot avoid using JavaScript even if that is not the very recommended approach with ADF. However when doing the same there is often need to pass values from java script function to bean. If you got yourself in scenario like this.. here is how you can do it.

In your JavaScript method you can assign the values to param and pass it to the event.

function myClientListener(event){
var element = event.getSource();
var param = {city:"New York", country:"US"};
AdfCustomEvent.queue(element, "jsServerListener", param, true);
event.cancel();
}

In your page associate this event to a handler method from java bean

<af:serverListener type="jsServerListener"
method="#{MyBean.serverEventHandler}"/>

Now in bean here is how you can get access to it:

public void serverEventHandler(ClientEvent clientEvent) {
System.out.println(clientEvent.getParameters().get("city"));
System.out.println(clientEvent.getParameters().get("country"));
}

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>

Calling MethodBinding/WebService on Client Event... by converting it to Server Event .

There are so many cases where a method binding and/or web service needs to be called on a client event. When working with ADF rich faces components lots of component do not have properties to capture client event. However ADF does provides ClientListener and ServerListener that can be used to achieve the same. As we know using JavaScript may not be the best solution recommended but when nothing else works, this approach may come handy.

This workaround is extracted from the one of the works by Andrejus in his post related to Custom LOV Type. So in this blog I will to compile how can we do the same. You can download the sample application here.

Test case we are trying to achieve is when user clicks on af:image component we call a bean method and inside this bean method we call a method binding.

1. In an Oracle Fusion Application create a jspx page (say RunMe.jspx). Drag and drop an af:image component on the page. Provide the values for property Source and Short Desc.

2. Right Click on the Web Content folder of the View-Controller project and select New. In the New Gallery wizard select Web Tier, HTML and then select JavaScript Files in Items section and click ok.

 3. Add following method to it.

4. Create a bean and add a method to it like below.

5. Register bean to adfc-config.xml as shown.

6. Click on the jspx and go to the Structure window. Drag and drop af:resource inside the af:document and select Type as 'javascript' and for Source provide the name of java script file.

7. Drag and Drop Client Listener and Server Listener inside af:image component and set the property as shown.

8. Run the jspx (RunMe.jspx) and test the server log. Since we just an image when we run the jspx we see something like

Clicking on the image now invokes an client event which is caught by clientListener and which call the Javascript method. This method raises and server event which is caught by ServerListener and which inturn invokes an bean method as handler. Inside this bean we can call webservice/or method binding or perform any logic we want.

Since we just have an system output we can see that bean method is called on the click event.