ヘッダーをスキップ
Oracle® Mobile Application Framework Oracle Mobile Application Frameworkでのモバイル・アプリケーションの開発
2.1.0
E60836-01
  目次へ移動
目次
前
前 		 次
次		  

4 アプリケーションのナビゲーションの構成

この章では、MAFアプリケーションのSpringboardとナビゲーション・バーを使用して、アプリケーションのナビゲーションを構成する方法について説明します。

この章の内容は次のとおりです。

4.1 MAFアプリケーションの表示動作の概要

Springboardとナビゲーション・バーの表示動作を次のように制御するよう、MAFアプリケーションを構成できます。

  • Springboardとナビゲーション・バーを表示または非表示にすることで、モバイル・デバイスのインタフェースを最適に使用できるようになります。これらのオプションは、ナビゲーション・バーのデフォルトの表示動作をオーバーライドします。ナビゲーション・バーは、アプリケーション機能によって別の状態に指定されていないかぎり、デフォルトで表示されます。

  • Springboardを右からスライドできるようにします。デフォルトでは、Springboardは表示全体を占有せず、そのかわりに左からスライドして、アクティブ・コンテンツ(ナビゲーション・バーの「ホーム」ボタンとアプリケーション機能を含む)を右へプッシュします。

4.2 アプリケーションのナビゲーションの構成

「アプリケーション」ページの「ナビゲーション」のオプション(図4-1を参照)を使用して、ナビゲーション・バーを表示または非表示にしたり、アプリケーションによって使用されるSpringboardのタイプを選択したり、ユーザーがアプリケーションをめくるように見ていくときのSpringboardの反応方法を定義できます。

図4-1 「アプリケーション」ページの「ナビゲーション」のオプション

この図は周囲のテキストで説明しています

始める前に

maf-application.xmlファイルの概要エディタの「アプリケーション」ページを選択する必要があります。

ナビゲーション・バーの表示動作を設定するには:

  1. 「アプリケーションの起動時にナビゲーション・バーを表示」を選択して、MAFアプリケーションで、デフォルトで、Springboardではなくナビゲーション・バーが表示されるようにします(図4-2を参照)。

    図4-2 デフォルトでナビゲーション・バーを表示

    この図は周囲のテキストで説明しています

    このオプションをオフにすると、アプリケーションの起動時にナビゲーション・バーが表示されなくなり、ユーザーにはSpringboardがナビゲーションの唯一の方法として提示されます。ナビゲーション・バーはSpringboardと同じ目的を果たすものなので、これを非表示にすることで冗長な機能を削除できる場合もあります。

  2. 「ナビゲーション・バー・トグル・ボタンの表示」を選択して、選択したアプリケーション機能のコンテンツが表示されているときにはナビゲーション・バーを非表示にします。図4-3はこのオプションを示したもので、図4-2に示されているナビゲーション・バーを、アプリケーション機能のコンテンツによって非表示にする方法が示されています。

    図4-3 ナビゲーション・バーを非表示

    この図は周囲のテキストで説明しています

    このオプションはデフォルトで選択されており、アプリケーション機能によって表示/非表示状態が指定されていなければ、ナビゲーション・バーはデフォルトで表示されます。

