1. ® IBM Software Group © 2006 IBM Corporation JSF Tab Controls This Learning Module shows how to develop server-side EGL applications with dynamic content organized in JSF Tab Components

2. 2 Last update: 12/04/2007 Tab Controls  Tab controls are used to organize related information through a convenient, folder/style U.I. structure that consumes little “real estate”. See example below of a common master/detail page pattern. See Notes***  Let’s do a workshop that will show you how to create a page design pattern like this.

3. 3 Last update: 12/04/2007  Tab Controls – 1 of 2 – Create the Master Detail Record View tabPage.jsp  Create a new.JSP page named: tabPage.jsp. Use a template.  Add the page heading text, and drop an HTML table on the page:  3 Rows X 3 Columns. Width: 100%  Add the literal text to the cells as shown below  Add Output controls within the cells as shown below Optional – Using copy/paste (of existing) and/or Content Assist, add two new.CSS entries to stylesheet.css  Add a new outputText class  Add a new transparent row class  For the Tab control Text within HTML Table Output controls

4. 4 Last update: 12/04/2007  Tab Controls – 2 of 2 – Create the JSFHandler  Using the code in the Notes below, replace the existing JSFHandler statements  Note the following:  Customer record  Customer record – this will be the master detail record, placed laid out in the HTML table  Four different dynamic arrays  Four different dynamic arrays – these will contain the related order information for a customer customer#1’s information.  This particular version simply reads in customer#1’s information. In reality, you would allow users to search for customers or link to this page  The database access  The database access returns:  Customer #1’s row  All of the Orders for this customer  Then you utilize EGL for loops and conditional logic to populate the three other dynamic arrays – for each order status  Ctrl/S  Ctrl/S – save and generate the page

5. 5 Last update: 12/04/2007  Bind the JSFHandler Controls to the Customer Detail Record  From Page Data, Drag/Drop and bind the JSFHandler’s Customer record fields to the output text controls in the HTML table (see screen capture) outputTextBoldSmall  Optionally – set the output text control’s Classes: Property to: outputTextBoldSmall  Run the page on the server

6. 6 Last update: 12/04/2007  Add a Tab Control - Customize the Panels  From the Enhanced Faces Components, add a Panels - Tabbed control to the page, beneath the HTML table. Copy resources to your project when prompted. Specify the Tab Properties:  Width: 100%  Panel List:  Customize the two default panels as shown below, and Add two additional panels with the names as shown:

7. 7 Last update: 12/04/2007  Drag the Dynamic Arrays into the Panels  From Page Data:  Click your mouse (set focus into) a Panel  One by one drag each of the Orders[] arrays into their respective Tab panel  Create the records as  Displaying an existing record (read only) to create output fields  OPTIONALLY  OPTIONALLY - customize each dataTable’s Display Properties:  Select a dataTable Column  Press the Up arrow key  twice  This selects the entire dataTable  From Properties, find the – Display tab  Delete the entry in: Column classes  Specify: rowClass3 for Row classes

8. 8 Last update: 12/04/2007  Run the Page  Click on the separate tabs.  Click on the separate tabs. Note also that Tab controls can respond to user events. This would allow you to programmatically fill a tab panel when the user entered it. Or control which tab opened in sequence, etc.

9. 9 Last update: 12/04/2007  Tab Controls – Programmatically Opening a Specific Tab – 1 of 2  You have seen that on Submit of this page, the 1 st tab opens by default. You may very well have to programmatically (in your JSFHandler) set focus to a particular Tab. Here’s how to do this: 1.Add the new function to your JSFHandler as shown in the Notes section of this slide 2.Add an integer variable named: panelNumber to your JSFHandler’s Global Data area

10. 10 Last update: 12/04/2007  Tab Controls – Programmatically Opening a Specific Tab – 2 of 2  From Page Designer/Page Data:  Drag and drop panelNumber variable onto the page and create an input field with a single Submit Button  Drag and drop the whichPanel() function on top of the Submit Button  Run – and test the page  (BTW) If you want to find out which panel is the current panel you can use: str string = tabbedPanel1.getStateString();

11. 11 Last update: 12/04/2007  Optional Workshop(s) With Tabs – Firing off Server-Side Logic on Panel Enter  You may wish not to load all of your tabs at the same time (onConstruction of the underlying.JSP) – but only when users click a given tab. onenter onenter  To do this, you need to use the onenter panel event. To get to this event - open to the panel (not the entire tab control, each individual panel – Note that it helps to click your mouse pointer inside the panel to get to onenter) From onenter, use: 1. AJAX – discussed later in this course …or… 2. A technique shown in-depth in an upcoming workshop where you hide a submit button, and fire it off with a JavaScript: document.getElementById('form1:buttonxxx1').click(); //statement

12. 12 Last update: 12/04/2007  Optional Workshop(s) With Tabs – Hiding and Showing Specific Panels  You may wish to hide certain panels from certain user roles in your application. To do this:  Select the panel (as before, ensure that your cursor is inside the panel) you wish to hide  From All Attributes, select the rendered property, and from Compute… select the boolean attribute you will use to hide and display the tab. panelRender Note – if you have trouble selecting the attribute with the tooling, 1. Enter the page’s Source mode, 2. Find the <odbc:bfpanel you wish to hide (look for the panel id) and add the rendered attribute manually – the Notes section of this slide contains a working example with an attribute named: panelRender.

13. 13 Last update: 12/04/2007  Optional Workshop(s) With Tabs – Additional Tab Control Display Options  From the Tab control Properties  From the Tab control Properties try each of these options, and Run on Server. Note cause and effect. 1.Un-check: Display tabs with uniform width 2.Scroll after: 2 3.Check: Display tabs vertically (see below) 4.From the – Panel list  Add a Tab icon image one of the Tab panels (see below)  Select the Customer Orders Cancelled – tab. –Open the Parent Pane combo-box, and select bfpanel4 – note hierarchically nested/related tab display! ***Notes!

14. 14 Last update: 12/04/2007  Optional Workshop(s) Setting the Initial Panel  You may want (or need ) to set the initial panel in your Tab Page programmatically.  To do this:  From the Tab control’s All Properties FULLY QUALIFIED PANEL ID  From the Tab control’s All Properties select an EGL JSFHandler field for initialPanelId that will contain the FULLY QUALIFIED PANEL ID (see screen capture) of the panel you wish to open   Note that you may need to enter JSF Source mode, and manually type in the reference to the EGL JSFHandler field

15. 15 Last update: 12/04/2007 Tabs Within Tabs  Tab Controls – Tabs Within Tabs (Optional Lab or Concept Slide) You can embed tabs within tabs (see screen capture below):  From the Palette, you can just drag one tab into (inside) another – as if it was any other JSF component - as you’ve seen in this workshop \theme\tabpanel.css Notestabpanel.css  However, you may want to work with the \theme\tabpanel.css – in order to realize the (white or transparent) backgrounds and borders necessary to make the entire tab-set appear as one nested control. The Notes section of this slide contains the tabpanel.css entries used to achieve this look and feel 