Portlet Factory, Version 6.1.2


 

Page Tabs builder

Use the Page Tabs builder 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 Tab builder functions and is easier to use. You supply a list of pages and tab names, and the builder handles the details. It provides an intuitive way to pull existing pages together into a tab and container user interface (UI). This type of navigation can be added to existing pages the same way a link is added. The Tab builder is more flexible than the Page Tabs builder, but it requires you to do more work.

The addition of a Page Tabs builder 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 tabs and the page 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 you can modify or supply your own. This would allow alternate UIs, such as positioning tabs below or to the side of the content area.

If you supply the appropriate entries for the Pages for Tabs and Associated Pages with Tabs inputs, the 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, the builder sets the selected tab accordingly, thereafter changing the selected tab according to the page tab clicked.

You can add a Page Tabs builder to pages created by an Imported Page builder or other high level builders. Add in the Pages for Tabs input the outer pages you want to expose separately in tabs. Make sure you add in the Associated Pages with Tabs input all the other pages linked to the pages mentioned in the Pages for Tabs input.

You can change the relative location of tabs and display 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 that moves the TabControl span after the PageTabsContentArea. For further reference, see the template file, /factory/pages/tabsLayout.htm, in your project contents.

Parent topic: Builder help


Library | Support |