Home > Blogs > Master Detail demo using adf Table components

Master Detail demo using adf Table components

Let us demonstrate the master-detail application in this blog.  The application uses HR schema and the Departments and Employees tables as master and detail entities respectively.

1)      Create the EmployeeEO, DepartmentEO and the associations between them and the EmployeeVO, DepartmentVO and the view links between the VOs as described in the blog ( Follow the step-1 through step-10).

2)      Once you create the business components, the components’ package structure should look like as there in the below screenshot.

3)      Open EmployeeAM and goto DataModel tab. Remove the existing VOs if present from the datamodel and add the DepartmentVO that you created in the step-1. Also add the EmployeeVO through the viewlink that present inside the DepartmentVO.

4)      Run the EmployeeAM and the AM wizard looks like the below screenshot.

5)      Now, we will show the master-detail layout in a simple jspx page. Goto the UI project, MasterDetailUi, and right-click on it and create a jspx page.

6)      Now drop the DepartmentVO from the EmployeeAMDataControl that is available in the DataControl panel of the JDev.  Drop the DepartmentVO as the ADF Table onto the af:Form section of the jspx page.  Once you drop the VO,  a window ‘Edit table columns’ comes where you can add or delete the columns to show for the Department in the Ui. You can also enable sorting, filtering, rowSelection options in this window.

7)      Surround the department table with showDetailHeader component that will be used to show the title for the table and to put the buttons used for creating and deleting the records for departments table. To surround the showDetailHeader, right-click on af:table and select  ‘Surround with …’ and select  ‘ADF Faces’ from the dropdown and select showDetailHeader from the available list of components.

8)      Change the TEXT property of the showDetailHeader to ‘Departments’. To change this property, select the showDetailHeader component in the structure pane and open the ‘Property inspector’ from the View menu of the JDev. In the property inspector, goto Common tab and change the TEXT property. And also the change the styleClass property to ‘AFStretchWidth’ that is available in the Style tab.

9)      To stretch the table in the entire page, set the styleClass property to ‘AFStretchWidth’ that is available in the Style tab and also stretch one of the column in the table. In Departments table DepartmentName column is stretched in this application.  To stretch any column, select the af:table and goto Appearance tab in the property inspector and select the columnId for the ColumnStreching property.

10)   Similarly drag the EmployeeVO that is available inside the DepartmentVO of the EmployeeAMDataControl. Drag the EmployeeVO as ‘ADF Table’ and surround with the showDetailHeader.

11)   Set the styleClass property of the showDetailHeader and EmployeeTable to ‘AFStretchWidth’ and also set the columnStretch property for the EmployeeTable.

12)   Add the action bindings of Create and Delete for the employee and department tables.

13)   Open the jspx page and goto Bindings tab. Click on the ‘+’ icon that present in the Bindings section. Select  ‘Generic Bindings’ from the dropdown and select ‘action’  from the available list and click on OK.

14)   Click on the EmployeeAMDataControl and select DepartmentVO under it. Select the Opeation as ‘CreateInsert’ from the dropdown list and click on Ok. Now ‘CreateInsert’ action binding got created for the Departments. Follow the same steps to create the ‘Delete’ action binding for the Departments entity.

15)   Follow the same step as in step-14 to create the bindings ‘CreateInsert’ and ‘Delete’ action bindings for the Employee entity.

16)   Now, we will create the action bindings for saving and cancelling the changes for the page.  Open the jspx page and goto Bindings tab. Click on the ‘+’ icon that present in the Bindings section. Select  ‘Generic Bindings’ from the dropdown and select ‘action’  from the available list and click on OK. Click on the EmployeeAMDataControl and select the operation as  ‘Commit’ from the dropdown. Similarly, create the ‘Rollback’ binding.

17)   Now the Bindings tab of your jspx looks like as shown in the below screenshot.

18)   Goto the jspx page in the structure pane and select the f:facet-toolbar of the Department’s showDetailHeader. Right-click on it and select Insert inside à  ADF Faces.

19)   Now select the Toolbar button that is available in the component list of the Insert ADF Faces Item dialog.

20)   Change the text property of the toolbar button to ‘Create’ and keep the EL expression #{bindings.CreateInsert.execute} for the actionListener property of the button.

21)   Similarly add one more button for the Cancel. Set the text property of the second button to ‘Cancel’ and set the the actionListener property of the button to ‘#{bindings.Delete.execute}’.

22)   Follow the steps in 20 and 21 to add the two toolbar buttons inside the f:facet-toolbar of the showDetailHeader of the employees table. Add the actionListener properties as #{bindings.CreateInsert1.execute} and ‘#{bindings.Delete1.execute}’ for the Create and Delete buttons of the employee.

23)   Add another showDetailHeader inside the af:form section of your jspx and add two buttons inside the f:facet-toolbar. Set the text and actionListener properties of the first button to ‘Save’ and ‘#{bindings.Commit.execute} resp. Similarly set the text and actionListener properties of the first button to ‘Cancel’ and ‘#{bindings.Rollback.execute} resp. These two buttons are responsible for saving and cancel the changes that are made to any of the tables (Department or Employee) in this page.

24)   Now drag the showDetailHeaders of the Departments and Employees inside the showDetailHeader that we just created in the step-23.Now your page structure looks like

25)   Now save your work and run the jspx page. You can create/update/delete the departmetns and employees and save or cancel your changes from the jspx page. The page looks like

Download sample application : MasterDetailApp

Advertisements
Categories: Blogs
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: