Contents
Previous
Next
| Oracle ADF UIX Developer's Guide | Contents |
Previous |
Next |
This chapter describes how components are combined to create a page, and other page-level issues. It contains the following sections:
An Oracle ADF UIX page layout organizes content on an entire page. Figure 8-1 shows the main areas in a UIX page. (The images in this chapter implement the Oracle Browser Look and Feel (BLAF).)
A page generally contains the following areas: branding (1), navigation (2), global buttons (3), page content (4), and footer (5). (These numbers correspond to the numbers called out in Figure 8-1.)
One page layout element is the PageLayoutBean. In this section we will take a look at this bean in particular and use it to illustrate general user interface design principles. Keep in mind that many of the recommendations in this chapter are suggestions based on user interface design ideas rather than UIX limitations.
On its own a PageLayoutBean doesn't have much content. Let's take a look at an example of an empty PageLayoutBean.
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:html="http://www.w3.org/TR/REC-html40">
<ctrl:content xmlns:ui="http://xmlns.oracle.com/uix/ui">
<body>
<contents>
<form name="theForm">
<contents>
<pageLayout>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
</ctrl:page>
Let's start enhancing the page by adding some branding and advertising. PageLayoutBean supports six branding and advertising named children: largeAdvertisement, mediumAdvertisement, corporateBranding, productBranding, inContextBranding and cobranding. In most cases only corporateBranding and productBranding are used, and that is what we will show in most of the examples. In this example all six are shown and the roll-over text indicates which image corresponds to which child.
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:html="http://www.w3.org/TR/REC-html40">
<ctrl:content xmlns:ui="http://xmlns.oracle.com/uix/ui">
<body>
<contents>
<form name="theForm">
<contents>
<pageLayout>
<!-- Branding -->
<largeAdvertisement>
<image source="/docs/devguide/images/page_layouts/largeAd.gif"
shortDesc="large ad"
destination="http://www.oracle.com"/>
</largeAdvertisement>
<mediumAdvertisement>
<image source="/docs/devguide/images/page_layouts/mediumAd.gif"
shortDesc="medium ad"/>
</mediumAdvertisement>
<corporateBranding>
<image source="/docs/devguide/images/page_layouts/corporateBrand.gif"
shortDesc="corporate"/>
</corporateBranding>
<productBranding>
<productBranding text="Product Name"/>
</productBranding>
<inContextBranding>
<formattedText text="Customer <b>ABCXYZ Inc. - Menlo Park</b>"
styleUsage="inContextBranding" />/>
</inContextBranding>
<cobranding>
<image source="/docs/devguide/images/page_layouts/cobrand.gif"
shortDesc="cobrand"/>
</cobranding>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
</ctrl:page>
The chrome type of the pageLayout can be displayed in a compact or expanded form.
The default type is compact which renders the productBrandingnext to the corporateBranding
as was shown in the previous example and will be shown in subsequent examples.
The expanded chrome type renders the productBrandingbelow the corporateBranding
and in this configuration it makes sense to render a product branding image. To set up the expanded configuration,
set the chromeType attribute on pageLayout to expanded. You cannot
have inContextBranding in the expanded mode. If you have inContextBranding, then the productBranding
automatically renders next to the corporateBranding.
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:html="http://www.w3.org/TR/REC-html40">
<ctrl:content xmlns:ui="http://xmlns.oracle.com/uix/ui">
<body>
<contents>
<form name="theForm">
<contents>
<pageLayout chromeType="expanded">
<!-- Branding -->
<largeAdvertisement>
<image source="/docs/devguide/images/page_layouts/largeAd.gif"
shortDesc="large ad"
destination="http://www.oracle.com"/>
</largeAdvertisement>
<mediumAdvertisement>
<image source="/docs/devguide/images/page_layouts/mediumAd.gif"
shortDesc="medium ad"/>
</mediumAdvertisement>
<corporateBranding>
<image source="/docs/devguide/images/page_layouts/corporateBrand.gif"
shortDesc="corporate"/>
</corporateBranding>
<productBranding>
<image source="/docs/devguide/images/page_layouts/productbrand.gif"
shortDesc="productbrand"/>
</productBranding>
<cobranding>
<image source="/docs/devguide/images/page_layouts/cobrand.gif"
shortDesc="cobrand"/>
</cobranding>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
</ctrl:page>A page footer is used to visually close the page, and also serves as an area to repeat high level navigation (discussed below), as well as give copyright information and a privacy statement link. Later we will see examples where the footer includes high level navigation.
PageLayoutBean supports three named children displayed in the footer, copyright, privacy, and about.
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:html="http://www.w3.org/TR/REC-html40">
<ctrl:content xmlns:ui="http://xmlns.oracle.com/uix/ui">
<body>
<contents>
<form name="theForm">
<contents>
<pageLayout>
<!-- Footer Elements -->
<copyright>Copyright 2001, Oracle Corp.</copyright>
<privacy>
<link text="Privacy Statement"
destination="http://www.oracle.com"/>
</privacy>
<about>
<link text="About UIX"
destination="http://uix.us.oracle.com/cabo/docs/index.html"/>
</about>
<!-- Branding -->
<corporateBranding>
<image source="/docs/devguide/images/page_layouts/corporateBrand.gif"
shortDesc="corporate"/>
</corporateBranding>
<productBranding>
<productBranding text="Product Name"/>
</productBranding>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
</ctrl:page>The global buttons area is a content or functional area that is "global" or available from every part of an application. If the content is available from 95-100% of the application, a global button should be used to access the information. There should be at least one global button per application, "Help". The maximum recommended number of global buttons is seven, for spacing and clarity of navigation.
Common global buttons include:
Every text label of a global button is repeated in the page footer to give users easy navigation from the bottom of the page.
An application switcher can also be added to the same area. The application switcher is used to switch between applications or modules within an application.
Let's look at an example that includes global buttons and an application switcher. Note the repetition of the button labels in the footer. Note also that one of the buttons, the "View Source" button, allows you to view UIX XML source for the page. The "View Source" button should never be included on any real application page.
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:html="http://www.w3.org/TR/REC-html40"
expressionLanguage="el">
<ctrl:content xmlns:ui="http://xmlns.oracle.com/uix/ui">
<body>
<contents>
<form name="theForm">
<contents>
<pageLayout chromeType="expanded">
<!-- Navigation -->
<globalButtons>
<globalButtonBar>
<contents>
<globalButton text="View source"
icon="/docs/devguide/images/page_layouts/globalhelp.gif"
destination="${ctrl:eventUrl(uix, 'viewSource')}"/>
<globalButton text="Help"
icon="/docs/devguide/images/page_layouts/globalhelp.gif"
destination="http://www.oracle.com"/>
<applicationSwitcher name="mySwitcher">
<contents>
<option text="Post Office" value="PostOffice"/>
<option text="Marketplace" value="Marketplace" selected="true"/>
<option text="Restaurants" value="Restaurants"/>
</contents>
</applicationSwitcher>
</contents>
</globalButtonBar>
</globalButtons>
<!-- Footer Elements -->
<copyright>Copyright 2001, Oracle Corp.</copyright>
<privacy>
<link text="Privacy Statement"
destination="http://www.oracle.com"/>
</privacy>
<!-- Branding -->
<corporateBranding>
<image source="/docs/devguide/images/page_layouts/corporateBrand.gif"
shortDesc="corporate"/>
</corporateBranding>
<productBranding>
<image source="/docs/devguide/images/page_layouts/productBrand.gif"
shortDesc="productBrand"/>
</productBranding>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
</ctrl:page>Navigational elements are the cornerstone to maneuvering through an application. There can be many levels of navigation, each level being a subset of the previous one. As a user navigates or drills down through the levels they will access more detailed content and functionality.
Level one navigation is the highest level division of content or actions. We recommend a tabBar is used for level one navigation, and that there are at least two and no more than seven tabs. On the pageLayoutBean these are set with the tabs named child. As discussed earlier, the tab labels are repeated in the footer.
From this point on only the additions to the pageLayout portion of the file will be shown. The comment <!--REST OF PAGELAYOUT-->
<pageLayout>
<!-- Navigation -->
<tabs>
<tabBar selectedIndex="1">
<contents>
<link text="Home"
destination="http://www.oracle.com/"/>
<link text="Shopping Cart"
destination="http://www.oracle.com"/>
<link text="Order History"
disabled="true" />
</contents>
</tabBar>
</tabs>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
Level two navigation is a filter of the contents or actions of the selected level one tab. We recommend that level two navigation be displayed as the links on a globalHeader. On the pageLayoutBean these are set with the pageHeader named child. There should be at least two and no more than seven filter divisions.
<pageLayout>
<!-- Navigation -->
<pageHeader>
<globalHeader selectedIndex="1">
<contents>
<link text="Deli" destination="http://www.oracle.com"/>
<link text="Grocery Store" destination="http://www.oracle.com"/>
<link text="Drug Store" destination="http://www.oracle.com"/>
</contents>
</globalHeader>
</pageHeader>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
Level three navigation is a filter of the contents or actions of the selected level two section. Our recommendation is that level three navigation be displayed as the links on a sideNav. On the pageLayoutBean these are set with the start named child. Level three allows for an unlimited (within reason) number of sections.
<pageLayout>
<!-- Navigation -->
<start>
<sideNav selectedIndex="5">
<contents>
<link text="Basics"
destination="http://www.oracle.com"/>
<link text="Beverages"
destination="http://www.oracle.com"/>
<link text="Canned Goods"
destination="http://www.oracle.com"/>
<link text="Dairy Case"
destination="http://www.oracle.com"/>
<link text="Meat & Poultry"
destination="http://www.oracle.com"/>
<link text="Produce"
destination="http://www.oracle.com"/>
</contents>
</sideNav>
</start>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
Now let's see what we have navigated to by adding some content to the page. On the pageLayoutBean the content is set as indexed children.
In order to demonstrate displaying errors with message beans, a button that generates an "error" event is included in the following example (see Handling Errors in ADF UIX for more on displaying errors with message beans). All of the UIX is shown since an event handler section is added and we want the example to be clear. The code for the Java method called will be shown following the UIX.
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:html="http://www.w3.org/TR/REC-html40"
expressionLanguage="el">
<ctrl:content xmlns:ui="http://xmlns.oracle.com/uix/ui">
<body>
<contents>
<form name="theForm">
<contents>
<pageLayout>
<!-- Page Content -->
<contents>
<stackLayout>
<contents>
<header text="Description">
<contents>
<rowLayout>
<contents>
<tableLayout>
<contents>
<inlineMessage prompt="Size">
<contents>
<styledText styleClass="OraDataText" text="2 lbs."/>
</contents>
</inlineMessage>
<inlineMessage prompt="Price">
<contents>
<styledText styleClass="OraDataText" text="$1.64"/>
</contents>
</inlineMessage>
<inlineMessage prompt="Unit Price">
<contents>
<styledText styleClass="OraDataText" text="$.82/lb"/>
</contents>
</inlineMessage>
<inlineMessage prompt="Grown in">
<contents>
<styledText styleClass="OraDataText" text="Mexico"/>
</contents>
</inlineMessage>
<inlineMessage prompt="Organic">
<contents>
<styledText styleClass="OraDataText" text="No"/>
</contents>
</inlineMessage>
</contents>
</tableLayout>
<spacer width="20" height="1"/>
<image source="/docs/devguide/images/page_layouts/tomato.jpg"/>
</contents>
</rowLayout>
</contents>
</header>
<header text="Nutrition Information">
<contents>
<tableLayout>
<contents>
<inlineMessage prompt="Serving Size">
<contents>
<styledText styleClass="OraDataText" text="8 ounces"/>
</contents>
</inlineMessage>
<inlineMessage prompt="Calories">
<contents>
<styledText styleClass="OraDataText" text="50"/>
</contents>
</inlineMessage>
<inlineMessage prompt="Calories from fat">
<contents>
<styledText styleClass="OraDataText" text="0"/>
</contents>
</inlineMessage>
</contents>
</tableLayout>
</contents>
</header>
<header text="Purchase">
<contents>
<rowLayout hAlign="right" vAlign="middle">
<contents>
<messageTextInput prompt="Quantity"
columns="3"
maximumLength="3"
name="numTomatoes">
<boundMessage select="error"/>
</messageTextInput>
<spacer width="4" height="1"/>
<submitButton text="Add to Cart"
event="error"/>
</contents>
</rowLayout>
</contents>
</header>
</contents>
</stackLayout>
</contents>
<!-- Navigation -->
<start>
<sideNav selectedIndex="5">
<contents>
<link text="Basics"
destination="http://www.oracle.com"/>
<link text="Beverages"
destination="http://www.oracle.com"/>
<link text="Canned Goods"
destination="http://www.oracle.com"/>
<link text="Dairy Case"
destination="http://www.oracle.com"/>
<link text="Meat & Poultry"
destination="http://www.oracle.com"/>
<link text="Produce"
destination="http://www.oracle.com"/>
</contents>
</sideNav>
</start>
<pageHeader>
<globalHeader selectedIndex="1">
<contents>
<link text="Deli" destination="http://www.oracle.com"/>
<link text="Grocery Store" destination="http://www.oracle.com"/>
<link text="Drug Store" destination="http://www.oracle.com"/>
</contents>
</globalHeader>
</pageHeader>
<tabs>
<tabBar selectedIndex="1">
<contents>
<link text="Home"
destination="http://www.oracle.com/"/>
<link text="Shopping Cart"
destination="http://www.oracle.com"/>
<link text="Order History"
disabled="true" />
</contents>
</tabBar>
</tabs>
<globalButtons>
<globalButtonBar>
<contents>
<globalButton text="View source"
destination="${ctrl:eventUrl(uix, 'viewSource')}"/>
<globalButton text="Help"
destination="http://www.oracle.com"/>
<applicationSwitcher name="mySwitcher">
<contents>
<option text="Post Office" value="PostOffice"/>
<option text="Marketplace" value="Marketplace" selected="true"/>
<option text="Restaurants" value="Restaurants"/>
</contents>
</applicationSwitcher>
</contents>
</globalButtonBar>
</globalButtons>
<!-- Footer Elements -->
<copyright>Copyright 2001, Oracle Corp.</copyright>
<privacy>
<link text="Privacy Statement"
destination="http://www.oracle.com"/>
</privacy>
<!-- Branding -->
<corporateBranding>
<image source="/docs/devguide/images/page_layouts/corporateBrand.gif"
shortDesc="corporate"/>
</corporateBranding>
<productBranding>
<productBranding text="Product Name"/>
</productBranding>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
<ctrl:handlers>
<ctrl:event name="error">
<ctrl:method class="oracle.cabo.doc.demo.PageLayoutsMessageDemo"
method="handleErrorEvent" />
</ctrl:event>
</ctrl:handlers>
</ctrl:page>
When the Add to Cart button is pressed the following Java method is called.
static public EventResult handleErrorEvent(
BajaContext context,
Page page,
PageEvent event) throws Throwable
{
MessageData messages = new MessageData();
String numTomatoes = event.getParameter("numTomatoes");
String tip = "You can only order 13 tomatoes";
// There is no right answer in this demo!
if ("13".equals( numTomatoes ))
tip = "There is no right answer";
messages.addError("error",
tip,
null);
UIEventResult result = new UIEventResult();
result.setDataProvider(messages.toDataProvider());
return result;
}
A message box describing the error can also be displayed above the title when there is an error on a message bean (see Handling Errors in ADF UIX for more on the message box). On the pageLayoutBean this is set with the messages named child. In the following example the message box will only be visible when the Add to Cart button is pressed.
<pageLayout>
<messages>
<messageBox automatic="true"/>
</messages>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
In general there should be one title per page. In BLAF this is shown as the primary header on a page. On the pageLayoutBean this is set with the title attribute. Let's look at an example.
<pageLayout title="Tomatoes">
<!-- REST OF PAGELAYOUT-->
</pageLayout>
Elements indicating a "location" are used to orient the user. Locator elements include a Train, indicating the user's location in a multi-step process, or BreadCrumbs, reflecting hierarchical navigation. On the pageLayoutBean this is set with the location named child.
In the following example breadCrumbs are used. The first text string in the breadCrumbs should be from the level one navigational element, the second from the level two navigational element, and so on. As the user moves through hierarchical content, or "drills down" through navigation levels to more content and/or functionality, the breadCrumbs track the navigation.
<pageLayout title="Tomatoes">
<!-- Page Content -->
<location>
<breadCrumbs>
<contents>
<link text="Shopping Cart" destination="http://www.oracle.com"/>
<link text="Grocery Store" destination="http://www.oracle.com"/>
<link text="Produce" destination="http://www.oracle.com"/>
<link text="Tomatoes" destination="http://www.oracle.com"/>
</contents>
</breadCrumbs>
</location>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
A Context Switcher in a page allows the contents of the page to be changed based on the context. For example a user is viewing assets for the Accounting department. A user would use the context switcher to switch from viewing the accounting departments assets to the marketing departments assets. All the pages now change to the marketing context. On the pageLayoutBean this is set with the contextSwitcher named child. An example follows.
<pageLayout title="Tomatoes">
<!-- Page Content -->
<contextSwitcher>
<rowLayout>
<contents>
<cellFormat wrappingDisabled="true">
<contents>
<messagePrompt prompt="Other Produce"/>
</contents>
</cellFormat>
<spacer width="5" height="1"/>
<choice>
<contents>
<option text="Carrots"/>
<option text="Cucumbers"/>
<option text="Lettuce"/>
<option text="Potatoes"/>
</contents>
</choice>
<spacer width="3" height="1"/>
<button text="Go" destination="http://www.oracle.com"/>
</contents>
</rowLayout>
</contextSwitcher>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
Quick Links are used for long pages that have clearly defined sections of contents within a page. The quick link "bar" (group of anchor links) provides an overview to the user of the sections of content within a page, some of which may not be visible without scrolling down the page. Each quick link in the quick link "bar" is a link that allows the user to "jump to" a specific section of the page contents quickly. At each section heading after the first one, there is also a link to return to the top. On the pageLayoutBean this is set with the quickLinksShown attribute.
<pageLayout title="Tomatoes" quickLinksShown="true">
<!-- REST OF PAGELAYOUT-->
</pageLayout>
The pageButtons child contains action and navigation buttons that relate to the content of the page. These buttons are shown once under the page title, and once at the bottom of the content area of the page. The only form element allowed in this area is a choice.
<pageLayout title="Tomatoes" quickLinksShown="true">
<!-- Page Content -->
<pageButtons>
<pageButtonBar>
<contents>
<button text="View Cart"/>
</contents>
</pageButtonBar>
</pageButtons>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
The returnNavigation child allows for the addition of a "Return to [X]" link at the bottom of the content area of the page. This link allows the user to move back up the navigation hierarchy, for example to the default page of the tab that is currently selected.
<pageLayout title="Tomatoes" quickLinksShown="true">
<!-- Page Content -->
<returnNavigation>
<link text="Return to Shopping Cart" destination="http://www.oracle.com"/>
</returnNavigation>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
The "Quick Search" area allows a user to search across level one content divisions. In BLAF this means across applications tabs. The quick search should be persistent throughout the sections of content which the search covers, so if the quick search encompasses content in different tabs, each tabbed section should have the quick search. The quick search does not need to be persistent throughout an entire application. On the pageLayoutBean this is set with the quickSearch named child.
<pageLayout title="Tomatoes" quickLinksShown="true">
<!-- Page Content -->
<quickSearch>
<rowLayout>
<contents>
<styledText styleClass="OraPromptText" text="Search"/>
<spacer width="5" height="1"/>
<textInput columns="80"/>
<spacer width="3" height="1"/>
<button text="Go"/>
</contents>
</rowLayout>
</quickSearch>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
Content containers are used in page layouts to help distinguish specific types of content or group information. The content in the container is ancillary in nature. It helps the user complete the task at hand, but is not required. Content containers draw the users attention to a section of information by using a different colored background and content border other than the entire page contents. On the pageLayoutBean this is set with the end named child.
<pageLayout title="Tomatoes" quickLinksShown="true">
<!-- Page Content -->
<end>
<contentContainer background="medium" width="170" text="Tomato Fun Facts">
<contents>
<bulletedList>
<contents>
<styledText styleClass="OraFieldText"
text="Native to the Americas."/>
<styledText styleClass="OraFieldText"
text="Brought to Europe by the Spanish."/>
<styledText styleClass="OraFieldText"
text="Originally thought to be poisonous."/>
</contents>
</bulletedList>
</contents>
</contentContainer>
</end>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
A page stamp provides view-only information about the user's account, the page, or a section of a page.
Examples of page stamps include user login and connection information, date/time status, and task-related status.
The userInfo, pageStatus, and footnote children of pageLayout are
used to put page stamps on the page.
The userInfo child provides a location under the navigation area for presenting user login information
and connection information. The pageStatus child provides a location under the page title
for page-level status and/or key notation. Page-level status is information that is important to the user's task. Key notation is a legend used to define icons,
elements, or terms used within the page content. The footnote child provides a location near the bottom of the page for page-level status
that is ancillary to the user's task.
<pageLayout title="Tomatoes"
<!-- Page Content -->
<userInfo>
<flowLayout>
<contents>
<styledText text="Logged in as" styleClass="OraPageStampText"/>
<styledText text="John" styleClass="OraPageStampLabel"/>
</contents>
</flowLayout>
</userInfo>
<pageStatus>
<flowLayout>
<contents>
<styledText text="Last updated" styleClass="OraPageStampText"/>
<styledText text="05-OCT-2001" styleClass="OraPageStampLabel"/>
</contents>
</flowLayout>
</pageStatus>
<footnote>
<flowLayout>
<contents>
<styledText text="Days to quarter end" styleClass="OraPageStampText"/>
<styledText text="25" styleClass="OraPageStampLabel"/>
</contents>
</flowLayout>
</footnote>
<!-- REST OF PAGELAYOUT-->
</pageLayout>Not all applications use all three levels of navigation on a page. Figures 13-2 through 13-8 show suggested navigation configurations. The numbers called out to the side of each illustration are explained in the description following each illustration.
Figure 8-2 shows a page with all three levels of navigation: tabs, global header, and side navigation. The tabs (1) are the highest level of division of content; the links in the global header (2) filter the selected tab content or actions; and the links in the side navigation (3) filter what is currently selected in the global header.
Figure 8-3 shows a page with tabs only (1). Tabs may be used alone when they are sufficient to divide the content sections or actions within the application.
In Figure 8-4, the global header (2) filters the contents or actions of the selected tab (1). A global header can be used only in conjunction with tabs. Side navigation is not required.
In Figure 8-5, the side navigation (2) filters the contents or actions of the selected tab (1). This configuration is good for applications that have many filter sections.
Figure 8-6 shows a page with side navigation only (1). Side navigation can be used without the tab bar or horizontal navigation. This configuration is good for applications with a "flat" information structure, where grouping content or functions at higher levels does not fit the users mental model of the application task.
Figure 8-7 shows a simple page with no page-level navigation controls. An application may not have any sections or levels; therefore, tabs and other navigation controls are not necessary. In this example the name of the process (page) appears as a label in the blue area (1) which otherwise would contain global header links. Set this label by setting the text attribute on the GlobalHeader element.
Figure 8-8 shows a page in a global navigation state. This is the configuration when a global button (1) is selected. These pages should be available from any place in the application, and should contain content or actions that are applicable to the entire application. The tabs in the tab bar are enabled, but none remain active. Global header navigation and side navigation should not be shown. When a global button is selected, the name of the global section can appear in the blue area which is otherwise used for the global header area.
A page that is part of a step-by-step process should include a Train and NavigationBar. The Train is used as an indication of where the user is in a linear task. It can be an non-interactive element, and only used as an indicator or it can be interactive and used to navigate through the steps of the task. The NavigationBar is used to navigate through the steps of the task.
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:html="http://www.w3.org/TR/REC-html40"
expressionLanguage="el">
<ctrl:content xmlns:ui="http://xmlns.oracle.com/uix/ui">
<body>
<contents>
<form name="theForm">
<contents>
<pageLayout title="Checkout: Payment Information">
<!-- Page Content -->
<location>
<!-- example of a non-interactive train -->
<!-- a non-interactive train does not have -->
<!-- destination or formName attributes set -->
<train value="2">
<contents>
<link text="Address" />
<link text="Payment" />
<link text="Shipping" />
<link text="Review" />
</contents>
</train>
</location>
<pageButtons>
<pageButtonBar>
<contents>
<button text="Cancel"/>
<navigationBar name="nav" minValue="1" maxValue="4" value="2"/>
<button text="Submit"/>
</contents>
</pageButtonBar>
</pageButtons>
<contents>
<inlineMessage required="yes"
prompt="Indicates a Required Field"/>
<spacer height="10" width="1"/>
<tableLayout width="50%">
<contents>
<messageChoice name="cardType"
prompt="Card type"
required="yes">
<contents>
<option text="Visa" value="Visa"/>
<option text="MasterCard" value="MC"/>
<option text="Discover" value="Disc"/>
<option text="American Express" value="Amex"/>
</contents>
</messageChoice>
<messageTextInput name="CardNumber"
prompt="Card Number"
required="yes"
maximumLength="19"
columns="19"/>
<messageChoice name="month"
prompt="Expiration month"
required="yes">
<contents>
<option text="January" value="1"/>
<option text="February" value="2"/>
<option text="March" value="3"/>
<option text="April" value="4"/>
<option text="May" value="5"/>
<option text="June" value="6"/>
<option text="July" value="7"/>
<option text="August" value="8"/>
<option text="September" value="9"/>
<option text="October" value="10"/>
<option text="November" value="11"/>
<option text="December" value="12"/>
</contents>
</messageChoice>
<messageChoice name="year"
prompt="Expiration year"
required="yes">
<contents>
<option text="2001" value="2001"/>
<option text="2002" value="2002"/>
<option text="2003" value="2003"/>
<option text="2004" value="2004"/>
<option text="2005" value="2005"/>
<option text="2006" value="2006"/>
</contents>
</messageChoice>
</contents>
</tableLayout>
</contents>
<!-- Navigation -->
<tabs>
<tabBar selectedIndex="1">
<contents>
<link text="Home"
destination="http://www.oracle.com/"/>
<link text="Shopping Cart"
destination="http://www.oracle.com"/>
<link text="Order History"
disabled="true" />
</contents>
</tabBar>
</tabs>
<globalButtons>
<globalButtonBar>
<contents>
<globalButton text="View source"
destination="${ctrl:eventUrl(uix, 'viewSource')}"/>
<globalButton text="Help"
destination="http://www.oracle.com"/>
<applicationSwitcher name="mySwitcher">
<contents>
<option text="Post Office" value="PostOffice"/>
<option text="Marketplace" value="Marketplace" selected="true"/>
<option text="Restaurants" value="Restaurants"/>
</contents>
</applicationSwitcher>
</contents>
</globalButtonBar>
</globalButtons>
<!-- Footer Elements -->
<copyright>Copyright 2001, Oracle Corp.</copyright>
<privacy>
<link text="Privacy Statement"
destination="http://www.oracle.com"/>
</privacy>
<!-- Branding -->
<corporateBranding>
<image source="/docs/devguide/images/page_layouts/corporateBrand.gif"
shortDesc="corporate"/>
</corporateBranding>
<productBranding>
<productBranding text="Product Name"/>
</productBranding>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
</ctrl:page>
A step by step process may or may not include a review step as the last step. A review page typically contains information relating to the previous steps where data changes have been made.
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:html="http://www.w3.org/TR/REC-html40"
expressionLanguage="el">
<ctrl:content xmlns:ui="http://xmlns.oracle.com/uix/ui">
<body>
<contents>
<form name="theForm">
<contents>
<pageLayout title="Checkout: Review Information">
<!-- Page Content -->
<location>
<!-- example of a non-interactive train -->
<!-- a non-interactive train does not have -->
<!-- destination or formName attributes set -->
<train value="4">
<contents>
<link text="Address" />
<link text="Payment" />
<link text="Shipping" />
<link text="Review" />
</contents>
</train>
</location>
<pageButtons>
<pageButtonBar>
<contents>
<button text="Cancel"/>
<navigationBar name="nav" minValue="1" maxValue="4" value="4"/>
<button text="Submit"/>
</contents>
</pageButtonBar>
</pageButtons>
<contents>
<stackLayout>
<contents>
<styledText styleClass="OraInstructionText"
text="Please review your information."/>
<header text="Address">
<contents>
<tableLayout hAlign="center">
<contents>
<inlineMessage prompt="Street">
<contents>
<styledText styleClass="OraDataText"
text="22 Clinton Way"/>
</contents>
</inlineMessage>
<inlineMessage prompt="City">
<contents>
<styledText styleClass="OraDataText"
text="San Francisco"/>
</contents>
</inlineMessage>
<inlineMessage prompt="State">
<contents>
<styledText styleClass="OraDataText"
text="CA"/>
</contents>
</inlineMessage>
<inlineMessage prompt="Postal Code">
<contents>
<styledText styleClass="OraDataText"
text="94123"/>
</contents>
</inlineMessage>
<inlineMessage prompt="Country">
<contents>
<styledText styleClass="OraDataText"
text="USA"/>
</contents>
</inlineMessage>
<inlineMessage prompt="Phone">
<contents>
<styledText styleClass="OraDataText"
text="415-555-8642"/>
</contents>
</inlineMessage>
</contents>
</tableLayout>
</contents>
</header>
<header text="Payment Information">
<contents>
<tableLayout hAlign="center">
<contents>
<inlineMessage prompt="Card Type">
<contents>
<styledText styleClass="OraDataText"
text="Visa"/>
</contents>
</inlineMessage>
<inlineMessage prompt="Card Number">
<contents>
<styledText styleClass="OraDataText"
text="1234-1234-1234-1234"/>
</contents>
</inlineMessage>
<inlineMessage prompt="Card Expiration">
<contents>
<styledText styleClass="OraDataText"
text="09/2002"/>
</contents>
</inlineMessage>
</contents>
</tableLayout>
</contents>
</header>
<header text="Shipping Information">
<contents>
<tableLayout hAlign="center">
<contents>
<inlineMessage prompt="Company">
<contents>
<styledText styleClass="OraDataText"
text="UPS"/>
</contents>
</inlineMessage>
<inlineMessage prompt="Service Type">
<contents>
<styledText styleClass="OraDataText"
text="Standard Ground"/>
</contents>
</inlineMessage>
</contents>
</tableLayout>
</contents>
</header>
</contents>
</stackLayout>
</contents>
<!-- Navigation -->
<tabs>
<tabBar selectedIndex="1">
<contents>
<link text="Home"
destination="http://www.oracle.com/"/>
<link text="Shopping Cart"
destination="http://www.oracle.com"/>
<link text="Order History"
disabled="true" />
</contents>
</tabBar>
</tabs>
<globalButtons>
<globalButtonBar>
<contents>
<globalButton text="View source"
destination="${ctrl:eventUrl(uix, 'viewSource')}"/>
<globalButton text="Help"
destination="http://www.oracle.com"/>
<applicationSwitcher name="mySwitcher">
<contents>
<option text="Post Office" value="PostOffice"/>
<option text="Marketplace" value="Marketplace" selected="true"/>
<option text="Restaurants" value="Restaurants"/>
</contents>
</applicationSwitcher>
</contents>
</globalButtonBar>
</globalButtons>
<!-- Footer Elements -->
<copyright>Copyright 2001, Oracle Corp.</copyright>
<privacy>
<link text="Privacy Statement"
destination="http://www.oracle.com"/>
</privacy>
<!-- Branding -->
<corporateBranding>
<image source="/docs/devguide/images/page_layouts/corporateBrand.gif"
shortDesc="corporate"/>
</corporateBranding>
<productBranding>
<productBranding text="Product Name"/>;
</productBranding>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
</ctrl:page>
Sometimes, it may be necessary for developers to create UIX
pages which launch other pages. In order to make this easier, UIX
provides a client-side Javascript function --
openWindow() -- which developers can
call to manage the launching of their new browser windows. This
same function is used internally by UIX, and it is located in
the oracle.cabo.ui.jsLibs.MarlinCore.js library.
This library is already loaded in most UIX pages.
In deployment versions of UIX, the Javascript file containing this function
will be reduced for higher performance. Therefore, to see a copy containing comments
and documentation, consult the source release for your UIX version and look in the
oracle.cabo.ui.jsLibs directory. Only functions which
are not prefixed by an underscore ("_") are supported; others are for internal use
and subject to change without notice.
To use the openWindow() function, you will
need to pass it a few parameters:
The function will return a pointer to the new window Object it it was successfully created, or null otherwise.
This chapter explained how to tie elements together into a complete page. It also covered some general user interface design ideas. Other chapters in this Guide discuss more complex elements and page issues. One such issue is that many pages have common parts, for example the global buttons should be the same for every page in an application. For example, Includes and Templating in ADF UIX tells how to define a repeated element once, further simplifying page creation and maintenance.
Copyright © 2001, 2004, Oracle.
All rights reserved.