Академический Документы
Профессиональный Документы
Культура Документы
Pattern Master-Detail-MoreDetail
Pattern 2.0
Revision
Technologies JDeveloper MAIN, ADF, ADF Faces
Keywords MDD
Forum Pattern Team
Publish date April, 2009
Problem Description
A user needs to be able to drill down into a tree of hierarchical data and when selecting
the terminating node in this tree will see some detail of the children of this collection in a
table to its right and additional detail of the selected row in a form below.
Master-Detail-MoreDetail 1
Functional
Figure 1: Master-Detail-MoreDetail UI
Step 1: Drill down into the Tree and select the desired terminating node
(Departments, in this case)
When the user selects the desired Department, the Table to its right will refresh to
display the Employees for this Department, showing some detail of each
Employee.
Step 2: View more detail of target Employee
Now the user can select the desired Employee from the Table and see additional
detail information for this employee in the Form below.
Master-Detail-MoreDetail 2
Functional
The Artifacts
Following is a list of the artifacts used in this pattern.
Note: Unless otherwise instructed, accept the ADF Wizard defaults options.
Master-Detail-MoreDetail 3
Functional
5. In this example, we want our Tree (created below) to only display nodes that
include rows in the leaf node (i.e. Departments). In order to do this, we will add
where clauses to the RegionsView, CountriesView and LocationsView by doing
the following:
Master-Detail-MoreDetail 4
Functional
a. Expand the Model Project, then expand the Application Sources and
model nodes. Now select the desired view (RegionsView, CountriesView
and LocationsView).
b. Select the Query page, then click the Query section’s [edit] icon.
c. Now enter the where clause (see data below) and click [OK].
Master-Detail-MoreDetail 5
Functional
Create the UI
1. Prepare your Page for your Tree-Table-Form as follows:
d. Collapse your Model Project, expand the View Controller Project and
Open adfc-config.xml.
e. Drag-and-Drop a View component from the Component Palette onto your
adfc-config.xml window. Give this new view a name and create the page
by double-clicking the view that you just created.
f. Drag-and-Drop a Panel Splitter component from the Component Palette
onto your Page.
g. Select the ‘second’ panel on your page and then drag-and-drop another
Panel Splitter component onto the ‘second’ panel. In the Property
Inspector, change the Orientation Property to ‘vertical’.
Master-Detail-MoreDetail 6
Functional
Master-Detail-MoreDetail 7
Functional
e. Select the [+] again, this time to add the LocationsView node. Change the
Display Attributes to show City instead of the defaulted LocationId.
f. Select the [+] again, to add the DepartmentsView node. Change the
Display Attributes to show DepartmentName instead of the defaulted
DepartmentId. (Note: A Target Data Source needs to be set for this node,
but first we have to create it.)
Master-Detail-MoreDetail 8
Functional
g. After clicking [OK] on the Edit Tree Binding dialog, set the Tree’s id to
‘tree1’ using the Property Inspector. (This id will be used later when we setup Partial
Refresh.)
Master-Detail-MoreDetail 9
Functional
Master-Detail-MoreDetail 10
Functional
c. Under the list of Bindings for your page, select RegionsView1 and press
the Edit icon. (The Edit Tree Bindings dialog will appear.)
Master-Detail-MoreDetail 11
Functional
Figure 14: Edit Tree Binding (with Target Data Source expanded)
Master-Detail-MoreDetail 12
Functional
Master-Detail-MoreDetail 13
Functional
d. Now press [OK] on the Edit Property dialog and notice that ‘::tree1’ was
inserted into the PartialTriggers Property.
Master-Detail-MoreDetail 14
Functional
3. Related Documentation
a) Fusion Developer's Guide for Oracle ADF
b) Web UI Developer's Guide for Oracle ADF
Master-Detail-MoreDetail 15