ナビゲーション・ヘッダーをスキップ
Oracle ADF UIX開発者ガイド 目次へ
目次
前のページへ戻る
前へ
次のページへ進む
次へ

8. ADF UIXでのページ・レイアウト

このトピックでは、コンポーネントを組み合せてページを作成する方法、およびその他のページ・レベルの項目について説明します。 ここでは、次の項目について説明します。

ページ・レイアウト

Oracle ADF UIXページ・レイアウトでは、ページ全体のコンテンツを編成します。 図8-1に、UIXページのメイン領域を示します。 (このトピックのイメージでは、Oracle Browser Look and Feel(BLAF)を実装しています。)

図8-1: ページ・レイアウト領域

UIXページの一般的なレイアウト領域: (1)ブランド、(2)ナビゲーション、(3)グローバル・ボタン、(4)ページ・コンテンツ、(5)フッター

ページには一般に、図中の番号1のブランド、番号2のナビゲーション、番号3のグローバル・ボタン、番号4のページ・コンテンツおよび番号5のフッターという領域があります。 (これらの番号は、図8-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: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は、largeAdvertisementmediumAdvertisementcorporateBrandingproductBrandinginContextBrandingおよびcobrandingというブランドおよび広告に使用する6つの名前の付けられた子をサポートします。 ほとんどの場合、corporateBrandingおよびproductBrandingのみが使用されますが、これについては多くの例で説明します。 次の例では6つの子すべてを使用しており、ロールオーバー・テキストでどのイメージがどの子に対応するかを示しています。

<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>

pageLayoutのクロム・タイプは、簡潔なまたは拡張した形式で表示できます。 デフォルト・タイプは簡潔な形式であり、前述の例および次の例で示すとおり、corporateBrandingの隣にproductBrandingがレンダリングされます。 拡張クロム・タイプでは、corporateBrandingの下にproductBrandingがレンダリングされます。この構成では、製品のブランド・イメージをレンダリングするために適切です。 拡張構成を設定するには、pageLayoutchromeType属性をexpandedに設定します。 拡張モードでは、inContextBrandingを設定できません。 inContextBrandingを設定している場合、productBrandingが自動的に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>

フッター

ページ・フッターは、著作権情報およびプライバシ文へのリンクを表示する以外に、ページを視覚的に閉じるために使用し、上位レベル・ナビゲーション(後述)を繰り返すためにも使用します。 フッターに上位レベル・ナビゲーションが含まれている例は、後で示します。

PageLayoutBeanは、copyrightprivacyおよびaboutというフッターに表示される3つの名前の付けられた子をサポートします。

<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>

グローバル・ボタン

グローバル・ボタン領域は、グローバル、つまりアプリケーションのあらゆる箇所から使用するコンテンツまたは機能領域です。 アプリケーション内の95%から100%で使用するコンテンツは、グローバル・ボタンを使用して情報にアクセスできるようにします。 アプリケーションには、少なくとも1つのグローバル・ボタン「ヘルプ」が必要です。 間隔およびナビゲーションの明快さを考慮すると、グローバル・ボタンの推奨最大数は7になります。

一般的なグローバル・ボタンには、次のようなものが考えられます。

ユーザーがページの最下部から簡単に移動できるよう、グローバル・ボタンのテキスト・ラベルがページ・フッターに繰り返し表示されます。

アプリケーション・スイッチャも、同じ領域に追加できます。 アプリケーション・スイッチャは、アプリケーション間またはアプリケーション内のモジュール間で切替えを行う場合に使用します。

グローバル・ボタンおよびアプリケーション・スイッチャを組み込んだ例を次に示します。 フッターでボタン・ラベルが繰り返されていることに注意してください。 「View Source」ボタンを使用してページのUIX XMLソースを表示できることにも注意してください。 もちろん「View Source」ボタンは、実際のアプリケーション・ページには含めないでください。

<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>

ナビゲーション

ナビゲーション関係の要素は、アプリケーションをうまく操作するためには必要不可欠です。 多くのナビゲーション・レベルを設定し、各レベルを前のレベルのサブセットにすることができます。 レベル間を移動またはドリルダウンすると、より詳細なコンテンツおよび機能にアクセスします。

レベル1のナビゲーションは、コンテンツまたは処理の最上位レベルに当たる部分です。 レベル1のナビゲーションにはtabBarを使用することをお薦めします。タブの数は2つ以上7つ以下です。 pageLayoutBeanでは、これらはtabsという名前の付けられた子で設定されます。 前述したように、タブ・ラベルはフッターで繰り返し表示されます。

ここからは、ファイルのpageLayoutに追加する部分のみを示します。 コメント<!--REST OF PAGELAYOUT-->はUIX XMLの内容が他にもあることを示すプレースホルダです。

<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 &amp; 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でのエラー表示の詳細は、「ADF UIXでのエラーの処理」のトピックを参照してください)。 イベント・ハンドラのセクションが追加されており、例を明確にする目的から、UIX XMLをすべて示します。 コールされるJavaメソッドのコードは、UIX XMLの後に示します。

