UIX開発者ガイド | ![]() 目次 |
![]() 前へ |
![]() 次へ |
このトピックでは、コンポーネントを組み合せてページを作成する方法、およびその他のページ・レベルの項目について説明します。
ここでは、次の項目について説明します。
ページ・レイアウトは、ページ全体のコンテンツを編成します。図13-1に、UIXページのメイン領域を示します。(このトピックのイメージでは、Oracle Browser Look and Feel(BLAF)を実装しています。)
ページには一般に、図中の番号1のブランド、番号2のナビゲーション、番号3のグローバル・ボタン、番号4のページ・コンテンツおよび番号5のフッターという領域があります。(これらの番号は、図13-1内の番号に対応しています。)
ページ・レイアウト要素の1つにPageLayoutBean
があります。このセクションでは、特にこのBeanについて説明し、これを使用してユーザー・インタフェース設計の一般原理を示します。このトピックに記載する推奨事項の多くはUIXの制限事項ではなく、ユーザー・インタフェース設計の観点から出される提案であることに注意してください。
PageLayoutBean
自体には、内容はほとんどありません。空の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>
ブランドと広告を追加し、ページを拡張していきます。PageLayoutBean
は、largeAdvertisement
、mediumAdvertisement
、corporateBranding
、productBranding
およびcobranding
というブランドおよび広告に使用する5つの名前の付けられた子をサポートします。ほとんどの場合、corporateBranding
およびproductBranding
のみが使用されますが、これについては後の例で説明します。次の例では5つの子すべてを使用しており、ロールオーバー・テキストでどのイメージがどの子に対応するかを示しています。
<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>
ページ・フッターは、著作権情報およびプライバシ文へのリンクを表示する以外に、ページを視覚的に閉じるために使用し、上位レベル・ナビゲーション(後述)を繰り返すためにも使用します。フッターに上位レベル・ナビゲーションが含まれている例は、後で示します。
PageLayoutBeanは、copyright
およびprivacy
というフッターに表示される2つの名前の付けられた子をサポートします。
<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 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="product"/>
</productBranding>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
</ctrl:page>
グローバル・ボタン領域は、グローバル、つまりアプリケーションのあらゆる箇所から使用するコンテンツまたは機能領域です。アプリケーション内の95%から100%で使用するコンテンツは、グローバル・ボタンを使用して情報にアクセスできるようにします。アプリケーションには、少なくとも1つのグローバル・ボタン「ヘルプ」が必要です。間隔およびナビゲーションの明快さを考慮すると、グローバル・ボタンの推奨最大数は7になります。
一般的なグローバル・ボタンには、次のようなものが考えられます。
ユーザーがページの最下部から簡単に移動できるよう、グローバル・ボタンのテキスト・ラベルがページ・フッターに繰り返し表示されます。
アプリケーション・スイッチャも、同じ領域に追加できます。アプリケーション・スイッチャは、アプリケーション間またはアプリケーション内のモジュール間で切替えを行う場合に使用します。
グローバル・ボタンおよびアプリケーション・スイッチャを組み込んだ例を次に示します。フッターでボタン・ラベルが繰り返されていることに注意してください。「View Source」ボタンを使用してページのuiXMLソースを表示できることにも注意してください。もちろん「View Source」ボタンは、実際のアプリケーション・ページには含めないでください。
<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 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="product"/>
</productBranding>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
</ctrl:page>
ナビゲーション関係の要素は、アプリケーションをうまく操作するためには必要不可欠です。多くのナビゲーション・レベルを設定し、各レベルを前のレベルのサブセットにすることができます。レベル間を移動またはドリルダウンすると、より詳細なコンテンツおよび機能にアクセスします。
レベル1のナビゲーションは、コンテンツまたは処理の最上位レベルに当たる部分です。レベル1のナビゲーションにはtabBar
を使用することをお薦めします。タブの数は2つ以上7つ以下です。pageLayoutBean
では、これらはtabs
という名前の付けられた子で設定されます。前述したように、タブ・ラベルはフッターで繰り返し表示されます。
ここからは、ファイルのpageLayoutに追加する部分のみを示します。コメント<!--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>
レベル2のナビゲーションは、選択したレベル1のタブのコンテンツまたはアクションです。レベル2のナビゲーションは、globalHeader
にリンクとして含めることをお薦めします。pageLayoutBean
では、これらはpageHeader
という名前の付けられた子で設定されます。フィルタ部分は2つ以上7つ以下です。
<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>
レベル3のナビゲーションは、選択したレベル2セクションのコンテンツまたはアクションです。レベル3のナビゲーションは、sideNav
にリンクとして含めることをお薦めします。pageLayoutBean
では、これらはstart
という名前の付けられた子で設定されます。レベル3には、セクションを(妥当な範囲内で)無制限に指定できます。
<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>
ページに各種のコンテンツを追加して完成したものを示します。pageLayoutBean
では、コンテンツは索引付けされた子として設定されます。
メッセージBeanでのエラー表示を見せるため、次の例ではerrorイベントを生成するボタンを組み込んでいます(メッセージBeanでのエラー表示の詳細は、「エラーの処理」のトピックを参照してください)。イベント・ハンドラのセクションが追加されており、例を明確にする目的から、uiXMLをすべて示します。コールされるJavaメソッドのコードは、uiXMLの後に示します。
<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 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="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>
「Add to Cart」ボタンがクリックされると、次のJavaメソッドがコールされます。
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;
}
メッセージBeanにエラーがある場合、エラーを説明するメッセージ・ボックスもタイトルの上に表示されるようにできます(メッセージ・ボックスの詳細は、「エラーの処理」のトピックを参照してください)。pageLayoutBean
では、これはmessages
という名前の付けられた子で設定されます。次の例では、メッセージ・ボックスは「Add to Cart」ボタンがクリックされたときにのみ表示されます。
<pageLayout>
<messages>
<messageBox automatic="true"/>
</messages>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
一般に、各ページにはタイトルが1つ必要です。BLAFでは、タイトルはページのプライマリ・ヘッダーとして表示されます。pageLayoutBean
では、これはtitle
属性で設定されます。次に例を示します。
<pageLayout title="Tomatoes">
<!-- REST OF PAGELAYOUT-->
</pageLayout>
ユーザーにアプリケーション内での現在の位置や方向を示すためにlocation要素を使用できます。ロケータ要素には、複数のプロセス内におけるユーザーの位置を示すTrain
や、階層ナビゲーションを反映するBreadCrumb
などがあります。pageLayoutBean
では、これはlocation
という名前の付けられた子で設定されます。
次の例では、breadCrumbs
を使用しています。breadCrumbs
の最初のテキスト文字列はレベル1のナビゲーション要素から、2番目のテキスト文字列はレベル2のナビゲーション要素から、というようになっています。3番目、4番目についても同様です。ユーザーがコンテンツの階層を移動するか、ナビゲーション・レベルを他のコンテンツまたは機能(あるいはその両方)にドリルダウンすると、breadCrumbs
によりナビゲーションが追跡されます。
<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>
ページのコンテキスト・スイッチャを使用すると、ページのコンテンツをコンテキストに基づいて変更できます。たとえば、ユーザーが会計部門の資産を表示しているとします。コンテキスト・スイッチャを使用して、表示内容を会計部門の資産からマーケティング部門の資産に切り替えます。すると、すべてのページがマーケティング・コンテキストに変わります。pageLayoutBean
では、これはcontextSwitcher
という名前の付けられた子で設定されます。次に例を示します。
<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>
クイック・リンクは、長いページで、ページ内のコンテンツのセクションがを明確に設定されている場合に使用されます。クイック・リンク・バー(アンカー・リンクのグループ)は、ページ内のコンテンツ・セクションの概要をユーザーに示します。いくつかのセクションが、ページを下にスクロールしないと見えない場合があります。クイック・リンク・バーの各クイック・リンクは、ユーザーがページ・コンテンツの特定のセクションに即座にジャンプできるようにするためのリンクです。最初を除く各セクション・ヘッダーには、最上部に戻るためのリンクもあります。pageLayoutBean
では、これはquickLinksShown
属性で設定されます。
<pageLayout title="Tomatoes" quickLinksShown="true">
<!-- REST OF PAGELAYOUT-->
</pageLayout>
pageButtons
には、ページのコンテンツに関連する処理およびナビゲーション・ボタンが含まれます。これらのボタンはページ・タイトルの下に1回、ページのコンテンツ領域の下部に1回、それぞれ表示されます。この領域では、フォーム要素choice
のみ追加で使用できます。
<pageLayout title="Tomatoes" quickLinksShown="true">
<!-- Page Content -->
<pageButtons>
<pageButtonBar>
<contents>
<button text="View Cart"/>
</contents>
</pageButtonBar>
</pageButtons>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
returnNavigation
によって、ページのコンテンツ領域の下部に「Return to [X]」リンクが追加できます。このリンクは、ユーザーがナビゲーション階層を前に、たとえば現在選択されているタブのデフォルト・ページに戻る際に使用します。
<pageLayout title="Tomatoes" quickLinksShown="true">
<!-- Page Content -->
<returnNavigation>
<link text="Return to Shopping Cart" destination="http://www.oracle.com"/>
</returnNavigation>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
クイック検索領域では、ユーザーがレベル1のコンテンツ部分の検索を行います。これはアプリケーション・タブをまたがる検索を意味します。クイック検索は、検索対象となるコンテンツのセクション全体にわたって永続するため、クイック検索に別タブのコンテンツが含まれる場合は、タブの付いたセクションごとにクイック検索が必要です。クイック検索は、アプリケーション全体を通して永続する必要はありません。pageLayoutBean
では、これはquickSearch
という名前の付けられた子で設定されます。
<pageLayout title="Tomatoes" quickLinksShown="true">
<!-- Page Content -->
<quickSearch>
<rowLayout>
<contents>
<form name="qsearch">
<contents>
<styledText styleClass="OraPromptText" text="Search"/>
<spacer width="5" height="1"/>
<textInput cols="80"/>
<spacer width="3" height="1"/>
<submitbutton text="Go" destination="..."/>
</contents>
</form>
</contents>
</rowLayout>
</quickSearch>
<!-- REST OF PAGELAYOUT-->
</pageLayout>
コンテンツ・コンテナは、特定のタイプのコンテンツまたはグループ情報を区別できるようページ・レイアウトで使用されます。コンテナ内のコンテンツは補助的なものです。ユーザーが目の前のタスクを完了する際に役立ちますが、必須ではありません。コンテンツ・コンテナは、ページ全体のコンテンツとは異なる色の背景およびコンテンツ境界線を使用することにより、ユーザーの注意を情報のあるセクションに引き付けます。pageLayoutBean
では、これはend
という名前の付けられた子で設定されます。
<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>
アプリケーションのページで、3レベルのナビゲーションすべてを使用する必要はありません。お薦めするナビゲーション構成を図13-2から図13-8に示します。図中の番号の説明は、図の後に記述されています。
図13-2は、タブ、グローバル・ヘッダーおよびサイド・ナビゲーションの3つのナビゲーション・レベルすべてが揃ったページです。番号1のタブはコンテンツの最上位レベル部分で、番号2のグローバル・ヘッダーのリンクは選択したタブのコンテンツまたはアクションを表します。番号3のサイド・ナビゲーションのリンクは、グローバル・ヘッダーで現在選択されている項目をさらに区分します。
図13-3は、番号1のタブのみのページを示しています。タブのみでアプリケーション内のコンテンツ・セクションまたはアクションを分割できる場合は、タブのみを使用します。
図13-4は、選択された番号1のタブのコンテンツまたはアクションを、番号2のグローバル・ヘッダーでさらに区分したページを示しています。グローバル・ヘッダーは、タブと組み合せてのみ使用できます。サイド・ナビゲーションは必須ではありません。
図13-5は、選択された番号1のタブのコンテンツまたはアクションを、番号2のサイド・ナビゲーションで区分したページを示しています。この構成は、区分領域の多いアプリケーションに適しています。
図13-6は、番号1のサイド・ナビゲーションのみのページを示しています。サイド・ナビゲーションは、タブ・バーまたは水平方向のナビゲーションなしでも使用できます。この構成は、上位レベルのコンテンツまたは機能をグループ化するとアプリケーション・タスクのユーザーのメンタル・モデルとの間にずれが生じる、フラットな情報構造のアプリケーションに適しています。
図13-7は、ページ・レベルのナビゲーション・コントロールのない単純なページを示しています。セクションまたはレベルがないアプリケーションの場合は、タブやその他のナビゲーション・コントロールは不要です。この例では、通常はグローバル・ヘッダー・リンクが示される番号1の青色の領域に、プロセス(ページ)の名前がラベルとして表示されています。ラベルをこの位置に表示するには、GlobalHeader
要素にtext
属性を設定します。
図13-8は、グローバル・ナビゲーションの状態にあるページを示しています。これは、番号1のグローバル・ボタンが選択されているときの構成です。このようなページは、アプリケーションのどの場所からも使用可能であり、アプリケーション全体に適用されるコンテンツまたはアクションを含んでいます。タブ・バーのタブは使用可能になっていますが、アクティブではありません。グローバル・ヘッダー・ナビゲーションおよびサイド・ナビゲーションは表示されません。グローバル・ボタンを選択すると、通常はグローバル・ヘッダー領域として使用される青色の領域に、グローバル・セクションの名前が表示されます。
ステップごとのプロセスを含むページには、Train
およびNavigationBar
が必要です。Train
は、タスクを線形に並べてユーザーの現在位置を示す場合に使用します。この要素は対話型ではなく、インジケータとしてのみ使用します。NavigationBar
は、タスクのステップ間を移動する場合に使用します。
<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 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="product"/>
</productBranding>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
</ctrl: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 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 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="product"/>
</productBranding>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
</ctrl:page>
開発段階で、別のページを起動するuiXMLページの作成が必要になる場合があります。この作業を簡単にするために、uiXMLにはクライアント側のJavaScript関数であるopenWindow()
が用意されています。この関数をコールすると、新規のブラウザ・ウィンドウを起動できます。この関数はuiXMLで内部的に使用されることもあり、oracle.cabo.ui.jsLibs.MarlinCore.js
ライブラリに存在します。このライブラリは、すでにほとんどのuiXMLページにロードされています。
UIXのデプロイ用ライブラリでは、この関数を含むJavaScriptファイルはパフォーマンスの向上のために縮小されています。したがって、コメントを含むコピーおよびドキュメントを参照するには、UIXバージョンのソース・リリースを調べ、oracle.cabo.ui.jsLibs
ディレクトリを参照してください。先頭にアンダースコア(_)が付いていない関数のみがサポートされます。その他は内部的に使用する関数で、予告なしに変更されることがあります。
openWindow()
関数を使用するには、この関数にいくつかのパラメータを渡す必要があります。
関数は、新規のウィンドウ・オブジェクトが正常に作成された場合はそのオブジェクトへのポインタを返し、それ以外の場合はNULLを返します。
このトピックでは、要素を結合して1つの完全なページにする方法を説明しました。ユーザー・インタフェースの一般的な設計についても説明しました。このガイドの他のトピックでは、さらに複雑な要素およびページに関する問題を取り上げます。これには、アプリケーションのすべてのページで同じグローバル・ボタンを使用するなど、多くのページに共通部分が存在する場合も含まれます。たとえば、「uiXMLでのインクルードおよびテンプレート定義」では、繰り返される要素を1回だけ定義して、ページの作成およびメンテナンスをさらに簡略化する方法を説明します。