Data Tree

®
IBM Software Group
JSF Tree Control
This Learning Module describes the use of the JSF Tree Control – for hierarchical
organization and display of information in a web page – static and dynamically bound.
© 2006 IBM Corporation
 OPTIONAL WORKSHOP – a Read/Only Tree Control
 Related data can often best be shown in a nested control structure called a “tree control”. In
version 7.0.x of RAD and RBD – you can create a read/only data rendering as shown below in
the screen capture (it is assumed that subsequent releases will allow provide interactivity, and
events/responses between the HTML browser and JSFHandler (server).
 At the current release – you can do read-only data rendering. A few prerequisites:
 You must be at or above the RBD and RAD product’s 7.0.0.3 code release level
 Follow the steps on the next set of slides to build a tree structure.
Last update: 12/04/2007
2
 Using the JSF Tree Tag 1 of 5
 Create a new web page named
treePage.jsp
 Add some text to the body
 Under EGL Source, create a new
package named “common”
 Right click on common and create a
new EGL source file called records
 Copy/Paste the code in the notes
section into records.egl
Last update: 12/04/2007
3
 Using the JSF Tree Tag 2 of 5 – Creating the JSFHandler
 Right click inside of treePage.jsp and
click edit page code
 Replace the entire boiler plate with the
code in the notes section.
 Back to the page view, open the
enhanced faces components drawer
from the Palette.
 Drag a Data Tree onto the page
 From within the Page Data view
 Drag the myCompany record onto the
Data Tree you just created
Last update: 12/04/2007
4
 Using the JSF Tree Tag 3 of 5 – Configuring the Tree
 Select the Data Tree and click the Properties tab
  Show root node
  Enable node selection
  Display tree as table
 Click the Add button three times to add columns
 “Name”
 “Project Status”
 “Salary ($)”
Last update: 12/04/2007
5
 Using the JSF Tree Tag 4 of 5 – Configuring the Tree
 Still in the Properties tab, select the Tree Node List category.
 Under Select the nodes to display - expand all the elements and select all
checkboxes.
 Select each node and ensure that name is selected for the “Label Value”
 With projects selected, click add under column data and select “status” for the Attribute
 With employees selected, click add twice under column data (leave the first one blank)
and select “salary” for the second.
Last update: 12/04/2007
6
 Using the JSF Tree Tag 5 of 5 – Change the Tree’s Appearance
 Within the page view, click the source
tab at the bottom of the window to
display the page’s html code.
 Add the code in the notes section of
this slide into the “<head>” section of
treePage.jsp
 Now when a node is selected (by
clicking on it, not by selecting its
checkbox), it will be
 bold, red, and have a gray background.
 When the cursor is over a node, its text
will be
 underlined, bold and blue
 Run on Server and see how it looks!!
Last update: 12/04/2007
7
 OPTIONAL – Accessing the Selected (checked) Node Using JavaScript
 Using built-in JSF functions, you
can access (via JavaScript) a
checked tree node’s value on a
page – see example 
 This would allow you to:
 Set a hidden variable to the value
of what was user-selected
 Fire off a Server-Side (EGL) call
to a function, that accesses the
value and takes appropriate
business action.
Last update: 12/04/2007
8

Download Report

Data Tree

Paperzz.com

Your Paperzz