<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 &amp; 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>

「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にエラーがある場合、エラーを説明するメッセージ・ボックスもタイトルの上に表示されるようにできます(メッセージ・ボックスの詳細は、「ADF UIXでのエラーの処理」のトピックを参照してください)。 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や、階層ナビゲーションを反映するBreadCrumbsなどがあります。 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>
       <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>

コンテンツ・コンテナは、特定のタイプのコンテンツまたはグループ情報を区別できるようページ・レイアウトで使用されます。 コンテナ内のコンテンツは補助的なものです。 ユーザーが目の前のタスクを完了する際に役立ちますが、必須ではありません。 コンテンツ・コンテナは、ページ全体のコンテンツとは異なる色の背景およびコンテンツ境界線を使用することにより、ユーザーの注意を情報のあるセクションに引き付けます。 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>

ページ・スタンプは、ユーザーのアカウント、ページ、またはページのセクションに関する表示専用情報を提供します。 ページ・スタンプには、ユーザーのログイン情報や接続情報、日時のステータス、タスク関連のステータスなどがあります。 pageLayoutの子であるuserInfopageStatusおよびfootnoteは、ページにページ・スタンプを挿入するために使用します。

子であるuserInfoは、ユーザーのログイン情報および接続情報を表示するための、ナビゲーション領域内の場所を指定します。 子であるpageStatusは、ページレベルのステータスやキー表記のための、ページ・タイトル内の場所を指定します。 ページレベルのステータスは、ユーザーのタスクに重要な情報です。 キー表記は、ページのコンテンツで使用されるアイコン、要素または用語を定義するために使用される凡例です。 子であるfootnoteは、ユーザーのタスクを補助するページレベルのステータス用の、ページ下部近くの場所を指定します。

<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>

ページのナビゲーション

アプリケーションのページで、3レベルのナビゲーションすべてを使用する必要はありません。 お薦めするナビゲーション構成を図8-2から図8-8に示します。 図中の番号の説明は、図の後に記述されています。

図8-2: タブ、グローバル・ヘッダーおよびサイド・ナビゲーション

ページ・レイアウト: (1)タブ、(2)グローバル・ヘッダー、(3)サイド・ナビゲーション

図8-2は、タブ、グローバル・ヘッダーおよびサイド・ナビゲーションの3つのナビゲーション・レベルすべてが揃ったページです。 番号1のタブはコンテンツの最上位レベル部分で、番号2のグローバル・ヘッダーのリンクは選択したタブのコンテンツまたはアクションを表します。番号3のサイド・ナビゲーションのリンクは、グローバル・ヘッダーで現在選択されている項目をさらに区分します。

図8-3: タブのみ

ページ・レイアウト: (1)タブのみ

図8-3は、番号1のタブのみのページを示しています。 タブのみでアプリケーション内のコンテンツ・セクションまたはアクションを分割できる場合は、タブのみを使用します。

図8-4: タブおよびグローバル・ヘッダー

ページ・レイアウト: (1)タブおよび(2)グローバル・ヘッダー

図8-4は、選択された番号1のタブのコンテンツまたはアクションを、番号2のグローバル・ヘッダーでさらに区分したページを示しています。 グローバル・ヘッダーは、タブと組み合せてのみ使用できます。 サイド・ナビゲーションは必須ではありません。

図8-5: タブおよびサイド・ナビゲーション

ページ・レイアウト: (1)タブおよび(2)サイド・ナビゲーション

図8-5は、選択された番号1のタブのコンテンツまたはアクションを、番号2のサイド・ナビゲーションで区分したページを示しています。 この構成は、区分領域の多いアプリケーションに適しています。

