Creating Master-detail form in Oracle ADF

Hi all,

Today i will show how to create simple master detail form in ADF which would help people coming from 4GL (Forms Developer) technology to ADF.

After completion of all steps the final result would be like this

Pre-requisites:
- HR Schema in Oracle database with tables Departments and Employees.
- Oracle Jdeveloper 11g 11.1.1.2.0 you can download from OTN.

Creating EO, VO, VL and AM (Entity Object, View Object, ViewLink and Application Module)

for details about these steps you can refer to my previous blog posts.

- Create new Application named masterDetailApp based on ADF Fusion template.
- Create Connection named hr.
- Create EOs based on ADFBC from tables Departments, Employees (demo.model.entities) package
- Create VOs names DepmentsView and EmployeeView based on those EOs (demo.model.queries)

- Create ViewLink (Viewlink is a Association or join condition between 2 View Objects) between VOs named DeptEmployeeVL.

- Right click on the package demo.model.queries and choose New View Link named it DeptEmployeeVL as shown in the Slide

- Expand DepartmentView in the source section and select DepartmentId do the same for EmployeeView in the destination and press Add button then NEXT

- Leave the default Accessors Names as shown in the slide and Press Finish

Setting Data Model:
 - Double click Application Module HrModule (demo.model.services) go to Data Model tab and choose the names of the Accessors as shown in the slide.

- Click the DepartmentsView first on the Available View Objects pan Change the View Instance name at the bottom as "Departments" and Move it to Right side in the DataModel pan.
- Select Departments at Datamodel pan then Select EmployeesView via DeptEmployeesVL  under the DepartmentsView Node in the left pan
Change the View Name Instance to DeptEmployees and View Link Instance to DeptEmployeeVL.
Move it to data model
Your Data Model page should looks like this

- Save all

- Right click the HrModule under demo.model.services  package and Choose Run.

You will see the Business component Browser which is useful to check the business logic and relation in your Application without creating any User Interface double click the DeptEmployeeVL on the Left pane Navigate through records to test your join condition is working properly as shown in the slide.

- Save all at this point you have successfully created the ViewLink between 2 VOs

Data Control View
After completing above steps your Data control page should looks like this

Note that DeptEmployees Node is Under the Departments  Node means that DeptEmployees is the Child of Departments.

Creating JSF page for Master Detail form:
- Create a View activity called DeptEmployees.jspx in a un-bounded Taskflow adf-config in View Controller project.
- Double click View activity Choose Blank means No Templete.
- Drop PanelSplitter from the Components Palette
- Drop PanelBox then drop Panel Accordion in the First facet of the Panel-splitter set the Text Departments
- Drop another Panel-splitter in the second facet and set the Orientation property to vertical from property inspector.
- Drop Panel Accordion in the first facets of the Last Panel-splitter set Text as Employees.
- Drop Panel Accordion in second facet of the last panel-splitter set Text as Edit employee.

Your Structure layout should looks like this 

Creating Data-bound Components in Page:
- Expand the Data Controls Drag the Departments to the Departments Panelbox and choose Form  > ADF Read-only Form. Choose the fields as shown in the slide

- Select DeptEmployees Node under Departments node in the Data Controls drag to the Employees Section on the page  Choose Table > ADF read-only table select options as shown in the slide in the edit column page

- Repeat same DeptEmployees node from data control and drag to Edit Employee section in the page this time select Form > ADF Form

- Set the StyleClass Property to AFStrechWidth as shown in the slide of af:table and PanelAccordion to strech the table at Runtime of the Employees section

- Save all your work and Right click on the page Choose Run You should able to see the page similar to this.

Navigate through Departments on the left pan you should able to see the Employees related to the current department Click on any employee record on the Table at the top it should display at the bottom as well. 

Feel free to comments.

You can download my completed example

Have a nice day,
Baig