ADF 11g Rich Faces: using popup for viewing and editing big fields

During the Oracle Open World conference going on this week I was asked by one of the attendees to one of my sessions for a little guidance on the following challenge in ADF:

“We currently have an Oracle Forms application that we are rebuilding in ADF 11g. One of the features in this Forms application, is that whenever a field can contain a really large block of text, it will automatically be shown in a popup when the user clicks on or otherwise enters the field. Inside the popup, the entire field and its contents can be shown. Could you show me how to do this in ADF 11g?”

And that is a type of question I quite like. It is tangible, it is something I can easily help out with and by doing so promote ADF a little. So here it goes.

The application is a very simple one. The data side of things (Model project and Data Control) are not relevant to the solution. They are simply there.

The starting point is a data bound form that looks like this:

The Biography field is the big one here – it can contain very large blocks of text.

My objective in this case is: whenever the user navigates to the biography field, a popup should appear that presents the complete contents and that allows the user to edit the biography. When the user closes the popup or navigates out of the field – with tab for example – the value in the ‘small’ field should be synchronized with the field in the popup.

This will look like this:

The steps for bringing this about are these:

1) add a popup component with a panelWindow inside that contains an inputText bound to the same underlying data control as the ‘small’ biography input text component

2) add a JavaScript function that will close the popup and synchronize the value from the ‘big’ biography field to the ‘small’ field

3) add a showPopupBehavior component to the ‘small’ biography field to have the popup shown whenever the field receives focus

In more detail, these are the code snippets to be added:

1) Popup component

<af:popup id="p1">
  <af:panelWindow id="pw1" title="#{bindings.biography.hints.label}"
                  modal="true" resize="on">
      <af:inputText value="#{bindings.biography.inputValue}"
                    required="#{bindings.biography.hints.mandatory}"
                    columns="140"
                    rows="25"
                    maximumLength="#{bindings.biography.hints.precision}"
                    shortDesc="#{bindings.biography.hints.tooltip}"
                    id="it1a">
      <af:clientListener method="synchLifeStory" type="blur"/>
    </af:inputText>
  </af:panelWindow>
</af:popup>

2) JavaScript function

    <af:resource type="javascript">
    function synchLifeStory(event) {
      var itComponent = event.getSource();
      var lifeStory = itComponent.getValue();
      var rootItComponent = AdfPage.PAGE.findComponentByAbsoluteId("it1");
      rootItComponent.setValue(lifeStory);
      // hide popup
      var source = event.getSource();
      var popup = source.findComponent("p1");
      popup.hide();
      event.cancel();
      // navigate to the next component in the form
      var nextComponent = AdfPage.PAGE.findComponentByAbsoluteId("it4");
      nextComponent.focus();
    }
    </af:resource>

3) showPopupBehavior

<af:showPopupBehavior popupId="p1" triggerType="focus"/>

Resources

You can download a simple ADF/JDeveloper 11.1.1.4 application here: EditFieldWithLargeContents