Client Side programming in ADF Faces Rich Client Components

Really cool, Web 2.0, AJAX powered JSF applications are inconceivable without substantial use of JavaScript. Whether or not the Java developers like it, it is a fact of life. However, frequently frameworks – such as ADF Faces – will hide a lot of the JavaScript complexity from the JSF developer, yet provide a fancy, rich UI. It is perfectly possible to develop a rich, functional, attractive Web UI using ADF 11g Rich Faces in a declarative way that does not require the use of any JavaScript at all.

But even then – there will be situations where it is not enough. And you need to go for the real stuff: raw JavaScript!

In ADF 11g, there is substantial support for JavaScript programming.
Some elements that you may find of interest when leaving the realm of JSF and enter the wonderful world of JavaScript:

– we can define ClientListeners on many components and many events; when the client side event occurs on the component, our own JavaScript will be invoked with details on the event. Examples of such events are Right Mouse Click on any event, Value Change in input components, opening/closing of a popup, pressing on button of link, selecting of a tree node,  etc. In addition to these intrinsic component events, there are the ‘normal’ JavaScript events such mouseover, keydown, focus and blur that we can tap into

– in addition to regular client listeners, we have also showPopupBehavior elements, that we can use to tie a popup directly to a component; this will bring up the popup as a result of the specified action on the component, such as a RMB (right mouse button) click or a double click.

– we have a JavaScript Client API that provides access to client side representations of the components in our case and that we can use to read from and set properties to; this API also allows client side manipulation of certain components. For example: we can make a popup component show itself.

– we can add JavaScript to be executed on the client at the end of processing a PPR request/response cycle: ADF Faces has a built in AJAX mechanism that easily be used to declaratively refresh part of a page in a response to events like a value changing, a button being pressed or a poll timer firing. We can now piggyback JavaScript snippets on this PPR response and have the client execute it once the PPR refresh is complete.

In this article – and some subsequent posts over the next few days – I will demonstrate examples of each of these client oriented mechanisms and features in ADF 11g Rich Faces. Note that I ran into some issues as well – like programmatically display a popup multiple time does not seem to work (in TP2).

PopupBehavior to bring up Popup Window

The first example of the new Client side activity facilities in ADF 11g Rich Faces is demonstrated here:

when the user right mouse button clicks on the date entry field, a popup is displayed in which the user can select the preferred date & time format to use for displaying the current Date and Time.

This is achieved by including the showPopupBehavior element inside the inputDate component. The showPopupBehavior is set to triggerType equals contextMenu – which is the trigger type for RMB clicking the element. It used popupId to refer to the popup element that should be displayed and uses alignId to indicate relative to which element the popup should be displayed. The align attribute finally indicates where with regard to that alignId element the popup should appear:

          <af:panelLabelAndMessage label="When??">
            <af:inputDate id="whenField" partialTriggers="patternPicker"
                          value="#{utilityBean.today}" simple="true">
              <af:showPopupBehavior popupId="popupWindow" align="afterEnd"
                                    alignId="whenField"
                                    triggerType="contextMenu"/>
              <af:convertDateTime type="date" dateStyle="short"
                                  pattern="#{utilityBean.dateFormat}"/>
            </af:inputDate>
          </af:panelLabelAndMessage>

The selectOneRadio component has autoSubmit set to true and the inputDate component has the id of the selectOneRadio included in its partialTriggers attribute. As a result, selecting a different format in the popup will immediately lead to a refresh of the display of the date and time.

        <af:popup id="popupWindow">
          <af:panelWindow modal="true" title="Choose the Date/Time Format">
            <af:panelGroupLayout>
              <af:selectOneRadio id="patternPicker"
                                 value="#{utilityBean.dateFormat}"
                                 autoSubmit="true">
                <af:selectItem label="2008/01/03 22:35:56"
                               value="yyyy/MM/dd HH:mm:ss"
                               shortDesc="yyyy/MM/dd HH:mm:ss"/>
                <af:selectItem label="03-01-2008 10:36:56PM"
                               value="dd-MM-yyyy hh:mm:ssa"
                               shortDesc="dd-mmm-yyyy HH:mm:ss"/>
                <af:selectItem label="Thu 10 o'clock PM, (UTC+01:00) Berlin"
                               value=" EE hh 'o''clock' a, zzzz"
                               shortDesc="dd-mmm-yyyy HH:mm:ss"/>
                <af:selectItem label=" Thu Jan 2008 22:36:56"
                               value=" E MMM yyyy HH:mm:ss"
                               shortDesc="dd-mmm-yyyy HH:mm:ss"/>
                <af:selectItem label="Thursday 3 January 10:36 PM"
                               value="EEEEEEEE d MMMMM hh:mm aaa"
                               shortDesc="ddMMyyyy HH:mm:ss"/>
              </af:selectOneRadio>
            </af:panelGroupLayout>
          </af:panelWindow>
        </af:popup>

The backing bean used here is hardly interesting: two properties – today and dateFormat – with their accessors. It is specified in faces-config.xml in the normal way:

    <managed-bean>
        <managed-bean-name>utilityBean</managed-bean-name>
        <managed-bean-class>nl.amis.adffaces.UtilityBean</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>

Now this rather nonsensical page offers a good opportunity to get to know the various faces of the inputDate component. I had to have Frank Nimphius tell me that given the right pattern the inputDate would also display and allow entry of time values. And indeed it does:

When I select a pattern that includes timezones:

it will even cater for those:

Resources

The ADF 11g Rich Faces JavaScript API.

The ADF Faces 11g Web UI Developer Guide