ADF 11g Master-Detail Part 2 June 9
This tutorial explains how to add some useful functionality to the Master-detail page we created in the last tutorial. The first thing you will need to do in order to follow along is to follow the steps in that post.
Today we will add some functionality to allow the user to add, edit, and delete employee records from the detail table.
1. Adding Read-Only Views
1a. Before we get started with the view, let’s add a couple of ADF Business Components to our Model layer. We are going to want to create a couple of drop down lists, so to do that, we need a Read Only view that can populate the drop down list.
1b. Right-click the Model project, choose New, then choose ADF Business Components from Tables.
1c. Do not choose to create any Entity objects since we have the two we already need from last time. Same deal with Updateable Views, so click Next on both of those screens.
1d.On Step 3 of the “Create Business Components from Tables” wizard, select Employees and Locations and choose to create Read-Only Views for those two tables. Rename the new Employee View to ManagerView.
2. Adding “List of Values”
2a. Open the EmployeView in the Model project. Click on the ManagerId attribute.
2b. Underneath, on the toolbar that says “List of Value” click the green plus-sign to open the List of Values wizard. Click the green plus and choose the ManagerView from the left-hand list of available view and move it to the right-side list of View Accessors. Click OK.
2c. In the top pane, open the ManagerView and click on EmployeeId, then click the green plus underneath the “List Data Source” pane. JDeveloper should add ManagerId under View Attribute and EmployeeId under List Attribute which means it is linking the managerid in the EmployeeView to the EmployeeId in the ManagerView.
2d. Click on the UI Hints tab and choose “Choice List”.
2e. Repeat the steps to create a “List of Values” for Department using the Departments view.
3. Create an Edit Page
3a. Make an Edit page for Employees. Create a new JSF JSP page in the ViewController project. Let’s name this page employeeEdit.jspx. If you feel like it, drag a panelHeader onto the page and change the label to “Employee Edit”.
3b. Open the AppModuleDataControl under the Data Controls pane on the left-hand side of JDeveloper. Open the DepartmentsView1 node and drag EmployeesView3 onto the panelHeader in your jspx page.
3c. The ManagerId and DepartmentId fields should show that the component is a choice list based on the UI Hint we provided to the View. You can change it here, but you do not have the option here to change it to a popup List of Values, to do that, you must change it back in the UI Hints on the View. Click on “Include Submit Button” and click “OK”.
4. Create a Task Flow
4a. Let’s create our first Task Flow. To do this, right-click on the View project and select New. From the menu, select Web Tier -> JSF on the right side of the wizard and ADF Task Flow on the left.
4b. Name the task flow masterDetail-task-flow-definition.xml. Make sure you don’t have “Create with Page Fragments” checked and click OK.
4c. In the properties of the task flow, on the behavior tab, set the data-control-scope to “isolated”. In TP4 it is set to “shared” by default and would therefore require a parent task flow.
4d. Drag a “View” component from the ADF Task Flow component toolbar onto the Task Flow design sreen. Name this View “masterDetail”. In the properties panel, set it’s page property to the masterDetail.jspx page.
4e. Drag another “View” component, set it’s name to “employeeEdit” and set the page property to the employeeEdit.jspx page you just created.
4f. Drag a “Control Flow Case” component and drop it onto the masterDetail View object. Then drag it over to the employeEdit View object. Name the Control Flow Case “edit”.
4g. Create a Control Flow Case going from employeeEdit to masterDetail and name it “return”.
4h. Back on the emoplyeeEdit.jspx page set the action for submit to “return”.
5. Getting it to actually Do Something
5a. To make the components lay out nicely, drag a panelGroup layout component over in between the department table and the employee table. Then drag the employee table into the panel group.
5b. Add a button to the panel group. Change the label on the button to “Edit”. Set the action to “edit”. Notice that the name you had provided in the Control Flow Case is available for use as an action for the button. This is a beautiful thing.
5c. Add Commit and Rollback buttons to the page by dragging them from the AppModuleDataControl.
6. Play With It!
You now have added a seperate edit page to the application, hooked it up using a task flow, and rolled all of it into one transaction, all without writing a single line of Java code. If you are a Java developer, you may be wondering what’s going on under the covers and I encourage you to dig in and find out! You’ll especially want to understand how task flows work and how the transactions are managed.
Anyway, I’ll leave as a next step for the student to add a create button.
Related posts:
- How To Create A Master-Detail Page in ADF 11g This article builds upon the last article in which we...
- How To Create An Editable List Page in ADF 11g For those of you wondering how my presentation turned out...
- Adding a Checkbox to an ADF 11g Table SQL, at least the standard SQL and the SQL that...
- Mapping Oracle Forms to ADF 11g - An Overview If you are looking to migrate your Oracle Forms applications...
- ADF 11g: Using Custom Properties To Create Update-Only View Objects One of the cool features of the ADF Business Components...