6 MAF AMXユーザー・インタフェースの作成

この章では、MAF AMXページのユーザー・インタフェースを作成する方法について説明します。

この章には次の項が含まれます:

• 第6.1項「MAF AMXページのユーザー・インタフェースの作成の概要」

• 第6.2項「ページ・レイアウトの設計」

• 第6.3項「UIコンポーネントの作成と使用方法」

• 第6.4項「ジェスチャーの有効化」

• 第6.5項「データ視覚化の指定」

• 第6.6項「UIコンポーネントのスタイル設定」

• 第6.7項「UIコンポーネントのローカライズ」

• 第6.8項「MAFのアクセシビリティのサポートの理解」

• 第6.9項「入力の検証」

• 第6.10項「イベント・リスナーの使用方法」

6.1 MAF AMXページのユーザー・インタフェースの作成の概要

MAFは、iOSとAndroidのどちらのユーザー操作性に対しても適切に動作するMAF AMXページの作成を可能にする一連のUIコンポーネントおよび操作を提供します。

MAF AMXは、UIコンポーネントおよび操作をエディタ・ウィンドウで追加できることにより、通常のOracle Enterprise Pack for Eclipseの開発環境を維持しています。本質的には、MAF AMX UIコンポーネントは、iOSおよびAndroidのプラットフォームでネイティブ・コンポーネントのHTML相当物をレンダリングし、OEPEでのそれらのデザインタイムの動作は、その他のテクノロジで使用されるコンポーネントに似ています。さらに、これらのUIコンポーネントは、宣言ナビゲーションおよびデータ・バインディングのためにMAFのコントローラおよびモデルと統合されています。

注意: モバイル・デバイス用のインタフェースを開発する場合は、画面領域が非常に限られていることに常に注意してください。また、一部のモバイル・デバイスではタッチスクリーンが使用できません。

詳細は、次を参照してください。

• 第5章「MAF AMXページの作成」

• 第7章「バインディングの使用とデータ・コントロールの作成」

• 第11章「カスタムMAF AMX UIコンポーネントの作成」

6.2 ページ・レイアウトの設計

MAF AMXは、ページ内へのUIコンポーネントの配置を可能にするレイアウト・コンポーネント(表6-1に記載)を提供します。通常、これらのコンポーネントを使用してページの構築を開始し、次にこれらのコンテナ内で、または子コンポーネントとして、他の機能を提供する他のコンポーネントを、レイアウト・コンポーネントに追加します。これらのコンポーネントのいくつかは、拡大するコンポーネント内に配置されたときに拡大する機能などの形状管理機能を提供します。

表6-1 MAF AMXのページ管理、レイアウトおよび間隔調整コンポーネント

コンポーネント	タイプ	説明
表示	コア・ページ構造コンポーネント	MAF AMXファイル内にview要素を作成します。ファイルが作成されるときにファイルに自動的に挿入されます。詳細は、第6.2.1項「表示コンポーネントの使用方法」を参照してください。
パネル・ページ	コア・ページ構造コンポーネント	MAF AMXファイル内にpanelPage要素を作成します。ページ内の中央領域(ヘッダー領域とフッター領域の間を垂直方向にスクロールする)を定義します。詳細は、第6.2.2項「パネル・ページ・コンポーネントの使用方法」を参照してください。 MAF AMXファイルの詳細は、第5.3.1.2項「MAF AMXページの作成」を参照してください。
ファセット	コア・ページ構造コンポーネント	MAF AMXファイル内にfacet要素を作成します。任意の名前のファセットを親コンポーネントに定義します。詳細は、第6.2.7項「ファセット・コンポーネントの使用方法」を参照してください。
フラグメント	コア・ページ構造コンポーネント	MAF AMXファイル内にfragment要素を作成します。ページ・コンテンツの共有を可能にします。詳細は、第6.2.13項「フラグメント・コンポーネントの使用方法」を参照してください。
ファセット定義	コア・ページ構造コンポーネント	MAF AMXファイル内にfacetRef要素を作成します。ページ・フラグメントの定義(fragmentDef)で、ページ・フラグメントの使用箇所で定義されたファセットを参照するために使用します。詳細は、第6.2.7項「ファセット・コンポーネントの使用方法」を参照してください。
パネル・グループ・レイアウト	ページ・レイアウト・コンテナ	MAF AMXファイル内にpanelGroupLayout要素を作成します。子コンポーネントを縦または横にグループ化します。詳細は、第6.2.3項「パネル・グループ・レイアウト・コンポーネントの使用方法」を参照してください。
パネル・フォーム・レイアウト	ページ・レイアウト・コンテナ	MAF AMXファイル内にpanelFormLayout要素を作成します。入力テキストなどのコンポーネントを、それらのラベルおよびフィールドが水平に、または各コンポーネントの上に整列するように配置します。詳細は、第6.2.4項「パネル・フォーム・レイアウト・コンポーネントの使用方法」を参照してください。
パネル・ラベルおよびメッセージ	ページ・レイアウト・コンテナ	MAF AMXファイル内にpanelLabelAndMessage要素を作成します。ラベルおよびその子をレイアウトします。詳細は、第6.2.6項「パネル・ラベルおよびメッセージ・コンポーネントの使用方法」を参照してください。
パネル・ストレッチ・レイアウト	ページ・レイアウト・コンテナ	MAF AMXファイル内にpanelStretchLayout要素を作成します。別のパネルの両側にパネルを配置できます。詳細は、第6.2.5項「パネル・ストレッチ・レイアウト・コンポーネントの使用方法」を参照してください。
ポップアップ	セカンダリ・ウィンドウ	MAF AMXファイル内にpopup要素を作成します。詳細は、第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照してください。
パネル・スプリッタ	インタラクティブ・ページ・レイアウト・コンテナ	MAF AMXファイル内にpanelSplitter要素を作成します。詳細は、第6.2.9項「パネル・スプリッタ・コンポーネントの使用方法」を参照してください。
パネル・アイテム	インタラクティブ・ページ・レイアウト・コンポーネント	MAF AMXファイル内にpanelItem要素を作成します。詳細は、第6.2.9項「パネル・スプリッタ・コンポーネントの使用方法」を参照してください。
デック	ページ・レイアウト・コンテナ	MAF AMXファイル内にdeck要素を作成します。詳細は、第6.2.12項「デック・コンポーネントの使用方法」を参照してください。
スペーサ	間隔調整コンポーネント	MAF AMXファイル内のspacer要素によって表される空白の領域を作成します。 詳細は、第6.2.10項「スペーサ・コンポーネントの使用方法」を参照してください。
表のレイアウト	ページ・レイアウト・コンテナ	MAF AMXファイル内にtableLayout要素を作成します。行で構成された表を表します。詳細は、第6.2.11項「表のレイアウト・コンポーネントの使用方法」を参照してください。
行のレイアウト	ページ・レイアウト・コンテナ	MAF AMXファイル内にrowLayout要素を作成します。表のレイアウト・コンポーネント内でセルで構成されている行を表します。詳細は、第6.2.11項「表のレイアウト・コンポーネントの使用方法」を参照してください。
セル・フォーマット	ページ・レイアウト・コンポーネント	MAF AMXファイル内にcellFormat要素を作成します。行のレイアウト・コンポーネント内のセルを表します。詳細は、第6.2.11項「表のレイアウト・コンポーネントの使用方法」を参照してください。

レイアウト・コンポーネントを追加するには、それを「パレット」からMAF AMXページにドラッグ・アンド・ドロップします(第5.3.2.1項「UIコンポーネントの追加」を参照)。その後に、「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。それぞれの特定のコンポーネントの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

例6-1は、MAF AMXファイルで定義されているいくつかのページ・レイアウト要素を示しています。

注意: ページ・レイアウト要素は<amx>ネームスペースの下で宣言します。

例6-1 ページ・レイアウト・コンポーネントの定義

<amx:panelPage id="pp1">
   <amx:outputText id="outputText1"
                   value="Sub-Section Title 1" 
                   styleClass="adfmf-text-sectiontitle"/>
   <amx:panelFormLayout id="panelFormLayout1" labelPosition="start">
      <amx:panelLabelAndMessage id="panelLabelAndMessage1" label="Name">
         <amx:commandLink id="commandLink1" text="Jane Don" action="editname" />
      </amx:panelLabelAndMessage>
      <amx:panelLabelAndMessage id="panelLabelAndMessage2" label="Street Address">
         <amx:commandLink id="commandLink2"
                          text="123 Main Street"
                          action="editaddr" />
      </amx:panelLabelAndMessage>
      <amx:panelLabelAndMessage id="panelLabelAndMessage3" label="Phone">
         <amx:outputText id="outputText2" value="212-555-0123" />
      </amx:panelLabelAndMessage>
   </amx:panelFormLayout>
   <amx:outputText id="outputText3"
                   value="Sub-Section Title 2" 
                   styleClass="adfmf-text-sectiontitle" />
   <amx:panelFormLayout id="panelFormLayout2" labelPosition="start">
      <amx:panelLabelAndMessage id="panelLabelAndMessage4" label="Type">
         <amx:commandLink id="commandLink3" text="Personal" action="edittype" />
      </amx:panelLabelAndMessage>
      <amx:panelLabelAndMessage label="Anniversary">
         <amx:outputText id="outputText4" value="November 22, 2005" />
      </amx:panelLabelAndMessage>
   </amx:panelFormLayout>
   <amx:panelFormLayout id="panelFormLayout3" labelPosition="start">
      <amx:panelLabelAndMessage id="panelLabelAndMessage5" label="Date Created">
         <amx:outputText id="outputText5" value="June 20, 2011" />
      </amx:panelLabelAndMessage>
   </amx:panelFormLayout>
</amx:panelPage>

図6-1 デザインタイムのページ・レイアウト・コンポーネント

レイアウト・コンポーネントのビジュアル・プレゼンテーションを管理するには、標準Cascading Style Sheet (CSS)を使用します。CSSは、アプリケーション・プロジェクトのView Content/cssディレクトリにあり、デフォルトのCSSはMAFによって提供されています。詳細は、第6.6.1項「コンポーネント属性を使用したスタイルの定義方法」を参照してください。

MAF AMXを使用してiOSプラットフォーム用に作成されたユーザー・インタフェースは、言語環境が左から右、右から左のどちらであっても正しく表示されます。後者の場合、コンポーネントは画面の左側ではなく右側から表示されます。ポップアップ(第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)、パネル・アイテム、パネル・スプリッタ(第6.2.9項「パネル・スプリッタ・コンポーネントの使用方法」)などの一部のMAF AMXレイアウト・コンポーネントは、特定の右から左の動作を有効化するように構成できます。MAF AMXページの右から左の構成の詳細は、第6.4項「ジェスチャーの有効化」および第5.2.11項「ページ遷移スタイルの指定方法」を参照してください。

注意: 右から左のテキスト方向は、Androidプラットフォームではサポートされていません。

UIDemoという名前のMAFサンプル・アプリケーションは、ボタンなどのMAF AMX UIコンポーネントとともにレイアウト・コンポーネントを使用して一般的なパターンに従った一般的なレイアウトのいくつかを実現する方法を示しています。さらに、このサンプル・アプリケーションは、スタイルを使用してページ・レイアウトを特定のパターンに合せる方法を示します。UIDemoアプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。

6.2.1 表示コンポーネントの使用方法

表示(MAF AMXファイルのview要素)は、コア・ページ構造コンポーネントであり、MAF AMXファイルの作成時にそのファイルに自動的に挿入されます。このコンポーネントは、ページおよびその構造の階層表現を提供し、単一のMAF AMXページを表します。

詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.2.2 パネル・ページ・コンポーネントの使用方法

パネル・ページ(MAF AMXファイルのpanelPage要素)は、他のコンポーネントをレイアウトする画面のスクロール可能領域の定義を可能にするコンポーネントです。

デフォルトでは、MAF AMXページを作成するときに、Oracle Enterprise Pack for Eclipseによってパネル・ページ・コンポーネントが自動的に作成され、そのページに挿入されます。そのページにコンポーネントを追加すると、それらはパネル・ページ・コンポーネント内に挿入されます。

特定の領域(ページのヘッダーやフッターなど)をスクロールできないようにし、向きが変更されたときのストレッチを有効化するには、パネル・ページに対してファセット・コンポーネントを指定します。パネル・ページのヘッダー・ファセットには、各ページのナビゲーション・バーに配置されるタイトルが含まれています。パネル・ページに含めることができる他のタイプのファセット・コンポーネントの詳細は、第6.2.7項「ファセット・コンポーネントの使用方法」を参照してください。

例6-2は、MAF AMXファイルで定義されているpanelPage要素を示しています。このパネル・ページには、ヘッダー・ファセットが含まれています。

例6-2 パネル・ページの定義

<amx:panelPage id="pp1">
   <amx:facet name="header">
      <amx:outputText id="ot1" value="Welcome"/>
   </amx:facet>
</amx:panelPage>

詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.2.3 パネル・グループ・レイアウト・コンポーネントの使用方法

パネル・グループ・レイアウト・コンポーネントは、基本レイアウト・コンポーネントであり、その子を垂直方向または水平方向に配置します。また、子コンポーネントをページの横および下に流すラッピング・レイアウト・オプションがあります。

パネル・グループ・レイアウト・コンポーネントを作成するには、「パレット」を使用します。

パネル・グループ・レイアウト・コンポーネントを追加するには:

1. 「パレット」で、「MAF AMX」ペインを開き、MAF AMXページに「パネル・グループ・レイアウト」をドラッグ・アンド・ドロップします。

2. 目的の子コンポーネントをパネル・グループ・レイアウト・コンポーネントに挿入します。

3. 隣接する子コンポーネント間に間隔を追加するには、スペーサ(spacer)コンポーネントを挿入します(「パレット」のMAF AMXペインからも可能です)。

4. 「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

例6-3は、MAF AMXファイルで定義されているpanelGroupLayout要素を示しています。

例6-3 パネル・グループ・レイアウトの定義

<amx:panelGroupLayout styleClass="prod" id="pgl1">
   <amx:outputText styleClass="prod-label" value="Screen Size:" id="ot1"/>
</amx:panelGroupLayout>

6.2.3.1 スクロールの動作のカスタマイズ

パネル・グループ・レイアウト・コンポーネントのスクロール動作は、scrollPolicy属性によって定義され、auto(デフォルト)、noneまたはscrollに設定できます。この動作は、デフォルトでは、アクティブ・スキンに定義されているものになります。

アクティブ・スキンに定義されている動作にかかわらずスクロールを無効にするには、scrollPolicy属性をnoneに設定します。パネル・グループ・レイアウト・コンポーネントがスクロール可能でない場合は、この内容は制限されません。

アクティブ・スキンに定義されている動作にかかわらずスクロールを有効にするには、scrollPolicy属性をscrollに設定します。パネル・グループ・レイアウト・コンポーネントがスクロール可能な場合は、コンポーネントのサイズが制限されるときにスクロールが提供されます。

スクロールでは大量のメモリーが消費され、アプリケーションがクラッシュする可能性があるため、スクロールの使用は最小限にする必要があります。mobileAltaスキン(第6.6.3項「スキニングに関する必知事項」を参照)では、パネル・グループ・レイアウト、パネル・フォーム・レイアウト(第6.2.4項「パネル・フォーム・レイアウト・コンポーネントの使用方法」を参照)および表のレイアウト(第6.2.11項「表のレイアウト・コンポーネントの使用方法」を参照)のスクロールは無効化されています。アプリケーションではmobileAltaスキンを使用し、インスタンスでscrollPolicyをscrollに設定するのは必要な場合に限定することをお薦めします。パネル・フォーム・レイアウトおよび表のレイアウトのスクロールをシミュレートするには、スクロールが必要な場合に、スクロール可能なパネル・グループ・レイアウト・コンポーネントでそれらを囲みます。

6.2.4 パネル・フォーム・レイアウト・コンポーネントの使用方法

パネル・フォーム・レイアウト(panelFormLayout)コンポーネントは、コンポーネントをそれらのラベルおよびフィールドが水平方向に整列するように配置します。一般的に、パネル・フォーム・レイアウト・コンポーネントのメイン・コンテンツは、入力コンポーネント(入力テキストなど)および選択コンポーネント(選択肢など)で構成されています。label属性が定義されている子コンポーネントをパネル・フォーム・レイアウト・コンポーネント内に配置すると、その子コンポーネントのラベルおよびフィールドはパネル・フォーム・レイアウトの定義に基づいて整列およびサイズ設定されます。パネル・フォーム・レイアウト内では、ラベル領域は、フィールド領域の開始側上またはフィールド領域の上の独立した線上のどちらにも表示できます。独立した線は、パネル・フォーム・レイアウトのlabelPosition属性がtopStart、topCenterまたはtopEndに設定されている場合に使用されます。それ以外の場合は、ラベル領域はフィールド領域の開始側上に表示されます。ラベル領域内では、labelPosition属性によって、次のようにラベル・テキストを整列できる位置が制御されます。

• 開始側(labelPosition="start"またはlabelPosition="topStart")

• 中央(labelPosition="center"またはlabelPosition="topCenter")

• 終了側(labelPosition="end"またはlabelPosition="topEnd")

フィールド領域内では、fieldHalign属性によって、次のようにフィールド・コンテンツを整列できる位置が制御されます。

• 開始側(fieldHalign="start")

• 中央(fieldHalign="center")

• 終了側(fieldHalign="end")

パネル・フォーム・レイアウト内には、maxColumns属性およびrows属性を使用して、1つ以上の列に子コンポーネントを配置できます。これらの属性は、最適な複数列レイアウトを実現するために、labelWidth、fieldWidth、labelPositionおよびshowHorizontalDividersの各属性とともに使用する必要があります。

注意: 単一列レイアウトから複数列レイアウトに変更するには、maxColumns属性の設定値にかかわらず、rows属性の値を1より大きくする必要があります。rows属性が指定されている場合、maxColumns属性は、列の数をその数値を最大としてレイアウトを制限しますが、子コンポーネントを配置するにはこれと同数の列が必要です。

パネル・フォーム・レイアウト・コンポーネントを追加するには:

1. 「パレット」で、「パネル・フォーム・レイアウト」コンポーネントをMAF AMXページにドラッグ・アンド・ドロップします。

2. 「新規パネル・フォーム・レイアウト」ダイアログで、コンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

例6-4は、MAF AMXファイルで定義されているpanelFormLayout要素を示しています。

例6-4 パネル・フォーム・レイアウトの定義

<amx:panelFormLayout styleClass="prod" id="pfl1">
   <amx:panelLabelAndMessage label="Type" id="plm1">
      <amx:commandLink text="Personal" action="edittype" id="cl1"/>
   </amx:panelLabelAndMessage>
</amx:panelFormLayout>

6.2.5 パネル・ストレッチ・レイアウト・コンポーネントの使用方法

パネル・ストレッチ・レイアウト(panelStretchLayout)コンポーネントは、3つの子ファセット・コンポーネント(top、bottomおよびcenter)を管理します(例6-5を参照)。これらのファセットは、任意の数および組合せで使用できます。

例6-5 基本的なパネル・ストレッチ・レイアウトの定義

<amx:panelStretchLayout id="psl1">
   <amx:facet name="top">
   </amx:facet>
   <amx:facet name="center">
   </amx:facet>
   <amx:facet name="bottom">
   </amx:facet>
</amx:panelStretchLayout>

パネル・ストレッチ・レイアウト・コンポーネントを積み重ねた3つの長方形のセットで表現しようとする場合、次のことが適用されます。

• 一番上の長方形の高さは、topファセットに指定したとおりの高さで定義されます。

• 一番下の長方形の高さは、bottomファセットに指定したとおりの高さで定義されます。

• 残りの垂直領域が中央の長方形に割り当てられます。この長方形の高さがCenter.heightで定義した値より小さい場合で、panelStretchLayoutのscrollPolicy属性がscrollまたはautoのいずれかに設定されている場合は、スクロール・バーが追加されます。

パネル・ストレッチ・レイアウト・コンポーネントを追加するには、次の手順を実行します。

1. 「パレット」で、「パネル・ストレッチ・レイアウト」をMAF AMXページにドラッグ・アンド・ドロップします。

2. 作成した子ファセット・コンポーネントを確認し、必要に応じて、一部を削除します。

3. 「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.2.6 パネル・ラベルおよびメッセージ・コンポーネントの使用方法

パネル・ラベルおよびメッセージ(panelLabelAndMessage)コンポーネントは、label属性が定義されていないコンポーネントを配置するために使用します。これらのコンポーネントとしては、通常、出力テキスト、ボタンまたはリンクがあります。

パネル・ラベルおよびメッセージ・コンポーネントを追加するには:

1. 「パレット」のMAF AMXペインで、「パネル・ラベルおよびメッセージ」コンポーネントを「パネル・グループ・レイアウト」コンポーネントにドラッグ・アンド・ドロップします。

2. 「新規パネル・ラベルおよびメッセージ」ダイアログで、コンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

例6-4は、MAF AMXファイルで定義されているpanelLabelAndMessage要素を示しています。label属性が、子コンポーネントに対して使用されています。

例6-6 パネル・ラベルおよびメッセージの定義

<amx:panelLabelAndMessage label="Phone" id="plm1">
   <amx:outputText value="212-555-0123" id="ot1"/>
</amx:panelLabelAndMessage>

6.2.7 ファセット・コンポーネントの使用方法

ファセット(facet)コンポーネントは、親レイアウト・コンポーネント上に、ヘッダーやフッターなど任意の名前のファセットを定義するために使用します。ファセットの位置およびレンダリングは、親コンポーネントによって決定されます。

MAF AMXページのヘッダーは、通常、ヘッダー、プライマリおよびセカンダリの各ファセットと組み合せたパネル・ページ・コンポーネント(第6.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)によって表されます。

• ヘッダー・ファセット: ページ・タイトルが含まれています。

• プライマリ・アクション・ファセット: ヘッダー・バーの左隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。

• セカンダリ・アクション・ファセット: ヘッダー・バーの右隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。

MAF AMXページのフッターは、フッター・ファセットと組み合せたパネル・ページ・コンポーネント(第6.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)によって表されます。

• フッター・ファセット: コンテンツ領域の下に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。

例6-7は、パネル・ページ・コンテナ内で宣言されているfacet要素を示しています。ファセットのタイプは、常にそのname属性で定義されます(表6-2を参照)。

例6-7 ファセットの定義

<amx:panelPage id="pp1">
   <amx:facet name="footer">
      <amx:commandButton id="cb2" icon="folder.png"
                         text="Move (#{myBean.mailcount})"
                         action"move"/>
   </amx:facet>
</amx:panelPage>

表6-2は、特定の親コンポーネントとともに使用できる事前定義済ファセット・タイプを示しています。

表6-2 ファセット・タイプと親コンポーネント

親コンポーネント	ファセット・タイプ(名前)
パネル・ページ(panelPage)	header、footer、primary、secondary
リスト・ビュー(listView)	header、footer
カルーセル(carousel)	nodeStamp
パネル・スプリッタ(panelSplitter)	navigator
パネル・ストレッチ・レイアウト(panelStretchLayout)	top、center、bottom
データ視覚化コンポーネント。 詳細は、第6.5項「データ視覚化の指定」を参照してください。	dataStamp、seriesStamp、overview、rows (NBoxに適用可能)、columns (NBoxに適用可能)、cells (NBoxに適用可能)、icon (NBoxNodeに適用可能)、indicator (NBoxNodeに適用可能)

ファセット・コンポーネントを追加するには:

「アウトライン」ペインに表示されるコンテキスト・メニューを使用して、ファセット・コンポーネントを別のコンポーネントの子として追加できます。コンテキスト・メニューには、選択した親コンポーネントで有効なオプションが表示されます。

ファセットを追加するには、「アウトライン」または「ソース」エディタで親コンポーネントを選択してから、次のいずれかの手順を実行します。

• 図6-2に示すとおり、「アウトライン」でamx:PanelPageエントリを右クリックすると、ファセットを入力できます。

  図6-2 パネル・ページにファセットを追加するためのポップアップ・メニューの使用方法

  
  

あるいは、次のようにします。

1. 「パレット」で、ファセット・コンポーネントを表6-2に示す別のコンポーネントにドラッグ・アンド・ドロップします。

2. 「プロパティ」ウィンドウで、コンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.2.8 ポップアップ・コンポーネントの使用方法

ポップアップ(popup)コンポーネントを使用して、ポップアップ・ウィンドウを表示します。このコンポーネントは、ビュー・コンポーネントの子として宣言できます。

ポップアップ・コンポーネントとともに次の操作を使用できます。

• ポップアップを閉じる動作(closePopupBehavior)の操作は、クライアントによってトリガーされるイベントに応答してポップアップを閉じる宣言的な方法です。

• ポップアップ表示動作(showPopupBehavior)の操作は、ポップアップ表示動作のtype属性を使用して指定されたクライアントによってトリガーされるイベントに応答してポップアップを表示する宣言的な方法です。

  ポップアップ表示動作のpopupId属性には、その親コンポーネントに関連するポップアップ・コンポーネントの一意の識別子を指定します。ポップアップ表示動作のalignId属性には、そのポップアップの位置合せを行う際の基準となるUIコンポーネントの一意の識別子を指定します。識別子を手動で設定するのは、手間がかかり、さらに無効な参照が発生する可能性もあるため、これらの2つの属性の値は標準の「プロパティ」ウィンドウと統合されているエディタを使用して設定します。これらの識別子を検証するために特別に定義されている監査ルールがあります(第5.3.2.4章「要素識別子とその監査に関する必知事項」を参照)。

  ポップアップ表示動作のdecoration属性では、指定されているalignIdと一致するコンポーネントを指すアンカーを持つようにポップアップを構成できます。これは、decoration属性をanchorに設定することで実行します(デフォルト値はsimple)。

  
  

  注意: alignId属性を使用するためにdecoration="anchor"を定義する必要はありません。decoration="anchor"を使用する際に、alignId属性が指定されていないかalignIdで一致するものが見つからない場合は、decorationはsimpleにデフォルト設定されるため、ポップアップ・コンポーネントには最小限の装飾が行われます。

  
  

  ポップアップ表示動作のalign属性に設定した値は、その配置を満たす十分な領域がある場合に、ポップアップ・コンポーネントが配置されるべき位置を示します。十分な領域がない場合は、MAFによって別の位置が選択されます。

  
  

  ヒント: ポップアップを画面の中央に配置するには、パネル・ページ・コンポーネントのalignId属性を設定してから、align="center"を使用してください。

  
  

  ポップアップ表示動作のコンポーネントの属性およびその値の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

例6-8は、MAF AMXファイルで定義されているpopup要素およびshowPopupBehavior要素を示しています。

例6-8 ポップアップおよびポップアップ表示動作の定義

<amx:view>
   <amx:panelPage id="panelPage1">
      <amx:commandButton id="commandButton1" text="Show Popup">
         <amx:showPopupBehavior popupId="popup1" type="action"
                                align="topStart" alignId="panelPage1" 
                                decoration="anchor"/>
      </amx:commandButton>
   </amx:panelPage>
   <amx:popup id="popup1" 
              animation="slideUp" 
              autoDismiss="true"
              backgroundDimming="off"/>
</amx:view>

ポップアップ・コンポーネントは、ユーザー入力エラーが発生したときに検証メッセージを表示できます。詳細は、第6.9項「入力の検証」を参照してください。

ポップアップの子を設定するには、次の手順を実行します。

1. 「アウトライン」ペインでpopup要素を選択し、マウスの右ボタンをクリックします。

2. ポップアップ・コンポーネントのリストから「子の追加」を選択します(図6-3を参照)。

   図6-3 ポップアップの子属性のリストからの選択

   
   

3. このポップアップ表示動作が起動したときに表示されるポップアップ・コンポーネントを選択します。

UIDemoという名前のMAFサンプル・アプリケーションは、ポップアップ・コンポーネントの使用方法と、スタイルを適用してページ・レイアウトを特定のパターンに合せる方法を示しています。UIDemoアプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。

6.2.9 パネル・スプリッタ・コンポーネントの使用方法

パネル・スプリッタ(panelSplitter)コンポーネントは、左側にあるナビゲーション・ペインで制御可能な複数のコンテンツ領域を表示するために使用します。パネル・スプリッタ・コンポーネントは、通常、表示サイズが大きいタブレット・デバイスで使用されます。これらのコンポーネントは、通常、表示領域の左側にリストが、右側にコンテンツがある場合に使用されます。

パネル・スプリッタには、MAF AMXページにパネル・スプリッタをドラッグ・アンド・ドロップすると自動的に生成されるナビゲータ・ファセット(第6.2.7項「ファセット・コンポーネントの使用方法」を参照)、およびパネル・アイテム・コンポーネントを含めることができます。パネル・アイテム(panelItem)コンポーネントは、パネル・スプリッタのコンテンツ領域を表します。各パネル・スプリッタ・コンポーネントには少なくとも1つのパネル・アイテムが必要なため、パネル・スプリッタが作成されるときにパネル・アイテムがパネル・スプリッタに自動的に追加されます。各パネル・アイテム・コンポーネントには、パネル・グループ・レイアウトに含めることができるどのようなコンポーネントも含めることができます(第6.2.3項「パネル・グループ・レイアウト・コンポーネントの使用方法」を参照)。

「パネル・スプリッタ」の左側は、ナビゲータ・ファセット(navigator)によって表されます。これは、アニメーション付きの複数のコンテンツのみが必要とされる場合(たとえば、異なるボタンを選択してコンテンツを切り替えるときにアニメーションを必要とする選択ボタン付きの複数コンテンツ領域を描画する場合)のオプションです。横モードの場合、このファセットがレンダリングされます。縦モードの場合、ボタンはコンテンツ領域の上に配置され、クリックされたときにこのファセットのコンテンツがポップアップ内で起動されます。

iOSプラットフォーム用の開発を行う場合、右から左の言語環境に対応するようにパネル・スプリッタとパネル・アイテムを構成するには、それらのanimation属性をslideStart、slideEnd、flipStart、flipEndのいずれかに設定します。パネル・アイテム・コンポーネントのanimation属性は、パネル・スプリッタのanimation属性をオーバーライドします。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

例6-9は、MAF AMXファイルで定義されているpanelSplitter要素を、子コンポーネントとして使用されているnavigatorファセットとともに示しています。

例6-9 ナビゲータを含むパネル・スプリッタの定義

<amx:panelSplitter id="ps1"
               selectedItem="#{bindings.display.inputValue}"
               animation="flipEnd">
   <amx:facet name="navigator">
      <amx:listView id="lv1"
                    value="#{bindings.data.collectionModel}" 
                    var="row"
                    showMoreStrategy="autoScroll"
                    bufferStrategy="viewport>
         ...
      </listView>
   </facet>
   <amx:panelItem id="x">
      <amx:panelGroupLayout>
         ...
      </panelGroupLayout>
   </panelItem>
   <amx:panelItem id="y">
      <amx:panelGroupLayout>
         ...
      </panelGroupLayout>
   </panelItem>
</panelSplitter>

その他の例は、「ファイル」→「新」→「MAFサンプル」にあるUIDemoアプリケーションを参照してください。

詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.2.10 スペーサ・コンポーネントの使用方法

スペーサ(spacer)コンポーネントを使用して、MAF AMXページでコンポーネントを区切るために空白領域を作成します。spacerのheight属性(垂直空白用)およびwidth属性(水平空白用)を使用して、縦または横の空白をページに組み込むことができます。

スペーサ・コンポーネントを追加するには、次の手順を実行します。

1. 「コンポーネント」ウィンドウで、「スペーサ」をMAF AMXページにドラッグ・アンド・ドロップします。

2. 「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

例6-10は、MAF AMXファイルで定義されているspacer要素を示しています。

例6-10 スペーサの定義

<amx:outputText id="ot1" value="This is a long piece of text for this page..."/>
<amx:spacer id="s1" height="10"/>
<amx:outputText id="ot2" value="This is some more lengthy text..."/>

6.2.11 表のレイアウト・コンポーネントの使用方法

表のレイアウト(tableLayout)コンポーネントは、セルを含む行で構成される一般的な表のフォーマットでデータを表示するために使用します。

行のレイアウト(rowLayout)コンポーネントは、表のレイアウトの単一の行を表します。表のレイアウト・コンポーネントには、1つ以上の行のレイアウト・コンポーネント、または行のレイアウト・コンポーネントを生成できるイテレータ・コンポーネントのいずれかが含まれている必要があります。

セル・フォーマット(cellFormat)コンポーネントは、行のレイアウトのセルを表します。行のレイアウト・コンポーネントには、1つ以上のセル・フォーマット・コンポーネント、セル・フォーマット・コンポーネントを生成できるイテレータ・コンポーネント、属性リスト・イテレータ・コンポーネントまたはファセット定義コンポーネントのいずれかが含まれている必要があります。

表のレイアウト構造では、セル・コンテンツで割合による高さを使用したり、表構造全体に高さをまとめて割り当てることはできません。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスに記載されている次の属性の説明を参照してください。

• 表のレイアウト・コンポーネントのlayout属性およびwidth属性

• 行のレイアウト・コンポーネントのwidth属性およびheight属性

表のレイアウト・コンポーネントを追加するには:

1. 「コンポーネント」ウィンドウで、「表のレイアウト」をMAF AMXページにドラッグ・アンド・ドロップします。

2. 必要な数の行のレイアウト・コンポーネント、イテレータ・コンポーネント、属性リスト・イテレータ・コンポーネントまたはファセット定義の子コンポーネントを表のレイアウト・コンポーネントに挿入します。

3. セル・フォーマット・コンポーネント、イテレータ・コンポーネント、属性リスト・イテレータ・コンポーネントまたはファセット定義の子コンポーネントをそれぞれの行のレイアウト・コンポーネントに挿入します。

4. 「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

例6-11は、MAF AMXファイルで定義されているtableLayout要素およびその子を示しています。

例6-11 表のレイアウトの定義

<amx:tableLayout id="tableLayout1"
                 rendered="#{pageFlowScope.pRendered}"
                 styleClass="#{pageFlowScope.pStyleClass}"
                 inlineStyle="#{pageFlowScope.pInlineStyle}"
                 borderWidth="#{pageFlowScope.pBorderWidth}"
                 cellPadding="#{pageFlowScope.pCellPadding}"
                 cellSpacing="#{pageFlowScope.pCellSpacing}"
                 halign="#{pageFlowScope.pHalign}"
                 layout="#{pageFlowScope.pLayoutTL}"
                 shortDesc="#{pageFlowScope.pShortDesc}"
                 summary="#{pageFlowScope.pSummary}"
                 width="#{pageFlowScope.pWidth}">
   <amx:rowLayout id="rowLayout1">
      <amx:cellFormat id="cellFormatA" rowSpan="2" halign="center">
         <amx:outputText id="otA" value="Cell A"/>
      </amx:cellFormat>
      <amx:cellFormat id="cellFormatB" rowSpan="2" halign="center">
         <amx:outputText id="otB" value="Cell B (wide content)"/>
      </amx:cellFormat>
      <amx:cellFormat id="cellFormatC" rowSpan="2" halign="center">
         <amx:outputText id="otC" value="Cell C"/>
      </amx:cellFormat>
   </amx:rowLayout>
   <amx:rowLayout id="rowLayout2">
      <amx:cellFormat id="cellFormatD" halign="end">
         <amx:outputText id="otD" value="Cell D"/>
      </amx:cellFormat>
      <amx:cellFormat id="cellFormatE">
         <amx:outputText id="otE" value="Cell E"/>
      </amx:cellFormat>
   </amx:rowLayout>
</amx:tableLayout>

6.2.12 デック・コンポーネントの使用方法

デック(deck)コンポーネントは、一度に1つの子コンポーネントを示すコンテナを表します。表示されている1つの子コンポーネント(displayedChild属性で定義)から別の子コンポーネントへの遷移は、遷移(transition)操作で有効になります。遷移はアニメーションの形態で行うことができます。遷移の詳細は、第5.2.11項「ページ遷移スタイルの指定方法」を参照してください。

デックは、前後に移動できます。

デック・コンポーネントを追加するには、次の手順を実行します。

1. 「コンポーネント」ウィンドウで、「デック」をMAF AMXページにドラッグ・アンド・ドロップします。

2. 必要な数の遷移操作および子UIコンポーネントをデック・コンポーネントに挿入します。

3. 「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

例6-12は、MAF AMXファイルで定義されているdeck要素およびその子を示しています。デック・コンポーネントのdisplayedChild属性は、表示する子コンポーネントIDを定義します。通常、これは、ボタンを1つ選択などのコンポーネントまたはその他の選択コンポーネントによって制御されます。

例6-12 デックの定義

<amx:deck id="deck1"
             rendered="#{pageFlowScope.pRendered}"
             styleClass="#{pageFlowScope.pStyleClass}"
             inlineStyle="width:95px;height:137px;overflow:hidden;
                                    #{pageFlowScope.pInlineStyle}"
             landmark="#{pageFlowScope.pLandmark}"
             shortDesc="#{pageFlowScope.pShortDesc}"
             displayedChild="#{pageFlowScope.pDisplayedChild}">

   <amx:transition triggerType="#{pageFlowScope.pTriggerType}" 
                   transition="#{pageFlowScope.pTransition}"/>
   <amx:transition triggerType="#{pageFlowScope.pTriggerType2}"
                   transition="#{pageFlowScope.pTransition2}"/>
   <amx:commandLink id="linkCardBack1" text="Card Back">>
     <amx:setPropertyListener from="linkCardA"
                              to="#{pageFlowScope.pDisplayedChild}"/>
   </amx:commandLink>
   <amx:commandLink id="linkCardA1" text="Card Front A">
   <amx:setPropertyListener id="setPL1"
                            from="linkCardB"
                            to="#{pageFlowScope.pDisplayedChild}"/>
   </amx:commandLink>
   <amx:commandLink id="linkCardB1" text="Card Front B">
      <amx:setPropertyListener id="setPL2"
                               from="linkCardC"
                               to="#{pageFlowScope.pDisplayedChild}"/>
   </amx:commandLink>
   <amx:commandLink id="linkCardC1" text="Card Front C">
      <amx:setPropertyListener id="setPL3"
                               from="linkCardD"
                               to="#{pageFlowScope.pDisplayedChild}"/>
   </amx:commandLink>
   <amx:commandLink id="linkCardD1" text="Card Front D">
      <amx:setPropertyListener id="setPL4"
                               from="linkCardE"
                               to="#{pageFlowScope.pDisplayedChild}"/>
   </amx:commandLink>
   <amx:commandLink id="linkCardE1" text="Card Front E">
      <amx:setPropertyListener id="setPL5"
                               from="linkCardBack"
                               to="#{pageFlowScope.pDisplayedChild}"/>
   </amx:commandLink>
</amx:deck>

詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.2.13 フラグメント・コンポーネントの使用方法

フラグメント(fragment)コンポーネントによってMAF AMXページ・コンテンツの共有が可能になります。このコンポーネントは、MAF AMXフラグメント・ファイルとともに使用されます。詳細は、第5.3.1.6項「ページ・コンテンツの共有」を参照してください。

フラグメント・コンポーネントを追加するには、次の手順を実行します。

1. 「コンポーネント」ウィンドウで、「フラグメント」をMAF AMXページにドラッグ・アンド・ドロップします。

2. 「フラグメントの挿入」ダイアログを使用して、フラグメントのSrc属性をフラグメント・ファイル(.amxf)に設定します。

3. オプションで、「構造」ビューを使用して、属性、属性リスト、ファセットなどの子コンポーネントを追加します。

4. 「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

例5-12「MAF AMXページのフラグメント」は、MAF AMXページに追加されたfragment要素を示しています。例5-11「フラグメントの定義」は、対応するMAF AMXフラグメント・ファイルを示しています。

FragmentDemoという名前のMAFサンプル・アプリケーションは、フラグメントの作成および使用方法を示しています。このサンプル・アプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。

6.3 UIコンポーネントの作成と使用方法

MAF AMXアプリケーション機能を開発する際に、次のUIコンポーネントを使用できます。

• 入力テキスト(第6.3.1項「入力テキスト・コンポーネントの使用方法」を参照)

• 入力数値スライダ(第6.3.2項「入力数値スライダ・コンポーネントの使用方法」を参照)

• 入力日(第6.3.3項「入力日コンポーネントの使用方法」を参照)

• 出力テキスト(第6.3.4項「出力テキスト・コンポーネントの使用方法」を参照)

• ボタン(第6.3.5項「ボタンの使用方法」を参照)

• リンク(第6.3.6項「リンクの使用方法」を参照)

• イメージ(第6.3.7項「イメージの表示方法」を参照)

• チェックボックス(第6.3.8項「チェックボックス・コンポーネントの使用方法」を参照)

• チェックボックスを複数選択(第6.3.10項「チェックボックスを複数選択コンポーネントの使用方法」を参照)

• 選択肢を複数選択(第6.3.14項「選択肢を複数選択コンポーネントの使用方法」を参照)

• ブール・スイッチ(第6.3.9項「ブール・スイッチ・コンポーネントの使用方法」を参照)

• 選択肢(第6.3.13項「選択肢コンポーネントの使用方法」を参照)

• 選択ボタン(第6.3.11項「選択ボタン・コンポーネントの使用方法」を参照)

• ラジオ・ボタン(第6.3.12項「ラジオ・ボタン・コンポーネントの使用方法」を参照)

• リスト・ビュー(第6.3.15項「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」を参照)

• カルーセル(第6.3.16項「カルーセル・コンポーネントの使用方法」を参照)

• フィルム・ストリップ(第6.3.17項「フィルム・ストリップ・コンポーネントの使用方法」を参照)

• Verbatim (第6.3.18項「Verbatimコンポーネントの使用方法」を参照)

• 出力HTML (第6.3.19項「出力HTMLコンポーネントの使用方法」を参照)

• イテレータ(第6.3.20項「反復の有効化方法」を参照)

MAF AMXアプリケーション機能を開発する際は、UIコンポーネントの子として、操作、リスナー・タイプ・コンポーネント、コンバータなど、次のその他のコンポーネントも使用できます。

• バンドルのロード(第6.3.21項「リソース・バンドルのロード方法」を参照)

• アクション・リスナー(第6.3.22項「アクション・リスナーの使用方法」を参照)

• プロパティ・リスナーの設定(第6.3.23項「プロパティ・リスナーの設定の使用方法」を参照)

• 日時の変換(第6.3.24項「日時の変換方法」を参照)

• 数値の変換(第6.3.25項「数値の変換方法」を参照)

• ナビゲーション・ドラッグ動作(第6.3.26項「ドラッグ・ナビゲーションの有効化」を参照)

• ロード・インジケータ動作(第6.3.27項「ロード・インジケータの使用方法」を参照)

UIコンポーネントを追加するには、「パレット」からMAF AMXページにそのコンポーネントをドラッグ・アンド・ドロップします(第5.3.2.1項「UIコンポーネントの追加」を参照)。その後に、「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。それぞれの特定のコンポーネントの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

注意: MAF AMXページで、レイアウト・コンポーネント内にUIコンポーネントを配置します(第6.2項「ページ・レイアウトの設計」を参照)。<dvtm>ネームスペースの下で宣言するデータ視覚化コンポーネントを除き、UI要素は<amx>>ネームスペースの下で宣言します。

いくつかのUIコンポーネントにはイベント・リスナーを追加できます。詳細は、第6.10項「イベント・リスナーの使用方法」を参照してください。イベント・リスナーは、iOSとAndroidのどちらのデバイスでもMAF AMX実行時の記述のためにコンポーネントに適用できますが、それらのリスナーはデザインタイムでは何の効果も持ちません。

これらのUIコンポーネントにおけるアクセシビリティのサポートの詳細は、第6.8項「MAFのアクセシビリティのサポートの理解」を参照してください。

MAF AMXを使用してiOSプラットフォーム用に作成されたユーザー・インタフェースは、言語環境が左から右、右から左のどちらであっても正しく表示されます。後者の場合、コンポーネントは画面の左側ではなく右側から表示されます。

注意: MAFは、デザインタイムにEL式を評価しません。コンポーネントの属性の値が式に設定されている場合、この値はOracle Enterprise Pack for Eclipseのプレビューのように表示され、このコンポーネントの表示方法は実行時によって異なる場合があります。

CompGalleryという名前のMAFサンプル・アプリケーションは、MAF AMX UIコンポーネントの作成および構成方法を示しています。UIDemoという名前のもう1つのサンプル・アプリケーションは、MAF AMXページでのコンポーネントのレイアウト方法を示しています。これらのサンプル・アプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。

6.3.1 入力テキスト・コンポーネントの使用方法

入力テキスト(inputText)コンポーネントは、編集可能テキスト・フィールドを表します。使用可能な入力テキスト・コンポーネントのタイプは次のとおりです。

• 標準単一行入力テキストで、これは、MAF AMXファイルのinputText要素で宣言されます。

  <amx:inputText id="text1" 
                    label="Text Input:" 
                    value="#{myBean.text}" />
  

• パスワード入力テキスト:

  <amx:inputText id="text1" 
                 label="Password Input:"
                 value="#{myBean.text}"  
                 secret="true" />
  

• 複数行入力テキスト(テキスト領域とも呼ばれる):

  <amx:inputText id="text1" 
                 label="Textarea:"
                 value="#{myBean.text}"
                 simple="true"
                 rows="4" />
  

図6-4は、「プレビュー」ペインに表示されている入力テキスト・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。

<amx:inputText id="inputText1"
               label="Input Text"
               value="text"/>

図6-4 デザインタイムの入力テキスト

inputType属性によって、コンポーネントでユーザー入力がどのように(テキスト(デフォルト)、電子メール・アドレス、数値、電話銀号、URLのいずれかとして)解釈されるのかを定義できます。これらの入力タイプは、HTML5によって許容される値に基づいています。

入力テキスト・コンポーネントに入力される日時値とともに数値の変換を有効にするには、数値の変換(第6.3.25項「数値の変換方法」を参照)および日時の変換(第6.3.24項「日時の変換方法」を参照)コンポーネントを使用します。

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

いくつかのモバイル・デバイスでは、エンド・ユーザーが入力テキスト・フィールドをタップすると、キーボードが表示(スライドアップ)されます。入力テキストがMAF AMXページの唯一のコンポーネントである場合、ページがロードされるときに、デフォルトで入力フォーカスはこのフィールド上に配置され、キーボードが表示されます。

複数行入力テキストは、それが唯一のコンポーネントである場合、セカンダリ・ページに表示されることがあります。その場合、ページがロードされてキーボードが表示されたときに複数行入力テキストがフォーカスを受け取ります。

iOSデバイスとAndroidデバイスでは、入力テキスト・コンポーネントのレンダリングおよび動作は異なります。iPhoneおよびiPadでは、入力テキスト・コンポーネントが表示されるときに境界線がある場合とない場合があります。

入力テキスト・コンポーネントを作成する際は、次の点を考慮してください。

• コンテンツを入力または編集するには、エンド・ユーザーはフィールド内をタップする必要があります。それにより、タップした場所に点滅する挿入カーソルが表示され、エンド・ユーザーがコンテンツを編集できるようになります。フィールドにコンテンツが含まれていない場合、挿入カーソルはフィールドの先頭に配置されます。

• 入力テキスト・コンポーネントによって表されるフィールドには、通常、プロンプトとして使用されるデフォルト・テキストが含まれていることがあります。エンド・ユーザーがそのようなフィールド内でキーボードのキーをタップすると、編集モードになったときにそのデフォルト・テキストがクリアされます。この動作は、入力テキストのhintText属性を使用して有効化および構成されます。

• 入力テキスト・コンポーネントによって表されるフィールドには、選択済の外観はありません。選択は、フィールド内の点滅する挿入カーソルによって示されます。

• エンド・ユーザーがフィールドに収まる数を超えたテキストを入力すると、タイピングの続行に従って一度に1文字ずつテキスト・コンテンツが左にシフトします。

• 複数行入力テキスト・コンポーネントは、任意の高さの長方形としてレンダリングされます。このコンポーネントでは、コンテンツが大きすぎてフィールドの境界内に収まらない場合のスクロールがサポートされています。テキスト領域が一杯になるとテキストの行が上にスクロールし、新しい行のテキストが追加されます。指定された表示領域に表示できる数よりも多くの行がある場合、エンド・ユーザーは上または下にフリックしてテキストの行をスクロールできます。コンポーネント内にスクロールバーが表示されてその領域がスクロール可能であることを示します。

• パスワード・フィールドは入力された各文字を一時的にエコーし、その後、その文字をドットに変換してパスワードを保護します。

• iOSでの入力テキスト・コンポーネントの外観および動作は、カスタマイズできます(第6.3.1.1項「入力テキスト・コンポーネントのカスタマイズ」を参照)。

6.3.1.1 入力テキスト・コンポーネントのカスタマイズ

MAF AMXでは、iOSデバイスでの入力の大文字化および修正をサポートしており、さらに「実行」ボタンまたは「検索」ボタンとして表示および機能し(図6-6参照)、単一行入力テキスト・コンポーネントではDataChangeEventをトリガーするモバイル・デバイスのソフト・キーパッドの右下にある「return」ボタン(図6-5を参照)をオーバーライドする機能もサポートしています。

図6-5 実行時のiOSデバイスの「return」ボタン

図6-6 実行時のiOSの「実行」ボタンおよび「検索」ボタン

表6-3に、入力テキスト・コンポーネントの属性をリストしますが、これらの属性を使用して、そのコンポーネントの外観および動作と、入力テキストによって表されるフィールドへの値の入力に使用されるソフト・キーパッドをカスタマイズできます。

表6-3 入力テキスト・コンポーネントの入力およびカスタマイズ属性

属性	値	説明
keyboardDismiss	normal: オペレーティング・システムのデフォルトを使用します。 go: 動作のトリガーのように動作するフィールドをリクエストします。 search: 参照をトリガーする検索フィールドのように動作するフィールドをリクエストします。	テキスト・フィールドを使用する方法を示します。 goまたはsearchを指定した場合、キーパッドを無効にすることで、iOSおよびAndroidの両方のプラットフォームで入力がぼやけた状態になります。 iOSの「実行」ボタンおよび「検索」ボタンのサポートは変更されたり、任意の時点で終了される可能性がありますが、一部のiOSデバイスのキーパッドは強化機能を備えています。たとえば、単一行テキスト・フィールドに「return」ボタンを表示するかわりに、「実行」ボタンまたは「検索」ボタンですでに置き換えられている可能性があります。
autoCapitalize	auto: オペレーティング・システムのデフォルトを使用します。 sentences: 入力する文を大文字で始めるようにリクエストします。 none: 入力に大文字化が自動的に適用されないようにリクエストします。 words: 入力する単語を大文字で始めるようにリクエストします。 characters: 入力として入力された各文字が大文字化されるようにリクエストします。	入力テキストによって表されるフィールドの編集中に、iOSで値を大文字表記するための特別な処理をリクエストします。 このプロパティの設定はAndroidには影響しません。
autoCorrect	auto: オペレーティング・システムのデフォルトを使用します。 on: 入力の自動修正サポートをリクエストします。 off: 入力の自動修正の無効化をリクエストします。	入力テキストによって表されるフィールドの編集中に、iOSで値を修正するための特別な処理をリクエストします。 このプロパティの設定はAndroidには影響しません。

iOSデバイスのシミュレータでは、自動大文字化および自動修正のサポートが限定されているため、この機能をiOSデバイスでテストする必要があります。

6.3.2 入力数値スライダ・コンポーネントの使用方法

入力数値スライダ(inputNumberSlider)コンポーネントは、キーを使用して値を入力するかわりにスライダを使用して値の範囲から数値を選択できるようにします。スライダの溝またはトラックの塗り潰されている部分が、現在の値を視覚的に表しています。

スライダの値を数値的に示すには、出力または入力テキスト・コンポーネントとともに入力数値スライダを使用できます。入力テキスト・コンポーネントではスライダ値を直接入力することもできます。エンド・ユーザーが入力テキスト・フィールドをタップすると、数値モードのキーボードがスライドアップします。このキーボードは、スライドダウン・ボタンを使用するか、スライダ・コンポーネントからタップすることにより消去できます。

入力数値スライダ・コンポーネントは、常に、コンポーネントの定義済範囲内の最大値および最小値を表示します。

注意: 入力数値スライダ・コンポーネントは、正確な数値入力が必要な場合や値の範囲が広い場合(たとえば、0から1000)は使用しないでください。

例6-13は、MAF AMXファイルで定義されているinputNumberSlider要素を示しています。

例6-13 入力数値スライダの定義

<amx:inputNumberSlider id="slider1" value="#{myBean.count}"/>

図6-7は、「プレビュー」ペインに表示されている入力数値スライダ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。

<amx:inputNumberSlider id="inputNumberSlider1"
                       label="Input Number"
                       minimum="0"
                       maximum="20"
                       stepSize="1"
                       value="10"/>

図6-7 デザインタイムの入力数値スライダ

入力数値スライダ・コンポーネントに入力される数値の変換を有効にするには、数値の変換コンポーネント(第6.3.25項「数値の変換方法」を参照)を使用します。

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

他のMAF AMX UIコンポーネントと同様に、入力数値スライダ・コンポーネントには通常の状態と選択済状態があります。コンポーネントは、いつでもタッチされたときに選択済状態になります。エンド・ユーザーは、スライダ値を変更するには、タッチしてからスライダ・ボタンを操作します。

入力数値スライダ・コンポーネントには、オプションのimageLeft属性およびimageRight属性があり、これらは、エンド・ユーザーに追加情報を提供するためにスライダのいずれかの側に表示可能なイメージを示します。

6.3.3 入力日コンポーネントの使用方法

入力日(inputDate)コンポーネントは、日付を入力するためのポップアップ入力フィールドを提示します。デフォルトの日付フォーマットは、現在のロケールに適切な省略の日付フォーマットです。たとえば、米語(ENU)のデフォルトの書式はmm/dd/yyです。inputType属性によって、コンポーネントが入力として日付、時刻または日時を受け入れるのかどうかが定義されます。タイムゾーンは、モバイル・デバイスに対して構成されているタイムゾーンに依存します。したがって、デバイスに関連しています。実行時に、入力日コンポーネントにはそのデバイスのネイティブのルック・アンド・フィールがあります。

例6-14は、MAF AMXファイルで定義されているinputDate要素を示しています。このコンポーネントのinputType属性は、デフォルト値のdateに設定されています。value属性が読取り専用の場合、EL式またはその他のタイプの値に設定でき、valueが読取り専用でない場合は、EL式としてのみ指定できます。

例6-14 入力日の定義

<amx:inputDate id="inputDate1" label="Input Date" value="#{myBean.date}"/>

詳細は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• W3Cによって定義されているHTML5のグローバル日付と時刻

• 「ファイル」→「新」→「MAFサンプル」にあるCompGallery

6.3.4 出力テキスト・コンポーネントの使用方法

MAF AMXは、テキストを表示するラベルとして使用するための出力テキスト(outputText)コンポーネントを提供しています。

例6-15は、MAF AMXファイルで定義されているoutputText要素を示しています。

例6-15 出力テキストの定義

<amx:outputText id="ot1"
                value="output" 
                styleClass="#{pageFlowScope.pStyleClass}"/>

図6-8は、「プレビュー」ペインに表示されている出力テキスト・コンポーネントを示しています。

図6-8 デザインタイムの出力テキスト

出力テキスト・コンポーネントの数値および日時関連データの変換を容易にするには、数値の変換(第6.3.25項「数値の変換方法」を参照)および日時の変換(第6.3.24項「日時の変換方法」を参照)コンバータを使用します。

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGalleryおよびUIDemo

6.3.5 ボタンの使用方法

ボタン(commandButton)コンポーネントは、アクション(たとえば、保存、取消し、送信)をトリガーするため、およびアプリケーション内で他のページへのナビゲーション(たとえば、戻る。第6.3.5.7項「戻るボタン・ナビゲーションの有効化」を参照)を有効化するために使用します。

ボタンは、次の方法のいずれかで使用できます。

• テキスト・ラベル付きボタン。

• テキスト・ラベルおよびイメージ・アイコン付きボタン。

  
  

  注意: アイコン・イメージと配置(テキスト・ラベルの左または右)を定義できます。

  
  

• イメージ・アイコンのみが付いたボタン(たとえば、レコードを追加または削除するための + および - ボタン)。

MAFでは、次の3つの表示領域に対して1つのデフォルト・ボタン・タイプがサポートされています。

1. 最上部ヘッダー・バーに表示されるボタンで、MAF AMXページでは、ヘッダーは、ヘッダー、プライマリおよびセカンダリの各ファセットと組み合せたパネル・ページ・コンポーネント(第6.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)によって表されます(iPhoneではこれが一般的です)。

   • ヘッダー・ファセットには、ページ・タイトルが含まれています。

   • プライマリ・アクション・ファセットは、 ヘッダー・バーの左隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。

   • セカンダリ・アクション・ファセットは、ヘッダー・バーの右隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。

2. ページのコンテンツ領域に表示されるボタン。

3. ページのフッター・バーに表示されるボタン。MAF AMXページでは、フッターは、フッター・ファセットと組み合せたパネル・ページ・コンポーネント(第6.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)によって表されます。

   • フッター・ファセットは、コンテンツ領域の下に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。

どのタイプでも、すべてのボタン・コンポーネントには次の3つの状態があります。

1. 標準。

2. アクティブ: ボタンがエンド・ユーザーによってタップまたはタッチされたときの外観を表します。ボタンがタップされた(タッチされてリリースされた)ときに、ボタン・アクションが実行されます。タッチしたときにアクティブ化された外観が表示され、リリースしたときにアクションが実行されます。エンド・ユーザーがボタンにタッチした後に指をドラッグしてボタンから離した場合、アクションは実行されません。ただし、ボタンにタッチしている間中、アクティブ化された外観が表示されます。

3. 無効。

ボタン・コンポーネントの外観は、adfmf-commandButton-<style>に設定したそのstyleClass属性によって定義されます。表6-4に示すどのスタイルでも、MAF AMXページ内の有効な任意の場所に配置されているボタンに適用できます。

表6-4 主なボタン・スタイル

ボタン・スタイル名	説明
デフォルト	次の場所に配置されているボタンのデフォルト・スタイル いずれかのパネル・ページ・ファセット(プライマリ、セカンダリ、ヘッダー、フッター)内。詳細は、第6.3.5.1項「デフォルト・スタイル・ボタンの表示」を参照してください MAF AMXページのコンテンツ領域内の任意の場所。このスタイルは、ページ内のボタンの場所またはコンテキストに基づいてそのページ内で特定のアクションを実行するためのボタンに対して使用されます。
戻る	いずれかのパネル・ページ・ファセット(プライマリ、セカンダリ、ヘッダー、フッター)に配置されるボタンの戻るスタイル。このスタイルを、デフォルト・ボタンに適用すると、ページに戻るという外観を表示できます。このボタン・スタイルは、Springboardに戻るまたはページに戻るボタンによく使用されます。 詳細は、第6.3.5.2項「戻るスタイル・ボタンの表示」を参照してください
強調表示	いずれかのパネル・ページ・ファセット(プライマリ、セカンダリ、ヘッダー、フッター)またはMAF AMXページのコンテンツ領域に配置されるボタンの強調表示スタイル。このスタイルをボタンに追加すると、保存(または完了)ボタンで一般的なiPhoneボタンの外観を提供できます。 詳細は、第6.3.5.3項「強調表示スタイル・ボタンの表示」を参照してください
アラート	アラート・スタイルは削除の外観をボタンに追加します。詳細は、第6.3.5.4項「アラート・スタイル・ボタンの表示」を参照してください

ボタンに適用して太い角丸の境界線でボタンを修飾できる角丸スタイル(adfmf-commandButton-rounded)があります(図6-9を参照)。このスタイルは他のどのようなスタイルとも組み合せて定義できます。

図6-9 デザインタイムの角丸ボタン

MAF AMXには、多数の追加の装飾スタイルが用意されています(第6.3.5.5項「追加のボタン・スタイルの使用」参照)。

MAF AMXでのボタン・コンポーネントの子の操作および属性の処理には、特定の順序があります。詳細は、第6.3.5.8項「操作と属性の処理順序に関する必知事項」を参照してください。

6.3.5.1 デフォルト・スタイル・ボタンの表示

「パネル・ページ」ファセットまたはコンテンツ領域内に配置可能な様々なデフォルト・スタイル・ボタンを次に示します。

• テキスト・ラベルのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。

• イメージ・アイコンのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。

例6-16および例6-17は、MAF AMXファイルで宣言されているcommandButton要素を示しています。

例6-16 テキスト・ラベル付きデフォルト・ボタンの定義

<amx:panelPage id="pp1">
   <amx:facet name="primary">
      <amx:commandButton id="cb1" 
                         text="Cancel"
                         action="cancel" 
                         actionListener="#{myBean.rollback}"/>
   </amx:facet>
</amx:panelPage>

例6-17 イメージ・アイコン付きデフォルト・ボタンの定義

<amx:panelPage id="pp1">
   <amx:facet name="primary">
      <amx:commandButton id="cb1" 
                         icon="plus.png"
                         action="add" 
                         actionListener="#{myBean.AddItem}"/>
   </amx:facet>
</amx:panelPage>

例6-18は、パネル・ページのフッター・ファセット内で宣言されているcommandButton要素を示しています。

例6-18 フッター・ファセットのテキスト・ラベルおよびイメージ付きデフォルト・ボタンの定義

<amx:panelPage id="pp1">
   <amx:facet name="footer">
      <amx:commandButton id="cb2" 
                         icon="folder.png"
                         text="Move (#{myBean.mailcount})" 
                         action="move"/>
   </amx:facet>
</amx:panelPage>

例6-19は、パネル・ページのコンテンツ領域の一部で宣言されているcommandButton要素を示しています。

例6-19 ページ・コンテンツ領域でのテキスト・ラベル付きデフォルト・ボタンの定義

<amx:panelPage id="pp1">
   <amx:commandButton id="cb1" 
                      text="Reply"
                      actionListener="#{myBean.share}"/>
</amx:panelPage>

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• MAFサンプル・アプリケーションであるCompGalleryは、「ファイル」→「新」→「MAFサンプル」にあります。

6.3.5.2 戻るスタイル・ボタンの表示

「パネル・ページ」ファセットまたはコンテンツ領域内に配置される様々な戻るスタイル・ボタンを次に示します。

• テキスト・ラベルのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。

• イメージ・アイコンのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。

例6-20は、MAF AMXファイルで宣言されているcommandButton要素を示しています。

例6-20 テキスト・ラベル付き戻るボタンの定義

<amx:panelPage id="pp1">
   <amx:facet name="header">
      <amx:outputText value="Details" id="ot1"/>
   </amx:facet>
   <amx:facet name="primary">
      <amx:commandButton id="cb1" 
                         text="Back"
                         action="__back"/>
   </amx:facet>
   ...
</amx:panelPage>

プライマリ・ファセット内にボタン・コンポーネント配置し、そのaction属性を__backに設定した場合は常に、MAF AMXによって戻る矢印スタイル設定が自動的に適用されます(図6-10参照)。

図6-10 デザインタイムの戻るボタン

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.5.3 強調表示スタイル・ボタンの表示

他のタイプのボタンと同様に、「パネル・ページ」ファセットまたはコンテンツ領域内に配置される強調表示スタイル・ボタンには、「標準」、「アクティブ」または「無効」の状態があります。

例6-21は、MAF AMXファイルで宣言されているcommandButton要素を示しています。

例6-21 テキスト・ラベル付き強調表示ボタンの定義

<amx:panelPage id="pp1">
   <amx:facet name="secondary">
      <amx:commandButton id="cb2" 
                         text="Save"
                         action="save" 
                         styleClass="adfmf-commandButton-highlight"/>
   </amx:facet>
</amx:panelPage>

図6-11 デザインタイムの強調表示ボタン

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.5.4 アラート・スタイル・ボタンの表示

「パネル・ページ」内に配置されるアラート・スタイル・ボタンには、「標準」、「アクティブ」または「無効」の状態があります。

例6-22は、MAF AMXファイルで宣言されているcommandButton要素を示しています。

例6-22 テキスト・ラベル付きアラート・ボタンの定義

<amx:commandButton id="cb1" 
                   text="Delete"
                   actionListener="#{myBean.delete}" 
                   styleClass="adfmf-commandButton-alert" />

図6-12 デザインタイムのアラート・ボタン

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.5.5 追加のボタン・スタイルの使用

MAF AMXには、次の追加のボタン・スタイルが用意されています。

• 「暗い」スタイル

• 「明るい」スタイル

• 「小規模」スタイル

• 「大規模」スタイル

• 「強調表示」スタイル

• 「確認」スタイル

• 2種類の「代替」スタイル

図6-13 追加のボタン・スタイル

6.3.5.6 アプリケーション内でのボタンの使用方法

MAFアプリケーションでは、次のコンテキスト内でボタン・コンポーネントを使用できます。

• ナビゲーション・バー

• 特定のアクションを実行するためのコンテンツ領域

• アクション・シート

• ポップスタイル・アラート・メッセージ

ナビゲーション・バー

MAFでは、ナビゲーション・バーで使用する標準ボタンを作成できます。

• 編集ボタンで、エンド・ユーザーは編集またはコンテンツ操作モードに入ることができます。

• 取消ボタンで、エンド・ユーザーは、変更を保存することなく編集またはコンテンツ操作モードを終了できます。

• 保存ボタンで、エンド・ユーザーは、変更を保存して編集またはコンテンツ操作モードを終了できます。

• 完了ボタンで、エンド・ユーザーは、変更があれば保存して現在のモードを終了できます。

• 元に戻すボタンで、エンド・ユーザーは最後のアクションを元に戻すことができます。

• やり直しボタンで、エンド・ユーザーは最後の元に戻したアクションをやり直すことができます。

• 戻るボタンで、エンド・ユーザーはSpringboardに戻ることができます。

• ページに戻るボタンで、エンド・ユーザーはボタン・テキスト・ラベルによって識別されるページに戻ることができます。

• 追加ボタンで、エンド・ユーザーは新しいオブジェクトを追加または作成できます。

コンテンツ領域

ページのコンテンツ領域内に配置されたボタンは、そのページ内のボタンの場所およびコンテキストに指定されている特定のアクションを実行します。これらのボタンは、ナビゲーション・バーに配置されているボタンとは異なる外観を持っている場合があります。

アクション・シート

アクション・シート内に配置されるボタンの例には、「ノートの削除」ボタンおよび「取消」ボタンのグループがあります。

アクション・シート・ボタンでは、表示の幅が拡張されます。

アラート・メッセージ

「OK」ボタンは、パスワード入力に失敗した後のログイン検証などの検証メッセージ内に配置できます。

6.3.5.7 戻るボタン・ナビゲーションの有効化

MAF AMXでは、前に訪問したページに戻るデフォルト動作を持つ戻るボタンを使用した移動がサポートされています。詳細は、第5.2.9項「UIコンポーネントを使用したアクション結果の指定方法」を参照してください。

__backナビゲーションを備えたパネル・ページのプライマリ・ファセットにボタン・コンポーネントを追加すると、そのボタンには、戻る矢印の視覚的スタイリングが自動的に設定されます(第6.3.5.2項「戻るスタイル・ボタンの表示」を参照)。これを無効にするには、styleClass属性をamx-commandButton-normalに設定します。

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.5.8 操作と属性の処理順序に関する必知事項

ボタン、リンク、リスト・アイテムなどのコンポーネントがアクティブになっている場合に、MAF AMXによって操作および属性が処理される順序は、次のとおりです。

1. 次の子操作は、XMLファイルに表示される順序で処理されます。

   • プロパティ・リスナーの設定

   • アクション・リスナー

   • ポップアップ表示動作

   • ポップアップを閉じる動作

2. アクション・リスナー(actionListener)属性が処理されて関連付けられたJavaメソッドが起動されます。

3. アクション(action)属性が処理されて、ナビゲーション・ケースがあればそれに従います。

6.3.6 リンクの使用方法

リンク(commandLink)コンポーネントは、アクションをトリガーするためおよび他のビューへのナビゲーションを有効化するために使用します。

リンク・コンポーネントは、その子として任意のタイプのコンポーネントを定義できます。プロパティ・リスナーの設定(第6.3.23項「プロパティ・リスナーの設定の使用方法」を参照)、アクション・リスナー(第6.3.22項「アクション・リスナーの使用方法」を参照)、ポップアップ表示動作、ポップアップを閉じる動作(第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)、検証動作(第6.9項「検証の入力」を参照)などのコンポーネントをリンク・コンポーネントの子として使用することで、クリックおよびジェスチャーを実行できるアクション可能な領域を作成できます。

リンク内にイメージ・コンポーネントを配置することで(第6.3.7項「イメージの表示方法」を参照)、クリック可能イメージを作成できます。

例6-23は、MAF AMXファイルで宣言されているcommandLink要素を示しています。

例6-23 基本的なリンクの定義

<amx:commandLink id="cl1" 
                 text="linked"
                 action="gotolink" 
                 actionListener="#{myBean.doSomething}"/>

図6-14は、「プレビュー」ペインに表示されている基本的なリンク・コンポーネントを示しています。

図6-14 デザインタイムのリンク

例6-24は、MAF AMXファイルで宣言されているcommandLink要素を示しています。このコンポーネントは、panelFormLayoutコンポーネントおよびpanelLabelAndMessageコンポーネント内に配置されます。

例6-24 フォーム内のリンクの定義

<amx:panelPage id="pp1">
   <amx:panelFormLayout id="form">
      <amx:panelLabelAndMessage id="panelLabelAndMessage1" label="Label">
         <amx:commandLink id="cl1"
                          text="linked"
                          action="gotolink" 
                          actionListener="#{myBean.doSomething}"/>
      </amx:panelLabelAndMessage>
   </amx:panelFormLayout>
</amx:panelPage>

図6-15は、フォーム内に配置され、「プレビュー」ペインに表示されているリンク・コンポーネントを示しています。

図6-15 デザインタイムのフォーム内のリンク

MAF AMXでのリンク・コンポーネントの子の操作および属性の処理には、特定の順序があります。詳細は、第6.3.5.8項「操作と属性の処理順序に関する必知事項」を参照してください。

MAF AMXでは、リンクと類似していますが、ページ間のナビゲーションは許可されない別のコンポーネントであるリンク(実行) (goLink)コンポーネントが提供されています。このコンポーネントを使用して、外部ページへのリンクを有効化できます。図6-16は、「プレビュー」ペインに表示されているリンク(実行)コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。

<amx:goLink id="goLink1"
            text="Go Link"
            url="http://example.com"/>

図6-16 デザインタイムのリンク(実行)

イメージは、リンク(実行)コンポーネントの子として指定できる唯一のコンポーネントです。

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.7 イメージの表示方法

MAF AMXでは、ビットマップによって表されるイメージ(image)コンポーネントを使用して、iOSおよびAndroidデバイス上にイメージを表示できます。

ボタンおよびリスト・ビューにイメージを配置するだけでなく、それをリンク・コンポーネント内に配置して(第6.3.6項「リンクの使用方法」を参照)クリック可能イメージを作成できます。

例6-25は、MAF AMXファイルのimage要素の定義を示しています。

例6-25 イメージの定義

<amx:image id="i1"
           styleClass="prod-thumb"
           source="images/img-big-#{pageFlowScope.product.uid}.png" />

Androidプラットフォームでサポートされているフォーマットは次のとおりです。

• GIF

• JPEG

• PNG

• BMP

iOSプラットフォームでサポートされているフォーマットは次のとおりです。

• PNG

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGalleryおよびUIDemo

6.3.8 チェックボックス・コンポーネントの使用方法

チェックボックス(selectBooleanCheckbox)コンポーネントは、trueまたはfalseの値からの単一選択(選択済状態と選択解除状態の間で切り替えできる)を可能にするために作成するチェックボックスを表します。

チェックボックス・コンポーネントのlabel属性を使用するとチェックボックスの左側にテキストを配置でき、text属性を使用すると右側にテキストを配置できます。

例6-26は、MAF AMXファイルで宣言されているselectBooleanCheckbox要素を示しています。

例6-26 選択解除されたチェックボックスの定義

<amx:selectBooleanCheckbox id="check1"
                           label="Agree to the terms:" 
                           value="#{myBean.bool1}"
                           valueChangeListener=
                              "#{PropertyBean.ValueChangeHandler}"/>

図6-17は、「プレビュー」ペインに表示されている選択解除されたチェックボックス・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。

<amx:selectBooleanCheckbox id="selectBooleanCheckbox1"
                           label="Checkbox"
                           value="false"
                           valueChangeListener=
                                "#{PropertyBean.ValueChangeHandler}"/>

図6-17 デザインタイムの選択解除されたチェックボックス

例6-27 デザインタイムの選択されたチェックボックス

<amx:selectBooleanCheckbox id="selectBooleanCheckbox1"
                           label="Checkbox"
                           value="true"
                           valueChangeListener=
                                "#{PropertyBean.ValueChangeHandler}"/>

図6-18は、「プレビュー」ペインに表示されている選択されたチェックボックス・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。

図6-18 選択されたチェックボックスの定義

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.8.1 iOSプラットフォームでのチェックボックス・コンポーネントのサポート

iOSでは、ネイティブ・チェックボックス・コンポーネントはサポートされていません。ブール・スイッチは、通常、プロパティ・ページで使用され、ブール選択を可能にします(第6.3.9項「ブール・スイッチ・コンポーネントの使用方法」を参照)。

6.3.8.2 Androidプラットフォームでのチェックボックス・コンポーネントのサポート

Androidでは、ネイティブ・チェックボックス・コンポーネントがサポートされています。このコンポーネントは、設定ページで広く使用され、個々の設定値のオンとオフを切り替えます。

6.3.9 ブール・スイッチ・コンポーネントの使用方法

ブール・スイッチ(selectBooleanSwitch)コンポーネントは、チェックボックスのかわりのスイッチ・メタファーとしてのブール値の編集を可能にします。

他のMAF AMX UIコンポーネントと同様に、このコンポーネントには標準および選択済の状態があります。値を切り替えるには、エンド・ユーザーはスイッチを1回タップ(タッチしてリリース)します。タップするたびにスイッチが切り替わります。

例6-28は、MAF AMXファイルで定義されているselectBooleanSwitch要素を示しています。

例6-28 ブール・スイッチの定義

<amx:selectBooleanSwitch id="switch1" 
                         label="Flip switch:"
                         onLabel="On" 
                         offLabel="Off" 
                         value="#{myBean.bool1}"
                         valueChangeListener=
                                "#{PropertyBean.ValueChangeHandler}"/>

図6-19は、「プレビュー」ペインに表示されているブール・スイッチ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。

<amx:selectBooleanSwitch id="selectBooleanSwitch1"
                         label="Switch"
                         value="value1"
                         valueChangeListener=
                                "#{PropertyBean.ValueChangeHandler}"/>

図6-19 デザインタイムのブール・スイッチ

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.9.1 iOSプラットフォームでのブール・スイッチ・コンポーネントのサポートに関する必知事項

iOSでは、プール・スイッチ・コンポーネントは、属性値を有効化または無効化するために設定ページでよく使用されます。

6.3.9.2 Androidプラットフォームでのブール・スイッチ・コンポーネントのサポートに関する必知事項

Androidプラットフォームでは、ブール・スイッチ・コンポーネントは直接サポートされていません。かわりに、Androidでは、タップすると選択済状態と選択解除状態が切り替わるトグル・ボタンが提供されています。

6.3.10 チェックボックスを複数選択コンポーネントの使用方法

チェックボックスを複数選択(selectManyCheckbox)コンポーネントは、trueまたはfalseの値の複数選択を可能にするために使用するチェックボックスのグループを表します。これにより、グループ内の各チェックボックスの選択済と選択解除の切替えが可能になります。この選択メカニズムは、チェックボックスを複数選択コンポーネントに含まれているアイテムの選択コンポーネント(第6.3.13.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。

注意: チェックボックスの複数選択コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。

例6-29は、MAF AMXファイルで宣言されているselectManyCheckbox要素を示しています。

例6-29 チェックボックスを複数選択の定義

<amx:selectManyCheckbox id="selectManyCheckbox1"
                        label="Select shipping options"
                        value="#{myBean.shipping}"
                        valueChangeListener="#{PropertyBean.ValueChangeHandler}">
   <amx:selectItem id="selectItem1" 
                   label="Air" 
                   value="#{myBean.shipping.air}"/>
   <amx:selectItem id="selectItem2" 
                   label="Rail" 
                   value="#{myBean.shipping.rail}"/>
   <amx:selectItem id="selectItem3" 
                   label="Water"
                   value="#{myBean.shipping.water}"/>
</amx:selectManyCheckbox>

図6-20は、「プレビュー」ペインに表示されているチェックボックスを複数選択コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。

<amx:selectManyCheckbox id="selectManyCheckbox1"
                        label="Select Many Checkbox"
                        value="value2"
                        valueChangeListener="#{PropertyBean.ValueChangeHandler}">
   <amx:selectItem id="selectItem1" label="Selection 1" value="value1"/>
   <amx:selectItem id="selectItem2" label="Selection 2" value="value2"/>
   <amx:selectItem id="selectItem3" label="Selection 3" value="value3"/>
</amx:selectManyCheckbox>

図6-20 デザインタイムのチェックボックスを複数選択

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.10.1 チェックボックスを複数選択コンポーネントとユーザーとの対話に関する必知事項

MAF AMXでは、ポップアップ・スタイル(デフォルト)とリスト・スタイル(使用可能な選択肢の数がデバイスの画面サイズを超えている場合に使用される)の、チェックボックスを複数選択コンポーネントを表示するための2つの代替方法が提供されています。

iPhoneとiPadの両方でのポップアップスタイルのチェックボックスを複数選択コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストがポップアップに表示されます。選択を行うには、エンド・ユーザーは1つ以上の選択肢をタップします。選択内容を保存するには、エンド・ユーザーはポップアップの外をタップするか、閉じるボタン( x )を使用してポップアップを閉じます。

ポップアップを閉じるときに、コンポーネントに表示されている値が、選択済の値に更新されます。

選択肢の数がデバイスのサイズを超える場合、スクロール可能なリスト・ビュー(第6.3.15項「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」を参照)を含むフルページ・ポップアップが生成されます。

iPhoneとiPadの両方でのリストスタイルのチェックボックスを複数選択コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストが表示されます。選択を行うには、エンド・ユーザーは上下にスクロールして使用可能な選択肢を参照し、1つ以上の選択肢をタップします。選択内容を保存するには、エンド・ユーザーは閉じるボタン( x )をタップします。

リストを閉じるときに、コンポーネントに表示されている値が、選択済の値に更新されます。

注意: どちらの場合も、選択を取り消すメカニズムは提供されていません。

6.3.11 選択ボタン・コンポーネントの使用方法

選択ボタン(selectOneButton)コンポーネントは、常に1つのボタンがアクティブになっている、アクションをリストするボタン・グループを表します。この選択メカニズムは、選択ボタン・コンポーネントに含まれているアイテムの選択コンポーネント(第6.3.13.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。

注意: 選択ボタン・コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。

例6-30は、MAF AMXファイルで定義されているselectOneButton要素を示しています。

例6-30 選択ボタンの定義

<amx:selectOneButton id="bg1" 
                     value="#{myBean.myState}"
                     valueChangeListener="#{PropertyBean.ValueChangeHandler}">
   <amx:selectItem id="selectItem1" label="Yes" value="yes"/>
   <amx:selectItem id="selectItem2" label="No" value="no"/>
   <amx:selectItem id="selectItem3" label="Maybe" value="maybe"/>
</amx:selectOneButton>

図6-21は、「プレビュー」ペインに表示されている選択ボタン・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。

<amx:selectOneButton id="selectOneButton1"
                     label="Select Button"
                     value="value1"
                     valueChangeListener="#{PropertyBean.ValueChangeHandler}">
   <amx:selectItem id="selectItem1" label="Value 1" value="value1"/>
   <amx:selectItem id="selectItem2" label="Value 2" value="value2"/>
   <amx:selectItem id="selectItem3" label="Value 3" value="value3"/>
</amx:selectOneButton>

図6-21 デザインタイムの選択ボタン

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.12 ラジオ・ボタン・コンポーネントの使用方法

ラジオ・ボタン(selectOneRadio)コンポーネントは、使用可能な選択肢をリストするラジオ・ボタンのグループを表します。この選択メカニズムは、ラジオ・ボタン・コンポーネントに含まれているアイテムの選択コンポーネント(第6.3.13.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。

注意: ラジオ・ボタン・コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。

例6-31および例6-32は、MAF AMXファイルのselectOneRadio要素の定義を示しています。

例6-31 アイテムの選択コンポーネントを使用したラジオ・ボタンの定義

<amx:selectOneRadio id="radio1"
                    label="Choose a pet:"
                    value="#{myBean.myPet}"
                     valueChangeListener="#{PropertyBean.ValueChangeHandler}">
   <amx:selectItem id="selectItem1" label="Cat" value="cat"/>
   <amx:selectItem id="selectItem2" label="Dog" value="dog"/>
   <amx:selectItem id="selectItem3" label="Hamster" value="hamster"/>
   <amx:selectItem id="selectItem4" label="Lizard" value="lizard"/>
</amx:selectOneRadio>

例6-32 アイテムの選択コンポーネントを使用したラジオ・ボタンの定義

<amx:selectOneRadio id="radio1"
                    label="Choose a pet:"
                    value="#{myBean.myPet}"
                     valueChangeListener="#{PropertyBean.ValueChangeHandler}">
   <amx:selectItems id="selectItems1" value="myBean.allPets"/>
</amx:selectOneRadio>

図6-22は、「プレビュー」ペインに表示されているブール・スイッチ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。

<amx:selectOneRadio id="selectOneRadio1"
                     label="Radio Button"
                     value="value1"
                     valueChangeListener="#{PropertyBean.ValueChangeHandler}">
   <amx:selectItem id="selectItem1" label="Value 1" value="value1"/>
   <amx:selectItem id="selectItem2" label="Value 2" value="value2"/>
   <amx:selectItem id="selectItem3" label="Value 3" value="value3"/>
</amx:selectOneRadio>

図6-22 デザインタイムのラジオ・ボタン

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.13 選択肢コンポーネントの使用方法

選択肢(selectOneChoice)コンポーネントは、リストからの単一の値の選択を可能にするために使用するコンボ・ボックスを表します。この選択メカニズムは、選択肢コンポーネントに含まれているアイテムの選択コンポーネント(第6.3.13.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。

注意: 選択肢コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。

例6-33は、MAF AMXファイルのselectOneChoice要素の定義をselectItemサブ要素とともに示しています。

例6-33 アイテムの選択コンポーネントを使用した選択肢の定義

<amx:selectOneChoice id="choice1"
                     label="Your state:"
                     value="#{myBean.myState}"
                     valueChangeListener="#{PropertyBean.ValueChangeHandler}">
   <amx:selectItem id="selectItem1" label="Alaska" value="AK"/>
   <amx:selectItem id="selectItem2" label="Alabama" value="AL"/>
   <amx:selectItem id="selectItem3" label="California" value="CA"/>
   <amx:selectItem id="selectItem4" label="Connecticut" value="CT"/>
</amx:selectOneChoice>

例6-34は、MAF AMXファイルのselectOneChoice要素の定義をselectItemsサブ要素とともに示しています。

例6-34 アイテムの選択コンポーネントを使用した選択肢の定義

<amx:selectOneChoice id="choice1"
                     label="Your state:"
                     value="#{myBean.myState}"
                     valueChangeListener="#{PropertyBean.ValueChangeHandler}">
   <amx:selectItems id="selectItems1" value="myBean.allStates"/>
</amx:selectOneChoice>

図6-23は、「プレビュー」ペインに表示されている選択肢コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。

<amx:selectOneChoice id="selectOneChoice1"
                     label="Choice"
                     value="value1"
                     valueChangeListener="#{PropertyBean.ValueChangeHandler}">
   <amx:selectItem id="selectItem1" label="Value 1" value="value1"/>
   <amx:selectItem id="selectItem2" label="Value 2" value="value2"/>
   <amx:selectItem id="selectItem3" label="Value 3" value="value3"/>
</amx:selectOneChoice>

図6-23 デザインタイムの選択肢

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.13.1 iOSプラットフォームでの選択肢コンポーネントとユーザーとの対話に関する必知事項

MAF AMXでは、選択肢コンポーネントを表示するため、ポップアップ・スタイルとドロップダウン・スタイルの2つの代替方法が提供されています。

iPhoneでのネイティブ選択肢コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストが、デフォルトで最初のオプションが選択された状態で表示されます。選択を行うには、エンド・ユーザーは上下にスクロールして使用可能な選択肢を参照します。選択内容を保存するには、エンド・ユーザーはツール・バーの「終了」をタップします。

iPadでは、ユーザーの対話は、次の点を除いてiPhoneにおける対話と同様です。

• 選択のリストは、ポップアップ・ダイアログに表示されます。

• iPadのスタイリングが選択のリストの周囲に実装され、リストのソースを示すためにノッチが使用されます。

アイテムを選択しないで選択のリストを閉じるには、エンド・ユーザーはポップアップ・ダイアログの外をタップする必要があります。

注意: 選択のリストおよびツール・バーを表示するためのUIは、ブラウザにネイティブであり、CSSを使用してスタイリングすることはできません。

選択肢コンポーネント内のリスト値は、無効として表示できます。

選択肢の数がデバイスの表示サイズを超える場合、ネイティブな方法でスクロール可能なリスト・ページが生成されます。

6.3.13.2 Androidプラットフォームでの選択肢コンポーネントとユーザーとの対話に関する必知事項

Androidデバイスでのネイティブ選択肢コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると、ポップアップ・ダイアログ形式の選択肢のリストが表示されます。選択肢の数がデバイスのサイズ内に収まる場合は単純なポップアップが表示されます。この場合次のようになります。

• 選択リストの1つのアイテムを1回タップすると、そのアイテムが選択され、ポップアップが閉じます。選択内容は選択肢コンポーネント・ラベルに反映されます。

• ポップアップの外で1回タップするか戻るキーをクリックすると、変更が適用されることなくポップアップが閉じます。

表示される選択肢の数がデバイス・サイズ内に収まらない場合は、ポップアップにスクロール可能リストが含まれます。その場合は次のようになります。

• 選択リストの1つのアイテムを1回タップすると、そのアイテムが選択され、ポップアップが閉じます。選択内容は選択肢コンポーネント・ラベルに反映されます。

• 戻るキーをクリックすると、変更が適用されることなくポップアップが閉じます。

6.3.13.3 アイテムの選択コンポーネントの違いに関する必知事項

アイテムの選択(selectItems)コンポーネントは、複数選択コンポーネントと単一選択コンポーネントの両方で選択できるオブジェクトのリストを提供します。

アイテムの選択(selectItem)コンポーネントは、選択コンポーネントの単一選択可能なアイテムを表しています。

6.3.14 選択肢を複数選択コンポーネントの使用方法

選択肢を複数選択(selectManyChoice)コンポーネントは、リストの複数の値の選択を可能にします。この選択メカニズムは、チェックボックスを複数選択コンポーネントに含まれているアイテムの選択コンポーネント(第6.3.13.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。

注意: チェックボックスを複数選択コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。

例6-35は、MAF AMXファイルで宣言されているselectManyChoice要素を示しています。

例6-35 アイテムの選択コンポーネントを使用した選択肢を複数選択の定義

<amx:selectManyChoice id="check1" 
                      label="Select Option:"
                      value="#{myBean.shipping}"
                      valueChangeListener="#{PropertyBean.ValueChangeHandler}">
   <amx:selectItem id="selectItem1"
                   label="Signature Required"
                   value="signature" />
   <amx:selectItem id="selectItem2" 
                   label="Insurance" 
                   value="insurance" />
   <amx:selectItem id="selectItem3"
                   label="Delivery Confirmation" 
                   value="deliveryconfirm"/>
</amx:selectManyChoice>

図6-24 デザインタイムの選択肢を複数選択

例6-36 アイテムの選択コンポーネントを使用した選択肢を複数選択の定義

<amx:selectManyChoice id="check1" 
                      label="Select Shipping Options:"
                      value="#{myBean.shipping}">
   <amx:selectItems id="selectItems1" value="#{myBean.shippingOptions}"/>
</amx:selectManyChoice>

詳細、図および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

すべてのサポートされているデバイス上の選択肢を複数選択コンポーネントの外観と動作は、チェックボックスを複数選択コンポーネントとほとんど同一です(詳細は、第6.3.10項「チェックボックスを複数選択コンポーネントの使用方法」を参照してください)。

6.3.15 リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法

リスト・ビュー(listView)コンポーネントを使用して、エンド・ユーザーが1つ以上のオプションを選択できる選択肢のリストとしてデータを表示します。

リスト・アイテム(listItem)コンポーネントは、リスト・ビュー内の1つの行を表します。通常、リスト・ビュー内にリスト・アイテム・コンポーネントを配置し、データ・アイテムのリストをレイアウトおよびスタイル設定します。リスト・アイテム・コンポーネントは、実行時にスワイプ・ジェスチャーに応答します(第6.4項「ジェスチャーの有効化」を参照)。

リスト・ビューによって、次のうち1つを定義できます。

• リスト(コレクション)内のアイテム数に基づいてレプリケートされる行。

• リスト・ビューのvarおよびvalue属性を指定することなく子リスト・アイテム・コンポーネントを追加することによって生成される静的行。これらの静的アイテムは必要な数を追加できます。これは、設計時にリストのコンテンツがわかっている場合に便利です。この場合、リストは編集可能ではなく、メニュー・アイテムのセットのように動作します。

次のタイプのリスト・ビュー・コンポーネントを作成できます。

• 基本リスト

  例6-37は、MAF AMXファイルで定義されているlistView要素を示しています。この定義は、基本コンポーネントに対応しています。

  例6-37 基本リスト・ビューの定義

  <amx:listView id="listView1" 
                showMoreStrategy="autoScroll" 
                bufferStrategy="viewport">
     <amx:listItem id="listItem1">
        <amx:outputText id="outputText1" value="ListItem Text"/>
     </amx:listItem>
     <amx:listItem id="listItem2">
        <amx:outputText id="outputText3" value="ListItem Text"/>
     </amx:listItem>
     <amx:listItem id="listItem3">
        <amx:outputText id="outputText5" value="ListItem Text"/>
     </amx:listItem>
     <amx:listItem id="listItem4">
        <amx:outputText id="outputText7"
                        value="This is really long text to test how it is handled"/>
     </amx:listItem>
  </amx:listView>
  

  図6-25は、デザインタイムの基本リスト・ビュー・コンポーネントを示しています。

  図6-25 デザインタイムの基本リスト・ビュー

  
  

  例6-38は、MAF AMXファイル内のlistView要素のもう1つの定義を示しています。この定義も基本コンポーネントに対応していますが、このリスト・ビューの値はコレクションによって設定されます。

  例6-38 基本リスト・ビューの定義

  <amx:listView id="list1" 
                value="#{myBean.listCollection}" 
                var="row"
                showMoreStrategy="autoScroll" 
                bufferStrategy="viewport">
     <amx:listItem actionListener="#{myBean.selectRow}"
                   showLinkIcon="false"
                   id="listItem1">
        <amx:outputText value="#{row.name}" id="outputText1"/>
     </amx:listItem>
  </amx:listView>
  

  
  

  注意: 現在は、リスト・アイテム内の出力テキストに含まれるテキスト文字列が長すぎて1行に収まらない場合、そのテキストは行の端で折り返されません。この動作を回避するには、件名の出力テキスト子コンポーネントのinlineStyle属性に、"white-space: normal;"を追加します。

  
  

• アイコン付きリスト

  例6-39は、MAF AMXファイルで定義されているlistView要素を示しています。この定義は、アイコン付きコンポーネントに対応しています。

  例6-39 アイコン付きリスト・ビューの定義

  <amx:listView id="list1" 
                value="#{myBean.listCollection}" 
                var="row"
                showMoreStrategy="autoScroll" 
                bufferStrategy="viewport">
     <amx:listItem id="listItem1">
        <amx:tableLayout id="tl1" width="100%">
           <amx:rowLayout id="rl1">
              <amx:cellFormat id="cf11" width="40px" halign="center">
                 <amx:image id="image1" source="#{row.image}"/>
              </amx:cellFormat>
              <amx:cellFormat id="cf12" width="100%" height="43px">
                 <amx:outputText id="outputText1" value="#{row.desc}"/>
              </amx:cellFormat>
           </amx:rowLayout>
        </amx:tableLayout>
     </amx:listItem>
  </amx:listView>
  

  図6-26は、デザインタイムのアイコンおよびテキスト付きリスト・ビュー・コンポーネントを示しています。

  図6-26 デザインタイムのアイコン付きリスト・ビュー

  
  

• 検索付きリスト

• 区切り付きリスト。このタイプのリストでは、データをグループ化して順序を示すことができます。リスト・ビュー・コンポーネントの属性によって、各区切りの特性が定義されます。属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

  MAF AMXでは、次のことを実行できるリスト区切りが提供されています。

  • そのコンテンツを個別に閉じます。

  • 各区切り内のアイテム数を表示します。

  • 同時に閉じます。

  例6-40は、MAF AMXファイルで定義されているlistView要素を示しています。この定義は、折りたたみ可能な区切りおよびアイテム数付きのコンポーネントに対応しています。

  例6-40 区切り付きリスト・ビューの定義

  <amx:listView id="list1" 
            value="#{bindings.data.collectionModel}"
            var="row"
            collapsibleDividers="true"
            collapsedDividers="#{pageFlowScope.mylistDisclosedDividers}" 
            dividerMode="all"
            dividerAttribute="type"
            showDividerCount="true"
            showMoreStrategy="autoScroll" 
            bufferStrategy="viewport"
            fetchSize="10">
     <amx:listItem>
        <amx:outputText id="ot1" value="#{row.name}">
     </amx:listItem>
  </amx:listView>
  

  
  

  注意: この種類のリストはデータをソートしないだけでなく、受信するデータはソート済であると想定されるため、区切り付きリスト内のデータはdividerAttributeでソートする必要があります。

  
  
  
  

  注意: リスト・ビュー・コンポーネントが編集モードになっている(つまり、そのeditMode属性が指定されている)場合、区切りは表示されません。

  
  

  区切りが表示されている場合、エンド・ユーザーは、リスト・ビューのローカライズされたアルファベット順のインデックス・ユーティリティ(dividerMode属性がfirstLetterに設定されているリスト・ビュー・コンポーネントで使用可能)を使用して特定の区切りにすばやく移動できます。このユーティリティは、sectionIndex属性をoffに設定することで無効化できます。

  インデックス・ユーティリティ(indexer)は、インデックス・バーおよびインデックス・アイテムで構成され、次の特性があります。

  • リストにソートされていないデータまたは重複した区切りが含まれている場合、インデックス・アイテムは、リスト内の最初に出現したものを指します。

  • 使用可能な文字のみがインデックスで強調表示され、その強調表示されたもののみがアクティブになります。これは、データ・モデルでは変更によってトリガーされます(エンド・ユーザーが「次へ」行アイテムをタップしたときなど)。

  • インデックスの大/小文字は区別されません。

  • 不明な文字は、ハッシュ( # )記号で隠されます。

  インデクサ文字は、リストにロードされた行でのみアクティブ化(タップ)できます。たとえば、リスト・ビューで、fetchSize属性を使用して、文字Cまでの行がロードされた場合、インデクサではAからCまでの文字が有効になります。その他の文字は、行がさらにロードされるとインデクサに表示されます。

  表6-5は、インデックス・ユーティリティに定義可能なスタイルを示しています。

  表6-5 リスト・ビューのインデックス・スタイル

  styleClass名	説明
  adfmf-listView-index	インデックス・バーのスタイルを定義します。
  adfmf-listView-indexItem	インデックス・バーの1つのアイテムのスタイルを定義します。
  adfmf-listView-indexItem-active	インデックス・バーの関連する区切りへのリンクを持つアイテムのスタイルを定義します。
  adfmf-listView-indexCharacter	インデックス・バーの文字のスタイルを定義します。
  adfmf-listView-indexBullet	インデックス・バーの2つの文字間のブレットのスタイルを定義します。
  adfmf-listView-indexOther	インデックス・バーのすべての不明な文字を表す文字のスタイルを定義します。

  
  

  表示可能な区切りを持つリスト・ビュー・コンポーネントがスクロールを提供するコンテナとして機能し、それがスクロールの対象となる場合、区切りはビューの上部に固定されます。この場合は、リスト・ビュー・コンポーネントの高さを明示的に指定する必要があります。その他すべての場合で、リスト・ビュー自体はスクロールを実行しないが親コンテナ(パネル・ページなど)のスクロールを使用する場合は、リスト・ビューに高さ制約の設定はなく、高さはその子コンポーネントによって決まります。このような定義された高さ制約がないことによって、アニメーション化された遷移および区切りの固定が効果的に無効化されます。

• 凹枠リスト

  例6-41は、MAF AMXファイルで定義されているlistView要素を示しています。この定義は、凹枠コンポーネントに対応しています。

  例6-41 凹枠リスト・ビューの定義

  <amx:listView id="listView1" 
                styleClass="adfmf-listView-insetList"
                showMoreStrategy="autoScroll" 
                bufferStrategy="viewport">
     <amx:listItem id="listItem1">
        <amx:outputText id="outputText1" value="ListItem Text"/>
     </amx:listItem>
     <amx:listItem id="listItem2">
        <amx:outputText id="outputText3" value="ListItem Text"/>
     </amx:listItem>
     <amx:listItem id="listItem3">
        <amx:outputText id="outputText5" value="ListItem Text"/>
     </amx:listItem>
     <amx:listItem id="listItem4">
        <amx:outputText id="outputText7"
                        value="This is really long text to test how it is handled"/>
     </amx:listItem>
  </amx:listView>
  

  図6-27は、デザインタイムの凹枠リスト・ビュー・コンポーネントを示しています。

  図6-27 デザインタイムの凹枠リスト・ビュー

  
  

  例6-42は、MAF AMXファイル内のlistView要素のもう1つの定義を示しています。この定義も凹枠コンポーネントに対応していますが、このリスト・ビューの値はコレクションによって設定されます。

  例6-42 凹枠リストの定義

  <amx:listView id="list1" 
                value="#{CarBean.carCollection}"
                var="row" 
                styleClass="adfmf-listView-insetList"
                showMoreStrategy="autoScroll" 
                bufferStrategy="viewport"
                fetchSize="10">
     <amx:listItem id="li1" action="go">
        <amx:outputText id="ot1" value="#{row.name}"/>
     </amx:listItem>
  </amx:listView>
  

MAF AMXでのリスト・アイテム・コンポーネントの子の操作および属性の処理には、特定の順序があります。詳細は、第6.3.5.8項「操作と属性の処理順序に関する必知事項」を参照してください。

他のMAF AMXコンポーネントとは異なり、リスト・ビューをMAF AMXページにドラッグ・アンド・ドロップし、データ・コントロールからのコンテンツでlistViewを生成すると、「ListViewギャラリ」というダイアログが表示されます。このダイアログでリスト・ビューに対して特定のレイアウトを選択できます。

表6-6は、「ListViewギャラリ」に表示される、サポートされる「リスト・フォーマット」を示しています。

表6-6 リスト・フォーマット

フォーマット	要素行の値
シンプル	テキスト
メイン-サブ・テキスト	メイン・テキスト 従属テキスト
開始-終了	開始テキスト 終了テキスト
四分円	上部の開始テキスト 上部の終了テキスト 下部の開始テキスト 下部の終了テキスト

選択したリスト・フォーマットの「ListViewギャラリ」に表示されている「バリエーション」は、区切りか先頭イメージのいずれかまたは両方を追加するためのオプションで構成されています。

• 先頭イメージのあるバリエーションを選択すると、イメージ行が「リスト・アイテム・コンテンツ」表に追加されます。

• 区切りのあるバリエーションを選択すると、「区切り属性」フィールドがデフォルトの「区切りなし」ではなく、リスト内の最初の属性にデフォルトで設定され、「区切りモード」フィールドにそのデフォルト値の「すべて」が移入されます。

「ListViewギャラリ」に表示されている「スタイル」オプションでは、シェブロンを抑制することも、凹枠スタイル・リストを使用することも、その両方を行うこともできます。

• この選択によって、「リスト・ビューの編集」ダイアログの状態は変更されません。影響されるのは、生成されるMAF AMXマークアップのみです。

• 凹枠リストのあるスタイルを選択すると、生成されたMAF AMXマークアップのlistView要素にadfmf-listView-insetListスタイル・クラスが設定されます。

凹枠リストのある「シンプル」フォーマットの例を次に示します。

<amx:listView var="row"
              value="#{bindings.employees.collectionModel}"
              fetchSize="#{bindings.employees.rangeSize}"
              styleClass="adfmf-listView-insetList"
              id="listView2"
              showMoreStrategy="autoScroll" 
              bufferStrategy="viewport">
   <amx:listItem id="li2">
      <amx:outputText value="#{row.employeename}" id="ot3"/>
   </amx:listItem>
</amx:listView>

「ListViewギャラリ」の「説明」ペインは、現在選択されているバリエーションに基づいて更新されます。フォーマットには、メイン・スタイルの簡単な説明が示され、その後に選択したバリエーションの詳細が続きます。4つのメイン・スタイルに、それぞれ4つのバリエーションがあり、表6-7に示す16の固有の説明が提供されています。

表6-7 リスト・ビューのバリエーションとスタイル

リスト・フォーマット	バリエーション	説明
シンプル	基本	テキスト・フィールドがリスト・アイテムの開始側に表示されます。
シンプル	区切り	テキスト・フィールドは、リスト・アイテムの開始側に、アイテムが区切りによりグループ化されて表示されます。
シンプル	イメージ	テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。
シンプル	区切りおよびイメージ	テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。
メイン-サブ・テキスト	基本	目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。
メイン-サブ・テキスト	区切り	目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。リスト・アイテムは区切りによってグループ化されます。
メイン-サブ・テキスト	イメージ	目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。
メイン-サブ・テキスト	区切りおよびイメージ	目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。
開始-終了	基本	テキスト・フィールドがリスト・アイテムの両側に表示されます。
開始-終了	区切り	テキスト・フィールドは、リスト・アイテムの両側に、アイテムが区切りによりグループ化されて表示されます。
開始-終了	イメージ	テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。
開始-終了	区切りおよびイメージ	テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。
四分円	基本	テキスト・フィールドは、リスト・アイテムの四隅に表示されます。
四分円	区切り	テキスト・フィールドは、リスト・アイテムの四隅に、アイテムが区切りによりグループ化されて表示されます。
四分円	イメージ	テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。
四分円	区切りおよびイメージ	テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。

「ListViewギャラリ」で選択して「OK」をクリックすると、「リスト・ビューの編集」ウィザードが起動されるので、それを使用して、リスト・アイテム子コンポーネントに静的テキストを表示するバインドなしのリスト・ビュー・コンポーネントを作成するか、または動的バインド用にデータソースを選択(図6-28を参照)できます。

ダイアログに入力する際は、次の点を考慮してください。

• 左側にあるイメージは、選択されているリスト・ビュー・フォーマットのメイン・コンテンツ要素を反映しています。

• 「値」列の編集可能セルには、静的テキスト文字列が移入されます(表6-8を参照)。

• 「リスト・アイテム・コンテンツ」セルにイメージが含まれている場合、「値」セルはデフォルトで<add path to your image>文字列になります。この場合、それをイメージのパスに置き換える必要があります。

• 「リスト・アイテム選択」は選択モードを示します。

• リスト・ビューに、データがバインドされているのではなく、リスト・アイテム子コンポーネントが含まれている場合、区切り属性を設定できないため、「区切り属性」と「区切りモード」の両方のフィールドは無効化されています。

表6-8 リスト・ビューの静的テキスト文字列

リスト・フォーマット	要素行の値	出力テキストの値
シンプル	テキスト	'ListItemテキスト'
メイン-サブ・テキスト	メイン・テキスト 従属テキスト	'メイン・テキスト' 'これは従属テキストです。'
開始-終了	開始テキスト 終了テキスト	'開始テキスト' '終了テキスト'
四分円	上部の開始テキスト 上部の終了テキスト 下部の開始テキスト 下部の終了テキスト	'上部の開始テキスト' '上部の終了テキスト' '下部の開始テキスト' '下部の終了テキスト'

図6-28は、リスト・ビュー・コンポーネントをデータにバインドすることを選択した場合の「リスト・ビューの作成」ダイアログを示しています。

図6-28 バインド済リスト・ビューの作成

図6-28に示すダイアログに入力する際は、次の点を考慮してください。

• 「データのバインド」チェックボックスを選択した場合、「リスト・データ・コレクション」フィールドが有効になります。式ビルダーを使用して「リスト・データ・コレクション」フィールドにEL式を設定した場合、「要素タイプ」フィールドが有効になります。「データ・コントロールの定義」タブでデータ・コントロールを選択した場合は、「要素タイプ」フィールドは無効化されたままです。

• データソースを選択するには、「参照」をクリックします。これによって「リスト・ビュー・データ・コレクションの選択」ダイアログが開き、データ・コントロール定義を選択するか(図6-29を参照)、ELビルダーを使用して適切なEL式を選択できます(図6-30を参照)。

  図6-29 データ・コントロール定義の選択

  
  

  図6-30 EL式の選択

  
  

• 「要素タイプ」フィールドを使用してデータ・コレクションのタイプを宣言できます(図6-28を参照)。

• 有効なデータ・コレクションを選択すると、「リスト・アイテム・コンテンツ」表の「値」列が「値バインディング」に変更され、その編集可能なセルにはデータコレクションから属性のリストが移入されます。特別な場合の設定の説明は、図6-31を参照してください。

• 左側のイメージは、選択したリスト・ビュー・フォーマットのメイン・コンテンツ要素を反映し、略図から基礎となる表の名前付き要素へのマッピングを提供します。

• リスト・アイテムは、その特定要素に対してどちらが適切であるかによって、出力テキストまたはイメージ・コンポーネントのいずれかとして生成されます。

• 要素(行)数は選択したリスト・ビュー・フォーマットであらかじめ決まっているため、行を追加または削除することはできません。

• 要素の順序は変更できません。

• 「区切り属性」フィールドのデフォルト値は「区切りなし」です。この場合、「区切りモード」フィールドは無効です。デフォルト以外の値を選択する場合は、「区切りモード」パラメータを指定する必要があります。さらに、「ListViewギャラリ」で区切りを含むバリエーションを選択した場合、デフォルト値はリストの最初の属性に設定されます。

バインド済リスト・ビューを作成するときに考慮する特殊な場合は次のとおりです。

• Java Beanメソッドによって汎用性がないリストが戻される場合、図6-28に示すように「要素タイプ」フィールドを使用して、リスト・アイテム・コンテンツを作成する必要があります。

• 入力されているリスト・データ・コレクション値がコレクションベースではない場合、図6-31に示すように、「値」列が空白の値を持つ「値バインディング」列に置換されます。

  図6-31 非コレクションベース値の入力

  
  

詳細は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 第6.3.15.3項「スタイルを使用したレイアウトの構成」

• 第5.3.2.3.3項「コレクションのドラッグ・アンド・ドロップ」

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるUIDemo。このサンプルは、様々なタイプのリスト・ビュー・コンポーネントの使用方法と、スタイルを適用してページ・レイアウトを特定のパターンに合せる方法を示しています。

• 第D項「アプリケーションの使用方法の制限」

6.3.15.1 ページングおよび動的スクロールの構成

リスト・ビュー・コンポーネントを構成して、任意の長さのリストにデータを表示できます。これは、リストの下部にデータを追加することによって行います。

fetchSize属性によって、リスト・ビュー・コンポーネントが最初にロードする行数が決定されます。fetchSizeで定義されているよりも多くの使用可能な行がある場合は、最後にフェッチされた行の後にクリック可能領域が表示されます。この領域内をクリックすると、fetchSizeに等しい行のバッチがさらにロードされます。表示する行がなくなるとクリック可能領域は表示されなくなります。

fetchSize属性はロード済行の数を表していません。かわりに、何行ずつ増加するのかを表しています。リスト・ビュー・コンポーネントの作成時には、fetchSize属性は、デフォルトでPageDefイテレータのrangeSizeを指すEL式を使用するように設定されています。PageDefファイルの詳細は、第5.3.2.3.5項「生成されるドラッグ・アンド・ドロップ・アーティファクトに関する必知事項」および図5-44「PageDefファイル」を参照してください。fetchSizeをrangeSizeと同じ値に設定するとアプリケーションのパフォーマンスが向上します。

例6-43は、データ・コントロールのtestResultsと呼ばれるコレクションから作成されたlistView要素を示しています(第5.3.2.3項「データ・コントロールのビューへの追加」を参照)。

例6-43 fetchSize属性の設定

<amx:listView var="row" 
              value="#{bindings.testResults.collectionModel}" 
              fetchSize="#{bindings.testResults.rangeSize}">

前述の例では、fetchSize属性はbindings.testResultsのrangeSizeを指しています。例6-44は、このMAF AMXページのPageDefファイルからの行を示しています。このPageDefファイルには、testResultsかバインドされるtestResultsIteratorというaccessorIterator要素が含まれています。

例6-44 PageDefファイルのaccessorIterator

<accessorIterator MasterBinding="Class1Iterator"
                  Binds="testResults"
                  RangeSize="25" 
                  DataControl="Class1"
                  BeanClass="mobile.Test"
                  id="testResultsIterator"/>

fetchSize属性が-1に設定されている場合、すてのレコードが取得されます。

リスト・ビュー・コンポーネントの次の2つの属性は、スクロール動作を有効化します。

• showMoreStrategy: 必要な場合にさらに行をロードするためのリスト・ビュー・コンポーネントの計画を定義します。

  リスト・ビュー・コンポーネントが親コンテナの1つによるスクロールの対象となるのではなく、独自にスクロールを提供する場合(「リスト・ビューで独自のスクロールを強制するには:」を参照)で、リスト・ビューが最後までスクロールされた場合は、showMoreStrategyが自動的に起動され、レコードの次のセットのフェッチが可能になります。

  実行時に、この属性は自身をデフォルトで「さらに行をロード」リンクとして表します。

  
  

  リスト・ビューのスクロールの構成方法およびshowMoreStrategy属性の値を設定することによる行表示動作の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

• bufferStrategy: 行に対するユーザー・インタフェースの保存方法を定義します。

  親コンテナの1つによるスクロールの対象となるのではなく、リスト・ビューの高さを制限することで独自のスクロールを提供できる場合(「リスト・ビューで独自のスクロールを強制するには:」を参照)、以前は隠されていた行およびその内容をフェッチして表示します。リスト・ビューは、次のいずれかの方法でこれを実現します。

  • 隠し行の増加分を継続的にリストに追加する。

  • レンダリング・エンジン内で使用可能な追加行の数を制限し、リスト・ビューの表示可能領域(ビューポート)にある行のみを保存することで、MAFアプリケーションが使用するメモリーを減らします。

  この機能は、listViewのbufferStrategy属性を使用し、additive (メモリー消費を気にしない場合)またはviewport (メモリー使用量を減らそうとしている場合)のいずれかに設定することによって構成できます。後者の場合、スクロール中に新しい行の内容が表示されるまでに遅延が生じる可能性があります。空白行が表示される数を最小にするために、listViewのbufferSize属性を設定できます。この属性は、行が存在している必要のある、ビューポートから非表示になるまでの距離(ピクセル単位)を決定します。

リスト・ビューで独自のスクロールを強制するには:

• リスト・ビューを、パネル・ページの唯一の非ファセットの子にする。

• リスト・ビューに固定の高さを設定する。次に例を示します。

  inlineStyle="height: 200px;"
  

リスト・ビュー・コンポーネントのrangeChangeListener属性(第6.10項「イベント・リスナーの使用方法」を参照)では、「さらに行をロード」リンクがアクティブ化されている場合またはリスト・ビューが最後までスクロールされている場合のJavaハンドラ・メソッドをバインドできます。このメソッドは、oracle.adfmf.amx.event.RangeChangeEventオブジェクトをパラメータとして使用し、「プロパティ」ウィンドウから「プロパティの編集 - 範囲変更リスナー」ダイアログを起動したときに作成されます。

ダイアログで「OK」をクリックすると、MAF AMXページのlistView要素に次の設定が追加され、例6-45に示すJavaメソッドがサンプルHRBeanクラスに追加されます。

<amx:listView id="listView1" rangeChangeListener="#{pageFlowScope.HRBean.goGet}" >

例6-45 RangeChangeEventをトリガーするためのJavaメソッド

public void goGet(RangeChangeEvent rangeChangeEvent) {
   // Add event code here...
}

注意: rangeChangeListenerは、リスト・ビューによって新しいデータがフェッチされるたびにコールされます。RangeChangeEventを使用して、さらにデータが使用可能かどうかを定義できます(第6.10項「イベント・リスナーの使用方法」を参照)。

6.3.15.2 リスト・ビュー・アイテムの再配置

リスト・ビューのアイテムは再配置できます。この機能は、iOSとAndroidのプラットフォームで類似しており、どちらも各リスト・アイテムの右マージンに沿って整列した再配置アイコンが表示されます。再配置操作は、エンド・ユーザーがハンドルとして再配置アフォーダンスを使用してリスト・アイテムにタッチしてドラッグしたときに開始されます。この操作は、エンド・ユーザーが表示画面から指を離したときに完了します。

注意: エンド・ユーザーがリスト・アイテム上の他の場所をタッチしてドラッグした場合は、リストが上下にスクロールします。

再配置ドラッグ操作によって、リスト・アイテムがドッキング解除され、エンド・ユーザーがリスト内でリスト・アイテムを上下に移動できるようになります。

そのアイテムを再配置可能にするには、リスト・ビューが静的ではなく編集モードになっており、移動を許容可能になっている必要があります。

例6-46は、MAF AMXファイルで定義されているlistView要素を示しています。この定義によって、リスト・モードを編集可能と読取り専用の間で切り替えることができる「編集」および編集停止ボタンが上部に表示されたリストが提示されます。

例6-46 再配置可能なリスト・ビューの定義

<amx:panelPage id="pp1">
   <amx:commandButton id="edit" 
                      text="Edit"
                      rendered="#{!bindings.inEditMode.inputValue}">
      <amx:setPropertyListener id="spl1"
                               from="true"
                               to="#{bindings.inEditMode.inputValue}"
                               type="action"/>
   </amx:commandButton>
   <amx:commandButton id="stop"
                      text="Stop Editing"
                      rendered="#{bindings.inEditMode.inputValue}">
      <amx:setPropertyListener id="spl2"
                               from="false"
                               to="#{bindings.inEditMode.inputValue}" 
                               type="action"/>
   </amx:commandButton>
   <amx:listView id="lv1"
                 value="#{bindings.data.collectionModel}"
                 var="row"
                 editMode="#{bindings.inEditMode.inputValue}"
                 moveListener="#{MyBean.Reorder}">
      <amx:listItem id="li1">
         <amx:outputText id= "ot1" value="#{row.description}">
      </amx:listItem>
   </amx:listView>
</amx:panelPage>

詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.3.15.3 スタイルを使用したレイアウトの構成

MAF AMXページ・レイアウトを特定のパターンに合せるために、一連の事前定義済スタイルを使用するstyleClass属性(第6.6項「UIコンポーネントのスタイル設定」を参照)を介して定義される様々なタイプのリスト・ビュー・コンポーネントおよびスタイルを組み合せて使用できます。

UIDemoという名前のMAFサンプル・アプリケーションは、各コンポーネントのすべてのオプションのスタイルおよびそれに関連するレンダリングを示しています。UIDemoアプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。

例6-47は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-startTextに設定すると、出力テキスト・コンポーネントが行の開始(左)側に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-endTextに設定すると、出力テキスト・コンポーネントが行の終了(右)側に配置され、そのテキストに青いフォントが適用されます。右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この属性のデフォルト値はtrueであるため、この例にはこの設定は含まれていません。

例6-47 開始および終了テキストを持つリスト・ビューの定義

<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
   <amx:listItem id="listItem1">
      <amx:tableLayout id="tl1" width="100%">
         <amx:rowLayout id="rl1">
            <amx:cellFormat id="cf1s1" width="10px"/>
            <amx:cellFormat id="cf11" width="60%" height="43px">
               <amx:outputText id="outputText11" value="#{row.name}"/>
            </amx:cellFormat>
            <amx:cellFormat id="cf1s2" width="10px"/>
            <amx:cellFormat id="cf12" halign="end" width="40%">
               <amx:outputText id="outputText12" value="#{row.status}"
                               styleClass="adfmf-listItem-highlightText"/>
            </amx:cellFormat>
         </amx:rowLayout>
      </amx:tableLayout>
   </amx:listItem>
</amx:listView>

図6-32は、各行の開始(左)側と終了(右)側に異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、テキストの他に各リスト・アイテムを拡張するリンクを表す右向き矢印が配置されています。

図6-32 デザインタイムの開始および終了テキストを持つリスト・ビュー

例6-48は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-startTextに設定すると、出力テキスト・コンポーネントが行の開始に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-endTextに設定すると、出力テキスト・コンポーネントが行の終了に配置され、そのテキストに青いフォントが適用されます。それぞれの特定の行に右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この例では、この属性はすべてのlistItem要素に対してfalseに設定されているため、右向き矢印は表示されません。

例6-48 拡張リンクがない開始および終了テキストを持つリスト・ビューの定義

<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
   <amx:listItem id="listItem1" showLinkIcon="false">
      <amx:tableLayout id="tl1" width="100%">
         <amx:rowLayout id="rl1">
            <amx:cellFormat id="cf1s1" width="10px"/>
            <amx:cellFormat id="cf11" width="60%" height="43px">
               <amx:outputText id="outputText11" value="#{row.name}"/>
            </amx:cellFormat>
            <amx:cellFormat id="cf1s2" width="10px"/>
            <amx:cellFormat id="cf12" halign="end" width="40%">
               <amx:outputText id="outputText12" value="#{row.status}"
                               styleClass="adfmf-listItem-highlightText"/>
            </amx:cellFormat>
         </amx:rowLayout>
      </amx:tableLayout>
   </amx:listItem>
</amx:listView>

図6-33は、各行の開始と終了に異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、リンクを表す右向き矢印は含まれていません。

図6-33 デザインタイムの拡張リンクのない開始および終了テキストを持つリスト・ビュー

例6-49は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、終了テキストの下に配置されるサブテキストが含まれています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartTextに設定すると、出力テキスト・コンポーネントが行の左側に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-upperEndTextに設定すると、出力テキスト・コンポーネントが行の右側に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-captionTextに設定すると、出力テキスト・コンポーネントが、styleClass属性がadfmf-listItem-upperStartTextに設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。

例6-49 開始および終了テキストとサブテキストを持つリスト・ビューの定義

<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
   <amx:listItem id="listItem1">
      <amx:tableLayout id="tl1" width="100%">
         <amx:rowLayout id="rl11">
            <amx:cellFormat id="cf1s1" width="10px" rowSpan="2"/>
            <amx:cellFormat id="cf11" width="60%" height="28px">
               <amx:outputText id="outputTexta1" value="#{row.name}"/>
            </amx:cellFormat>
            <amx:cellFormat id="cf1s2" width="10px"/>
            <amx:cellFormat id="cf12" halign="end" width="40%">
               <amx:outputText id="outputTexta2" value="#{row.status}"
                               styleClass="adfmf-listItem-highlightText"/>
            </amx:cellFormat>
         </amx:rowLayout>
         <amx:rowLayout id="rl12">
            <amx:cellFormat id="cf13" columnSpan="3" width="100%" height="12px">
               <amx:outputText id="outputTexta3" 
                               value="#{row.desc}"
                               styleClass="adfmf-listItem-captionText"/>
            </amx:cellFormat>
         </amx:rowLayout>
      </amx:tableLayout>
   </amx:listItem>
</amx:listView>

図6-34は、各行の開始と終了に異なるスタイルのテキストが追加され、左側の終了テキストの下にサブテキストが追加されたリスト・ビュー・コンポーネントを示しています。

図6-34 デザインタイムの開始および終了テキストとサブテキストを持つリスト・ビュー

例6-50は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、メイン・テキストおよびサブテキストを含む行が移入されます。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-mainTextに設定すると、出力テキスト・コンポーネントが行の開始に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-captionTextに設定すると、出力テキスト・コンポーネントが、styleClass属性がadfmf-listItem-mainTextに設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。

例6-50 メイン・テキストとサブテキストを持つリスト・ビューの定義

<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
   <amx:listItem id="listItem1">
      <amx:tableLayout id="tla1" width="100%">
         <amx:rowLayout id="rla1">
            <amx:cellFormat id="cf1s1" width="10px" rowSpan="2"/>
            <amx:cellFormat id="cfa1" width="100%" height="28px">
               <amx:outputText id="outputTexta1" value="#{row.name}"/>
            </amx:cellFormat>
         </amx:rowLayout>
         <amx:rowLayout id="rla2">
            <amx:cellFormat id="cfa2" width="100%" height="12px" >
               <amx:outputText id="outputTexta2" value="#{row.desc}"
                               styleClass="adfmf-listItem-captionText"/>
            </amx:cellFormat>
         </amx:rowLayout>
      </amx:tableLayout>
   </amx:listItem>
</amx:listView>

図6-35は、各行にメイン・テキストとサブテキストとして異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。

図6-35 デザインタイムのメイン・テキストとサブテキストを持つリスト・ビュー

例6-51は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、アイコン、メイン・テキストおよびサブテキストを含むセルが移入されます。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-mainTextに設定すると、出力テキスト・コンポーネントが行の左側に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-captionTextに設定すると、出力テキスト・コンポーネントが、styleClass属性がadfmf-listItem-mainTextに設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。image要素の位置は、それが囲むcellFormatによって定義されます。

例6-51 アイコン、メイン・テキストおよびサブテキストを持つリスト・ビューの定義

<amx:listView id="lv1" value="#{myBean.listCollection}" var="row">
   <amx:listItem id="li1">
      <amx:tableLayout id="tl1" width="100%">
         <amx:rowLayout id="rl1">
            <amx:cellFormat id="cf1" rowSpan="2" width="40px" halign="center">
               <amx:image id="i1" source="#{row.image}"/>
            </amx:cellFormat>
            <amx:cellFormat id="cf2" width="100%" height="28px">
               <amx:outputText id="ot1" value="#{row.name}"/>
            </amx:cellFormat>
         </amx:rowLayout>
         <amx:rowLayout id="rl2">
            <amx:cellFormat id="cf3" width="100%" height="12px">
               <amx:outputText id="ot2" value="#{row.desc}"
                               styleClass="adfmf-listItem-captionText"/>
            </amx:cellFormat>
         </amx:rowLayout>
      </amx:tableLayout>
   </amx:listItem>
</amx:listView>

図6-36は、各行に、アイコンおよびメイン・テキストとサブテキストとして異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。

図6-36 デザインタイムのアイコン、メイン・テキストおよびサブテキストを持つリスト・ビュー

例6-52は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、各行の両側に配置されている2つの異なるタイプのテキストが含まれています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartTextに設定すると、出力テキスト・コンポーネントが行の左上隅に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-upperEndTextに設定すると、出力テキスト・コンポーネントが行の右上隅に配置され、そのテキストに大きいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerStartTextに設定すると、出力テキスト・コンポーネントが行の左下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerEndTextに設定すると、出力テキスト・コンポーネントが行の右下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この属性のデフォルト値はtrueであるため、この例にはこの設定は含まれていません。

例6-52 4つのタイプのテキストを持つリスト・ビューの定義

<amx:listView id="lv1" value="#{myBean.listCollection}" var="row">
   <amx:listItem id="li1">
      <amx:tableLayout id="tl1" width="100%">
         <amx:rowLayout id="rl1">
            <amx:cellFormat id="cf1" width="10px" rowSpan="2"/>
            <amx:cellFormat id="cf2" width="60%" height="28px">
               <amx:outputText id="ot1" value="#{row.name}"/>
            </amx:cellFormat>
            <amx:cellFormat id="cf3" width="10px" rowSpan="2"/>
            <amx:cellFormat id="cf4" width="40%" halign="end">
               <amx:outputText id="ot2" value="#{row.status}"
                               styleClass="adfmf-listItem-highlightText"/>
            </amx:cellFormat>
         </amx:rowLayout>
         <amx:rowLayout id="rla2">
            <amx:cellFormat id="cf5" width="60%" height="12px">
               <amx:outputText id="ot3" value="#{row.desc}"
                               styleClass="adfmf-listItem-captionText"/>
            </amx:cellFormat>
            <amx:cellFormat id="cf6" width="40%" halign="end">
               <amx:outputText id="ot4" value="#{row.priority}"
                               styleClass="adfmf-listItem-captionText"/>
            </amx:cellFormat>
         </amx:rowLayout>
      </amx:tableLayout>
   </amx:listItem>
</amx:listView>

図6-37は、各行の開始と終了に2つのタイプの異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、テキストの他に各リスト・アイテムを拡張するリンクを表す右向き矢印が配置されています。

図6-37 デザインタイムの4つのタイプのテキストを持つリスト・ビュー

例6-53は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、各行の両側に配置されている2つの異なるタイプのテキストが含まれています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartTextに設定すると、出力テキスト・コンポーネントが行の左上隅に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-upperEndTextに設定すると、出力テキスト・コンポーネントが行の右上隅に配置され、そのテキストに大きいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerStartTextNoChevronに設定すると、出力テキスト・コンポーネントが行の左下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerEndTextNoChevronに設定すると、出力テキスト・コンポーネントが行の右下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。それぞれの特定の行に右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この例では、この属性はすべてのlistItem要素に対してfalseに設定されているため、右向き矢印は表示されません。

例6-53 拡張リンクのない4つのタイプのテキストを持つリスト・ビューの定義

<amx:listView id="lv1" value="#{myBean.listCollection}" var="row">
   <amx:listItem id="li1" showLinkIcon="false">
      <amx:tableLayout id="tl1" width="100%">
         <amx:rowLayout id="rl1">
            <amx:cellFormat id="cf1" width="10px" rowSpan="2"/>
            <amx:cellFormat id="cf2" width="60%" height="28px">
               <amx:outputText id="ot1" value="#{row.name}"/>
            </amx:cellFormat>
            <amx:cellFormat id="cf3" width="10px" rowSpan="2"/>
            <amx:cellFormat id="cf4" width="40%" halign="end">
               <amx:outputText id="ot2" value="#{row.status}"
                               styleClass="adfmf-listItem-highlightText"/>
            </amx:cellFormat>
         </amx:rowLayout>
         <amx:rowLayout id="rl2">
            <amx:cellFormat id="cf5" width="60%" height="12px">
               <amx:outputText id="ot3" value="#{row.desc}"
                               styleClass="adfmf-listItem-captionText"/>
            </amx:cellFormat>
            <amx:cellFormat id="cf6" width="40%" halign="end">
               <amx:outputText id="ot4" value="#{row.priority}"
                               styleClass="adfmf-listItem-captionText"/>
            </amx:cellFormat>
         </amx:rowLayout>
      </amx:tableLayout>
   </amx:listItem>
</amx:listView>

図6-38は、各行の開始と終了に2つのタイプの異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。

図6-38 デザインタイムの拡張リンクのない4つのタイプのテキストを持つリスト・ビュー

6.3.15.4 静的リスト・ビューの使用方法に関する必知事項

モデルからではなくハードコード化された値によって移入されるリスト・ビュー・コンポーネントを作成する場合、このリスト・ビューは静的になり、デザインタイムに設定するそのプロパティのいくつか(たとえばdividerAttribute、dividerMode、fetchSize、moveListener)がランタイムに無視されるようになります。

MAF AMXでは、リスト・ビュー・コンポーネントのvalue属性が設定されていない場合、そのコンポーネントを静的であるとみなします。そのようなリストは編集できません(つまり、リストのeditMode属性を指定できません)。

6.3.16 カルーセル・コンポーネントの使用方法

カルーセル(carousel)コンポーネントは、回転カルーセルにイメージなどの他のコンポーネントを表示するために使用します。エンド・ユーザーは、スライダを使用するか、別のイメージを正面にドラッグすることでアクティブなアイテムを変更できます。

カルーセル・コンポーネントにはカルーセル・アイテム(carouselItem)コンポーネントが含まれており、text属性によって表されるそのテキストは、それがそのカルーセルのアクティブなアイテムであるときに表示されます。通常、カルーセル・アイテムにはイメージ・コンポーネントが含まれていますが、他のコンポーネントを使用することもできます。たとえば、イメージを囲む子としてリンクを使用することもできます。表示するオブジェクトごとにカルーセル・アイテム・コンポーネントを作成し、これらのコンポーネントを個々のオブジェクトにバインドするかわりに、カルーセル・コンポーネントを完全なコレクションにバインドします。その後、コンポーネントは各アイテムに値をスタンプすることで、1つのカルーセル・アイテム・コンポーネントを繰り返しレンダリングします。各アイテムがスタンプされると、現在のアイテムのデータが、EL式でカルーセル・コンポーネントのvar属性を使用して特定可能なプロパティにコピーされます。カルーセルのレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。カルーセル・コンポーネントにはnodeStampというファセットが含まれており、これは、各アイテムのテキストと短い説明の両方を表示するために使用されるカルーセル・アイテムのホルダーであり、各アイテムに表示されるイメージに対する親コンポーネントでもあります。

カルーセル・アイテムは、その子コンポーネントのみ拡大します。単一のイメージ・コンポーネントをカルーセル・アイテムの内部に配置する場合、イメージはそのアイテムに割り当てられた四角形に合せて拡大されます(エンド・ユーザーがカルーセルをスピンすると、これらのサイズが縮小または拡大されます)。

ヒント: アプリケーションのパフォーマンスの低下を最小限に抑えるは、重いコンポーネントを子として使用しないようにします。複雑な構造にすると、いくつかのカルーセル・アイテム・スタンプが同時に表示されるため、その影響が倍増します。

デフォルトでは、カルーセルは水平に表示されます。水平方向のカルーセル内にあるオブジェクトは中央に垂直に配置され、カルーセル自体はコンテナの中心に水平に配置されます。参照ローロデックスが必要な場合は、垂直に表示されるようにカルーセルを構成できます。デフォルトでは、垂直方向のカルーセル内にあるオブジェクトは中心に水平に配置され、カルーセル自体は中央に垂直に配置されます。カルーセルのorientation属性を使用してこの配置を変更できます。

前後のイメージを部分的に表示するかわりに、displayItems属性を使用して、フィルムストリップ・デザインまたは循環デザインでイメージを表示するようにカルーセルを構成することができます。

デフォルトでは、カルーセルが循環モードで表示するように構成されている場合、エンド・ユーザーが補助アイテム(現在、中央に表示されていないアイテム)にポインタを置くと、そのアイテムが枠で囲まれ選択可能であることが示されます。auxiliaryPopOut属性を使用すると、アイテムが移動し、最大サイズで表示されるように、カルーセルを構成できます。

Oracle Enterprise Pack for Eclipseでは、「カルーセル」は「パレット」のMAF AMXの下にあります(図6-39を参照)。

図6-39 「パレット」の「カルーセル」

カルーセル・コンポーネントを作成するには、表示するイメージを含むデータ・モデルを作成してから、カルーセルをそのモデルにバインドし、カルーセル・アイテム・コンポーネントをカルーセルのnodeStampファセットに挿入します。最後に、イメージ・コンポーネント(またはイメージ・コンポーネントを含むその他のコンポーネント)をカルーセル・アイテム・コンポーネントに子として挿入します。

例6-54は、MAF AMXファイルのcarousel要素の定義を示しています。carousel要素を定義するときは、carousel要素のnodeStampファセット内にcarouselItem要素を配置する必要があります。

例6-54 カルーセルの定義

<amx:carousel id="carousel1"
              value="#{bindings.products.collectionModel}"
              var="item"
              auxiliaryOffset="0.9"
              auxiliaryPopOut="hover"
              auxiliaryScale="0.8"
              controlArea="full"
              displayItems="circular"
              halign="center"
              valign="middle"
              disabled="false"
              shortDesc="spin"
              orientation="horizontal"
              styleClass="AMXStretchWidth"
              inlineStyle="height:250px;background-color:#EFEFEF;">
   <amx:facet name="nodeStamp">
      <amx:carouselItem id="item1" text="#{item.name}"
                        shortDesc="Product: #{item.name}">
         <amx:commandLink id="link1" action="goto-productDetails" 
                          actionListener="#{someMethod()}">
            <amx:image id="image1" styleClass="prod-thumb"
                       source="images/img-big-#{item.uid}.png"/>
            <amx:setPropertyListener id="spl1"
                                     from="#{item}"
                                     to="#{pageFlowScope.product}"
                                     type="action"/>
         </amx:commandLink>
      </amx:carouselItem>
   </amx:facet>
</amx:carousel>

カルーセル・コンポーネントでは、CollectionModelクラスを使用して基礎となるコレクションのデータにアクセスします。java.util.Listやarrayなどの他のモデル・クラスを使用することもできますが、その場合、カルーセルによってインスタンスが自動的にCollectionModelクラスに変換されますが、機能は追加されません。

スライダを使用することで、エンド・ユーザーはカルーセル・コレクションを移動できます。通常、スライダ上のサムにはオブジェクトの総数のうちの現在のオブジェクト番号が表示されます。オブジェクトの総数が大きすぎて計算できない場合、スライダ上のサムには現在のオブジェクト番号のみ表示されます。

詳細および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.17 フィルム・ストリップ・コンポーネントの使用方法

フィルム・ストリップ(filmStrip)は、グループ(ページ)のセット内に分散されたデータを垂直方向または水平方向に視覚化するコンテナ・コンポーネントです。グループに含まれるディスプレイ・アイテム(filmStripItem)を表すUIコンポーネントは、同じサイズおよびタイプである必要があり、一度に1つのグループのみを表示できます。エンド・ユーザーは、フィルム・ストリップのページを移動でき、アイテムを選択してタップすることでアクションを生成できます。

Oracle Enterprise Pack for Eclipseでは、「フィルム・ストリップ」は「パレット」のMAF AMXの下にあります(図6-40を参照)。

図6-40 「パレット」の「フィルム・ストリップ」

例6-55は、MAF AMXファイルのfilmStrip要素の定義を示しています。

例6-55 フィルム・ストリップの定義

<amx:filmStrip id="fs1"
               var="item"
               value="#{bindings.contacts.collectionModel}"
               rendered="#{pageFlowScope.pRendered}" 
               styleClass="#{pageFlowScope.pStyleClass}"
               inlineStyle="#{pageFlowScope.pInlineStyle}"
               shortDesc="#{pageFlowScope.pShortDesc}"
               halign="#{pageFlowScope.pFsHalign}"
               valign="#{pageFlowScope.pFsValign}"
               itemsPerPage="#{pageFlowScope.pMaxItems}" 
               orientation="#{pageFlowScope.pOrientation}">
   <amx:filmStripItem id="fsi1"
                      inlineStyle="text-align:center; width:200px;">
      <amx:commandLink id="ciLink" 
                       action="details" 
                       shortDesc="Navigate to details">
         <amx:image id="ciImage" source="images/people/#{item.first}.png"/>
         <amx:setPropertyListener id="spl1"
                                  from="#{item.rowKey}" 
                                  to="#{pageFlowScope.currentContact}" 
                                  type="action"/>
         <amx:setPropertyListener id="spl2"
                                  from="#{item.first}"
                                  to="#{pageFlowScope.currentContactFirst}"
                                  type="action"/>
         <amx:setPropertyListener id="spl3"
                                  from="#{item.last}"
                                  to="#{pageFlowScope.currentContactLast}"
                                  type="action"/>
      </amx:commandLink>
   </amx:filmStripItem>
</amx:filmStrip>

詳細および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.17.1 フィルム・ストリップ・レイアウトに関する必知事項

垂直に配置されたフィルム・ストリップでは、ディスプレイ・アイテムは上から下に配置されます。テキストの方向に応じて、ページ制御は次のように配置されます。

• テキストの方向が左から右の場合、ページ制御は右側に置かれます。

• テキストの方向が右から左の場合、ページ制御は左側に置かれます。

水平に配置されたフィルム・ストリップでは、テキストの方向モードを反映する必要があり、左から右モードでは最初のアイテムが左に置かれ、右から左モードでは最初のアイテムは右に置かれます。どちらの場合でも、ページ・ステータス・コンポーネントは一番下にあります。

6.3.17.2 フィルム・ストリップ・ナビゲーションに関する必知事項

フィルム・ストリップ・コンポーネントのナビゲーションはデック(第6.2.12項「デック・コンポーネントの使用方法」を参照)およびパネル・スプリッタ・コンポーネント(第6.2.9項「パネル・スプリッタ・コンポーネントの使用方法」を参照)と同様で、一度に1ページが表示され、ページの変更はページIDまたは番号の選択によってトリガーされます。

子フィルム・ストリップ・アイテム・コンポーネントは、他のMAF AMXページに移動するための使用は想定されていないため、action属性をサポートしていません。必要な場合は、ネストされているコマンド・リンク・コンポーネントを介してナビゲーションを有効化できます。

6.3.18 Verbatimコンポーネントの使用方法

該当するコンポーネントが存在しない場合や自身でHTMLを使用してレイアウトする必要がある場合は、Verbatim (verbatim)操作を使用して独自のHTMLをページに挿入できます。

Oracle Enterprise Pack for Eclipseでは、「Verbatim」は「パレット」のMAF AMXの下にあります(図6-41を参照)。

図6-41 「パレット」の「Verbatim」

詳細および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.18.1 JavaScriptおよびAJAXのVerbatimコンポーネントでの使用に関する必知事項

JavaScriptを直接Verbatimコンテンツ(amx:verbatim要素内)に挿入することは、現在サポートされているプラットフォームの今後のバージョンまたはMAFが今後サポートする可能性のあるその他のプラットフォームで正しく実行されない可能性があるため推奨されていません。かわりに、maf-feature.xmlファイルにある既存のadfmf:include要素を介してJavaScriptおよびCSS包含を実行する必要があり、これにより、MAF AMXアプリケーション機能の起動時にスクリプトが確実にページに挿入されます。

さらに、VerbatimコンポーネントでのJavaScriptの使用は、AMXページからサーバーへのAJAXコールがサポートされていないために影響を受けます。これは、セキュリティ・アーキテクチャによるもので、これによってMAF AMXページをホストするブラウザが、そのリソースを取得するためにセキュア・サーバーに接続するために必要なセキュリティ情報に対してアクセス権を持たないことが保証されます。かわりに、サーバーとの通信は、埋込みJavaコード層から発生する必要があります。

6.3.19 出力HTMLコンポーネントの使用方法

出力HTML (outputHtml)コンポーネントでは、HTMLコンテンツをMAF AMXページに表示するために、ELでバインドされたプロパティまたはメソッドから動的および安全に取得できます。出力HTMLコンポーネントはVerbatimコンポーネント(第6.3.18項「Verbatimコンポーネントの使用方法」を参照)と同様に動作し、JavaScriptおよびAJAXの使用に関して同じ制限が適用されます(第6.3.18.1項「JavaScriptおよびAJAXのVerbatimコンポーネントでの使用に関する必知事項」を参照)。

Oracle Enterprise Pack for Eclipseでは、「出力HTML」は「パレット」のMAF AMXの下にあります(図6-42を参照)。

図6-42 「コンポーネント」ウィンドウの「出力HTML」

例6-56は、MAF AMXファイルのoutputHtml要素の定義を示しています。value属性は、文字列プロパティに対してELバインディングを提供し、これは、MAF AMXページの最終レンダリングのoutputHTMLとして表示されるHTMLコンテンツを取得するために使用されます。

例6-56 出力HTMLの定義

<amx:tableLayout id="t1" width="100%">
   <amx:rowLayout id="r1">
      <amx:cellFormat id="cf1" width="100%">
         <amx:outputHtml id="ReceiptView"
                         value="#{pageFlowScope.purchaseBean.htmlReceiptView}"/>
      </amx:cellFormat>
   </amx:rowLayout>
   <amx:rowLayout id="r2">
      <amx:cellFormat id="cf2" width="100%">
         <amx:outputHtml id="CheckView"
                         value="#{pageFlowScope.purchaseBean.htmlCheckView}"/>
      </amx:cellFormat>
   </amx:rowLayout>
</amx:tableLayout>

例6-57は、出力HTMLコンポーネント(例6-56を参照)にHTMLを提供するMyPurchaseBeanというJava Beanのコードを示しています。

例6-57 HTMLの取得

// The property accessor that gets the receipt view HTML
public String getHtmlReceiptView() {
   // Perform some URL remote call to get the HTML to be
   // inserted as a view of the Receipt and return that value
   return obtainReceiptHTMLFromServer();
}
// The property accessor that gets the check view HTML
public String getHtmlCheckView() {
   // Perform some URL remote call to get the HTML to be
   // inserted as a view of the Check and return that value
   return obtainCheckHTMLFromServer();
}

出力HTMLコンポーネントは、リモート・リソースから直接ダウンロードするのではなく、Java BeanプロパティからそのHTMLコンテンツを取得するため、動的に提供されたHTMLの取得や生成をコーディングする際に既存のMAFセキュリティ機能を使用することを検討してください。詳細は、第21章「モバイル・アプリケーションの保護」を参照してください。さらに、提供されるHTMLが信頼できるソースのものであり、脅威がないことを確認してください。

詳細および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.20 反復の有効化方法

イテレータ(iterator)操作を使用して、同じ種類のデータを持つ任意の数のアイテムをスタンプします。これによりデータを繰り返し処理して各要素のUIを作成できます。

Oracle Enterprise Pack for Eclipseでは、「イテレータ」は「パレット」のMAF AMXの下にあります。

詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.3.21 リソース・バンドルのロード方法

バンドルのロード(loadBundle)操作によって、ページ上のMAF AMX UIコンポーネントにローカライズ済テキストを提供するリソース・バンドルを指定できます。詳細は、第6.7項「UIコンポーネントのローカライズ」を参照してください。

Oracle Enterprise Pack for Eclipseでは、「バンドルのロード」は「パレット」のMAF AMXの下にあります(図6-43を参照)。

図6-43 「パレット」の「バンドルのロード」

MAF AMXファイル内で、loadBundle要素をview要素の子として宣言します。

詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.3.22 アクション・リスナーの使用方法

アクション・リスナー(actionListener)コンポーネントにより、親コンポーネントが使用するタイプに基づいてELを介して宣言でコマンドを呼び出すことができます。

アクション・リスナー・コンポーネントを使用する重要な理由は、ジェスチャー・サポート・アクションを親コンポーネントに追加できること、および1つのジェスチャー(タップを含む)で複数の操作を実行できる機能です。詳細は、第6.3.22.1項「アクション・リスナー・コンポーネントと属性間の相違点に関する必知事項」を参照してください。

Oracle Enterprise Pack for Eclipseでは、「アクション・リスナー」コンポーネントは「パレット」のMAF AMXの下にあります(図6-44を参照)。

図6-44 「パレット」の「アクション・リスナー」

0(ゼロ)以上のアクション・コンポーネントを任意のコマンド・コンポーネント(ボタン、リンク、リスト・アイテム、フィルム・ストリップ・アイテムおよびデータ視覚化コンポーネントのサブセット)の子として追加できます。アクション・リスナー・コンポーネントのtype属性は、ActionEventを作動させるジェスチャー(swipeLeft、swipeRight、tapHoldなど)を定義します。

詳細は、次を参照してください。

• 第6.10項「イベント・リスナーの使用方法」

• 第6.3.23項「プロパティ・リスナーの設定の使用方法」

• 第6.4項「ジェスチャーの有効化」

• 第6.3.22.1項「アクション・リスナー・コンポーネントと属性間の相違点に関する必知事項」

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

6.3.22.1 アクション・リスナー・コンポーネントと属性間の相違点に関する必知事項

ボタン、リンク、リスト・アイテムなどのコンポーネントにはactionListener属性があり、これは、アクション・リスナー・コンポーネントを冗長にする可能性があります。ただし、アクション・リスナー・コンポーネントとは異なり、これらのコンポーネントにはジェスチャーをサポートするtype属性がないため、MAFでは、親コンポーネントのactionListener属性に加えて、アクション・リスナー・コンポーネントが提供されています。

6.3.23 プロパティ・リスナーの設定の使用方法

プロパティ・リスナーの設定(setPropertyListener)コンポーネントによって、コンポーネントでのエンド・ユーザー・アクションを受けて、1つの場所(コンポーネントのfrom属性で定義)から別の場所(コンポーネントのto属性で定義)に宣言的に値をコピーできるため、同じ結果を得るためにJavaコードを記述する必要がありません。

Oracle Enterprise Pack for Eclipseでは、「プロパティ・リスナーの設定」コンポーネントは「パレット」のMAF AMXの下にあります(図6-45を参照)。

図6-45 「パレット」の「プロパティ・リスナーの設定」

例6-58は、MAF AMXファイルのsetPropertyListener要素の定義を示しています。

例6-58 プロパティ・リスナーの設定の定義

<amx:listView value="#{bindings.products.collectionModel}" var="row" id="lv1">
   <amx:listItem id="li1" action="details">
      <amx:outputText value="#{row.name}" id="ot1" />
      <amx:setPropertyListener id="spl1"
                               from="#{row}"
                               to="#{pageFlowScope.product}"
                               type="action"/>
   </amx:listItem>
</amx:listView>

0(ゼロ)以上のプロパティ・リスナーの設定コンポーネントを任意のコマンド・コンポーネント(ボタン、リンク、リスト・アイテム、フィルム・ストリップ・アイテムおよびデータ視覚化コンポーネントのサブセット)の子として追加できます。プロパティ・リスナーの設定コンポーネントのtype属性は、ActionEventを作動させるジェスチャー(swipeLeft、swipeRight、tapHoldなど)を定義します。

詳細は、次を参照してください。

• 第6.10項「イベント・リスナーの使用方法」

• 第6.3.22項「アクション・リスナーの使用方法」

• 第6.4項「ジェスチャーの有効化」

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

6.3.24 日時の変換方法

日時の変換(convertDateTime)は、独立したUIコンポーネントではありません。これは、出力テキストおよび入力テキスト・コンポーネントと組み合せて使用して、指定されたパターンに従った様々な書式で、変換された日付、時刻または日時の組合せを表示するコンバータ操作です。

Oracle Enterprise Pack for Eclipseでは、「日時の変換」は「パレット」のMAF AMXの下にあります(図6-46を参照)。

図6-46 「パレット」の「日時の変換」

例6-59は、MAF AMXファイルで宣言されているconvertDateTime要素を示しています。

例6-59 日時の変換の使用方法

<amx:panelPage id="pp1">
   <amx:inputText styleClass="ui-text" value="Order Date" id="it1" >
      <amx:convertDateTime id="cdt1" type="both"/>
   </amx:inputText>
</amx:panelPage>

日時値を変換するには:

1. 「コンポーネント」ウィンドウから、「日時の変換」コンポーネントをドラッグして「出力テキスト」コンポーネントまたは「入力テキスト」コンポーネント内に挿入し、それをそのコンポーネントの子要素にします。

2. 日時の変換コンポーネントに対して「プロパティ」エディタを開き、その属性を定義します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

注意: 日時の変換コンポーネントは、デザインタイムには何の効果も持ちません。

日時の変換コンポーネントでは、入力値文字列を日付に変換する際に一定レベルの寛容性があります。

• 月に対して関連付けられたパターンMMMを持つコンバータは、値のホルダーに添付されると、MMまたはMの形で指定された月の値を有効な値として受け入れます。

• 関連付けられたパターンで指定されているセパレータに関係なく、ダッシュ( - )、ピリオド( . )、スラッシュ( / )などのセパレータを使用できます。

• パターン定義における寛容性は、pattern属性で設定します。

たとえば、コンバータのパターンが"MMM/d/yyyy"に設定されている場合、次の入力はコンバータにより有効なものとして許容されます。

Jan/4/2004
Jan-4-2004
Jan.4.2004
01/4/2004
01-4-2004
01.4.2004
1/4/2004
1-4-2004
1.4.2004

コンバータでは、java.text.SimpleDateFormat (dateStyle、timeStyleおよびpattern属性を使用して指定される)と同じ解析および書式設定規則がサポートされています。ただし、タイムゾーンが、timeStyle=fullなどの長い表示またはzzzzで設定されるパターンを持つように指定されている場合は例外です。タイムゾーンは太平洋標準時のような長い説明の文字列ではなく、一般的なタイムゾーン形式(GMT +/- オフセット)またはRFC-822タイムゾーンで表示されます。

変換の正確な結果は、ロケールによって異なりますが、一般的に次のルールが適用されます。

• SHORTは、12.13.52や3:30pmなど完全に数値です。

• MEDIUMはそれより長いJan 12、1952などです。

• LONGは、それよりも長いJanuary 12、1952、3:30:32pmなどです。

• FULLは、完全に指定されたTuesday, April 12, 1952 ADや3:30:42pm PSTなどです。

6.3.24.1 日時パターンに関する必知事項

java.text.SimpleDateFormat定義に従って、日時書式を、日時パターン文字列で指定します。日時パターン文字列では、引用符で囲まれていないAからZおよびaからzの文字は、日付または時間の文字列のコンポーネントを表すパターン文字と認識されます。テキストは、解釈されないように一重引用符(')で囲むことができます。" ' ' "は一重引用符を表します。すべてのその他の文字は解釈されません。かわりに、それらは書式設定中に単に出力文字列にコピーされるか、解析中に入力文字列と照合されます。

表6-9は、定義済パターン文字を示しています(AからZおよびaからzのすべてのその他の文字は予約されています)。

表6-9 日時パターン文字

文字	日付または時刻のコンポーネント	表示内容	例
G	紀元	テキスト	AD
y	年	年	1996 96
M	年における月	月	July Jul 07
w	年における週	数値	27
W	月における週	数値	2
D	年における日	数値	189
d	月における日	数値	10
F	月における曜日	数値	2
E	曜日	テキスト	Tuesday Tue
a	午前/午後	テキスト	PM
H	1日における時間(0-23)	数値	0
k	1日における時間(1-24)	数値	24
K	午前/午後の時(0 - 11)	数値	0
h	午前/午後の時(1 - 12)	数値	12
m	1時間における分	数値	30
s	1分における秒	数値	55
S	ミリ秒	数値	978
z	タイムゾーン	一般的なタイムゾーン	太平洋標準時 PST GMT-08:00
Z	タイムゾーン	RFC 822タイムゾーン	-0800

パターン文字は通常繰り返されます。これは、それらの数が正確な表示を決定するためです。

6.3.25 数値の変換方法

数値の変換(convertNumber)は、独立したUIコンポーネントではなく、出力テキストおよび入力テキスト、入力テキストおよび入力数値スライダの各コンポーネントと組み合せて使用して、次の指定されたパターンに従った様々な書式で、変換された数値または通貨値を表示するコンバータ操作です。

数値の変換コンポーネントは、次のタイプの操作を提供します。

• 値から文字列。表示目的です。

• 書式設定された文字列から値。書式設定された入力値が、基礎となっている値に解析される場合です。

数値の変換が、入力テキスト・コンポーネントの子として指定されている場合、デフォルトで、モバイル・デバイスに数字キーボードが表示されます。

Oracle Enterprise Pack for Eclipseでは、「数値の変換」は「パレット」のMAF AMXの下にあります(図6-47を参照)。

図6-47 「コンポーネント」ウィンドウの「数値の変換」

例6-60は、MAF AMXファイルで定義されているconvertNumber要素を示しています。

例6-60 数値の変換の使用方法

<amx:panelPage id="pp1">
   <amx:inputText styleClass="ui-text" value="Product Price" id="it1" >
      <amx:convertNumber id="cn1"
                         type="percent" 
                         groupingUsed="false" 
                         integerOnly="true"/>
   </amx:inputText>
</amx:panelPage>

数値を変換するには:

1. 「コンポーネント」ウィンドウから、「数値の変換」コンポーネントをドラッグして「出力テキスト」コンポーネント、「入力テキスト」コンポーネントまたは「入力数値スライダ」コンポーネント内に挿入し、それをそのコンポーネントの子要素にします。

2. 数値の変換コンポーネントに対して「プロパティ」エディタを開き、その属性を定義します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

注意: 数値の変換コンポーネントは、デザインタイムには何の効果も持ちません。

6.3.26 ドラッグ・ナビゲーションの有効化

ナビゲーション・ドラッグ動作(navigationDragBehavior)の処理では、モバイル・デバイスの画面を指定された方向(左または右)にドラッグすることで、次または前のMAF AMXページに移動するアクションを起動できます。指定された方向へのドラッグが発生するとインジケータが画面の適切な側に表示され、引き続きドラッグしてインジケータが完全に表示されたときに停止するとアクションが実行されることを示します。インジケータが完全に表示される前にドラッグを放すと、インジケータがスライドされ、アクションは起動されません。

注意: ドラッグ・ジェスチャーを消費する近いコンテナが他にない場合、この動作は発生しません。

MAF AMXページには、navigationDragBehavior要素の3つ以上のインスタンスを含むことはできず、1つはdirection属性をbackに設定したもので、もう1つはforwardに設定したものです。

Oracle Enterprise Pack for Eclipseでは、「ナビゲーション・ドラッグ動作」は「パレット」のMAF AMXの下にあります(図6-48を参照)。

図6-48 「パレット」の「ナビゲーション・ドラッグ動作」

例6-61は、MAF AMXファイルで定義されているnavigationDragBehavior要素を示しています。この要素は、view要素の子にのみなれることに注意してください。

例6-61 ドラッグ・ナビゲーション動作の使用方法

<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:navigationDragBehavior id="ndb1"
                               direction="forward"
                               action="gotoDetail"/> Foot 1 
   <amx:panelPage id="pp1">
      <amx:facet name="header">
      ...
   </amx:panelPage>
</amx:view>

図6-49は、実行時のドラッグ・ナビゲーション動作を示しています(mobileFusionFxスキンを使用して表示)。

図6-49 実行時のドラッグ・ナビゲーション動作の処理

詳細および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.3.26.1 disabled属性に関する必知事項

disabled属性(例6-62および例6-63を参照)の値は、次のいずれかの発生時に計算されます。

• MAF AMXページがレンダリングされる。

• PropertyChangeListenerがコンポーネントを更新する: エンド・ユーザーのナビゲーション・ドラッグ動作を起動する機能を動的に有効化または無効化する場合、PropertyChangeListenerを使用します(Beanからの更新が必要な他のコンポーネントで使用される方法と同様)。

例6-62は、無効化属性が定義されたnavigationDragBehavior要素を含むMAF AMXページを示しています。この機能は、ボタン(commandButton)によって起動され、このボタンは、アクティブ化されると、バッキングBeanのboolean値(例6-63ではnavDisabled)を変更し、disabled属性はここから値を読み取ります。その後、バッキングBeanはPropertyChangeListenerを使用します。

例6-62 MAF AMXページで属性が無効化されているナビゲーション・ドラッグ動作

<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="Header1" id="ot1"/>
      </amx:facet>
      <amx:commandButton id="cb1"
                         text="commandButton1"
                         actionListener="#{pageFlowScope.myBean.doSomething}"/>
   </amx:panelPage>
   <amx:navigationDragBehavior id="ndb1" 
                               direction="forward" 
                               action="goView2"
                               disabled="#{pageFlowScope.myBean.navDisabled}"/>
</amx:view>

例6-63は、navigationDragBehaviorのdisabled属性に値を提供するバッキングBean (例6-62ではmyBean)を示しています。

例6-63 ナビゲーション・ドラッグ動作の無効化機能のためのバッキングBean

public class MyBean {
   boolean navDisabled = true;
   private PropertyChangeSupport propertyChangeSupport = 
                                    new PropertyChangeSupport(this);

   public void setNavDisabled(boolean navDisabled) {
      boolean oldNavDisabled = this.navDisabled;
      this.navDisabled = navDisabled;
      propertyChangeSupport.firePropertyChange("navDisabled", 
                                               oldNavDisabled, 
                                               navDisabled);
   }

   public boolean isNavDisabled() {
      return navDisabled;
   }

   public void doSomething(ActionEvent actionEvent) {
      setNavDisabled(!navDisabled);
   }

   public void addPropertyChangeListener(PropertyChangeListener l) {
      propertyChangeSupport.addPropertyChangeListener(l);
   }

   public void removePropertyChangeListener(PropertyChangeListener l) {
      propertyChangeSupport.removePropertyChangeListener(l);
   }
}

6.3.27 ロード・インジケータの使用方法

ロード・インジケータ動作(loadingIndicatorBehavior)の処理では、次のことをオーバーライドすることで、ロード・インジケータの動作を定義できます。

• フェイルセーフ・タイマーの持続時間(ミリ秒単位)。

• フェイルセーフしきい値に達した場合に、アクションの方針の決定するために起動できるオプションのJavaScript関数名。

詳細は、表11-1「静的API」のadf.mf.api.amx.showLoadingIndicatorを参照してください。

Oracle Enterprise Pack for Eclipseでは、「ロード・インジケータ動作」は「パレット」のMAF AMXの下にあります(図6-50を参照)。

図6-50 「パレット」の「ロード・インジケータ動作」

例6-64は、MAF AMXファイルで定義されているloadingIndicatorBehavior要素を示しています。この要素は、view要素の子にのみなれることに注意してください。

例6-64 ロード・インジケータ動作の使用方法

<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:loadingIndicatorBehavior id="lib1"
                        failSafeDuration="3000"
                        failSafeClientHandler="window.customFailSafeHandler"/>
   <amx:panelPage id="pp1">
      <amx:facet name="header">
      <!-- The loading indicator custom fail safe handler will appear 
           if the long running operation runs longer than 3 seconds -->
      <amx:commandButton id="cb1" 
                         text="longRunningOperation"
                         actionListener=
                               "#{pageFlowScope.myBean.longRunningOperation} />
   </amx:panelPage>
</amx:view>

前述の例では、commandButtonは長時間実行メソッドにバインドされ、ページがロードされると、ロード・インジケータが実行時間の長い操作に適用されることを示しています(ページ自体のロードに時間がかかる場合ではなく)。

例6-65は、アプリケーション機能が含まれているcustom.jsファイルを示しています。これは、loadingIndicatorBehaviorページでfailSafeClientHandlerのクライアント・ハンドラを定義します。API要件によって、この関数はhide、repeatまたはfreezeのいずれかのStringを返します。詳細は、表11-1「静的API」のadf.mf.api.amx.showLoadingIndicatorを参照してください。

例6-65 custom.jsファイルのサンプル

window.customFailSafeHandler = function() { 
   var answer =
      prompt(
         "This is taking a long time.\n\n" +
         "Use \"a\" to hide the indicator.\n" +
         "Use \"z\" to wait for it.\n" +
         "Otherwise, give it more time.");

   if (answer == "a")
      return "hide"; // don't ask again; hide the indicator
   else if (answer == "z") 
      return "freeze" // don't ask again; wait for it to finish
   else 
      return "repeat"; // ask again after another duration
};

詳細および例は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

• 「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery

6.4 ジェスチャーの有効化

次のジェスチャーに反応するために、ボタン、リンク、リスト・アイテムおよび多数のデータ視覚化の各コンポーネントを構成できます。

• 右方向にスワイプ

• 左方向にスワイプ

• 上方向にスワイプ

• 下方向にスワイプ

• タップしたまま押さえる

• 始点方向にスワイプ: このジェスチャーは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。このジェスチャーは、次のように解決されます。

  • テキスト方向が左から右である場合、左方向にスワイプします。

  • テキスト方向が右から左である場合、右方向にスワイプします。

• 終点方向にスワイプ: このジェスチャーは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。このジェスチャーは、次のように解決されます。

  • テキスト方向が左から右である場合、右方向にスワイプします。

  • テキスト方向が右から左である場合、左方向にスワイプします。

次の操作のtype属性に対して、swipeRight、swipeLeft、swipeUp、swipeDown、swipeStart、swipeEndおよびtapHold値を定義できます。

• プロパティ・リスナーの設定(第6.3.23項「プロパティ・リスナーの設定の使用方法」を参照)

• アクション・リスナー(第6.3.22項「アクション・リスナーの使用方法」を参照)

• ポップアップ表示動作(第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• ポップアップを閉じる動作(第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

type属性の値は親コンポーネントに基づいて制限されており、リンク(commandLink)およびリスト・アイテム(listItem)のコンポーネントに対してのみサポートされています。

注意: リンク(実行) (linkGo)コンポーネントに対するジェスチャー・サポートはありません。

始点方向にスワイプと終点方向にスワイプは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。通常は、左と右ではなく、始点と終点のスワイプ・スタイルを設定することをお薦めします。

例6-66は、MAF AMXファイルのtype属性のtapHold値の使用を示しています。この例では、タップしたまま押さえるジェスチャーによってポップアップ・コンポーネントの表示がトリガーされます。

例6-66 タップしたまま押さえるジェスチャーの使用方法

<amx:panelPage id="pp1">
   <amx:listView id="lv1"
                 value="#{bindings.data.collectionModel}" 
                 var="row">
      <amx:listItem id="li1" action="gosomewhere">
         <amx:outputText id="ot1" value="#{row.description}"/>
         <amx:setPropertyListener id="spl1"
                                  from="#{row.rowKey}"
                                  to="#{mybean.currentRow}"
                                  type="tapHold"/>
         <amx:showPopupBehavior id="spb1"
                                type="tapHold"
                                alignid="pp1"
                                popupid="pop1"
                                align="startAfter"/>
      </amx:listItem>
   </amx:listView>>
</amx:panelPage>
<amx:popup id="pop1">
   <amx:panelGroupLayout id="pgl1" layout="horizontal">
      <amx:commandLink id="cm1" actionListener="#{mybean.doX}">
         <amx:image id="i1" source="images/x.png"/>
         <amx:closePopupBehavior id="cpb1" type="action" popupid="pop1"/>
      </amx:commandLink>
      <amx:commandLink id="cm2" actionListener="#{mybean.doY}">
         <amx:image id="i2" source="images/y.png"/>
         <amx:closePopupBehavior id="cpb2" type="action" popupid="pop1"/>
      </amx:commandLink>
      <amx:commandLink id="cm3" actionListener="#{mybean.doZ}">
         <amx:image id="i3" source="images/y.png"/>
         <amx:closePopupBehavior id="cpb3" type="action" popupid="pop1"/>
      </amx:commandLink>
   </amx:panelGroupLayout>
</amx:popup>

例6-67は、MAF AMXファイル内のswipeRightジェスチャーの使用方法を示しています。

例6-67 右方向にスワイプ・ジェスチャーの使用方法

<amx:panelPage id="pp1">
   <amx:listView id="lv1"
                 value="#{bindings.data.collectionModel}" 
                 var="row">
      <amx:listItem id="li1" action="gosomewhere">
         <amx:outputText id="ot1" value="#{row.description}"/>
         <amx:setPropertyListener id="spl1" 
                                  from="#{row.rowKey}"
                                  to="#{mybean.currentRow}"
                                  type="swipeRight"/>
         <actionListener id="al1" binding="#{mybean.DoX}" type="swipeRight"/>
      </amx:listItem>
   </amx:listView>>
</amx:panelPage>

詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

GestureDemoという名前のMAFサンプル・アプリケーションは、様々なMAF AMX UIコンポーネントでのジェスチャーの使用方法を示しています。このサンプル・アプリケーションは、「ファイル」→「新」→「MAFサンプル」にあるアプリケーションです。

6.5 データ視覚化の指定

MAFでは、データ視覚化コンポーネントのセットを様々なチャート、ゲージおよびマップの作成に使用して、MAF AMXアプリケーション機能のデータを表すことができます。MAF AMXファイルの<dvtm>ネームスペースの下で次の要素を宣言できます。

• areaChart (第6.5.1項「面グラフの作成方法」を参照)

• barChart (第6.5.2項「棒グラフの作成方法」を参照)

• horizontalBarChart (第6.5.3項「横棒グラフの作成方法」を参照)

• bubbleChart (第6.5.4項「バブル・チャートの作成方法」を参照)

• comboChart (第6.5.5項「コンポ・チャートの作成方法」を参照)

• lineChart (第6.5.6項「線グラフの作成方法」を参照)

• pieChart (第6.5.7項「円グラフの作成方法」を参照)

• scatterChart (第6.5.8項「散布図の作成方法」を参照)

• sparkChart (第6.5.9項「スパーク・チャートの作成方法」を参照)

• funnelChart (第6.5.10項「ファンネル・チャートの作成方法」を参照)

• ledGauge (第6.5.13項「LEDゲージの作成方法」を参照)

• statusMeterGauge (第6.5.14項「ステータス・メーター・ゲージの作成方法」を参照)

• dialGauge (第6.5.15項「ダイアル・ゲージの作成方法」を参照)

• ratingGauge (第6.5.16項「評価ゲージの作成方法」を参照)

• geographicMap (第6.5.18項「地理マップ・コンポーネントの作成方法」を参照)

• thematicMap (第6.5.19項「テーマ・マップ・コンポーネントの作成方法」を参照)

• treemap (第6.5.21項「ツリーマップ・コンポーネントの作成方法」を参照)

• sunburst (第6.5.22項「サンバースト・コンポーネントの作成方法」を参照)

• timeline (第6.5.23項「時系列コンポーネントの作成方法」を参照)

• nBox (第6.5.24項「NBoxコンポーネントの作成方法」を参照)

チャート、ゲージ、マップおよび拡張コンポーネント要素には、すべてまたはほとんどに共通の多数の属性があります。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

Oracle Enterprise Pack for Eclipseでは、データ視覚化コンポーネントは「パレット」の「MAF AMXデータ視覚化」の下にあります。すべてのデータ視覚化コンポーネントを表示するには、スクロール・バーを使用します。

図6-51 「パレット」のデータ視覚化コンポーネント

データ視覚化コンポーネントをトラック・アンド・ドロップすると、次のようなダイアログの1つが開き、作成しているコンポーネントのタイプに関する情報が表示されます。

• モバイル・チャートの作成

• モバイル・ゲージの作成

• コンポーネント・ギャラリ

• サンバーストの作成またはツリーマップ

注意: コンポーネントの作成後、ソース・エディタまたは構造ビューでそのコンポーネントを選択し、「プロパティ」ウィンドウで「コンポーネント定義の編集」をクリックすることによって、作成ダイアログを再起動できます。 「プロパティ」ウィンドウで提供される同一の編集機能を使用すると、いくつかのデータ視覚化コンポーネントの子コンポーネント(データ・ポイント・レイヤーなど)を編集できます。

CompGalleryというMAFサンプル・アプリケーションは、MAF AMXアプリケーション機能での様々なデータ視覚化コンポーネントの使用方法を示しています。このサンプル・アプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。

MAF AMXデータ視覚化コンポーネントの詳細は、次を参照してください:

• イベント・リスナーをデータ視覚化コンポーネントに追加する方法の詳細は、第6.10項「イベント・リスナーの使用方法」を参照してください。イベント・リスナーは、iOSとAndroidのどちらのデバイスでもMAF AMX実行時の記述のためにコンポーネントに適用できますが、それらのリスナーはデザインタイムでは何の効果も持ちません。

• 「データ・コントロール」ウィンドウから作成されるデータバインドされたデータ視覚化コンポーネントの詳細は、第6.5.26項「データバインドされたデータ視覚化コンポーネントの作成方法」を参照してください。

• データ視覚化コンポーネントにおけるアクセシビリティのサポートの詳細は、第6.8項「MAFのアクセシビリティのサポートの理解」を参照してください。

• MAF AMXデータ視覚化コンポーネントの使用上の制約の詳細は、第D.6.2項「データ視覚化コンポーネントの制限」を参照してください。

6.5.1 面グラフの作成方法

面グラフ(areaChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けれされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、面の色やパターンなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。カスタム系列スタイルの定義の詳細は、第6.5.6項「線グラフの作成方法」を参照してください。

面グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

例6-68は、MAF AMXファイルで定義されているareaChart要素を示しています。デフォルト系列スタイルで基本的な面グラフを作成するには、それにコレクションを渡し、chartDataItem要素をネストしたdataStampファセットを指定します。

例6-68 デフォルト系列スタイルを持つ面グラフの定義

<dvtm:areaChart id="areaChart1"
                value="#{bindings.lineData.collectionModel}"
                var="row" 
                inlineStyle="width: 400px; height: 300px;"
                animationOnDisplay="auto"
                animationDuration="1500" >
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="areaChartItem1"                          series="#{row.series}"
                          group="#{row.group}" 
                          value="#{row.value}" />
   </amx:facet>
   <dvtm:yAxis id="yAxis1"
               axisMaxValue="80.0" 
               majorIncrement="20.0" 
               title="yAxis Title" />
   <dvtm:legend id="l1" position="end" />
</dvtm:areaChart>

図6-52 デザインタイムの面グラフ

データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrowに次のプロパティが含まれている必要があります。

• series: このデータ・アイテムが属する系列の名前。

• group: このデータ・アイテムが属するグループの名前。

• value: データ・アイテムの値。

コレクションのrowには、個々のデータ・アイテムに適用可能なcolorやshapeなどの他のプロパティも含めることができます。

例6-69に示すように、属性グループ(attributeGroups要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、データ・アイテムのcolorおよびshape属性が、追加のグループ化式に基づいて設定されます。attributeGroupsには、次の子要素があります。

• dvtmネームスペースのattributeExceptionRule: 特定のブール条件が満たされる場合に、属性値を別の値に置き換えます。

• dvtmネームスペースのattributeMatchRule: データが特定の値に一致する場合に、属性を置き換えます。

• amxネームスペースのattribute。

例6-69 デフォルト系列スタイルおよびグループ化を含む面グラフの定義

<dvtm:areaChart id="areaChart1"
                value="#{bindings.lineData.collectionModel}"
                var="row" 
                inlineStyle="width: 400px; height: 300px;"
                title="Chart Title" 
                animationOnDisplay="auto"
                animationDuration="1500" >
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="chartDataItem1"
                          series="#{row.series}"
                          group="#{row.group}" 
                          value="#{row.value}" />
         <dvtm:attributeGroups id="ag1" 
                               type="color" 
                               value="#{row.brand}" />
   </amx:facet>
   <dvtm:yAxis id="yAxis1"
               axisMaxValue="80.0" 
               majorIncrement="20.0" 
               title="yAxis Title" />
   <dvtm:legend id="l1" position="end" />
</dvtm:areaChart>

注意: 例6-68および図6-52では、カスタム・スタイルが系列レベルで設定されていないため、系列はデフォルトの色傾斜に基づいた色で表示されます。

このコンポーネントに定義できる子要素areaChartおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、面グラフ・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-areaChart
   - supported properties: all

グラフのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

6.5.2 棒グラフの作成方法

棒グラフ(barChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを垂直の棒として視覚的に表すために使用します。系列は、個々のデータ・アイテムごとではなく系列レベルで適用する必要があるいくつかの一般的なスタイル・プロパティを持つグラフィカル要素を使用して視覚化されます。

棒グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

例6-70は、MAF AMXファイルで定義されているbarChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。

例6-70 棒グラフの定義

<dvtm:barChart id="barChart1"
               value="#{bindings.barData.collectionModel}"
               var="row"
               inlineStyle="width: 400px; height: 300px;"
               animationOnDisplay="zoom"
               animationDuration="3000" >
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="chartDataItem1"
                          series="#{row.series}"
                          group="#{row.group}"
                          value="#{row.value}" />
   </amx:facet>
   <dvtm:yAxis id="yAxis1"
               axisMaxValue="80.0" 
               majorIncrement="20.0" 
               title="yAxis Title" />
   <dvtm:legend id="l1" position="start" />
</dvtm:barChart>

図6-53 デザインタイムの棒グラフ

棒グラフのデータ・モデルは、個々の棒を記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。

• series: この棒が属する系列の名前。

• group: この棒が属するグループの名前。

• value: データ・アイテムの値(必須)。

データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。

このコンポーネントに定義できる子要素barChartおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、棒グラフ・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-barChart
   - supported properties: all

グラフのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

6.5.3 横棒グラフの作成方法

横棒グラフ(horizontalBarChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを水平の棒として視覚的に表すために使用します。系列は、個々のデータ・アイテムごとではなく系列レベルで適用する必要があるいくつかの一般的なスタイル・プロパティを持つグラフィカル要素を使用して視覚化されます。

棒グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

例6-70は、MAF AMXファイルで定義されているhorizontalBarChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。

例6-71 横棒グラフの定義

<dvtm:horizontalBarChart id="horizBarChart1"
                   value="#{bindings.barData.collectionModel}"
                   var="row"
                   inlineStyle="width: 400px; height: 300px;"
                   dataSelection="#{pageFlowScope.dataSelection}"
                   hideAndShowBehavior="#{pageFlowScope.hideAndShowBehavior}"
                   rolloverBehavior="#{pageFlowScope.rolloverBehavior}"
                   stack="#{pageFlowScope.stack}" >
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="chartDataItem1"
                          series="#{row.series}"
                          group="#{row.group}"
                          value="#{row.value}" />
   </amx:facet>
   <dvtm:yAxis id="yAxis1"
               axisMaxValue="80.0" 
               majorIncrement="20.0" 
               title="yAxis Title" />
   <dvtm:legend id="l1" position="start" />
</dvtm:horizontalBarChart>

図6-54 デザインタイムの横棒グラフ

横棒グラフのデータ・モデルは、個々の棒を記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。

• series: この棒が属する系列の名前。

• group: この棒が属するグループの名前。

• value: データ・アイテムの値(必須)。

データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。

このコンポーネントに定義できる子要素horizontalBarChartおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、横棒グラフ・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-horizontalBarChart
   - supported properties: all

グラフのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

6.5.4 バブル・チャートの作成方法

バブル・チャート(bubbleChart)は、各データ・アイテムがx座標、y座標およびサイズ(バブル)を持つ一連のデータ・アイテムを表示します。さらに、各データ・アイテムには、colorやmarkerShapeなど様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、線グラフ(第6.5.6項「線グラフの作成方法」を参照)や面グラフ(第6.5.1項「面グラフの作成方法」を参照)と異なり、バブル・チャートには系列およびグループの厳密な概念がありません。

バブル・チャートは、X軸およびY軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

例6-72は、MAF AMXファイルで定義されているbubbleChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。各データ・アイテムのcolorおよびmarkerShape属性は、データ・モデルで提供されている値に基づいて個別に設定されます。また、基礎となるデータ・コントロールでは、row.label、row.sizeおよびrow.shapeの変数参照がそれぞれサポートされている必要があります。

例6-72 カスタム・データ・アイテム・プロパティを設定したバブル・チャートの定義

<dvtm:bubbleChart id="bubbleChart1"
                  value="#{bindings.bubbleData.collectionModel}"
                  inlineStyle="width: 400px; height: 300px;"
                  dataSelection="multiple"
                  rolloverBehavior="dim"
                  animationOnDisplay="auto"
                  var="row">
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="chartDataItem1"
                          group="#{row.group}" 
                          x="#{row.x}" 
                          y="#{row.y}"
                          markerSize="#{row.size}" 
                          color="#{row.color}"
                          markerShape="#{row.shape}" />
   </amx:facet>
</dvtm:bubbleChart>

図6-55 デザインタイムのバブル・チャート

例6-73では、データ・アイテムからなる関連する1つのグループに対して一般的なスタイル属性を設定するためにattributeGroups要素が使用されています。

例6-73 属性グループを設定したバブル・チャートの定義

<dvtm:bubbleChart id="bubbleChart1"
                  value="#{bindings.bubbleData.collectionModel}"
                  dataSelection="multiple"
                  rolloverBehavior="dim"
                  animationOnDisplay="auto"
                  title="Bubble Chart"
                  var="row">
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="chartDataItem1"
                          group="#{row.label}" 
                          x="#{row.x}" 
                          y="#{row.y}" >
         <dvtm:attributeGroups id="ag1" type="color" value="#{row.category}" />
         <dvtm:attributeGroups id="ag2" type="shape" value="#{row.brand}" />
      </dvtm:chartDataItem>
   </amx:facet>
</dvtm:bubbleChart>

バブル・チャートのデータ・モデルは、個々のデータ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。

• label: データ・アイテム・ラベル(オプション)。

• x、y: 値の座標(必須)。

• z: データ・アイテムのサイズ(必須)。

データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。

このコンポーネントに定義できる子要素bubbleChartおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、バブル・チャート・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-bubbleChart
   - supported properties: all

グラフのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

6.5.5 コンポ・チャートの作成方法

コンボ・チャート(comboChart)は、線グラフと棒グラフなど、2つ以上の異なるグラフを重ねたものを表します。

例6-74は、MAF AMXファイルで定義されているcomboChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。seriesStampファセットは、系列のデフォルト・スタイル・プロパティをオーバーライドし、seriesStyle要素を使用してカスタム系列スタイルを設定します。

例6-74 コンポ・チャートの定義

<dvtm:comboChart id="comboChart1"
                 value="#{bindings.barData.collectionModel}"
                 var="row"
                 inlineStyle="width: 400px; height: 300px;"
                 animationOnDisplay="auto"
                 animationDuration="1500" >
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="chartDataItem1" 
                          series="#{row.series}"
                          group="#{row.group}"
                          value="#{row.value}" />
   </amx:facet>
   <amx:facet name="seriesStamp">
      <dvtm:seriesStyle id="seriesStyle1"
                        series="#{row.series}" 
                        type="bar"
                        rendered="#{(row.series eq 'Series 1') or
                                    (row.series eq 'Series 2') or
                                    (row.series eq 'Series 3')}" />
      <dvtm:seriesStyle id="seriesStyle2"
                        series="#{row.series}" 
                        type="line" 
                        lineWidth="5"
                        rendered="#{(row.series eq 'Series 4') or
                                    (row.series eq 'Series 5')}" />
   </amx:facet>
   <dvtm:yAxis id="yAxis1"
               axisMaxValue="80.0" 
               majorIncrement="20.0" 
               title="yAxis Title" />
   <dvtm:legend position="start" id="l1" />
</dvtm:comboChart>

図6-56 デザインタイムのコンポ・チャート

このコンポーネントに定義できる子要素comboChartおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、コンボ・チャート・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-comboChart
   - supported properties: all

グラフのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

6.5.6 線グラフの作成方法

線グラフ(lineChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、線の色、太さ、スタイルなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。

線グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

例6-75は、MAF AMXファイルで定義されているlineChart要素を示しています。デフォルト系列スタイルで基本的な線グラフを作成するには、それにコレクションを渡し、chartDataItem要素をネストしたdataStampファセットを指定します。

例6-75 デフォルト系列スタイルを持つ線グラフの定義

<dvtm:lineChart id="lineChart1"
                inlineStyle="width: 400px; height: 300px;"
                rolloverBehavior="dim" 
                animationOnDisplay="auto"
                value="#{bindings.lineData1.collectionModel}"
                var="row" >
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="chartDataItem1"
                          series="#{row.series}"
                          group="#{row.group}" 
                          value="#{row.value}"
                          color="#{row.color}" />
   </amx:facet>
</dvtm:lineChart>

図6-57 デザインタイムの線グラフ

データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrowに次のプロパティが含まれている必要があります。

• series: この線が属する系列の名前。

• group: この線が属するグループの名前。

• value: データ・アイテムの値。

コレクションのrowには、個々のデータ・アイテムに適用可能なcolorやshapeなどの他のプロパティも含めることができます。

例6-76に示すように、属性グループ(attributeGroups要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、データ・アイテムのcolorおよびshape属性が、追加のグループ化式に基づいて設定されます。attributeGroupsには、次の子要素があります。

• dvtmネームスペースのattributeExceptionRule: 特定のブール条件が満たされる場合に、属性値を別の値に置き換えます。

• dvtmネームスペースのattributeMatchRule: データが特定の値に一致する場合に、属性を置き換えます。

• amxネームスペースのattribute。

例6-76 デフォルト系列スタイルおよびグループ化を含む線グラフの定義

<dvtm:lineChart id="lineChart1"
                inlineStyle="width: 400px; height: 300px;"
                rolloverBehavior="dim" 
                animationOnDisplay="auto"
                title="Line Chart" 
                value="#{bindings.lineData1.collectionModel}"
                var="row" >
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="chartDataItem1"
                          series="#{row.series}"
                          group="#{row.group}" 
                          value="#{row.value}" />
         <dvtm:attributeGroups id="ag1" 
                               type="color" 
                               value="#{row.brand}" />
      </dvtm:chartDataItem>
   </amx:facet>
</dvtm:lineChart>

注意: 例6-75および例6-76では、カスタム・スタイルが系列レベルで設定されていないため、系列はデフォルトの色傾斜に基づいた色で表示されます。

系列のデフォルト・スタイル・プロパティをオーバーライドするには、例6-77に示すように、オプションのseriesStampファセットを定義し、seriesStyle要素を使用してカスタム系列スタイルを設定します。

例6-77 カスタム系列スタイルを持つ線グラフの定義

<dvtm:lineChart id="lineChart1"
                inlineStyle="width: 400px; height: 300px;"
                rolloverBehavior="dim" 
                animationOnDisplay="auto"
                title="Line Chart" 
                value="#{bindings.lineData1.collectionModel}"
                var="row" >
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="chartDataItem1"
                          series="#{row.series}"
                          group="#{row.group}" 
                          value="#{row.value}" />
   </amx:facet>
   <amx:facet name="seriesStamp">
      <dvtm:seriesStyle series="#{row.series}"
                        lineStyle="#{row.lineStyle}"
                        lineWidth="#{row.lineWidth}" />
   </amx:facet>
</dvtm:lineChart>

前述の例では、seriesStyle要素がseries属性の値に基づいてグループ化されています。同じ名前を持つ系列は、seriesStyleの他の属性(color、lineStyle、lineWidthなど)によって定義された、同じプロパティ・セットを共有する必要があります。MAF AMXでは、同じ系列名を持つ異なる属性値を検出した場合、前回処理された値を適用します。

または、図6-78に示すように、seriesStyle要素のrendered属性を使用して、MAF AMXチャートで系列スタイルを制御できます。

例6-78 フィルタ対象系列スタイルを持つ線グラフの定義

<dvtm:lineChart id="lineChart1"
                inlineStyle="width: 400px; height: 300px;"
                rolloverBehavior="dim"
                animationOnDisplay="auto"
                title="Line Chart"
                value="#{bindings.lineData1.collectionModel}"
                var="row" >
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="chartDataItem1"
                          series="#{row.series}"
                          group="#{row.group}"
                          value="#{row.value}" 
                          color="#{row.color}" />
   </amx:facet>
   <amx:facet name="seriesStamp">
      <dvtm:seriesStyle series="#{row.series}"
                        color="red" 
                        lineWidth="3"
                        lineStyle="solid"
                        rendered="#{row.series == 'Coke'}" />
      <dvtm:seriesStyle series="#{row.series}"
                        color="blue"
                        lineWidth="2"
                        lineStyle="dotted"
                        rendered="#{row.series == 'Pepsi'}" />
   </amx:facet>
</dvtm:lineChart>

このコンポーネントに定義できる子要素lineChartおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、線グラフ・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-lineChart
   - supported properties: all

グラフのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

6.5.7 円グラフの作成方法

円グラフ(pieChart)は、各データ・アイテムを円セグメント(区分)で表したデータの比率によって区分を示すために使用します。区分はサイズ別に(最大から最小へと)ソートでき、小さい区分は他の単一の区分に集約できます。

例6-79は、MAF AMXファイルで定義されているpieChart要素を示しています。dataStampファセットは、ネストされたpieDataItem要素とともに指定されます。

例6-79 円グラフの定義

<dvtm:pieChart id="pieChart1"
               inlineStyle="width: 400px; height: 300px;"
               value="#{bindings.pieData.collectionModel}"
               var="row"
               animationOnDisplay="zoom"
               animationDuration="3000" >
   <amx:facet name="dataStamp">
      <dvtm:pieDataItem id="pieDataItem1"
                        label="#{row.name}" 
                        value="#{row.data}" />
   </amx:facet>
   <dvtm:legend position="bottom" id="l1" />
</dvtm:pieChart>

図6-58 デザインタイムの円グラフ

円グラフのデータ・モデルは、個々の円データ・アイテムを定義するアイテムのコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。

• label: 区分ラベル。

• value: 区分の値。

モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。

• borderColor: 区分の境界線の色。

• color: 区分の色。

• explode: 区分を開くときのオフセット。

このコンポーネントに定義できる子要素pieChartおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、pieDataItemを子として含めることができます(第6.5.17.4項「円グラフのデータ・アイテムの定義」を参照)。

クラスdvtm-pieChart、dvtm-chartPieLabelおよびdvtm-chartSliceLabelで定義されているデフォルトCSS設定を上書きすることで、円グラフ・コンポーネントをスタイル設定できます。

• トップレベル要素は次を使用してスタイル設定できます。

  .dvtm-pieChart
     - supported properties: all
  

• 円グラフのラベルは次を使用してスタイル設定できます。

  .dvtm-chartPieLabel
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  

• 円グラフの区分ラベルは次を使用してスタイル設定できます。

  .dvtm-chartSliceLabel
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  

グラフのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

6.5.8 散布図の作成方法

散布図(scatterChart)は、各アイテムがx座標、y座標およびサイズを持つデータ・アイテムを表す連続しないドットでデータを表示します。さらに、各データ・アイテムには、colorやmarkerShapeなど様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、線グラフ(第6.5.6項「線グラフの作成方法」を参照)や面グラフ(第6.5.1項「面グラフの作成方法」を参照)と異なり、散布図には系列およびグループの厳密な概念がありません。

散布図は、X軸およびY軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

例6-80は、MAF AMXファイルで定義されているscatterChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。各データ・アイテムのcolorおよびmarkerShape属性は、データ・モデルで提供されている値に基づいて個別に設定されます。

例6-80 散布図の定義

<dvtm:scatterChart id="scatterChart1"
                   inlineStyle="width: 400px; height: 300px;"
                   animationOnDisplay="zoom"
                   animationDuration="3000"
                   value="#{bindings.scatterData.collectionModel}"
                   var="row" >
   <amx:facet name="dataStamp">
      <dvtm:chartDataItem id="chartDataItem1"
                          group="#{row.group}"
                          color="#{row.color}"
                          markerShape="auto"
                          x="#{row.data.x}"
                          y="#{row.data.y}">
         <dvtm:attributeGroups type="color"
                               value="#{row.series}" 
                               id="ag1" />
      </dvtm:chartDataItem>
   </amx:facet>
   <dvtm:xAxis id="xAxis1" title="X Axis Title" />
   <dvtm:yAxis id="xAxis2" title="Y Axis Title" />
   <dvtm:legend position="bottom" id="l1" />
</dvtm:scatterChart>

図6-59 デザインタイムの散布図

散布図のデータ・モデルは、個々のデータ・アイテムを記述するアイテム(行)のコレクションによって表されます。各データ・アイテムの属性は、スタンプ(dataStamp)によって定義され、通常、次のものがあります。

• x、y: 値の座標(必須)。

• markerSize: マーカーのサイズ(オプション)。

モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。

• borderColor: データ・アイテムの境界線の色。

• color: データ・アイテムの色。

• tooltip: カスタム・ツールチップ。

このコンポーネントに定義できる子要素scatterChartおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、散布図コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-scatterChart
   - supported properties: all

グラフのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

6.5.9 スパーク・チャートの作成方法

スパークチャート(sparkChart)は、傾向や変化を、多くの場合、表の列内で表す簡単な縮小チャートです。このチャートは、多くの場合、データ密度の濃い表示に追加のコンテキストを提供するためにダッシュボードで使用されます。

例6-81は、MAF AMXファイルで定義されているsparkChart要素を示しています。dataStampファセットは、ネストされたsparkDataItem要素とともに指定されます。

例6-81 スパーク・チャートの定義

<dvtm:sparkChart id="sparkChart1"
                 value="#{bindings.sparkData.collectionModel}"
                 var="row"
                 type="line"
                 inlineStyle="width:400px; height:300px; float:left;">
   <amx:facet name="dataStamp"> 
      <dvtm:sparkDataItem id="sparkDataItem1" value="#{row.value}" />
   </amx:facet>
</dvtm:sparkChart> 

図6-60 デザインタイムのスパーク・チャート

スパーク・チャートのデータ・モデルは、個々のスパーク・データ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。

• value: スパーク値。

属性およびsparkChartのdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、sparkDataItemを子として含めることができます(第6.5.17.5項「スパーク・チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、スパーク・チャート・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-sparkChart
   - supported properties: all

グラフのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

6.5.10 ファンネル・チャートの作成方法

ファンネル・チャート(funnelChart)コンポーネントは、プロセスの手順に関連するデータの視覚的な表現を提供します。ステップは、横向きの円柱に対する縦向きのスライスとして表されます。特定のステップ(スライス)の実際の値がそのスライスの割当てに近づいた分、スライスが塗りつぶされます。通常、ファンネル・チャートには、ある区切りの値(時間など)に対する実際の値と目標の値が必要です。

例6-82は、MAF AMXファイルで定義されているfunnelChart要素を示しています。dataStampファセットは、ネストされたfunnelDataItem要素とともに指定されます。

例6-82 ファンネル・チャートの定義

<dvtm:funnelChart id="funnelChart1"
                  var="row"
                  value="#{bindings.funnelData.collectionModel}"
                  styleClass="dvtm-gallery-component"
                  sliceGaps="on"
                  threeDEffect="#{pageFlowScope.threeD ? 'on' : 'off'}"
                  orientation="#{pageFlowScope.orientation}"
                  dataSelection="#{pageFlowScope.dataSelection}"
                  footnote="#{pageFlowScope.footnote}"
                  footnoteHalign="#{pageFlowScope.footnoteHalign}"
                  hideAndShowBehavior="#{pageFlowScope.hideAndShowBehavior}"
                  rolloverBehavior="#{pageFlowScope.rolloverBehavior}"
                  seriesEffect="#{pageFlowScope.seriesEffect}"
                  subtitle="#{pageFlowScope.titleDisplay ? 
                                            pageFlowScope.subtitle : ''}"
                  title="#{pageFlowScope.titleDisplay ? pageFlowScope.title : ''}"
                  titleHalign="#{pageFlowScope.titleHalign}"
                  animationOnDataChange="#{pageFlowScope.animationOnDataChange}"
                  animationDuration="#{pageFlowScope.animationDuration}"
                  animationOnDisplay="#{pageFlowScope.animationOnDisplay}"
                  shortDesc="#{pageFlowScope.shortDesc}">
   <amx:facet name="dataStamp">
      <dvtm:funnelDataItem id="funnelDataItem1"
                           label="#{row.label}" 
                           value="#{row.value}"
                           targetValue="#{row.targetValue}" 
                           color="#{row.color}"
                           shortDesc="This is a tooltip">
      </dvtm:funnelDataItem>
   </amx:facet>
   <dvtm:legend id="l1" 
                position="#{pageFlowScope.legendPosition}"
                rendered="#{pageFlowScope.legendDisplay}"/>
</dvtm:funnelChart> 

図6-61 デザインタイムのファンネル・チャート

ファンネル・チャートのデータ・モデルは、個々のファンネル・データ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。

• value: ファンネル値

• label: ファンネル区分ラベル

属性およびfunnelChartのdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、funnelDataItemを子として含めることができます(第6.5.17.6項「ファンネル・データ・アイテムの定義」を参照)。

クラスdvtm-funnelChartおよびdvtm-funnelDataItemで定義されているデフォルトCSS設定を上書きすることで、ファンネル・チャート・コンポーネントをスタイル設定できます。

• トップレベル要素は次を使用してスタイル設定できます。

  .dvtm-funnelChart
     - supported properties: all
  

• ファンネル・チャートのデータ・アイテムは次を使用してスタイル設定できます。

  .dvtm-funnelDataItem
     - supported properties: border-color, background-color
  

グラフのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

6.5.11 チャート・コンポーネントのスタイル設定方法

スパーク・チャートを除き、次のクラスで定義されているデフォルトCSS設定を上書きすることで、チャート・コンポーネントをスタイル設定できます。

• チャート・コンポーネントの凡例は次を使用してスタイル設定できます。

  .dvtm-legend
     - supported properties used for text styling: 
                 font-family, font-size, font-weight, color, font-style
     - supported properties used for background styling: background-color
     - supported properties used for border styling: 
                 border-color (used when border width > 0)
  
  .dvtm-legendTitle
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  
  .dvtm-legendSectionTitle
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  

• チャート・コンポーネントのタイトル、サブタイトルなどは次を使用してスタイル設定できます。

  .dvtm-chartTitle
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  
  .dvtm-chartSubtitle
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  
  .dvtm-chartFootnote
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  
  .dvtm-chartTitleSeparator
     - supported properties: 
                 visibility (is title separator rendered),
                 border-top-color, border-bottom-color
  
  

• チャート・コンポーネントの軸は次を使用してスタイル設定できます。

  .dvtm-chartXAxisTitle
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  
  .dvtm-chartYAxisTitle
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  
  .dvtm-chartY2AxisTitle
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  
  .dvtm-chartXAxisTickLabel
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  
  .dvtm-chartYAxisTickLabel
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  
  .dvtm-chartY2AxisTickLabel
     - supported properties: 
                 font-family, font-size, font-weight, color, font-style
  

チャート・コンポーネントのトップレベル要素のスタイル設定に加え、一部のチャートの特定の子要素をスタイル設定できます。

6.5.12 チャート・コンポーネントでのイベントの使用方法

ViewportChangeEventを使用して、チャート・コンポーネントのズームおよびスクロールを処理できます。ズームまたはスクロールのいずれかが発生すると、コンポーネントは、新しいビューポートを定義する情報でロードされるイベントを起動します。

面グラフ、棒グラフ、横棒グラフ、コンボ・チャートおよび線グラフのコンポーネントの属性としてviewportChangeListenerを指定できます。

詳細は、次を参照してください。

• 第6.10項「イベント・リスナーの使用方法」

• Oracle Fusion Middleware Oracle Mobile Application FrameworkのJava APIリファレンス

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

6.5.13 LEDゲージの作成方法

チャートと異なり、ゲージでは、単一のデータ・ポイントを重視し、そのポイントを最小、最大およびしきい値インジケータと比較して問題領域を識別します。LED(電光表示)ゲージ(ledGauge)は、重要業績評価指標(KPI)などの測定値をグラフィカルに表します。LEDゲージには、いくつかのスタイルがあります。矢印付きのものは、よい(上矢印)、普通(右または左矢印)および悪い(下矢印)を示すために使用されます。ゲージのしきい値はいくつでも指定できます。ただし、一部のLEDゲージ(矢印または三角形のインジケータを持つものなど)では、指し示す有効な方向の数が限られているため、サポートされるしきい値の数にかぎりがあります。矢印または三角形のインジケータの場合、しきい値の最大数は3です。

例6-83は、MAF AMXファイルで定義されているledGauge要素を示しています。

例6-83 LEDゲージの定義

<dvtm:ledGauge id="ledGauge1"
               value="65" 
               type="circle" 
               inlineStyle="width: 100px; height: 80px; float: left;
                            border-color: navy; background-color: lightyellow;">
   <dvtm:threshold id="threshold1" text="Low" maxValue="40" />
   <dvtm:threshold id="threshold2" text="Medium" maxValue="60" />
   <dvtm:threshold id="threshold3" text="High" maxValue="80" />
</dvtm:ledGauge>

図6-62 デザインタイムのLEDゲージ

LEDゲージのデータ・モデルは、value属性で指定される単一のメトリック値で表されます。

このコンポーネントに定義できる子要素ledGaugeおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

次のamx子要素を定義できます。

• showPopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• closePopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• validationBehavior (第6.9項「入力の検証」を参照)

6.5.14 ステータス・メーター・ゲージの作成方法

ステータス・メーター・ゲージ(statusMeterGauge)は、長方形の水平バーまたは円に沿ってタスクの進捗状況または測定値のレベルを示します。コンポーネントのある部分は、別の部分にマークされた範囲に対する現在の測定値のレベルを示します。また、しきい値は、サイズ変更が可能なインジケータの背後に表示できます。

MAF AMXデータ視覚化のステータス・メーター・ゲージ・コンポーネントでは、参照線(referenceLine)のサポートが提供されます。この参照線を使用して、ブレット・グラフを生成できます。

例6-84は、MAF AMXファイルで定義されているstatusMeterGauge要素を示しています。

例6-84 ステータス・メーター・ゲージの定義

<dvtm:statusMeterGauge id="meterGauge1"
                       value="65"
                       animationOnDisplay="auto"
                       animationDuration="1000"
                       inlineStyle="width: 300px;
                                    height: 30px;
                                    float: left;
                                    border-color: black;
                                    background-color: lightyellow;"
                       minValue="0"
                       maxValue="100">
   <dvtm:metricLabel/>
   <dvtm:threshold id="threshold1" text="Low" maxValue="40" />
   <dvtm:threshold id="threshold2" text="Medium" maxValue="60" />
   <dvtm:threshold id="threshold3" text="High" maxValue="80" />
</dvtm:statusMeterGauge>

図6-63 デザインタイムの長方形のステータス・メーター・ゲージ

円形で表される(図6-64を参照)ステータス・メーター・ゲージを作成するには、orientation属性をcircularに設定します。デフォルトでは、この属性はhorizontalに設定されいるため、横向きの長方形になります。

図6-64 デザインタイムの円形のステータス・メーター・ゲージ

ステータス・メーター・ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。

このコンポーネントに定義できる子要素statusMeterGaugeおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

次のamx子要素を定義できます。

• showPopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• closePopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• validationBehavior (第6.9項「入力の検証」を参照)

6.5.15 ダイアル・ゲージの作成方法

ダイヤル・ゲージ(dialGauge)は、悪いからよいまで変化する値(しきい値)の範囲を指定します。ゲージのインジケータではメトリックの現在の値が示される一方、図形によってその値のステータスを評価できます。

例6-84は、MAF AMXファイルで定義されているdialGauge要素を示しています。

例6-85 ダイヤル・ケージの定義

<dvtm:dialGauge id="dialGauge1"
                background="#{pageFlowScope.background}"
                indicator="#{pageFlowScope.indicator}"
                value="#{pageFlowScope.value}"
                minValue="#{pageFlowScope.minValue}"
                maxValue="#{pageFlowScope.maxValue}"
                animationDuration="1000"
                animationOnDataChange="auto"
                animationOnDisplay="auto"
                shortDesc="#{pageFlowScope.shortDesc}"
                inlineStyle="#{pageFlowScope.inlineStyle}"
                styleClass="#{pageFlowScope.styleClass}"
                readOnly="true">
</dvtm:dialGauge>

図6-65 デザインタイムのダイヤル・ゲージ

ダイヤル・ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。

このコンポーネントに定義できる子要素dialGaugeおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

例6-86は、暗い背景テーマと、-5000から5000の範囲を設定するカスタム・ティック・ラベルを含む、dialGauge要素の定義を示しています。

例6-86 メトリックとティック・ラベルの定義

<dvtm:dialGauge id="dialGauge1"
                background="circleDark"
                indicator="needleDark"
                value="#{pageFlowScope.value}"
                minValue="-5000"
                maxValue="5000"
                readOnly="false">
   <dvtm:metricLabel id="metricLabel1"
                     scaling="thousand" 
                     labelStyle="font-family: Arial, Helvetica; 
                                 font-size: 20; color: white;"/>
   <dvtm:tickLabel id="tickLabel1"
                   scaling="thousand"
                   labelStyle="font-family: Arial, Helvetica;
                               font-size: 18; color: white;"/>
</dvtm:dialGauge>

図6-66 メトリック・ラベルおよびティック・ラベルの付いたデザインタイムのダイアル・ゲージ

dialGaugeに対して次のamx子要素を定義できます。

• showPopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• closePopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• validationBehavior (第6.9項「入力の検証」を参照)

6.5.16 評価ゲージの作成方法

評価ゲージ(ratingGauge)を使用すると、事前定義された視覚スケールに評価を表示したり、その評価を変更できます。デフォルトの評価単位は、星で表されます。ratingGaugeのshape属性を設定することによって、この単位を円、長方形、星またはひし形として構成できます。

例6-87は、MAF AMXファイルで定義されているratingGauge要素を示しています。

例6-87 評価ゲージの定義

<dvtm:ratingGauge id="ratingGauge1"
                  value="#{pageFlowScope.value}"
                  minValue="0"
                  maxValue="5"
                  inputIncrement="full"
                  shortDesc="#{pageFlowScope.shortDesc}"
                  inlineStyle="#{pageFlowScope.inlineStyle}"
                  readOnly="true"
                  shape="circle"
                  unselectedShape="circle">
</dvtm:ratingGauge>

図6-67 デザインタイムの評価ゲージ

評価ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。

このコンポーネントに定義できる子要素ratingGaugeおよびdvtmの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

ratingGaugeに対して次のamx子要素を定義できます。

• showPopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• closePopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• validationBehavior (第6.9項「入力の検証」を参照)

6.5.16.1 評価ゲージ・コンポーネントへのカスタム・スタイルの適用

ユーザーが評価ゲージ・コンポーネントに対して実行したアクションに応じて、評価単位(イメージ)は次のいずれかの状態を取得できます。

• selected: 単位を選択した場合。

• unselected: 単位を選択しなかった場合。

• hover: 単位にマウスを置いた場合。

  
  

  注意: タッチ・インタフェースを使用するモバイル・デバイスでは、hover状態はタップしたまま押さえるジェスチャーを通じて呼び出されます。

  
  

• changed: 単位を変更した場合。

各状態は、colorおよびborderColorという2つの属性によって表されます。デフォルトでは、ratingGaugeのshape属性によって、hoverおよびchanged状態の選択内容が決まります。unselected状態は、ratingGaugeのunselectedShape属性を使用して個別に設定できます。

デフォルトCSS設定を上書きすることで、評価ゲージ・コンポーネントをスタイル設定できます。CSSファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

例6-88は、評価ゲージ単位の各状態のcolorおよびborderColorに対するデフォルトCSSスタイル定義を示しています。

例6-88 CSSのスタイル設定

.dvtm-ratingGauge {
}

.dvtm-ratingGauge .dvtm-ratingGaugeSelected {
   border-width: 1px;
   border-style: solid;
   border-color: #FFC61A;
   color: #FFBB00;
}

.dvtm-ratingGauge .dvtm-ratingGaugeUnselected {
   border-width: 1px;
   border-style: solid;
   border-color: #D3D3D3;
   color: #F4F4F4;
}

.dvtm-ratingGauge .dvtm-ratingGaugeHover {
   border-width: 1px;
   border-style: solid;
   border-color: #6F97CF;
   color: #7097CF;
}

.dvtm-ratingGauge .dvtm-ratingGaugeChanged {
   border-width: 1px;
   border-style: solid;
   border-color: #A8A8A8;
   color: #FFBB00;
}

6.5.17 チャートおよびゲージ・コンポーネントの子要素の定義方法

チャートおよびゲージには様々な子要素を定義できます。それらの子要素のいくつかを次に示します。

• chartDataItem (第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)

• xAxis、yAxisおよびy2Axis (第6.5.17.3項「X軸、Y軸およびY2軸の定義」を参照)

• legend (第6.5.17.2項「凡例の定義」を参照)

• pieDataItem (第6.5.17.4項「円グラフのデータ・アイテムの定義」を参照)

• sparkDataItem (第6.5.17.5項「スパーク・チャートのデータ・アイテムの定義」を参照)

• threshold (第6.5.17.7項「しきい値の定義」を参照)

• funnelDataItem

これらおよびその他の子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

Oracle Enterprise Pack for Eclipseでは、データ視覚化コンポーネントの子コンポーネントは、「パレット」の「MAF AMXデータ視覚化」→「共有子タグ」および「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」の下にあります(図6-51を参照)。

図6-68 チャートおよびゲージの子コンポーネントの作成

6.5.17.1 チャートのデータ・アイテムの定義

チャート・データ・アイテム(chartDataItem)要素は、円グラフを除くすべてのサポートされているチャートでチャート・データ・アイテムが使用するパラメータを指定します。

チャート・データ・アイテムでのテキスト表示を有効化でき、chartDataItem要素の関連する属性を設定することで、そのラベル、ラベル位置およびラベル・スタイルを制御でき、さらに、チャート自体のdataLabelPosition属性を設定することで指定されたチャートのすべてのデータ・ラベルの位置を指定できます。

注意: 散布図、円グラフおよびファンネル・チャートのコンポーネントでは、dataLabelPosition属性はサポートされていません。

chartDataItem要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.17.2 凡例の定義

凡例(legend)要素は、凡例パラメータを指定します。

legend要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.17.3 X軸、Y軸およびY2軸の定義

X軸(xAxis)およびY軸(yAxis)要素は、チャートのX軸とY軸を定義します。Y2軸(y2Axis)は、オプションのY2軸を定義します。これらの要素は、MAF AMXファイルで次のように宣言されます。

<dvtm:xAxis id="xAxis1" scrolling="on" axisMinValue="0.0" axisMaxValue="50.0" />

属性およびxAxis、yAxisおよびy2Axisの各要素の子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.17.4 円グラフのデータ・アイテムの定義

円グラフのデータ・アイテム(pieDataItem)要素は、円グラフの区分のパラメータを指定します(第6.5.7項「円グラフの作成方法」を参照)。

pieDataItem要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.17.5 スパーク・チャートのデータ・アイテムの定義

スパーク・チャートのデータ・アイテム(sparkDataItem)要素は、スパーク・チャート・アイテムのパラメータを指定します(第6.5.9項「スパーク・チャートの作成方法」を参照)。

sparkDataItem要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.17.6 ファンネルのデータ・アイテムの定義

ファンネルのデータ・アイテム(funnelDataItem)要素は、ファンネル・チャート・アイテムのパラメータを指定します(第6.5.10項「ファンネル・チャートの作成方法」を参照)。

funnelDataItem要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.17.7 しきい値の定義

しきい値(threshold)要素は、ゲージのしきい値範囲を指定します(第6.5.13項「LEDゲージの作成方法」および第6.5.14項「ステータス・メーター・ゲージの作成方法」を参照)。

threshold要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.18 地理マップ・コンポーネントの作成方法

地理マップ(geographicMap)は、1つのマップに重ね合せた1つ以上のインタラクティブな情報レイヤーでビジネス・データを表します。このコンポーネントを構成して、GoogleマップまたはOracleマップのいずれかをマップ・プロバイダとして 使用できます(第6.5.18.1項「地理プロバイダ情報を指定した地理マップ・コンポーネントの構成」を参照)。

例6-89は、MAF AMXファイルで定義されているgeographicMap要素を示しています。

例6-89 地理マップの定義

<dvtm:geographicMap id="g1" mapType="ROADMAP" 
                    centerX="-98.57" centerY="39.82" 
                    zoomLevel="2" initialZooming="auto">
   <dvtm:pointDataLayer id="pdl1"
                        var="row" 
                        value="#{bindings.locationData.collectionModel}"
                        dataSelection="multiple"
                        selectionListener="#{myBean.doSomeGood}">
      <dvtm:pointLocation id="pl1" type="address" address="#{row.address}">
         <dvtm:marker shortDesc="#{row.shortDesc}" id="m1" />
      </dvtm:pointLocation>
   </dvtm:pointDataLayer>
</dvtm:geographicMap>

図6-69 デザインタイムの地理マップ

geographicMapに対してpointDataLayer子要素を定義できます。pointDataLayerによって、マップ上の点と関連付けられたデータを表示できます。pointDataLayerは子要素としてpointLocationを持つことができます。pointLocationは、データ・ポイントの位置を決定するデータ・レイヤーのモデル内の列を指定します。これらの位置は、住所またはX座標とY座標で表すことができます。

pointLocationは、子要素としてmarkerを持つことができます。markerは、マップ上のデータ・ポイントに関連付けられた組込み形状またはカスタム形状をスタンプ・アウトするために使用します。markerでは、マーカーとしてレンダリングされるイメージのURIを指定するための一連のプロパティがサポートされています。マーカーは子要素としてconvertNumberを持つことができます(第6.3.25項「数値の変換方法」を参照)。

geographicMap要素およびその子要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

地理マップ・コンポーネントでは、タッチ・ジェスチャーを使用してピン(マップ上のポイントの作成)を挿入できます。この機能は、mapInputListenerを使用して構成できます。詳細は、第6.5.20項「Mapコンポーネントでのイベントの使用方法」を参照してください。

6.5.18.1 地理プロバイダ情報を指定した地理マップ・コンポーネントの構成

基礎となるマップに特定のプロバイダ(GoogleまたはOracle)を使用するように地理マップ・コンポーネントを構成するには、アプリケーションのadf-config.xmlファイルに名前と値のペアとして次のプロパティを設定します。

• mapProvider: oraclemapsまたはgooglemapsを指定します。

• geoMapKey: mapProviderがgooglemapsに設定されている場合は、ライセンス・キーを指定します。

• geoMapClientId: mapProviderがgooglemapsに設定されている場合は、Googleマップ・ビジネス・ライセンスのクライアントIDを指定します。

• mapViewerUrl: mapProviderがoraclemapsに設定されている場合は、Oracleマップのマップ・ビューアURLを指定します。

• baseMap: mapProviderがoraclemapsに設定されている場合は、Oracleマップとともに使用するベース・マップを指定します。

注意: Googleマップを使用するように地理マップ・コンポーネントを構成するには、Googleから該当するライセンスを取得する必要があります。

例6-90は、Googleマップ用の構成を示しています。

例6-90 Googleマップの構成

<adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties">
   <adf-property name="mapProvider" value="googlemaps"/>
   <adf-property name="geoMapKey" value="your key"/>
</adf-properties-child>

例6-91は、Oracleマップの構成を示しています。

例6-91 Oracleマップの構成

<adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties">
   <adf-property name="mapProvider" value="oraclemaps"/>
   <adf-property name="mapViewerUrl"
                 value="http://elocation.oracle.com/mapviewer"/>
   <adf-property name="baseMap" value="ELOCATION_MERCATOR.WORLD_MAP"/>
</adf-properties-child>

マップ・プロバイダ情報を指定しない場合、MAF AMX地理マップ・コンポーネントは、そのマップにGoogleマップを使用しますがライセンス・キーはありません。

6.5.19 テーマ・マップ・コンポーネントの作成方法

テーマ・マップ(thematicMap)では、ビジネス・データをスタイル設定された領域内のパターンまたは関連付けられたマーカーとして表します。テーマ・マップでは、地理的な詳細なしで、データに焦点を合せます。

例6-92は、MAF AMXファイルで定義されているthematicMap要素およびその子を示しています。

例6-92 テーマ・マップの定義

<dvtm:thematicMap id="tm1" 
                  animationOnDisplay="#{pageFlowScope.animationOnDisplay}"
                  animationOnMapChange="#{pageFlowScope.animationOnMapChange}"
                  animationDuration="#{pageFlowScope.animationDuration}"
                  basemap="#{pageFlowScope.basemap}"
                           tooltipDisplay="#{pageFlowScope.tooltipDisplay}"
                  inlineStyle="#{pageFlowScope.inlineStyle}"
                  zooming="#{pageFlowScope.zooming}"
                  panning="#{pageFlowScope.panning}"
                  initialZooming="#{pageFlowScope.initialZooming}">
   <dvtm:areaLayer id="areaLayer1"
                   layer="#{pageFlowScope.layer}"
                   animationOnLayerChange=
                      "#{pageFlowScope.animationOnLayerChange}"
                   areaLabelDisplay="#{pageFlowScope.areaLabelDisplay}"
                   labelType="#{pageFlowScope.labelType}"
                   areaStyle="background-color"
                   rendered="#{pageFlowScope.rendered}">
      <dvtm:areaDataLayer id="areaDataLayer1"
                          animationOnDataChange=
                             "#{pageFlowScope.dataAnimationOnDataChange}"
                          animationDuration=
                             "#{pageFlowScope.dataAnimationDuration}"
                          dataSelection="#{pageFlowScope.dataSelection}"
                          var="row" 
                          value="#{bindings.thematicMapData.collectionModel}">
         <dvtm:areaLocation id="areaLoc1" name="#{row.name}">
            <dvtm:area action="sales" id="area1" shortDesc="#{row.name}">
               <amx:setPropertyListener id="spl1" 
                                        to=
                   "#{DvtProperties.areaChartProperties.dataSelection}" 
                                        from="#{row.name}"
                                        type="action"/>
               <dvtm:attributeGroups id="ag1" type="color" value="#{row.cat1}" />
            </dvtm:area>
         </dvtm:areaLocation>
      </dvtm:areaDataLayer>
   </dvtm:areaLayer>
   <dvtm:legend id="l1" position="end">
      <dvtm:legendSection id="ls1" source="ag1"/>
   </dvtm:legend>
</dvtm:thematicMap>

図6-70 デザインタイムのテーマ・マップ

markerZoomBehavior属性を使用すると、マップがズームされるとテーマ・マップのマーカーのスケール変更が有効化されます。rotation属性を設定することで、マーカーの回転を有効化でき、この属性の値は、イメージの中心に対してマーカーが回転する(時計回りの度数)角度を表します。

MAF AMXテーマ・マップは、次の拡張機能をサポートしています。

• カスタム・マーカー(第6.5.19.1項「カスタム・マーカーの定義」を参照)

• 領域の分離(第6.5.19.3項「分離領域の定義」を参照)

• 初期ズーム(第6.5.19.4項「初期ズームの有効化」を参照)

• カスタム・ベース・マップ(第6.5.19.5項「カスタム・ベース・マップの定義」を参照)

thematicMap要素およびその子要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.19.1 カスタム・マーカーの定義

MAF AMXテーマ・マップでは、MAF AMXイメージ・コンポーネントはサポートされていません。マップのpointLocation内でイメージを使用するには、pointLocationのmarker子要素で、そのsource属性を使用してイメージを指定します。source属性がマーカーに対して設定されている場合、そのshape属性はMAF AMXで無視されます。

sourceHover、sourceSelectedおよびsourceHoverSelected属性で、ホバーおよび選択効果のイメージを指定できます。これらの1つが指定されていない場合、その特定のマーカー状態に対してはsource属性によって指定されているイメージが使用されます。sourceSelectedが指定されている場合、sourceHoverSelectedが指定されていないときはその値が使用されます。イメージは、PNG、JPG、SVGなどモバイル・デバイスのブラウザでサポートされている任意のフォーマットで構いません。

6.5.19.2 分離領域レイヤーの定義

データの地理的場所の伝達にリージョン・アウトラインが常に必要であるわけではありません。かわりに、テーマ・マップ・コンポーネントには、領域内でイメージやマーカーをセンタリングするためのオプションがあるため、リージョン・アウトラインが描画されない見えない領域レイヤーを定義するオプションがあります。

見えない領域レイヤーを定義するには、CSS値のbackground-colorおよびborder-colorを受け入れるareaLayerのareaStyle属性を使用します。

<dvtm:areaLayer id="areaLayer1"
                ...
                areaStyle="background-color:transparent;border-color:transparent">

この属性によって、dvtm-areaスキニング・キーを使用することなく、デフォルトの領域レイヤーの色および枠線の形状をオーバーライドできます。

6.5.19.3 分離領域の定義

MAF AMXテーマ・マップ・コンポーネントを構成し、areaDataLayerのisolatedRowKey属性を使用してマップの単一の分離領域に収まるようにレンダリングおよびズームできますが、この場合、その領域または領域データ・レイヤーの残りの領域はレンダリングされません。

注意: 分離できるのは、1つのマップで1つの領域のみです。

6.5.19.4 初期ズームの有効化

初期ズームでは、マップ・コンポーネントを通常どおりレンダリングし、その後、マーカーと領域の両方を含むデータ・オブジェクトにズームして合せることができます。この機能を有効にするには、テーマ・マップのinitialZooming属性を使用します。

6.5.19.5 カスタム・ベース・マップの定義

カスタム・ベース・マップ・サポートの一環として、MAF AMXでは、テーマ・マップ・コンポーネントに対して次のことを指定できます。

• 様々な解像度のイメージを持つレイヤー。

• 点の位置(pointLocation)から参照できる名前付きの点を持つ点レイヤー。

• カスタム・ベース・マップ・メタデータXMLファイルを指すテーマ・マップのsource属性。

注意: MAF AMXでは、カスタム・ベース・マップは次のことはサポートされていません。 定型化された領域: 領域レイヤーはカスタム・ベース・マップに定義できないため、ポイント・レイヤーを使用します。 リソース・バンドル: ロケール固有のツールチップを追加する場合は、マーカー(marker)のshortDesc属性にあるELを使用できます。

カスタム・ベース・マップを作成するには、メタデータ・ファイルの定義を指す領域レイヤーを指定します(例6-93を参照)。基本的なカスタム・ベース・マップを定義するには、背景レイヤーおよびポインタ・データ・レイヤーを指定します。MAF AMXゲージ・コンポーネントと同様に、メタデータ・ファイルで、画面解像度および表示方向ごとに異なるイメージを指定できます。ゲージタイプ・コンポーネントと同様に、テーマ・マップでは、画面解像度および方向に基づいてレイヤーに適切なイメージが選択されます。表示方向は左から右です。

例6-93 イメージのリストを含むメタデータ・ファイル

<basemap id="car" >
   <layer id="exterior" >
      <image source="/maps/car-800x800.png" 
             width="2560" 
             height="1920" />
      <image source="/maps/car-200x200.png"
             width="640"
             height="480" />
   </layer>
</basemap>

例6-94は、点によってカスタム領域レイヤーを宣言するMAF AMXファイルを示しています。このMAF AMXファイルは、使用可能なイメージのリストを含む例6-93に示すメタデータ・ファイルを指しています。

例6-94 点によるカスタム領域レイヤーの宣言

<dvtm:thematicMap id="tm1" basemap="car" source="customBasemaps/map1.xml" >
   <dvtm:areaLayer id="al1" layer="exterior" >
      <dvtm:pointDataLayer id="pdl1" 
                           var="row" 
                           value="{bindings.thematicMapData.collectionModel}" >
         <dvtm:pointLocation id="pl1" 
                             type="pointXY" 
                             pointX="#{row.x}"
                             pointY="#{row.y}" >
            <dvtm:marker id="m1" fillColor="#FFFFFF" shape="circle" />
         </dvtm:pointLocation>
      </dvtm:pointDataLayer>
   </dvtm:areaLayer>
</dvtm:thematicMap>

前述の例では、ベース・マップIDはthematicMapのbasemap属性と照合され、レイヤーIDはareaLayerのlayer属性と照合されます。点は(前述のベース・マップの場合と同様に)X座標とY座標で定義され、データが更新されたときに変更される可能性がある動的な点に対応します。

例6-95は、点によってカスタム領域レイヤーを宣言するもう1つの方法を示しています。この例では、pointDataLayerは、thematicMapの直接の子です。方法は異なりますが、例6-95では、例6-94で示した宣言と同じ結果がレンダリングされます。

例6-95 直接の子要素を使用した点によるカスタム領域レイヤーの宣言

<dvtm:thematicMap id="demo1" basemap="car" source="customBasemaps/map1.xml" >
   <dvtm:areaLayer id="al1" layer="exterior" />
   <dvtm:pointDataLayer id="pdl1" 
                        var="row" 
                        value="{bindings.thematicMapData.collectionModel}" >
      <dvtm:pointLocation id="pl1" 
                          type="pointXY" 
                          pointX="#{row.x}"
                          pointY="#{row.y}" >
         <dvtm:marker id="m1" fillColor="#FFFFFF" shape="circle" />
      </dvtm:pointLocation>
   </dvtm:pointDataLayer>
</dvtm:thematicMap>

静的な点を含むカスタム・ベース・マップを作成するには、例6-96に示すメタデータ・ファイルで名前で点を指定します。このプロセスは、事前定義済ベース・マップに市区町村のマーカーを追加する場合に類似しています。

例6-96 名前付きの点のリストを含むメタデータ・ファイル

<basemap id="car" >
   <layer id="exterior" >
      <image source="/maps/car-800x800.png" 
             width="2560" 
             height="1920" />
      <image source="/maps/car-800x800-rtl.png" 
             width="2560" 
             height="1920" 
             dir="rtl" />
      <image source="/maps/car-200x200.png" 
             width="640" 
             height="480" />
      <image source="/maps/car-200x200-rtl.png"
             width="640"
             height="480"
             dir="rtl" />
   </layer>
   <points >
      <point name="hood" x="219.911" y="329.663" />
      <point name="frontLeftTire" x="32.975" y="32.456" />
      <point name="frontRightTire" x="10.334" y="97.982" />
   </points>
</basemap>

名前付き点のX位置およびY位置は、layerの最初のimage要素のイメージのサイズにマップされるものと想定されます。

注意: 点は、ベース・マップ内でグローバルであり、すべてのレイヤーに適用されるため、点は特定のレイヤーおよびそのイメージには定義できません。

例6-97は、名前付きの点によってカスタム領域レイヤーを宣言するMAF AMXファイルを示しています。このMAF AMXファイルは、点とそれらの名前のリストを含む例6-93に示すメタデータ・ファイルを参照しています。

例6-97 名前付きの点によるカスタム領域レイヤーの宣言

<dvtm:thematicMap id="demo1" basemap="car" source="customBasemaps/map1.xml" >
   <dvtm:areaLayer id="al1" layer="exterior" />
   <dvtm:pointDataLayer id="pdl1"
                        var="row"
                        value="#{bindings.thematicMapData.collectionModel}" >
      <dvtm:pointLocation id="pl1" type="pointName" pointName="#{row.name}" >
         <dvtm:marker id="m1" fillColor="#FFFFFF" shape="circle" />
      </dvtm:pointLocation>
   </dvtm:pointDataLayer>
</dvtm:thematicMap>

6.5.19.6 イベント・リスナー用のマーカー・サポートに関する必知事項

MAF AMXデータ視覚化では、markerのactionListener属性はサポートされていません。かわりに、action属性を使用することで、同じ機能を実現できます。

6.5.19.7 テーマ・マップ・コンポーネントへのカスタム・スタイルの適用

デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、テーマ・マップ・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

例6-98は、テーマ・マップ・コンポーネントのデフォルトCSSスタイルを示しています。

例6-98 CSSのスタイル設定

.dvtm-thematicMap {
   background-color: #FFFFFF;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
}
   
.dvtm-areaLayer {
   background-color: #B8CDEC;
   border-color: #FFFFFF;
   border-width: 0.5px;
   /* border style and color must be set when setting border width */
   border-style: solid;
   color: #000000;
   font-family: tahoma, sans-serif;
   font-size: 13px;
   font-weight: bold;
   font-style: normal;
}
   
.dvtm-area {
   border-color: #FFFFFF;
   border-width: 0.5px;
   /* border style and color must be set when setting border width */
   border-style: solid;
}
   
.dvtm-marker {
   background-color: #61719F;
   opacity: 0.7;
   color: #FFFFFF;
   font-family: tahoma, sans-serif;
   font-size: 13px;
   font-weight: bold;
   font-style: normal;
   border-style: solid
   border-color: #FFCC33
   border-width: 12px
}

スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。例6-99は、CSSを使用しないでテーマ・マップ・コンポーネントにカスタム・スタイルを適用する方法を示しています。

例6-99 非CSSカスタム・スタイル設定

my-custom.js:

   CustomThematicMapStyle = {
      // selected area properties
      'areaSelected': {
         // selected area border color
         'borderColor': "#000000",
         // selected area border width
         'borderWidth': '1.5px'
      },

      // area properties on mouse hover
      'areaHover': {
         // area border color on hover
         'borderColor': "#FFFFFF",
         // area border width on hover
         'borderWidth': '2.0px'
      },
      
      // marker properties
      'marker': {
         // separator upper color
         'scaleX': 1.0,
         // separator lower color
         'scaleY': 1.0,
         // should display title separator
         'type': 'circle'
      },

      // thematic map legend properties
      'legend': {
         // legend position, such as none, auto, start, end, top, bottom
         'position': "auto"
      }
   };

})();

CustomThematicMapStyleオブジェクトの名前およびプロパティ名は変更できません。かわりに、特定のプロパティ値を、アプリケーションのニーズに合わせて変更できます。カスタムCSSおよびJavaScriptファイルをアプリケーションに追加する方法の詳細は、第4.11章「アプリケーション機能のコンテンツ・タイプの定義」を参照してください。

attributeGroups属性がテーマ・マップ・コンポーネント用に定義されている場合、CustomThematicMapStyleを使用して、そのコンポーネントの図形と色のデフォルト・セットを定義できます。この場合、CustomThematicMapStyleオブジェクトの構造は、例6-100のようになっている必要があります。styleDefaultsは、次のフィールドを含むネストされたオブジェクトです。

• colors: 領域とマーカーに使用される色のセットを表します。

• shapes: マーカーに使用される図形のセットを表します。

例6-100 テーマ・マップのデフォルトのカスタム図形および色の定義

window['CustomThematicMapStyle'] =
{
   // custom style values 
   'styleDefaults': { 
      // custom color palette
      'colors': ["#000000", "#ffffff"],
      // custom marker shapes 
      'shapes' : ['circle', 'square'] 
   }
};

6.5.20 Mapコンポーネントでのイベントの使用方法

MapBoundsChangeEventを使用して、地図マップ・コンポーネントでの次のマップ・ビューのプロパティ変更を処理できます。

• ズーム・レベルに対する変更。

• マップ境界に対する変更。

• マップの中心に対する変更。

これらの変更が発生すると、コンポーネントは、新しいマップ・ビューのプロパティ値でロードされるイベントを起動します。

mapBoundsChangeListenerを地理マップの属性として定義できます。

MapInputEventを使用して、地理マップ・コンポーネントおよびテーマ・マップ・コンポーネントで、タップやマウス・クリックなどのエンド・ユーザー・アクションを処理できます。これらのアクションが発生すると、コンポーネントは、マップの緯度および経度、およびアクションのタイプ(マウス・ダウン、マウス・アップ、クリックなど)に関する情報でロードされるイベントを起動します。

mapInputListenerを地理マップ・コンポーネントの属性として定義できます。

詳細は、次を参照してください。

• 第6.10項「イベント・リスナーの使用方法」

• Oracle Fusion Middleware Oracle Mobile Application FrameworkのJava APIリファレンス

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

6.5.21 ツリーマップ・コンポーネントの作成方法

ツリーマップ(treemap)は、2つのディメンションに渡って(そのノードのサイズおよび色で)階層データを表示します(treemapNode)。

「パレット」で、ツリーマップは「MAF AMXデータ視覚化」→「ツリーマップ」の下にあり、その子コンポーネントは「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」→「サンバーストおよびツリーマップ」の下および「MAF AMXデータ視覚化」→「共有子タグ」の下にあります(図6-71を参照)。

図6-71 「パレット」の「ツリーマップ」およびその他の拡張コンポーネント

例6-101は、MAF AMXファイルで定義されているtreemap要素およびその子を示しています。

例6-101 ツリーマップの定義

<dvtm:treemap id="treemap1"
              value="#{bindings.treemapData.collectionModel}"
              var="row"
              animationDuration="#{pageFlowScope.animationDuration}"
              animationOnDataChange="#{pageFlowScope.animationOnDataChange}"
              animationOnDisplay="#{pageFlowScope.animationOnDisplay}"
              layout="#{pageFlowScope.layout}"
              nodeSelection="#{pageFlowScope.nodeSelection}"
              rendered="#{pageFlowScope.rendered}"
              emptyText="#{pageFlowScope.emptyText}"
              inlineStyle="#{pageFlowScope.inlineStyle}" 
              sizeLabel="#{pageFlowScope.sizeLabel}"
              styleClass="dvtm-gallery-component"
              colorLabel="#{pageFlowScope.colorLabel}"
              sorting="#{pageFlowScope.sorting}"
              selectedRowKeys="#{pageFlowScope.selectedRowKeys}"
              isolatedRowKey="#{pageFlowScope.isolatedRowKey}"
              legendSource="ag1">
   <dvtm:treemapNode id="node1"
                     fillPattern="#{pageFlowScope.fillPattern}" 
                     label="#{row.label}"
                     labelDisplay="#{pageFlowScope.labelDisplay}" 
                     value="#{row.marketShare}" 
                     labelHalign="#{pageFlowScope.labelHalign}" 
                     labelValign="#{pageFlowScope.labelValign}">
      <dvtm:attributeGroups id="ag1" 
                            type="color" 
                            value="#{row.deltaInPosition}" 
                            attributeType="continuous"
                            minLabel="-1.5%"
                            maxLabel="+1.5%"
                            minValue="-1.5" 
                            maxValue="1.5" >
         <amx:attribute id="a1" name="color1" value="#ed6647" />
         <amx:attribute id="a2" name="color2" value="#f7f37b" />
         <amx:attribute id="a3" name="color3" value="#68c182" />
      </dvtm:attributeGroups>
   </dvtm:treemapNode>
</dvtm:treemap>

図6-72 デザインタイムのツリーマップ

attributeGroups要素のattributeType属性をcontinuousに設定することで、グラデーション色を使用してツリーマップ・アイテムに関連付けられている値の視覚化を有効にでき、この色の強度は指定された範囲内の相対値を表します。

treemap要素およびその子要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.21.1 ツリーマップ・コンポーネントへのカスタム・スタイルの適用

デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、ツリーマップ・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

例6-102は、オーバーライド可能なツリーマップ・コンポーネントのデフォルトCSSスタイルを示しています。

例6-102 ツリーマップのデフォルトCSSのスタイル設定

.dvtm-treemap {
   border-style: solid;
   border-color: #E2E8EE;
   border-radius: 3px;
   background-color: #EDF2F7;
   ...
}

例6-103は、オーバーライド可能なツリーマップ・ノードのデフォルトCSSスタイルを示しています。

例6-103 ツリーマップ・ノードのデフォルトCSSのスタイル設定

.dvtm-treemapNodeSelected {
   // Selected node outer border color
   border-top-color: #E2E8EE;
   // Selected node inner border color
   border-bottom-color: #EDF2F7;
}

例6-104は、カスタムCSSを使用してスタイル設定可能なツリーマップ・ノードのlabelテキストのCSSのプロパティを示しています。

例6-104 ラベルのCSSのスタイル設定

.dvtm-treemapNodeLabel {
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   font-style: normal;
   font-weight: normal;
   color: #7097CF;
   ...
}

スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。例6-105は、CSSを使用しないでツリーマップ・コンポーネントにカスタム・スタイルを適用する方法を示しています。

例6-105 非CSSカスタム・スタイル設定

my-custom.js:

   window["CustomTreemapStyle"] = {
      
      // treemap properties
      "treemap" : {
         // Specifies the animation effect when the data changes - none, auto
         "animationOnDataChange": "auto",
         
         // Specifies the animation that is shown on initial display - none, auto
         "animationOnDisplay": "auto",
         
         // Specifies the animation duration in milliseconds
         "animationDuration": "500",
         
         // The text of the component when empty
         "emptyText": "No data to display",
         
         // Specifies the layout of the treemap - 
         // squarified, sliceAndDiceHorizontal, sliceAndDiceVertical
         "layout": "squarified",
         
         // Specifies the selection mode - none, single, multiple
         "nodeSelection": "multiple",
         
         // Specifies whether or not the nodes are sorted by size - on, off
         "sorting": "on"
      },

      // treemap node properties
      "node" : {
         // Specifies the label display behavior for nodes - node, off
         "labelDisplay": "off",
         
         // Specifies the horizontal alignment for labels displayed 
         // within the node - center, start, end
         "labelHalign": "end",
         
         // Specifies the vertical alignment for labels displayed 
         // within the node - center, top, bottom
         "labelValign": "center"
      },
   }

6.5.22 サンバースト・コンポーネントの作成方法

サンバースト(sunburst)は、2つのディメンションに渡って(そのノードのサイズおよび色で)階層データを表示します(sunburstNode)。

「パレット」で、「サンバースト」は「MAF AMXデータ視覚化」の下にあります(子ノードもあります)。

例6-106は、MAF AMXファイルで定義されているsunburst要素およびその子を示しています。

例6-106 サンバーストの定義

<dvtm:sunburst id="sunburst1"
               value="#{bindings.sunburstData.collectionModel}"
               var="row"
               animationDuration="#{pageFlowScope.animationDuration}"
               animationOnDataChange="#{pageFlowScope.animationOnDataChange}"
               animationOnDisplay="#{pageFlowScope.animationOnDisplay}"
               colorLabel="#{pageFlowScope.colorLabel}"
               emptyText="#{pageFlowScope.emptyText}"
               inlineStyle="#{pageFlowScope.inlineStyle}"
               nodeSelection="#{pageFlowScope.nodeSelection}"
               rendered="#{pageFlowScope.rendered}"
               rotation="#{pageFlowScope.rotation}"
               shortDesc="#{pageFlowScope.shortDesc}"
               sizeLabel="#{pageFlowScope.sizeLabel}"
               sorting="#{pageFlowScope.sorting}"
               rotationAngle="#{pageFlowScope.startAngle}"
               styleClass="#{pageFlowScope.styleClass}"
               legendSource="ag1">
   <dvtm:sunburstNode id="node1" 
                      fillPattern="#{pageFlowScope.fillPattern}"
                      label="#{row.label}" 
                      labelDisplay="#{pageFlowScope.labelDisplay}"
                      value="#{pageFlowScope.showRadius ? 1 : row.marketShare}"
                      labelHalign="#{pageFlowScope.labelHalign}"
                      radius="#{pageFlowScope.showRadius ? row.booksCount : 1}">
      <dvtm:attributeGroups id="ag1" 
                            type="color" 
                            value="#{row.deltaInPosition}" 
                            attributeType="continuous"
                            minLabel="-1.5%"
                            maxLabel="+1.5%"
                            minValue="-1.5"
                            maxValue="1.5">
         <amx:attribute id="a1" name="color1" value="#ed6647" />
         <amx:attribute id="a2" name="color2" value="#f7f37b" />
         <amx:attribute id="a3" name="color3" value="#68c182" /> 
      </dvtm:attributeGroups>
   </dvtm:sunburstNode>
</dvtm:sunburst>

図6-73 デザインタイムのサンバースト

attributeGroups要素のattributeType属性をcontinuousに設定することで、グラデーション色を使用してサンバースト・アイテムに関連付けられている値の視覚化を有効にでき、この色の強度は指定された範囲内の相対値を表します。

sunburst要素およびその子要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.22.1 サンバースト・コンポーネントへのカスタム・スタイルの適用

デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、サンバースト・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

例6-107は、オーバーライド可能なサンバースト・コンポーネントのデフォルトCSSスタイルを示しています。

例6-107 サンバーストのデフォルトCSSのスタイル設定

.dvtm-sunburst {
   border-style: solid;
   border-color: #E2E8EE;
   border-radius: 3px;
   background-color: #EDF2F7;
   ...
}

例6-108は、オーバーライド可能なサンバースト・ノードのデフォルトCSSスタイルを示しています。

例6-108 サンバースト・ノードのデフォルトCSSのスタイル設定

.dvtm-sunburstNode {
   // Node border color
   border-color: "#000000";
}

.dvtm-sunburstNodeSelected {
   // Selected node border color
   border-color: "#000000";
}

例6-109は、カスタムCSSを使用してスタイル設定可能なサンバースト・ノードのlabelテキストのCSSのプロパティを示しています。

例6-109 ラベルのCSSのスタイル設定

.dvtm-sunburstNodeLabel {
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   font-style: normal;
   font-style: normal;
   color: #7097CF;
   ...
}

スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。例6-110は、CSSを使用しないでサンバースト・コンポーネントにカスタム・スタイルを適用する方法を示しています。

例6-110 非CSSカスタム・スタイル設定

my-custom.js:

window["CustomSunburstStyle"] = {
   // sunburst properties
   "sunburst" : {
      // Specifies whether or not the client side rotation is enabled - on, off
      "rotation": "off",
      
      // The text of the component when empty
      "emptyText": "No data to display",
      
      // Specifies the selection mode - none, single, multiple
      "nodeSelection": "multiple",
      
      // Animation effect when the data changes - none, auto
      "animationOnDataChange": "auto",
      
      // Specifies the animation that is shown on initial display - none, auto
      "animationOnDisplay": "auto",
      
      // Specifies the animation duration in milliseconds
      "animationDuration": "500",
      
      // Specifies the starting angle of the sunburst
      "startAngle": "90",
      
      // Specifies whether or not the nodes are sorted by size - on, off
      "sorting": "on"
   },
   
   // sunburst node properties
   "node" : {
      // Specifies whether or not the label is displayed - on, off
      "labelDisplay": "off"
   }
}

6.5.23 時系列コンポーネントの作成方法

時系列(timeline)は、イベントを時系列で表示できるインタラクティブ・コンポーネントであり、定義されていてまだ調整可能な時間範囲(ズームに使用可能)内を前後に移動できます。

イベントは、時系列アイテム・コンポーネント(timelineItem)によって表され、これにはタイトル、説明および継続時間の塗りつぶし色が含まれます。2つの時系列を構成して2系列のイベントを表示し、関連する情報を並べて比較することができます。

注意: MAF AMXでは、時系列と同様のコンポーネントで使用できることが多い次の機能、子要素およびプロパティはサポートしていません。 ネストしたUIコンポーネント アニメーション 属性および時間範囲の変更検出 フェッチ時間 カスタム・タイム・スケール 時間の現行性 部分トリガー データのソート 書式設定された時間範囲 タイムゾーン 可視性

「パレット」で、「時系列」は「MAF AMXデータ視覚化」の下にあり、その子コンポーネントである「時系列アイテム」および「時系列の系列」もここにあります。

例6-111は、MAF AMXファイルで定義されているtimeline要素およびその子を示しています。

例6-111 時系列の定義

<dvtm:timeline id="tl"
               itemSelection="#{pageFlowScope.itemSelection}"
               startTime="#{pageFlowScope.startTime}"
               endTime="#{pageFlowScope.endTime}">
   <dvtm:timelineSeries id="ts1"
                        label="#{pageFlowScope.s1Label}"
                        value="#{bindings.series1Data.collectionModel}"
                        var="row"
                        selectionListener=
                            "#{PropertyBean.timelineSeries1SelectionHandler}">
      <dvtm:timelineItem id="ti1"
                         startTime="#{row.startDate}"
                         endTime="#{row.endDate}"
                         title="#{row.title}"
                         description="#{row.description}" 
                         durationFillColor="#AAAAAA"/>
   </dvtm:timelineSeries>
   <dvtm:timeAxis id="ta1" scale="#{pageFlowScope.scale}"/>
</dvtm:timeline>

図6-74 デザインタイムの時系列

時系列アイテムのdurationFillColor属性を使用して、継続時間バーの塗りつぶし色を制御できます。

時系列で2つの時間スケールを同時に表示するには、2番目の軸のスケールを決定する時間軸のscale属性を使用します。

時系列は水平および垂直にスクロールできます。コンポーネントがスクロール可能な(表示可能な表示領域の外側にデータが含まれている)場合、スクロールの方向を指す矢印によって示されます。

timeline要素およびその子要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.23.1 時系列コンポーネントへのカスタム・スタイルの適用

デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、時系列コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第6.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

オーバーライド可能な次のCSSスタイル・クラスは、時系列およびその子コンポーネント用に定義されます。

• .dvtm-timeline

  サポートされているプロパティ: all

• .timelineSeries-backgroundColor

  サポートされているプロパティ: color

  .timelineSeries-labelStyle

  サポートされているプロパティ: font-family、font-size、font-weight、color、font-style

• .timelineItem-backgroundColor

  サポートされているプロパティ: color

  .timelineItem-selectedBackgroundColor

  サポートされているプロパティ: color

  .timelineItem-borderColor

  サポートされているプロパティ: color

  .timelineItem-selectedBorderColor

  サポートされているプロパティ: color

  .timelineItem-borderWidth

  サポートされているプロパティ: width

  .timelineItem-feelerColor

  サポートされているプロパティ: color

  .timelineItem-selectedFeelerColor

  サポートされているプロパティ: color

  .timelineItem-feelerWidth

  サポートされているプロパティ: width

  .timelineItem-descriptionStyle

  サポートされているプロパティ: font-family、font-size、font-weight、color、font-style

  .timelineItem-titleStyle

  サポートされているプロパティ: font-family、font-size、font-weight、color、font-style

• .timeAxis-separatorColor

  サポートされているプロパティ: color

  .timeAxis-backgroundColor

  サポートされているプロパティ: color

  .timeAxis-borderColor

  サポートされているプロパティ: color

  .timeAxis-borderWidth

  サポートされているプロパティ: width

  .timeAxis-labelStyle

  サポートされているプロパティ: font-family、font-size、font-weight、color、font-style

例6-112は、時系列コンポーネントのデフォルトのスタイル設定のオーバーライドに使用できるカスタムのJavaScriptファイルを示しています。

例6-112 カスタムJavaScriptファイル

// Custom timeline style definition with listing
// of all properties that can be overriden
window["CustomTimelineStyle"] = {
   // Determines if items in the timeline are selectable
   "itemSelection": none

   // Timeline properties
   "timelineSeries" : {
      // Duration bars color palette
      "colors" : [comma separated list of hex colors]
   }
}

6.5.24 NBoxコンポーネントの作成方法

NBox (nBox)コンポーネントは、2つのディメンションに渡ってデータを表し、各ディメンションは多数の範囲に分かれ、その交点は各データが配置される個別のセルを形成します。

「パレット」で、「NBox」は「MAF AMXデータ視覚化」の下にあります。

例6-111は、MAF AMXファイルで定義されているnBox要素およびその子を示しています。

例6-113 NBoxの定義

<dvtm:nBox id="nBox1" 
           var="item" 
           value="#{bindings.NBoxNodesDataList.collectionModel}"
           columnsTitle="#{pageFlowScope.columnsTitle}"
           emptyText="#{pageFlowScope.emptyText}"
           groupBy="#{pageFlowScope.groupBy}"
           groupBehavior="#{pageFlowScope.groupBehavior}"
           highlightedRowKeys="#{pageFlowScope.showHighlightedNodes ? 
                                 pageFlowScope.highlightedRowKeys : ''}"
           inlineStyle="#{pageFlowScope.inlineStyle}"
           legendDisplay="#{pageFlowScope.legendDisplay}"
           maximizedColumn="#{pageFlowScope.maximizedColumn}"
           maximizedRow="#{pageFlowScope.maximizedRow}"
           nodeSelection="#{pageFlowScope.nodeSelection}" 
           rowsTitle="#{pageFlowScope.rowsTitle}"
           selectedRowKeys="#{pageFlowScope.selectedRowKeys}"
           shortDesc="#{pageFlowScope.shortDesc}">
   <amx:facet name="rows">
      <dvtm:nBoxRow value="low" label="Low" id="nbr1"/>
       <dvtm:nBoxRow value="medium" label="Med" id="nbr2"/>
       <dvtm:nBoxRow value="high" label="High" id="nbr3"/>
   </amx:facet>
   <amx:facet name="columns">
      <dvtm:nBoxColumn value="low" label="Low" id="nbc2"/>
      <dvtm:nBoxColumn value="medium" label="Med" id="nbc1"/>
      <dvtm:nBoxColumn value="high" label="High" id="nbc3"/>
   </amx:facet>
   <amx:facet name="cells">
      <dvtm:nBoxCell row="low"
                     column="low"
                     label=""
                     background="rgb(234,153,153)" 
                     id="nbc4"/>
      <dvtm:nBoxCell row="medium"
                     column="low"
                     label=""
                     background="rgb(234,153,153)" 
                     id="nbc5"/>
      <dvtm:nBoxCell row="high" 
                     column="low" 
                     label="" 
                     background="rgb(159,197,248)" 
                     id="nbc6"/>
      <dvtm:nBoxCell row="low"
                     column="medium"
                     label="" 
                     background="rgb(255,229,153)"
                     id="nbc7"/>
      <dvtm:nBoxCell row="medium" 
                     column="medium"
                     label=""
                     background="rgb(255,229,153)" 
                     id="nbc8"/>
      <dvtm:nBoxCell row="high" 
                     column="medium" 
                     label=""
                     background="rgb(147,196,125)" 
                     id="nbc9"/>
      <dvtm:nBoxCell row="low"
                     column="high"
                     label="" 
                     background="rgb(255,229,153)" 
                     id="nbc10"/>
      <dvtm:nBoxCell row="medium"
                     column="high" 
                     label=""
                     background="rgb(147,196,125)" 
                     id="nbc11"/>
      <dvtm:nBoxCell row="high" 
                     column="high"
                     label="" 
                     background="rgb(147,196,125)" 
                     id="nbc12"/>
   </amx:facet>
   <dvtm:nBoxNode id="nbn1"
                  row="#{item.row}"
                  column="#{item.column}" 
                  label="#{item.name}"
                  labelStyle="font-style:italic"
                  secondaryLabel="#{item.job}"
                  secondaryLabelStyle="font-style:italic" 
                  shortDesc="#{item.name + ': ' + item.job}">
      <dvtm:attributeGroups id="ag1"
                            type="indicatorShape" 
                            value="#{item.indicator1}"
                            rendered="#{pageFlowScope.showIndicator}"/>
      <dvtm:attributeGroups id="ag2"
                            type="indicatorColor" 
                            value="#{item.indicator2}"
                            rendered="#{pageFlowScope.showIndicator}"/>
      <dvtm:attributeGroups id="ag3"
                            type="color" 
                            value="#{item.group}"
                            rendered="#{pageFlowScope.showColors}"/>
   </dvtm:nBoxNode>
</dvtm:nBox>

図6-75 デザインタイムのNBox

nBox要素およびその子要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.5.25 マップ・コンポーネント、サンバースト、ツリーマップ、時系列およびNBoxの子要素の定義方法

マップ・コンポーネント、サンバースト、ツリーマップ、時系列およびNBoxの様々な子要素を定義できます。使用可能な子要素およびその属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

Oracle Enterprise Pack for Eclipseでは、マップ、サンバースト、ツリーマップ、時系列およびNBoxの子コンポーネントは「パレット」の「MAF AMXデータ視覚化」の下にあります(図6-76を参照)。この図では、「パレット」→「レイアウト」から「詳細」オプションが選択されています。ここでは、「MAF AMXデータ視覚化」リストの各アイコンの隣にツールチップ・コンテンツが表示されています。

図6-76 マップ、サンバースト、ツリーマップ、時系列およびNBoxの子コンポーネントの作成

6.5.26 データバインドされたデータ視覚化コンポーネントの作成方法

「データ・コントロール」ウィンドウ(第5.3.2.3項「データ・コントロールのビューへの追加」を参照)から挿入されるデータ・コレクションを使用して、データバインドされたデータ視覚化コンポーネントを宣言的に作成できます。図6-90に示す「コンポーネント・ギャラリ」ダイアログで、いくつかのデータ視覚化コンポーネント・カテゴリ、タイプおよびレイアウトのオプションの中から選択できます。

図6-77 チャート・コンポーネントを作成するための「コンポーネント・ギャラリ」

図6-78 ゲージ・コンポーネントを作成するための「コンポーネント・ギャラリ」

図6-79 テーマ・マップ・コンポーネントを作成するための「コンポーネント・ギャラリ」

注意: いくつかのデータ視覚化コンポーネント・タイプには、特別な種類のデータが必要です。選択したコンポーネントのタイプの表示に十分なデータが含まれていないデータ・コレクションにコンポーネントをバインドすると、コンポーネントは表示されず、データが不十分であることを示すメッセージが表示されます。

「コンポーネント・ギャラリ」の表示をトリガーするには、「データ・コントロール」ウィンドウからMAF AMXページにコレクションをドラッグ・アンド・ドロップし、表示されるコンテキスト・メニューから「MAFチャート」、「MAFゲージ」または「MAFテーマ・マップ」のいずれかを選択します。(図6-80を参照)。

図6-80 データバインドされたデータ視覚化コンポーネントの作成

「コンポーネント・ギャラリ」から新しいデータバインド・コンポーネントのカテゴリ、タイプおよびレイアウトを選択して「OK」をクリックすると、データ・バインディングのダイアログを使用してデータ視覚化コンポーネントのデータ・コレクション属性のバインディングを開始できます。ダイアログの名前および入力フィールドのラベルは、選択したデータ視覚化コンポーネントのカテゴリおよびタイプに応じて異なります。図6-81に示すように、たとえば、カテゴリとして「横棒」を、タイプとして「棒」を選択した場合、表示されるダイアログの名前は「モバイル横棒チャートの作成」で、入力フィールドには「棒」というラベルがつけられます。

図6-81 データバインドされたチャートのデータ値の指定

データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さなどのマーカーまたは散布図のポイントで示される数字です。データ値のカテゴリは、軸ラベルとして表されるメンバーです。バインディング内で属性が担うロール(データ値またはID)は、データ型(グラフには数値データ値が必要)およびマップされる場所(棒やX軸など)の両方によって決まります。

「コンポーネント・ギャラリ」を使用してデータバインドされたゲージ・コンポーネントを作成する場合、「カテゴリ」に「LED」、「タイプ」に「星形LED」を選択すると、表示されるダイアログの名前はCreate Mobile Star LED Gauge (図6-82を参照)です。

図6-82 データバインドされたゲージのデータ値の指定

「コンポーネント・ギャラリ」を使用してデータバインドされたテーマ・マップ・コンポーネントを作成する場合、選択にかかわらず、表示されるダイアログの名前はCreate Data Layerですが、表示されるフィールドは、「コンポーネント・ギャラリ」での選択に応じて異なります。たとえば、「ベース・マップ」に「World」、「エリア・レイヤー」に「世界(大陸)」を選択した場合、図6-82に示すダイアログが開きます。

図6-83 「データ・レイヤーの作成」ダイアログ

1つ以上のデータ・バインディング・ダイアログの完了後に、「プロパティ」ウィンドウを使用して、コンポーネントの属性の設定を指定できます。コンポーネントと関連付けられた子要素を使用して、さらにカスタマイズすることもできます(第6.5.17項「チャートおよびゲージ・コンポーネントの子要素の定義方法」を参照)。

MAF AMXページにコレクションをドロップする際にコンテキスト・メニューから「MAF地理マップ」、「MAFサンバースト」、「MAF NBox」、「MAFタイムライン」または「MAFツリーマップ」を選択すると、次のいずれかのダイアログが表示されます。

図6-84 データバインドされた地理マップの作成

図6-85 データバインドされたサンバーストの作成

図6-86 データバインドされた時系列の作成

図6-87 データバインドされたツリーマップの作成

図6-88 データバインドされたNBoxの作成

「NBoxの作成」ダイアログへの入力は、行および列の数を定義することから始めます。その後、ボックス上のセルを選択して、ダイアログの下部で行または列全体の値を指定できます(図6-89を参照)。

図6-89 データバインドされたNBoxの行および列の値の設定

NBoxコンポーネントは、「次へ」をクリックして一連のダイアログのすべてのページを入力すると作成されます。

各ダイアログのフィールドごとの値の詳細は、「ヘルプ」をクリックするか[F1]を押して、オンライン・ヘルプを参照してください。

6.5.26.1 データバインドされたチャート・コンポーネントの一連のスタイル設定に関する必知事項

「データ・コントロール」ウィンドウからデータバインドされたチャート・コンポーネントを作成する場合、seriesStyle要素を追加することでチャートの一連のデータに対するスタイル設定情報を宣言的に指定した後に、「プロパティ」ウィンドウを使用してseriesStyle要素のseries属性用のエディタを開くことができます。このエディタには、dataStampファセット内のchartDataItem要素の値に基づいたseries属性の値がすでに移入されています。

6.6 UIコンポーネントのスタイル設定

MAFでは、UIコンポーネントにスタイルを適用するためにCSSを使用できます。

6.6.1 コンポーネント属性を使用したスタイルの定義方法

次の属性を設定することで、UIコンポーネントをスタイル設定できます。

• styleClass属性は、レイアウト・コンポーネントに対して使用するCSSスタイル・クラスを定義します。

  <amx:panelPage styleClass="#{pageFlowScope.pStyleClass}">
  

  MAF AMXページまたはスキニングCSSファイルでレイアウト、コマンドおよび入力の各コンポーネントのスタイル・クラスを定義できますが、その場合、特定のスタイルがMAF AMXアプリケーション機能内のすべてのコンポーネントに適用されます(第6.6.3項「スキニングに関する必知事項」を参照)。かわりに、MAFによって提供されるパブリック・スタイル・クラスを使用できます。

  
  

  注意: Oracle Enterprise Pack for EclipseからCSSファイルにはアクセスできません。かわりに、MAFによって、ビルドまたはデプロイ時にこのファイルがパッケージに注入され、Web Contentルート・ディレクトリの下のcssディレクトリにCSSファイルが表示されます。

  
  

• inlineStyle属性は、任意のUIコンポーネントに使用するCSSスタイルを定義し、コンポーネントのルートDOM要素に適用される一連のCSSスタイルを表します。

  <amx:outputText inlineStyle="color:red;">
  

  この属性は、基本スタイルの変更が必要な場合に使用してください。

  
  

  注意: いくつかのUIコンポーネントは、HTML div要素やさらに複雑なマークアップなどのサブ要素でレンダリングされます。その結果、親コンポーネントにinlineStyle属性を設定しても、目的の効果が得られないことがあります。そのような場合、生成されたマークアップを調べ、inlineStyle属性を定義するかわりに、サブ要素にスタイルを伝播するCSSクラスを適用します。 JavaScriptのデバッグ方法の詳細は、第22.3.5項「JavaコードおよびJavaScriptのデバッグを有効にする方法」を参照してください。

  
  

これらの属性は、「プロパティ」ウィンドウの「プロパティ」セクションに表示されます(図6-90を参照)。Value列を使用して、スタイル・シートを定義するために各プロパティ値を指定します。

図6-90 「プロパティ」ウィンドウの「スタイル」セクション

詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

6.6.2 組込みスタイル・クラスの使用方法

Oracle Enterprise Pack for Eclipseには、各コンポーネントの組込みスタイル・クラスを使用するためのツールが含まれています。これは、HTMLファイルまたはHTML表現(amx:tableLayoutや同様の視覚化要素)を含むXMLファイルにあるタグをクリックしたときに「プロパティ」ウィンドウから使用できます。

要素の組込みスタイル・クラスを編集するには、次の手順を実行します。

1. ソース・エディタで、表示されるツールチップを使用してamx:tableLayoutなどの視覚化表示要素(図6-91を参照)を定義するファイルにあるタグをクリックします。この例では、Oracle Enterprise Pack for Eclipseによって「プロパティ」ペインに「表のレイアウト」ページが表示されています。

   図6-91 「表のレイアウト」表示設定の編集

   
   

2. 「表のレイアウト」ページで、図6-92に示すように「スタイル」タブを選択します。

   図6-92 「表のレイアウト」のスタイルの設定

   
   

3. 「インライン・スタイル」入力ボックスの隣にあるアイコンをダブルクリックします。これによって、図6-93に示す「CSSスタイルの定義」ダイアログが開きます。

   図6-93 「CSSスタイルの定義」ダイアログ

   
   

4. ダイアログの左には、編集可能なスタイル・プロパティのリストがあります。別のスタイル・プロパティを選択するとメイン表示が変わり、この表示には選択したスタイル・プロパティの特性が反映されています。たとえば、「テキスト」パネルでは、表のテキストのフォント、サイズ、スタイルおよびその他の特性を指定でき、「境界」スタイル・プロパティを選択すると上、左、右および下の境界の幅を個別に設定でき、さらに太さ、色やその他の特性も選択できます。

5. スタイルの特性を指定し終わったら、「OK」をクリックします。Oracle Enterprise Pack for Eclipseによって表の特性がAMXファイルに追加されます。

AMXタグを選択すると、その特定のタグに適した特性のリストが「プロパティ」ペインに表示されます。たとえば、amf:outputTextタグをクリックすると、「プロパティ」ペインに「出力テキスト」ダイアログが表示されます(図6-94を参照)。

図6-94 「すべて」タブが選択されている「出力テキスト」設定

図6-94に示すとおり、「すべて」タブを選択すると、編集可能なすべてのプロパティが1つのダイアログが表示されます。ここで示すとおり、「inlineStyle」値を選択して、イメージの右側にある強調表示された省略記号のアイコンをクリックすると、Oracle Enterprise Pack for Eclipseによって「CSSスタイルの定義」ダイアログ(図6-93を参照)が表示され、ここで、amf:outputTextのテキスト、背景、ブロック、ボックス、境界線、リスト、位置および拡張プロパティを指定できます。

6.6.3 スキニングに関する必知事項

スキニングによって、MAF AMXアプリケーション機能内のすべてのUIコンポーネントに均一なスタイルを定義および適用し、機能全体に対するテーマを作成できます。

MAFのデフォルトのスキン・ファミリはmobileAltaで、デフォルト・バージョンはそのスキンの最新バージョンです。詳細は、第4.13項「モバイル・アプリケーションのスキニング」を参照してください。

6.6.4 データ視覚化コンポーネントのスタイル設定方法

MAF AMXデータ視覚化コンポーネントのスタイル・プロパティの大部分は、cssディレクトリにあるdvtm.cssファイルで定義されます。アプリケーション機能レベルでのカスタム・スタイル定義を持つカスタムCSSファイルを追加することでデフォルト値をオーバーライドできます(第4.13.9章「デフォルト・スキン・スタイルのオーバーライド」を参照)。

スタイル・プロパティのいくつかは、CSSにマップできないため、カスタムJavaScriptファイルで定義する必要があります。それらのプロパティは、次のとおりです。

• ダイヤル・ゲージ・コンポーネントの背景および針のイメージ(第6.5.15章「ダイアル・ゲージの作成方法」を参照)。

• 時系列コンポーネントの経過時間バーのカラー・パレット(第6.5.23項「時系列コンポーネントの作成方法」を参照)。

• テーマ・マップ・コンポーネントのベース・マップ(第6.5.19.5項「カスタム・ベース・マップの定義」を参照)。

• 地理マップ・コンポーネントのスタイル・プロパティ(第6.5.18項「地理マップ・コンポーネントの作成方法」を参照)。

• テーマ・マップ・コンポーネントのスタイル・プロパティ(第6.5.19.7項「テーマ・マップ・コンポーネントへのカスタム・スタイルの適用」を参照)。

• 評価ゲージ・コンポーネントのselectedおよびunselected状態(第6.5.16.1項「評価ゲージ・コンポーネントへのカスタム・スタイルの適用」を参照)。

「包含」セクションでこれらのカスタムJavaScriptファイルをアプリケーション機能レベルで指定する必要があります(第4.11.1章「アプリケーション・コンテンツの定義方法」を参照)。それによって、XMLスタイル・テンプレートで定義したデフォルト・スタイル値をオーバーライドします。例6-114はJavaScriptファイルを示していますが、これは、CSSを使用してスタイル設定できないプロパティのカスタム・スタイル設定を必要とするデータ視覚化コンポーネントを持つMAF AMXアプリケーション機能を含むMAFプロジェクトに追加するファイルと似ています。

例6-114 カスタム・スタイル・プロパティの定義

my-custom.js:

   CustomChartStyle = {

      // common chart properties
      'chart': {
         // text to be displayed, if no data is provided
         'emptyText': null,
         // animation effect when the data changes
         'animationOnDataChange': "none",
         // animation effect when the chart is displayed
         'animationOnDisplay': "none",
         // time axis type - disabled, enabled, mixedFrequency
         'timeAxisType': "disabled"
      },

      // chart title separator properties
      'titleSeparator': {
         // separator upper color
         'upperColor': "#74779A",
         // separator lower color
         'lowerColor': "#FFFFFF",
         // should display title separator
         'rendered': false
      },

      // chart legend properties
      'legend': {
         // legend position - none, auto, start, end, top, bottom
         'position': "auto"
      },

      // default style values
      'styleDefaults': {
         // default color palette
         'colors': ["#003366", "#CC3300", "#666699", "#006666", "#FF9900",
                    "#993366", "#99CC33", "#624390", "#669933", "#FFCC33",
                    "#006699", "#EBEA79"],
         // default shapes palette
         'shapes': ["circle", "square", "plus", "diamond",
                    "triangleUp", "triangleDown", "human"],
         // series effect
         'seriesEffect': "gradient",
         // animation duration in ms
         'animationDuration': 1000,
         // animation indicators - all, none
         'animationIndicators': "all",
         // animation up color
         'animationUpColor': "#0099FF",
         // animation down color
         'animationDownColor': "#FF3300",
         // default line width for line chart
         'lineWidth': 3,
         // default line style for line chart - solid, dotted, dashed
         'lineStyle': "solid",
         // should markers be displayed for line and area charts
         'markerDisplayed': false,
         // default marker color
         'markerColor': null,
         // default marker shape
         'markerShape': "auto",
         // default marker size
         'markerSize': 8,
         // pie feeler color for pie chart
         'pieFeelerColor': "#BAC5D6",
         // slice label position and text type for pie chart
         'sliceLabel': {
            'position': "outside",
            'textType': "percent" }
      }
   };

   CustomGaugeStyle = {
      // default animation duration in milliseconds
      'animationDuration': 1000,
      // default animation effect on data change
      'animationOnDataChange': "none",
      // default animation effect on gauge display
      'animationOnDisplay': "none",
      // default visual effect
      'visualEffects': "auto"
   };

   CustomTimelineStyle = {
      'timelineSeries' : {
      // duration bars color palette
      'colors' : ["#267db3", "#68c182", "#fad55c", "#ed6647"]
   };
...
}

JavaScriptファイルを定義した後、任意の値をコメント解除および変更できます。例6-115に示すように、maf-feature.xmlファイルに包含される機能としてこのファイルを追加します。

例6-115 アプリケーション機能でのカスタム・スタイル・ファイルのインクルード

<?xml version="1.0" encoding="UTF-8" ?>
<adfmf:features xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                          xmlns:adfmf="http://xmlns.oracle.com/adf/mf">
   <adfmf:feature id="feature1" name="feature1">
      <adfmf:content id="feature1.1">
         <adfmf:amx file="feature1/untitled1.amx">
            <adfmf:includes>
               <adfmf:include type="StyleSheet" file="css/custom.css"/>
               <adfmf:include type="JavaScript" file="feature1/js/my-custom.js"/>
            </adfmf:includes>
         </adfmf:amx>
      </adfmf:content>
   </adfmf:feature>
</adfmf:features>

6.7 UIコンポーネントのローカライズ

MAF AMXページで、Oracle Enterprise Pack for Eclipseによって提供される標準リソース・バンドルを使用することで、UIコンポーネントによって表示されるテキストをローカライズできます。これは、コンポーネントおよびローカライズする値のテキスト表現のプロパティの1つを選択してから、「プロパティ」ウィンドウの適当なボックスで「テキスト・リソースの選択」を選択します(図6-95を参照)。

図6-95 テキスト・リソースの選択

これによって、図6-96に示す標準「テキスト・リソースの選択」ダイアログが表示されます。このダイアログを使用して、変更するプロパティの文字列参照を入力または検索します。

図6-96 「テキスト・リソースの選択」ダイアログ

ローカライズ済文字列リソースを定義すると、その参照のELが「テキスト・リソースの選択」ダイアログの起動元のプロパティに自動的に入力されます。まだ存在しない場合は、XLIFF (XML Localisation Interchange File Format)ファイルが作成されます。存在する場合は、新しいエントリが既存のXLIFFファイルに追加されます。さらに、ViewControllerBundle.xlfファイル(デフォルト名ですが、名前は基本的にプロジェクトと一致します)を指す表示コンポーネントの子として、対応するバンドルのロード(loadBundle)コンポーネントが作成されます。

注意: ViewControllerBundle.xlfはデフォルトのファイル名です。この名前はプロジェクトの名前と一致します。

図6-97は、MAF AMXファイルでの変更を示しています。

図6-97 MAF AMXファイル内のローカライズ済文字列

詳細は、第4.12.1項「リソース・バンドルの使用」を参照してください。

6.8 MAFのアクセシビリティのサポートの理解

MAFアプリケーションを開発する際は、アクセシビリティの問題に対処することで視覚的および身体的に障害があるユーザーに対応する必要があります。非視覚的なメディアへのレンダリングを行うWebブラウザなどのユーザー・エージェント(スクリーン・リーダーなど)により、UIコンポーネントのテキスト説明が読み上げられ、障害を持つユーザーに有益な情報が提供されます。MAF AMX UIおよびデータ視覚化コンポーネントは、次のアクセシビリティ標準に準拠するように設計されています。

• Accessible Rich Internet Applications (WAI-ARIA) 1.0仕様。

  詳細は、次を参照してください。

  • WAI-ARIA 1.0仕様の「Introduction」(http://www.w3.org/TR/wai-aria/introduction)

  • 「Using WAI-ARIA」(http://www.w3.org/TR/wai-aria/usage)

  • 第6.8.2項「基本的なWAI-ARIA用語に関する必知事項」

• Oracle Global HTML Accessibility Guidelines (OGHAG)。

  詳細は、第6.8.3項「Oracle Global HTML Accessibility Guidelinesに関する必知事項」を参照してください。

• iOSのアクセシビリティ・ガイドライン。

  詳細は、『Accessibility Programming Guide for iOS』を参照してください。

そのようなコンポーネントの導入によって、アクセス可能なコンポーネントの外観の変更されたり、アプリケーション・ロジックが影響受けることがありません。

MAF AMXアプリケーション機能のアクセシビリティが適切に機能するために、次のガイドラインに従ってください。

• ナビゲーションの深さは3レベル以内にして、ユーザーが簡単にホーム画面に戻れるようにする必要があります。

• スクリプトを最小限に維持します。

• DOMとの直接対話を提供しないでください。

• JavaScriptのタイムアウトは使用しないでください。

• フォーカスの不要な変更は回避します。

• ポップアップ・トリガーを明示的に指定する

• 必要に応じて、WAI-ARIAライブ・リージョンを利用します(第6.8.2項「基本的なWAI-ARIA用語に関する必知事項」を参照)。

• CSSの使用を最小限に維持します。

• デフォルト・コンポーネントの外観をオーバーライドしないようにしてください。

• 拡大縮小が可能なサイズ単位を選択します。

• CSSの位置設定は使用しないでください。

詳細は、次を参照してください。

• 『Mobile Accessibility』(http://www.w3.org/WAI/mobile)

• 『Web Content Accessibility and Mobile Web: Making a Web Site Accessible Both for People with Disabilities and for Mobile Devices』(http://www.w3.org/WAI/mobile)

6.8.1 アクセシビリティのためのUIコンポーネントおよびデータ視覚化コンポーネントの構成方法

MAF AMX UIおよびデータ視覚化コンポーネントには、組込みのアクセシビリティ・サポートが備えられており、ほとんどのコンポーネントがアクセシビリティ監査の対象となっています(図6-98を参照)。

表6-10は、「プロパティ」の「アクセシビリティ」セクションで設定できるコンポーネントおよびそれらの属性を示しています。

表6-10 構成可能なアクセシビリティ属性を持つUIコンポーネント

コンポーネント	アクセシビリティ属性	アクセシビリティ監査メッセージ
ボタン(commandButton)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
選択ボタン(selectOneButton)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
リンク(commandLink)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
リンク(実行) (goLink)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
カルーセル(carousel)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
カルーセル・アイテム(carouselItem)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
リスト・アイテム(listItem)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
ポップアップ(popup)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
イメージ(image)	短い説明(shortDesc)	shortDesc属性を指定する必要があります。イメージが装飾目的で使用されている場合、それを空にすることができます。
入力テキスト(inputText)	ヒント・テキスト(hintText)	hintText属性が存在し、フィールドに何が含まれているのかを説明する必要があります。
パネル・グループ・レイアウト(panelGroupLayout)	ランドマーク(landmark)	NA脚注 1
デック(deck)	ランドマーク(landmark)	NA (脚注1を参照)
表のレイアウト(tableLayout)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
セル・フォーマット(cellFormat)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
フィルム・ストリップ(filmStrip)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
フィルム・ストリップ・アイテム(filmStripItem)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
面グラフ(areaChart)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
棒グラフ(barChart)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
横棒グラフ(horizontalBarChart)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
バブル・チャート(bubbleChart)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
コンボ・チャート(comboChart)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
線グラフ(lineChart)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
散布図(scatterChart)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
スパーク・チャート(sparkChart)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
円グラフ(pieChart)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
NBoxノード(nBoxNode)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
参照オブジェクト(referenceObject)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
参照面(referenceArea)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
参照線(referenceLine)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
チャートのデータ・アイテム。(chartDataItem)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
円グラフのデータ・アイテム。(pieDataItem)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
ファンネル・データ・アイテム。(funnelDataItem)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
エリア(area)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
マーカー(marker)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
ツリーマップ・ノード。(treemapNode)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
サンバースト・ノード。(sunburstNode)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
LEDゲージ(ledGauge)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
ステータス・メーター・ゲージ(statusMeterGauge)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
ダイアル・ゲージ(dialGauge)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
評価ゲージ(ratingGauge)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
地理マップ(geographicMap)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
テーマ・マップ(thematicMap)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
ファンネル・チャート(funnelChart)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
NBox (nBox)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
サンバースト(sunburst)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
時系列(timeline)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。
ツリーマップ(treemap)	短い説明(shortDesc)	shortDesc属性が存在し、実行されるアクションを説明する必要があります。

^脚注 1 ランドマーク属性にはデフォルト値(none)があり、アクセシビリティ監査の対象ではありません。

shortDesc属性は、コンポーネントごとに異なる目的で使用します。たとえば、イメージ・コンポーネントにshortDesc属性を設定すると、MAF AMXファイルでそれはimage要素のalt属性の値として表示されます。

shortDesc属性の値はローカライズできます。

パネル・グループ・レイアウト・コンポーネントおよびデック・コンポーネントの場合、ページのコンテキストに従って適用可能なランドマーク・ロール・タイプ(表6-15「ランドマーク・ロール」を参照)を定義します。landmark属性に次の値の1つを設定できます。

• デフォルト(なし)

• アプリケーション

• banner

• complementary

• contentinfo

• form

• main

• navigation

• search

表6-11は、WAI-ARIA仕様によって定義されるそのアクセシビリティ属性が実行時に自動的に適用され、変更できないUIコンポーネントを示しています。

表6-11 静的アクセシビリティ属性を持つUIコンポーネント

コンポーネント	アクセシビリティ属性	アクセシビリティ監査メッセージ
入力日(inputDate)	ラベル(label)	inputDateはラベルが付きません。inputDateのラベル属性は指定する必要があります。
入力数値スライダ(inputNumberSlider)	ラベル(label)	inputNumberSliderはラベルが付きません。inputNumberSliderのラベル属性は指定する必要があります。
パネル・ラベルおよびメッセージ(panelLabelAndMessage)	ラベル(label)	panelLabelAndMessageはラベルが付きません。panelLabelAndMessageのラベル属性は指定する必要があります。
アイテムの選択(selectItem)	ラベル(label)	selectItemはラベルが付きません。selectItemのラベル属性は指定する必要があります。
チェックボックス(selectBooleanCheckbox)	ラベル(label)	selectBooleanCheckboxはラベルが付きません。selectBooleanCheckboxのラベル属性は指定する必要があります。
ブール・スイッチ(selectBooleanSwitch)	ラベル(label)	selectBooleanSwitchはラベルが付きません。selectBooleanSwitchのラベル属性は指定する必要があります。
ラジオ・ボタン(selectOneRadio)	ラベル(label)	selectOneRadioはラベルが付きません。selectOneRadioのラベル属性は指定する必要があります。
チェックボックスを複数選択(selectManyCheckbox)	ラベル(label)	selectManyCheckboxはラベルが付きません。selectManyCheckboxのラベル属性は指定する必要があります。
選択肢を複数選択(selectManyChoice)	ラベル(label)	selectManyChoiceはラベルが付きません。selectManyChoiceのラベル属性は指定する必要があります。
選択肢(selectOneChoice)	ラベル(label)	selectOneChoiceはラベルが付きません。selectOneChoiceのラベル属性は指定する必要があります。
出力テキスト(outputText)	値(value)	NA脚注 1

^脚注 1 値属性はアクセシビリティ監査の対象外です。

図6-98は、Oracle Enterprise Pack for Eclipseに表示されるアクセシビリティ監査警告を示しています。

図6-98 アクセシビリティ監査警告

アクセス可能なMAF AMXアプリケーション機能をテストする方法の詳細は、第22.2.1項「iOSデバイス上でアクセシビリティのテストを実行する方法」を参照してください。

注意: Androidでは、WAI-ARIAアクセシビリティ機能はデータ視覚化コンポーネントに対してサポートされません。 その他のMAF AMX UIコンポーネントは、アプリケーションがAndroidスクリーン・リーダー・モードで実行された場合、正しく動作しない可能性があります。

6.8.2 基本的なWAI-ARIA用語に関する必知事項

WAI-ARIA 1.0仕様に述べられているように、複雑なWebアプリケーションは、支援テクノロジがドキュメントの部分の背後にあるセマンティクスを判別できない場合や、ユーザーが、使用可能な方法で実際にそのすべての部分を移動できない場合に、アクセス不可能になります。WAI-ARIAでは、セマンティクスがロール(ユーザー・インタフェース要素を定義するタイプ)と、ロールによってサポートされている状態およびプロパティに分割されています。次のセマンティクス・アソシエーションによって、WAI-ARIA用語の基礎が形成されています。

• ロール

• ランドマーク

• ライブ・リージョン

詳細は、『Important Terms』(http://www.w3.org/TR/wai-aria/terms)を参照してください。

次の表は、MAFに適用可能なロールのカテゴリ(WAI-ARIA 1.0仕様での定義)を示しています。

表6-12は、全般的なロール概念を定義する目的でWAI-ARIAのロールの分類をサポートするために使用される抽象ロールを示しています。

表6-12 抽象ロール

抽象ロール	説明
input	ユーザー入力を可能にする一般的なタイプのウィジェット。
landmark	ナビゲーショナル・ランドマークを意図したページのリージョン。
select	ユーザーが一連の選択肢から選択を行えるフォーム・ウィジェット。
widget	グラフィカル・ユーザー・インタフェースのインタラクティブ・コンポーネント。

表6-13は、スタンドアロン・ユーザー・インタフェース・ウィジェットまたは大きい複合ウィジェットの一部として機能するウィジェット・ロールを示しています。

表6-13 ウィジェット・ロール

ウィジェット・ロール	説明	ウィジェットで必要とされる状態
alertdialog	アラート・メッセージを含むダイアログのタイプ。最初のフォーカスはそのダイアログ内の要素に移動します。	aria-labelledby、aria-describedby
button	クリックまたは押されたときにユーザーによってトリガーされるアクションを可能にする入力。	aria-expanded (ステート)、aria-pressed (ステート)
checkbox	true、falseまたはmixedの3つの使用可能な値を持つチェック可能な入力。	aria-checked (ステート)
dialog	応答を要求するためにアプリケーションの現在の処理を中断するように設計されているアプリケーション・ウィンドウによって表されるダイアログ。	aria-labelledby、aria-describedby
link	内部または外部リソースへのインタラクティブな参照。アクティブ化されるとユーザー・エージェントがそのリソースにナビゲートします。	aria-disabled (ステート)、aria-describedby
option	選択リスト内の選択可能アイテム。	aria-labelledby、aria-checked (ステート)、aria-selected (ステート)
radio	ラジオ・ロールのグループ内のチェック可能入力。同時にチェックできるのはそれらのうち1つのみです。	aria-checked (ステート)、aria-disabled (ステート)
slider	指定された範囲内からユーザーが値を選択するユーザー入力。	aria-valuemax、aria-valuemin、aria-valuenow、aria-disabled (ステート)
listbox	選択肢のリストからユーザーが1つ以上のアイテムを選択できるウィジェット。	aria-live
radiogroup	ラジオ・ボタンのグループ。	aria-disabled (ステート)
listitem	リストまたはディレクトリ内の単一アイテム。	aria-describedby
textbox	その値として自由形式のテキストを使用できる入力。	aria-labelledby、aria-readonly、aria-required、aria-multiline、aria-disabled (ステート)

表6-14は、ページ内のコンテンツを編成する構造を記述するドキュメント構造ロールを示しています。通常、ドキュメント構造はインタラクティブではありません。

表6-14 ドキュメント構造ロール

ドキュメント構造ロール	説明
img	イメージを形成する要素のコレクションのコンテナ。
list	非インタラクティブ・リスト・アイテムのグループ。
listitem	リストまたはディレクトリ内の単一アイテム。

表6-15は、ナビゲーショナル・ランドマークを意図したページのリージョンを表すランドマーク・ロールを示しています。

表6-15 ランドマーク・ロール

ランドマーク・ロール	説明
アプリケーション	Webアプリケーション(Webドキュメントではなく)として宣言されるリージョン.
banner	ほとんどサイト指向のコンテンツ(ページ固有のコンテンツではなく)を含むリージョン。
complementary	DOM階層の類似したレベルにあるメイン・コンテンツを補足するように設計ているが、メイン・コンテンツから切り離しても意味を持つドキュメントのサポート・セクション。
contentinfo	親ドキュメントに関する情報が含まれている大きな認識可能なリージョン。
form	全体として結合されてフォームを作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。
main	ドキュメントのメイン・コンテンツ。
navigation	ドキュメントまたは関連ドキュメントをナビゲートするためのナビゲーショナル要素(通常はリンク)のコレクション。
search	全体として結合されて検索機能を作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。

MAF UIコンポーネントの大部分では、アクセス可能なWAI-ARIA属性は変更できません。一部のコンポーネントでは、デザインタイムで特別なアクセス可能な属性を設定でき、パネル・グループ・レイアウトおよびデックには、WAI-ARIAランドマーク・ロール・タイプを使用できます。詳細は、第6.8.1項「アクセシビリティのためのUIコンポーネントおよびデータ視覚化コンポーネントの構成方法」を参照してください。

6.8.3 Oracle Global HTML Accessibility Guidelinesに関する必知事項

Oracle Global HTML Accessibility Guidelines (OGHAG)は、オラクル社が準拠しているHTMLの一連のスクリプト標準です。これらの標準は、Section 508 (http://www.section508.govを参照)とWeb Content Accessibility Guidelines (WCAG) 1.0 level AA (http://www.w3.org/TR/WCAG10を参照)を組み合せ、言い回しとチェックポイントの測定を改善したものです。

詳細は、http://www.oracle.com/us/corporate/accessibility/policies/index.htmlのOracleのアクセシビリティについての考え方とポリシーを参照してください。

6.9 入力の検証

MAFでは、データ入力エラーおよびデータ入力中に発生するその他の状態に関してエンド・ユーザーに通知できます。それらのタイプ(エラーまたは警告)に応じて、検証メッセージのルック・アンド・フィールが異なります。

ユーザー入力の検証は、入力が送信されたときにトリガーされます。入力テキスト・コンポーネントは、エンド・ユーザーがフィールドから離れたときに自動的に検証されます。チェックボックスや選択肢などの選択コンポーネントの場合は、エンド・ユーザー選択を行ったときに検証が行われます。検証のために、MAF AMXページのUIコンポーネントは、検証グループ操作(validationGroup)内にまとめられ、送信操作が実行されたときに入力が検証されるコンポーネントが定義されます。検証動作(validationBehavior)コンポーネントは、コマンド・コンポーネントのアクションが実行される前にどの検証グループが検証されるのかを定義します。1つのコマンド・コンポーネントが、複数の子検証動作コンポーネントを持つことができます。コンポーネントに検証動作が定義されていない場合、検証は行われません。

注意: ネストされた検証グループ操作を定義することはできません。 検証グループの無効な定義は次のとおりです。 <amx:view> <amx:panelPage> <amx:validationGroup> <amx:panelGroupLayout> <amx:validationGroup/> <amx:panelGroupLayout/> </amx:validationGroup> </amx:panelPage> </amx:view> 有効な定義は次のとおりです。 <amx:view> <amx:panelPage> <amx:validationGroup> </amx:panelPage> <amx:popup> <amx:validationGroup> </amx:popup> </amx:view>

MAF AMXページに検証エラー・メッセージが含まれている場合は、リスト・アイテム、リンク、ボタンなどのコマンド・コンポーネントを使用して、エンド・ユーザーがそのページに移動しないようにできます。警告を含むメッセージでは、ナビゲーションが停止されることはありません。

例6-116は、MAF AMXファイルでの複数の検証グループ操作および検証動作操作など検証要素の定義方法を示しています。

例6-116 入力の検証の定義

<amx:panelPage id="pp1">
   <amx:facet name="header">
      <amx:outputText id="outputText1" value="Validate"/>
   </amx:facet>
   <amx:facet name="secondary">
      <amx:commandButton id="commandButton2" action="go" text="Save">
         <amx:validationBehavior id="vb1"
                                 disabled="#{pageFlowScope.myPanel ne 'panel1'}"
                                 group="group1"/>
         <amx:validationBehavior id="vb2"
                                 disabled="#{pageFlowScope.myPanel ne 'panel2'}"
                                 group="group2"/>
         <!-- invalid, should be caught by audit rule but for any reason
         if group not found at run time, this validate is ignored -->
         <amx:validationBehavior id="vb3" disabled="false" group="groupxxx"/>
         <!-- group is not found at run time, this validate is ignored -->
         <amx:validationBehavior id="vb4" disabled="false" group="group3"/> 
      </amx:commandButton>
   </amx:facet>
   <amx:panelSplitter id="ps1" selectedItem="#{pageFlowScope.myPanel}">
      <amx:panelItem id="pi1">
         <amx:validationGroup id="group1">
            <amx:panelFormLayout id="pfl1">
               <amx:inputText value="#{bindings.first.inputValue}" 
                              required="true"
                              label="#{bindings.first.hints.label}"
                              id="inputText1"/>
               <amx:inputText value="#{bindings.last.inputValue}"
                              label="#{bindings.last.hints.label}" 
                              id="inputText2"/>
            </amx:panelFormLayout>
         </amx:validationGroup>
      </amx:panelItem>
      <amx:panelItem id="pi2">
         <amx:validationGroup id="group2">
            <amx:panelFormLayout id="pfl2">
               <amx:inputText value="#{bindings.salary.inputValue}"
                              label="#{bindings.first.hints.label}" 
                              id="inputText3"/>
               <amx:inputText value="#{bindings.last.inputValue}"
                              label="#{bindings.last.hints.label}" 
                              id="inputText4"/>
            </amx:panelFormLayout>
         </amx:validationGroup>
      </amx:panelItem>
   </amx:panelSplitter>
   <amx:panelGroupLayout id="pgl1" rendered="false">
      <amx:validationGroup id="group3">
         <amx:panelFormLayout id="pfl4">
            <amx:inputText value="#{bindings.salary.inputValue}"
                           label="#{bindings.first.hints.label}" 
                           id="inputText5"/>
            <amx:inputText value="#{bindings.last.inputValue}"
                           label="#{bindings.last.hints.label}" 
                           id="inputText6"/>
         </amx:panelFormLayout>
      </amx:validationGroup>
   </amx:panelGroupLayout>
</amx:panelPage>

例6-117は、MAF AMXファイルのポップアップに表示される検証メッセージの定義方法を示しています。

例6-117 ポップアップ・メッセージを含む入力の検証の定義

<amx:panelPage id="pp1">
   <amx:facet name="header">
      <amx:outputText id="outputText1" value="Login Demo"/>
   </amx:facet>
   <amx:facet name="secondary">
      <amx:commandButton id="btnBack" action="__back" text="Back"/>
   </amx:facet>
   <amx:panelGroupLayout id="panelGroupLayout1">
      <amx:validationGroup id="group1">
         <amx:panelGroupLayout id="panelGroupLayout2">
            <amx:inputText value="#{bindings.userName.inputValue}"
                           label="#{bindings.userName.hints.label}"
                           id="inputText1"
                           showRequired="true" 
                           required="true"/>
            <amx:inputText value="#{bindings.password.inputValue}"
                           label="#{bindings.password.hints.label}"
                           id="inputText2"
                           required="true" 
                           showRequired="true"
                           secret="true"/>
            <amx:outputText id="outputText2"
                            value="#{bindings.timeToStayLoggedIn.hints.label}:
                            #{bindings.timeToStayLoggedIn.inputValue} minutes"/>
        </amx:panelGroupLayout>
      </amx:validationGroup>
      <amx:commandButton id="commandButton2" 
                         text="Login"
                         action="navigationSuccess">
         <amx:validationBehavior id="validationBehavior2" group="group1"/>
      </amx:commandButton>
   </amx:panelGroupLayout>
</amx:panelPage>

検証メッセージはポップアップ・コンポーネントに表示されます(第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)。検証ポップアップのタイトルを構成することはできません。それは、相対的なメッセージ重大度によって自動的に決定されます。現在のメッセージのうちの最も重大なものが検証ポップアップのタイトルになります。つまり、すべての検証メッセージがWARNINGタイプである場合は、そのタイトルは「警告」になります。メッセージのいくつかがWARNINGタイプで、その他はERRORタイプの場合はタイトルは「エラー」に設定されます。

図6-99は、実行時に生成されるポップアップ検証メッセージを示しています。

図6-99 iPhoneでの検証メッセージ

6.10 イベント・リスナーの使用方法

MAF AMXページからJavaコードを呼び出し、アプリケーション・ロジックを実行するには、次のいずれかの方法でUIコンポーネントの属性としてリスナーを定義します。

• MAF AMXファイルのソースでの手動による方法。

• 選択したコンポーネントの「プロパティ」エディタから行う方法。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。

次のリスナーを使用して、MAF AMXページにUIトリガー・イベントの検出機能を追加できます。

• valueChangeListener: 次のパラメータで作成されるValueChangeEventをリスニングします。

  • 古い値を表すjava.lang.Object

  • 新しい変更済の値を表すjava.lang.Object

• actionListener: パラメータなしで作成されるActionEventをリスニングします。

• selectionListener: 次のパラメータで作成されるSelectionEventをリスニングします。

  • 古い行キーを表すjava.lang.Object

  • 選択済行キーを表すjava.lang.String[]

• moveListener: 古い行キーを表すRowKeyタイプの次のパラメータで作成されるMoveEventをリスニングします。

  • 移動済行キーを表すjava.lang.Object

  • 移動済行キーがその前に挿入された行キーを表すjava.lang.String[]

• rangeChangeListener: パラメータなしで作成されるRangeChangeEventをリスニングします。

• mapBoundsChangeListener: 次のパラメータで作成されるMapBoundsChangeEventをリスニングします。

  • 最小マップ境界のX座標(経度)を表すjava.lang.Object

  • 最小マップ境界のY座標(緯度)を表すjava.lang.Object

  • 最大マップ境界のX座標(経度)を表すjava.lang.Object

  • 最大マップ境界のY座標(緯度)を表すjava.lang.Object

  • マップの中心のX座標(経度)を表すjava.lang.Object

  • マップの中心のY座標(緯度)を表すjava.lang.Object

  • 現在のズーム・レベルを表すint

• mapInputListener: 次のパラメータで作成されるMapInputEventをリスニングします。

  • イベント・タイプを表すjava.lang.String

  • イベント・ポイントのX座標を表すjava.lang.Object

  • イベント・ポイントのY座標を表すjava.lang.Object

• viewportChangeListener: 次のパラメータで作成されるViewportChangeEventをリスニングします。

  • 最小X座標を表すjava.lang.Object

  • 最大X座標を表すjava.lang.Object

  • 最小Y座標を表すjava.lang.Object

  • 最大Y座標を表すjava.lang.Object

  • 最初の表示可能グループを表すjava.lang.Object

  • 最後の表示可能グループを表すjava.lang.Object

リスナーの値は、パターン#{*}に一致している必要があり、次の要件を満たしている必要があります。

• タイプ名: EL式

• ベース・タイプ: 文字列

• プリミティブ・タイプ: 文字列

ELイベントの詳細は、第7.3.6項「ELイベントについて」を参照してください。

ほとんどのMAF AMXイベント・クラスは、oracle.adfmf.amx.event.AMXEventクラスを拡張します。Javaコードでイベント・リスナーを定義するときは、oracle.adfmf.amx.event.AMXEventクラスを渡す必要があります。

詳細は、次を参照してください。

• Oracle Fusion Middleware Oracle Mobile Application FrameworkのJava APIリファレンス

• Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス

MAFでは、マネージドBeanメソッドがMAF AMX固有のイベント・クラスを使用するように、リスナーに対してマネージドBeanメソッドを作成できます。例6-118、例6-119および例6-120は、同じマネージドBeanメソッドをコールするボタンおよびリンク・コンポーネントを示しています。AMXEventのソース値は、コンポーネントのIDを含むメッセージ・ボックスを表示することでどのオブジェクトがイベントを起動したのかを判別します。

例6-118 MAF AMXファイルからのBeanメソッドのコール

<amx:commandButton text="commandButton1" 
                   id="commandButton1"
                   actionListener="#{applicationScope.Bean.actionListenerMethod}">
</amx:commandButton>
<amx:commandLink text="commandLink1" 
                 id="commandLink1"
                 actionListener="#{applicationScope.Bean.actionListenerMethod}">
</amx:commandLink>

例6-119 AMXEventの使用方法

private void actionListenerMethod(AMXEvent amxEvent) {
   // Some Java handling
}

例6-120 イベント・メソッドの呼出し

public Object invokeMethod(String methodName, Object[] params) {
   if (methodName.equals("actionListenerMethod")) {
      actionListenerMethod((AMXEvent) params[0]);
   }
   return null;
}

その他の例については、「ファイル」→「新」→「MAFサンプル」にあるAPIDemoアプリケーションというMAFサンプル・アプリケーションを参照してください。このサンプルは、Java Beanからリスナーをコールする方法を示しています。

6.10.1 イベント・リスナーの制約付きタイプ属性に関する必知事項

イベント・リスナーは、一部のMAF AMX UIコンポーネントの子として定義できます。リスナーのtype属性によって、それらがどのイベントを処理するために登録されるのかが識別されます。各親UIコンポーネントでは(親コンポーネントに適した)イベントのサブセットのみがサポートされているため、これらのサポートされているイベントは、リスナーに対して選択できる限られたタイプのリストに提示されます。

表6-16は、親UIコンポーネント、それが子として持つことができるイベント・リスナー、およびそれらがサポートしているイベント・タイプを示しています。

表6-16 サポートされているイベント・リスナーとイベント・タイプ

UIコンポーネント(親)	アクション・リスナー(子)	プロパティ・リスナーの設定(子)	ポップアップ表示動作(子)	ポップアップを閉じる動作(子)	actionListener (属性)	valueChangeListener (属性)	moveListener (属性)	selectionListener (属性)	mapBoundsChangeListener (属性)	mapInputListener (属性)	viewportChangeListener (属性)	rangeChangeListener (属性)
ボタン	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
リンク	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
リスト・アイテム	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
入力日	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
入力数値スライダ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
入力テキスト	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
リスト・ビュー	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象
チェックボックス	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
スイッチ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
チェックボックス(複数選択)	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
選択肢(複数選択)	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
選択肢	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
選択ボタン	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
ラジオ・ボタン	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
リンク(実行)	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
カルーセル	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
カルーセル・アイテム	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
イメージ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
面グラフ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象	サポート対象外
棒グラフ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象	サポート対象外
バブル・チャート	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外
コンボ・チャート	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象	サポート対象外
横棒グラフ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象	サポート対象外
LEDゲージ	サポート対象外	サポート対象外	サポート対象	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
ダイヤル・ゲージ	サポート対象外	サポート対象外	サポート対象	サポート対象	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
評価ゲージ	サポート対象外	サポート対象外	サポート対象	サポート対象	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
線グラフ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象	サポート対象外
円グラフ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外
散布図	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外
スパーク・チャート	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
ステータス・メーター・ゲージ	サポート対象外	サポート対象外	サポート対象	サポート対象	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
地理マップ	サポート対象外	サポート済脚注 1	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート済脚注 2	サポート対象	サポート対象	サポート対象外	サポート対象外
テーマ・マップ	サポート対象外	サポート済脚注 3	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート済脚注 4	サポート対象外	サポート対象外	サポート対象外	サポート対象外
サンバースト	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外
ツリーマップ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外
時系列	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
NBox	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外

^脚注 1 プロパティ・リスナーの設定は、地理マップの領域のマーカーの子として指定できます。

^脚注 2 selectionListener属性は、地理マップの面データ・レイヤーまたは点データ・レイヤーに設定できます。

^脚注 3 プロパティ・リスナーの設定は、テーマ・マップの領域のマーカーの子として指定できます。

^脚注 4 selectionListener属性は、テーマ・マップの面データ・レイヤーまたは点データ・レイヤーに設定できます。

子イベント・リスナーのそれぞれのtype属性には、リスナー・イベントと一致する値の基本セットがあります。これらの値は表6-16に示す情報に基づいてフィルタ処理され、それによって、子イベント・リスナーが、識別された親UIコンポーネントのコンテキスト内にある場合に、その親によってサポートされているイベントのみが表示されるようになります。たとえば、ボタン・コンポーネントの下にあるアクション・リスナーまたはプロパティ・リスナーの設定の子では、actionタイプの値およびジェスチャーのみか表示されます。

---

脚注の凡例

脚注 1:  詳細は、第6.3.26.1項「disabled属性に関する必知事項」を参照してください。