| Oracle Enterprise Pack for Eclipse Oracle Mobile Application Framework (OEPE Edition)でのモバイル・アプリケーションの開発 リリース2.1.2 E64870-01 |
|
 前 |
 次 |
| Oracle Enterprise Pack for Eclipse Oracle Mobile Application Framework (OEPE Edition)でのモバイル・アプリケーションの開発 リリース2.1.2 E64870-01 |
|
前 |
次 |
この章では、MAFアプリケーションのSpringboardとナビゲーション・バーを使用して、アプリケーションのナビゲーションを構成する方法について説明します。
この章の内容は次のとおりです。
Springboardとナビゲーション・バーの表示動作を次のように制御するよう、モバイル・アプリケーションを構成できます。
Springboardとナビゲーション・バーを表示または非表示にすることで、モバイル・デバイスの画面を最適に使用できるようになります。これらのオプションは、ナビゲーション・バーのデフォルトの表示動作をオーバーライドします。ナビゲーション・バーは、アプリケーション機能によって別の状態に指定されていないかぎり、デフォルトで表示されます。
Springboardを右からスライドできるようにします。デフォルトでは、Springboardは表示全体を占有せず、そのかわりに左からスライドして、アクティブ・コンテンツ(ナビゲーション・バーの「ホーム」ボタンとアプリケーション機能を含む)を右へプッシュします。
「アプリケーション」ページの「ナビゲーション」のオプション(図5-1を参照)を使用して、ナビゲーション・バーを表示または非表示にしたり、アプリケーションによって使用されるSpringboardのタイプを選択したり、ユーザーがアプリケーションをめくるように見ていくときのSpringboardの反応方法を定義できます。
始める前に:
プロジェクト・エクスプローラのアセンブリ・プロジェクト→「MAF」から「MAFアプリケーション・エディタ」を選択して、maf-application.xmlファイルを開く必要があります。
ナビゲーション・バーの表示動作を設定するには:
「ナビゲーション・バーを表示」を選択して、モバイル・アプリケーションがデフォルトで、Springboardではなくナビゲーション・バーを表示するようにします(図5-2を参照)。
「ナビゲーション・バーを表示」をオフにすると、アプリケーションの起動時にナビゲーション・バーが表示されなくなり、ユーザーにはSpringboardがナビゲーションの唯一の方法として提示されます。ナビゲーション・バーはSpringboardと同じ目的を果たすものなので、これを非表示にすることで冗長な機能を削除できる場合もあります。
選択したアプリケーション機能のコンテンツが表示されているときにナビゲーション・バーを非表示にするには、「切替えボタンの表示」を選択します。図5-3はこのオプションを示したもので、図5-2に示されているナビゲーション・バーを、アプリケーション機能のコンテンツによって非表示にする方法が示されています。
このオプションはデフォルトで選択されており、アプリケーション機能によって表示/非表示状態が指定されていなければ、ナビゲーション・バーはデフォルトで表示されます。
Springboardの表示動作を設定するには:
Springboardを表示するには、「Springboardの表示」を選択します。デフォルトでは、これが選択されます。
「アプリケーションの起動時に表示」を選択して、モバイル・アプリケーションの起動後にエンド・ユーザーに対してSpringboardを表示できるようにします。
「Springboardトグル・ボタンの表示」を選択して、Springboardのボタンを表示できるようにします(図5-4を参照)。このボタンはアプリケーション機能内に表示されます。図5-2では、アプリケーション機能のコンテキスト内にこのボタンが表示されています。
Springboardのスライドアウト動作を設定するには:
「アニメーション」で「右にスライド」を選択します。Springboardは、「幅」オプションで入力したピクセル数値(またはパーセント)によって指定された領域を占有します。「<なし>」を選択した場合、Springboardは右からスライドできません(つまり、MAFではこのアクションを有効にするためのアニメーションが提供されません)。Springboardが表示領域全体を占有します。
幅を設定します(ピクセル単位)。iOSデバイスのSpringboardのデフォルト幅は320ピクセルです。Androidデバイスでは、デフォルトでSpringboardは画面全体を占有するので、使用可能な幅がすべて占有されます。
|
注意: Springboardが表示領域全体を占有しない場合は、アクティブなアプリケーション機能が残りの表示領域を占有します。詳細は、第5.4項「Springboardにアニメーションを設定する場合の処理」を参照してください。 |
Springboardおよびナビゲーション・バーのオプションを設定すると、maf-application.xmlファイルの<adfmf:navigation>要素に対して要素の更新や追加が行われます。たとえば、「なし」を選択すると、次に示すとおり<springboard enabled="false">によってコードが更新されます。
<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>
|
次の例は、「デフォルト」を選択したときに、enabled属性がtrueに設定される様子を示しています。
|
注意: Springboardはデバイスの画面全体を占有するので、ナビゲーション・バーとSpringboardは同時には表示されません。 |
adfmf:application>
...
<adfmf:navigation>
<adfmf:navigationBar enabled="true"/>
<adfmf:springboard enabled="true"/>
</adfmf:navigation>
</adfmf:application>
次の例は、maf-application.xmlファイルのナビゲーション・ブロックを示しており、ここでは、Springboardはスライドアウトし、指定された表示領域(213ピクセル)を占有するように設定されています。
<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"/>
アニメーション以外に、前述の例は次の処理を示しています。
showSpringboardAtStartup属性の使用。アプリケーションの起動時にSpringboardを表示するかどうかを定義します。(デフォルトでは、Springboardは表示されます。)
navigationBarのdisplayHideShowNavigationBarControl属性の使用。
Springboardが表示されないようにするには、enabled属性をfalseに設定します。
MAFによって提供されるデフォルトのHTML Springboardページでは、次のテクノロジが使用されています。これらは、カスタマイズしたログイン・ページに含めることもできます。
Cascading Style Sheets (CSS): 色とレイアウトを定義します。
JavaScript: Springboardページ内に埋め込まれた<script>タグには、第16073296章「ローカル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ファイルで参照されるアプリケーション機能です。
HTMLの場合と同様、MAF AMXを使用して記述されたSpringboardは、アプリケーション機能としてモバイル・アプリケーションによって参照されます(第4.2.1項「モバイル・アプリケーションのコンテンツの指定方法」を参照)。通常、Springboardはタスク・フローではなく単一のMAF AMXページとして記述されるため、埋込みアプリケーション機能の起動には、gotoFeatureメソッドが使用されます(次の例のメソッド式を参照)。
|
注意: カスタムSpringboardページ(HTMLまたはMAF AMXによって作成されたもの)は、ビュー・コントローラ・プロジェクト内に配置する必要があります。ビュー・コントローラ・プロジェクト内にはmaf-feature.xmlファイルも格納されています。詳細は、第4.2.1項「モバイル・アプリケーションのコンテンツの指定方法」を参照してください。 |
デフォルトSpringboard (adfmf.default.springboard.jar)は、機能アーカイブ(FAR) JARファイルにバンドルされ、モバイル・アプリケーションに含められた他のFARとともにデプロイされるMAF AMXページです。JARファイルには、DataBindings.cpxファイルやPageDef.xmlファイルなど、Springboardに関連付けられたすべてのアーティファクトが含まれます。このファイルは、maf-application.xmlファイルのSpringboardオプションで「デフォルト」が選択された後のみ使用できます。このオプションを選択すると、このFARもアプリケーション・クラスパスに追加されます。詳細は、第27.3項「機能アーカイブ・ファイル(FAR)のデプロイ」を参照してください。
デフォルトのSpringboard (次に示すspringboard.amx)は、MAF 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>
図5-5に示すように、MAF AMXファイルでは、リスト・アイテムがモバイル・アプリケーションの埋込みアプリケーション機能であるリスト・ビューを使用してSpringboardを定義します。これらのアプリケーション機能は、デプロイ後は、名前と関連アイコンによって表示されます。AdfmfContainerUtilities APIのgotoFeatureメソッドでは、ページのナビゲーション機能が提供されます。このメソッドを使用した特定のアプリケーション機能の表示の詳細は、第B.2.6項「gotoFeature」を参照してください。また、第13.3.15項「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」も参照してください。
MAFでは、ApplicationFeaturesデータ・コントロール内にカスタムSpringboardを作成(またはデフォルトのSpringboardを拡張)するための基本ツールが提供されています。このデータ・コントロール(図5-6を参照)により、モバイル・アプリケーションとそのアプリケーション機能の両方を記述する属性のデータ・コレクションを使用して、Springboardページを宣言的に構築できます。カスタムSpringboardページの例は、APIDemoサンプル・アプリケーションを参照してください。このアプリケーション(およびMAFに付属の他のサンプル)の詳細は、付録G「サンプルのMAFアプリケーション」を参照してください。
ApplicationFeaturesデータ・コントロールのメソッドにより、ナビゲーション機能を追加できます。これらのadfmf.containerUtilitiesメソッドについて、表5-1に説明します。詳細は、第B.2項「MAFコンテナ・ユーティリティAPI」を参照してください。また、第14章「MAF AMXでのバインディングの使用とデータ・コントロールの作成」も参照してください。
表5-1 ApplicationFeatureメソッド
| メソッド | 説明 |
|---|---|
|
|
デフォルトのアプリケーション機能に移動します。 |
|
|
このメソッドに渡されたパラメータによって指定される特定のアプリケーションに移動します。 |
|
|
Springboardに移動します。 |
|
|
ナビゲーション・バーを非表示にします。 |
|
|
ナビゲーション・バーを表示します(非表示になっている場合)。 |
|
|
このメソッドに渡されたパラメータによって指定されるアプリケーション機能をリセットします。 |
アプリケーションの起動時に表示オプションを選択し、スライドアウト幅を画面のフル・サイズに指定している場合は、起動時にMAFによってバックグラウンドにデフォルトのアプリケーション機能がロードされます。モバイル・アプリケーションの休止時には、MAFではSpringboardを非表示にします。
アプリケーション機能をスライディング・ウィンドウとしてレンダリングできます。これにより、ナビゲーション・バーまたはSpringboard内に表示される他のアプリケーション機能と同時にアプリケーション機能が表示されます。スライディング・ウィンドウは、アプリケーション内に常に存在しているコンテンツ(グローバル・ツール・バーなど)を表示するために使用したり、一時的な(ポップアップ)コンテンツ(ヘルプ・ウィンドウなど)を表示するために使用できます。
図5-7は、SlidingWindowサンプル・アプリケーションのSlidingDrawerアプリケーション機能を示しています(付録G「サンプルのMAFアプリケーション」を参照)。このアプリケーション機能は、他のアプリケーション機能に重なりながら、アプリケーション画面の右側に表示されます。
アプリケーション機能をスライディング・ウィンドウとしてレンダリングする場合、Show on Navigation BarプロパティおよびShow on Springboardプロパティをfalseに設定する必要があります。
スライディング・ウィンドウを作成するには、oracle.adfmf.framework.api.AdfmfSlidingWindowOptionsクラスとAdfmfSlidingWindowUtilitiesクラスの組合せを、アプリケーション内のマネージドBeanまたはライフサイクル・リスナーから起動します。
次の例は、SlidingWindowサンプル・アプリケーションで、LifeCycleListenerImpl.javaのactivateメソッドから、図5-7に示すスライディング・ウィンドウを作成する方法を示しています。スライディング・ウィンドウの作成後、SlidingWindowサンプル・アプリケーションではSlidingDrawerBean.javaを使用してスライディング・ウィンドウの表示を管理します。
...
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 Mobile Application Framework Java APIリファレンスを参照してください。ライフサイクル・リスナーの使用方法の詳細は、第11章「MAFアプリケーションでのライフサイクル・リスナーの使用方法」を参照してください。
