1. ® IBM Software Group © 2006 IBM Corporation JSF Panel – Section Controls This Learning Module shows how to develop server-side EGL applications with dynamic content organized in JSF Panel Sections, which allow users to collapse/expand areas on a page for better use of browser “real estate”

2. 2 Last update: 12/04/2007 Optional Optional - JSF Panel (Section) Controls There are a # of JSF Panel components we’ll be using going forward (besides Tabbed panels). Section  We’ll start with Panel Section controls  Have a look at the page shown here   Note that you can collapse/expand any section (area) of the page in order to make the most efficient use of real estate.  The workshop to reproduce this begins on the next slide…

3. 3 Last update: 12/04/2007  Creating Pages in Sections – 1 of 4 panelSection.jsp  From Project Explorer, create a new.JSP page named: panelSection.jsp  Modify the stock page heading text, and Edit the Page Code  From the Notes section of this slide, copy the JSFHandler code and paste it into the existing boiler-plate code, replacing the entire contents  Note that you will need the customerOrdersJoin record, created previously in this course.  Note also that, for the purposes of this lab, you can substitute any record you have  Save your work (Ctrl/S) and return to Page Designer

4. 4 Last update: 12/04/2007  Creating Pages in Sections – 2 of 4  From the palette, from Enhanced Faces Components:  Select drag and drop a Panel-Section control onto the page Customer Data  Specify the Section Header Text: Customer Data  Select the top empty JSF graphic component  From Properties, for the File attribute, browse and select: images/bssctoc2.gif  Select the bottom empty JSF graphic component  From Properties, for the File attribute, browse and select: images/bssctoc1.gif  Select, drag and drop a Panel – Group Box component onto the Panel – Section’s empty region JSP  Select type of component: JSP  From Page Data:  Expand customerOrdersJoin  Select some of the customer fields and drag them into the Group Box/JSP area Make them output fields 

5. 5 Last update: 12/04/2007  Creating Pages in Sections – 3 of 4  From the palette, from Enhanced Faces Components:  Select drag and drop another Panel-Section control onto the page, below the customer data Order Data  Specify the Section Header Text: Order Data  Select the top empty JSF graphic component  From Properties, for the File attribute, browse and select: images/bssctoc2.gif  Select the bottom empty JSF graphic component  From Properties, for the File attribute, browse and select: images/bssctoc1.gif  Select, drag and drop a Panel – Group Box component onto the Panel – Section’s empty region JSP  Select type of component: JSP  From Page Data:  Expand customerOrdersJoin  Select some of the order fields and drag them into the Group Box/JSP area Make them output fields 

6. 6 Last update: 12/04/2007  Creating Pages in Sections – 4 of 4  Run the page.  Open and close the “sections” 