days
-4
-1
hours
-1
-1
minutes
-5
0
seconds
0
-6
search
JAX Developers Puzzle deadline approaching: Play for a chance to win a complimentary JAX London 2018 ticket!
Java EE tutorial

Dynamic pop-up content in ADF

Denis Danov
pop-up ADF java
Pop-ups image via Shutterstock

Here we look at how to use the Java EE upgrade ADF to build a system of pop-ups that dynamically reacts according to the user’s interaction.

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 more separated 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.

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

To illustrate this method we are 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 and I have 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 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.

Now comes the pop-up part. It is not something hard, here it 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>

Here 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 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 from 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 Oracle.

Author
Denis Danov
Denis is a Java EE and Oracle Developer at Dreamix. // If this tutorial was interesting for you and you want to get the code so you can examine it, please e-mail me at denis.danov@dreamix.eu and I will send it to you.

Leave a Reply

Be the First to Comment!

avatar
400
  Subscribe  
Notify of