Threadinar10 - Page Separator, Page Fragment Box , Tab Set & Tab Components

Question

Hi All,
This is the tenth in the Threadinar series. See the Components Threadinar Index at http://forum.sun.com/jive/thread.jspa?threadID=103424 for the complete list to date.
This Threadinar will discuss 4 components in the "Components Palette: Layout Section" section of the Creator Component Catalog.
The components we will focus on today are
"Page Separator", "Page Fragment Box" , "Tab Set" & "Tab" Components.
Let us begin our discussion with the "Page Separator" Component.
Page Separator Component
You can drag the Page Separator component from the Palette's Layout category to the Visual Designer to create a horizontal line that resizes to any page width selected by the user. This component is the visual equivalent of an HTML <hr> tag.
In the page bean, a Page Separator component is a PageSeparator object.
* Note: If you want to use an HTML <hr> tag, drop a Meta component on the page and set its tag property to hr.
[b]Page Fragment Box Component
This component enables you to include a page fragment in a page. A page fragment is a separate, reusable part of a page that can be included in any number of pages. For example, you might want to put a common a visual element like a header graphic in a page fragment and then include it in all the pages in an application.
When you drag the Page Fragment Box component from the Layout category of the Palette and drop it on a page, the Select Page Fragment dialog box prompts you for the name of the page fragment to be included. You can enter the name of an existing page fragment or create a new page fragment. If you create a new page fragment, the IDE gives the new fragment a .jspf file suffix and creates a node for it in the Projects window, as well as adding the page fragment to the Outline window.
* Note: A Page Fragment Box component simply includes a page fragment in a page. Deleting a Page Fragment Box component from a page does not delete the page fragment itself, even if you originally used the Select Page Fragment dialog box to create the page fragment.
After dropping a Page Fragment Box component on the page, if you click inside the component, you see the properties for the included fragment. If you click the border of the component, you see the properties for the enclosing <div> block. You can also use the Outline window to select the enclosing block, the page fragment, or the components in the page fragment. In the Outline window, the Page Fragment Box component is represented by a node named directive.include:fragment-file.jspf, where fragment-file is the name of the page fragment file.
If you double-click the page fragment, it opens as a page in the Visual Editor, enabling you to edit it like a regular page. The page fragment has an associated JavaBeans object, a page fragment bean, which you can edit by clicking the Java button at the top of the page fragment when it is open in the Visual Editor. As with a regular page, if you drop a component like a button in a fragment, double clicking adds an event handler in the page fragment bean, enabling you to reuse the code on any page to which you add the page fragment. A common scenario for reusing component code would be a Search Box fragment that has a search Label, a Text Field where the user enters the search string, some Inline Help, and search logic code in the page fragment bean.
* The tab order of the components in the page is unlikely to work properly unless you enclose the entire page fragment box in the Faces Verbatim component.
For more details see tutorial : "Using Page Fragments"
http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/pagefragments.html
[b]Tab Set Component
The Tab Set component in the Palette's Layout category is a container for a set of Tab components. Typical uses of a tab set are:
* To provide alternate sets of components on the same page and enable the user to navigate to them by clicking on tabs. The user sees only the components under the currently selected tab. For more information on adding components to tabs, see Tab Component.
* To navigate among a set of pages. If you use a tab set this way, you would usually have the tab set near the top of each page with the component's width set at 100%. You would use the Page Navigation editor to define each tab to display a page in the application, with the current page's tab set as the selected tab. In addition, you would need to delete the default Layout Panel component under each tab so the tab would display the page contents.
You can set Tab Set properties in the component's Properties window.
A Tab Set component contains Tab Components, and Tab components can contain other Tab components. You can see these components displayed as hierarchical nodes in the Outline window after you add a Tab Set to your page.
You can add a new tab to a tab set in two ways, by right-clicking the Tab Set component and choosing Add Tab or by dropping a new tab component on the Tab Set or on a Tab component.
You can drop a new tab component on a tab set in the Visual Designer to the right or left of existing tabs to create a new tab at that level. The tabs in a tab set can also be containers for other tabs. If you drop a Tab component on an existing tab, the new tab becomes a child of the tab on which you dropped it. The maximum number of levels for tabs is three.
The tab set component determines which tab is rendered as selected, storing the value in the selected property. By default, the selected property is set to the first tab created for the component. If you click a tab while designing your web page, that tab becomes the selected tab. You can tell during design time that a tab is selected because its color changes.
[b]Tab Component
A Tab is part of a Tab Set component. You can add a new tab to a tab set in two ways, by right-clicking the Tab Set component and choosing Add Tab or by dragging a new Tab component from the Layout category of the Palette and dropping it on the Tab Set or on another Tab component. You can also drag from the Palette and drop the tab on the tab set's nodes in the Outline window.
* If you drop the Tab component to the left or right of an existing tab, it is added to the same row of tabs.
* If you drop the Tab component on an existing tab, the dropped tab becomes a child tab of the tab on which you drop it unless the existing tab is a third level tab. You can have at most three levels of tabs in a tab set.
o Note: You cannot add a child tab to a tab that has components in its Layout Panel. When you drop a tab on an existing tab component that has an empty Layout Panel, the empty Layout Panel is deleted to make room for the dropped tab.
By default, a Tab component has a Layout Panel below it where you can drop components that will be displayed when the user selects the tab. The Layout Panel by default has its panelLayout property set to Grid Layout, meaning that components dropped on the panel are aligned at the location where they are dropped. You can change the layout behavior by setting the panelLayout property to Flow Layout, which aligns dropped components left to right in rows. For more information on Layout Panel properties, see Layout Panel Component Properties Window.
To select a tab in a tab set, either click the Tab component on the page or select the Tab component's node in the Outline window. To select the whole tab set, either click the border of the Tab Set component on the page or select the tab set's node in the Outline window. Alternatively, you can select a Tab component and either press Escape or right-click and choose Select Parent to select its parent component.
* Note: If you select a tab on a page in the Visual Designer, a side effect is that it becomes the selected tab. If this effect is not what you want, select the tab in the Outline window so you can set its properties.
You can drag tabs in the Outline window to change their location and level in the tab set.
Some typical uses of tabs:
* You can drop components on the Layout Panel component below a tab to enable a set of components to be displayed below each tab. When the user selects a tab, they see only the components that are associated with the tab, without having to change pages.
* You can use a tab set to navigate among a set of pages. Each tab component links to a page in your web application. You would use the Page Navigation editor to define each tab to display a page in the application, with the current page's tab set as the selected tab. If you want to use the tab set for page navigation, be sure to delete each tab component's Layout Panel.
You can also right-click the Tab component and choose one of the following options:
* Edit action Event Handler. Code the action event handler, the method that is called when the user clicks the tab. This method determines which page or resource to open based on specified conditions. The action method typically processes mouse clicks and returns a string indicating the name of a page navigation case (the page in your application to display next). The default name for the method is tab-id_action, where tab-id is the value of the tab's id property.
* Bind to Data. Dynamically set the text that appears on the tab. You can bind the component's text property to an object or a data provider, as described in the topic Bind to Data Dialog Box.
* Property Bindings. Opens a dialog box that enables you to bind properties of the component in addition to the text property to other objects or bean properties that update this component's properties automatically.
[b] Please join in and share your comments, experiences, additional information, questions, feedback, etc. on these components. <br><br>
Thank you for your participation

Answer 1

The following blog has a mini tutorial on using a tab set in a page fragment for page navigation:
http://blogs.sun.com/divas/entry/tabbing_thru_the_tulips
A reader commented that the mini tutorial needed to be improved upon to show how to keep the tab state and navigation state in synch.
How would you do it? If you have a good example, maybe post it to this thread.
Also, there is no tab tutorial but it is on the priority list. What would you like a tab tutorial to show how to do?