Thursday, October 20, 2011

Master Detail Data presentation and CRUD Operations. Detail records in an Editable Popup. ADF 11g


This yet another example of Master Detail data representation.
The difference here is that, the Detail rowsets will be presented in a popup.
We are going to use HR schema of Oracle XE for this example.

Download Sample Application.

We are going to use Departments as the Master and Employees as the Details.
Departments will be presented in an table.
The Departments table will have all CRUD operations. Insert, Update, Delete. Additionally there will be a Rollback button.
Every Record in the Departments table will have an additional column where an edit button will reside.
The edit button, when pressed, will show a popup which will present another table, the table of the Employees that work to this Department.

Using the Generate Business Components From Tables wizard of JDeveloper, we produce all the necessary entities, associations, view objects and viewlinks. It is a very straightforward process.

After having the BC created along with the Application Module, we proceed in creating the View controller components.
We will create a bounded task flow and within it, we will create our index jspx.

Inside the Jspx we will drag and drop the Departments iterator and we will choose to select a single row from the Row Selection.

 and select the single selection

After creating the table, we will surround it with a panelCollection  component. This container will hold the toolbar of the CRUD buttons for this table. Additionally, both in the panelCollectin and table, we set the AFStretchWidth   in the styleClass. It is recomended by Oracle in order to have properl full width layout.

The we drop a toolbar in the panelCollections toolbar facet and then we drop the Department's operation from the DataControl.

We will add, createInsert, delete, commit and rollback. Commit and Rollback operations are for the whole datacontrol and not only for the Departments table.

Next, we have to create a popup. This popup will show the employees of the corresponding Department.
Inside the popup we will add a Dialog. Inside this Dialog we will drag and Drop the Employees iterator and have exactly the same process as we did with Departments.

Eventually, we will have a similar table with Departments.

Popup component by default caches the first data that will be shown. In our case, we do not want that since we want a refreshed view of the employees. This means that we want to execute Query for employees for every Department.
So we have to set lazyUncached the contentDelivery property.

NOTE: Since we are using toolbars and toolbar buttons we have to  set the appropriate partial triggers. Toolbar buttons by default have the partialSubmit  property to  true. This means that we have to set the appropriate partialTriggers  to the tables.
Each table will be partially triggered by it's toolbar buttons. So in Every table, in the partialTriggers sections we will add the correspoing toolbar button ids.

After setting the appropriate partialTriggers, the only thing left is, the edit button.

We right click on the table and select insert Column.
Then, we right click on the column and insert ADF faces button.
After that, we right click on the button and insert ADF showPopupBehavior.
In the showPopupBehavior we enter the popupId and the type of action:

And that is it.
When pressing Employees button, ADF will invoke additionally the selectionListener and make the departments current row. So every time we press the edit button, the current Department becomes current and the corresponding employees are fetched.

Download Sample Application.


No comments:

Post a Comment


Related Posts Plugin for WordPress, Blogger...