1. ® IBM Software Group © 2006 IBM Corporation 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.

2. 2 Last update: 12/04/2007  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.

3. 3 Last update: 12/04/2007  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

4. 4 Last update: 12/04/2007  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

5. 5 Last update: 12/04/2007  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 ($)”

6. 6 Last update: 12/04/2007  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.

7. 7 Last update: 12/04/2007  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 “ ” 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!!

8. 8 Last update: 12/04/2007  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.