Using af:popup Component in JDeveloper 11g

This component is available in JDeveloper 11g ADF Faces Rich Client, I personally like how it works and how it looks. In this post I will show a use case where this component can be applied.

You can download developed sample application - PopUp11.zip. This application is based on standard HR schema from Oracle XE database. However, I have extended this schema a little bit, by adding new column to EMPLOYEES table. New column is called ACTION_COMMENT and is used to implement defined use case. You can find SQL script needed to create this column in lt.andrejusb.model.sql.actioncomment file.

Ok, what is a use case implemented in this sample about? Main idea is - when user changes some information in the form and press button Save, pop-up is displayed with a field where user can enter comment for his action. If user don't want to provide any comment, just empty field can be submitted.

How it's done? Actually, pop-up functionality is created in two steps:

1. Put af:showPopupBehavior component on Save button in your form. This component is used to invoke pop-up when Save button is pressed:


You must assign PopupId and Align properties for af:showPopupBehaviour component:


2. Put af:popup component just right before Save button, actually there is no difference where to put it. You can use inside af:popu those components - Dialog, Menu, Panel Group Layout and Panel Window. I'm using in this sample Dialog component with Save button that invokes Commit functionality:


Important - af:popup should have the same Id value as af:showPopupBehavior component, this will allow to open pop-up when Save button is pressed:


Value for Action comment component is binded to #{processScope.actionComment}, when Save button is pressed entered value is stored into #{bindings.ActionComment.inputValue}. And finally, when Commit action is done, I'm clearing value stored in #{processScope.actionComment}:


So, two steps are described.

And it looks really nice in practice, let's say we have a form and modify some data:


When Save button is pressed - we have pop-up displayed. User can provide text to describe his action and submit data with Save button:


If user don't want to provide any text to comment his action, simply Save button can be pressed and form data will be saved.