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 .
