Contents
Previous
Next
| UIX Developer's Guide |
Contents |
Previous |
Next |
This chapter describes how components are combined to create a page, and other page-level issues.
This chapter contains the following sections:
A page layout organizes content on an entire page. Figure 13-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 13-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:data="http://xmlns.oracle.com/uix/ui"
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 five branding and advertising named children: largeAdvertisement, mediumAdvertisement, corporateBranding, productBranding, and cobranding. In most cases only corporateBranding and productBranding are used, and that is what we will show in subsequent examples. In this example all five 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:data="http://xmlns.oracle.com/uix/ui"
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>
<image source="/docs/devguide/images/page_layouts/productBrand.gif"
shortDesc="product"/>
</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 two named children displayed in the footer, copyright and privacy.
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:data="http://xmlns.oracle.com/uix/ui"
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 2003, Oracle. All rights reserved.
</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="product"/>
</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 uiXML 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:data="http://xmlns.oracle.com/uix/ui"
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>
<!-- Navigation -->
<globalButtons>
<globalButtonBar>
<contents>
<globalButton text="View source"
icon="/docs/devguide/images/page_layouts/globalhelp.gif"
ctrl:event="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 2003, Oracle. All rights reserved.
</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="product"/>
</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 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:data="http://xmlns.oracle.com/uix/ui"
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>
<!-- 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"
ctrl: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"
icon="/docs/devguide/images/page_layouts/globalhelp.gif"
ctrl:event="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 2003, Oracle. All rights reserved.
</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="product"/>
</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 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 cols="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>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 13-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 13-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 13-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 13-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 13-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 13-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 13-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 is a non-interactive element, and only used as an indicator. 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:data="http://xmlns.oracle.com/uix/ui"
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 title="Checkout: Payment Information">
<!-- Page Content -->
<location>
<train selectedIndex="1">
<contents>
<link text="Address" destination="http://www.oracle.com"/>
<link text="Payment" destination="http://www.oracle.com"/>
<link text="Shipping" destination="http://www.oracle.com"/>
<link text="Review" destination="http://www.oracle.com"/>
</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" name="Visa"/>
<option text="MasterCard" name="MC"/>
<option text="Discover" name="Disc"/>
<option text="American Express" name="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" name="1"/>
<option text="February" name="2"/>
<option text="March" name="3"/>
<option text="April" name="4"/>
<option text="May" name="5"/>
<option text="June" name="6"/>
<option text="July" name="7"/>
<option text="August" name="8"/>
<option text="September" name="9"/>
<option text="October" name="10"/>
<option text="November" name="11"/>
<option text="December" name="12"/>
</contents>
</messageChoice>
<messageChoice name="year"
prompt="Expiration year"
required="yes">
<contents>
<option text="2001" name="2001"/>
<option text="2002" name="2002"/>
<option text="2003" name="2003"/>
<option text="2004" name="2004"/>
<option text="2005" name="2005"/>
<option text="2006" name="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"
icon="/docs/devguide/images/page_layouts/globalhelp.gif"
ctrl:event="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 2003, Oracle. All rights reserved.
</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="product"/>
</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:data="http://xmlns.oracle.com/uix/ui"
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 title="Checkout: Review Information">
<!-- Page Content -->
<location>
<train selectedIndex="3">
<contents>
<link text="Address" destination="http://www.oracle.com"/>
<link text="Payment" destination="http://www.oracle.com"/>
<link text="Shipping" destination="http://www.oracle.com"/>
<link text="Review" destination="http://www.oracle.com"/>
</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"
icon="/docs/devguide/images/page_layouts/globalhelp.gif"
ctrl:event="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 2003, Oracle. All rights reserved.
</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="product"/>
</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, UIX Includes and Templating tells how to define a repeated element once, further simplifying page creation and maintenance.