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

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

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

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

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

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

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

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

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

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

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

• 第13.9項「入力の検証」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次の例は、MAF AMXファイルに定義されたpanelGroupLayout要素を示しています。

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

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

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

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

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

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

13.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 Mobile Application Frameworkタグ・リファレンスを参照してください。

次の例は、MAF AMXファイルに定義されたpanelFormLayout要素を示しています。

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

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

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

<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 Mobile Application Frameworkタグ・リファレンスを参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  
  

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

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

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

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

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

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

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

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

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

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

  
  

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

  
  

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

  
  

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

  
  

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

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

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

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

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

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

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

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

   
   

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

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

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

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

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

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

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

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

<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 Mobile Application Frameworkタグ・リファレンスを参照してください。

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

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

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

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

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

次の例は、MAF AMXファイルに定義されたspacer要素を示しています。

<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..."/>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 Mobile Application Frameworkタグ・リファレンスを参照してください。

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

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

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

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

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

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

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

第12.3.1項「MAF AMXページの操作方法」には、MAF AMXページおよび対応するMAF AMXフラグメント・ファイルに追加されたfragment要素を示す2つの例があります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

13.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" />
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

図13-6 実行時のiOSの「Go」および「Search」ボタン

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

表13-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デバイスでテストする必要があります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

13.3.5 ボタンの使用方法

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

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

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

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

  
  

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

  
  

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

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

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

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

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

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

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

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

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

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

1. 標準。

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

3. 無効。

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

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

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

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

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

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

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

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

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

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

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

次の例は、MAF AMXファイルで宣言されているcommandButton要素を示しています。最初の例は、テキスト・ラベル付きのデフォルト・ボタンの定義を示しています。

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

次の例は、イメージ・アイコン付きのデフォルト・ボタンの定義を示しています。

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

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

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

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

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

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

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

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

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

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

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

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

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

<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によって戻る矢印スタイル設定が自動的に適用されます(図13-10参照)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 「暗い」スタイル

• 「明るい」スタイル

• 「小規模」スタイル

• 「大規模」スタイル

• 「強調表示」スタイル

• 「確認」スタイル

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

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

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

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

• ナビゲーション・バー

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

• アクション・シート

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

ナビゲーション・バー

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

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

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

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

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

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

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

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

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

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

コンテンツ領域

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

アクション・シート

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

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

アラート・メッセージ

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

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

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

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

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

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

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

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

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

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

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

   • アクション・リスナー

   • ポップアップ表示動作

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

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

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

13.3.6 リンクの使用方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

13.3.7 イメージの表示方法

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

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

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

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

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

• GIF

• JPEG

• PNG

• BMP

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

• PNG

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

図13-21 デザインタイムの選択肢を複数選択

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

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

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

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

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

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

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

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

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

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

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

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

図13-22 デザインタイムの選択ボタン

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

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

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

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

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

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

次の例は、MAF AMXファイル内のselectOneRadio要素定義を示しています。最初の例は、アイテムの選択コンポーネントを使用したラジオ・ボタンの定義を示しています。

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

次の例は、アイテムの選択コンポーネントを使用したラジオ・ボタンの定義を示しています。

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

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

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

図13-23 デザインタイムのラジオ・ボタン

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

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

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

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

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

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

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

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

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

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

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

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

図13-24 デザインタイムの選択肢

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

通常、リスト・アイテム(listItem)・コンポーネントは、リスト・ビュー・コンポーネント内の1つのアイテムを表しており、リスト・アイテム・コンポーネントをリスト・ビュー内に配置して、データ・アイテムのリストのレイアウト設定およびスタイル設定を行います。各アイテムには複数のリスト・アイテム・コンポーネントが含めることができ、この場合、リスト・アイテム・コンポーネントがアイテム(行)を満たすと、超過リスト・アイテム・コンポーネントは後続行に折り返します。これを構成するには、リスト・ビュー・レイアウト属性をカードに設定します(デフォルト・レイアウトは行で、リスト内の1つのアイテム当たり1つのリスト・アイテム・コンポーネントを表示します)。詳細は、第6.3.15.3項「リスト・ビュー・レイアウトの構成」を参照してください。セクションの追加

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

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

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

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

• 基本リスト

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

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

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

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

  
  

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

  <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;"を追加します。

  
  

• アイコン付きリスト

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

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

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

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

  
  

• 検索付きリスト

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

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

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

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

  • 同時に閉じます。

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

  <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までの文字が有効になります。その他の文字は、行がさらにロードされるとインデクサに表示されます。

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

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

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

  
  

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

• 凹枠リスト

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

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

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

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

  
  

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

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

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

図13-28 リスト・ビュー形式のコンポーネント・ギャラリ

表13-6には、リスト・ビュー・コンポーネント・ギャラリに表示されるサポート済のリスト・フォーマットが一覧表示されています。

表13-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つのバリエーションがあり、表13-7に示す16の固有の説明が提供されています。

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

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

「パレット」→「データ」→「データ・コントロール」ペインからデータ・バインディングを選択した後、エディタにドロップすると、OEPEにはリストビュー・ギャラリが表示されます(図13-29を参照)。

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

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

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

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

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

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

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

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

図13-29は、リスト要素のレイアウトを指定できる「リスト・ビューの構成」ダイアログを示しています。

図13-29 「リスト・ビューの構成」ダイアログ

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

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

• 用意されているデータ・コレクション値がコレクションベースでない場合、「値」列によって、「値バインディング」列が空白値と置き換えられます。

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

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

• 第13.3.15.3項「リスト・ビュー・レイアウトの構成」

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

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

• 付録E「アプリケーションの使用方法の制限」

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

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

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

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

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

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

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

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

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

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

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

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

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

  
  

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

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

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

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

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

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

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

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

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

  inlineStyle="height: 200px;"
  

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

ダイアログの「OK」をクリックすると、この設定がMAF AMXページのlistView要素に追加されます。

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

また、次の例に示すJavaメソッドがサンプルのHRBeanクラスに追加されます。

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

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

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

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

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

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

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

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

<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 Mobile Application Frameworkタグ・リファレンスを参照してください。

13.3.15.3 リスト・ビュー・レイアウトの構成

リスト・ビュー・コンポーネントは、各行が1つのリスト・アイテム・コンポーネントを含んでいる(デフォルト)行のセットとして、または、各カードが1つ以上のリスト・アイテム・コンポーネントを含んでいるカードのセットとしてレイアウトできます。

レイアウトを定義するには、リスト・ビューのlayout属性を使用し、これをrowsまたはcardsに設定します。カード・レイアウトを使用する場合は、次の点について考慮してください。

• 各リスト・アイテム・コンポーネントは、水平に並べられたカードのグループ内のカードとして表示されます。

• 使用可能なスペースがすべて消費されると、次のカードが新しい行で折り返されます。

• リスト・ビュー内でリスト・アイテム・コンポーネント(カード)の水平配置を制御するには、リスト・ビューのhalign属性をstart、centerまたはendに設定します。

• リスト・ビューの外観を一般的にカスタマイズするには、次の手順を実行します。

  • スキン内でデフォルトで定義されているカード・サイズをオーバーライドするには、リスト・アイテムのinlineStyle属性を使用して新しい幅を指定します。詳細は、第13.6.1項「コンポーネント属性を使用したスタイルの定義方法」を参照してください。

    
    

    注意: 値をautoにしたり、パーセント単位を使用することはできません。

    
    

    あるいは、スキニングを使用して.amx-listView-cards .amx-listItemセレクタから幅をオーバーライドできます(第13.6.3項「スキニングに関する必知事項」を参照)。

  • スキン内でデフォルトで定義されているカードの周囲のスペースをオーバーライドするには、リスト・アイテムのinlineStyle属性を使用して新しいmargin-topおよびmargin-leftを指定し(第13.6.1項「コンポーネント属性を使用したスタイルの定義方法」を参照)、リスト・ビューのcontentStyle属性を使用して新しいpadding-bottomおよびpadding-rightを指定します。

    あるいは、スキニングを使用して.amx-listView-cards .amx-listItemセレクタからmargin-topおよびmargin-leftをオーバーライドし、.amx-listView-cards .amx-listView-contentセレクタからpadding-bottomおよびpadding-rightをオーバーライドします(第13.6.3項「スキニングに関する必知事項」を参照)。

レイアウトの場合、halign属性を使用して、わずかなリスト・アイテム・コンテンツの配置を変更します。ただし、この属性を使用しても、視覚的な効果がないことがあります。

カード・レイアウトを備えたリスト・ビュー・コンポーネントが編集モードにあると、レイアウトはrowsモードに切り替わります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次の例は、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に設定されているため、右向き矢印は表示されません。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

OEPEでは、「カルーセル」は「パレット」のMAF AMXの下にあります(図13-37を参照)。

図13-37 「パレット」の「カルーセル」

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

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

<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 Mobile Application Frameworkタグ・リファレンス

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

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

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

OEPEでは、フィルム・ストリップは「パレット」のMAF AMXの下にあります(図13-38を参照)。

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

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

<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 Mobile Application Frameworkタグ・リファレンス

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

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

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

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

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

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

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

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

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

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

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

OEPEでは、「Verbatim」は「パレット」のMAF AMXの下にあります(図13-39を参照)。

図13-39 「パレット」の「Verbatim」

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

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

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

13.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コード層から発生する必要があります。

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

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

OEPEでは、出力HTMLは「パレット」のMAF AMXの下にあります(図13-40を参照)。

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

次の例は、MAF AMXファイル内のoutputHtml要素定義を示しています。value属性は、文字列プロパティに対してELバインディングを提供し、これは、MAF AMXページの最終レンダリングのoutputHTMLとして表示される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>

次の例は、前述の例で示した出力HTMLコンポーネントのHTMLを提供するMyPurchaseBeanという名前のJavaBeanのコードを示しています。

// 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コンポーネントはそのHTMLコンテンツをリモート・ソースから直接ダウンロードするのではなく、JavaBeanプロパティから取得するため、動的に提供されるHTMLの取得または生成をコーディングする場合は、既存のMAFセキュリティ機能を使用することを検討してください。詳細は、第30章「MAFアプリケーションの保護」を参照してください。さらに、提供されるHTMLが信頼できるソースのものであり、脅威がないことを確認してください。

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

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

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

13.3.20 反復の有効化方法

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

OEPEでは、「イテレータ」は「パレット」のMAF AMXの下にあります。

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

13.3.21 リソース・バンドルのロード方法

バンドルのロード(loadBundle)操作によって、ページ上のMAF AMX UIコンポーネントにローカライズ済テキストを提供するリソース・バンドルを指定できます。詳細は、第13.7項「UIコンポーネントのローカライズ」を参照してください。

OEPEでは、「バンドルのロード」は「パレット」のMAF AMXの下にあります(図13-41を参照)。

図13-41 「パレット」の「バンドルのロード」

MAF AMXファイル内で、loadBundle要素をview要素の子として宣言します。

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

13.3.22 アクション・リスナーの使用方法

アクション・リスナー(actionListener)コンポーネントにより、親コンポーネントが使用するタイプに基づいてELを介して宣言でコマンドを呼び出すことができます。

アクション・リスナー・コンポーネントを使用する重要な理由は、ジェスチャー・サポート・アクションを親コンポーネントに追加できること、および1つのジェスチャー(タップを含む)で複数の操作を実行できる機能です。詳細は、第13.3.22.1項「アクション・リスナー・コンポーネントと属性間の相違点に関する必知事項」を参照してください。

OEPEでは、「アクション・リスナー」コンポーネントは「パレット」のMAF AMXの下にあります(図13-42を参照)。

図13-42 「パレット」の「アクション・リスナー」

