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

4

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:

Image

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:

Image

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

Image

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

Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.

4 Comments

  1. Hi Lucas,
    I have a requirement where I need to generate the following at runtime
    commandImageLinks  and a popup to be raised on click of each of the commandImagelink.
    The popups needs to generated at runtime based on the data retrieved from the VO before page loads
    I am able to generate the commandimagelinks in the beforePhase method and able to open the popups which are in the page.
    But the requirement is I need to generate the popups at runtime.
    Can you please shed some light on the above sceanrio.
     
    Thanks,
    Skr

  2. Hi Moha,

    What is inside the POPUP component? There should be Dialog, panelWindow or NoteWindow inside the popup. The Form and Resource components should not be inside the popup, but instead defined at the Page level. Unless I see the code that you have tried and failed to get to work, I cannot really comment on why it is not working.

     

    Lucas

  3. I have an input date calendar implemented using javascript.

    I call it on the page using the below code:

    <f:facet name=”metaContainer”>
    <af:resource type=”css” source=”resources/css/datepickercontrol_mozilla.css”/>
    <af:resource type=”css” source=”resources/css/content.css”/>
    <af:resource type=”javascript” source=”resources/js/datepickercontrol.js”/>
    </f:facet>
    <af:form id=”f1″>
    <input type=”text” id=”DPC_calendar1b1_DD-MM-YYYY”
    name=”DPC_calendar1b1_DD-MM-YYYY” size=”20″
    value=”">
    </input>
    </af:form>

    It worked fine.

    But when I am trying to put the above input text inside a popup, it is not working properly, the text field is created but the icon that opens the date picker is not created.
     
    How can I add custom code to af popups? maybe would solve my issue.

    If you wanna see the js, and css files I used, see this link http://dali.mty.itesm.mx/~hugo/js/datepickercontrol/
    It is an open source date picker. It is very nice, but I am facing a problem with configuring it with popups.

    your help is highly appreciated. Thanks.

Leave a Reply