Springboardの表示動作を設定するには:

  1. Springboardのタイプを選択します(存在する場合)。

    • なし: アプリケーションにSpringboardを表示しない場合は、このオプションを選択します。

    • デフォルト: MAFによって提供されるデフォルトのSpringboardを表示する場合に選択します。デフォルトのSpringboardは、MAF AMXページとして実装されます。詳細は、第4.6項「MAF AMXコンテンツによるカスタムSpringboardアプリケーション機能に関する必知事項」を参照してください。

    • カスタム: カスタマイズされたSpringboardを使用する場合に選択します。たとえば、埋込みアプリケーション機能をグリッド・レイアウト・パターンに配置するカスタムSpringboardを作成したり、検索機能や共通タスク(「マイ・レポート」、マイ・リードなど)のリストなどのデータを含めることができます。HTMLページまたはMAFモバイルAMXページとして実装できるこのアプリケーションは、maf-feature.xmlファイル(ビュー・コントローラ・プロジェクト内にあります)内でアプリケーション機能として宣言されます。詳細は、第3.3項「アプリケーション機能の表示プロパティの設定」を参照してください。HTMLで記述されたカスタマイズ済Springboard内でナビゲーションを有効にする方法の詳細は、第B章「ローカルHTMLおよびアプリケーション・コンテナAPI」を参照してください。

      • 機能: Springboardとして使用するアプリケーション機能を選択します(図4-5を参照)。カスタムSpringboardの例は、APIDemoサンプル・アプリケーションを参照してください。詳細は、付録G「サンプルのMAFアプリケーション」を参照してください。


        注意:

        アプリケーション機能をカスタムSpringboardとして指定する場合、MAFのデザインタイムによって、「ナビゲーション・バーに表示」および「Springboardに表示」オプションをfalseに設定することが求められます。これにより、ページがユーザーによってナビゲーション・バーまたはSpringboardから起動されるアプリケーション機能としてではなく、カスタムSpringboardとして動作します。

        図4-4 カスタムSpringboardとしてのアプリケーション機能の選択

        この図は周囲のテキストで説明しています

  2. 「アプリケーションの起動時にSpringboardを表示」を選択して、MAFアプリケーションの起動後にエンド・ユーザーに対してSpringboardを表示できるようにします。(このオプションは、「デフォルト」または「カスタム」オプションでのみ使用できます。)

  3. 「Springboardトグル・ボタンの表示」を選択して、Springboardのボタンを表示できるようにします(図4-5を参照)。このボタンはアプリケーション機能内に表示されます。図4-2「デフォルトでナビゲーション・バーを表示」では、アプリケーション機能のコンテキスト内にこのボタンが表示されています。このオプションは、「デフォルト」または「カスタム」オプションでのみ使用できます。

    図4-5 Springboardトグル・ボタン

    この図は周囲のテキストで説明しています

Springboardのスライドアウト動作を設定するには:

  1. 「Springboardアニメーション」を選択して、「右にスライド」を選択します。Springboardは、「スライドアウト幅」オプションで入力したピクセル数値(またはパーセント)によって指定された領域を占有します。「なし」を選択した場合、Springboardは右からスライドできません(つまり、MAFではこのアクションを有効にするためのアニメーションが提供されません)。Springboardが表示領域全体を占有します。


    注意:

    スライドアウト・オプションは、Springboardの「カスタム」または「デフォルト」オプションを選択した場合のみ適用できます。

  2. 幅を設定します(ピクセル単位)。iOSデバイスのSpringboardのデフォルト幅は320ピクセルです。Androidデバイスでは、デフォルトでSpringboardは画面全体を占有するので、使用可能な幅がすべて占有されます。


    注意:

    Springboardが表示領域全体を占有しない場合は、アクティブなアプリケーション機能が残りの表示領域を占有します。詳細は、第4.4項「Springboardにアニメーションを設定する場合の処理」を参照してください。

4.3 ナビゲーション・オプションの構成時の処理

Springboardおよびナビゲーション・バーのオプションを設定すると、adfmf:application.xmlファイルの<adfmf:navigation>要素に対して要素の更新や追加が行われます。たとえば、「なし」を選択すると、<springboard enabled="false">によってコードが更新されます(例4-1を参照)。

例4-1 Springboardを表示しないようにする処理

<adfmf:application>
  ...
  <adfmf:navigation>
     <adfmf:navigationBar enabled="true"/>
     <adfmf:springboard enabled="false"/>
  </adfmf:navigation>
</adfmf:application>

ヒント:

デフォルトでは、ナビゲーション・バーは有効ですが、Springboardは有効ではありません。XMLを手動で更新すると、次のようにSpringboardを有効化できます。 
<adfmf:application>
  ...
<adfmf:navigation>
    <adfmf:springboard enabled="true"/>
  </adfmf:navigation>
  ...
</adfmf:application>

例4-2は、デフォルトを選択したときに、enabled属性がtrueに設定される様子を示しています。


注意:

Springboardはデバイスの画面全体を占有するので、ナビゲーション・バーとSpringboardは同時には表示されません。

例4-2 デフォルトのSpringboardの表示の有効化

<adfmf:application>
  ...
  <adfmf:navigation>
     <adfmf:navigationBar enabled="true"/>
     <adfmf:springboard enabled="true"/>
  </adfmf:navigation>
</adfmf:application>

「カスタム」を選択して、Springboardとして使用するアプリケーション機能を選択すると、エディタでは<adfmf:navigation>要素(例4-3を参照)が移入されます。id属性は、maf-feature.xmlファイルで定義された、カスタムSpringboardとして使用するアプリケーション機能を指しています。

例4-3 カスタムSpringboardの構成