0(ゼロ)以上のアクション・コンポーネントを任意のコマンド・コンポーネント(ボタン、リンク、リスト・アイテム、フィルム・ストリップ・アイテムおよびデータ視覚化コンポーネントのサブセット)の子として追加できます。アクション・リスナー・コンポーネントのtype属性は、ActionEventを作動させるジェスチャー(swipeLeft、swipeRight、tapHoldなど)を定義します。

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

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

• 第13.3.23項「プロパティ・リスナーの設定の使用方法」

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

• 第13.3.22.1項「アクション・リスナー・コンポーネントと属性間の相違点に関する必知事項」

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

13.3.22.1 アクション・リスナー・コンポーネントと属性間の相違点に関する必知事項

ボタン、リンク、リスト・アイテムなどのコンポーネントにはactionListener属性があり、これは、アクション・リスナー・コンポーネントを冗長にする可能性があります。ただし、アクション・リスナー・コンポーネントとは異なり、これらのコンポーネントにはジェスチャーをサポートするtype属性がないため、MAFでは、親コンポーネントのactionListener属性に加えて、アクション・リスナー・コンポーネントが提供されています。

13.3.23 プロパティ・リスナーの設定の使用方法

プロパティ・リスナーの設定(setPropertyListener)コンポーネントによって、コンポーネントでのエンド・ユーザー・アクションを受けて、1つの場所(コンポーネントのfrom属性で定義)から別の場所(コンポーネントのto属性で定義)に宣言的に値をコピーできるため、同じ結果を得るためにJavaコードを記述する必要がありません。

OEPEでは、「プロパティ・リスナーの設定」コンポーネントは「パレット」のMAF AMXの下にあります(図13-43を参照)。

図13-43 「パレット」の「プロパティ・リスナーの設定」

次の例は、MAF AMXファイル内のsetPropertyListener要素定義を示しています。

<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など)を定義します。

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

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

• 第13.3.22項「アクション・リスナーの使用方法」

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

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

13.3.24 日時の変換方法

日時の変換(convertDateTime)は、独立したUIコンポーネントではありません。これは、出力テキストおよび入力テキスト・コンポーネントと組み合せて使用して、指定されたパターンに従った様々な書式で、変換された日付、時刻または日時の組合せを表示するコンバータ操作です。

OEPEでは、「日時の変換」は「パレット」のMAF AMXの下にあります(図13-44を参照)。

図13-44 「パレット」の「日時の変換」

次の例は、MAF AMXファイルで宣言されているconvertDateTime要素を示しています。

<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 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などです。

13.3.24.1 日時パターンに関する必知事項

java.text.SimpleDateFormat定義に従って、日時書式を、日時パターン文字列で指定します。日時パターン文字列では、引用符で囲まれていないAからZおよびaからzの文字は、日付または時間の文字列のコンポーネントを表すパターン文字と認識されます。テキストは、解釈されないように一重引用符(')で囲むことができます。" ' ' "は一重引用符を表します。すべてのその他の文字は解釈されません。かわりに、それらは書式設定中に単に出力文字列にコピーされるか、解析中に入力文字列と照合されます。

表13-9は、定義済パターン文字を示しています(AからZおよびaからzのすべてのその他の文字は予約されています)。

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

パターン文字は通常繰り返されます。これは、それらの数が正確な表示を決定するためです。

13.3.25 数値の変換方法

数値の変換(convertNumber)は、独立したUIコンポーネントではなく、出力テキストおよび入力テキスト、入力テキストおよび入力数値スライダの各コンポーネントと組み合せて使用して、次の指定されたパターンに従った様々な書式で、変換された数値または通貨値を表示するコンバータ操作です。

数値の変換コンポーネントは、次のタイプの操作を提供します。

• 値から文字列。表示目的です。

• 書式設定された文字列から値。書式設定された入力値が、基礎となっている値に解析される場合です。

数値の変換が、入力テキスト・コンポーネントの子として指定されている場合、デフォルトで、モバイル・デバイスに数字キーボードが表示されます。

OEPEでは、「数値の変換」は「パレット」のMAF AMXの下にあります(図13-45を参照)。

図13-45 「コンポーネント」ウィンドウの「数値の変換」

次の例は、MAF AMXファイルで定義されているconvertNumber要素を示しています。

<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 Mobile Application Frameworkタグ・リファレンスを参照してください。

注意: 数値の変換コンポーネントは、デザインタイムには何の効果も持ちません。

13.3.26 ドラッグ・ナビゲーションの有効化

ナビゲーション・ドラッグ動作(navigationDragBehavior)の処理では、モバイル・デバイスの画面を指定された方向(左または右)にドラッグすることで、次または前のMAF AMXページに移動するアクションを起動できます。指定された方向へのドラッグが発生するとインジケータが画面の適切な側に表示され、引き続きドラッグしてインジケータが完全に表示されたときに停止するとアクションが実行されることを示します。インジケータが完全に表示される前にドラッグを放すと、インジケータがスライドされ、アクションは起動されません。

注意: ドラッグ・ジェスチャーを消費する近いコンテナが他にない場合、この動作は発生しません。

MAF AMXページには、navigationDragBehavior要素の3つ以上のインスタンスを含むことはできず、1つはdirection属性をbackに設定したもので、もう1つはforwardに設定したものです。

OEPEでは、ナビゲーション・ドラッグ動作は「パレット」のMAF AMXの下にあります(図13-46を参照)。

図13-46 「パレット」の「ナビゲーション・ドラッグ動作」

次の例は、MAF AMXファイルで定義されているnavigationDragBehavior要素を示しています。この要素は、view要素の子にのみなれることに注意してください。

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

図13-47は、実行時のドラッグ・ナビゲーション動作を示しています(mobileFusionFxスキンを使用して表示)。

図13-47 実行時のドラッグ・ナビゲーション動作の処理

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

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

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

13.3.26.1 disabled属性に関する必知事項

disabled属性の値(次の2つの例を参照)は、次のいずれかのことが発生したときに計算されます。

• MAF AMXページがレンダリングされる。

• PropertyChangeListenerがコンポーネントを更新する: エンド・ユーザーのナビゲーション・ドラッグ動作を起動する機能を動的に有効化または無効化する場合、PropertyChangeListenerを使用します(Beanからの更新が必要な他のコンポーネントで使用される方法と同様)。

次の最初の例は、disabled属性が定義されているnavigationDragBehavior要素を含むMAF AMXページを示しています。アクティブ化された場合に、disabled属性がその値を読み取るバッキングBeanのboolean値(次の2番目の例のnavDisabled)を変更するボタン(commandButton)によって機能が駆動されます。その後、バッキングBeanはPropertyChangeListenerを使用します。

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

次の例は、navigationDragBehaviorのdisabled属性の値を提供するバッキングBean (前述の例のmyBean)を示しています。

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);
   }
}

13.3.27 ロード・インジケータの使用方法

ロード・インジケータ動作(loadingIndicatorBehavior)の処理では、次のことをオーバーライドすることで、ロード・インジケータの動作を定義できます。

• フェイルセーフ・タイマーの持続時間(ミリ秒単位)。

• フェイルセーフしきい値に達した場合に、アクションの方針の決定するために起動できるオプションのJavaScript関数名。

詳細は、adf.mf.api.amx.showLoadingIndicatorを参照してください。

OEPEでは、ロード・インジケータ動作は「パレット」のMAF AMXの下にあります(図13-48を参照)。

図13-48 「パレット」の「ロード・インジケータ動作」

次の例は、MAF AMXファイルで定義されているloadingIndicatorBehavior要素を示しています。この要素は、view要素の子にのみなれることに注意してください。

<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は長時間実行メソッドにバインドされ、ページがロードされると、ロード・インジケータが実行時間の長い操作に適用されることを示しています(ページ自体のロードに時間がかかる場合ではなく)。

次の例は、アプリケーション機能に含まれるcustom.jsファイルを示しています。これは、loadingIndicatorBehaviorページでfailSafeClientHandlerのクライアント・ハンドラを定義します。API要件によって、この関数はhide、repeatまたはfreezeのいずれかのStringを返します。詳細は、adf.mf.api.amx.showLoadingIndicatorを参照してください。

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 Mobile Application Frameworkタグ・リファレンス

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

13.4 ジェスチャーの有効化

次のジェスチャーに反応するために、ボタン、リンク、リスト・アイテムおよび多数のデータ視覚化の各コンポーネントを構成できます。

• 右方向にスワイプ

• 左方向にスワイプ

• 上方向にスワイプ

• 下方向にスワイプ

• タップしたまま押さえる

• 始点方向にスワイプ: このジェスチャーは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。このジェスチャーは、次のように解決されます。

  • テキスト方向が左から右である場合、左方向にスワイプします。

  • テキスト方向が右から左である場合、右方向にスワイプします。

• 終点方向にスワイプ: このジェスチャーは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。このジェスチャーは、次のように解決されます。

  • テキスト方向が左から右である場合、右方向にスワイプします。

  • テキスト方向が右から左である場合、左方向にスワイプします。

次の操作のtype属性に対して、swipeRight、swipeLeft、swipeUp、swipeDown、swipeStart、swipeEndおよびtapHold値を定義できます。

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

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

• ポップアップ表示動作(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• ポップアップを閉じる動作(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

type属性の値は親コンポーネントに基づいて制限されており、リンク(commandLink)およびリスト・アイテム(listItem)のコンポーネントに対してのみサポートされています。

注意: リンク(実行) (linkGo)コンポーネントに対するジェスチャー・サポートはありません。

始点方向にスワイプと終点方向にスワイプは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。通常は、左と右ではなく、始点と終点のスワイプ・スタイルを設定することをお薦めします。

次の例は、MAF AMXファイルのtype属性のtapHold値の使用を示しています。この例では、タップしたまま押さえるジェスチャーによってポップアップ・コンポーネントの表示がトリガーされます。

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

次の例は、MAF AMXファイル内のswipeRightジェスチャーの使用方法を示しています。

<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 Mobile Application Frameworkタグ・リファレンスを参照してください。

GestureDemoという名前のMAFサンプル・アプリケーションは、様々なMAF AMX UIコンポーネントでのジェスチャーの使用方法を示しています。このサンプル・アプリケーションは、「ファイル」→「新」→「MAFサンプル」にあるアプリケーションです。

13.5 データ視覚化の指定

MAFでは、データ視覚化コンポーネントのセットを様々なチャート、ゲージおよびマップの作成に使用して、MAF AMXアプリケーション機能のデータを表すことができます。MAF AMXファイルの<dvtm>ネームスペースの下で次の要素を宣言できます。

• areaChart (第13.5.1項「面グラフの作成方法」を参照)

• barChart (第13.5.2項「棒グラフの作成方法」を参照)

• horizontalBarChart (第13.5.3項「横棒グラフの作成方法」を参照)

• bubbleChart (第13.5.4項「バブル・チャートの作成方法」を参照)

• comboChart (第13.5.5項「コンポ・チャートの作成方法」を参照)

• lineChart (第13.5.6項「線グラフの作成方法」を参照)

• pieChart (第13.5.7項「円グラフの作成方法」を参照)

• scatterChart (第13.5.8項「散布図の作成方法」を参照)

• sparkChart (第13.5.9項「スパーク・チャートの作成方法」を参照)

• funnelChart (第13.5.10項「ファンネル・チャートの作成方法」を参照)

• ledGauge (第13.5.13項「LEDゲージの作成方法」を参照)

• statusMeterGauge (第13.5.14項「ステータス・メーター・ゲージの作成方法」を参照)

• dialGauge (第13.5.15項「ダイアル・ゲージの作成方法」を参照)

• ratingGauge (第13.5.16項「評価ゲージの作成方法」を参照)

• geographicMap (第13.5.18項「地理マップ・コンポーネントの作成方法」を参照)

• thematicMap (第13.5.19項「テーマ・マップ・コンポーネントの作成方法」を参照)

• treemap (第13.5.21項「ツリーマップ・コンポーネントの作成方法」を参照)

• sunburst (第13.5.22項「サンバースト・コンポーネントの作成方法」を参照)

• timeline (第13.5.23項「時系列コンポーネントの作成方法」を参照)

• nBox (第13.5.24項「NBoxコンポーネントの作成方法」を参照)

チャート、ゲージ、マップおよび拡張コンポーネント要素には、すべてまたはほとんどに共通の多数の属性があります。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

OEPEでは、データ視覚化コンポーネントは「パレット」の「MAF AMXデータ視覚化」の下にあります。すべてのデータ視覚化コンポーネントを表示するには、スクロール・バーを使用します。

図13-49 「パレット」のデータ視覚化コンポーネント

データ視覚化コンポーネントをドラッグ・アンド・ドロップすると、ダイアログが開き、作成するコンポーネントのタイプに関連付けられた情報に応じたコンテンツが表示されます。

• モバイル・チャートの作成

• モバイル・ゲージの作成

• 地理マップ

• サンバーストの作成またはツリーマップ

注意: コンポーネントの作成後、ソース・エディタまたは構造ビューでそのコンポーネントを選択し、「プロパティ」ウィンドウで「コンポーネント定義の編集」をクリックすることによって、作成ダイアログを再起動できます。 「プロパティ」ウィンドウで提供される同一の編集機能を使用すると、いくつかのデータ視覚化コンポーネントの子コンポーネント(データ・ポイント・レイヤーなど)を編集できます。

CompGalleryというMAFサンプル・アプリケーションは、MAF AMXアプリケーション機能での様々なデータ視覚化コンポーネントの使用方法を示しています。このサンプル・アプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。

MAF AMXデータ視覚化コンポーネントの詳細は、次を参照してください:

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

• 「データ・コントロール」ウィンドウから作成されるデータバインドされたデータ視覚化コンポーネントの詳細は、第13.5.26項「データバインドされたデータ視覚化コンポーネントの作成方法」を参照してください。

• データ視覚化コンポーネントにおけるアクセシビリティのサポートの詳細は、第13.8項「MAFのアクセシビリティのサポートの理解」を参照してください。

• MAF AMXデータ視覚化コンポーネントの使用上の制約の詳細は、第E.6.2項「データ視覚化コンポーネントの制限」を参照してください。

13.5.1 面グラフの作成方法

面グラフ(areaChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けれされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、面の色やパターンなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。カスタム系列スタイルの定義の詳細は、第13.5.6項「線グラフの作成方法」を参照してください。

面グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

面グラフの向き(垂直または水平)は、orientation属性と、値verticalおよびhorizontalによって制御されます。

次の例は、MAF AMXファイルに定義されたareaChart要素を示しています。デフォルト系列スタイルで基本的な面グラフを作成するには、それにコレクションを渡し、chartDataItem要素をネストしたdataStampファセットを指定します。

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

図13-50 デザインタイムの面グラフ

データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrowに次のプロパティが含まれている必要があります。

• series: このデータ・アイテムが属する系列の名前。

• group: このデータ・アイテムが属するグループの名前。

• value: データ・アイテムの値。

コレクションのrowには、個々のデータ・アイテムに適用可能なcolorやshapeなどの他のプロパティも含めることができます。

次の例に示すように、属性グループ(attributeGroups要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、データ・アイテムのcolorおよびshape属性が、追加のグループ化式に基づいて設定されます。attributeGroupsには、次の子要素があります。

• dvtmネームスペースのattributeExceptionRule: 特定のブール条件が満たされる場合に、属性値を別の値に置き換えます。

• dvtmネームスペースのattributeMatchRule: データが特定の値に一致する場合に、属性を置き換えます。

• amxネームスペースのattribute。

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

注意: この項の最初の方にある例と図13-48では、カスタム・スタイルが系列レベルで設定されていないため、系列はデフォルトの色傾斜に基づいた色で表示されます。

このコンポーネントに対して定義できるareaChart子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、面グラフ・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-areaChart
   - supported properties: all

グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

13.5.2 棒グラフの作成方法

棒グラフ(barChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを垂直の棒として視覚的に表すために使用します。系列は、個々のデータ・アイテムごとではなく系列レベルで適用する必要があるいくつかの一般的なスタイル・プロパティを持つグラフィカル要素を使用して視覚化されます。

棒グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

次の例は、MAF AMXファイルで定義されているbarChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。

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

図13-51 デザインタイムの棒グラフ

棒グラフのデータ・モデルは、個々の棒を記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。

• series: この棒が属する系列の名前。

• group: この棒が属するグループの名前。

• value: データ・アイテムの値(必須)。

データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。

このコンポーネントに対して定義できるbarChart子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、棒グラフ・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-barChart
   - supported properties: all

グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

13.5.3 横棒グラフの作成方法

横棒グラフ(horizontalBarChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを水平の棒として視覚的に表すために使用します。系列は、個々のデータ・アイテムごとではなく系列レベルで適用する必要があるいくつかの一般的なスタイル・プロパティを持つグラフィカル要素を使用して視覚化されます。

棒グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

次の例は、MAF AMXファイルで定義されているhorizontalBarChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。

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

図13-52 デザインタイムの横棒グラフ

横棒グラフのデータ・モデルは、個々の棒を記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。

• series: この棒が属する系列の名前。

• group: この棒が属するグループの名前。

• value: データ・アイテムの値(必須)。

データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。

このコンポーネントに対して定義できるhorizontalBarChart子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

向き属性によって、棒グラフを垂直または水平として定義できます。

このコンポーネントに対して定義できるbarChart子要素およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、横棒グラフ・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-horizontalBarChart
   - supported properties: all

グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

13.5.4 バブル・チャートの作成方法

バブル・チャート(bubbleChart)は、各データ・アイテムがx座標、y座標およびサイズ(バブル)を持つ一連のデータ・アイテムを表示します。さらに、各データ・アイテムには、colorやmarkerShapeなど様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、線グラフ(第13.5.6項「線グラフの作成方法」を参照)や面グラフ(第13.5.1項「面グラフの作成方法」を参照)と異なり、バブル・チャートには系列およびグループの厳密な概念がありません。

バブル・チャートは、X軸およびY軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

次の例は、MAF AMXファイルで定義されているbubbleChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。各データ・アイテムのcolorおよびmarkerShape属性は、データ・モデルで提供されている値に基づいて個別に設定されます。また、基礎となるデータ・コントロールでは、row.label、row.sizeおよびrow.shapeの変数参照がそれぞれサポートされている必要があります。

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

図13-53 デザインタイムのバブル・チャート

次の例では、データ・アイテムからなる関連する1つのグループに対して一般的なスタイル属性を設定するためにattributeGroups要素が使用されています。

<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 Mobile Application Frameworkタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、バブル・チャート・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-bubbleChart
   - supported properties: all

グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

13.5.5 コンポ・チャートの作成方法

コンボ・チャート(comboChart)は、線グラフと棒グラフなど、2つ以上の異なるグラフを重ねたものを表します。

次の例は、MAF AMXファイルで定義されているcomboChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。seriesStampファセットは、系列のデフォルト・スタイル・プロパティをオーバーライドし、seriesStyle要素を使用してカスタム系列スタイルを設定します。

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

図13-54 デザインタイムのコンポ・チャート

このコンポーネントに対して定義できるcomboChart子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

コンボ・チャートの向き(垂直または水平)は、orientation属性と、値verticalおよびhorizontalによって制御できます。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、コンボ・チャート・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-comboChart
   - supported properties: all

グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

13.5.6 線グラフの作成方法

線グラフ(lineChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、線の色、太さ、スタイルなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。

線グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

線グラフの向き(垂直または水平)は、orientation属性と、値verticalおよびhorizontalによって制御できます。

線グラフは、<dvtm:chartSeriesStyle>のtype属性のlineWithAreaオプションを使用すると、任意で作成できます。これにより、一杯になった面を線グラフの下に追加できます。一杯になった面の色は、areaColor属性を使用して指定できます。

線グラフには様々なタイプの線が使用できます。線のタイプを指定するには、<dvtm:chartSeriesStyle>のlineType属性を使用します。lineType属性の値は、次のとおりです。

• straight: 直線コネクタ。

• curved: 曲線コネクタ。

• stepped: ステップ・コネクタ。線と面にのみ適用されます。

• centeredStepped: 中心にあるステップ・コネクタ。線と面にのみ適用されます。

• segmented: 立ち上がりのないステップ・コネクタ。線にのみ適用されます。

• centeredSegmented: 立ち上がりのない中心にあるステップ・コネクタ。線グラフにのみ適用されます。

• auto (デフォルト): 線/面グラフ用の直線。散布図用にはありません。

このコンポーネントに対して定義できるlineChart子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

次の例は、MAF AMXファイルに定義されたlineChart要素を示しています。デフォルト系列スタイルで基本的な線グラフを作成するには、それにコレクションを渡し、chartDataItem要素をネストしたdataStampファセットを指定します。

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

図13-55 デザインタイムの線グラフ

データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrowに次のプロパティが含まれている必要があります。

• series: この線が属する系列の名前。

• group: この線が属するグループの名前。

• value: データ・アイテムの値。

コレクションのrowには、個々のデータ・アイテムに適用可能なcolorやshapeなどの他のプロパティも含めることができます。

次の例に示すように、属性グループ(attributeGroups要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、データ・アイテムのcolorおよびshape属性が、追加のグループ化式に基づいて設定されます。attributeGroupsには、次の子要素があります。

• dvtmネームスペースのattributeExceptionRule: 特定のブール条件が満たされる場合に、属性値を別の値に置き換えます。

• dvtmネームスペースのattributeMatchRule: データが特定の値に一致する場合に、属性を置き換えます。

• amxネームスペースのattribute。

同じページにあるコンポーネントが同じデータ・セットのデータを視覚化する場合、MAFでは、これらのコンポーネント間の属性グループ・バケット設定の共有がサポートされているため、属性値はコンポーネントに対して一貫して自動的に適用されます。

これをサポートするために、attributeGroupsタグには属性discriminantが含まれています。これはオプションの文字列値であり、attributeGroupsタグに同じ識別値を持つコンポーネントは、バケット割当てを共有できます。

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

注意: この項の2つの例では、カスタム・スタイルが系列レベルで設定されていないため、系列はデフォルトの色傾斜に基づいた色で表示されます。

系列のデフォルト・スタイル・プロパティをオーバーライドするには、次に示すように、オプションのseriesStampファセットを定義し、seriesStyle要素を使用してカスタム系列スタイルを設定します。

<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では、同じ系列名を持つ異なる属性値を検出した場合、前回処理された値を適用します。

かわりに、次の例に示すように、seriesStyle要素のrendered属性を使用して、MAF AMXチャートで系列スタイルを制御できます。

<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 Mobile Application Frameworkタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、線グラフ・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-lineChart
   - supported properties: all

グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

13.5.7 円グラフの作成方法

円グラフ(pieChart)は、各データ・アイテムを円セグメント(区分)で表したデータの比率によって区分を示すために使用します。区分はサイズ別に(最大から最小へと)ソートでき、小さい区分は他の単一の区分に集約できます。

次の例は、MAF AMXファイルで定義されているpieChart要素を示しています。dataStampファセットは、ネストされたpieDataItem要素とともに指定されます。

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

図13-56 デザインタイムの円グラフ

円グラフのデータ・モデルは、個々の円データ・アイテムを定義するアイテムのコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。

• label: 区分ラベル。

• value: 区分の値。

モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。

• borderColor: 区分の境界線の色。

• color: 区分の色。

• explode: 区分を開くときのオフセット。

このコンポーネントに対して定義できるpieChart子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、pieDataItemを子として含めることができます(第13.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
  

グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

13.5.8 散布図の作成方法

散布図(scatterChart)は、各アイテムがx座標、y座標およびサイズを持つデータ・アイテムを表す連続しないドットでデータを表示します。さらに、各データ・アイテムには、colorやmarkerShapeなど様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、線グラフ(第13.5.6項「線グラフの作成方法」を参照)や面グラフ(第13.5.1項「面グラフの作成方法」を参照)と異なり、散布図には系列およびグループの厳密な概念がありません。

散布図は、X軸およびY軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。

次の例は、MAF AMXファイルで定義されているscatterChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。各データ・アイテムのcolorおよびmarkerShape属性は、データ・モデルで提供されている値に基づいて個別に設定されます。

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

図13-57 デザインタイムの散布図

散布図のデータ・モデルは、個々のデータ・アイテムを記述するアイテム(行)のコレクションによって表されます。各データ・アイテムの属性は、スタンプ(dataStamp)によって定義され、通常、次のものがあります。

• x、y: 値の座標(必須)。

• markerSize: マーカーのサイズ(オプション)。

モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。

• borderColor: データ・アイテムの境界線の色。

• color: データ・アイテムの色。

• tooltip: カスタム・ツールチップ。

このコンポーネントに対して定義できるscatterChart子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、散布図コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-scatterChart
   - supported properties: all

グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

13.5.9 スパーク・チャートの作成方法

スパークチャート(sparkChart)は、傾向や変化を、多くの場合、表の列内で表す簡単な縮小チャートです。このチャートは、多くの場合、データ密度の濃い表示に追加のコンテキストを提供するためにダッシュボードで使用されます。

次の例は、MAF AMXファイルで定義されているsparkChart要素を示しています。dataStampファセットは、ネストされたsparkDataItem要素とともに指定されます。

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

図13-58 デザインタイムのスパーク・チャート

スパーク・チャートのデータ・モデルは、個々のスパーク・データ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。

• value: スパーク値。

sparkChartの属性およびdvtm子要素の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、sparkDataItemを子として含めることができます(第13.5.17.5項「スパーク・チャートのデータ・アイテムの定義」を参照)。

次のクラスで定義されているデフォルトCSS設定を上書きすることで、スパーク・チャート・コンポーネントのトップレベル要素をスタイル設定できます。

.dvtm-sparkChart
   - supported properties: all

グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

13.5.10 ファンネル・チャートの作成方法

ファンネル・チャート(funnelChart)コンポーネントは、プロセスの手順に関連するデータの視覚的な表現を提供します。ステップは、横向きの円柱に対する縦向きのスライスとして表されます。特定のステップ(スライス)の実際の値がそのスライスの割当てに近づいた分、スライスが塗りつぶされます。通常、ファンネル・チャートには、ある区切りの値(時間など)に対する実際の値と目標の値が必要です。

次の例は、MAF AMXファイルで定義されているfunnelChart要素を示しています。dataStampファセットは、ネストされたfunnelDataItem要素とともに指定されます。

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

図13-59 デザインタイムのファンネル・チャート

ファンネル・チャートのデータ・モデルは、個々のファンネル・データ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。

• value: ファンネル値

• label: ファンネル区分ラベル

funnelChartの属性およびdvtm子要素の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

amxネームスペースからfacet子要素を定義できます。facetには、funnelDataItemを子として含めることができます(第13.5.17.6項「ファンネル・データ・アイテムの定義」を参照)。

クラスdvtm-funnelChartおよびdvtm-funnelDataItemで定義されているデフォルトCSS設定を上書きすることで、ファンネル・チャート・コンポーネントをスタイル設定できます。

• トップレベル要素は次を使用してスタイル設定できます。

  .dvtm-funnelChart
     - supported properties: all
  

• ファンネル・チャートのデータ・アイテムは次を使用してスタイル設定できます。

  .dvtm-funnelDataItem
     - supported properties: border-color, background-color
  

グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。

CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

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

チャート・コンポーネントのトップレベル要素のスタイル設定に加え、一部のチャートの特定の子要素をスタイル設定できます。

13.5.12 チャート・コンポーネントでのイベントの使用方法

ViewportChangeEventを使用して、チャート・コンポーネントのズームおよびスクロールを処理できます。ズームまたはスクロールのいずれかが発生すると、コンポーネントは、新しいビューポートを定義する情報でロードされるイベントを起動します。

面グラフ、棒グラフ、横棒グラフ、コンボ・チャートおよび線グラフのコンポーネントの属性としてviewportChangeListenerを指定できます。

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

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

• Oracle Mobile Application Framework Java APIリファレンス

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

13.5.13 LEDゲージの作成方法

チャートと異なり、ゲージでは、単一のデータ・ポイントを重視し、そのポイントを最小、最大およびしきい値インジケータと比較して問題領域を識別します。LED(電光表示)ゲージ(ledGauge)は、重要業績評価指標(KPI)などの測定値をグラフィカルに表します。LEDゲージには、いくつかのスタイルがあります。矢印付きのものは、よい(上矢印)、普通(右または左矢印)および悪い(下矢印)を示すために使用されます。ゲージのしきい値はいくつでも指定できます。ただし、一部のLEDゲージ(矢印または三角形のインジケータを持つものなど)では、指し示す有効な方向の数が限られているため、サポートされるしきい値の数にかぎりがあります。矢印または三角形のインジケータの場合、しきい値の最大数は3です。

次の例は、MAF AMXファイルで定義されているledGauge要素を示しています。

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

図13-60 デザインタイムのLEDゲージ

LEDゲージのデータ・モデルは、value属性で指定される単一のメトリック値で表されます。

このコンポーネントに対して定義できるledGauge子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

次のamx子要素を定義できます。

• showPopupBehavior (第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• closePopupBehavior (第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• validationBehavior (第13.9項「入力の検証」を参照)

13.5.14 ステータス・メーター・ゲージの作成方法

ステータス・メーター・ゲージ(statusMeterGauge)は、長方形の水平バーまたは円に沿ってタスクの進捗状況または測定値のレベルを示します。コンポーネントのある部分は、別の部分にマークされた範囲に対する現在の測定値のレベルを示します。また、しきい値は、サイズ変更が可能なインジケータの背後に表示できます。

MAF AMXデータ視覚化のステータス・メーター・ゲージ・コンポーネントでは、参照線(referenceLine)のサポートが提供されます。この参照線を使用して、ブレット・グラフを生成できます。

次の例は、MAF AMXファイルで定義されているstatusMeterGauge要素を示しています。

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

図13-61 デザインタイムの長方形のステータス・メーター・ゲージ

円形で表される(図13-62を参照)ステータス・メーター・ゲージを作成するには、orientation属性をcircularに設定します。デフォルトでは、この属性はhorizontalに設定されいるため、横向きの長方形になります。

図13-62 デザインタイムの円形のステータス・メーター・ゲージ

また、orientation属性はverticalに設定できます。これにより、ステータス・メーター・ゲージが垂直に並びます。

ステータス・メーター・ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。

このコンポーネントに対して定義できるstatusMeterGauge子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

次のamx子要素を定義できます。

• showPopupBehavior (第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• closePopupBehavior (第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• validationBehavior (第13.9項「入力の検証」を参照)

13.5.15 ダイアル・ゲージの作成方法

ダイヤル・ゲージ(dialGauge)は、悪いからよいまで変化する値(しきい値)の範囲を指定します。ゲージのインジケータではメトリックの現在の値が示される一方、図形によってその値のステータスを評価できます。

次の例は、MAF AMXファイルで定義されているdialGauge要素を示しています。

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

図13-63 デザインタイムのダイヤル・ゲージ

ダイヤル・ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。

このコンポーネントに対して定義できるdialGauge子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

次の例は、暗い背景テーマと、-5000から5000の範囲を設定するカスタム・ティック・ラベルを備えたdialGauge要素の定義を示しています。

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

図13-64 メトリック・ラベルおよびティック・ラベルの付いたデザインタイムのダイアル・ゲージ

dialGaugeに対して次のamx子要素を定義できます。

• showPopupBehavior (第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• closePopupBehavior (第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• validationBehavior (第13.9項「入力の検証」を参照)

13.5.16 評価ゲージの作成方法

評価ゲージ(ratingGauge)を使用すると、事前定義された視覚スケールに評価を表示したり、その評価を変更できます。デフォルトの評価単位は、星で表されます。ratingGaugeのshape属性を設定することによって、この単位を円、長方形、星またはひし形として構成できます。

次の例は、MAF AMXファイルで定義されているratingGauge要素を示しています。

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

図13-65 デザインタイムの評価ゲージ

評価ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。

このコンポーネントに対して定義できるratingGauge子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

ratingGaugeに対して次のamx子要素を定義できます。

• showPopupBehavior (第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• closePopupBehavior (第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)

• validationBehavior (第13.9項「入力の検証」を参照)

13.5.16.1 評価ゲージ・コンポーネントへのカスタム・スタイルの適用

ユーザーが評価ゲージ・コンポーネントに対して実行したアクションに応じて、評価単位(イメージ)は次のいずれかの状態を取得できます。

• selected: 単位を選択した場合。

• unselected: 単位を選択しなかった場合。

• hover: 単位にマウスを置いた場合。

  
  

  注意: タッチ・インタフェースを使用するモバイル・デバイスでは、hover状態はタップしたまま押さえるジェスチャーを通じて呼び出されます。

  
  

• changed: 単位を変更した場合。

各状態は、colorおよびborderColorという2つの属性によって表されます。デフォルトでは、ratingGaugeのshape属性によって、hoverおよびchanged状態の選択内容が決まります。unselected状態は、ratingGaugeのunselectedShape属性を使用して個別に設定できます。

デフォルトCSS設定を上書きすることで、評価ゲージ・コンポーネントをスタイル設定できます。CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

次の例は、評価ゲージ単位の各状態のcolorおよびborderColorに対するデフォルト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;
}

13.5.17 チャートおよびゲージ・コンポーネントの子要素の定義方法

チャートおよびゲージには様々な子要素を定義できます。それらの子要素のいくつかを次に示します。

• chartDataItem (第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)

• xAxis、yAxisおよびy2Axis (第13.5.17.3項「X軸、Y軸およびY2軸の定義」を参照)

• legend (第13.5.17.2項「凡例の定義」を参照)

• pieDataItem (第13.5.17.4項「円グラフのデータ・アイテムの定義」を参照)

• sparkDataItem (第13.5.17.5項「スパーク・チャートのデータ・アイテムの定義」を参照)

• threshold (第13.5.17.7項「しきい値の定義」を参照)

• funnelDataItem

これらのおよびその他の子要素の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

OEPEでは、データ視覚化コンポーネントの子コンポーネントは、それぞれの視覚化タイプの下にあります(図13-66を参照)。

図13-66 チャートおよびゲージの子コンポーネントの作成

13.5.17.1 チャートのデータ・アイテムの定義

チャート・データ・アイテム(chartDataItem)要素は、円グラフを除くすべてのサポートされているチャートでチャート・データ・アイテムが使用するパラメータを指定します。

チャート・データ・アイテムでのテキスト表示を有効化でき、chartDataItem要素の関連する属性を設定することで、そのラベル、ラベル位置およびラベル・スタイルを制御でき、さらに、チャート自体のdataLabelPosition属性を設定することで指定されたチャートのすべてのデータ・ラベルの位置を指定できます。

注意: 散布図、円グラフおよびファンネル・チャートのコンポーネントでは、dataLabelPosition属性はサポートされていません。

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

13.5.17.2 凡例の定義

凡例(legend)要素は、凡例パラメータを指定します。凡例要素は、seriesStyle要素のactionプロパティを介してクリック相互作用をサポートしています。

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

13.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 Mobile Application Frameworkタグ・リファレンスを参照してください。

13.5.17.4 円グラフのデータ・アイテムの定義

円グラフのデータ・アイテム(pieDataItem)要素は、円グラフの区分のパラメータを指定します(第13.5.7項「円グラフの作成方法」を参照)。

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

13.5.17.5 スパーク・チャートのデータ・アイテムの定義

スパーク・チャートのデータ・アイテム(sparkDataItem)要素は、スパーク・チャート・アイテムのパラメータを指定します(第13.5.9項「スパーク・チャートの作成方法」を参照)。

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

13.5.17.6 ファンネルのデータ・アイテムの定義

ファンネルのデータ・アイテム(funnelDataItem)要素は、ファンネル・チャート・アイテムのパラメータを指定します(第13.5.10項「ファンネル・チャートの作成方法」を参照)。

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

13.5.17.7 しきい値の定義

しきい値(threshold)要素は、ゲージのしきい値範囲を指定します(第13.5.13項「LEDゲージの作成方法」および第13.5.14項「ステータス・メーター・ゲージの作成方法」を参照)。

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

13.5.18 地理マップ・コンポーネントの作成方法

地理マップ(geographicMap)は、1つのマップに重ね合せた1つ以上のインタラクティブな情報レイヤーでビジネス・データを表します。このコンポーネントを構成して、GoogleマップまたはOracleマップのいずれかをマップ・プロバイダとして 使用できます(第13.5.18.1項「地理プロバイダ情報を指定した地理マップ・コンポーネントの構成」を参照)。

次の例は、MAF AMXファイルで定義されているgeographicMap要素を示しています。

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

図13-67 デザインタイムの地理マップ

geographicMapに対してpointDataLayer子要素を定義できます。pointDataLayerによって、マップ上の点と関連付けられたデータを表示できます。pointDataLayerは子要素としてpointLocationを持つことができます。pointLocationは、データ・ポイントの位置を決定するデータ・レイヤーのモデル内の列を指定します。これらの位置は、住所またはX座標とY座標で表すことができます。

pointLocationは、子要素としてmarkerを持つことができます。markerは、マップ上のデータ・ポイントに関連付けられた組込み形状またはカスタム形状をスタンプ・アウトするために使用します。markerでは、マーカーとしてレンダリングされるイメージのURIを指定するための一連のプロパティがサポートされています。マーカーは子要素としてconvertNumberを持つことができます(第13.3.25項「数値の変換方法」を参照)。また、ポップアップ(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)がgeographicMapのマーカーの上に表示されるようにできます。そのためには、showPopupBehavior要素をmarker要素の子として宣言し、showPopupBehaviorのalignId属性をmarkerのid属性の値に設定します。

注意: 地理マップ・アドレス・ポイントに対してアドレス解決を提供するジオコーダ・サービスの制限のために、dvtm:geographicMapは、マップ・プロバイダのビジネス・ライセンスを持たないユーザーに対して、10を超えるデータ・ポイントを表示できません。

geographicMap要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

地理マップ・コンポーネントでは、タッチ・ジェスチャーを使用してピン(マップ上のポイントの作成)を挿入できます。この機能は、mapInputListenerを使用して構成できます。詳細は、第13.5.20項「Mapコンポーネントでのイベントの使用方法」を参照してください。

13.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から該当するライセンスを取得する必要があります。

次の例は、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>

次の例は、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マップを使用しますがライセンス・キーはありません。

13.5.19 テーマ・マップ・コンポーネントの作成方法

テーマ・マップ(thematicMap)では、ビジネス・データをスタイル設定された領域内のパターンまたは関連付けられたマーカーとして表します。テーマ・マップでは、地理的な詳細なしで、データに焦点を合せます。

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

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

図13-68 デザインタイムのテーマ・マップ

markerZoomBehavior属性を使用すると、マップがズームされるとテーマ・マップのマーカーのスケール変更が有効化されます。rotation属性を設定することで、マーカーの回転を有効化でき、この属性の値は、イメージの中心に対してマーカーが回転する(時計回りの度数)角度を表します。

MAF AMXテーマ・マップは、次の拡張機能をサポートしています。

• カスタム・マーカー(第13.5.19.1項「カスタム・マーカーの定義」を参照)

• 領域の分離(第13.5.19.3項「分離領域の定義」を参照)

• 初期ズーム(第13.5.19.4項「初期ズームの有効化」を参照)

• カスタム・ベース・マップ(第13.5.19.5項「カスタム・ベース・マップの定義」を参照)

thematicMap要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

13.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などモバイル・デバイスのブラウザでサポートされている任意のフォーマットで構いません。

13.5.19.2 分離領域レイヤーの定義

データの地理的場所の伝達にリージョン・アウトラインが常に必要であるわけではありません。かわりに、テーマ・マップ・コンポーネントには、領域内でイメージやマーカーをセンタリングするためのオプションがあるため、リージョン・アウトラインが描画されない見えない領域レイヤーを定義するオプションがあります。

見えない領域レイヤーを定義するには、CSS値のbackground-colorおよびborder-colorを受け入れるareaLayerのareaStyle属性を使用します。

<dvtm:areaLayer id="areaLayer1"
                ...
                areaStyle="background-color:transparent;border-color:transparent">

この属性によって、dvtm-areaスキニング・キーを使用することなく、デフォルトの領域レイヤーの色および枠線の形状をオーバーライドできます。

13.5.19.3 分離領域の定義

MAF AMXテーマ・マップ・コンポーネントを構成し、areaDataLayerのisolatedRowKey属性を使用してマップの単一の分離領域に収まるようにレンダリングおよびズームできますが、この場合、その領域または領域データ・レイヤーの残りの領域はレンダリングされません。

注意: 分離できるのは、1つのマップで1つの領域のみです。

13.5.19.4 初期ズームの有効化

初期ズームでは、マップ・コンポーネントを通常どおりレンダリングし、その後、マーカーと領域の両方を含むデータ・オブジェクトにズームして合せることができます。この機能を有効にするには、テーマ・マップのinitialZooming属性を使用します。

13.5.19.5 カスタム・ベース・マップの定義

カスタム・ベース・マップ・サポートの一環として、MAF AMXでは、テーマ・マップ・コンポーネントに対して次のことを指定できます。

• 様々な解像度のイメージを持つレイヤー。

• 点の位置(pointLocation)から参照できる名前付きの点を持つ点レイヤー。

• カスタム・ベース・マップ・メタデータXMLファイルを指すテーマ・マップのsource属性。

注意: MAF AMXでは、カスタム・ベース・マップは次のことはサポートされていません。 定型化された領域: 領域レイヤーはカスタム・ベース・マップに定義できないため、ポイント・レイヤーを使用します。 リソース・バンドル: ロケール固有のツールチップを追加する場合は、マーカー(marker)のshortDesc属性にあるELを使用できます。

カスタム・ベース・マップを作成するには、メタデータ・ファイルの定義を指す領域レイヤーを指定します(次の例を参照)。基本的なカスタム・ベース・マップを定義するには、背景レイヤーおよびポインタ・データ・レイヤーを指定します。MAF AMXゲージ・コンポーネントと同様に、メタデータ・ファイルで、画面解像度および表示方向ごとに異なるイメージを指定できます。ゲージタイプ・コンポーネントと同様に、テーマ・マップでは、画面解像度および方向に基づいてレイヤーに適切なイメージが選択されます。表示方向は左から右です。

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

次の例は、点によってカスタム領域レイヤーを宣言するMAF AMXファイルを示しています。このMAF AMXファイルは、使用可能なイメージのリストを含む前述の例のメタデータ・ファイルを指しています。

<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座標で定義され、データが更新されたときに変更される可能性がある動的な点に対応します。

次の例は、点によってカスタム領域レイヤーを宣言するもう1つの方法を示しています。この例では、pointDataLayerは、thematicMapの直接の子です。方法は異なりますが、前述の例では、次に示す宣言と同じ結果がレンダリングされます。

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

静的な点を含むカスタム・ベース・マップを作成するには、次の例に示すメタデータ・ファイルに名前で点を指定します。このプロセスは、事前定義済ベース・マップに市区町村のマーカーを追加する場合に類似しています。

<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要素のイメージのサイズにマップされるものと想定されます。

注意: 点は、ベース・マップ内でグローバルであり、すべてのレイヤーに適用されるため、点は特定のレイヤーおよびそのイメージには定義できません。

次の例は、名前付きの点によってカスタム領域レイヤーを宣言するMAF AMXファイルを示しています。このMAF AMXファイルは、この項の最初の方にある例に示されている、点とそれらの名前のリストを含むメタデータ・ファイルを参照しています。

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

13.5.19.6 イベント・リスナー用のマーカー・サポートに関する必知事項

MAF AMXデータ視覚化では、markerのactionListener属性はサポートされていません。かわりに、action属性を使用することで、同じ機能を実現できます。

13.5.19.7 テーマ・マップ・コンポーネントへのカスタム・スタイルの適用

デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、テーマ・マップ・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

次の例は、テーマ・マップ・コンポーネントのデフォルト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ファイルを使用して定義する必要があります。次の例は、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オブジェクトの名前およびプロパティ名は変更できません。かわりに、特定のプロパティ値を、アプリケーションのニーズに合わせて変更できます。

attributeGroups属性がテーマ・マップ・コンポーネント用に定義されている場合、CustomThematicMapStyleを使用して、そのコンポーネントの図形と色のデフォルト・セットを定義できます。この場合、CustomThematicMapStyleオブジェクトの構造は、次の例のようになっている必要があります。styleDefaultsは、次のフィールドを含むネストされたオブジェクトです。

• colors: 領域とマーカーに使用される色のセットを表します。

• shapes: マーカーに使用される図形のセットを表します。

window['CustomThematicMapStyle'] =
{
   // custom style values 
   'styleDefaults': { 
      // custom color palette
      'colors': ["#000000", "#ffffff"],
      // custom marker shapes 
      'shapes' : ['circle', 'square'] 
   }
};

13.5.20 Mapコンポーネントでのイベントの使用方法

MapBoundsChangeEventを使用して、地図マップ・コンポーネントでの次のマップ・ビューのプロパティ変更を処理できます。

• ズーム・レベルに対する変更。

• マップ境界に対する変更。

• マップの中心に対する変更。

これらの変更が発生すると、コンポーネントは、新しいマップ・ビューのプロパティ値でロードされるイベントを起動します。

mapBoundsChangeListenerを地理マップの属性として定義できます。

MapInputEventを使用して、地理マップ・コンポーネントおよびテーマ・マップ・コンポーネントで、タップやマウス・クリックなどのエンド・ユーザー・アクションを処理できます。これらのアクションが発生すると、コンポーネントは、マップの緯度および経度、およびアクションのタイプ(マウス・ダウン、マウス・アップ、クリックなど)に関する情報でロードされるイベントを起動します。

mapInputListenerを地理マップ・コンポーネントの属性として定義できます。

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

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

• Oracle Mobile Application Framework Java APIリファレンス

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

13.5.21 ツリーマップ・コンポーネントの作成方法

ツリーマップ(treemap)は、2つのディメンションに渡って(そのノードのサイズおよび色で)階層データを表示します(treemapNode)。

「パレット」では、「MAF AMXデータ視覚化」→「ツリーマップ」にツリーマップはあります(図13-69を参照)。

図13-69 「パレット」でのツリーマップの場所

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

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

図13-70 デザインタイムのツリーマップ

attributeGroups要素のattributeType属性をcontinuousに設定することで、グラデーション色を使用してツリーマップ・アイテムに関連付けられている値の視覚化を有効にでき、この色の強度は指定された範囲内の相対値を表します。

treemap要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

13.5.21.1 ツリーマップ・コンポーネントへのカスタム・スタイルの適用

デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、ツリーマップ・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

次の例は、オーバーライド可能なツリーマップ・コンポーネントのデフォルトCSSスタイルを示しています。

.dvtm-treemap {
   border-style: solid;
   border-color: #E2E8EE;
   border-radius: 3px;
   background-color: #EDF2F7;
   ...
}

次の例は、オーバーライド可能なツリーマップ・ノードのデフォルトCSSスタイルを示しています。

.dvtm-treemapNodeSelected {
   // Selected node outer border color
   border-top-color: #E2E8EE;
   // Selected node inner border color
   border-bottom-color: #EDF2F7;
}

次の例は、カスタムCSSを使用してスタイルを設定できる、ツリーマップ・ノードのlabelテキストCSSプロパティを示しています。

.dvtm-treemapNodeLabel {
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   font-style: normal;
   font-weight: normal;
   color: #7097CF;
   ...
}

スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。次の例は、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"
      },
   }

13.5.22 サンバースト・コンポーネントの作成方法

サンバースト(sunburst)は、2つのディメンションに渡って(そのノードのサイズおよび色で)階層データを表示します(sunburstNode)。

「パレット」で、「サンバースト」は「MAF AMXデータ視覚化」の下にあります(子ノードもあります)。

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

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

図13-71 デザインタイムのサンバースト

attributeGroups要素のattributeType属性をcontinuousに設定することで、グラデーション色を使用してサンバースト・アイテムに関連付けられている値の視覚化を有効にでき、この色の強度は指定された範囲内の相対値を表します。

sunburst要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

13.5.22.1 サンバースト・コンポーネントへのカスタム・スタイルの適用

デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、サンバースト・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。

次の例は、オーバーライド可能なサンバースト・コンポーネントのデフォルトCSSスタイルを示しています。

.dvtm-sunburst {
   border-style: solid;
   border-color: #E2E8EE;
   border-radius: 3px;
   background-color: #EDF2F7;
   ...
}

次の例は、オーバーライド可能なサンバースト・ノードのデフォルトCSSスタイルを示しています。

.dvtm-sunburstNode {
   // Node border color
   border-color: "#000000";
}

.dvtm-sunburstNodeSelected {
   // Selected node border color
   border-color: "#000000";
}

次の例は、カスタムCSSを使用してスタイルを設定できる、サンバースト・ノードのlabelテキストCSSプロパティを示しています。

.dvtm-sunburstNodeLabel {
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   font-style: normal;
   font-style: normal;
   color: #7097CF;
   ...
}

スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。次の例は、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"
   }
}

13.5.23 時系列コンポーネントの作成方法

時系列(timeline)は、イベントを時系列で表示できるインタラクティブ・コンポーネントであり、定義されていてまだ調整可能な時間範囲(ズームに使用可能)内を前後に移動できます。

イベントは、時系列アイテム・コンポーネント(timelineItem)によって表され、これにはタイトル、説明および継続時間の塗りつぶし色が含まれます。2つの時系列を構成して2系列のイベントを表示し、関連する情報を並べて比較することができます。

注意: MAF AMXでは、時系列と同様のコンポーネントで使用できることが多い次の機能、子要素およびプロパティはサポートしていません。 ネストしたUIコンポーネント アニメーション 属性および時間範囲の変更検出 フェッチ時間 カスタム・タイム・スケール 時間の現行性 部分トリガー データのソート 書式設定された時間範囲 タイムゾーン 可視性

「パレット」で、「時系列」は「MAF AMXデータ視覚化」の下にあり、その子コンポーネントである「時系列アイテム」および「時系列の系列」もここにあります。

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

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

図13-72 デザインタイムの時系列

時系列アイテムのdurationFillColor属性を使用して、継続時間バーの塗りつぶし色を制御できます。

時系列で2つの時間スケールを同時に表示するには、2番目の軸のスケールを決定する時間軸のscale属性を使用します。

時系列は水平および垂直にスクロールできます。コンポーネントがスクロール可能な(表示可能な表示領域の外側にデータが含まれている)場合、スクロールの方向を指す矢印によって示されます。

timeline要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

13.5.23.1 時系列コンポーネントへのカスタム・スタイルの適用

デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、時系列コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第13.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

次の例は、時系列コンポーネントのデフォルトのスタイル設定のオーバーライドに使用できるカスタムの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]
   }
}

13.5.24 NBoxコンポーネントの作成方法

NBox (nBox)コンポーネントは、2つのディメンションに渡ってデータを表し、各ディメンションは多数の範囲に分かれ、その交点は各データが配置される個別のセルを形成します。

「パレット」で、「NBox」は「MAF AMXデータ視覚化」の下にあります。

次の例は、MAF AMXファイルで定義されている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>

図13-73 デザインタイムのNBox

nBox要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

13.5.25 マップ・コンポーネント、サンバースト、ツリーマップ、時系列およびNBoxの子要素の定義方法

マップ・コンポーネント、サンバースト、ツリーマップ、時系列およびNBoxの様々な子要素を定義できます。使用可能な子要素およびその属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。

OEPEでは、マップ、サンバースト、ツリーマップ、時系列およびNBoxの子コンポーネントは「パレット」の「MAF AMXデータ視覚化」の下にあります(図13-74を参照)。この図では、「パレット」→「レイアウト」から「詳細」オプションが選択されています。ここでは、「MAF AMXデータ視覚化」リストの各アイコンの隣にツールチップ・コンテンツが表示されています。

図13-74 マップ、サンバースト、ツリーマップ、時系列およびNBoxの子コンポーネントの作成

13.5.26 データバインドされたデータ視覚化コンポーネントの作成方法

「データ・コントロール」ウィンドウ(第12.3.2.3項「データ・コントロールのビューへの追加」を参照)から挿入されるデータ・コレクションを使用して、データバインドされたデータ視覚化コンポーネントを宣言的に作成できます。パレット選択(図13-85を参照)では、見出し「MAF AMXデータ視覚化」の下にある数多くのデータ視覚化コンポーネント・カテゴリ、タイプおよびレイアウト・オプションから選択できます。

図13-75 チャート・コンポーネントを作成するためのパレット選択

注意: いくつかのデータ視覚化コンポーネント・タイプには、特別な種類のデータが必要です。選択したコンポーネントのタイプの表示に十分なデータが含まれていないデータ・コレクションにコンポーネントをバインドすると、コンポーネントは表示されず、データが不十分であることを示すメッセージが表示されます。

「コンポーネント・ギャラリ」の表示をトリガーするには、「データ・コントロール」ウィンドウからMAF AMXページにコレクションをドラッグ・アンド・ドロップし、表示されるコンテキスト・メニューから「MAFチャート」、「MAFゲージ」または「MAFテーマ・マップ」のいずれかを選択します。(図13-76を参照)。

図13-76 データバインドされたデータ視覚化コンポーネントの作成

データバインドされている新しいコンポーネント用にカテゴリ、タイプおよびレイアウトをコンポーネント・ギャラリから選択し、「OK」をクリックすると、データ視覚化コンポーネントのデータ収集属性の設定値を起動できます。ギャラリ、ダイアログおよび入力フィールドのラベルの名前は、選択したデータ視覚化コンポーネントのカテゴリおよびタイプに応じて異なります。たとえば、タイプchartDataのデータ・コントロールをアプリケーションにドラッグし、タイプとして「チャート」→「横棒」を選択すると、表示されるダイアログの名前は「横棒グラフのバインド」になり、バインドされたデータ要素(age、totalContribution、totalSavingsおよびshortDesc)を選択できるようになり、棒またはY軸に適用できます(図13-77を参照)。

図13-77 データバインドされたチャートのデータ値の指定

データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さなどのマーカーまたは散布図のポイントで示される数字です。データ値のカテゴリは、軸ラベルとして表されるメンバーです。バインディング内で属性が担うロール(データ値またはID)は、データ型(グラフには数値データ値が必要)およびマップされる場所(棒やX軸など)の両方によって決まります。

コンポーネント・ギャラリを使用してデータバインドされているテーマ・マップ・コンポーネントを作成する場合、表示されるダイアログの名前は「'thematicMap'のバインド」になり、コンポーネント・ギャラリでは、エリア・レイヤーとして詳細な選択項目を持ったベース・マップを選択できます。たとえば、ベース・マップとして「すべてのユーザー」を選択し、エリア・レイヤーとして「世界(大陸)」を選択すると、ダイアログ(図13-78を参照)が開きます。

図13-78 「'thematicMap'のバインド」ダイアログ

1つ以上のデータ・バインディング・ダイアログの完了後に、「プロパティ」ウィンドウを使用して、コンポーネントの属性の設定を指定できます。コンポーネントと関連付けられた子要素を使用して、さらにカスタマイズすることもできます(第13.5.17項「チャートおよびゲージ・コンポーネントの子要素の定義方法」を参照)。

MAF AMXページにコレクションをドロップする際にコンテキスト・メニューから「MAF地理マップ」、「MAFサンバースト」、「MAF NBox」、「MAFタイムライン」または「MAFツリーマップ」を選択すると、次のいずれかのダイアログが表示されます。

図13-79 地理マップの作成

図13-80 サンバーストの作成

図13-81 データバインドされた時系列の作成

図13-82 データバインドされたツリーマップの作成

図13-83 データバインドされたNBoxの作成

「NBoxの作成」ダイアログへの入力は、行および列の数を定義することから始めます。その後、ボックス上のセルを選択して、ダイアログの下部で行または列全体の値を指定できます(図13-84を参照)。

図13-84 データバインドされたNBoxの行および列の値の設定

NBoxコンポーネントは、「次へ」をクリックして一連のダイアログのすべてのページを入力すると作成されます。

各ダイアログのフィールドごとの値の詳細は、「ヘルプ」をクリックするか[F1]を押して、オンライン・ヘルプを参照してください。

13.5.26.1 データバインドされたチャート・コンポーネントの一連のスタイル設定に関する必知事項

「データ・コントロール」ウィンドウからデータバインドされたチャート・コンポーネントを作成する場合、seriesStyle要素を追加することでチャートの一連のデータに対するスタイル設定情報を宣言的に指定した後に、「プロパティ」ウィンドウを使用してseriesStyle要素のseries属性用のエディタを開くことができます。また、seriesStyle要素のactionプロパティを使用すると、チャート・コンポーネントをクリック可能にできます。このエディタには、dataStampファセット内のchartDataItem要素の値に基づいたseries属性の値がすでに移入されています。

13.5.27 チャート・コンポーネントのインタラクティブ性を有効にする方法

チャートの次の子コンポーネント用イベントドリブン・トリガーを定義すると、いくつかのチャート・コンポーネントのタップを介してエンド・ユーザーによるインタラクティブ性を有効にできます。

プロパティ設定リスナーやポップアップ表示動作(完全なリストは表13-16「サポートされているイベント・リスナーおよびイベント・タイプ」を参照)など、サポートされている操作に加え、起動されるアクションのタイプを定義するようにアクション属性を設定できます。

<amx:panelPage id="pp1" styleClass="dvtm-gallery-panelPage">
...
   <dvtm:lineChart id="lineChart1"
                   var="row" 
                   value="#{bindings.lineData1.collectionModel}"
                   ... > 
      <amx:facet name="dataStamp">
         <dvtm:chartDataItem group="#{row.group}"
                             value="#{row.value}" 
                             series=" #{row.series}"
                             label="#{pageFlowScope.labelDisplay ? 
                                      row.value : ''}" >
            <amx:showPopupBehavior popupId="pAdvancedOptions" 
                                   type="action" 
                                   align="overlapTopCenter" 
                                   alignId="pflOptionsForm" 
                                   decoration="anchor"/> 
         </dvtm:chartDataItem>
      </amx:facet>
   ...
   </dvtm:lineChart>
   ...
</amx:panelPage>
<amx:popup id="pAdvancedOptions" styleClass="dvtm-gallery-options-dialog">

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

13.5.28 極チャートを作成する方法

次のチャート・コンポーネントについて、そのcoordinateSystem属性をpolarに設定すると、極ビューを有効にできます。

• 面グラフ

• 棒グラフ

• バブル・チャート

• コンボ・チャート

• 線グラフ

• 散布図

極設定が前述のいずれのチャート・タイプにも適用される場合(棒を除き)、polarGridShape属性を使用して極グリッドを循環またはポリゴンとして定義できます。

極チャートの放射軸は、そのY軸子コンポーネントを使用してカスタマイズできます。

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

13.6 UIコンポーネントのスタイル設定

MAFでは、UIコンポーネントにスタイルを適用するためにCSSを使用できます。

13.6.1 コンポーネント属性を使用したスタイルの定義方法

次の属性を設定することで、UIコンポーネントをスタイル設定できます。

• styleClass属性は、レイアウト・コンポーネントに対して使用するCSSスタイル・クラスを定義します。

  <amx:panelPage styleClass="#{pageFlowScope.pStyleClass}">
  

  MAF AMXページまたはスキニングCSSファイルでレイアウト、コマンドおよび入力の各コンポーネントのスタイル・クラスを定義できますが、その場合、特定のスタイルがMAF AMXアプリケーション機能内のすべてのコンポーネントに適用されます(第13.6.3項「スキニングに関する必知事項」を参照)。かわりに、MAFによって提供されるパブリック・スタイル・クラスを使用できます。

  
  

  注意: OEPEからCSSファイルにはアクセスできません。かわりに、MAFによって、ビルドまたはデプロイ時にこのファイルがパッケージに注入され、ViewContentルート・ディレクトリの下のcssディレクトリにCSSファイルが表示されます。

  
  

• inlineStyle属性は、任意のUIコンポーネントに使用するCSSスタイルを定義し、コンポーネントのルートDOM要素に適用される一連のCSSスタイルを表します。

  <amx:outputText inlineStyle="color:red;">
  

  この属性は、基本スタイルの変更が必要な場合に使用してください。

  
  

  注意: いくつかのUIコンポーネントは、HTML div要素やさらに複雑なマークアップなどのサブ要素でレンダリングされます。その結果、親コンポーネントにinlineStyle属性を設定しても、目的の効果が得られないことがあります。そのような場合、生成されたマークアップを調べ、inlineStyle属性を定義するかわりに、サブ要素にスタイルを伝播するCSSクラスを適用します。 JavaScriptのデバッグ方法の詳細は、第31.3.5項「JavaコードおよびJavaScriptのデバッグを有効にする方法」を参照してください。

  
  

これらの属性は、「プロパティ」ウィンドウの「プロパティ」セクションに表示されます(図13-85を参照)。Value列を使用して、スタイル・シートを定義するために各プロパティ値を指定します。

図13-85 「プロパティ」ウィンドウの「スタイル」セクション

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

13.6.2 組込みおよびインライン・スタイル・クラスの使用方法

OEPEには、各コンポーネントの組込みスタイル・クラスを使用するためのツールが含まれています。これは、HTMLファイルまたはHTML表現(amx:tableLayoutや同様の視覚化要素)を含むXMLファイルにあるタグをクリックしたときに「プロパティ」ウィンドウから使用できます。

OEPEには、スタイル・クラスを変更するために2つのオプションが用意されています。

• 要素のインライン・スタイル・クラスを編集すると、クラスの特性(フォント、サイズ、ウェイトなど)を指定できます。

• アプリケーション用のCSSファイル内ですでに定義されている使用可能な組込みスタイル・クラスから選択できます。

要素のインライン・スタイル・クラスを編集するには、次の手順を実行します。

1. ソース・エディタで、表示されるツールチップを使用してamx:tableLayoutなどの視覚化表示要素(図13-86を参照)を定義するファイルにあるタグをクリックします。この例では、OEPEによって「プロパティ」ペインに「表のレイアウト」ページが表示されています。

   図13-86 「表のレイアウト」表示設定の編集

   
   

2. 「表のレイアウト」ページで、図13-87に示すように「スタイル」タブを選択します。

   図13-87 「表のレイアウト」のスタイルの設定

   
   

3. 「インライン・スタイル」入力ボックスの隣にあるアイコンをダブルクリックします。これによって、図13-88に示す「CSSスタイルの定義」ダイアログが開きます。

   図13-88 「CSSスタイルの定義」ダイアログ

   
   

4. ダイアログの左には、編集可能なスタイル・プロパティのリストがあります。別のスタイル・プロパティを選択するとメイン表示が変わり、この表示には選択したスタイル・プロパティの特性が反映されています。たとえば、「テキスト」パネルでは、表のテキストのフォント、サイズ、スタイルおよびその他の特性を指定でき、「境界」スタイル・プロパティを選択すると上、左、右および下の境界の幅を個別に設定でき、さらに太さ、色やその他の特性も選択できます。

5. スタイルの特性を指定し終わったら、「OK」をクリックします。OEPEによって、AMXファイルに表の特性が追加されます。

組込みスタイル・クラスを選択するには、次の手順を実行します。

1. ソース・エディタで、表示されるツールチップを使用してcommandButtonなどの視覚化表示要素(図13-89を参照)を定義するファイルにあるタグをクリックします。

   図13-89 組込みスタイル・クラスの選択

   
   

2. 「スタイル・クラス」フィールドの右側にあるアイコンをクリックして「スタイル・クラス」ダイアログを表示し、エントリを展開します(図13-90を参照)。アプリケーションの/cssディレクトリに追加のCSSファイルがあるときは、選択できます(この例では単一エントリのみが表示されています)。

   図13-90 「スタイル・クラス」ダイアログ

   
   

3. 各スタイル・クラスにマウスを置くと、詳細情報がわかります。選択したら、「OK」をクリックします。

AMXタグを選択すると、その特定のタグに適した特性のリストが「プロパティ」ペインに表示されます。たとえば、amf:outputTextタグをクリックすると、「プロパティ」ペインに「出力テキスト」ダイアログが表示されます(図13-91を参照)。

図13-91 「すべて」タブが選択されている「出力テキスト」設定

図13-91に示すとおり、「すべて」タブを選択すると、編集可能なすべてのプロパティが1つのダイアログが表示されます。ここで示すとおり、「inlineStyle」値を選択して、イメージの右側にある強調表示された省略記号のアイコンをクリックすると、OEPEによってCSSスタイルの定義ダイアログ(図13-88を参照)が表示され、ここで、amf:outputTextのテキスト、背景、ブロック、ボックス、境界線、リスト、位置および拡張プロパティの適切な特性を指定できます。

13.6.3 スキニングに関する必知事項

スキニングによって、MAF AMXアプリケーション機能内のすべてのUIコンポーネントに均一なスタイルを定義および適用し、機能全体に対するテーマを作成できます。

MAFのデフォルトのスキン・ファミリはmobileAltaで、デフォルト・バージョンはそのスキンの最新バージョンです。詳細は、第8章「MAFアプリケーションのスキニング」を参照してください。

デフォルト・バージョンのmobileAlta (v1.2)は、inlineStyleを使用せずに、goLink、commandLinkおよびimageコンポーネントを垂直に揃えることができます。カスタム・スタイル・コンポーネントを使用してこれらの要素を中央に揃えた場合、mobileAlta v1.2では、アプリケーションのプライマリ、ヘッダー、セカンダリおよびフッター・ファセットのために、これらのコンポーネントの中央揃えを処理します。

13.6.4 データ視覚化コンポーネントのスタイル設定方法

MAF AMXデータ視覚化コンポーネントのスタイル・プロパティの大部分は、cssディレクトリにあるdvtm.cssファイルで定義されます。デフォルト値をオーバーライドするには、アプリケーション機能レベルでカスタム・スタイル定義を含むカスタムCSSファイルを追加します。

スタイル・プロパティのいくつかは、CSSにマップできないため、カスタムJavaScriptファイルで定義する必要があります。それらのプロパティは、次のとおりです。

• ダイヤル・ゲージ・コンポーネントの背景および針のイメージ(第13.5.15章「ダイアル・ゲージの作成方法」を参照)。

• 時系列コンポーネントの経過時間バーのカラー・パレット(第13.5.23項「時系列コンポーネントの作成方法」を参照)。

• テーマ・マップ・コンポーネントのベース・マップ(第13.5.19.5項「カスタム・ベース・マップの定義」を参照)。

• 地理マップ・コンポーネントのスタイル・プロパティ(第13.5.18項「地理マップ・コンポーネントの作成方法」を参照)。

• テーマ・マップ・コンポーネントのスタイル・プロパティ(第13.5.19.7項「テーマ・マップ・コンポーネントへのカスタム・スタイルの適用」を参照)。

• 評価ゲージ・コンポーネントのselectedおよびunselected状態(第13.5.16.1項「評価ゲージ・コンポーネントへのカスタム・スタイルの適用」を参照)。

アプリケーション機能レベルで「包含」セクションにこれらのカスタムJavaScriptファイルを指定する必要があります。それによって、XMLスタイル・テンプレートで定義したデフォルト・スタイル値をオーバーライドします。次の例はJavaScriptファイルを示していますが、これは、CSSを使用してスタイル設定できないプロパティのカスタム・スタイル設定を必要とするデータ視覚化コンポーネントを持つMAF AMXアプリケーション機能を含むMAFプロジェクトに追加するファイルと似ています。

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ファイルを定義した後、任意の値をコメント解除および変更できます。次の例に示すように、maf-feature.xmlファイルに包含される機能としてこのファイルを追加します。

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

13.7 UIコンポーネントのローカライズ

「MAF AMXページ」で、OEPEが提供する標準XLIFFを使用すると、UIコンポーネントに表示されるテキストをローカライズできます。これを行うには、.amxファイルを選択し、文字列を右クリックしてコンテキスト・メニューの「ソース」→「文字列の外部化」を選択します。これで、「文字列の外部化」ダイアログが表示されます(図13-92を参照)。

注意: プロジェクト・エクスプローラでファイルを右クリックし、「ソース」→「文字列の外部化」を選択すると、ファイルを外部化することもできます。

図13-92 「文字列の外部化」ダイアログ

外部化する値/キー・ペアを選択し、「編集」を選択して値を変更します。目的のすべてのペアを編集したら、「終了」をクリックしてXLIFFファイルを作成します。XLIFFファイルのデフォルト名が表示され、これを変更するには、「構成」をクリックします。XLIFFファイルを作成したら、図13-93のようにこのファイルを編集し、外部化された文字列の値を変更します。

図13-93 「テキスト・リソースの選択」ダイアログ

XLIFF (XML Localization Interchange File Format)ファイルが存在しない場合は、このファイルが作成されます。存在する場合は、新しいエントリが既存のXLIFFファイルに追加されます。さらに、ViewControllerBundle.xlfファイル(デフォルト名ですが、名前は基本的にプロジェクトと一致します)を指す表示コンポーネントの子として、対応するバンドルのロード(loadBundle)コンポーネントが作成されます。

注意: ViewControllerBundle.xlfはデフォルトのファイル名です。この名前はプロジェクトの名前と一致します。

図13-94は、MAF AMXファイルでの変更を示しています。

図13-94 MAF AMXファイル内のローカライズ済文字列

13.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)

  • 第13.8.2項「基本的なWAI-ARIA用語に関する必知事項」

• Oracle Global HTML Accessibility Guidelines (OGHAG)。

  詳細は、第13.8.3項「Oracle Global HTML Accessibility Guidelinesに関する必知事項」を参照してください。

• iOSのアクセシビリティ・ガイドライン。

  詳細は、『Accessibility Programming Guide for iOS』を参照してください。

そのようなコンポーネントの導入によって、アクセス可能なコンポーネントの外観の変更されたり、アプリケーション・ロジックが影響受けることがありません。

MAF AMXアプリケーション機能のアクセシビリティが適切に機能するために、次のガイドラインに従ってください。

• ナビゲーションの深さは3レベル以内にして、ユーザーが簡単にホーム画面に戻れるようにする必要があります。

• スクリプトを最小限に維持します。

• DOMとの直接対話を提供しないでください。

• JavaScriptのタイムアウトは使用しないでください。

• フォーカスの不要な変更は回避します。

• ポップアップ・トリガーを明示的に指定する

• 必要に応じて、WAI-ARIAライブ・リージョンを利用します(第13.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)

13.8.1 アクセシビリティのためのUIコンポーネントおよびデータ視覚化コンポーネントの構成方法

MAF AMX UIおよびデータ視覚化コンポーネントには、組込みのアクセシビリティ・サポートが備えられており、ほとんどのコンポーネントがアクセシビリティ監査の対象となっています(図13-95を参照)。

表13-10は、「プロパティ」の「アクセシビリティ」セクションで設定できるコンポーネントおよびそれらの属性を示しています。

表13-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属性の値はローカライズできます。

パネル・グループ・レイアウト・コンポーネントおよびデック・コンポーネントの場合、ページのコンテキストに従って適用可能なランドマーク・ロール・タイプ(表13-15「ランドマーク・ロール」を参照)を定義します。landmark属性に次の値の1つを設定できます。

• デフォルト(なし)

• アプリケーション

• banner

• complementary

• contentinfo

• form

• main

• navigation

• search

表13-11は、WAI-ARIA仕様によって定義されるそのアクセシビリティ属性が実行時に自動的に適用され、変更できないUIコンポーネントを示しています。

表13-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 値属性はアクセシビリティ監査の対象外です。

図13-95は、OEPEに表示されるアクセシビリティ監査警告を示しています。

図13-95 アクセシビリティ監査警告

アクセス可能なMAF AMXアプリケーション機能をテストする方法の詳細は、第31.2.1項「iOSデバイス上でアクセシビリティのテストを実行する方法」を参照してください。

注意: Androidでは、WAI-ARIAアクセシビリティ機能はデータ視覚化コンポーネントに対してサポートされません。 その他のMAF AMX UIコンポーネントは、アプリケーションがAndroidスクリーン・リーダー・モードで実行された場合、正しく動作しない可能性があります。

13.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仕様での定義)を示しています。

表13-12は、全般的なロール概念を定義する目的でWAI-ARIAのロールの分類をサポートするために使用される抽象ロールを示しています。

表13-12 抽象ロール

抽象ロール	説明
input	ユーザー入力を可能にする一般的なタイプのウィジェット。
landmark	ナビゲーショナル・ランドマークを意図したページのリージョン。
select	ユーザーが一連の選択肢から選択を行えるフォーム・ウィジェット。
widget	グラフィカル・ユーザー・インタフェースのインタラクティブ・コンポーネント。

表13-13は、スタンドアロン・ユーザー・インタフェース・ウィジェットまたは大きい複合ウィジェットの一部として機能するウィジェット・ロールを示しています。

表13-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 (ステート)

表13-14は、ページ内のコンテンツを編成する構造を記述するドキュメント構造ロールを示しています。通常、ドキュメント構造はインタラクティブではありません。

表13-14 ドキュメント構造ロール

ドキュメント構造ロール	説明
img	イメージを形成する要素のコレクションのコンテナ。
list	非インタラクティブ・リスト・アイテムのグループ。
listitem	リストまたはディレクトリ内の単一アイテム。

表13-15は、ナビゲーショナル・ランドマークを意図したページのリージョンを表すランドマーク・ロールを示しています。

表13-15 ランドマーク・ロール

ランドマーク・ロール	説明
アプリケーション	Webアプリケーション(Webドキュメントではなく)として宣言されるリージョン.
banner	ほとんどサイト指向のコンテンツ(ページ固有のコンテンツではなく)を含むリージョン。
complementary	DOM階層の類似したレベルにあるメイン・コンテンツを補足するように設計ているが、メイン・コンテンツから切り離しても意味を持つドキュメントのサポート・セクション。
contentinfo	親ドキュメントに関する情報が含まれている大きな認識可能なリージョン。
form	全体として結合されてフォームを作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。
main	ドキュメントのメイン・コンテンツ。
navigation	ドキュメントまたは関連ドキュメントをナビゲートするためのナビゲーショナル要素(通常はリンク)のコレクション。
search	全体として結合されて検索機能を作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。

MAF UIコンポーネントの大部分では、アクセス可能なWAI-ARIA属性は変更できません。一部のコンポーネントでは、デザインタイムで特別なアクセス可能な属性を設定でき、パネル・グループ・レイアウトおよびデックには、WAI-ARIAランドマーク・ロール・タイプを使用できます。詳細は、第13.8.1項「アクセシビリティのためのUIコンポーネントおよびデータ視覚化コンポーネントの構成方法」を参照してください。

13.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のアクセシビリティについての考え方とポリシーを参照してください。

13.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ページに検証エラー・メッセージが含まれている場合は、リスト・アイテム、リンク、ボタンなどのコマンド・コンポーネントを使用して、エンド・ユーザーがそのページに移動しないようにできます。警告を含むメッセージでは、ナビゲーションが停止されることはありません。

次の例は、MAF AMXファイルでの複数の検証グループ操作および検証動作操作など検証要素の定義方法を示しています。

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

次の例は、MAF AMXファイルのポップアップに表示される検証メッセージの定義方法を示しています。

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

検証メッセージはポップアップ・コンポーネントに表示されます(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)。検証ポップアップのタイトルを構成することはできません。それは、相対的なメッセージ重大度によって自動的に決定されます。現在のメッセージのうちの最も重大なものが検証ポップアップのタイトルになります。つまり、すべての検証メッセージがWARNINGタイプである場合は、そのタイトルは「警告」になります。メッセージのいくつかがWARNINGタイプで、その他はERRORタイプの場合はタイトルは「エラー」に設定されます。

図13-96は、実行時に生成されるポップアップ検証メッセージを示しています。

図13-96 iPhoneでの検証メッセージ

13.10 イベント・リスナーの使用方法

MAF AMXページからJavaコードを呼び出し、アプリケーション・ロジックを実行するには、次のいずれかの方法でUIコンポーネントの属性としてリスナーを定義します。

• MAF AMXファイルのソースでの手動による方法。

• 選択したコンポーネントの「プロパティ」エディタから行う方法。詳細は、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イベントの詳細は、第14.3.6項「ELイベントについて」を参照してください。

ほとんどのMAF AMXイベント・クラスは、oracle.adfmf.amx.event.AMXEventクラスを拡張します。Javaコードでイベント・リスナーを定義するときは、oracle.adfmf.amx.event.AMXEventクラスを渡す必要があります。

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

• Oracle Mobile Application Framework Java APIリファレンス

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

MAFでは、マネージドBeanメソッドがMAF AMX固有のイベント・クラスを使用するように、リスナーに対してマネージドBeanメソッドを作成できます。次の3つの例は、同じマネージドBeanメソッドをコールするボタンおよびリンク・コンポーネントを示しています。AMXEventのソース値は、コンポーネントのIDを含むメッセージ・ボックスを表示することでどのオブジェクトがイベントを起動したのかを判別します。

次の例は、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>

次の例は、AMXEventを使用する方法を示しています。

private void actionListenerMethod(AMXEvent amxEvent) {
   // Some Java handling
}

次の例は、イベント・メソッドを起動する方法を示しています。

public Object invokeMethod(String methodName, Object[] params) {
   if (methodName.equals("actionListenerMethod")) {
      actionListenerMethod((AMXEvent) params[0]);
   }
   return null;
}

その他の例については、「ファイル」→「新」→「MAFサンプル」にあるAPIDemoアプリケーションというMAFサンプル・アプリケーションを参照してください。このサンプルは、JavaBeansからリスナーをコールする方法を示しています。

13.10.1 イベント・リスナーの制約付きタイプ属性に関する必知事項

イベント・リスナーは、一部のMAF AMX UIコンポーネントの子として定義できます。リスナーのtype属性によって、それらがどのイベントを処理するために登録されるのかが識別されます。各親UIコンポーネントでは(親コンポーネントに適した)イベントのサブセットのみがサポートされているため、これらのサポートされているイベントは、リスナーに対して選択できる限られたタイプのリストに提示されます。

表13-16は、親UIコンポーネント、それが子として持つことができるイベント・リスナー、およびそれらがサポートしているイベント・タイプを示しています。

表13-16 サポートされているイベント・リスナーとイベント・タイプ

UIコンポーネント(親)	アクション・リスナー(子)	プロパティ・リスナーの設定(子)	ポップアップ表示動作(子)	ポップアップを閉じる動作(子)	actionListener (属性)	valueChangeListener (属性)	moveListener (属性)	selectionListener (属性)	mapBoundsChangeListener (属性)	mapInputListener (属性)	viewportChangeListener (属性)	rangeChangeListener (属性)
ボタン	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
リンク	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
リスト・アイテム	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
入力日	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
入力数値スライダ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
入力テキスト	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
リスト・ビュー	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象
チェックボックス	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
スイッチ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
チェックボックス(複数選択)	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
選択肢(複数選択)	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
選択肢	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
選択ボタン	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
ラジオ・ボタン	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
リンク(実行)	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
カルーセル	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
カルーセル・アイテム	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
イメージ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
面グラフ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象	サポート対象外
棒グラフ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象	サポート対象外
バブル・チャート	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外
コンボ・チャート	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象	サポート対象外
横棒グラフ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象	サポート対象外
LEDゲージ	サポート対象外	サポート対象外	サポート対象	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
ダイヤル・ゲージ	サポート対象外	サポート対象外	サポート対象	サポート対象	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
評価ゲージ	サポート対象外	サポート対象外	サポート対象	サポート対象	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
線グラフ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象	サポート対象外
円グラフ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外
散布図	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外
スパーク・チャート	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
ステータス・メーター・ゲージ	サポート対象外	サポート対象外	サポート対象	サポート対象	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
地理マップ	サポート対象外	サポート済脚注 1	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート済脚注 2	サポート対象	サポート対象	サポート対象外	サポート対象外
テーマ・マップ	サポート対象外	サポート済脚注 3	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート済脚注 4	サポート対象外	サポート対象外	サポート対象外	サポート対象外
サンバースト	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外
ツリーマップ	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外
時系列	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外
NBox	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象外	サポート対象	サポート対象外	サポート対象外	サポート対象外	サポート対象外

^脚注 1 プロパティ・リスナーの設定は、地理マップの領域のマーカーの子として指定できます。

^脚注 2 selectionListener属性は、地理マップの面データ・レイヤーまたは点データ・レイヤーに設定できます。

^脚注 3 プロパティ・リスナーの設定は、テーマ・マップの領域のマーカーの子として指定できます。

^脚注 4 selectionListener属性は、テーマ・マップの面データ・レイヤーまたは点データ・レイヤーに設定できます。

子イベント・リスナーのそれぞれのtype属性には、リスナー・イベントと一致する値の基本セットがあります。これらの値は表13-16に示す情報に基づいてフィルタ処理され、それによって、子イベント・リスナーが、識別された親UIコンポーネントのコンテキスト内にある場合に、その親によってサポートされているイベントのみが表示されるようになります。たとえば、ボタン・コンポーネントの下にあるアクション・リスナーまたはプロパティ・リスナーの設定の子では、actionタイプの値およびジェスチャーのみか表示されます。

---

脚注の凡例

脚注 1: 詳細は、第13.3.26.1項「disabled属性に関する必知事項」を参照してください。