Pages

Friday, March 7, 2014

Dynamic Tabs UI Shell Template Example

The UI Shell is a page template containing default information, such as a logo, menus and facets. To supplement the UI Shell template, there also is a UIShellMainArea template. Because you can load information into dynamic tabs, the Main area cannot be a part of the page itself since it is loaded dynamically.

I create a sample modal package based on the Hr - Employee table.

Then created a simple Taskflows Employee List, Departments List and Location List.

In the Test page Drag and drop Template Component from the component pallet.


Then select the Oracle Dynamic Tabs Shell Template from the Templates List.


Sample Code
            <af:pageTemplate viewId="/oracle/ui/pattern/dynamicShell/dynamicTabShell.jspx" value="#{bindings.ptb1}"
                             id="pt1">
                <f:facet name="copyright"/>
                <f:facet name="about"/>
                <f:facet name="navigation"/>
                <f:facet name="globalLinks"/>
                <f:facet name="status"/>
                <f:facet name="globalToolbar"/>
                <f:facet name="globalSearch"/>
                <f:facet name="globalTabs"/>
                <f:facet name="welcome"/>
                <f:facet name="innerToolbar"/>
            </af:pageTemplate>

Using these facets you can customize this template.

Drag and drop all you TaskFlow links in the Navigation section and create two attributes for Name and location of Flow.


In the Bean take these attribute values and create a dynamic tab.



Sample UI.



You can download the sample code.