JSF Tab Controls

1. JSF Tab Controls This Learning Module shows how to develop server-side EGL applications with dynamic content organized in JSF Tab Components

2. 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.  Tab Controls – 1 of 2 – Create the Master Detail Record View • 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 Output controls Text within HTML Table

4.  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 – this will be the master detail record, placed laid out in the HTML table • Four different dynamic arrays – these will contain the related order information for a customer • 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 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 – save and generate the page

5.  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) • Optionally – set the output text control’s Classes: Property to: outputTextBoldSmall • Run the page on the server

6.  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.  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 - 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.  Run the Page • 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.  Tab Controls – Programmatically Opening a Specific Tab – 1 of 2 • You have seen that on Submit of this page, the 1st 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: • Add the new function to your JSFHandler as shown in the Notes section of this slide • Add an integer variable named: panelNumber to your JSFHandler’s Global Data area

10.  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.  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. • 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.  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. 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.  Optional Workshop(s) With Tabs – Additional Tab Control Display Options • From the Tab control Properties try each of these options, and Run on Server. Note cause and effect. • Un-check: Display tabs with uniform width • Scroll after: 2 • Check: Display tabs vertically (see below) • 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.  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 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.  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 • 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