ADF 11g RichFaces – Details popping up all around us – Quick introduction to the ADF 11g Popup component

Lucas Jellema

 

One of the valuable new components available in ADF 11g RichFaces is the Popup component. While one must be careful not to overuse all the new tools in the RichFaces library, there seem to be several use cases for the Popup. And using the Popup component is really easy. In this article I will demonstrate how ridiculously simple it is.

We create a table that displays Departments. On this table, we make the option available to display a popup with the Employee details for the currently selected Department. In general, this is a very easy way of providing additional information about a row in a table without having to navigate to another page or sacrificing a lot of real estate on the page to details that are only sometimes required.

Our starting point is an ADF Application with two projects – a Model project with the DEPT/EMP based ViewObjects set up and a ViewController project without any content. The steps then are:

1. create a new JSF page: DeptEmpWithPopup.jspx

2. drag EmployeesInDepartment (child Employees collection under AllDepartments) from Data Control palette to the new page; drop as Master Table/Detail Table

After the drop, the page looks like:

 

3. Run the page

So far nothing new. Now we want to wrap the Employee details in a popup that is opened on request.

4. Wrap the Employees table in a popup and a panelWindow component

          <af:popup id="Employees">
            <af:panelWindow title="EmployeesInDepartment"
                            inlineStyle="width:200px;">
              <af:table partialTriggers="DeptCollectionPanel:masterDetail1"
                        id="empTable"

Note the partialTriggers attribute for the table – the string DeptCollectionPanel: was added since the master table is to be wrapped in a naming container – panelCollection – called DeptCollectionPanel.

5. Wrap the Departments table in a panelCollection component

          <af:panelHeader text="AllDepartments" inlineStyle="height:188px;">
            <af:panelCollection id="DeptCollectionPanel">
              <f:facet name="menus"/>
              <f:facet name="toolbar"/>
              <f:facet name="statusbar"/>
              <af:table id="masterDetail1"
                        rows="#{bindings.AllDepartments.rangeSize}"
                         ....

6. Add a toolbar to the panelCollection’s toolbar facet; add a commandToolBarButton to the toolbar; add a showPopupBehavior component to the latter. set the popupId attribute to refer to the popup that contains the Employees table and set the trigger type to click to have the popup opened when the button is clicked on

          <af:panelHeader text="AllDepartments" inlineStyle="height:188px;">
            <af:panelCollection id="DeptCollectionPanel">
              <f:facet name="menus"/>
              <f:facet name="toolbar">
<af:toolbar>
<af:commandToolbarButton text="Display Details Popup">
<af:showPopupBehavior popupId=":Employees"
triggerType="click"/>
</af:commandToolbarButton>
</af:toolbar>
</f:facet>
<f:facet name="statusbar"/> <af:table id="masterDetail1" rows="#{bindings.AllDepartments.rangeSize}"

7. Run the page – and after a little tweaking the width and height of the table components involved, it will look like this:

 

when you navigate through the Departments table, the popup contents are immediately synchronized.

Resources

Download JDeveloper 11g Application: HrmPopupIntro.zip .

Next Post

ADF 11g RichFaces: implementing a 'pick which columns to show & hide' feature for RichTables

Facebook0TwitterLinkedin  Just over two years ago I wrote an article on this blog – integrating-adf-faces-and-myfaces-tomahawk-creating-a-popup-with-adf-faces-shuttle-component (supported by Changing the order of columns in a JSF Table Component -in the client, at run-time, by the end user and having-the-end-user-hide-and-display-columns-in-a-jsf-table-component) – on how to implement functionality in ADF 10g applications that allowed […]