ADF 11g Rich Faces: using clientTriggers and JavaScript API to implement client side logic in ADF Faces pages (Client Side programming in ADF Faces Rich Client Components Part 3)

Lucas Jellema 3
0 0
Read Time:3 Minute, 48 Second

As described in earlier postings in this series, the ADF Faces 11g RichFaces library has several facilities for client side logic to complement the already pretty rich client functionality. Among these facilities are the JavaScript API that allows client side manipulation of the components in the page, the clientTrigger mechanism that provides a rich alternative to the classic JS Event triggers such as onclick and onmouseover and the option to add JavaScript to PPR responses.

In this article, we will see how to respond to a valueChange event on an inputText item – that fires when the user has changed the value in a field and navigates out of the field. In this simple example, we use to clientListeners on the valueChange event.

The first one will turn the value the user has entered and turns to uppercase:

        <af:panelFormLayout>
          <af:inputText label="Name" id="inputText1"  shortDesc="The Name of the Entity" >
            <af:clientListener method="processChange" type="valueChange" />
            <af:clientListener method="processChange2" type="valueChange" />
          </af:inputText>
        </af:panelFormLayout>

and after leaving the item, pressing a button, alt-tabbing to another application or navigating to another browser window, the valueChange event fires and the processChange function invoked.

The function processChange is implemented like this:

      <trh:script rendered="true"   text="
       function processChange(event) {
         var inputField = event.getSource();
         inputField.setValue(event.getNewValue().toUpperCase());
      }
"/>

The second clientTrigger will perform a validation on the value.

If the value includes an X, Y or Z, the validation in processChange2 kicks in.

The client side logic for performing the validation and marking the field as invalid looks like this:

<trh:script rendered="true"   text="

  function validateNoXYZ( value) {
     return (value.indexOf('X') + value.indexOf('Y') + value.indexOf('Z'))==-3;
  }


  function remove(s, t) {
  /*
  **  Remove all occurrences of a token in a string
  **    s  string to be processed
  **    t  token to be removed
  **  returns new string
  */
  i = s.indexOf(t);
  r = '';
  if (i == -1) return s;
  r += s.substring(0,i) + remove(s.substring(i + t.length), t);
  return r;
  }

  function processChange2(event) {
     var inputField = event.getSource();
     if (validateNoXYZ(event.getNewValue())) {
        inputField.setStyleClass(remove( inputField.getStyleClass(), 'p_AFError'));
        inputField.setShortDesc(remove(inputField.getShortDesc(), 'Please, no X, Y or Z in this item!'));
     }
     else {
       /* set styleclass x1p on item! (for red box) */
       inputField.setStyleClass(inputField.getStyleClass()+ ' p_AFError');
       inputField.setShortDesc('Please, no X, Y or Z in this item! '+ inputField.getShortDesc());
     }
  }
"/>

Note: when the valueChange event fires and the logic in processChange makes another change to the value – turning it to uppercase for example – a second valueChange event is fired and processChange2 will be invoked twice in a row! The order in which the clientListeners fire is the order in which they are defined within the parent element.

        <af:panelFormLayout>
          <af:inputText label="Name" id="inputText1"  shortDesc="The Name of the Entity" >
            <af:clientListener method="processChange" type="valueChange" />
            <af:clientListener method="processChange2" type="valueChange" />
          </af:inputText>
        </af:panelFormLayout>

I have tried to show a popup window with an appropriate error message. However, I ran into issues.

Client Side display/hide of ShowDetail

Just another simple example, to see what we can do:

When the value in the Name field is changed, a client side event listener is invoked to show some details (in a ShowDetail container):

The code required for this consists of three elements: the ShowDetail

        <af:showDetail disclosed="false" id="infoPanel">
          <af:panelHeader text="Important Information"
                          inlineStyle="width:200px;height:300px;">
          <af:inputText label="ID " id="inputText2" clientComponent="true"></af:inputText>
            <af:image source="http://www.oracle.com/admin/images/ocom/hp/oralogo_small.gif"/>
          </af:panelHeader>
        </af:showDetail>

, the Name inputText with the clientListener

          <af:inputText label="Name" id="inputText1" autoSubmit="true"
                          value="#{someBean.value}"
                          shortDesc="The Name of the Entity">
            <af:clientListener type="valueChange" method="showInfo"/>
          </af:inputText>

and the JavaScript function that make the ShowDetail display itself:

      <trh:script text="
      function showInfo() {
        var info = AdfPage.PAGE.findComponent('infoPanel' );
        info.setDisclosed(true);
      }
      "/>

Resources

The ADF 11g Rich Faces JavaScript API.

The ADF Faces 11g Web UI Developer Guide

Part 1 in this series:  Client Side programming in ADF Faces Rich Client Components

Part 2: ADF 11g Rich Faces: focus on field after button press or PPR – Including JavaScript in PPR response and ClientListeners (Client Side programming in ADF Faces Rich Client Components Part 2)

 

About Post Author

Lucas Jellema

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Kubernetes & Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press book Oracle SOA Suite 12c Handbook. Frequent presenter on user groups and community events and conferences such as JavaOne, Oracle Code, CodeOne, NLJUG JFall and Oracle OpenWorld.
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

3 thoughts on “ADF 11g Rich Faces: using clientTriggers and JavaScript API to implement client side logic in ADF Faces pages (Client Side programming in ADF Faces Rich Client Components Part 3)

  1. Hi Lucas,
    Nice post . We were trying to implement some js on af:richTextEditor(wysiwyg) by adding af:clientListner .
    The js gets called only for the event onMouseOver . All other events like blur , keyPress are not working .
    Any suggestions would be welcome.
     
     

  2. Nice series,

    for the validation, I think it may be better to create a custom JSF-validator (+ client-side validator)
    that ensures there is no X, Y or Z on the server as well (due to security running validation on the server as well is better)
    See Trinidad docs for the client validators:

    http://myfaces.apache.org/trinidad/devguide/clientValidation.html

    Pretty cool tool.

    You may also want to read this:
    http://jroller.com/mwessendorf/entry/ajax_client_side_convertion_with

Comments are closed.

Next Post

Oracle BPEL Process Manager: Most efficient way to manage dynamic process level (cross instance) data

BPEL Process definitions frequently include parameters that influence the flow through the process. Sometimes these parameters are embedded as hard coded values sometimes variables dynamically retrieved from a PartnerLink or as part of the initial request. These parameters can be used for various purposes: currency exchange rate for calculating prices […]
%d bloggers like this: