| Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル開発者ガイド 11g リリース2 (11.1.2.3.0) B70750-01 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル開発者ガイド 11g リリース2 (11.1.2.3.0) B70750-01 |
|
前 |
次 |
この章では、ADFモバイルAMXアプリケーション機能の作成方法について説明します。
この章では、次の項目について説明します。
ADFモバイルAMXは、サポートされるすべてのプラットフォームで動作が同一となるアプリケーション機能を作成できる一連のUIコンポーネントを提供するADFモバイル内のサブフレームワークです。ADFモバイルAMXでは、コンポーネントをコンポーネント・パレットまたはデータ・コントロール・パレットからエディタにドラッグできるようにすることで、ADF Facesと同じ開発操作性が維持されていますが、それらのコンポーネントはADF Facesのものと同等ではなく、ADFモバイルAMXコンポーネントでは、ADF Facesコンポーネントの各プロパティおよび動作がサポートされていません。
|
注意: モバイル・デバイスのインタフェースを開発する際には、画面領域が非常に限られているということを常に意識する必要があります。また、一部のモバイル・デバイスではタッチスクリーンが使用できません。 |
詳細は、次の項を参照してください。
タスク・フローにより、ADFモバイルAMXページ間のナビゲーションを定義できます。JDeveloperのアプリケーション・ワークスペース(第4.2項「アプリケーション・ワークスペースの作成」を参照)を使用して、タスク・フローを設計することにより、ADFモバイルAMXアプリケーション機能のユーザー・インタフェースの作成を開始できます。標準JSFアプリケーションの場合と同様に、ADFモバイルAMXでは、タスク・フローの定義にナビゲーション・ケースとルールが使用されます。これらの定義は、ViewController-task-flow.xmlというデフォルト名のファイルに格納されています(第7.2.3項「ViewController-task-flow.xmlファイルについて」を参照)。
NavigationというADFモバイルのサンプル・アプリケーション(開発コンピュータのjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/SamplesディレクトリにあるPublicSamples.zipファイルにあります)には、循環ナビゲーション、ルーターなど様々なナビゲーション技術の使用方法が示されています。
ADFモバイルでは、バインド・タスク・フローとバインドなしタスク・フローの両方を持つADFモバイルAMXアプリケーション機能を作成できます。『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のタスク・フローのタイプに関する項で説明しているとおり、バインド・タスク・フローはタスク・フロー定義とも呼ばれ、アプリケーションの再利用可能な部分を表します。ADFモバイルでは、バインド・タスク・フローにはエントリ・ポイントが1つありますが、終了ポイントはありません。バインド・タスク・フローには、アクティビティと制御フロー・ルールの独自のコレクションに加え、独自のメモリー・スコープとマネージドBean存続期間が含まれます。
独自の機能のバインド・タスク・フローを作成するには、ADFモバイルAMXタスク・フロー・デザイナを使用します。ADFモバイルAMXタスク・フローを設計する際、JDeveloperでは、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のタスク・フローの作成に関する項で説明している、ADFタスク・フローの設計と同じ操作性が維持されます。タスク・フローの概要エディタと同様、このツールにはダイアグラマ(第7.2.4項「ADFモバイル・タスク・フロー・ダイアグラマについて」を参照)が含まれており、ここで、コンポーネント・エディタからアクティビティと制御フローをドラッグ・アンド・ドロップすることにより、タスク・フローを構築します。その後、プロパティ・インスペクタを使用して、これらのアクティビティとそれらの間の遷移を定義します。
タスク・フローがすでに作成されている場合を除き、ADFモバイルは、新しいADFモバイルAMXページが作成されると、自動的にデフォルトのバインドなしタスク・フロー(adfc-mobile-config.xmlファイル)を生成します。バインドなしタスク・フローの例は、開発コンピュータのjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルにあるNavigationというサンプル・アプリケーションのadfc-mobile-config.xmlファイルを参照してください。
詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のADFタスク・フローの作成に関する項を参照してください。
ナビゲーション・ダイアグラマを使用して、ADFモバイルAMXアプリケーション機能のタスク・フローを宣言的に作成します。ダイアグラマを使用すると、独自の機能でナビゲーションが機能するために必要なXMLメタデータが、JDeveloperによってViewController-task-flow.xmlファイル(デフォルト)に作成されます。
始める前に:
タスク・フローを設計するには、ADFモバイル・アプリケーションにビュー・コントローラ・プロジェクト・ファイル(第4章「ADFモバイル・アプリケーション開発の開始」を参照)が含まれている必要があります。
ADFモバイルでタスク・フローを作成するには、次の2つの方法があります。
バインド・タスク・フローはadmf-feature.xmlファイルから作成できます。詳細は、第5.9.1項「アプリケーション・コンテンツの定義方法」を参照してください。
JDeveloperの「新規ギャラリ」を使用できます。詳細は、「「新規ギャラリ」からタスク・フローを作成するには:」を参照してください。
「新規ギャラリ」からタスク・フローを作成するには:
JDeveloperのトップレベル・メニューから「ファイル」をクリックし、「新規」→「ギャラリから」を選択します。
「新規ギャラリ」で「クライアント層」ノードを開き、「ADFモバイル」→「ADFモバイル・タスク・フロー」を選択します。(図7-1を参照)。「OK」をクリックします。
「ADFモバイル・タスク・フローの作成」ダイアログ(図7-2を参照)で、新しいタスク・フローのファイル名と場所を指定して「OK」をクリックし、図7-3に示すナビゲーション・ダイアグラマで<Name>-flow.xmlファイルを開きます。
|
注意: タスク・フローは、ADFモバイル・アプリケーションのビュー・コントローラ・プロジェクト内で作成する必要があります。 |
|
注意: JDeveloperでは、同じパターンですでに存在するタスク・フローの数に従い、タスク・フローの数が増分されます。 |
「コンポーネント・パレット」で「ADFモバイル・タスク・フロー」( 図7-3を参照)を選択し、使用するコンポーネントを選択して、これをダイアグラムにドラッグします。
|
ヒント: 「コンポーネント・パレット」が表示されない場合は、メイン・メニューから「ビュー」→「コンポーネント・パレット」を選択します。デフォルトでは、コンポーネント・パレットはJDeveloperの右上部に表示されます。 |
JDeveloperでは、バインド・タスク・フローが作成され、新たに追加されたコンポーネントを使用してダイアグラムが再描画されます。
「概要」タブを開き、概要エディタを使用してナビゲーション・ルールとナビゲーション・ケースの作成することもできます。概要エディタを使用したナビゲーション作成の詳細は、[F1]キーで参照できます。
また、「ソース」エディタでページを直接編集して、タスク・フロー・ファイルに手動で要素を追加することもできます。「ソース」エディタでファイルを開くには、「ソース」タブをクリックします。
ADFモバイルAMX機能のナビゲーションが定義されると、ページを作成し、ナビゲーションを実行するコンポーネントを追加できます。ページでのナビゲーション・コンポーネントの使用方法の詳細は、7.2.8「制御フロー・ケースを使用してページ・ナビゲーションを有効にする方法」を参照してください。
ADFモバイルAMXアプリケーション機能のタスク・フローを定義すると、ビュー・ファイルをダブルクリックしてADFモバイルAMXビューにアクセスできます。詳細は、第7.3項「ビューの作成」を参照してください。
ADFモバイル・タスク・フロー・デザイナでは、表7-1に示すADFアクティビティと制御フローのサブセットをサポートしています。
表7-1 サポートされるアクティビティ
| アクティビティ | 説明 |
|---|---|
|
メソッド・コール |
メソッド(通常はマネージドBean上のメソッド)を起動します。メソッド・コール・アクティビティは、ADFモバイルAMXアプリケーション機能の制御フローの任意の位置に配置し、制御フロー・ルールに基づいてロジックを起動できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のメソッド・コール・アクティビティの使用に関する項を参照してください。 タスク・フローに含まれるメソッド・コールに渡すパラメータを指定することもできます。これらには、ADFモバイルAMXタスク・フロー内メソッド・コール・アクションの標準ADFパラメータが含まれます。デザイナを使用してメソッドを生成する場合、デザイナにより必要な引数およびタイプが追加されます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の次の項を参照してください。
実行時にタスク・フローのメソッド・コールのパラメータを定義し、メソッド・コール自体にパラメータを渡してこれを使用できます。メソッド・コール・パラメータを渡す方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の次の項を参照してください。
|
|
ルーター |
式言語(EL)式を評価し、その式の値に基づいて結果を戻します。その後、このような結果を使用して、タスク・フローの他のアクティビティに制御をルーティングします。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のルーター・アクティビティの使用方法に関する項を参照してください。 |
|
ビュー |
ADFモバイルAMXページを表示します。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のビュー・アクティビティの使用方法に関する項を参照してください。 |
|
タスク・フロー・コール |
バインドなしタスク・フローまたはバインド・タスク・フローからバインド・タスク・フローをコールします。タスク・フロー・コール・アクティビティでは、同じADFモバイルAMXアプリケーション機能内にあるバインド・タスク・フローをコールできますが、別のADFモバイルAMXアプリケーション機能またはOracle ADFライブラリが追加された機能アーカイブ・ファイル(FAR)(第5.12項「機能アーカイブ・ファイルの使用」を参照)からバインド・タスク・フローをコールすることもできます。 タスク・フロー・コール・アクティビティは、タスク・フロー入力パラメータおよび戻り値をサポートします。 詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のタスク・フロー・コール・アクティビティの使用方法に関する項を参照してください。 |
ViewController-task-flow.xmlファイルは、ADFモバイルAMXにおける、ADFのtask-flow-definition.xmlと同等のファイルで、ADFモバイルAMXタスク・フロー・コンポーネントを「コンポーネント・パレット」からダイアグラマにドラッグ・アンド・ドロップすることにより、ビュー(ADFモバイルAMXページ)間の相互作用を設計できます。
図7-4に、Products-flow.xmlというタスク・フロー・ファイル例を示します。このファイルでは、制御フローはproductsページからproductdetailsページに方向付けられます。productdetailsページからproductsページに戻るには、組込みの__backナビゲーションが使用されます。
ADFモバイル・タスク・フロー作成ユーティリティを使用してタスク・フローを作成すると、図7-4に示すように、タスク・フロー・ダイアグラムおよび「コンポーネント・パレット」が自動的に表示されます。タスク・フロー・ダイアグラムは、そこに「コンポーネント・パレット」または「アプリケーション・ナビゲータ」からのアクティビティおよびタスク・フローをドラッグ・アンド・ドロップできるビジュアル・エディタです。詳細は、第7.2.5項「ADFモバイル・アクティビティの追加方法」を参照してください。
ADFアプリケーション開発などでは、タスク・フロー・ダイアグラマを使用して、アクティビティ、ビューおよび制御フローをドラッグ・アンド・ドロップします。
始める前に:
図7-5に示すように、「コンポーネント・パレット」から「ADFモバイル・タスク・フロー」を選択する必要があります。
ADFモバイル・タスク・フローにアクティビティを追加するには:
「アプリケーション・ナビゲータ」で、タスク・フロー・ソース・ファイル(ViewController-task-flow.xmlなど)をダブルクリックし、図7-5に示すようなタスク・フロー・ダイアグラムと「コンポーネント・パレット」を表示します。ダイアグラマにはタスク・フロー・エディタが表示されます。「コンポーネント・パレット」には、ADFモバイル・タスク・フローで使用できるコンポーネントが自動的に表示されます。
アクティビティを「コンポーネント・パレット」からダイアグラムにドラッグします。ダイアグラムにビュー・アクティビティをドラッグすると、「ADFモバイルAMXファイルの作成」ウィザードを起動できます(第7.2.6項「ビュー・アクティビティの追加方法」を参照)。
|
注意: 各タスク・フローに関連付けられているデフォルトのアクティビティがあります。 |
ビュー・アクティビティは、メタデータで実際のADFモバイルAMXページに関連付けられています。「コンポーネント・パレット」からドラッグ・アンド・ドロップすることによって、これを追加します。ビュー・アクティビティは、ADFモバイルAMXページを表示します。実際のADFモバイルAMXページは、「ダイアグラム」ウィンドウでビュー・アクティビティをダブルクリックして作成できます。ビュー・アクティビティは、「アプリケーション・ナビゲータ」のADFモバイルAMXファイルを概要エディタの「ダイアグラム」タブにドラッグ・アンド・ドロップして作成することもできます。
ADFモバイル・タスク・フローではワイルドカード制御フロー・ルールをサポートします。これは、後方ワイルドカード(foo*)や単一ワイルドカード文字のある制御フローfrom-activity-idを表します。ワイルドカード制御フロー・ルールは、「コンポーネント・パレット」からドラッグ・アンド・ドロップして追加できます。ワイルドカード制御フロー・ルールを構成するには、「プロパティ・インスペクタ」を使用します。
制御がアクティビティから次のアクティビティに渡される方法を指定する制御フロー・ケース・コンポーネントを使用してナビゲーションを作成できます。制御フローを作成するには、「コンポーネント・パレット」から「制御フロー・ケース」を選択します。次に、制御フロー・ケースをソース・アクティビティに接続し、さらにターゲット・アクティビティに接続します。ソースおよびターゲット・アクティビティを接続すると、JDeveloperでは、次のものが作成されます。
control-flow-rule: from-activity-idを使用してソース・アクティビティを識別します。
control-flow-case: to-activity-idを使用してターゲット・アクティビティを識別します。
ADFモバイル・タスク・フロー・ダイアグラムで制御フロー・ケースを直接定義するには:
「アプリケーション・ナビゲータ」で、タスク・フロー・ソース・ファイルをダブルクリックして、タスク・フロー・ダイアグラムを表示します。
「コンポーネント・パレット」から「制御フロー・ケース」を選択します。
ダイアグラムで、ソース・アクティビティをクリックし、次にターゲット・アクティビティをクリックします。ダイアグラムに制御フロー・ケースが追加されます。アクティビティ間に追加された各線は、制御フロー・ケースを表します。from-outcomeには、UIコンポーネントのaction属性に指定された値と照合される値が含まれています。
from-outcomeを変更するには、ダイアグラムの制御フローの隣のテキストを選択します。デフォルトでは、これはワイルドカード文字です。
from-activity-id(ソース・アクティビティの識別子)やto-activity-id(ターゲット・アクティビティの識別子)を変更するには、ダイアグラムの矢印のどちらかの端を新規のアクティビティにドラッグします。
詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のコントロール・フロー・ルールの作成時の処理に関する項を参照してください。
「プロパティ・インスペクタ」を使用して、次に示すUIコンポーネントのいずれかのaction属性を該当する制御フロー・ケースfrom-outcomeに設定して次のタスク・フロー・アクティビティに導くことにより、アクション結果を指定できます。
コマンド・ボタン(第8.3.5項「ボタンの使用方法」を参照)
コマンド・リンク(第8.3.6項「リンクの使用方法」を参照)
リスト・アイテム
UIコンポーネントの「アクション」フィールド(図7-6を参照)を使用して、特定のADFモバイルAMXページの1つ以上のタスク・フローで定義される可能性のあるアクション結果のリストから選択を行います。
戻るアクション(__back)は、各リストに自動的に追加され、前に参照したページへのナビゲーションを可能にします。
|
注意: ADFモバイルAMXページは、バインド・タスク・フローとバインドなしタスク・フローの両方で参照でき、その場合、両方のタスク・フローからのアクション結果がアクション選択リストに含まれます。 |
独自のADFモバイル・アプリケーションでマネージドBeanを作成および使用して、追加データを格納したり、カスタム・コードを実行できます。JDeveloperの通常の編集メカニズムを使用して、マネージドBeanを参照したり、適用可能なフィールドに対してマネージドBeanへの参照を作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のFusion WebアプリケーションでのマネージドBeanの使用に関する項を参照してください。
図7-7 は、「プロパティ・インスペクタ」のactionプロパティの「編集」オプションを示しています。このオプションをクリックすると、図7-8に示す「プロパティの編集」ダイアログが表示されます。
表7-5に、「プロパティ・インスペクタ」の「編集」オプションが使用可能なADFモバイルAMX属性をリストします。
表7-2 編集可能な属性
| プロパティ | 要素 |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
その他のどのプロパティに対しても「編集」をクリックすると同様のダイアログが表示されますが、図7-9に示すように「アクション結果」オプションはありません。
このダイアログは、マネージドBeanを作成するか、actionプロパティに使用可能なアクション結果を選択できることを示しています。
図7-8に示された「アクション結果」リストには、特定のADFモバイルAMXページが属するすべてのタスク・フローからのアクション結果が含まれています。また、このリストには、前に参照したページに戻るための__backナビゲーション結果が含まれています(詳細は第7.2.9項「UIコンポーネントを使用したアクション結果の指定方法」を参照してください)。ページがタスク・フローの一部ではない場合、__backが「アクション結果」リストで使用可能な唯一の結果です。使用可能なアクション結果のいずれかを選択し、「OK」をクリックすると、アクション・プロパティ値は、適切なEL式(commandButtonの場合、次のとおり)で更新されます。
<amx:commandButton action="goHome"/>
「メソッド・バインディング」オプション(図7-8を参照)では、新しいマネージドBeanクラスを作成するか、既存のマネージドBeanクラスを選択できます。
新しいマネージドBeanクラスを作成するには:
「マネージドBean」フィールドの横にある「新規」をクリックし、図7-10に示す「マネージドBeanの作成」ダイアログを開きます。
ADFモバイルでは、次のスコープがサポートされています。
application
view
pageFlow
ADFモバイル・アプリケーションまたはADFモバイルAMXアプリケーションに対してマネージドBeanを宣言すると、マネージドBeanはインスタンス化されて適切なスコープ内で識別され、Beanのプロパティが解決されてそのメソッドがELを介してコールされます。詳細は、第9.2項「ELサポートの理解」を参照してください。
マネージドBeanおよびクラス名を指定し、「OK」をクリックします。
例7-1に、新たに作成されたマネージドBeanクラスを示します。このADFモバイルAMXページが含まれるタスク・フローが、Beanを参照するように更新されます。
例7-1 新しいマネージドBeanクラス
<managed-bean id="__3"> <managed-bean-name>MyBean</managed-bean-name> <managed-bean-class>mobile.MyBean</managed-bean-class> <managed-bean-scope>application</managed-bean-scope> </managed-bean>
|
注意: 特定のADFモバイルAMXページがバインド・タスク・フローおよびバインドなしタスク・フローの一部である場合、これら両方のタスク・フローがマネージドBeanエントリで更新されます。 |
「メソッド」フィールドの横にある「新規」をクリックし(図7-8および図7-9を参照)、図7-11に示す「メソッドの作成」ダイアログを開きます。このダイアログを使用して、マネージドBeanメソッド名を指定します。
完了すると、選択したプロパティ値は、適切なEL式(commandButtonの場合は次のとおり)で更新されます。
<amx:commandButton action="#{MyBean.getMeHome}"/>
マネージドBeanクラスも、例7-2に示すとおり、新たに作成されたメソッドを含むように更新されます。
既存のマネージドBeanを選択するには:
図7-12に示す「マネージドBean」リストから選択を行います。
アクション結果と同様、マネージドBeanリストには、このADFモバイルAMXページが含まれるすべてのタスク・フローからのマネージドBeanが移入されます。
|
注意: ADFモバイルAMXページがタスク・フローの一部ではない場合でも、マネージドBeanは作成できます。 |
詳細は、次の項を参照してください。
JavaDemo。これは開発コンピュータのjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルにあるADFモバイルのサンプル・アプリケーションです。
タスク・フローでページ遷移スタイルを定義することにより、ビューから別のビューへのADFモバイルAMXページの遷移方法指定できます。ADFモバイルAMXページの遷移動作は次のようにできます。
フェード・イン
左からスライド・イン
右からスライド・イン
下からスライド・アップ
上からスライド・ダウン
下からフリップ・アップ
上からフリップ・ダウン
左からフリップ
右からフリップ
なし
例7-3のようにcontrol-flow-case(制御フロー・ケース・コンポーネント)のtransition属性を変更することによって、遷移スタイルを設定します。
例7-3 遷移スタイルの設定
<control-flow-rule id="__1">
<from-activity-id>products</from-activity-id>
<control-flow-case id="__2">
<from-outcome>details</from-outcome>
<to-activity-id>productdetails</to-activity-id>
<transition>fade</transition>
</control-flow-case>
</control-flow-rule>
「プロパティ・インスペクタ」で、transition属性は、図7-13に示すように「動作」の下にあります。デフォルトの遷移スタイルはslideLeftです。
ADFモバイルAMXビューの作成は、次のようにして開始できます。
ADFモバイルAMXページの構造を理解する
プレビューを使用する
ADFモバイルAMXページにコンポーネントをドラッグ・アンド・ドロップする
ビューにデータ・コントロールを追加する
ADFモバイルAMXページは、Oracle ADF FacesのJSPXファイルに類似したXMLファイルで表されます。
次にADFモバイルAMXファイルの基本構造を示します。
<amx:view>
<amx:panelPage id="pp1">
<amx:facet name="header">
<amx:outputText id="ot1" value="Welcome"/>
…
</amx:facet>
</amx:panelPage>
</amx:view>
データ可視化コンポーネント(第8.5項「データ視覚化の指定」を参照)を除き、UI要素は<amx>名前空間の下で宣言されます。
詳細は、第7.3.1.3項「ADFモバイルAMXページの作成時の処理」を参照してください。
ADFモバイルAMXファイルは、ADFモバイル・アプリケーションのビュー・コントローラ・プロジェクトに含まれています。これらのファイルは、「ADFモバイルAMXページの作成」ダイアログを使用して作成します。
ADFモバイルでは、ADFモバイルAMXページを作成する別の方法を2通り提供しています。
「新規ギャラリ」から
既存のタスク・フローから
始める前に:
ADFモバイルAMXページを作成するには、ADFモバイル・アプリケーションにビュー・コントローラ・プロジェクト・ファイル(第4章「ADFモバイル・アプリケーション開発の開始」を参照)が含まれている必要があります。
「新規ギャラリ」からADFモバイルAMXページを作成するには:
JDeveloperのトップレベル・メニューから「ファイル」をクリックし、「新規」→「ギャラリから」を選択します。
「新規ギャラリ」で「クライアント層」ノードを開き、「ADFモバイル」→「ADFモバイルAMXページ」を選択します(図7-14を参照)。「OK」をクリックします。
図7-15に示すように、「ADFモバイルAMXページの作成」ダイアログで、新しいファイルの名前と必要に応じて場所を入力します。
オプションで、ページ・レイアウトの一部としてどのファセットを新しいADFモバイルAMXページに含めるかを選択することもできます。
ヘッダー
プライマリ
セカンダリ
フッター
詳細は、第7.3.1.3項「ADFモバイルAMXページの作成時の処理」および第8.2.6項「ファセット・コンポーネントの使用方法」を参照してください。
ファセットを選択または選択解除すると、変更されたページの外観を反映するよう、ページを表すイメージは動的に変わります。
|
注意: ADFモバイルでは、ファセットの選択を持続し、後に続く「ADFモバイルAMXページの作成」ダイアログが開かれるたびにその選択が適用されます。 |
「ADFモバイルAMXページの作成」ダイアログで、「OK」をクリックします。
タスク・フローのビュー・コンポーネントからADFモバイルAMXページを作成するには:
ダイアグラマでタスク・フロー・ファイルを開きます(図7-5「フロー・エディタのダイアグラマ」、第7.2.1項「タスク・フローの作成方法」および第7.2.4項「ADFモバイル・タスク・フロー・ダイアグラマについて」を参照)。
タスク・フローのビュー・コンポーネントをダブルクリックして図7-15に示す「ADFモバイルAMXページの作成」ダイアログを開き、新しいファイルの名前と必要に応じて場所を入力します。「OK」をクリックします。
「ADFモバイルAMXページの作成」ダイアログを使用してADFモバイルAMXページを作成すると、JDeveloperは物理ファイルを作成し、これをビュー・コントローラ・プロジェクトのWeb Contentディレクトリに追加します。
図7-16に示す「アプリケーション・ナビゲータ」では、Web Contentノードに、新たに作成されたorder.amxというADFモバイルAMXファイルが含まれています。
JDeveloperは、コンポーネント・ライブラリをインポートし、ページを表示するために必要なコードの追加も行います。このコードは、図7-16に示す「ソース」エディタに表示されます。
図7-17は、ページの作成時に「ADFモバイルAMXページの作成」ダイアログのページ・ファセットセクションにリストされたすべてのファセット・タイプを選択した場合に、「プレビュー」ペインおよび生成されたADFモバイルAMXコードがどのようになるかを示しています。
すべてのファセットを選択して作成したページ(図7-17を参照)では、次の点に注意してください。
ヘッダーは出力テキスト・コンポーネントで作成されます。これはこのコンポーネントが通常ページ・タイトルに使用されるためです。
プライマリおよびセカンダリのアクションは、ボタン・コンポーネントで作成されます。これは、これが通常のパターンであるためです。
フッターの場合、1つだけ群を抜いているパターンはないため、デフォルトでは出力テキスト・コンポーネントで作成されます。これは、このコンポーネントがいくつかのパターンで使用されており、JDeveloperが監査違反のある初期コードを生成することを回避できるためです。
ヘッダー・ファセットを追加せずにプライマリまたはセカンダリのいずれかのアクションを追加しても、ヘッダー・セクションは「ADFモバイルAMXページの作成」ダイアログのページ・ファセットセクションに表示されます。
図7-18に、「ADFモバイルAMXページの作成」ダイアログのファセットが選択されていないページ・ファセットセクション、「プレビュー」ペインおよび生成されたADFモバイルAMXコード(図7-16にも示されています)を示します。
最初にJDeveloperに表示されるとき、ページは「ソース」エディタに表示されます。WYSIWYG環境でページを表示するには、「プレビュー」ペイン(「プレビュー」タブをクリックしてアクセスします)を使用します。図7-19は、order.amxという新たに作成されたADFモバイルAMXページで選択された「プレビュー」タブを示しています。このページは、まだADFモバイルAMX UIコンポーネントやデータ・コントロールが移入されていないため、空です。
図7-19に示す「プレビュー」ペインのツールバーを使用して、次のことができます。
「ページのリフレッシュ」をクリックすると、ADFモバイルAMXページの表示をリフレッシュできます。
「ページのロードを中止」をクリックすると、ページのロードを中止できます。
ドロップダウンリストから別のフォーム・ファクタを選択すると、ページのフォーム・ファクタを変更できます。フォーム・ファクタの詳細は、第3.3.1.1項「フォーム・ファクタに応じた環境の構成」を参照してください。
ドロップダウン・リストから別のパーセント値を選択すると、表示のスケーリングを変更できます。モバイル・デバイスは様々なサイズおよび密度で表示されるため、「プレビュー」ペインでは、ADFモバイルAMXページでのスケーリングの効果を確認することができます。
|
注意: スケーリングは縦と横の両方のモードで使用できます。 |
「縦向きの表示」または「横向きの表示」を選択することにより、表示の向きをそれぞれ横または縦に変更できます。
使用可能なアプリケーション機能のドロップダウン・リストからADFモバイルAMXページの機能コンテンツを選択します。デフォルトでは、「機能コンテンツが選択されていません」が表示されます。
「ソース」エディタでページのソースを表示するには、図7-16「「アプリケーション・ナビゲータ」のADFモバイルAMXファイル」に示されている「ソース」タブをクリックします。JDeveloperの左下部にある「構造」ウィンドウ(図7-16および図7-19)には、ページが階層形式で表示されます。詳細は、第7.3.2.2項「「プレビュー」の使用方法」を参照してください。
ADFモバイルAMXでは、JDeveloperのページ定義に移動機能をサポートしており、バインディング情報を迅速に見つけて編集できるようにするポップアップ・メニューを使用することで、ADFモバイルAMXページのページ定義にナビゲートできます。
次の場所から「ページ定義に移動」オプションを含むポップアップ・メニューを起動できます。
さらに、図7-23のように、メイン・メニューの「ツール」→「プリファレンス」の下で定義されている「ページ定義に移動」ショートカット・キーを使用して、ページ定義ファイルを開くこともできます。
ADFモバイルAMXページを作成すると、ページへのADFモバイルAMX UIコンポーネントおよびデータ・コントロールの追加を開始できます。
「コンポーネント・パレット」を使用して、ADFモバイルAMXコンポーネントをページ上にドラッグ・アンド・ドロップできます。コンポーネントを追加すると、必要な宣言的ページ・コードが追加され、各コンポーネント属性に特定の値が設定されます。
「コンポーネント・パレット」には、ADFモバイルAMXコンポーネントがカテゴリ別に表示されます(図7-24を参照)。
一般コントロール
テキストおよび選択
データ・ビュー
レイアウト。次のサブカテゴリがあります。
対話型コンテナおよびヘッダー
セカンダリ・ウィンドウ
コア構造
操作。次のサブカテゴリがあります。
動作
リスナー
バリデータおよびコンバータ
特定のコンポーネントの追加および使用については、第8.3項「UIコンポーネントの作成と使用方法」を参照してください。
始める前に:
ADFモバイル・アプリケーションには、ビュー・コントローラ・プロジェクトが含まれている必要があります。このプロジェクトには、ADFモバイルAMXページまたはADFモバイルAMXページのタスク・フロー(ここからページを作成します)が含まれている場合と含まれていない場合があります。
「ADFモバイルAMXページの作成」ダイアログを起動するには、第7.3.1.2項「ADFモバイルAMXページの作成」で説明したように、タスク・フロー・ダイアグラムでビュー・アイコンをダブルクリックするか、「新規ギャラリ」から「クライアント層」→「ADFモバイル」→「ADFモバイルAMXページ」を選択します。
UIコンポーネントをページに追加するには:
「ソース」エディタでADFモバイルAMXページを開きます(デフォルト)。
「コンポーネント・パレット」で、図7-24に示すように、メニューを使用して「ADFモバイルAMX」を選択します。
|
ヒント: 「コンポーネント・パレット」が表示されない場合は、メインのJDeveloperメニューから「ビュー」→「コンポーネント・パレット」を選択します。デフォルトでは、コンポーネント・パレットはJDeveloperの右上部に表示されます。 |
使用するコンポーネントを選択し、「ソース」エディタまたは「構造」ウィンドウにドラッグ・アンド・ドロップします。「プレビュー」ペインにコンポーネントをドロップすることはできません。
|
注意: ADFモバイルAMXページの構築の際、UIコンポーネントは、「パネル・グループ・レイアウト」などのUIコンテナにのみドロップできます。 |
新たに追加されたコンポーネントを使用して、JDeveloperで「プレビュー」ペインのページが再描画されます。
ADFモバイルAMXファイルを使用してユーザー・インタフェースを構築する際、JDeveloperのプレビューでは、iOSとAndroidの両方のプラットフォームに対してWYSIWYGサポートを提供します。図7-25に示すように、ビューを分割した状態で、ADFモバイルAMXコンポーネントをADFモバイルAMXファイルに追加すると、コード・ビューは「ソース」エディタから、UIビューは「プレビュー」ペインから同時に確認できます。これにより、ソースを変更してすぐに、iOSとAndroidの両方のプラットフォームで、そのアプリケーションの変更されたルック・アンド・フィールを表示できます。
デザイン・ビューとソース・ビューを同時に確認できる以外に、複数のデザイン・ビューを同時に開いて使用し、それぞれを異なるプラットフォームおよび画面サイズに設定できます。様々なデバイスのデザイン・ビューの組合せを開くことで、様々なプラットフォームおよびフォーム・ファクタに対し、同時に、異なる向きでアプリケーションを開発できます。図7-26は、上段がiPhone Standard、下段が50%のスケーリングのiPadの分割画面を示しています。「プレビュー」ペインは、JDeveloperのデフォルトの分割機能を使用して分割できます。
|
注意: 無効なADFモバイルAMXファイルであっても、ADFモバイルAMXページはレンダリングされます。エラーはコンポーネントのエラー・アイコンで示されます。マウスをエラー・アイコンの上に移動すると、エラーの詳細を表示できます。 |
UIコンポーネントのページへのドロップ後、「プロパティ・インスペクタ」(デフォルトではJDeveloperの右下部に表示)を使用して、各コンポーネントの属性値を設定できます。
|
ヒント: 「プロパティ・インスペクタ」が表示されない場合は、JDeveloperのメイン・メニューから「ウィンドウ」→デフォルトのファクトリ設定にリセットを選択します。 |
図7-27に、出力テキスト・コンポーネントの属性を表示している「プロパティ・インスペクタ」を示します。
コンポーネント属性の設定手順:
属性を設定するコンポーネントを選択します。「構造」ウィンドウでコンポーネントを選択するか、「ソース」エディタで直接そのタグを選択することができます。
プロパティ・インスペクタで、設定する属性が含まれるセクションを開きます。
|
ヒント: 一部の属性は、複数のセクションに表示されます。あるセクションで値を入力または変更すると、他のセクションでもその値が変更されます。「プロパティ・インスペクタ」の最上部の検索フィールドに属性名を入力して、属性を検索できます。 |
「プロパティ・インスペクタ」で、フィールドに値を直接入力するか、フィールドにリストがある場合はそのリストを使用して、値を選択します。フィールドの右にあるリストを使用して、値の設定に使用できるツールを含むポップアップを起動することもできます。これらのツールは、特定のプロパティ・エディタ(「編集」を選択して開く)または値のEL式の作成に使用できる式ビルダー(「式ビルダー」を選択して開く)です。式ビルダーの使用の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のEL式の作成に関する項を参照してください。
プロパティ・インスペクタを使用して属性値を設定または変更すると、入力された値に合致するよう、属性のページ・ソースがJDeveloperで自動的に変更されます。
|
ヒント: 「ソース」エディタでページを直接編集することで、いつでも属性値を変更できます。「ソース」エディタにページを表示するには、ページの下部の「ソース」タブをクリックします。 |
データ・コントロール要素を「データ・コントロール」パネルからドラッグし、「構造」ウィンドウまたは「ソース」エディタのいずれかにドロップすることで、ADFモバイルAMXビューでデータバインドされたUIコンポーネントを作成できます。「データ・コントロール」パネルからアイテムをドラッグしてこれらのいずれかの場所にドロップすると、ドロップしたアイテムに使用できるデフォルトUIコンポーネントのポップアップ・メニューが表示されます。目的のUIコンポーネントを選択すると、そのコンポーネントがADFモバイルAMXページに挿入されます。また、関連ページ定義ファイルにバインディング情報が作成されます。そのようなファイルが存在しない場合は、JDeveloperによって作成されます。ADFモバイルには、データ・コントロールのドロップ用のビジュアル・インジケータが用意されており、新しいデータ・コントロールの場所を知らせます。
|
注意: データ・コントロールは、基礎となるXMLスキーマで許可された場所にのみドロップできます。 |
方法によっては、様々なタイプのデータ・コントロールをADFモバイルAMXページの「構造」ウィンドウに挿入できます。
コレクションの属性をドロップすることにより、様々な入力および出力コンポーネントを作成できます。ページにデータ・コントロール操作をドロップすることにより、ボタンやリンクも作成できます。
これらの各操作に対し、ADFモバイルAMXボタンにそれぞれのアクション・リスナーが追加されます。actionListenerのEL式は、操作をOracle ADF Facesアプリケーションにドロップしたときに作成したEL式と同じです。
データ・コントロールの属性および操作は、次の1つ以上のADFモバイルAMX UIコンポーネントとしてドロップできます(第8.3項「UIコンポーネントの作成と使用方法」を参照してください)。
ボタン
リンク
入力日
ラベル付入力日
入力テキスト
ラベル付入力テキスト
出力テキスト
ラベル付出力テキスト
イテレータ
リスト・アイテム
リスト・ビュー
ブール・チェック・ボックスの選択
ブール・スイッチの選択
ボタンを1つ選択
選択肢を1つ選択
ラジオ・ボタンを1つ選択
チェック・ボックスを複数選択
選択肢を複数選択
日時の変換
数値の変換
フォーム
読取り専用フォーム
パラメータ・フォーム
次の日付および数値タイプがサポートされています。
java.util.Date
java.sql.Timestamp
java.sql.Date
java.lang.Number
java.lang.Integer
java.lang.Long
java.lang.Float
java.lang.Double
ADFモバイルAMXページにすでにパネル・フォーム・レイアウト・コンポーネントが含まれているか、すべてのフィールドを追加する必要がない場合は、データ・コントロールから個別の属性をドロップできます。属性タイプによって、次のように様々なデータ・バインディング・メニュー・オプションが提供されます。
日付: このカテゴリは、ADFモバイル入力日およびラベル付ADFモバイル入力日のコントロールを作成するためのオプションを提供します。図7-28は、属性を「データ・コントロール」パネルからADFモバイルAMXページの「構造」ウィンドウにドラッグすると表示される日付コントロールを追加するためのポップアップ・メニューを示しています。
単一選択: このカテゴリは、次のコントロールを作成するためのオプションを提供します。
ADFモバイル・ボタンを1つ選択
ADFモバイル選択肢を1つ選択
ADFモバイル・ラジオ・ボタンを1つ選択
ADFモバイル・ブール・チェック・ボックスの選択
ADFモバイル・ブール・スイッチの選択
図7-29は、属性を「データ・コントロール」パネルからADFモバイルAMXページの「構造」ウィンドウにドラッグすると表示される選択コントロールを追加するためのポップアップ・メニューを示しています。
既存のADFモバイルAMXページを使用していて、「ADFモバイル・ボタンを1つ選択」オプションまたはADFモバイル選択肢を1つ選択オプションを選択すると、適切な「リスト・バインディングの編集」ダイアログが表示されます(図7-30を参照してください)。まったく新しいADFモバイルAMXページにコントロールをドロップした場合には、かわりに「アクション・バインディングの編集」ダイアログが開かれます。「OK」をクリックすると、「リスト・バインディングの編集」が開かれます。
|
注意: 単一選択またはブール選択のコンポーネントとして任意のデータ・コントロール属性をドロップするたびに、それぞれ「リスト・バインディングの編集」または「Booleanバインディングの編集」が表示されます。 |
「ADFモバイル・ラジオボタンを1つ選択」を選択すると、図7-31に示すような、別の「リスト・バインディングの編集」ダイアログが表示されます。
「ADFモバイル・ブール・チェックボックスの選択」オプションまたは「ADFモバイル・ブール・スイッチの選択」オプションを選択すると、図7-32に示すような、別の「リスト・バインディングの編集」ダイアログが表示されます。
テキスト: このカテゴリは、次のコントロールを作成するためのオプションを提供します。
ADFモバイル入力テキスト
ラベル付ADFモバイル入力テキスト
ADFモバイル出力テキスト
ラベル付ADFモバイル出力テキスト
図7-29は、属性を「データ・コントロール」パネルからADFモバイルAMXページの「構造」ウィンドウにドラッグすると表示される選択コントロールを追加するためのポップアップ・メニューを示しています。
属性に加え、操作やカスタム・メソッドもドラッグ・アンド・ドロップできます。操作やメソッドのタイプによって、次のように様々なデータ・バインディング・メニュー・オプションが提供されます。
操作: データ・コントロール操作のカテゴリです。次のオプションがあります(図7-34を参照)。
ADFモバイル・ボタン
ADFモバイル・リンク
ADFモバイル・パラメータ・フォーム
|
注意: 操作またはメソッドを、リスト・ビュー・コントロールの子としてドロップすると、ポップアップ・メニューは表示されず、リスト・アイテムが自動的に作成されます。これは、リスト・ビュー・コントロールの直接の子としてドロップできる有効なコントロールが他にないためです。生成されるリスト・アイテムに対して、JDeveloperにより次のようなバインディングが作成されます。
<amx:listItem actionListener="#{bindings.getLocation.execute}"/>
|
メソッド: カスタム・メソッドのカテゴリです。次のオプションがあります(図7-34を参照)。
ADFモバイル・ボタン
ADFモバイル・リンク
ADFモバイル・パラメータ・フォーム
「ADFモバイル・パラメータ・フォーム」オプションでは、フォームに挿入するメソッドまたは操作の引数に加え、各引数に対してそれぞれのコントロールも選択できます(図7-36を参照)。
「フォーム・フィールドの編集」ダイアログで適切なオプションを選択すると、次のデータ・バインディングが生成されます。
<amx:panelFormLayout id="pfl1">
<amx:inputText id="it1"
value="#{bindings.actionEvent.inputValue}"
label="#{bindings.actionEvent.hints.label}"
required="#{bindings.actionEvent.hints.mandatory}"
maximumLength="#{bindings.actionEvent.hints.precision}"/>
</amx:panelFormLayout>
<amx:commandButton id="cb1"
actionListener="#{bindings.cleanInputParameter.execute}"
text="cleanInputParameter"
disabled="#{!bindings.cleanInputParameter.enabled}"/>
生成されるバインディングの詳細は、第7.3.2.4.4項「生成されるバインディングについて」を参照してください。
次にADFモバイル・パラメータ・フォームでサポートされるコントロールのタイプを示します。
ADFモバイル入力日
ラベル付ADFモバイル入力日
ADFモバイル入力テキスト
ラベル付ADFモバイル入力テキスト
ラベル付ADFモバイル出力テキスト
コレクションをドラッグ・アンド・ドロップできます。コレクションのタイプによって、次のように様々なデータ・バインディング・メニュー・オプションが提供されます。
複数選択: このカテゴリは、複数選択コントロールを作成するためのオプションを提供します。このカテゴリでは次のコントロールが作成されます(図7-37を参照)。
ADFモバイル・チェック・ボックスを複数選択
ADFモバイル選択肢を複数選択
フォーム: このカテゴリは、ADFモバイルAMXパネル・フォーム・コントロールの作成に使用されます。このカテゴリでは次のコントロールが作成されます(図7-38を参照)。
ADFモバイル・フォーム
ADFモバイル読取り専用フォーム
作成するフォームのタイプとして「ADFモバイル・フォーム」を選択すると、JDeveloperウィザードが起動され、ここで、フォームに挿入するフィールドに加え、各フィールドに対してそれぞれのコントロールも選択できます(図7-39を参照)。
「フォーム・フィールドの編集」ダイアログで適切なオプションを選択すると、次のデータ・バインディングが生成されます。
<amx:panelFormLayout id="pfl1">
<amx:inputDate id="id1"
value="#{bindings.timeStamp.inputValue}"
required="#{bindings.timeStamp.hints.mandatory}">
<amx:convertDateTime pattern="#{bindings.timeStamp.format}"/>
</amx:inputDate>
<amx:inputText id="it1"
value="#{bindings.speed.inputValue}"
simple="true"
required="#{bindings.speed.hints.mandatory}"
maximumLength="#{bindings.speed.hints.precision}"/>
<amx:inputText id="it2"
value="#{bindings.heading.inputValue}"
label="#{bindings.heading.hints.label}"
required="#{bindings.heading.hints.mandatory}"
maximumLength="#{bindings.heading.hints.precision}"/>
<amx:panelLabelAndMessage id="plm1"
label="#{bindings.latitude.hints.label}">
<amx:outputText id="ot1" value="#{bindings.latitude.inputValue}"/>
</amx:panelLabelAndMessage>
<amx:inputDate id="it3"
value="#{bindings.timeStamp.inputValue}"
label="#{bindings.timeStamp.hints.label}"
required="#{bindings.timeStamp.hints.mandatory}">
<amx:convertDateTime pattern="#{bindings.timeStamp.format}"/>
</amx:inputDate>
</amx:panelFormLayout>
生成されるバインディングの詳細は、第7.3.2.4.4項「生成されるバインディングについて」を参照してください。
次にADFモバイル・フォームでサポートされるコントロールを示します。
ADFモバイル入力日
ラベル付ADFモバイル入力日
ADFモバイル入力テキスト
ラベル付ADFモバイル入力テキスト
ラベル付ADFモバイル出力テキスト
|
注意: ADFモバイル出力テキストは、ADFモバイル・スキーマで定義される有効なパネル・フォーム・レイアウトの子要素ではないため、サポートされていません。 |
作成するフォームのタイプとして「ADFモバイル読取り専用フォーム」を選択すると、JDeveloperウィザードが起動され、ここで、フォームに挿入するフィールドに加え、各フィールドに対してそれぞれのコントロールも選択できます(図7-40を参照)。
「フォーム・フィールドの編集」ダイアログで適切なオプションを選択すると、次のデータ・バインディングが生成されます。
<amx:panelFormLayout id="pfl1">
<amx:panelLabelAndMessage id="plm1" label="#{bindings.AssetNo.hints.label}">
<amx:outputText id="ot1" value="#{bindings.AssetNo.inputValue}"/>
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage id="plm2" label="#{bindings.Item.hints.label}">
<amx:outputText id="ot2" value="#{bindings.Item.inputValue}"/>
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage id="plm3"
label="#{bindings.Description.hints.label}">
<amx:outputText id="ot3" value="#{bindings.Description.inputValue}"/>
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage id="plm4"
label="#{bindings.Assignee.hints.label}">
<amx:outputText id="ot4" value="#{bindings.Assignee.inputValue}"/>
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage id="plm5"
label="#{bindings.AssignedOn.hints.label}">
<amx:outputText id="ot5" value="#{bindings.AssignedOn.inputValue}"/>
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage id="plm6"
label="#{bindings.SupplierId.hints.label}">
<amx:outputText id="ot6" value="#{bindings.SupplierId.inputValue}"/>
</amx:panelLabelAndMessage>
</amx:panelFormLayout>
生成されるバインディングの詳細は、第7.3.2.4.4項「生成されるバインディングについて」を参照してください。
ADFモバイル読取り専用フォームは、ラベル付ADFモバイル出力テキストのみをサポートします。
イテレータ: これは、子コンポーネントのあるADFモバイルAMXイテレータを作成するためのオプションを提供します(図7-41を参照)。
作成するコントロールのタイプとして「ADFモバイル・イテレータ」を選択すると、JDeveloperウィザードが起動され、ここで、イテレータに挿入するフィールドに加え、各フィールドに対してそれぞれのコントロールも選択できます(デフォルトの選択は「ラベル付ADFモバイル出力テキスト」です。図7-42を参照してください)。
「イテレータの編集」ダイアログで適切なオプションを選択すると、次のデータ・バインディングが生成されます。
<amx:iterator var="row"
value="#{bindings.addresses.collectionModel}"
id="iterator1">
<amx:panelLabelAndMessage label="#{bindings.addresses.hints.type.label}"
id="panelLabelAndMessage6">
<amx:outputText value="#{row.type}" id="outputText6"/>
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage label=
"#{bindings.addresses.hints.formatted.label}"
id="panelLabelAndMessage2">
<amx:outputText value="#{row.formatted}"/>
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage label=
"#{bindings.addresses.hints.streetAddress.label}"
id="panelLabelAndMessage5">
<amx:outputText value="#{row.streetAddress}" id="outputText5"/>
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage label="#{bindings.addresses.hints.locality.label}"
id="panelLabelAndMessage4">
<amx:outputText value="#{row.locality}" id="outputText4"/>
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage label="#{bindings.addresses.hints.region.label}"
id="panelLabelAndMessage7">
<amx:outputText value="#{row.region}" id="outputText7"/>
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage label=
"#{bindings.addresses.hints.postalCode.label}"
id="panelLabelAndMessage1">
<amx:outputText value="#{row.postalCode}" id="outputText1"/>
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage label="#{bindings.addresses.hints.country.label}"
id="panelLabelAndMessage3">
<amx:outputText value="#{row.country}" id="outputText3"/>
</amx:panelLabelAndMessage>
</amx:iterator>
生成されるバインディングの詳細は、第7.3.2.4.4項「生成されるバインディングについて」を参照してください。
次にADFモバイル・イテレータでサポートされるコントロールを示します。
ADFモバイル入力テキスト
ラベル付ADFモバイル入力テキスト
ADFモバイル出力テキスト
ラベル付ADFモバイル出力テキスト
リスト・ビュー: これは、子コンポーネントのあるADFモバイルAMXリスト・ビューを作成するためのオプションを提供します(図7-43を参照)。
作成するコントロールのタイプとして「ADFモバイル・リスト・ビュー」を選択すると、図7-44に示す「ListViewギャラリ」が開かれ、リスト・ビューの特定のレイアウトを選択できます。
表7-3は、「ListViewギャラリ」に表示される、サポートされるリスト・フォーマットを示しています。
表7-3 リスト・フォーマット
| フォーマット | 要素行の値 |
|---|---|
|
シンプル |
|
|
メイン-サブ・テキスト |
|
|
開始-終了 |
|
|
四分円 |
|
選択したリスト・フォーマットの「ListViewギャラリ」に表示されている「バリエーション」(図7-44を参照)は、区切りか先頭イメージのいずれかまたは両方を追加するためのオプションで構成されています。
先頭イメージのあるバリエーションを選択すると、イメージ行が「リスト・アイテム・コンテンツ」表(図7-45を参照)に追加されます。
区切りのあるバリエーションを選択すると、「区切り属性」フィールドがデフォルトの「区切りなし」ではなく、リスト内の最初の属性にデフォルトで設定され、「区切りモード」フィールドにそのデフォルト値の「すべて」が移入されます。
「ListViewギャラリ」に表示されている「スタイル」オプション(図7-44を参照)では、シェブロンを抑制することも、凹枠スタイル・リストを使用することも、その両方を行うこともできます。
この選択によって、「リスト・ビューの編集」ダイアログ(図7-45を参照)の状態は変更されません。影響するのは、生成されるADFモバイルAMXマークアップのみです。
凹枠リストのあるスタイルを選択すると、生成されたADFモバイルAMXマークアップのlistView要素にadfmf-listView-insetListスタイル・クラスが設定されます。
シェブロンのないスタイルを選択すると、生成されたADFモバイルAMXマークアップのlistItem要素のshowLinkIcon属性がfalseに設定されます。
次に、凹枠リストとシェブロンのあるシンプル・フォーマットの例を示します。
<amx:listView var="row"
value="#{bindings.employees.collectionModel}"
fetchSize="#{bindings.employees.rangeSize}"
styleClass="adfmf-listView-insetList"
id="listView2">
<amx:listItem id="li2">
<amx:outputText value="#{row.employeename}" id="ot3"/>
</amx:listItem>
</amx:listView>
「ListViewギャラリ」の「説明」ペインは、現在選択されているバリエーションに基づいて更新されます。フォーマットには、メイン・スタイルの簡単な説明が示され、その後に選択したバリエーションの詳細が続きます。4つのメイン・スタイルに、それぞれ4つのバリエーションがあり、表7-4に示す16の固有の説明が提供されています。
表7-4 リスト・ビューのバリエーションとスタイル
| リスト・フォーマット | バリエーション | 説明 |
|---|---|---|
|
シンプル |
基本 |
テキスト・フィールドは、リスト・アイテムの開始側に表示されます。 |
|
シンプル |
区切り |
テキスト・フィールドは、リスト・アイテムの開始側に、アイテムが区切りによりグループ化されて表示されます。 |
|
シンプル |
イメージ |
テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。 |
|
シンプル |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
メイン-サブ・テキスト |
基本 |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。 |
|
メイン-サブ・テキスト |
区切り |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。リスト・アイテムは区切りによってグループ化されます。 |
|
メイン-サブ・テキスト |
イメージ |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。 |
|
メイン-サブ・テキスト |
区切りおよびイメージ |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
開始-終了 |
基本 |
テキスト・フィールドは、リスト・アイテムの両側に表示されます。 |
|
開始-終了 |
区切り |
テキスト・フィールドは、リスト・アイテムの両側に、アイテムが区切りによりグループ化されて表示されます。 |
|
開始-終了 |
イメージ |
テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。 |
|
開始-終了 |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
四分円 |
基本 |
テキスト・フィールドは、リスト・アイテムの四隅に表示されます。 |
|
四分円 |
区切り |
テキスト・フィールドは、リスト・アイテムの四隅に、アイテムが区切りによりグループ化されて表示されます。 |
|
四分円 |
イメージ |
テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。 |
|
四分円 |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
「ListViewギャラリ」で選択し、「OK」をクリックすると、「リスト・ビューの編集」ウィザードが起動され、ここで図7-45に示すように、バインディング属性を選択したリスト・ビュー・フォーマットの要素にマップすることにより、リスト・アイテムのコンテンツを作成できます。
図7-45に示すダイアログに入力する際は、次の点を考慮してください。
最初のイメージは、選択したリスト・ビュー・フォーマットのメイン・コンテンツ要素を反映し、略図から基礎となる表の名前付き要素へのマッピングを提供します。
「要素」列の読取り専用セルは、選択したリスト・ビュー・フォーマットから抽出されます。
「値バインディング」列の編集可能セルは、ドロップされたデータ・コントロール・ノードに基づいています。
リスト・アイテムは、その特定要素に対してどちらが適切であるかによって、出力テキストまたはイメージ・コンポーネントのいずれかとして生成されます。
要素(行)数は選択したリスト・ビュー・フォーマットであらかじめ決まっているため、行を追加または削除することはできません。
要素の順序は変更できません。
「区切り属性」フィールドのデフォルト値は「区切りなし」です。この場合、「区切りモード」フィールドは無効です。デフォルト以外の値を選択する場合は、図7-46および図7-47に示すように、「区切りモード」パラメータを指定する必要があります。
リスト・ビューの区切りの詳細は、第8.2.7項「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」を参照してください。
「リスト・ビューの編集」ダイアログで適切なオプションを選択すると、次のADFモバイルAMXマークアップおよびデータ・バインディングが生成されます。
<amx:listView var="row"
value="#{bindings.contacts.collectionModel}"
fetchSize="#{bindings.contacts.rangeSize}"
dividerAttribute="key"
dividerMode="all"
id="listView1">
<amx:listItem showLinkIcon="false" id="listItem1" >
<amx:panelGroupLayout layout="horizontal"
id="panelGroupLayout1">
<amx:image source="#{row.key}" id="image1"/>
<amx:panelGroupLayout id="panelGroupLayout2">
<amx:outputText value="#{row.id}"
styleClass="adfmf-listItem-maintext"
id="outputText2"/>
<amx:outputText value="#{row.key}"
styleClass="adfmf-listItem-subtext"
id="outputText1"/>
</amx:panelGroupLayout>
</amx:panelGroupLayout>
</amx:listItem>
</amx:listView>
生成されるバインディングの詳細は、第7.3.2.4.4項「生成されるバインディングについて」を参照してください。
次にADFモバイル・リスト・ビューでサポートされるコントロールを示します。
ADFモバイル出力テキスト
ADFモバイル・イメージ
表7-5は、コンポーネントがドロップされたときにADFモバイルAMXページに追加されるサンプル・バインディングを示しています。
表7-5 サンプル・データ・バインディング
| コンポーネント | データ・バインディング |
|---|---|
|
ボタン |
actionListener="#{bindings.FindContacts.execute}"
text="FindContacts" disabled="#{!bindings.FindContacts.enabled}"
|
|
リンク |
actionListener="#{bindings.FindContacts.execute}"
text="FindContacts" disabled="#{!bindings.FindContacts.enabled}"
|
|
ラベル付入力日 |
<amx:inputDate id="inputDate1"
value="#{bindings.timeStamp.inputValue}"
label="#{bindings.timeStamp.hints.label}"
required="#{bindings.timeStamp.hints.mandatory}">
</amx:inputDate>
|
|
入力日 |
<amx:inputDate id="inputDate1"
value="#{bindings.timeStamp.inputValue}"
required="#{bindings.timeStamp.hints.mandatory}">
</amx:inputDate>
|
|
ラベル付入力テキスト |
value="#{bindings.contactData.inputValue}"
label="#{bindings.contactData.hints.label}"
required="#{bindings.contactData.hints.mandatory}"
maximumLength="#{bindings.contactData.hints.precision}"
|
|
入力テキスト |
value="#{bindings.contactData.inputValue}"
simple="true"
required="#{bindings.contactData.hints.mandatory}"
maximumLength="#{bindings.contactData.hints.precision}"
|
|
出力テキスト |
value="#{bindings.contactData.inputValue}"
|
|
ラベル付出力テキスト |
<amx:panelLabelAndMessage id="panelLabelAndMessage1"
label="#{bindings.contactData.hints.label}">
<amx:outputText value="#{bindings.contactData.inputValue}"/>
</amx:panelLabelAndMessage>
|
|
ブール・チェック・ボックスの選択 |
value="#{bindings.contactData.inputValue}"
label="#{bindings.contactData.label}"
|
|
ブール・スイッチの選択 |
value="#{bindings.contactData.inputValue}"
label="#{bindings.contactData.label}"
|
|
ボタンを1つ選択 |
<amx:selectOneButton id="selectOneButton1"
value="#{bindings.contactData.inputValue}"
label="#{bindings.contactData.label}"
required="#{bindings.contactData.hints.mandatory}">
<amx:selectItems value="#{bindings.contactData.items}"/>
</amx:selectOneButton>
|
|
選択肢を1つ選択 |
<amx:selectOneChoice id="selectOneChoice1"
value="#{bindings.contactData.inputValue}"
label="#{bindings.contactData.label}"
required="#{bindings.contactData.hints.mandatory}">
<amx:selectItems value="#{bindings.contactData.items}"/>
</amx:selectOneChoice>
|
|
チェック・ボックスを複数選択 |
<amx:selectManyCheckbox id="selectManyCheckbox1"
value="#{bindings.AssetView.inputValue}"
label="#{bindings.AssetView.label}">
<amx:selectItems value="#{bindings.AssetView.items}"/>
</amx:selectManyCheckbox>
|
|
ラジオ・ボタンを1つ選択 |
<amx:selectOneRadio id="selectOneRadio1"
value="#{bindings.contactData.inputValue}"
label="#{bindings.contactData.label}"
required="#{bindings.contactData.hints.mandatory}">
<amx:selectItems value="#{bindings.contactData.items}"/>
</amx:selectOneRadio>
|
|
選択肢を複数選択 |
<amx:selectManyChoice id="selectManyChoice1"
value="#{bindings.AssetView.inputValue}"
label="#{bindings.AssetView.label}">
<amx:selectItems value="#{bindings.AssetView.items}"/>
</amx:selectManyChoice>
|
最初のドラッグ・アンド・ドロップ・イベントにより、次のディレクトリとファイルが生成されます。
図7-48に、ドラッグ・アンド・ドロップ時に生成されるDataBindings.cpxファイル例を示します。
詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のDataBindings.cpxファイルの使用方法に関する項を参照してください。
図7-49に、ドラッグ・アンド・ドロップ時に生成されるPageDefファイル例を示します。
詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のページ定義ファイルの使用方法に関する項を参照してください。
JDeveloperの「バインディング」タブ(図7-50を参照)は、ADFモバイルAMXエディタにあります。ここには、特定のADFモバイルAMXページに対して定義されたデータ・バインディングが表示されます。バインディングを選択すると、基盤となるデータ・コントロールへのリレーションシップが示され、PageDefファイルへのリンクが提供されます。
「構造」ペインからADFモバイルAMXコンポーネントを削除または切り取ると、使用されないバインディングは自動的にページから削除されます。
|
注意: 「ソース」エディタからコンポーネントを削除した場合には、バインディングは削除されません。 |
図7-51は、バインディングを参照するリスト・ビュー・コンポーネントの削除を示しています。削除すると、関連するバインディング・エントリが、対応するPageDef.xmlファイルから自動的に削除されます。
図7-52では、ページからリスト・ビュー・コンポーネントを切り取ることにより、これを削除しています。
「切取り」をクリックすると、図7-53に示すような「ADFバインディングの削除の確認」ダイアログが表示され、該当するバインディングを削除するかどうかを選択するよう求められます。
「コンポーネント・パレット」からコンポーネントをドロップするか、データ・コントロールをドラッグ・アンド・ドロップすることにより、要素が追加されると、ADFモバイルは一意の要素識別子(id)を生成し、自動的にこれをADFモバイルAMXページに挿入します。これにより、同じページ内の類似したコンポーネントでもそれぞれを識別する、ADFモバイルAMXページ内の有効な識別子となります。
ADFモバイルは、次のことを行う識別子監査ユーティリティを提供しています。
ADFモバイルAMXページにおける識別子の存在と一意性を確認する。
識別子が存在しないか、一意ではない場合:
要素の必須id属性に対しては、エラーが報告される。
要素のオプションid属性に対しては、警告が報告される。
自動修正により、識別子の問題が報告されると、要素の一意のidが生成される。
図7-54および図7-55は、「ソース」エディタと「構造」ペインの識別子エラー・レポートをそれぞれ示しています。
idに加え、監査ユーティリティでは「ポップアップ表示動作」操作のpopupIdおよびalignId属性をチェックします(第8.2.8項「ポップアップ・コンポーネントの使用方法」を参照)。
図7-56および図7-57は、「ソース」エディタの「ポップアップ表示動作」の「ポップアップID」と「位置合せID」のエラー・レポートをそれぞれ示しています。
詳細は、『Oracle Fusion Middleware Oracle JDeveloperユーザーズ・ガイド』のアプリケーションの監査とプロファイリングに関する項および監査に関する項を参照してください。
