Page Tabs Builder

Page Tabs Builder

In this topic ...

How Does this Builder Work
How do I...
Specifying Inputs
Objects this Builder Creates
See also...

HTML Guidelines
Tab Builder

Page Tabs builder is used to automate the addition of tabbed navigation with content area to the existing pages in a model. The contents within the tabs could be the entire page, or section of the page.
This builder wraps the Factory's existing Tab Builder, but it also provides an intuitive way to pull existing pages together into a "tab and container" UI. This type of navigation can be added to existing pages the same way a link is added. The addition of page tabs does not require changing the way the model is built, in terms of navigation from page to page. For example, the builder does not create a new outer page into which the tabbed pages are inserted. Instead, the tabs are added to the existing page in such a way that the content on the page can be wrapped in the bordered content area. The HTML generated to orient the two together requires a table with a row for the tabs and a row for the content area. The HTML for this table is generated from a base HTML page, which we can modify or supply your own. This would allow alternate UIs, such as positioning tabs below or to the side of the content area.

How Does this Builder Work?

Once the appropriate entries for "Pages for Tabs" and "Associated Pages" have been made, Page Tabs builder modifies all the pages that need to contain tabs to include tab control span according to the "Custom Layout Page" input. Subsequently, tabs are added to these pages. When one of these pages is loaded for the first time, it sets the selected tab accordingly, thereafter changing the selected tab according to the page tab clicked.

How do I...

Add Page Tabs to pages made by dashboard builders?

Add the outer page created by the builder to the "Pages for Tabs". The Page Tabs builder automatically picks up the associated detail page and adds tabs to the page.
Add Page Tabs to pages created by imported page builder or other high level builders?

Add the outer pages you want to expose separately in tabs in the "Pages for Tabs" input. Make sure you add all the other pages linked to the pages mentioned in "Pages for Tabs" in "Associated Page" input.
Change the relative location of tabs displaying them after the content area?

The "Custom Layout Page" input determines the relative location of tabs to content area. Create a new template in the webApp moving the "TabControl" span after the "PageTabsContentArea". For further reference look at the template file /solutions/dashboard/tabsLayout.htm in your project contents.

Specifying Inputs

The Page Tabs builder takes the inputs described in the table below. For help on inputs common to many or all Builders such as those in the Properties input group, see "Using the Builder Call Editor"

Input Name Description
Name Enter a name for this Builder call. The Designer displays this name in the Builder Call List.
Pages for Tabs Specify all the outer pages that would correspond to a separate tab in the order the tabs should be created.

Page: Select the name of your page from the drop down
Tab Label Text: Enter the tab label text that would appear on the tabs. This could be an indirect reference to a variable/localized data

Example:
Page: Page1
Tab Label Text: Page 1 Tab
Page: Page2
Tab Label Text: ${Variables/Page2TabText}
Area to Wrap with Tabs Specify whether the tab would contain the entire page or a section of the page.
Tag To Wrap Optional. Available when "Area to Wrap with Tabs" is "Section of each page."
Specify the section of the page that would be wrapped inside a tab. This section should be present on all the pages to be wrapped.
Example: Data Page
Tab and Content Area Properties
Content Area Width Specify the width for the content area.
Content Area Height Specify the height for the content area.
Content Area Width and Height are actually the minimum width and height of the content area since the contained content may stretch the content area. It also prevents the content area from looking unusual if the content area is empty or only one line and standardizes the size of the content area so that it does not vary over different tabs.
Custom Layout Page Specify the URL of a custom layout page to supply the HTML used to create the table that wraps the content area with border and adds the tabs. This allows you to change this layout, such as by moving the tabs below or to the side of the content area.
This builder relies on two specific tag names that must be in your HTML:

TabControl: Defines the region where the tabs would be placed
PageTabsContentArea: Defines the region which would surround the content area

Tab Base HTML page This is an input for the Tab builder and it supplies the HTML for building the tabs and the top border of the tab area.
For more information on Tab builder, see "How to Use the Tab Builder."
Stylesheet File Name Specify the stylesheet to be used for the tabbed pages that are created.
Tab Background Class Specify a style to be used for the background of individual tabs in the tab control. This input applies to the text and link style of unselected tabs.
For more information on Tab builder, see "How to Use the Tab Builder."
Selected Tab Background Class Specify a style to be used for the background of selected tab in the tab control. This input will be implemented if you have specified a Selected Tab variable and it will be applied to the text and link style of the selected tab.
For more information on Tab builder, see "How to Use the Tab Builder."
Tab Text Class Specify a style to be used for the labels of individual cells in the tab control. This input applies to the text and link style of tabs.
For more information on Tab builder, see "How to Use the Tab Builder."
Selected Tab Text Class Specify a style to be applied to the selected tab text label. This input applies to the text and link style of tabs.
For more information on Tab builder, see "How to Use the Tab Builder."
Tab Spacer Class Specify a style to be applied to the Spacer spans. This input applies to the Spacer class that surround the tabs (left/right and between the tabs).
Tabbed Content Area Class Specify a style that will be applied to the content area. This input applies to the Content Area that contains the content within the Span.
Associated Pages
Associated Pages with Tabs Specify the pages, linked to the pages in "Pages for tabs." It allows you to create the effect of drilldown within the same tab by associating pages with the tabbed pages.

