Dynamic pop-up content in ADF

For those who haven’t heard of it, ADF is a Java EE technology that is based on JSF (Java Server Faces). It upgrades the features of JSF with new components, a separate life cycle, Business Model Layer and many other improvements. I am going to describe how you can create pop-ups with dynamic data that changes based on the user interaction.

The ADF way

In ADF, it is advised to do most of the stuff in a declarative way, which is the correct ADF way. In our example, we are going to use this exact approach, meaning well do everything declaratively.

To illustrate this method were going to use a custom POJO called Employee which will be holding all the information for a given employee in a company like first name, last name, birth date and salary. Our application will list all available employees and for each of them we can see more detailed information in a details pop-up.

For the page, I am using brand new taskflow not based on page fragments. I registered a managed bean as empListBean on the Page Flow Scope. This bean will provide a collection of employees and is used just to provide the data. It can be changed in your practical scenario with objects that come from the DB or WS – it depends on the situation. For example, the employees are created and kept in the bean in a Map collection, where keys are the IDs of the employees.

We have visualised the employees in a table – nothing fancy here:

af:table var="emp" rowBandingInterval="0" id="t1"
   value="#{pageFlowScope.empListBean.employeesOnly}"
 af:column sortable="false" headerText="First Name" id="c1" align="center"
    af:outputText value="#{emp.firstName}" id="ot1"/
 /af:column>
 af:column sortable="false" headerText="Last Name" id="c2"  align="center"
    af:outputText value="#{emp.lastName}" id="ot2"/
 /af:column>
 af:column sortable="false" id="c5" align="center"
    af:button text="Details" id="cb1"
        af:clientAttribute name="selectedId" value="#{emp.idCode}"/
        af:showPopupBehavior popupId=":empDetails" triggerType="click"/
    /af:button
 /af:column
 /af:table

The key point here is that in the button component we have added an attribute tag to hold the current employee’s ID CODE. And we have used the declarative way to invoke a pop-up on the page via the showPopupBehavior tag.

Here comes the pop-up part.

Nothing to fear, here is how it looks:

af:popup id="empDetails" launcherVar="source" eventContext="launcher"
             contentDelivery="lazyUncached"
af:setPropertyListener type="popupFetch"
   from="#{source.attributes.selectedId}" to="#{viewScope.id}"/
af:dialog type="ok" title="Employee Details" id="d2"
    af:panelFormLayout maxColumns="1" id="pfl1"
        af:panelLabelAndMessage label="Birth date" id="plam1"
            af:outputText id="ot3"
value="#{pageFlowScope.empListBean.employees[viewScope.id].birthDate}"
             f:convertDateTime pattern=""/
            /af:outputText>
        /af:panelLabelAndMessage
        af:panelLabelAndMessage label="Salary" id="plam2"
            af:outputText id="ot4"
value="#{pageFlowScope.empListBean.employees[viewScope.id].salary}"/
        /af:panelLabelAndMessage
     /af:panelFormLayout
/af:dialog
/af:popup

It is important to check these two tags and their attributes:

af:popup id="empDetails" launcherVar="source" eventContext="launcher"
             contentDelivery="lazyUncached"
af:setPropertyListener type="popupFetch"
    from="#{source.attributes.selectedId}" to="#{viewScope.id}"/

From the pop-up we declare that component that has invoked the pop-up to show up as a source – here you can specify whatever name suits you. And for event context, we choose launcher which is predefined in ADF.

Then comes the setPropertyListener which sets some value from one place to another. The important thing here is that this value is set on popupFetch which happens before the user can actually see the data. Our forms place is the attributes of the source component, where we have set the employee’s ID and we set it to the view scope under the name id which can later be referenced in the expression language. We use the id to get the correct employee from the Map in the empListBean bean and then we show the additional information for this person.

To create this example project I have used Oracle JDeveloper Studio 12c, which is the recommended IDE when you develop ADF applications. It can be downloaded freely from this Oracle page.

 

What do you think? If this tutorial was interesting for you and want to examine the code e-mail me at denis.danov@dreamix.eu. Ill be glad to read your opinion of the approach in the comments bellow.

 

Originally published: JAXenter 

Do you want more great blogs like this?

Subscribe for Dreamix Blog now!