<adfmf:navigation>
    <adfmf:springboard enabled="true">
      <adfmf:springboardFeatureReference id="springboard"/>
    </adfmf:springboard>
  </adfmf:navigation>

4.4 Springboardにアニメーションを設定する場合の処理

例4-4は、maf-application.xmlファイルのナビゲーション・ブロックを示しており、ここでは、Springboardはスライドアウトし、指定された表示領域(213ピクセル)を占有するように設定されています。

例4-4 Springboardアニメーションの構成

<adfmf:navigation>
   <adfmf:navigationBar enabled="true"
                        displayHideShowNavigationBarControl="true"/>
   <!-- default interpretation of width is pixels -->
   <adfmf:springboard enabled="true"
                      animation="slideright"
                      width="213"
                      showSpringbaordAtStartup="true"/>
</adfmf:navigation>

次の行ではアニメーションを無効にしています。

<adfmf:springboard enabled="true" animation="none"/>

次の行では、Springboardが表示領域の左から100ピクセル分を占有するように設定し、アクティブなアプリケーション機能が表示領域の残りの部分を占有できるようにしています。

<adfmf:springboard enabled="true" animation="slideright" width="100px"/>

アニメーション以外に、例4-4は次の処理を示しています。

  • showSpringboardAtStartup属性の使用。アプリケーションの起動時にSpringboardを表示するかどうかを定義します。(デフォルトでは、Springboardは表示されます。)

  • navigationBarのdisplayHideShowNavigationBarControl属性の使用。

Springboardが表示されないようにするには、enabled属性をfalseに設定します。

4.5 HTMLコンテンツによるカスタムSpringboardアプリケーション機能に関する必知事項

MAFによって提供されるデフォルトのHTML Springboardページでは、次のテクノロジが使用されています。これらは、カスタマイズしたログイン・ページに含めることもできます。

  • CSS: 色およびレイアウトを定義します。

  • JavaScript: Springboardページ内に埋め込まれた<script>タグには、第B章「ローカルHTMLおよびアプリケーション・コンテナAPI」で説明するメソッド(Apache Cordova APIをコールする)への参照が格納されています。また、HTMLページはJavaScriptを使用して、コールバックに応答したり、ページ・スワイプを検出します。スワイプ・イベントが検出されたら、JavaScriptでは、スタイル・シートの動的変更によってページ・モーションをアニメートできるようになります。

    HTML(または任意のカスタムHTMLページ)を使用して作成されたSpringboardでは、base.jsライブラリを参照する<script>タグを含めることによって、Apache Cordova APIを活用できます。このライブラリ(または他のJavaScriptライブラリ)の場所を特定するには、まずMAFアプリケーションをデプロイした後、deployディレクトリに格納されたプラットフォーム固有のアーティファクト内にあるwww/jsディレクトリを探します。Androidアプリケーションの場合、www/jsディレクトリは、Androidアプリケーション・パッケージ(.apk)ファイル内にあります。その場所を次に示します。

    application workspace directory/deploy/deployment profile name/deployment profile name.apk/assets/www/js

    iOSの場合、このライブラリは次の場所にあります。

    application workspace directory/deploy/deployment profile name/temporary_xcode_project/www/js

    詳細は、第B.1項「MAF APIを使用したカスタムHTML Springboardアプリケーション機能の作成」を参照してください。

  • WebKit: レイアウト間および異なるSpringboardページ間での遷移時に、アイコンのなめらかなアニメーションが提供されます。WebKitレンダリング・エンジンの詳細は、http://www.webkit.org/を参照してください。

HTMLで記述されるSpringboardは、maf-feature.xmlファイルで宣言され、maf-application.xmlファイルで参照されるアプリケーション機能です。

4.6 MAF AMXコンテンツによるカスタムSpringboardアプリケーション機能に関する必知事項

HTMLの場合と同様に、MAF AMXを使用して記述されたSpringboardは、MAFアプリケーションによって参照されるアプリケーション機能です。通常、Springboardはタスク・フローではなく単一のMAF AMXページとして記述されるため、埋込みアプリケーション機能の起動には、gotoFeatureメソッドが使用されます(例4-5のメソッド式を参照)。


注意:

カスタムSpringboardページ(HTMLまたはMAF AMXによって作成されたもの)は、ビュー・コントローラ・プロジェクト内に配置する必要があります。ビュー・コントローラ・プロジェクト内にはmaf-feature.xmlファイルも格納されています。

