Creating Pages with a UIShell template

UIShell template was created to maintain a consistent look and feel across all Oracle Fusion Apps. Here is an excerpt from the documentation on UIShell:

The UI Shell is a page template containing default information, such as a logo, menus and facets. To supplement the UIShell 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. The UIShellMainArea template helps you create the flows that run within the tabs.

The UI Shell design supports task-based and user-based navigation and way-finding, and organizes screen real estate more effectively by collating tasks, providing dedicated spaces for primary-task supporting information, and maintains general order and appropriate hierarchy between various elements on the screen.

The UI Shell for Applications User Experience (Applications UX) patterns provides a system of containers that fulfill common layout and navigational requirements in a structured, consistent manner. The UI Shell focuses on providing detailed design for defining and organizing various types of navigation and other functionality such as search and auxiliary information for Oracle Fusion alone.

In particular, the UI Shell template supports

• Global Search
• Navigation menus
• Cross-application navigation

The UIShell consists of four regions Global Area, Regional Area, Contextual Area and Local Area. Check figure for regions:

The steps to create a simple UIShell page with a 'Hello World' displayed in local area are

1. Create a new fusion web application
2. In the Model project add the Applications Core library
3. In the View Controller project add the Applications Core(View Controller) 11.1.1.0.0 library under JSP Tag libraries
4. Create a JSFF page (JSF Page Fragment) with UIShellMainArea as the template:

5. Add an output text in the local area facet of this JSFF

6. Create a taskFlow and drag and drop this JSFF onto it.
7. Create a JSPX page (JSF Page) extending the UIShell template
8. Right click on this JSPX page and select 'Create Applications Menu', this creates a XML file with the name of the JSPX page appended with _taskmenu. It is created under the ViewController/public_html/WEB-INF/menus directory. The menu file is currently empty with only template code.

9. In the structure window for this menu file, right click on item node and select -- insert inside item node -> item node. This will expct you to give an ID and a focusViewId. Id is the id of this item node and can be anything as long as it is unique in this menu file. The focusViewId is the ID of the page which we created in step 7. (Will explain further below).

10. In the property inspector for the newly created item node add
Label : Hello World Page
Task Type : dynamicMain
Task Flow Id : Choose the id of the taskFlow created in step 6.

<?xml version="1.0" encoding="UTF-8" ?>
<menu xmlns="http://myfaces.apache.org/trinidad/menu">
  <itemNode id="_pgNode_UIShellMainPage" label="UIShellMainPage"
            focusViewId="/UIShellMainPage" isDynamicTabNavigation="true">
    <itemNode id="HelloWorldId" focusViewId="/UIShellMainPage"
              taskType="defaultMain"
              taskFlowId="/WEB-INF/HelloWorldFlow.xml#HelloWorldFlow"/>
  </itemNode>
</menu>



11.  Right click on the jspx page and run it.

Further Explanation:

We give the focusViewId to let the menu know that when the page fragment is displayed, it needs to be displayed in the local area of the given UIShell template based page. In this case the UIShellMainPage.jspx. The created pages are already available and need to be just selected.

Task Type can be either defaultMain, dynamicMain, defaultRegional or taskCategory.A default main task comes up by default once the page in run. i.e. the JSFF is displayed in local area by default and no action from user is necessary.

A dynamic main task needs another attribute defined in the property inspector - label. Since a dynamic main comes up as a list in the tasks part of regional area it needs a label and also needs the user to click on this link for the page to be displayed. A dymanicMain task type also requires another itemNode defined for displaying the task menu.

<?xml version="1.0" encoding="UTF-8" ?>
<menu xmlns="http://myfaces.apache.org/trinidad/menu">
  <itemNode id="_pgNode_UIShellMainPage" label="UIShell Main Page"
            focusViewId="/UIShellMainPage" isDynamicTabNavigation="true">
    <itemNode id="__TasklistTests_itemNode__SRDefault"
              focusViewId="/TasklistTests-TabsWA"
              label="#{applcoreBundle.TASKS}" taskType="defaultRegional"
              taskFlowId="/WEB-INF/oracle/apps/fnd/applcore/patterns/uishell/ui/publicFlow/TasksList.xml#TasksList"
              disclosed="true"
              parametersList="fndPageParams=#{pageFlowScope.fndPageParams}"/>
    <itemNode id="HelloWorldId" focusViewId="/UIShellMainPage"
              taskType="defaultMain"
              taskFlowId="/WEB-INF/HelloWorldFlow.xml#HelloWorldFlow"
              label="Hello World Page"/>
  </itemNode>
</menu>

A default regional task type displays the jsff in the regional area under the listed tasks.

isDynamicTabNavigation provides an option to suppress dynamic tab navigation and just display one main area at a time. Other menu metadata stay the same. Tasks List will continue to render. Clicking a Tasks Link will replace the current main area task flow with the new one. Multiple defaultMain definitions are allowed and will open multiple tabs on page load. The first one with disclosed="true" will be the tab in focus. If the property value is not defined, it defaults to true.