図8-6: サイド・ナビゲーションのみ

ページ・レイアウト: (1)サイド・ナビゲーションのみ

図8-6は、番号1のサイド・ナビゲーションのみのページを示しています。 サイド・ナビゲーションは、タブ・バーまたは水平方向のナビゲーションなしでも使用できます。 この構成は、上位レベルのコンテンツまたは機能をグループ化するとアプリケーション・タスクのユーザーのメンタル・モデルとの間にずれが生じる、フラットな情報構造のアプリケーションに適しています。

図8-7: タブなし

ページ・レイアウト: タブなし、グローバル・ヘッダーのかわりに(1)ラベル

図8-7は、ページ・レベルのナビゲーション・コントロールのない単純なページを示しています。 セクションまたはレベルがないアプリケーションの場合は、タブやその他のナビゲーション・コントロールは不要です。 この例では、通常はグローバル・ヘッダー・リンクが示される番号1の青色の領域に、プロセス(ページ)の名前がラベルとして表示されています。 ラベルをこの位置に表示するには、GlobalHeader要素にtext属性を設定します。

図8-8: グローバル・ナビゲーションの状態

ページ・レイアウト: (1)グローバル・ボタン・ナビゲーション

図8-8は、グローバル・ナビゲーションの状態にあるページを示しています。 これは、番号1のグローバル・ボタンが選択されているときの構成です。 このようなページは、アプリケーションのどの場所からも使用可能であり、アプリケーション全体に適用されるコンテンツまたはアクションを含んでいます。 タブ・バーのタブは使用可能になっていますが、アクティブではありません。 グローバル・ヘッダー・ナビゲーションおよびサイド・ナビゲーションは表示されません。 グローバル・ボタンを選択すると、通常はグローバル・ヘッダー領域として使用される青色の領域に、グローバル・セクションの名前が表示されます。

ステップごとのプロセス

ステップごとのプロセスを含むページには、TrainおよびNavigationBarが必要です。 Train は、タスクを線形に並べてユーザーの現在位置を示す場合に使用します。 この要素は、対話型ではない要素としてインジケータとしてのみ使用できます。または、対話的な要素としてタスクのステップ間を移動する場合に使用できます。 NavigationBarは、タスクのステップ間を移動する場合に使用します。

<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>

ステップごとのプロセスは、最後のステップとして確認のためのステップを含む場合と含まない場合があります。 確認のページには一般に、データ変更が行われたそれまでのステップに関する情報が表示されます。

<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>

ウィンドウを開く

開発段階で、別のページを起動するUIX XMLページの作成が必要になる場合があります。 この作業を簡単にするために、UIX XMLにはクライアント側のJavaScript関数であるopenWindow()が用意されています。この関数をコールすると、新規のブラウザ・ウィンドウを起動できます。 この関数はUIX XMLで内部的に使用されることもあり、oracle.cabo.ui.jsLibs.MarlinCore.jsライブラリに存在します。 このライブラリは、すでにほとんどのUIX XMLページにロードされています。

UIXのデプロイ用ライブラリでは、この関数を含むJavaScriptファイルはパフォーマンスの向上のために縮小されています。 したがって、コメントを含むコピーおよびドキュメントを参照するには、UIXバージョンのソース・リリースを調べ、oracle.cabo.ui.jsLibsディレクトリを参照してください。 先頭にアンダースコア(_)が付いていない関数のみがサポートされます。その他は内部的に使用する関数で、予告なしに変更されることがあります。

openWindow()関数を使用するには、この関数にいくつかのパラメータを渡す必要があります。

関数は、新規のウィンドウ・オブジェクトが正常に作成された場合はそのオブジェクトへのポインタを返し、それ以外の場合はNULLを返します。

まとめ

このトピックでは、要素を結合して1つの完全なページにする方法を説明しました。 ユーザー・インタフェースの一般的な設計についても説明しました。 このガイドの他のトピックでは、さらに複雑な要素およびページに関する問題を取り上げます。 これには、アプリケーションのすべてのページで同じグローバル・ボタンを使用するなど、多くのページに共通部分が存在する場合も含まれます。 たとえば、「ADF UIXでのインクルードおよびテンプレート定義」では、繰り返される要素を1回だけ定義して、ページの作成およびメンテナンスをさらに簡略化する方法を説明します。