デフォルトのSpringboard (jdev_install\jdeveloper\jdev\extensions\oracle.maf\libにあるadfmf.default.springboard.jar)は、MAF AMXページであり、機能アーカイブ(FAR) JARファイルにバンドルされ、MAFアプリケーションに含まれる別のFARとともにデプロイされます。JARファイルには、DataBindings.cpxファイルやPageDef.xmlファイルなど、Springboardに関連付けられたすべてのアーティファクトが含まれます。このファイルは、maf-application.xmlファイルのSpringboardオプションで「デフォルト」が選択された後のみ使用できます。このオプションを選択すると、このFARもアプリケーション・クラスパスに追加されます。詳細は、第27.5項「機能アーカイブ・ファイル(FAR)のデプロイ」を参照してください。

デフォルトのSpringboard (例4-5に示すspringboard.amx)は、MAF AMXアプリケーション機能として実装されます。

例4-5 デフォルトのSpringboardページ、springboard.amx

<?xml version="1.0" encoding="UTF-8" ?>
<amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:amx="http://xmlns.oracle.com/adf/mf/amx"
          xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt">
   <amx:panelPage id="pp1">
      <amx:facet name="header">
         <amx:outputText value="#{bindings.name.inputValue}" id="ot3"/>
      </amx:facet>
      <amx:listView var="row"  
                    value="#{bindings.features.collectionModel}"
                    fetchSize="#{bindings.features.rangeSize}"
                    id="lv1"
                    styleClass="amx-springboard">
         <amx:listItem showLinkIcon="false"  
                       id="li1"
                       actionListener="#{bindings.gotoFeature.execute}">
            <amx:tableLayout id="tl1"
                             width="100%">
               <amx:rowLayout id="rl1">
                  <amx:cellFormat id="cf11"  
                                  width="46px"
                                  halign="center">
                      <amx:image source="#{row.image}"  
                                 id="i1"
                                 inlineStyle="width:36px;height:36px"/>
                  </amx:cellFormat>
                  <amx:cellFormat id="cf12"  
                                  width="100%"
                                  height="43px">
                     <amx:outputText value="#{row.name}" 
                                     id="ot2"/>
                  </amx:cellFormat>
               </amx:rowLayout>
            </amx:tableLayout>
               <amx:setPropertyListener from="#{row.id}" 
                                        to="#{pageFlowScope.FeatureId}"/>
         </amx:listItem>
      </amx:listView>
   </amx:panelPage>
</amx:view>

図4-6に示すように、MAF AMXファイルでは、リスト・アイテムがMAFアプリケーションの埋込みアプリケーション機能であるリスト・ビューを使用してSpringboardを定義します。これらのアプリケーション機能は、デプロイ後は、名前と関連アイコンによって表示されます。AdfmfContainerUtilities APIのgotoFeatureメソッドでは、ページのナビゲーション機能が提供されます。このメソッドを使用した特定のアプリケーション機能の表示の詳細は、第B.2.5項「gotoFeature」を参照してください。また、第13.3.15項「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」も参照してください。

図4-6 デフォルトのSpringboard

この図は周囲のテキストで説明しています

MAFでは、ApplicationFeaturesデータ・コントロール内にカスタムSpringboardを作成(またはデフォルトのSpringboardを拡張)するための基本ツールが提供されています。このデータ・コントロール(図4-7を参照)により、MAFアプリケーションとそのアプリケーション機能の両方を記述する属性のデータ・コレクションを使用して、Springboardページを宣言的に構築できます。カスタムSpringboardページの例は、APIDemoサンプル・アプリケーションを参照してください。このアプリケーション(およびMAFに付属の他のサンプル)の詳細は、付録G「サンプルのMAFアプリケーション」を参照してください。

図4-7 ApplicationFeaturesデータ・コントロール

この図は周囲のテキストで説明しています

ApplicationFeaturesデータ・コントロールでは、次のパッケージのAdfmfContainerUtilitiesクラスによって提供される、MAFアプリケーションにナビゲーションを実装するメソッドを公開します。

oracle.adfmf.framework.api

表4-1に、ApplicationFeaturesデータ・コントロールからドラッグしてMAF AMXページ上にドロップ可能な、MAFアプリケーションのナビゲーションに対応したメソッドをいくつか示します。

データ・コントロールの使用方法の詳細は、第14章「MAF AMXでのバインディングの使用とデータ・コントロールの作成」を参照してください。AdfmfContainerUtilitiesクラスの詳細は、Oracle Fusion Middleware Oracle Mobile Application Framework Java APIリファレンスを参照してください。

