Wednesday Mar 28, 2012

Gotcha when using JavaScript in ADF Regions

You use the ADF Faces af:resource tag to add or reference JavaScript on a page. However, adding the af:resource tag to a page fragment my not produce the desired result if the script is added as shown below

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
 <af:resource type="javascript">
  function yourMethod(evt){ ... }
</af:resource>

Adding scripts to a page fragment like this will see the script added for the first page fragment loaded by an ADF region but not for any subsequent fragment navigated to within the context of task flow navigation. The cause of this problem is caching as the af:resource tag is a JSP element and not a lazy loaded JSF component, which makes it a candidate for caching.

To solve the problem, move the af:resource tag into a container component like af:panelFormLayout so the script is added when the component is instantiated and added to the page. 

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:panelFormLayout>
 <af:resource type="javascript">
    function yourMethod(evt){ ... }
 </af:resource>
</af:panelFormLayout> 

Magically this then works and prevents browser caching of the script when using page fragments.

Thursday Feb 23, 2012

How-to define a default action for page fragments

The af:form component has a DefaultCommand property that, when set to the component Id of a command component like af:commandButton invokes the associated command action when the enter key is pressed anywhere in this form. However, if the form fields are contained in a page fragment exposed in a region then using the DefaultCommand property may not be an option as it is difficult to predict the command button id and its surrounding naming containers.

A solution to this is to use JavaScript on the UI input components that, when the Enter key is pressed virtually press a button within the page fragment (note that the af:form element belongs to the parent page and that you can only have a single af:form component per browser page)

Let's assume a page fragment with a single input text component and a command button to press:

<af:panelFormLayout id="pfl1">
  <f:facet name="footer">
     <af:commandButton text="Print Field Value" id="cb1" partialSubmit="true"                                            
                       clientComponent="true" action="#{View1Bean.onButtonPressed}"/>
   </f:facet>
   <af:inputText label="Enter Field" id="it1" binding="#{View1Bean.inputTextField}">
      <af:clientListener method="onFieldEnterKey" type="keyUp"/>
   </af:inputText>  
</af:panelFormLayout>

The command button is bound to a managed bean action method. By default, the action method is invoked when users press the command button. However, with the JavaScript shown next, this can be simulated and mapped to the Enter key press in the text field.

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:af=http://xmlns.oracle.com/adf/faces/rich
          xmlns:f="http://java.sun.com/jsf/core">

<af:resource type="javaScript">
   //function called by the client listener

  function onFieldEnterKey(inputEvent){
    if (event.getKeyCode() == AdfKeyStroke.ENTER_KEY) {
      //get the input text component from the event            
      var inputTextField = inputEvent.getSource();
      //the button is relative to the input text field so
      //relative search will do with no worrying about naming
      //containers
      var defaultButton = inputTextField.findComponent('cb1');
      //perform a partial submot
      var partialSubmit = true;
      AdfActionEvent.queue(defaultButton,partialSubmit);
      //Enter key does not need to go to server as we
      //queued a new event
       event.cancel();
   }
}
</af:resource>

For JavaScript to work, note the use of the af:clientListener on the input text field and the use of the clientComponent="true" configuration on the button.

Sunday Jan 15, 2012

How-to invoke ADF bindings in page templates

ADF Faces page templates may have their own PageDef file defined to access the ADF binding layer or have ADF bound components added to the template.

ADF Faces pages that use the template will reference the template's PageDef file in the Executable section of their own PageDef file. In this sample, the template binding reference in the the template consumer page PageDef file is ptb1.

The code below invokes a method binding in the template's PageDef file from a command button on the page. The "trick" for accessing the template's PageDef file is to know that it is another instance of BindingContainer.

public String cb1_action() {
  BindingContext bctx = BindingContext.getCurrent();
  DCBindingContainer bindings = 
                (DCBindingContainer)bctx.getCurrentBindingsEntry();
  //access the page template Pagedef file reference in the 
  //Executable section of the consumer page's Pagedef file
  DCBindingContainer templateBinding = 
                    (DCBindingContainer)bindings.get("ptb1");
  //get the MethodBinding 
  OperationBinding printMethod = 
        (OperationBinding)templateBinding .get("printThis");
  //invoke the print method exposed on the template's PageDef file
  printMethod.getParamsMap().put("message","Hello World");
  printMethod.execute();
  return null;
}
 
  

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