Page to Associate: Specify the name of the page present in the model to be associated to the tabbed pages
Tab Defined Above: Select the name of the page mentioned in "Pages for Tabs"

Example:
Page To Associate: Page1B
Tab Defined Above: Page1

Objects This Builder Creates

This builder creates a variety of objects within the WebApp. They include the following items:
Linked Java Objects

<buildername> - This LJO includes an evaluateTabNames method to evaluate the indirect references to tab names and set the evaluated values. It also includes a setSelectedTab method to evaluate the selected tab when one of the tabbed pages is displayed for the first time.
TabHelper - This LJO is created by the Tabs Builder and it is used internally.

Variables

<buildername>_selectedtabVariable - This variable contains the name of the selected tab.
<buildername>_Tabs - This variable contains the list of tabs and pages associated with it, and the current page that would be displayed when the tab is selected.
<buildername>_TabsBuilderLoopCounterVar - This variable is created by Tab builder.
<buildername>_TabsBuilderLoopVar - This variable is created by Tab builder.

Pages

<buildername>_LayoutPage - This is the layout page, which is also added to all the pages that contain the tabs.
<buildername>_TabsBuilder - This page is created by Tab builder.

Methods

<buildername>_OnPageLoad - This method is called when one of the pages containing the tabs is loaded.
<buildername>_TabClickActionName - This method is called when a tab is clicked.
<buildername>_TabsBuilderSetSelectedTab - This method is created by Tab builder.
<buildername>_TabsBuilderTabItemCellGetStyleClass - This method is created by Tab builder.
<buildername>_TabsBuilderTabItemTextGetStyleClass - This method is created by Tab builder.

Input Name	Description
Name	Enter a name for this Builder call. The Designer displays this name in the Builder Call List.
Pages for Tabs	Specify all the outer pages that would correspond to a separate tab in the order the tabs should be created. Page: Select the name of your page from the drop down Tab Label Text: Enter the tab label text that would appear on the tabs. This could be an indirect reference to a variable/localized data Example: Page: Page1 Tab Label Text: Page 1 Tab Page: Page2 Tab Label Text: ${Variables/Page2TabText}
Area to Wrap with Tabs	Specify whether the tab would contain the entire page or a section of the page.
Tag To Wrap	Optional. Available when "Area to Wrap with Tabs" is "Section of each page." Specify the section of the page that would be wrapped inside a tab. This section should be present on all the pages to be wrapped. Example: Data Page
Tab and Content Area Properties
Content Area Width	Specify the width for the content area.
Content Area Height	Specify the height for the content area. Content Area Width and Height are actually the minimum width and height of the content area since the contained content may stretch the content area. It also prevents the content area from looking unusual if the content area is empty or only one line and standardizes the size of the content area so that it does not vary over different tabs.
Custom Layout Page	Specify the URL of a custom layout page to supply the HTML used to create the table that wraps the content area with border and adds the tabs. This allows you to change this layout, such as by moving the tabs below or to the side of the content area. This builder relies on two specific tag names that must be in your HTML: TabControl: Defines the region where the tabs would be placed PageTabsContentArea: Defines the region which would surround the content area
Tab Base HTML page	This is an input for the Tab builder and it supplies the HTML for building the tabs and the top border of the tab area. For more information on Tab builder, see "How to Use the Tab Builder."
Stylesheet File Name	Specify the stylesheet to be used for the tabbed pages that are created.
Tab Background Class	Specify a style to be used for the background of individual tabs in the tab control. This input applies to the text and link style of unselected tabs. For more information on Tab builder, see "How to Use the Tab Builder."
Selected Tab Background Class	Specify a style to be used for the background of selected tab in the tab control. This input will be implemented if you have specified a Selected Tab variable and it will be applied to the text and link style of the selected tab. For more information on Tab builder, see "How to Use the Tab Builder."
Tab Text Class	Specify a style to be used for the labels of individual cells in the tab control. This input applies to the text and link style of tabs. For more information on Tab builder, see "How to Use the Tab Builder."
Selected Tab Text Class	Specify a style to be applied to the selected tab text label. This input applies to the text and link style of tabs. For more information on Tab builder, see "How to Use the Tab Builder."
Tab Spacer Class	Specify a style to be applied to the Spacer spans. This input applies to the Spacer class that surround the tabs (left/right and between the tabs).
Tabbed Content Area Class	Specify a style that will be applied to the content area. This input applies to the Content Area that contains the content within the Span.
Associated Pages
Associated Pages with Tabs	Specify the pages, linked to the pages in "Pages for tabs." It allows you to create the effect of drilldown within the same tab by associating pages with the tabbed pages. Page to Associate: Specify the name of the page present in the model to be associated to the tabbed pages Tab Defined Above: Select the name of the page mentioned in "Pages for Tabs" Example: Page To Associate: Page1B Tab Defined Above: Page1