表4-1 アプリケーション機能メソッド

メソッド 説明

gotoDefaultFeature

デフォルトのアプリケーション機能に移動します。

gotoFeature

このメソッドに渡されたパラメータによって指定される特定のアプリケーションに移動します。

gotoPreferences

プリファレンス・ページに移動します。

gotoSpringboard

Springboardに移動します。

hideNavigationbar

ナビゲーション・バーを非表示にします。

showNavigationbar

ナビゲーション・バーを表示します(非表示になっている場合)。

resetFeature

このメソッドに渡されたパラメータによって指定されるアプリケーション機能をリセットします。

hideSpringboard

Springboardを非表示にします。

showSpringboard

Springboardを表示します。

4.7 Springboardの実行時の動作に関する必知事項

「アプリケーションの起動時にSpringboardを表示」オプションを選択して、スライドアウト幅を画面の最大サイズに定義すると、MAFでは、起動時にバックグラウンドでデフォルトのアプリケーション機能がロードされます。MAFアプリケーションが休止している場合、MAFはSpringboardを非表示にします。

4.8 MAFアプリケーションでのスライディング・ウィンドウの作成

アプリケーション機能をスライディング・ウィンドウとしてレンダリングできます。これにより、ナビゲーション・バーまたはSpringboard内に表示される他のアプリケーション機能と同時にアプリケーション機能が表示されます。スライディング・ウィンドウは、アプリケーション内に常に存在しているコンテンツ(グローバル・ツール・バーなど)を表示するために使用したり、一時的な(ポップアップ)コンテンツ(ヘルプ・ウィンドウなど)を表示するために使用できます。

図4-8は、SlidingWindowサンプル・アプリケーションのSlidingDrawerアプリケーション機能を示しています(第G項「サンプルのMAFアプリケーション」を参照)。このアプリケーション機能は、他のアプリケーション機能に重なりながら、アプリケーション画面の右側に表示されます。

図4-8 他のアプリケーション機能に重なるスライディング・ウィンドウ

このイメージについては周囲のテキストで説明しています。

アプリケーション機能をスライディング・ウィンドウとしてレンダリングする場合、Show on Navigation BarプロパティおよびShow on Springboardプロパティをfalseに設定する必要があります。

スライディング・ウィンドウを作成するには、oracle.adfmf.framework.api.AdfmfSlidingWindowOptionsクラスとAdfmfSlidingWindowUtilitiesクラスの組合せを、アプリケーション内のマネージドBeanまたはライフサイクル・リスナーから起動します。

例4-6は、SlidingWindowサンプル・アプリケーションで、LifeCycleListenerImpl.javaのactivateメソッドから、図4-8に示すスライディング・ウィンドウを作成する方法を示しています。スライディング・ウィンドウの作成後、SlidingWindowサンプル・アプリケーションではSlidingDrawerBean.javaを使用してスライディング・ウィンドウの表示を管理します。

図4-6 スライディング・ウィンドウの作成

...
public void activate()  {
    // The argument you pass to the create method is the refId of the
    // feature in the maf-application.xml. For example,
    // <adfmf:featureReference id="fr4" refId="SlidingDrawer" showOnNavigationBar="false" 
    // showOnSpringboard="false"/>
      String slidingWindowDrawer = AdfmfSlidingWindowUtilities.create("SlidingDrawer");  
 
    // Note also that both showOn... values must be set to false in the config 
    // file for the sliding window to appear
      
      SlidingDrawerBean.slidingDrawerWindow=slidingWindowDrawer;
      AdfmfSlidingWindowOptions options = new AdfmfSlidingWindowOptions();
      options.setDirection(AdfmfSlidingWindowOptions.DIRECTION_RIGHT);
      options.setStyle(AdfmfSlidingWindowOptions.STYLE_OVERLAID);
      options.setSize("0");
     
  }

ここで説明しているSlidingWindowサンプル・アプリケーション全体にアクセスする方法は、第G項「サンプルのMAFアプリケーション」を参照してください。

AdfmfSlidingWindowUtilitiesおよびAdfmfSlidingWindowOptionsの詳細は、Oracle Fusion Middleware Oracle Mobile Application Framework用のJava APIリファレンスを参照してください。ライフサイクル・リスナーの使用方法の詳細は、第11章「MAFアプリケーションでのライフサイクル・リスナーの使用方法」を参照してください。

  前
前 		 次
次
  目次へ移動
目次