JSF Tab Controls

®

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

2Last 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.


Tab Controls – 1 of 2 – Create the Master Detail Record View

Create a new .JSP page named: tabPage.jsptabPage.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 outputText class

Add a new transparent row classAdd a new transparent row class For the Tab controlFor the Tab control

Text withinText withinHTML TableHTML Table

Output controlsOutput controlsOutput controlsOutput controls


Tab Controls – 2 of 2 – Create the JSFHandler

Using the code in the Notes below, replace the existing JSFHandler statements

Note the following: Customer recordCustomer record – this will be the

master detail record, placed laid out in the HTML table

Four different dynamic arraysFour different dynamic arrays – these will contain the related order information for a customer

This particular version simply reads in customer#1’s information.customer#1’s information. In reality, you would allow users to search for customers or link to this page

The database accessThe 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/SCtrl/S – save and generate the page


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: outputTextBoldSmalloutputTextBoldSmall

Run the page on the server


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: Width: 100%100% Panel List:Panel List:

Customize the two default panels as shown below, and Add two additional panels with the names as shown:Customize the two default panels as shown below, and Add two additional panels with the names as shown:


Drag the Dynamic Arrays into the Panels From Page Data:

Click your mouse (set focus into) a PanelClick your mouse (set focus into) a Panel One by one drag each of the One by one drag each of the Orders[]Orders[] arrays into their respective Tab panel arrays into their respective Tab panel Create the records as Create the records as Displaying an existing record (read only) to create output fields Displaying an existing record (read only) to create output fields

OPTIONALLYOPTIONALLY - customize each dataTable’s Display Properties: Select a dataTable Select a dataTable ColumnColumn Press the Up arrow key Press the Up arrow key twice twice

This selects the entire dataTableThis selects the entire dataTable

From Properties, find the – Display tabFrom Properties, find the – Display tab Delete the entry in: Column classesDelete the entry in: Column classes Specify: Specify: rowClass3rowClass3 for Row classes for Row classes


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.


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:1.1. Add the new function to your JSFHandler as shown in the Notes section of this slideAdd the new function to your JSFHandler as shown in the Notes section of this slide

2.2. Add an integer variable named: panelNumber to your JSFHandler’s Global Data areaAdd an integer variable named: panelNumber to your JSFHandler’s Global Data area


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 Drag and drop panelNumber variable onto the page and create an input field with a

single Submit Buttonsingle Submit Button Drag and drop the whichPanel() function on top of the Submit ButtonDrag and drop the whichPanel() function on top of the Submit Button Run – and test the pageRun – and test the page

(BTW) If you want to find out which panel is the current panel you can use:

str string = tabbedPanel1.getStateString();str string = tabbedPanel1.getStateString();


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 onenteronenter 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 onenteronenter) 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


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: panelRenderpanelRender.


Optional Workshop(s) With Tabs – Additional Tab Control Display Options

From the From the TabTab control Properties control Properties try each of these options, and Run on Server. Note cause and effect.

1. Un-check: Display tabs with uniform width2. Scroll after: 23. Check: Display tabs vertically (see below)

4. From the – Panel list Add a Tab icon image one of the Tab panels (see below)Add a Tab icon image one of the Tab panels (see below) Select the Customer Orders Cancelled – tab. Select the Customer Orders Cancelled – tab.

– Open the Parent Pane combo-box, and select bfpanel4 – note hierarchically nested/related tab display!Open the Parent Pane combo-box, and select bfpanel4 – note hierarchically nested/related tab display!

***Notes!***Notes!***Notes!***Notes!


Optional Workshop(s) Setting the Initial Panel

You may want (or need You may want (or need ) to set the initial ) to set the initial panel in your Tab Page programmatically. panel in your Tab Page programmatically.

To do this:To do this: From the From the TabTab control’s All Properties control’s All Properties select

an EGL JSFHandler field for initialPanelId that will contain the FULLY QUALIFIEDFULLY QUALIFIED PANEL ID 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


Tab Controls – Tabs Within TabsTabs 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\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 NotesNotes section of this slide contains the tabpanel.csstabpanel.css entries used to achieve this look and feel

Documents

JSF Tab Controls