14 MAF AMXユーザー・インタフェースの作成
この章の内容は次のとおりです。
MAF AMXページのユーザー・インタフェースの作成の概要
MAFでは、MAFがサポートするプラットフォームで適切に動作するMAF AMXページを作成できる、一連のUIコンポーネントおよび操作が提供されています。
MAF AMXは、標準的なJDeveloper開発エクスペリエンスに準拠して、「コンポーネント」ウィンドウまたは「データ・コントロール」ウィンドウのいずれからもソース・エディタや「構造」ウィンドウにUIコンポーネントおよび操作をドラッグできるようになっています。実質的には、iOSおよびAndroidのプラットフォーム上のネイティブ・コンポーネントのHTML相当物がMAF AMX UIコンポーネントによってレンダリングされ、JDeveloperでのそれらのデザインタイムの動作は、その他のテクノロジで使用されるコンポーネントに似たものとなります。さらに、これらのUIコンポーネントは、宣言ナビゲーションおよびデータ・バインディングのためにMAFのコントローラおよびモデルと統合されています。
詳細は、次の項を参照してください。
ページ・レイアウトの設計
MAF AMXは、ページ内へのUIコンポーネントの配置を可能にするレイアウト・コンポーネントを提供します。
通常、これらのコンポーネントを使用してページの構築を開始し、次にこれらのコンテナ内で、または子コンポーネントとして、他の機能を提供する他のコンポーネントを、レイアウト・コンポーネント(表にリスト)に追加します。これらのコンポーネントのいくつかは、拡大するコンポーネント内に配置されたときに拡大する機能などの形状管理機能を提供します。
表14-1 MAF AMXのページ管理、レイアウトおよび間隔調整コンポーネント
| コンポーネント | タイプ | 説明 |
|---|---|---|
|
表示 |
コア・ページ構造コンポーネント |
MAF AMXファイル内に |
|
パネル・ページ |
コア・ページ構造コンポーネント |
MAF AMXファイル内に MAF AMXファイルの詳細は、「MAF AMXページの作成」を参照してください。 |
|
ファセット |
コア・ページ構造コンポーネント |
MAF AMXファイル内に |
|
フラグメント |
コア・ページ構造コンポーネント |
MAF AMXファイル内に |
|
ファセット定義 |
コア・ページ構造コンポーネント |
MAF AMXファイル内に |
|
パネル・グループ・レイアウト |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
|
パネル・フォーム・レイアウト |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
|
パネル・ラベルおよびメッセージ |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
|
パネル・ストレッチ・レイアウト |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
|
ポップアップ |
セカンダリ・ウィンドウ |
MAF AMXファイル内に |
|
パネル・スプリッタ |
インタラクティブ・ページ・レイアウト・コンテナ |
MAF AMXファイル内に |
|
パネル・アイテム |
インタラクティブ・ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
|
デック |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
|
フレックス・レイアウト |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
|
スペーサ |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
|
表のレイアウト |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
|
行のレイアウト |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
|
セル・フォーマット |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
|
メーソンリー・レイアウト |
ページ・レイアウト・コンテナ |
MAF AMXファイル内に |
|
アクセサリ・レイアウト |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
レイアウト・コンポーネントを追加するには、それを「コンポーネント」ウィンドウからMAF AMXページにドラッグ・アンド・ドロップします(「MAF AMXページにUIコンポーネントを追加する方法」を参照)。次に、「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します(「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>
レイアウト・コンポーネントのビジュアル・プレゼンテーションを管理するには、標準Cascading Style Sheet (CSS)を使用します。CSSは、ViewControllerプロジェクトのWeb Content/cssディレクトリに、MAFによって提供されているデフォルトCSSとともに配置されています。「コンポーネント属性を使用したスタイルの定義方法」を参照してください。
MAF AMXを使用して作成されたユーザー・インタフェースは、言語環境が左から右(LTR)、右から左(RTL)のいずれであっても正しく表示されます。後者の場合、コンポーネントは画面の左側ではなく右側から表示されます。ポップアップ(「ポップアップ・コンポーネントの使用方法」を参照)、パネル・アイテム、パネル・スプリッタ(「パネル・スプリッタ・コンポーネントの使用方法」)など、一部のMAF AMXレイアウト・コンポーネントは、特定のRTL動作を有効化するように構成できます。MAF AMXページのRTL構成の詳細は、「ジェスチャーの有効化」および「ページ遷移スタイルの指定方法」を参照してください。
UILayoutDemoという名前のMAFサンプル・アプリケーションは、ボタンなどのMAF AMX UIコンポーネントとともにレイアウト・コンポーネントを使用して、共通パターンに従った一般的なレイアウトのいくつかを実現する方法を示しています。さらに、このサンプル・アプリケーションは、スタイルを使用してページ・レイアウトを特定のパターンに合せる方法を示します。UILayoutDemoアプリケーションは、開発コンピュータのjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
表示コンポーネントの使用方法
表示(MAF AMXファイルのview要素)は、コア・ページ構造コンポーネントであり、MAF AMXファイルの作成時にそのファイルに自動的に挿入されます。このコンポーネントは、ページおよびその構造の階層表現を提供し、単一のMAF AMXページを表します。
パネル・ページ・コンポーネントの使用方法
パネル・ページ(MAF AMXファイルのpanelPage要素)は、他のコンポーネントをレイアウトする画面のスクロール可能領域の定義を可能にするコンポーネントです。
デフォルトでは、MAF AMXページを作成するときに、JDeveloperによってパネル・ページ・コンポーネントが自動的に作成され、そのページに挿入されます。そのページにコンポーネントを追加すると、それらはパネル・ページ・コンポーネント内に挿入されます。
特定の領域(ページのヘッダーやフッターなど)をスクロールできないようにし、向きが変更されたときのストレッチを有効化するには、パネル・ページに対してファセット・コンポーネントを指定します。パネル・ページのヘッダー・ファセットには、各ページのナビゲーション・バーに配置されるタイトルが含まれています。パネル・ページに含めることができる他のタイプのファセット・コンポーネントの詳細は、「ファセット・コンポーネントの使用方法」を参照してください。
次の例は、MAF AMXファイルに定義されたpanelPage要素を示しています。このパネル・ページには、ヘッダー・ファセットが含まれています。
<amx:panelPage id="pp1"> <amx:facet name="header"> <amx:outputText id="ot1" value="Welcome"/> </amx:facet> </amx:panelPage>
パネル・グループ・レイアウト・コンポーネントの使用方法
「パネル・グループ・レイアウト」コンポーネントは、基本レイアウト・コンポーネントであり、その子を垂直方向または水平方向に配置します。また、子コンポーネントをページの横および下に流すラッピング・レイアウト・オプションがあります。
「パネル・グループ・レイアウト」コンポーネントを作成するには、「コンポーネント」ウィンドウを使用します。
- 「コンポーネント」ウィンドウで、MAF AMX→「レイアウト」を選択し、「パネル・グループ・レイアウト」をMAF AMXページにドラッグ・アンド・ドロップします。
- 目的の子コンポーネントを「パネル・グループ・レイアウト」コンポーネントに挿入します。
- 隣接する子コンポーネント間に間隔を追加するには、スペーサ(
spacer)コンポーネントを挿入します。 - 「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。
次の例は、MAF AMXファイルに定義されたpanelGroupLayout要素を示しています。
<amx:panelGroupLayout styleClass="prod" id="pgl1"> <amx:outputText styleClass="prod-label" value="Screen Size:" id="ot1"/> </amx:panelGroupLayout>
スクロール動作のカスタマイズ
「パネル・グループ・レイアウト」コンポーネントのスクロール動作は、scrollPolicy属性によって定義され、auto (デフォルト)、noneまたはscrollに設定できます。この動作は、デフォルトでは、アクティブ・スキンに定義されているものになります。
アクティブ・スキンに定義されている動作にかかわらずスクロールを無効にするには、scrollPolicy属性をnoneに設定します。「パネル・グループ・レイアウト」コンポーネントがスクロール可能でない場合は、この内容は制限されません。
アクティブ・スキンに定義されている動作にかかわらずスクロールを有効にするには、scrollPolicy属性をscrollに設定します。「パネル・グループ・レイアウト」コンポーネントがスクロール可能な場合は、コンポーネントのディメンションが制限されるときにスクロールが提供されます。
スクロールでは大量のメモリーが消費され、アプリケーションがクラッシュする可能性があるため、スクロールの使用は最小限にする必要があります。mobileAltaスキン(「スキニングに関する必知事項」を参照)では、「パネル・グループ・レイアウト」、「パネル・フォーム・レイアウト」(「パネル・フォーム・レイアウト・コンポーネントの使用方法」を参照)および「表のレイアウト」(「表のレイアウト・コンポーネントの使用方法」を参照)のスクロールは無効化されています。アプリケーションではmobileAltaスキンを使用し、インスタンスでscrollPolicyをscrollに設定するのは必要な場合に限定することをお薦めします。「パネル・フォーム・レイアウト」および「表のレイアウト」のスクロール動作をシミュレートするには、スクロールが必要になったときに、スクロール可能な「パネル・グループ・レイアウト」コンポーネントでそれらを囲みます。
「MAF AMX UIコンポーネントによるメモリー消費に関する必知事項」を参照してください。
パネル・フォーム・レイアウト・コンポーネントの使用方法
パネル・フォーム・レイアウト(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属性は、列の数をその数値を最大としてレイアウトを制限しますが、子コンポーネントを配置するにはこれと同数の列が必要です。
パネル・フォーム・レイアウト・コンポーネントを追加するには:
-
「コンポーネント」ウィンドウで、MAF AMX→「レイアウト」を選択し、パネル・フォーム・レイアウト・コンポーネントをMAF AMXページにドラッグ・アンド・ドロップします。
-
「プロパティ」ウィンドウで、コンポーネントの属性を設定します。
次の例は、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>
パネル・ストレッチ・レイアウト・コンポーネントの使用方法
パネル・ストレッチ・レイアウト(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のいずれかに設定されている場合、スクロールバーが追加されます。
パネル・ストレッチ・レイアウト・コンポーネントを追加するには、次の手順を実行します。
-
「コンポーネント」ウィンドウで、MAF AMX→「レイアウト」を選択し、パネル・ストレッチ・レイアウトをMAF AMXページにドラッグ・アンド・ドロップします。
-
作成した子ファセット・コンポーネントを確認し、必要に応じて、一部を削除します。
-
「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。
パネル・ラベルおよびメッセージ・コンポーネントの使用方法
パネル・ラベルおよびメッセージ(panelLabelAndMessage)コンポーネントは、label属性が定義されていないコンポーネントを配置するために使用します。これらのコンポーネントとしては、通常、出力テキスト、ボタンまたはリンクがあります。
パネル・ラベルおよびメッセージ・コンポーネントを追加するには:
-
「コンポーネント」ウィンドウで、MAF AMX→「レイアウト」を選択し、パネル・ラベルおよびメッセージ・コンポーネントをパネル・グループ・レイアウト・コンポーネントにドラッグ・アンド・ドロップします。
-
「プロパティ」ウィンドウで、コンポーネントの属性を設定します。
次の例は、MAF AMXファイルで定義されたpanelLabelAndMessage要素を示しています。label属性が、子コンポーネントに対して使用されています。
<amx:panelLabelAndMessage label="Phone" id="plm1"> <amx:outputText value="212-555-0123" id="ot1"/> </amx:panelLabelAndMessage>
ファセット・コンポーネントの使用方法
ファセット(facet)コンポーネントは、親レイアウト・コンポーネント上に、ヘッダーやフッターなど任意の名前のファセットを定義するために使用します。ファセットの位置およびレンダリングは、親コンポーネントによって決定されます。
MAF AMXページのヘッダーは、通常、ヘッダー、プライマリおよびセカンダリのファセットと組み合せたパネル・ページ・コンポーネントによって表されます(「パネル・ページ・コンポーネントの使用方法」を参照)。
-
ヘッダー・ファセット: ページ・タイトルが含まれています。
-
プライマリ・アクション・ファセット: ヘッダー・バーの左隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
-
セカンダリ・アクション・ファセット: ヘッダー・バーの右隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
MAF AMXページのフッターは、フッター・ファセットと組み合せたパネル・ページ・コンポーネントによって表されます(「パネル・ページ・コンポーネントの使用方法」を参照)。
-
フッター・ファセット: コンテンツ領域の下に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
次の例は、パネル・ページ・コンテナ内で宣言されているfacet要素を示しています。ファセットのタイプは、常にそのname属性で定義されます(表を参照)。
<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>
特定の親コンポーネントとともに使用できる事前定義済ファセット・タイプを表に示します。
表14-2 ファセット・タイプと親コンポーネント
| 親コンポーネント | ファセット・タイプ(名前) |
|---|---|
|
パネル・ページ( |
|
|
リスト・ビュー( |
|
|
カルーセル( |
|
|
パネル・スプリッタ( |
|
|
パネル・ストレッチ・レイアウト( |
|
|
データ視覚化コンポーネント。 「データ視覚化の指定」を参照してください。 |
|
ファセット・コンポーネントを追加するには:
「構造」ウィンドウまたはソース・エディタに表示されるコンテキスト・メニューを使用して、ファセット・コンポーネントを別のコンポーネントの子として追加できます。ポップアップ・メニューには、選択している親コンポーネントに有効なファセットのみが表示されます。ファセットを追加するには、最初に「構造」ウィンドウまたはソース・エディタで親コンポーネントを選択してから右クリックし、次のうちの1つを選択します。
-
親コンポーネントが「パネル・ページ」の場合は、図に示すように、「ファセット-パネル・ページ」を選択して、リストからファセットのタイプを選択します。
-
親コンポーネントが「リスト・ビュー」の場合は、図に示すように、「ファセット-リスト・ビュー」を選択して、リストからファセットのタイプを選択します。
-
親コンポーネントがカルーセルの場合は、図に示すように、「ファセット-カルーセル」→「ノード・スタンプ」を選択します。
-
親コンポーネントがパネル・スプリッタの場合は、図に示すように、「ファセット-パネル・スプリッタ」→「ナビゲータ」を選択します。
-
親コンポーネントがパネル・ストレッチ・レイアウトの場合は、図に示すように、「ファセット-パネル・ストレッチ・レイアウト」を選択して、リストからファセットのタイプを選択します。
図14-6 パネル・ストレッチ・レイアウトにファセットを追加するためのポップアップ・メニューの使用方法
「図14-6 パネル・ストレッチ・レイアウトにファセットを追加するためのポップアップ・メニューの使用方法」の説明 -
親コンポーネントがデータ視覚化コンポーネントの1の場合は、図に示すように、「ファセット」→「<MAF AMXデータ視覚化コンポーネント名>」を選択して、リストからファセットのタイプを選択します。
図14-7 データ視覚化コンポーネントにファセットを追加するためのポップアップ・メニューの使用方法
「図14-7 データ視覚化コンポーネントにファセットを追加するためのポップアップ・メニューの使用方法」の説明
代替方法:
-
「コンポーネント」ウィンドウで、MAF AMX→「レイアウト」→「コア構造」を選択し、上の表にリストされた別のコンポーネントにファセット・コンポーネントをドラッグ・アンド・ドロップします。
-
「プロパティ」ウィンドウで、コンポーネントの属性を設定します。
ポップアップ・コンポーネントの使用方法
ポップアップ(popup)コンポーネントを使用して、ポップアップ・ウィンドウを表示します。このコンポーネントは、ビュー・コンポーネントの子として宣言できます。
ポップアップ・コンポーネントとともに次の操作を使用できます。
-
ポップアップを閉じる動作(
closePopupBehavior)の操作は、ポップアップを閉じる動作のtype属性を使用して指定したクライアントによってトリガーされるイベントに応じてポップアップを閉じる宣言的な方法を表しています。 -
ポップアップ表示動作(
showPopupBehavior)の操作は、ポップアップ表示動作のtype属性を使用して指定されたクライアントによってトリガーされるイベントに応答してポップアップを表示する宣言的な方法です。ポップアップ表示動作の
popupId属性には、その親コンポーネントに関連するポップアップ・コンポーネントの一意の識別子を指定します。ポップアップ表示動作のalignId属性には、そのポップアップの位置合せを行う際の基準となるUIコンポーネントの一意の識別子を指定します。識別子を手動で設定するのは、手間がかかり、さらに無効な参照が発生する可能性もあるため、これらの2つの属性の値は標準「プロパティ」ウィンドウと統合されているエディタを使用して設定します(図14-9を参照)。これらの識別子を検証するために特別に定義されている監査ルールがあります(「要素識別子とその監査に関する必知事項」を参照)。「ポップアップ表示動作」の
decoration属性では、指定されているalignIdと一致するコンポーネントを指すアンカーを持つようにポップアップを構成できます。これは、decoration属性をanchorに設定することで実行します(デフォルト値はsimple)。注意:
alignId属性を使用するためにdecoration="anchor"を定義する必要はありません。decoration="anchor"を使用する際に、alignId属性が指定されていないかalignIdで一致するものが見つからない場合は、decorationはsimpleにデフォルト設定されるため、ポップアップ・コンポーネントには最小限の装飾が行われます。「ポップアップ表示動作」の
align属性に設定する値は、ポップアップ・コンポーネントの配置を示します(その配置を行うのに十分なスペースがある場合)。十分な領域がない場合は、MAFによって別の位置が選択されます。ヒント:
ポップアップを画面の中央に配置するには、パネル・ページ・コンポーネントの
alignId属性を設定してから、align="center"を使用してください。
次の例は、MAF AMXファイルで定義されたpopupと、そのshowPopupBehaviorおよびclosePopupBehavior要素を示しています。
<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:panelGroupLayout id="pgl2" layout="vertical"> <amx:commandButton id="commandButton3" text="Close Popup"> <amx:closePopupBehavior type="action" popupId="popup1"/> </amx:commandButton> </amx:panelGroupLayout> </amx:popup> </amx:view>
ポップアップ・コンポーネントは、ユーザー入力エラーが発生したときに検証メッセージを表示できます。「入力の検証」を参照してください。
ポップアップID属性を設定するには:
-
ソース・エディタまたは「構造」ウィンドウで、
showPopupBehavior要素またはcloseopupBehavior要素を選択します。 -
「ポップアップID」フィールドの右側にある下矢印をクリックし、使用可能なポップアップ・コンポーネントのリストから選択するか、「ポップアップID」フィールドの右側にある「プロパティ・メニュー」アイコンをクリックして、「ポップアップID」プロパティ・エディタを開きます。
-
プロパティ・エディタを使用する場合は、図に示すように、「ポップアップID」プロパティ・エディタで「編集」を選択し、「プロパティの編集: ポップアップID」ダイアログを開きます。
-
「ポップアップ表示動作」または「ポップアップを閉じる動作」を起動したときに表示されるポップアップ・コンポーネントまたは閉じるポップアップ・コンポーネントを選択します。
「位置合せID」属性を設定するには:
-
ソース・エディタまたは「構造」ウィンドウで、
showPopupBehavior要素を選択します。 -
「位置合せID」フィールドの右側にある「プロパティ・メニュー」アイコンをクリックして、図に示すように、「位置合せID」プロパティ・エディタを開きます。
-
図に示すように、「位置合せID」プロパティ・エディタで「編集」を選択し、「プロパティの編集: 位置合せID」ダイアログを開きます。
-
「ポップアップ表示動作」操作の親コンポーネントを選択します。
iOSプラットフォームとAndroid 4.2以降のプラットフォームの両方に対応した開発を行う場合、右から左(RTL)の言語環境に対応するようにポップアップを構成するには、そのanimation属性をslideStartまたはslideEndに設定します。
animation属性をzoomに設定することにより、元のコンポーネントをズーム・インまたはズーム・アウトするポップアップを有効にできます。
UILayoutDemoという名前のMAFサンプル・アプリケーションは、ポップアップ・コンポーネントの使用方法と、スタイルを適用してページ・レイアウトを特定のパターンに合せる方法を示しています。UIDemoアプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
パネル・スプリッタ・コンポーネントの使用方法
パネル・スプリッタ(panelSplitter)コンポーネントは、左側にあるナビゲーション・ペインで制御可能な複数のコンテンツ領域を表示するために使用します。
パネル・スプリッタ・コンポーネントは、通常、表示サイズが大きいタブレット・デバイスで使用されます。これらのコンポーネントは、通常、表示領域の左側にリストが、右側にコンテンツがある場合に使用されます。
パネル・スプリッタには、MAF AMXページにパネル・スプリッタをドラッグ・アンド・ドロップすると自動的に生成されるナビゲータ・ファセット(「ファセット・コンポーネントの使用方法」を参照)およびパネル・アイテム・コンポーネントを含めることができます。パネル・アイテム(panelItem)コンポーネントは、パネル・スプリッタのコンテンツ領域を表します。各パネル・スプリッタ・コンポーネントには少なくとも1つのパネル・アイテムが必要なため、パネル・スプリッタが作成されるときにパネル・アイテムがパネル・スプリッタに自動的に追加されます。各パネル・アイテム・コンポーネントには、パネル・グループ・レイアウトに含めることができるどのようなコンポーネントも含めることができます(「パネル・グループ・レイアウト・コンポーネントの使用方法」を参照)。
「パネル・スプリッタ」の左側は、ナビゲータ・ファセット(navigator)によって表されます。これは、アニメーション付きの複数のコンテンツのみが必要とされる場合(たとえば、異なるボタンを選択してコンテンツを切り替えるときにアニメーションを必要とする選択ボタン付きの複数コンテンツ領域を描画する場合)のオプションです。横モードの場合、このファセットがレンダリングされます。縦モードの場合、ボタンはコンテンツ領域の上に配置され、クリックされたときにこのファセットのコンテンツがレンダリングされます。navigatorDisplayおよびnavigatorDisclosureState属性を使用して、ナビゲータの表示およびナビゲータの開示状態を構成できます。
右から左(RTL)の言語環境に対応するようにパネル・スプリッタとパネル・アイテムを構成するには、それらのanimation属性をslideStart、slideEnd、flipStart、flipEndのいずれかに設定します。パネル・アイテム・コンポーネントのanimation属性は、パネル・スプリッタのanimation属性をオーバーライドします。
次の例は、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アプリケーション」に記載されているCompGalleryサンプル・アプリケーションは、レイアウト・カテゴリのパネル・スプリッタ・コンポーネントの実装を提供します。
スペーサ・コンポーネントの使用方法
スペーサ(spacer)コンポーネントを使用して、MAF AMXページでコンポーネントを区切るために空白領域を作成します。spacerのheight属性(垂直空白用)およびwidth属性(水平空白用)を使用して、縦または横の空白をページに組み込むことができます。
スペーサ・コンポーネントを追加するには、次の手順を実行します。
-
「コンポーネント」ウィンドウで、MAF AMX→「レイアウト」を選択し、「スペーサ」をMAF AMXページにドラッグ・アンド・ドロップします。
-
「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。
次の例は、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..."/>
表のレイアウト・コンポーネントの使用方法
表のレイアウト(tableLayout)コンポーネントは、セルを含む行で構成される一般的な表のフォーマットでデータを表示するために使用します。
行のレイアウト(rowLayout)コンポーネントは、表のレイアウトの単一の行を表します。表のレイアウト・コンポーネントには、1つ以上の行のレイアウト・コンポーネント、または行のレイアウト・コンポーネントを生成できるイテレータ・コンポーネントのいずれかが含まれている必要があります。
セル・フォーマット(cellFormat)コンポーネントは、行のレイアウトのセルを表します。行のレイアウト・コンポーネントには、1つ以上のセル・フォーマット・コンポーネント、セル・フォーマット・コンポーネントを生成できるイテレータ・コンポーネント、属性リスト・イテレータ・コンポーネントまたはファセット定義コンポーネントのいずれかが含まれている必要があります。
表のレイアウト構造では、セル・コンテンツで割合による高さを使用したり、表構造全体に高さをまとめて割り当てることはできません。
-
表のレイアウト・コンポーネントの
layout属性およびwidth属性 -
行のレイアウト・コンポーネントの
width属性およびheight属性
表のレイアウト・コンポーネントを追加するには:
-
「コンポーネント」ウィンドウで、MAF AMX→「レイアウト」を選択し、「表のレイアウト」をMAF AMXページにドラッグ・アンド・ドロップします。
-
必要な数の行のレイアウト・コンポーネント、イテレータ・コンポーネント、属性リスト・イテレータ・コンポーネントまたはファセット定義の子コンポーネントを表のレイアウト・コンポーネントに挿入します。
-
セル・フォーマット・コンポーネント、イテレータ・コンポーネント、属性リスト・イテレータ・コンポーネントまたはファセット定義の子コンポーネントをそれぞれの行のレイアウト・コンポーネントに挿入します。
-
「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。
次の例は、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>メーソンリー・レイアウト・コンポーネントの使用方法
メーソンリー・レイアウト(masonryLayout)は、ダッシュボードと同様に列と行に配置されたタイルとして子コンポーネントを提示するコンテナタイプのコンポーネントです。各列と行のサイズは固定で、CSSで定義されます。このサイズは、メーソンリー・レイアウト・コンポーネント自体のサイズから独立しています。表示される列数はメーソンリー・レイアウト・サイズに応じて変化する場合がありますが、タイル・サイズは変化しません。また、タイル・サイズはコンテンツに依存しません。
タイルは、コンテンツが様々なMAF AMX UIコンポーネントによって提供されるメーソンリー・レイアウト・アイテム(masonryLayoutItem)コンポーネントによって表現されます。1つのタイルは複数の行および列を占めることができます(たとえば、タイルは3列と1行を占めることができます)。MAF AMXは、masonryLayoutItemのdimension属性を通じて使用可能な次のタイル・サイズの定義済セットを提供します。
-
1x1: 1列と1行。
-
1x2: 1列と2行。
-
1x3: 1列と3行。
-
2x1: 2列と1行。
-
2x2: 2列と2行。
-
2x3: 2列と3行。
-
3x1: 3列と1行。
-
3x2: 3列と2行。
CSSの.amx-masonryLayoutItemセクションで追加のサイズを作成することにより、メーソンリー・レイアウト・コンポーネントの外観を再定義できます。
行と列の間のスペースも、CSSで指定されます。
メーソンリー・レイアウト・コンポーネントは、レイアウト内に以前に残された間隔を埋め、適合するタイルを配置することで、使用可能なスペースの最大限の利用を試みます。エンド・ユーザーがモバイル・デバイスを回転すると、タイルが再配置され、スペースが最適に埋められます。この機能は、メーソンリー・レイアウト・アイテムの配置を変更するたびに、メーソンリー・レイアウト・コンポーネントによって起動されるMasonryReorderEventを介して有効になります。
メーソンリー・レイアウト・コンポーネントを追加するには:
-
「コンポーネント」ウィンドウで、MAF AMX→「レイアウト」を選択し、メーソンリー・レイアウトをMAF AMXページにドラッグ・アンド・ドロップします。
-
目的の数のメーソンリー・レイアウト・アイテム・コンポーネントとその子UIコンポーネントをメーソンリー・レイアウト・コンポーネントに挿入します。
-
「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。
次の例は、MAF AMXファイルで定義されたmasonryLayout要素およびmasonryLayoutItem要素とそれらの子を示しています。
<amx:masonryLayout id="ml1"
initialOrder="#{pageFlowScope.componentProperties.order}">
<amx:masonryLayoutItem id="mt1"
dimension="#{pageFlowScope.componentProperties.myTeamExpanded ? '3x1' : '1x1'}"
rendered="#{pageFlowScope.componentProperties.myTeam}">
<amx:panelGroupLayout id="pgl9"
layout="vertical"
inlineStyle="margin: 6px; padding: 0px; border: none">
<amx:outputText value="My Team"
id="ot4"
inlineStyle="color: gray"/>
<amx:panelGroupLayout id="pgl1"
layout="horizontal"
scrollPolicy="scroll"
inlineStyle="margin: 0px; padding: 2px; border: none">
<amx:panelGroupLayout id="pgl10"
inlineStyle="margin: 0px; padding: 2px; border: none">
<amx:image id="i8"
source="/images/people/TerryLuca.png"
shortDesc="Terry Luca"/>
<amx:outputText value="Terry Luca"
id="ot9"
inlineStyle="font-size: 12px; color: gray"/>
</amx:panelGroupLayout>
<amx:panelGroupLayout id="pgl11"
inlineStyle="margin: 0px; padding: 2px; border: none">
<amx:image id="i9"
source="/images/people/SusanWong.png"
shortDesc="Susan Wong"/>
<amx:outputText value="Susan Wong"
id="ot12"
inlineStyle="font-size: 12px; color: gray"/>
</amx:panelGroupLayout>
<amx:panelGroupLayout id="pgl12"
inlineStyle="margin: 0px; padding: 2px; border: none">
<amx:image id="i10"
source="/images/people/RaviChouhan.png"
shortDesc="Ravi Chouhan"/>
<amx:outputText value="Ravi Chouhan"
id="ot11"
inlineStyle="font-size: 12px; color: gray"/>
</amx:panelGroupLayout>
<amx:panelGroupLayout id="pgl13"
inlineStyle="margin: 0px; padding: 2px; border: none">
<amx:image id="i11"
source="/images/people/KathyGreen.png"
shortDesc="Kathy Green"/>
<amx:outputText value="Kathy Green"
id="ot10"
inlineStyle="font-size: 12px; color: gray"/>
</amx:panelGroupLayout>
<amx:panelGroupLayout id="pgl16"
inlineStyle="margin: 0px; padding: 2px; border: none">
<amx:image id="i5"
source="/images/people/StellaBaumgardner.png"
shortDesc="Stella Baum"/>
<amx:outputText value="Stella Baum"
id="ot3"
inlineStyle="font-size: 12px; color: gray"/>
</amx:panelGroupLayout>
</amx:panelGroupLayout>
</amx:panelGroupLayout>
</amx:masonryLayoutItem>
<amx:masonryLayoutItem id="mt2"
dimension="#{pageFlowScope.componentProperties.socialExpanded ? '3x1' : '1x1'}"
rendered="#{pageFlowScope.componentProperties.social}">
<amx:panelGroupLayout id="pgl2"
inlineStyle="margin: 6px; padding: 0px; border: none">
<amx:panelGroupLayout id="pgl22"
layout="vertical"
inlineStyle="margin: 0px; padding: 0px; border: none">
<amx:outputText value="Social"
id="ot2"
inlineStyle="color: gray"/>
<amx:spacer id="s5" height="6"/>
<amx:outputText value="New Conversations"
id="ot14"
inlineStyle="color: gray; font-size: 15px"/>
<amx:outputText value="6"
id="ot15"
inlineStyle="font-size:34px; color: #EE8A11"/>
<amx:outputText value="New Followers"
id="ot17"
inlineStyle="color: gray; font-size: 15px"/>
<amx:outputText value="5"
id="ot16"
inlineStyle="font-size:34px; color: #EE8A11"/>
</amx:panelGroupLayout>
</amx:panelGroupLayout>
</amx:masonryLayoutItem>
<amx:masonryLayoutItem id="mt3"
...
</amx:masonryLayoutItem>
</amx:masonryLayout>
アクセサリ・レイアウト・コンポーネントの使用方法
リスト・アイテム子コンポーネント内のリスト・ビューのアクセサリ・レイアウト(accessoryLayout)コンポーネントを使用して、オプションのコンテンツ領域を明らかにするコンテンツの左や右へのドラッグを有効にします。
通常、アクセサリ・レイアウトには、開始および終了の2つの子ファセット・コンポーネントを格納します。ドラッグ・ジェスチャーがファセットの幅を十分に超える場合、そのコンテンツ領域の子コンポーネントの1つのタップをトリガーするようなジェスチャーができます。別のアクセサリ・レイアウトのコンテンツが表示されるとき、または他のコンポーネントにフォーカスが移動したときには、通常、表示されているファセット・コンテンツは非表示になります。ただし、コンテンツがアクセシビリティのトリガーを使用して表示された場合は、フォーカスが移動しても非表示にはなりません。そうでないと、エンド・ユーザーがそのコンテンツ領域内のリンクを使用できません。
注意:
アクセシビリティ・スクリーン・リーダー・モードでiOS、AndroidまたはWindowsデバイスを使用する場合、アクセサリ・レイアウト・コンポーネントは予期したとおりに動作しません。追加アクション・アイテムを表示するスワイプ・ジェスチャーは実行できません。
アクセサリ・レイアウト・コンポーネントを追加するには:
-
「コンポーネント」ウィンドウで、「MAF AMX」→「レイアウト」を選択し、アクセサリ・レイアウトをMAF AMXページにドラッグ・アンド・ドロップします。
-
必要に応じて、子ファセット・コンポーネントを追加し、それを他のMAF AMX UIコンポーネントに移入します。
-
「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。
次の例は、MAF AMXファイルで定義されているaccessoryLayout要素と、その子コンポーネントとして使用されている開始と終了のファセットを示しています。
<amx:listView id="lv1">
<amx:listItem id="liSimple">
<amx:showPopupBehavior popupId="itemPopup"
type="action"
alignId="pp1"
align="overlapMiddleCenter"/>
<amx:accessoryLayout id="alSimple"
rendered="#{pageFlowScope.componentProperties.rendered}"
inlineStyle="#{pageFlowScope.componentProperties.inlineStyle}"
styleClass="#{pageFlowScope.componentProperties.styleClass}"
contentStyle="#{pageFlowScope.componentProperties.contentStyle}"
contentClass="#{pageFlowScope.componentProperties.contentClass}"
startDesc="#{pageFlowScope.componentProperties.startDesc}"
startWidth="#{pageFlowScope.componentProperties.startWidth}"
startStyle="#{pageFlowScope.componentProperties.startStyle}"
startClass="#{pageFlowScope.componentProperties.startClass}"
startFullTriggerSelector="#{pageFlowScope.componentProperties.
startFullTriggerSelector}"
endDesc="#{pageFlowScope.componentProperties.endDesc}"
endWidth="#{pageFlowScope.componentProperties.endWidth}"
endStyle="#{pageFlowScope.componentProperties.endStyle}"
endClass="#{pageFlowScope.componentProperties.endClass}"
endFullTriggerSelector="#{pageFlowScope.componentProperties.
endFullTriggerSelector}">
<amx:facet name="start">
<amx:commandLink id="clStartSimple"
text="Start"
styleClass="full-trigger">
<amx:showPopupBehavior popupId="startPopup"
type="action"
alignId="pp1"
align="overlapMiddleCenter"/>
</amx:commandLink>
</amx:facet>
<amx:facet name="end">
<amx:commandLink id="clEndSimple"
text="End"
styleClass="full-trigger">
<amx:showPopupBehavior popupId="endPopup"
type="action"
alignId="pp1"
align="overlapMiddleCenter"/>
</amx:commandLink>
</amx:facet>
<outputText id="otContentSimple" value="Simple example"/>
</amx:accessoryLayout>
</amx:listItem>
...
</amx:listView>ジェスチャーの完了でリンクのいくつかを非表示にするのが目的ならば、commandLink要素のstyleClass属性をadfmf-accessoryLayout-hideWhenFullに設定します。
その他の例は、開発コンピュータのjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイルにあるCompGalleryアプリケーションを参照してください。
デッキ・コンポーネントの使用方法
デック(deck)コンポーネントは、一度に1つの子コンポーネントを示すコンテナを表します。表示される子コンポーネント(displayedChild属性によって定義)の別の子コンポーネントへの遷移は、アニメーションの形式をとる遷移(transition)操作により有効になります。遷移は、フェードイン、スライディングおよび別の方向からのフリップと、子コンポーネントの非表示および表示によって発生します。
デッキは、前後に移動できます。
デック・コンポーネントを追加するには、次の手順を実行します。
-
「コンポーネント」ウィンドウで、MAF AMX→「レイアウト」を選択し、デッキをMAF AMXページにドラッグ・アンド・ドロップします。
-
必要な数の遷移操作および子UIコンポーネントをデック・コンポーネントに挿入します。
-
「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。
次の例は、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>
フレックス・レイアウト・コンポーネントの使用方法
フレックス・レイアウト(flexLayout)コンポーネントは、使用可能なスペースに応じて、その子コンポーネントの拡大、縮小、およびラップを可能とする水平または垂直いずれかの柔軟なフローを提供します。ネストされたフレックス・レイアウト・コンポーネントを作成できます。
このコンポーネントは、CSSで定義されている柔軟なボックス・レイアウトに基づいており、そのプロパティのサブセットをサポートしています。W3CのWebサイト(http://www.w3.org/TR/css-flexbox-1/)を参照してください。
フレックス・レイアウト・コンポーネントを追加するには:
-
「コンポーネント」ウィンドウで、MAF AMX→「レイアウト」とナビゲートし、フレックス・レイアウトをMAF AMXページにドラッグ・アンド・ドロップします。
-
フレックス・レイアウト・コンポーネントに、他のフレックス・レイアウト・コンポーネントを含め、必要な数の子UIコンポーネントを挿入します。
-
「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。
次の例は、MAF AMXファイルで定義されているflexLayout要素とその子を示しています。
<amx:flexLayout id="fl1"
itemFlexibility="equal"
orientation="#{pageFlowScope.componentProperties.layoutOrientation}"
rendered="#{pageFlowScope.componentProperties.fl1Rendered}">
<amx:panelStretchLayout inlineStyle="background-color: #ff0000; text-align: center;"
rendered="#{pageFlowScope.componentProperties.p1Rendered}">
<amx:facet name="center">
<amx:outputText value="1" inlineStyle="font-size: 36px"/>
</amx:facet>
</amx:panelStretchLayout>
<amx:panelStretchLayout inlineStyle="background-color: #00ff00; text-align: center;"
rendered="#{pageFlowScope.componentProperties.p2Rendered}">
<amx:facet name="center">
<amx:outputText value="2" inlineStyle="font-size: 36px"/>
</amx:facet>
</amx:panelStretchLayout>
</amx:flexLayout>フラグメント・コンポーネントの使用方法
フラグメント(fragment)コンポーネントによってMAF AMXページ・コンテンツの共有が可能になります。このコンポーネントは、MAF AMXフラグメント・ファイルとともに使用されます。「ページ・コンテンツの共有」を参照してください。
フラグメント・コンポーネントを追加するには:
- オプションで、「構造」ビューを使用して、属性、属性リスト、ファセットなどの子コンポーネントを追加します。
次の例は、MAF AMXページに追加されたfragment要素を示しています。
<?xml version="1.0" encoding="UTF-8" ?> <amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:amx="http://xmlns.oracle.com/adf/mf/amx" xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt"> <amx:panelPage id="pp1"> <amx:panelGroupLayout layout="vertical" id="itemPgl" styleClass="amx-style-groupbox"> <amx:fragment id="f1" src="/simpleFragment.amxf" <amx:attribute id="a1" name="text" value="defaultValue" /> <amx:facet name="facet"> <amx:outputText id="ot5" value="Fragment"/> </amx:facet> </amx:fragment> </amx:panelGroupLayout> </amx:panelPage> </amx:view>
次の例は、対応するMAF AMXフラグメント・ファイルを示しています。
<amx:fragmentDef
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">
<fragment xmlns="http://xmlns.oracle.com/adf/mf/amx/fragment" id="f1">
<description id="d1">Description of the fragment</description>
<facet id="f2">
<description id="d4">Description of the facet</description>
<facet-name id="f3">facet1</facet-name>
</facet>
<attribute id="a1">
<description id="d2">Description of an attribute</description>
<attribute-name id="a2">text</attribute-name>
<attribute-type id="at1">String</attribute-type>
<default-value id="d3">defaultValue</default-value>
</attribute>
</fragment>
<amx:panelGroupLayout id="pgl1">
<amx:facetRef facetName="facet1" id="fr1"/>
<amx:outputText value="#{text}" id="ot1"/>
</amx:panelGroupLayout>
</amx:fragmentDef>
FragmentDemoという名前のMAFサンプル・アプリケーションは、フラグメントの作成方法および使用方法を示しています。このサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
UIコンポーネントの作成と使用方法
MAFでは、MAF AMXアプリケーション機能を開発する際に使用できる様々なUIコンポーネントが提供されます。
次のUIコンポーネントを使用できます。
-
入力テキスト(「入力テキスト・コンポーネントの使用方法」を参照)
-
入力数値スライダ(「入力数値スライダ・コンポーネントの使用方法」を参照)
-
出力テキスト(「出力テキスト・コンポーネントの使用方法」を参照)
-
ボタン(「ボタンの使用方法」を参照)
-
リンク(「リンクの使用方法」を参照)
-
イメージ(「イメージの表示方法」を参照)
-
チェック・ボックス(「チェック・ボックス・コンポーネントの使用方法」を参照)
-
チェック・ボックスを複数選択(「チェック・ボックスを複数選択コンポーネントの使用方法」を参照)
-
選択肢を複数選択(「選択肢を複数選択コンポーネントの使用方法」を参照)
-
ブール・スイッチ(「ブール・スイッチ・コンポーネントの使用方法」を参照)
-
選択肢(「選択肢コンポーネントの使用方法」を参照)
-
選択ボタン(「選択ボタン・コンポーネントの使用方法」を参照)
-
ラジオ・ボタン(「ラジオ・ボタン・コンポーネントの使用方法」を参照)
-
リスト・ビュー(「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」を参照)
-
カルーセル(「カルーセル・コンポーネントの使用方法」を参照)
-
フィルム・ストリップ(「フィルム・ストリップ・コンポーネントの使用方法」を参照)
-
Verbatim (「Verbatimコンポーネントの使用方法」を参照)
-
出力HTML (「出力HTMLコンポーネントの使用方法」を参照)
-
イテレータ(「反復の有効化方法」を参照)
-
リフレッシュ・コンテナ (「UIコンポーネントのコンテンツのリフレッシュ方法」を参照)
注意:
MAF 2.5.1リリース以降、HTML5の日付と時間のコントロールのサポートを追加し、カスタムのamx:inputdate時間コントロールのサポートを廃止しました。MAF AMXアプリケーション機能を開発する際は、UIコンポーネントの子としてサポートされる、操作、リスナー・タイプ・コンポーネント、コンバータなど、次のその他のコンポーネントも使用できます。
-
アクション・リスナー(「アクション・リスナーの使用方法」を参照)
-
プロパティ・リスナーの設定(「プロパティ・リスナーの設定の使用方法」を参照)
-
クライアント・リスナー(「クライアント・リスナーの使用方法」を参照)
-
日時の変換(「日時の変換方法」を参照)
-
数値の変換(「数値の変換方法」を参照)
-
ナビゲーション・ドラッグ動作(「ドラッグ・ナビゲーションの有効化」を参照)
-
ロード・インジケータ動作(「ロード・インジケータの使用方法」を参照)
-
システム・アクション動作(「Androidシステムの戻るボタンの動作を構成する方法」を参照)
UIコンポーネントを追加するには、それを「コンポーネント」ウィンドウからMAF AMXページにドラッグ・アンド・ドロップします(「MAF AMXページにUIコンポーネントを追加する方法」を参照)。次に、「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します(「UIコンポーネントの構成」を参照)。各特定コンポーネントの属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
注意:
MAF AMXページで、レイアウト・コンポーネント内にUIコンポーネントを配置します(「ページ・レイアウトの設計」を参照)。<dvtm>ネームスペースの下で宣言するデータ視覚化コンポーネントを除き、UI要素は<amx>>ネームスペースの下で宣言します。
いくつかのUIコンポーネントにはイベント・リスナーを追加できます。「イベント・リスナーの使用方法」を参照してください。イベント・リスナーは、iOSおよびAndroidのどちらのデバイスでもMAF AMXの実行時の記述のためにコンポーネントに適用できますが、それらのリスナーは設計時には何の効果も持ちません。
これらのUIコンポーネントにおけるアクセシビリティのサポートの詳細は、「MAFのアクセシビリティのサポートの理解」を参照してください。
注意:
MAFは、デザインタイムにEL式を評価しません。コンポーネントの属性の値が式に設定されている場合、この値はJDeveloperのプレビューでは式として表示され、実行時のコンポーネントの表示は異なる場合があります。
MAF AMXを使用してiOSプラットフォームとAndroid 4.2以降のプラットフォームの両方に対応して作成されたユーザー・インタフェースは、言語環境が左から右(LTR)、右から左(RTL)のいずれであっても正しく表示されます。後者の場合、コンポーネントは画面の左側ではなく右側から表示されます。
CompGalleryという名前のMAFサンプル・アプリケーションは、MAF AMX UIコンポーネントの作成方法および構成方法を示しています。UILayoutDemoという名前のもう1つのサンプル・アプリケーションは、MAF AMXページでのコンポーネントのレイアウト方法を示しています。これらのサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/SamplesディレクトリのPublicSamples.zipファイル内にあります。
入力テキスト・コンポーネントの使用方法
入力テキスト(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" /> -
テキスト・クリア・アイコンを表示します。
<amx:inputText id="inputText1" label="Label" showClear="on" value="text"/>
showClear属性がonに設定されている入力テキストコンポーネントを図に示します。
inputType属性によって、コンポーネントでユーザー入力がどのように(テキスト(デフォルト)、電子メール・アドレス、数値、電話番号、URLのいずれかとして)解釈されるのかを定義できます。これらの入力タイプは、HTML5によって許容される値に基づいています。
入力テキスト・コンポーネントに入力される数値の変換や日時の値の変換を有効にするには、数値の変換(「数値の変換方法」を参照)および日時の変換(「日時の変換方法」を参照)コンポーネントを使用できます。
次にその例を示します。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
いくつかのモバイル・デバイスでは、エンド・ユーザーが入力テキスト・フィールドをタップすると、キーボードが表示(スライドアップ)されます。入力テキストがMAF AMXページの唯一のコンポーネントである場合、ページがロードされるときに、デフォルトで入力フォーカスはこのフィールド上に配置され、キーボードが表示されます。
複数行入力テキストは、それが唯一のコンポーネントである場合、セカンダリ・ページに表示されることがあります。その場合、ページがロードされてキーボードが表示されたときに複数行入力テキストがフォーカスを受け取ります。
iOSデバイスとAndroidデバイスでは、入力テキスト・コンポーネントのレンダリングおよび動作は異なります。iPhoneおよびiPadでは、入力テキスト・コンポーネントが表示されるときに境界線がある場合とない場合があります。
入力テキスト・コンポーネントを作成する際は、次の点を考慮してください。
-
コンテンツを入力または編集するには、エンド・ユーザーはフィールド内をタップする必要があります。それにより、タップした場所に点滅する挿入カーソルが表示され、エンド・ユーザーがコンテンツを編集できるようになります。フィールドにコンテンツが含まれていない場合、挿入カーソルはフィールドの先頭に配置されます。
-
入力テキスト・コンポーネントによって表されるフィールドには、通常、プロンプトとして使用されるデフォルト・テキストが含まれていることがあります。エンド・ユーザーがそのようなフィールド内でキーボードのキーをタップすると、編集モードになったときにそのデフォルト・テキストがクリアされます。この動作は、入力テキストの
hintText属性を使用して有効化および構成されます。 -
入力テキスト・コンポーネントによって表されるフィールドには、選択済の外観はありません。選択は、フィールド内の点滅する挿入カーソルによって示されます。
-
エンド・ユーザーがフィールドに収まる数を超えたテキストを入力すると、タイピングの続行に従って一度に1文字ずつテキスト・コンテンツが左にシフトします。
-
複数行入力テキスト・コンポーネントは、任意の高さの長方形としてレンダリングされます。このコンポーネントでは、コンテンツが大きすぎてフィールドの境界内に収まらない場合のスクロールがサポートされています。テキスト領域が一杯になるとテキストの行が上にスクロールし、新しい行のテキストが追加されます。指定された表示領域に表示できる数よりも多くの行がある場合、エンド・ユーザーは上または下にフリックしてテキストの行をスクロールできます。コンポーネント内にスクロールバーが表示されてその領域がスクロール可能であることを示します。
-
パスワード・フィールドは入力された各文字を一時的にエコーし、その後、その文字をドットに変換してパスワードを保護します。
-
iOSでの入力テキスト・コンポーネントの外観および動作はカスタマイズ可能です(「入力テキスト・コンポーネントのカスタマイズ」を参照)。
- ユーザーが入力したテキストをクリアするためのテキスト・クリア・アイコンを表示するには、図に示すように、
showClear属性をonに設定します。showClear属性がoffに設定されている場合は、テキスト・クリア・アイコンは表示されません。showClear属性がautoに設定されている場合は、inputTextの動作が、keyboardDismiss属性に対して設定されている内容と一致するようオーバーライドされます。keyboardDismiss属性がsearchに設定されている場合は、テキスト・クリア・アイコンは表示されます。
入力テキスト・コンポーネントのカスタマイズ
MAF AMXは、iOSデバイスでの入力時の先頭大文字化および修正のサポートを提供します。また、フィールドを移動用に使用するか、検索用に使用するかを示すことができます。使用中のオペレーティング・システムとキーボードのバージョンによっては、モバイル・デバイスのソフト・キーパッドの右下にある「return」ボタン(次の図を参照)の表示が「Go」または「Search」ボタンに変更される場合があります(図14-16を参照)。また、ボタンがアクティブ化されると、単一行入力テキスト・コンポーネントに対して、DataChangeEventがトリガーされます。
入力テキスト・コンポーネントの属性を表にリストします。これらの属性を使用して、そのコンポーネントの外観および動作と、入力テキストによって表されるフィールドへの値の入力に使用されるソフト・キーパッドをカスタマイズできます。
表14-3 入力テキスト・コンポーネントの入力およびカスタマイズ属性
| 属性 | 値 | 説明 |
|---|---|---|
|
|
|
テキスト・フィールドを使用する方法を示します。
一部のオペレーティング・システムまたはキーボードでは、キーボードへの特別な処理を行う場合があります。それ以外では視覚的な区別が示されないためです。たとえば、単一行入力テキスト・フィールドについては、「return」ボタンが表示されるかわりに、「Go」または「Search」ボタンに置き換えられます。スキンによって、入力フィールドの外観も変更される場合があります。 |
|
|
|
入力テキストによって表されるフィールドの編集中に、iOSで値を大文字表記するための特別な処理をリクエストします。  このプロパティの設定はAndroidには影響しません。 |
|
|
|
入力テキストによって表されるフィールドの編集中に、iOSで値を修正するための特別な処理をリクエストします。  このプロパティの設定はAndroidには影響しません。 |
iOSデバイスのシミュレータでは、自動大文字化および自動修正のサポートが限定されているため、この機能をiOSデバイスでテストする必要があります。
入力数値スライダ・コンポーネントの使用方法
入力数値スライダ(inputNumberSlider)コンポーネントは、キーを使用して値を入力するかわりにスライダを使用して値の範囲から数値を選択できるようにします。スライダの溝またはトラックの塗り潰されている部分が、現在の値を視覚的に表しています。
スライダの値を数値的に示すには、出力または入力テキスト・コンポーネントとともに入力数値スライダを使用できます。入力テキスト・コンポーネントではスライダ値を直接入力することもできます。エンド・ユーザーが入力テキスト・フィールドをタップすると、数値モードのキーボードがスライドアップします。このキーボードは、スライドダウン・ボタンを使用するか、スライダ・コンポーネントからタップすることにより消去できます。
入力数値スライダ・コンポーネントは、常に、コンポーネントの定義済範囲内の最大値および最小値を表示します。
注意:
入力数値スライダ・コンポーネントは、正確な数値入力が必要な場合や値の範囲が広い場合(たとえば、0から1000)は使用しないでください。
次の例は、MAF AMXファイルで定義されたinputNumberSlider要素を示しています。
<amx:inputNumberSlider id="slider1" value="#{myBean.count}"/>
「プレビュー」ペインに表示されている入力数値スライダ・コンポーネントを図に示します。このコンポーネントのパラメータは、次のように設定されます。
<amx:inputNumberSlider id="inputNumberSlider1" label="Input Number" minimum="0" maximum="20" stepSize="1" value="10"/>
入力数値スライダ・コンポーネントに入力される数値の変換を有効にするには、数値の変換コンポーネント(「数値の変換方法」を参照)を使用します。
次にその例を示します。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
他のMAF AMX UIコンポーネントと同様に、入力数値スライダ・コンポーネントには通常の状態と選択済状態があります。コンポーネントは、いつでもタッチされたときに選択済状態になります。エンド・ユーザーは、スライダ値を変更するには、タッチしてからスライダ・ボタンを操作します。
入力数値スライダ・コンポーネントには、オプションのimageLeft属性およびimageRight属性があり、これらは、エンド・ユーザーに追加情報を提供するためにスライダのいずれかの側に表示可能なイメージを示します。
出力テキスト・コンポーネントの使用方法
MAF AMXは、テキストを表示するラベルとして使用するための出力テキスト(outputText)コンポーネントを提供しています。
次の例は、MAF AMXファイルで定義されたoutputText要素を示しています。
<amx:outputText id="ot1"
value="output"
styleClass="#{pageFlowScope.pStyleClass}"/>
「プレビュー」ペインに表示されている出力テキスト・コンポーネントを図に示します。
出力テキスト・コンポーネントの数値および日時関連データの変換を容易にするには、数値の変換(「数値の変換方法」を参照)および日時の変換(「日時の変換方法」を参照)コンバータを使用します。
次にその例を示します。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
ボタンの使用方法
ボタン(commandButton)コンポーネントは、アクション(たとえば、保存、取消し、送信)をトリガーするため、およびアプリケーション内で他のページへのナビゲーション(たとえば、戻るの場合は「戻るボタン・ナビゲーションの有効化」を参照)を有効化するために使用します。
ボタンは、次の方法のいずれかで使用できます。
-
テキスト・ラベル付きボタン。
-
テキスト・ラベルおよびイメージ・アイコン付きボタン。
注意:
アイコン・イメージと配置(テキスト・ラベルの左または右)を定義できます。
-
イメージ・アイコンのみが付いたボタン(たとえば、レコードを追加または削除するための + および - ボタン)。
MAFでは、次の3つの表示領域に対して1つのデフォルト・ボタン・タイプがサポートされています。
-
最上部のヘッダー・バーに表示されるボタン。MAF AMXページでは、ヘッダーは、ヘッダー、プライマリおよびセカンダリの各ファセットと組み合せたパネル・ページ・コンポーネント(「パネル・ページ・コンポーネントの使用方法」を参照)によって表されます(iPhoneではこれが一般的です)。
-
ヘッダー・ファセットには、ページ・タイトルが含まれています。
-
プライマリ・アクション・ファセットは、 ヘッダー・バーの左隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
-
セカンダリ・アクション・ファセットは、ヘッダー・バーの右隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
-
-
ページのコンテンツ領域に表示されるボタン。
-
ページのフッター・バーに表示されるボタン。MAF AMXページでは、フッターは、フッター・ファセットと組み合せたパネル・ページ・コンポーネントによって表されます(「パネル・ページ・コンポーネントの使用方法」を参照)。
-
フッター・ファセットは、コンテンツ領域の下に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
-
どのタイプでも、すべてのボタン・コンポーネントには次の3つの状態があります。
-
標準。
-
アクティブ: ボタンがエンド・ユーザーによってタップまたはタッチされたときの外観を表します。ボタンがタップされた(タッチされてリリースされた)ときに、ボタン・アクションが実行されます。タッチしたときにアクティブ化された外観が表示され、リリースしたときにアクションが実行されます。エンド・ユーザーがボタンにタッチした後に指をドラッグしてボタンから離した場合、アクションは実行されません。ただし、ボタンにタッチしている間中、アクティブ化された外観が表示されます。
-
無効。
ボタン・コンポーネントの外観は、adfmf-commandButton-<style>に設定したそのstyleClass属性によって定義されます。表に示すどのスタイルでも、MAF AMXページ内の有効な任意の場所に配置されているボタンに適用できます。
表14-4 主なボタン・スタイル
| ボタン・スタイル名 | 説明 |
|---|---|
|
デフォルト |
次の場所に配置されているボタンのデフォルト・スタイル
|
|
戻る |
いずれかのパネル・ページ・ファセット(プライマリ、セカンダリ、ヘッダー、フッター)に配置されるボタンの戻るスタイル。このスタイルを、デフォルト・ボタンに適用すると、ページに戻るという外観を表示できます。このボタン・スタイルは、Springboardに戻るまたはページに戻るボタンによく使用されます。 「戻るスタイル・ボタンの表示」を参照してください。 |
|
強調表示 |
いずれかのパネル・ページ・ファセット(プライマリ、セカンダリ、ヘッダー、フッター)またはMAF AMXページのコンテンツ領域に配置されるボタンの強調表示スタイル。このスタイルをボタンに追加すると、保存(または完了)ボタンで一般的なiPhoneボタンの外観を提供できます。 「強調表示スタイル・ボタンの表示」を参照してください。 |
|
アラート |
アラート・スタイルは削除の外観をボタンに追加します。「アラート・スタイル・ボタンの表示」を参照してください。 |
ボタンに適用して太い角丸の境界線でボタンを修飾できる角丸スタイル(adfmf-commandButton-rounded)があります(図を参照)。このスタイルは他のどのようなスタイルとも組み合せて定義できます。
MAF AMXには、多数の追加の装飾スタイルが用意されています(「追加のボタン・スタイルの使用」参照)。
MAF AMXでのボタン・コンポーネントの子の操作および属性の処理には、特定の順序があります。「操作と属性の処理順序に関する必知事項」を参照してください。
デフォルト・スタイル・ボタンの表示
「パネル・ページ」ファセットまたはコンテンツ領域内に配置可能な様々なデフォルト・スタイル・ボタンを次に示します。
-
テキスト・ラベルのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。
-
イメージ・アイコンのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。
次の例は、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>
次の例も、MAF AMXファイルで宣言されたcommandButton要素を示しています。この要素は、イメージ・アイコンの付いたデフォルトのボタンを表します。
<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>
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
戻るスタイル・ボタンの表示
「パネル・ページ」ファセットまたはコンテンツ領域内に配置される様々な戻るスタイル・ボタンを次に示します。
-
テキスト・ラベルのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。
-
イメージ・アイコンのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。
次の例は、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によって戻る矢印スタイル設定が自動的に適用されます。
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
強調表示スタイル・ボタンの表示
他のタイプのボタンと同様に、「パネル・ページ」ファセットまたはコンテンツ領域内に配置される強調表示スタイル・ボタンには、「標準」、「アクティブ」または「無効」の状態があります。
次の例は、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>
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
アラート・スタイル・ボタンの表示
「パネル・ページ」内に配置されるアラート・スタイル・ボタンには、「標準」、「アクティブ」または「無効」の状態があります。
次の例は、MAF AMXファイルで宣言されているcommandButton要素を示しています。この要素は、テキスト・ラベルの付いたアラート・ボタンを表します。
<amx:commandButton id="cb1"
text="Delete"
actionListener="#{myBean.delete}"
styleClass="adfmf-commandButton-alert" />
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
追加のボタン・スタイルの使用方法
MAF AMXには、次の追加のボタン・スタイルが用意されています。
-
暗いスタイル
-
明るいスタイル
-
小さいスタイル
-
大きいスタイル
-
強調表示スタイル
-
確認スタイル
-
2種類の「代替」スタイル
アプリケーション内でのボタンの使用方法
MAFアプリケーションでは、次のコンテキスト内でボタン・コンポーネントを使用できます。
-
特定のアクションを実行するためのコンテンツ領域
-
ポップアップスタイルのアラート・メッセージ
ナビゲーション・バー
MAFでは、ナビゲーション・バーで使用する標準ボタンを作成できます。
-
編集ボタンで、エンド・ユーザーは編集またはコンテンツ操作モードに入ることができます。
-
取消ボタンで、エンド・ユーザーは、変更を保存することなく編集またはコンテンツ操作モードを終了できます。
-
保存ボタンで、エンド・ユーザーは、変更を保存して編集またはコンテンツ操作モードを終了できます。
-
完了ボタンで、エンド・ユーザーは、変更があれば保存して現在のモードを終了できます。
-
元に戻すボタンで、エンド・ユーザーは最後のアクションを元に戻すことができます。
-
やり直しボタンで、エンド・ユーザーは最後の元に戻したアクションをやり直すことができます。
-
戻るボタンで、エンド・ユーザーはSpringboardに戻ることができます。
-
ページに戻るボタンで、エンド・ユーザーはボタン・テキスト・ラベルによって識別されるページに戻ることができます。
-
追加ボタンで、エンド・ユーザーは新しいオブジェクトを追加または作成できます。
コンテンツ領域
ページのコンテンツ領域内に配置されたボタンは、そのページ内のボタンの場所およびコンテキストに指定されている特定のアクションを実行します。これらのボタンは、ナビゲーション・バーに配置されているボタンとは異なる外観を持っている場合があります。
戻るボタン・ナビゲーションの有効化
MAF AMXでは、前に訪問したページに戻るデフォルト動作を持つ戻るボタンを使用した移動がサポートされています。「UIコンポーネントを使用したアクション結果の指定方法」を参照してください。
__backナビゲーションを備えたパネル・ページのプライマリ・ファセットにボタン・コンポーネントを追加すると、そのボタンには、戻る矢印の視覚的スタイリングが自動的に設定されます(「戻るスタイル・ボタンの表示」を参照)。スタイル設定を無効にするには、styleClass属性をamx-commandButton-normalに設定します。
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
リンクの使用方法
リンク(commandLink)コンポーネントは、アクションをトリガーするためおよび他のビューへのナビゲーションを有効化するために使用します。
リンク・コンポーネントは、その子として任意のタイプのコンポーネントを定義できます。プロパティ・リスナーの設定(「プロパティ・リスナーの設定の使用方法」を参照)、アクション・リスナー(「アクション・リスナーの使用方法」を参照)、ポップアップ表示動作、ポップアップを閉じる動作(「ポップアップ・コンポーネントの使用方法」を参照)および検証動作(「入力の検証」を参照)などのコンポーネントをリンク・コンポーネントの子として使用することで、クリックおよびジェスチャーを実行できるアクション可能な領域を作成できます。
リンク内にイメージ・コンポーネントを配置することで(「イメージの表示方法」を参照)、クリック可能イメージを作成できます。
次の例は、MAF AMXファイルで宣言された基本的なcommandLink要素を示しています。
<amx:commandLink id="cl1"
text="linked"
action="gotolink"
actionListener="#{myBean.doSomething}"/>
「プレビュー」ペインに表示されている基本的なリンク・コンポーネントを図に示します。
次の例は、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>
フォーム内に配置され、「プレビュー」ペインに表示されているリンク・コンポーネントを図に示します。
MAF AMXでのリンク・コンポーネントの子の操作および属性の処理には、特定の順序があります。「操作と属性の処理順序に関する必知事項」を参照してください。
MAF AMXでは、リンクと類似していますが、ページ間のナビゲーションは許可されない別のコンポーネントであるリンク(実行) (goLink)コンポーネントが提供されています。このコンポーネントを使用して、外部ページへのリンクを有効化できます。「プレビュー」ペインに表示されているリンク(実行)コンポーネントを図に示します。このコンポーネントのパラメータは、次のように設定されます。
<amx:goLink id="goLink1" text="Go Link" url="http://example.com"/>
イメージは、リンク(実行)コンポーネントの子として指定できる唯一のコンポーネントです。
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
イメージの表示方法
MAF AMXでは、ビットマップによって表されるイメージ(image)コンポーネントを使用して、iOSおよびAndroidデバイス上にイメージを表示できます。
ボタンおよびリスト・ビューにイメージを配置するだけでなく、それをリンク・コンポーネント内に配置して(「リンクの使用方法」を参照)クリック可能イメージを作成できます。
次の例は、MAF AMXファイルのimage要素定義を示しています。
<amx:image id="i1"
styleClass="prod-thumb"
source="images/img-big-#{pageFlowScope.product.uid}.png" />
イメージ・ファイルのURIに加えて、ソースには、REST Webサービスからロードされたイメージに必要なbase 64でエンコードされたイメージ・データを含めることができます。data:image/gif;base64,接頭辞を使用して、このようなイメージのソースを定義し、image要素のsource属性を次のように設定します。
<amx:image id="i2" source="data:image/gif;base64,#{row.ImageBase64}" />
GIFファイルに提供される値は、イメージ・タイプによって異なります。
Androidプラットフォームでサポートされているフォーマットは次のとおりです。
-
GIF
-
JPEG
-
PNG
-
BMP
iOSプラットフォームでサポートされているフォーマットは次のとおりです。
-
PNG
例については、次を参照してください。
開発コンピュータのjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
チェックボックス・コンポーネントの使用方法
チェック・ボックス(selectBooleanCheckbox)コンポーネントは、trueまたはfalseの値からの単一選択(選択済状態と選択解除状態の間で切り替えできる)を可能にするために作成するチェックボックスを表します。
チェックボックス・コンポーネントのlabel属性を使用するとチェックボックスの左側にテキストを配置でき、text属性を使用すると右側にテキストを配置できます。
次の例は、MAF AMXファイルで宣言されたselectBooleanCheckbox要素を示しています。
<amx:selectBooleanCheckbox id="check1"
label="Agree to the terms:"
value="#{myBean.bool1}"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/>
「プレビュー」ペインに表示される選択解除されたチェックボックス・コンポーネントを図に示します。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectBooleanCheckbox id="selectBooleanCheckbox1"
label="Checkbox"
value="false"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/>
「プレビュー」ペインに表示される選択済のチェックボックス・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectBooleanCheckbox id="selectBooleanCheckbox1"
label="Checkbox"
value="true"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/>
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
iOSプラットフォームでのチェックボックス・コンポーネントのサポート
iOSでは、ネイティブ・チェックボックス・コンポーネントはサポートされていません。ブール・スイッチは、通常、プロパティ・ページで使用され、ブール選択を可能にします(「ブール・スイッチ・コンポーネントの使用方法」を参照)。
チェックボックスを複数選択コンポーネントの使用方法
チェック・ボックスを複数選択(selectManyCheckbox)コンポーネントは、trueまたはfalseの値の複数選択を可能にするために使用するチェック・ボックスのグループを表します。これにより、グループ内の各チェックボックスの選択済と選択解除の切替えが可能になります。この選択メカニズムは、チェック・ボックスを複数選択コンポーネントに含まれている、アイテムの選択コンポーネント(「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
注意:
チェックボックスの複数選択コンポーネントには、アイテムの選択コンポーネントを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>
「プレビュー」ペインに表示されているチェックボックスを複数選択コンポーネントを図に示します。このコンポーネントのパラメータは、次のように設定されます。
<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>
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
チェックボックスを複数選択コンポーネントとユーザーとの対話に関する必知事項
MAF AMXでは、ポップアップ・スタイル(デフォルト)とリスト・スタイル(使用可能な選択肢の数がデバイスの画面サイズを超えている場合に使用される)の、チェックボックスを複数選択コンポーネントを表示するための2つの代替方法が提供されています。
iPhoneとiPadの両方でのポップアップスタイルのチェックボックスを複数選択コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストがポップアップに表示されます。選択を行うには、エンド・ユーザーは1つ以上の選択肢をタップします。選択内容を保存するには、エンド・ユーザーはポップアップの外をタップするか、閉じるボタン( x )を使用してポップアップを閉じます。
ポップアップを閉じるときに、コンポーネントに表示されている値が、選択済の値に更新されます。
選択肢の数がデバイスのサイズを超える場合、スクロール可能なリスト・ビュー(「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」を参照)を含むフルページ・ポップアップが生成されます。
iPhoneとiPadの両方でのリストスタイルのチェックボックスを複数選択コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストが表示されます。選択を行うには、エンド・ユーザーは上下にスクロールして使用可能な選択肢を参照し、1つ以上の選択肢をタップします。選択内容を保存するには、エンド・ユーザーは閉じるボタン( x )をタップします。
リストを閉じるときに、コンポーネントに表示されている値が、選択済の値に更新されます。
注意:
どちらの場合も、選択を取り消すメカニズムは提供されていません。
選択肢コンポーネントの使用方法
選択肢(selectOneChoice)コンポーネントは、リストからの単一の値の選択を可能にするために使用するコンボ・ボックスを表します。この選択メカニズムは、選択肢コンポーネントに含まれている、アイテムの選択コンポーネント(「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
注意:
選択肢コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。
次の例は、MAF AMXファイルのselectOneChoice要素の定義をselectItemsサブ要素とともに示しています。
<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><amx:selectOneChoice id="choice1"
label="Your state:"
value="#{myBean.myState}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}">
<amx:selectItems id="selectItems1" value="myBean.allStates"/>
</amx:selectOneChoice>
「プレビュー」ペインに表示されている選択肢コンポーネントを図に示します。このコンポーネントのパラメータは、次のように設定されます。
<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>
selectOneChoice要素の初期値はnullにできません。かわりに、選択肢を1つ選択コンポーネントに表示された値に設定する必要があります。これを行うには、必ず、モデル(Beanまたはバインディング)の値を、JDeveloperのデザインタイムで表示されるデフォルト値と同一にする必要があります。
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
iOSプラットフォームでの選択肢コンポーネントとユーザーとの対話に関する必知事項
MAF AMXでは、選択肢コンポーネントを表示するため、ポップアップ・スタイルとドロップダウン・スタイルの2つの代替方法が提供されています。
iPhoneでのネイティブ選択肢コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると、選択肢のリストが、デフォルトで最初のオプションが選択された状態で表示されます。選択を行うには、エンド・ユーザーは上下にスクロールして使用可能な選択肢を参照します。選択内容を保存するには、エンド・ユーザーはツール・バーの「終了」をタップします。
iPadでは、ユーザーの対話は、次の点を除いてiPhoneにおける対話と同様です。
-
選択のリストは、ポップアップ・ダイアログに表示されます。
-
iPadのスタイリングが選択のリストの周囲に実装され、リストのソースを示すためにノッチが使用されます。
アイテムを選択しないで選択のリストを閉じるには、エンド・ユーザーはポップアップ・ダイアログの外をタップする必要があります。
注意:
選択のリストおよびツール・バーを表示するためのUIは、ブラウザにネイティブであり、CSSを使用してスタイリングすることはできません。
選択肢コンポーネント内のリスト値は、無効として表示できます。
選択肢の数がデバイスの表示サイズを超える場合、ネイティブな方法でスクロール可能なリスト・ページが生成されます。
Androidプラットフォームでの選択肢コンポーネントとユーザーとの対話に関する必知事項
Androidデバイスでのネイティブ選択肢コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると、ポップアップ・ダイアログ形式の選択肢のリストが表示されます。選択肢の数がデバイスのサイズ内に収まる場合は単純なポップアップが表示されます。この場合次のようになります。
-
選択リストの1つのアイテムを1回タップすると、そのアイテムが選択され、ポップアップが閉じます。選択内容は選択肢コンポーネント・ラベルに反映されます。
-
ポップアップの外で1回タップするか戻るキーをクリックすると、変更が適用されることなくポップアップが閉じます。
表示される選択肢の数がデバイス・サイズ内に収まらない場合は、ポップアップにスクロール可能リストが含まれます。その場合は次のようになります。
-
選択リストの1つのアイテムを1回タップすると、そのアイテムが選択され、ポップアップが閉じます。選択内容は選択肢コンポーネント・ラベルに反映されます。
-
戻るキーをクリックすると、変更が適用されることなくポップアップが閉じます。
選択肢を複数選択コンポーネントの使用方法
選択肢を複数選択(selectManyChoice)コンポーネントは、リストの複数の値の選択を可能にします。この選択メカニズムは、チェック・ボックスを複数選択コンポーネントに含まれている、アイテムの選択コンポーネント(「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
注意:
チェックボックスを複数選択コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。
次の例は、MAF AMXファイルで宣言されたselectManyChoice要素を示しています。このコンポーネントは、アイテムの選択(selectItem)コンポーネントを子として使用します。
<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>
<amx:selectManyChoice id="check1"
label="Select Shipping Options:"
value="#{myBean.shipping}">
<amx:selectItems id="selectItems1" value="#{myBean.shippingOptions}"/>
</amx:selectManyChoice>
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
すべてのサポートされているデバイスで、「選択肢を複数選択」コンポーネントの外観と動作は、「チェックボックスを複数選択」コンポーネントとほとんど同じです(「チェックボックスを複数選択コンポーネントの使用方法」を参照)。
ブール・スイッチ・コンポーネントの使用方法
ブール・スイッチ(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}"/>
「プレビュー」ペインに表示されているブール・スイッチ・コンポーネントを図に示します。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectBooleanSwitch id="selectBooleanSwitch1"
label="Switch"
value="value1"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/>
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
iOSプラットフォームでのブール・スイッチ・コンポーネントのサポートに関する必知事項
iOSでは、プール・スイッチ・コンポーネントは、属性値を有効化または無効化するために設定ページでよく使用されます。
選択ボタン・コンポーネントの使用方法
選択ボタン(selectOneButton)コンポーネントは、常に1つのボタンがアクティブになっている、アクションをリストするボタン・グループを表します。この選択メカニズムは、選択ボタン・コンポーネントに含まれている、アイテムの選択コンポーネント(「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
注意:
選択ボタン・コンポーネントには、アイテムの選択コンポーネントを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>
「プレビュー」ペインに表示されている選択ボタン・コンポーネントを図に示します。このコンポーネントのパラメータは、次のように設定されます。
<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>
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
ラジオ・ボタン・コンポーネントの使用方法
ラジオ・ボタン(selectOneRadio)コンポーネントは、使用可能な選択肢をリストするラジオ・ボタンのグループを表します。この選択メカニズムは、ラジオ・ボタン・コンポーネントに含まれている、アイテムの選択コンポーネント(「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
注意:
ラジオ・ボタン・コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。
次の例は、MAF AMXファイルのselectOneRadio要素定義を示しています。このコンポーネントは、アイテムの選択(selectItems)コンポーネントをその子として使用します。
<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>
次の例も、MAF AMXファイルのselectOneRadio要素定義を示しています。このコンポーネントは、アイテムの選択(selectItems)コンポーネントをその子として使用します。
<amx:selectOneRadio id="radio1"
label="Choose a pet:"
value="#{myBean.myPet}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}">
<amx:selectItems id="selectItems1" value="myBean.allPets"/>
</amx:selectOneRadio>
「プレビュー」ペインに表示されているブール・スイッチ・コンポーネントを図に示します。このコンポーネントのパラメータは、次のように設定されます。
<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>
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法
リスト・ビュー(listView)・コンポーネントを使用して、エンド・ユーザーが1つのオプションを選択できる選択肢のリストとしてデータを表示します。
通常、リスト・アイテム(listItem)・コンポーネントは、リスト・ビュー・コンポーネント内の1つのアイテムを表しており、リスト・アイテム・コンポーネントをリスト・ビュー内に配置して、データ・アイテムのリストのレイアウト設定またはスタイル設定をします。各アイテムは複数のリスト・アイテム・コンポーネントを含むことができ、この場合、リスト・アイテム・コンポーネントはアイテム(行)を満たし、過剰なリスト・アイテム・コンポーネントは後続行に折り返します。これを構成するには、リスト・ビューのlayout属性をcardsに設定します(デフォルトのレイアウトはrowsであり、リスト内の1つのアイテム当たり1つのリスト・アイテム・コンポーネントが表示されます)。「リスト・ビュー・レイアウトの構成」を参照してください。
リスト・ビューによって、次のうち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>
デザインタイムの基本リスト・ビュー・コンポーネントを図に示します。
次の例は、MAF AMXファイルでの
listView要素の別の定義を示しています。この定義も基本コンポーネントに対応していますが、このリスト・ビューの値はコレクションによって設定されます。<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>デザインタイムのアイコンおよびテキスト付きリスト・ビュー・コンポーネントを図に示します。
-
検索付きリスト
-
区切り付きリスト。このタイプのリストでは、データをグループ化して順序を示すことができます。リスト・ビュー・コンポーネントの属性によって、各区切りの特性が定義されます。
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までの文字が有効になります。その他の文字は、行がさらにロードされるとインデクサに表示されます。インデックス・ユーティリティに定義可能なスタイルを表に示します。
表14-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>
デザインタイムの凹枠リスト・ビュー・コンポーネントを図に示します。
次の例は、MAF AMXファイルでの
listView要素の別の定義を示しています。この定義も凹枠コンポーネントに対応していますが、このリスト・ビューの値はコレクションによって設定されます。<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でのリスト・アイテム・コンポーネントの子の操作および属性の処理には、特定の順序があります。「操作と属性の処理順序に関する必知事項」を参照してください。
他のMAF AMXコンポーネントとは異なり、リスト・ビューをMAF AMXページにドラッグ・アンド・ドロップすると、「ListViewギャラリ」というダイアログが表示されます(図を参照)。このダイアログでリスト・ビューに対して特定のレイアウトを選択できます。
「ListViewギャラリ」に表示される、サポートされるリスト・フォーマットを表にリストします。
表14-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つのバリエーションがあり、表に示す16の固有の説明が提供されています。
表14-7 リスト・ビューのバリエーションとスタイル
| リスト・フォーマット | バリエーション | 説明 |
|---|---|---|
|
シンプル |
基本 |
テキスト・フィールドがリスト・アイテムの開始側に表示されます。 |
|
シンプル |
区切り |
テキスト・フィールドは、リスト・アイテムの開始側に、アイテムが区切りによりグループ化されて表示されます。 |
|
シンプル |
イメージ |
テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。 |
|
シンプル |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
メイン-サブ・テキスト |
基本 |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。 |
|
メイン-サブ・テキスト |
区切り |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。リスト・アイテムは区切りによってグループ化されます。 |
|
メイン-サブ・テキスト |
イメージ |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。 |
|
メイン-サブ・テキスト |
区切りおよびイメージ |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
開始-終了 |
基本 |
テキスト・フィールドがリスト・アイテムの両側に表示されます。 |
|
開始-終了 |
区切り |
テキスト・フィールドは、リスト・アイテムの両側に、アイテムが区切りによりグループ化されて表示されます。 |
|
開始-終了 |
イメージ |
テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。 |
|
開始-終了 |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
四分円 |
基本 |
テキスト・フィールドは、リスト・アイテムの四隅に表示されます。 |
|
四分円 |
区切り |
テキスト・フィールドは、リスト・アイテムの四隅に、アイテムが区切りによりグループ化されて表示されます。 |
|
四分円 |
イメージ |
テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。 |
|
四分円 |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
「ListViewギャラリ」で選択して「OK」をクリックすると、「リスト・ビューの編集」ウィザードが起動されます。それを使用して、リスト・アイテム子コンポーネントに静的テキストを表示するバインドなしのリスト・ビュー・コンポーネントを作成するか、または動的バインド用にデータソースを選択できます。
ダイアログに入力する際は、次の点を考慮してください。
-
「リスト・データ・コレクション」および「要素タイプ」フィールドは、「データのバインド」チェックボックスが選択解除された状態のときは無効化されています。
-
左側にあるイメージは、選択されているリスト・ビュー・フォーマットのメイン・コンテンツ要素を反映しています。
-
「値」列の編集可能セルには、静的テキスト文字列が移入されます(次の表を参照)。
-
「リスト・アイテム・コンテンツ」セルにイメージが含まれている場合、
「値」セルはデフォルトで<add path to your image>文字列になります。この場合、それをイメージのパスに置き換える必要があります。 -
「リスト・アイテム選択」は選択モードを示します。詳細は、図13-77でこのオプションの説明を参照してください。
-
リスト・ビューに、データがバインドされているのではなく、リスト・アイテム子コンポーネントが含まれている場合、区切り属性を設定できないため、「区切り属性」と「区切りモード」の両方のフィールドは無効化されています。
表14-8 リスト・ビューの静的テキスト文字列
| リスト・フォーマット | 要素行の値 | 出力テキストの値 |
|---|---|---|
|
シンプル |
|
|
|
メイン-サブ・テキスト |
|
|
|
開始-終了 |
|
|
|
四分円 |
|
|
リスト・ビュー・コンポーネントをデータにバインドすることを選択した場合の「リスト・ビューの作成」ダイアログを図に示します。
ダイアログに入力する際は、次の点を考慮してください。
-
「データのバインド」チェック・ボックスを選択した場合、「リスト・データ・コレクション」フィールドが有効になります。式ビルダーを使用して「リスト・データ・コレクション」フィールドにEL式を設定した場合、「要素タイプ」フィールドが有効になります。データ・コントロール定義タブからデータ・コントロールを選択すると、「要素タイプ」フィールドは無効なままになります。
-
データソースを選択するには、「参照」をクリックします。これにより、「リスト・ビュー・データ・コレクションの選択」ダイアログが開きます。そこで、データ・コントロール定義を選択するか、ELビルダーを使用して適切なEL式を選択できます(次の図を参照)。
-
「要素タイプ」フィールドを使用してデータ・コレクションのタイプを宣言できます(図14-40を参照)。
-
有効なデータ・コレクションを選択すると、「リスト・アイテム・コンテンツ」表の「値」列が「値バインディング」に変更され、その編集可能なセルにはデータ・コレクションから属性のリストが移入されます。特別な場合の設定の説明は、次の図を参照してください。
-
左側のイメージは、選択したリスト・ビュー・フォーマットのメイン・コンテンツ要素を反映し、略図から基礎となる表の名前付き要素へのマッピングを提供します。
-
リスト・アイテムは、その特定要素に対してどちらが適切であるかによって、出力テキストまたはイメージ・コンポーネントのいずれかとして生成されます。
-
要素(行)数は選択したリスト・ビュー・フォーマットであらかじめ決まっているため、行を追加または削除することはできません。
-
要素の順序は変更できません。
-
「区切り属性」フィールドのデフォルト値は「区切りなし」であり、この場合、「区切りモード」フィールドは無効です。デフォルト以外の値を選択する場合は、「区切りモード」パラメータを指定する必要があります。さらに、「ListViewギャラリ」で区切りを含むバリエーションを選択した場合、デフォルト値はリストの最初の属性に設定されます。
バインド済リスト・ビューを作成するときに考慮する特殊な場合は次のとおりです。
-
Java Beanメソッドによって汎用性がないリストが戻される場合、図14-40に示すように「要素タイプ」フィールドを使用して、リスト・アイテム・コンテンツを作成する必要があります。
-
入力されているリスト・データ・コレクション値がコレクションベースではない場合は、次の図に示すように、「値」列が空白の値を持つ「値バインディング」列に置換されます。
詳細は、次の項を参照してください。
-
開発コンピュータの
jdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGalleryおよびUILayoutDemo。これらのサンプルは、様々なタイプのリスト・ビュー・コンポーネントの使用方法と、スタイルを適用してページ・レイアウトを特定のパターンに合せる方法を示しています。
ページングおよび動的スクロールの構成
リスト・ビュー・コンポーネントを構成して、任意の長さのリストにデータを表示するには、ユーザー・ジェスチャーによる要求に応じて、リストの下部にデータを追加します。
fetchSize属性によって、リスト・ビュー・コンポーネントが最初にロードする行数が決定されます。maxRows属性は、表示するリスト・アイテムの最大数を指定します。maxRows属性で定義されているよりも多くの使用可能な行がある場合、リスト・ビューでは特定のユーザー・ジェスチャーを待ってから、さらに行をロードして表示します(「リスト・ビューのスクロール方法」を参照)。fetchSize属性は、ユーザーがさらに行を表示するジェスチャーを実行するたびにロードおよび表示される行数を決定する場合にも使用されます。
fetchSize属性が-1に設定されており、maxRows属性の値を指定していない場合は、すべてのレコードの取得と表示が行われるため、ページングも動的スクロール動作も発生しません。
「データ・コントロール」ウィンドウからMAF AMXページにコレクションをドラッグしてリスト・ビュー・コンポーネントが作成されると、fetchSize属性はデフォルトでPageDefイテレータのrangeSizeを指すEL式を使用するように設定され、これを変更することはできません。詳細は、次の項を参照してください。
次の例は、データ・コントロールのtestResultsというコレクションから作成されたlistView要素を示しています(「MAF AMXページへのデータ・コントロールの追加方法」を参照)。
<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"/>
そのinitialScrollRowKeys属性を使用して、自己スクロール可能なリスト・ビューの初期スクロール位置を指定できます(つまり、リスト・ビューは独自のスクロールを提供します。詳細は、「リスト・ビューの独自のスクロール」を参照してください)。便利なことに、次の例に示すように、この属性値はselectedRowKeys属性の値と同じEL式で設定できます。
<amx:listView id="lv1"
var="row"
value="#{bindings.departments.collectionModel}"
fetchSize="25"
inlineStyle="height: 200px"
selectedRowKeys="#{bindings.departments.collectionModel.selectedRow}
selectionListener="#{bindings.departments.collectionModel.makeCurrent}"
initialScrollRowKeys="#{bindings.departments.collectionModel.selectedRow}">
<amx:listItem id="li1">
<amx:outputText id="ot1" value="#{row.name} #{row.id}"/>
</amx:listItem>
</amx:listView> 最初の行セットが表示されるときに、MAFによってスクロール位置が割り当てられるため、指定した行のキーがフェッチされている行の最初のセットの一部であることを確認する必要があります。
また、List Viewコンポーネントは、noneに設定されているとき、エンド・ユーザーがコンポーネントをレンダリングするAMXページに戻るときに、MAFがList Viewコンポーネントの以前の状態を適用しないようにするpreserveState属性を公開します。このシナリオでは、initialScrollRowKeysおよびmaxRows属性の値により、エンド・ユーザーがコンポーネントをレンダリングするページに戻るときのスクロール位置が決定されます。使用可能な場合、preserveState="auto"を設定することにより、MAFがコンポーネントの以前の状態を適用するデフォルトの動作を再有効化できます。
リスト・ビューのスクロール方法
リスト・ビュー・コンポーネントの次の属性によってスクロール動作が有効になります。
-
showMoreStrategy: 必要な場合にさらに行をロードするためのリスト・ビュー・コンポーネントの計画を定義します。リスト・ビュー・コンポーネントがその独自のスクロール(「リスト・ビューの独自のスクロール」を参照)を提供し、リスト・ビューが最後までスクロールされたとき、次のように、自動的に属性の値に基づく
showMoreStrategyが起動されます。-
autoLink: モデルからさらに行を使用できる場合、リスト・ビューには、図に示すように表示されたリストの下部に「さらに行をロード」リンクが表示されます。リスト・ビューに追加の行をロードして表示するには、エンド・ユーザーがこのリンクをタップする必要があります。
-
autoScroll: モデルからさらに行を使用できる場合、リスト・ビューには、表示する追加の行をロードしている間、ロード・インジケータが表示されます。 -
forceLink: 「さらに行をロード」リンクが表示されます(図を参照)。エンド・ユーザーがリンクをタップすると、リスト・ビューでは追加の行をロードして表示しようとします。 -
off: リスト・ビューでは何のアクションも実行されません。最初にロードされた行のみが表示されます。
-
-
bufferStrategy: 表示された行をバッファリングする、リスト・ビュー・コンポーネントの方法を定義します。リスト・ビューの独自のスクロール(「リスト・ビューの独自のスクロール」を参照)が許されていて、その高さに制約があるときは、次のように、bufferStrategy属性の値に基づいてレンダリング・エンジンのバッファ内に行が保持されます。
-
additive: 新しい行がレンダリング・エンジンのバッファに追加され、すべての行がバッファ内に保持されます。このオプションは、メモリー消費量を考慮する必要のない短いリストに使用できます。 -
viewport: 行は、リスト・ビューのビューポート内で表示されるようになった場合にのみ、レンダリング・エンジンのバッファに追加されます。行が表示されなくなると、リスト・ビューのbufferSize属性に基づいて行がバッファから削除されます。このオプションは、長いリストを表示する場合に、メモリー消費量の削減に役立ちます。
-
-
bufferSize: bufferStrategyがviewportに設定されている場合、bufferSize属性は、行が非表示になる、行のビューポートからの距離(ピクセル単位)を定義します。
リスト・ビューの独自のスクロール
デフォルトで、リスト・ビュー・コンポーネントのスクロール動作は、親コンテナによって制御されます(つまり、親コンテナのスクロールがデフォルトで設定されるなどです)。
リスト・ビュー・コンポーネント独自のスクロールが提供されるようにするには、次のいずれかを実行します。
-
リスト・ビューを、パネル・ページの唯一の非ファセットの子にする。
-
リスト・ビューに固定の高さを設定する。次にその例を示します。
inlineStyle="height: 200px;"
サーバー側ページング
リスト・ビュー・コンポーネントでは、oracle.adfmf.amx.event.RangeChangeEventなどのイベントを介してサーバー側ページングをサポートしています。
「データ・コントロール」ウィンドウからMAF AMXページにコレクションをドラッグしてリスト・ビュー・コンポーネントが作成されると、リスト・ビュー・コンポーネントはバンディング・イテレータから行を取得します(「ページングおよび動的スクロールの構成」を参照)。バインディング・イテレータは、AttributeIteratorのRangeSize属性によって定義された単位で、データ・コントロールのコレクションから行を取得します。使用可能なデータがすべて取得されると、RangeChangeEventが起動されます。このイベントを捕捉するには、データ・コントロールのプロバイダ・コードにoracle.adfmf.amx.event.RangeChangeListenerを実装して、rangeChangeメソッドを提供する必要があります。このメソッドでは、サーバーからさらにデータをロードして、それをコレクションに追加できます。これらの行がリスト・ビュー・コンポーネントによって表示されるようにするには、AdfmfJavaUtilitiesクラスのaddDataControlProvidersメソッドをコールして、新たに追加された行をデータ・コントロール・フレームワークに通知する必要があります。
public class Departments implements RangeChangeListener {
public void rangeChange(RangeChangeEvent rce) {
List newRows = null;
if (rangeChangeEvent.isDataExhausted()) {
newRows = loadMoreData(rangeChangeEvent.getFetchSize());
AdfmfJavaUtilities.addDataControlProviders("Departments",
rangeChangeEvent.getProviderKey(),
rangeChangeEvent.getKeyAttribute(),
newRows,
newRows.size() > 0);
}
}
...
}注意:
データ・コントロールのプロバイダ・クラスをインスタンス化する際、サーバーからのデータの初期ロードでは、バインディング・イテレータのRangeSize属性で定義されている行数と同じ数の行を要求する必要があります。
マネージドBeanを使用してリスト・ビューのモデルを提供している場合、リスト・ビュー・コンポーネントのrangeChangeListener属性(「イベント・リスナーの使用方法」を参照)では、エンド・ユーザーがさらに行をロードするジェスチャーを実行したときにコールされる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
...
}注意:
RangeChangeEventを使用してサーバー側ページングをサポートしている場合、リスト・ビューのfetchSize属性は-1に設定できません。
追加の例は、開発コンピュータのjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイルにあるRangeChangeDemoというMAFサンプル・アプリケーションを参照してください。
MAF AMX UIコンポーネントによるメモリー消費に関する必知事項
リスト・ビューを含む、すべてのスクロール可能なMAF AMX UIコンポーネントは、メモリーが不足した状態でモバイル・デバイスを実行している場合にリソースを節約するよう最適化されています。このようなコンポーネントでは、フリック機能が無効化され、慣性スクロールが機能します(つまり、エンド・ユーザーが画面から指を離した後もコンポーネントがスクロールし続けるようにするため、エンド・ユーザーはコンポーネントを指でフリックできなくなります)。
リスト・ビュー・アイテムの再配置
リスト・ビューのアイテムは再配置できます。この機能は、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>
リスト・ビュー・レイアウトの構成
リスト・ビュー・コンポーネントは、各行が1つのリスト・アイテム・コンポーネントを含んでいる行のセット(デフォルト)として、または各カードが1つ以上のリスト・アイテム・コンポーネントを含んでいるカードのセットとしてレイアウトできます。
レイアウトを定義するには、リスト・ビューのlayout属性を使用し、これをrowsまたはcardsに設定します。cardsレイアウトを使用する場合は、次の点を考慮してください。
-
各リスト・アイテム・コンポーネントは、水平に並べられたカードのグループ内のカードとして表示されます。
-
使用可能なスペースがすべて消費されると、次のカードが新しい行で折り返されます。
-
リスト・ビュー内でリスト・アイテム・コンポーネント(カード)の水平配置を制御するには、リスト・ビューの
halign属性をstart、centerまたはendに設定します。 -
リスト・ビューの外観を一般的にカスタマイズするには、次の手順を実行します。
-
スキン内でデフォルトで定義されているカード・サイズをオーバーライドするには、リスト・アイテムの
inlineStyle属性を使用して新しい幅を指定します。「コンポーネント属性を使用したスタイルの定義方法」を参照してください。注意:
値を
autoに設定することも、パーセント単位を使用することもできません。あるいは、スキニングを使用して
.amx-listView-cards .amx-listItemセレクタから幅をオーバーライドできます(「スキニングに関する必知事項」を参照)。 -
スキン内でデフォルトで定義されているカードの周囲のスペースをオーバーライドするには、リスト・アイテムの
inlineStyle属性を使用して新しいmargin-topおよびmargin-leftを指定し(「コンポーネント属性を使用したスタイルの定義方法」を参照)、リスト・ビューのcontentStyle属性を使用して新しいpadding-bottomおよびpadding-rightを指定します。あるいは、スキニングを使用して、
.amx-listView-cards .amx-listItemセレクタからmargin-topおよびmargin-leftをオーバーライドし、.amx-listView-cards .amx-listView-contentセレクタからpadding-bottomおよびpadding-rightをオーバーライドします(「スキニングに関する必知事項」を参照)。
-
rowsレイアウトの場合、halign属性を使用してわずかなリスト・アイテム・コンテンツの配置を変更できます。ただし、この属性を使用しても、視覚的な効果がないことがあります。
カード・レイアウトを備えたリスト・ビュー・コンポーネントが編集モードにあると、レイアウトはrowsモードに切り替わります。
MAF AMXページ・レイアウトを特定のパターンに合せるために、一連の事前定義済スタイルを使用するstyleClass属性(「UIコンポーネントのスタイル設定」を参照)を介して定義される様々なタイプのリスト・ビュー・コンポーネントおよびスタイルを組み合せて使用できます。
UILayoutDemoという名前のMAFサンプル・アプリケーションは、各コンポーネントのすべてのオプションのスタイルおよびそれに関連するレンダリングを示しています。このアプリケーションは、開発コンピュータのjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
次の例は、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>
各行の開始(左)側と終了(右)側に異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを図に示します。行には、テキストの他に各リスト・アイテムを拡張するリンクを表す右向き矢印が配置されています。
次の例は、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>
各行の開始と終了に異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを図に示します。行には、リンクを表す右向き矢印は含まれていません。
次の例は、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>
各行の開始と終了に異なるスタイルのテキストが追加され、左側の終了テキストの下にサブテキストが追加されたリスト・ビュー・コンポーネントを図に示します。
次の例は、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>
各行にメイン・テキストとサブテキストとして異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを図に示します。
次の例は、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>
各行に、アイコンおよびメイン・テキストとサブテキストとして異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを図に示します。
次の例は、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>
各行の開始と終了に2つのタイプの異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを図に示します。行には、テキストの他に各リスト・アイテムを拡張するリンクを表す右向き矢印が配置されています。
次の例は、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>
各行の開始と終了に2つのタイプの異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを図に示します。
静的リスト・ビューの使用に関する必知事項
モデルからではなくハードコード化された値によって移入されるリスト・ビュー・コンポーネントを作成する場合、このリスト・ビューは静的になり、デザインタイムに設定するそのプロパティのいくつか(たとえばdividerAttribute、dividerMode、fetchSize、moveListener)が実行時に無視されるようになります。
MAF AMXでは、リスト・ビュー・コンポーネントのvalue属性が設定されていない場合、そのコンポーネントを静的であるとみなします。そのようなリストは編集できません(つまり、リストのeditMode属性を指定できません)。
カルーセル・コンポーネントの使用方法
カルーセル(carousel)コンポーネントは、回転カルーセルにイメージなどの他のコンポーネントを表示するために使用します。エンド・ユーザーは、スライダを使用するか、別のイメージを正面にドラッグすることでアクティブなアイテムを変更できます。
カルーセル・コンポーネントにはカルーセル・アイテム(carouselItem)コンポーネントが含まれており、text属性によって表されるそのテキストは、それがそのカルーセルのアクティブなアイテムであるときに表示されます。通常、カルーセル・アイテムにはイメージ・コンポーネントが含まれていますが、他のコンポーネントを使用することもできます。たとえば、イメージを囲む子としてリンクを使用することもできます。表示するオブジェクトごとにカルーセル・アイテム・コンポーネントを作成し、これらのコンポーネントを個々のオブジェクトにバインドするかわりに、カルーセル・コンポーネントを完全なコレクションにバインドします。その後、コンポーネントは各アイテムに値をスタンプすることで、1つのカルーセル・アイテム・コンポーネントを繰り返しレンダリングします。各アイテムがスタンプされると、現在のアイテムのデータが、EL式でカルーセル・コンポーネントのvar属性を使用して特定可能なプロパティにコピーされます。カルーセルのレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。カルーセル・コンポーネントにはnodeStampというファセットが含まれており、これは、各アイテムのテキストと短い説明の両方を表示するために使用されるカルーセル・アイテムのホルダーであり、各アイテムに表示されるイメージに対する親コンポーネントでもあります。
カルーセル・アイテムは、その子コンポーネントのみ拡大します。単一のイメージ・コンポーネントをカルーセル・アイテムの内部に配置する場合、イメージはそのアイテムに割り当てられた四角形に合せて拡大されます(エンド・ユーザーがカルーセルをスピンすると、これらのサイズが縮小または拡大されます)。
ヒント:
アプリケーションのパフォーマンスの低下を最小限に抑えるは、重いコンポーネントを子として使用しないようにします。複雑な構造にすると、いくつかのカルーセル・アイテム・スタンプが同時に表示されるため、その影響が倍増します。
デフォルトでは、カルーセルは水平に表示されます。水平方向のカルーセル内にあるオブジェクトは中央に垂直に配置され、カルーセル自体はコンテナの中心に水平に配置されます。参照ローロデックスが必要な場合は、垂直に表示されるようにカルーセルを構成できます。デフォルトでは、垂直方向のカルーセル内にあるオブジェクトは中心に水平に配置され、カルーセル自体は中央に垂直に配置されます。カルーセルのorientation属性を使用してこの配置を変更できます。
前後のイメージを部分的に表示するかわりに、displayItems属性を使用して、フィルムストリップ・デザインまたは循環デザインでイメージを表示するようにカルーセルを構成することができます。
デフォルトでは、カルーセルが循環モードで表示するように構成されている場合、エンド・ユーザーが補助アイテム(現在、中央に表示されていないアイテム)にポインタを置くと、そのアイテムが枠で囲まれ選択可能であることが示されます。auxiliaryPopOut属性を使用すると、アイテムが移動し、最大サイズで表示されるように、カルーセルを構成できます。
JDeveloperでは、「カルーセル」は「コンポーネント」ウィンドウの「データ・ビュー」の下にあります。
カルーセル・コンポーネントを作成するには、表示するイメージを含むデータ・モデルを作成してから、カルーセルをそのモデルにバインドし、カルーセル・アイテム・コンポーネントをカルーセルのnodeStampファセットに挿入します。最後に、イメージ・コンポーネント(またはイメージ・コンポーネントを含むその他のコンポーネント)をカルーセル・アイテム・コンポーネントに子として挿入します。
次の例は、MAF AMXファイルのcarousel要素定義を示しています。carousel要素を定義するときは、carousel要素のnodeStampファセット内にcarouselItem要素を配置する必要があります。
mx: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クラスに変換されますが、機能は追加されません。
スライダを使用することで、エンド・ユーザーはカルーセル・コレクションを移動できます。通常、スライダ上のサムにはオブジェクトの総数のうちの現在のオブジェクト番号が表示されます。オブジェクトの総数が大きすぎて計算できない場合、スライダ上のサムには現在のオブジェクト番号のみ表示されます。
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
フィルム・ストリップ・コンポーネントの使用方法
フィルム・ストリップ(filmStrip)は、一連のグループ(ページ)間に分散されたデータを、垂直または水平ストリップ形式で視覚化するコンテナです。グループに含まれるディスプレイ・アイテム(filmStripItem)を表すUIコンポーネントは、同じサイズおよびタイプである必要があり、一度に1つのグループのみを表示できます。エンド・ユーザーは、フィルム・ストリップのページを移動でき、アイテムを選択してタップすることでアクションを生成できます。
JDeveloperでは、フィルム・ストリップは「コンポーネント」ウィンドウの「データ・ビュー」の下にあります。
次の例は、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}"
pageControlPosition="#{pageFlowScope.pageControlPosition}">
<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>
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
フィルム・ストリップ・レイアウトに関する必知事項
垂直に配置されたフィルム・ストリップでは、ディスプレイ・アイテムは上から下に配置されます。テキストの方向に応じて、ページ制御は次のように配置されます。
-
テキストの方向が左から右の場合、ページ制御は右側に置かれます。
-
テキストの方向が右から左の場合、ページ制御は左側に置かれます。
水平に配置されたフィルム・ストリップでは、テキストの方向モードを反映する必要があり、左から右モードでは最初のアイテムが左に置かれ、右から左モードでは最初のアイテムは右に置かれます。どちらの場合でも、ページ・コントロールは一番下にあります。
フィルム・ストリップ・コンポーネントのpageControlPosition属性を使用すると、ページ・コントロールの場所をフィルム・ストリップ・アイテムの内側または外側のいずれかに構成できます。
dottedPageControlコンポーネントが構成されている場合は、図14-56で示すように、フィルム・ストリップ・ページ間の移動用のオーバーフロー・ドット付きページ・コントロールを表示できます。次の例では、MAF AMXファイル内で構成されているdottedPageControlコンポーネントとともにFilm Strip要素を示します。<amx:filmStrip>
<amx:filmStripItem/>
<amx:facet name="pageControl">
<amx:dottedPageControl id="pc1" dotsPerGroup="10" lastGroupBehavior="remaining|full" displayArrowLabels="none|inside|outside"/>
</amx:facet>
</amx:filmStrip>図14-56 ドット付きページ・コントロール・コンポーネント
フィルム・ストリップ・ナビゲーションに関する必知事項
フィルム・ストリップ・コンポーネントのナビゲーションは、デック(「デック・コンポーネントの使用方法」を参照)およびパネル・スプリッタ・コンポーネント(「パネル・スプリッタ・コンポーネントの使用方法」を参照)と似ています。一度に1つのページが表示され、ページIDまたは番号を選択するとページの変更がトリガーされます。
子フィルム・ストリップ・アイテム・コンポーネントは、他のMAF AMXページに移動するための使用は想定されていないため、action属性をサポートしていません。必要な場合は、ネストされているコマンド・リンク・コンポーネントを介してナビゲーションを有効化できます。
Verbatimコンポーネントの使用方法
該当するコンポーネントが存在しない場合や自身でHTMLを使用してレイアウトする必要がある場合は、Verbatim (verbatim)操作を使用して独自のHTMLをページに挿入できます。
JDeveloperでは、「Verbatim」は、「コンポーネント」ウィンドウの「一般コントロール」の下にあります(図14-59を参照)。
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
JavaScriptおよびAJAXをVerbatimコンポーネントとともに使用する方法に関する必知事項
JavaScriptを直接Verbatimコンテンツ(amx:verbatim要素内)に挿入することは、現在サポートされているプラットフォームの今後のバージョンまたはMAFが今後サポートする可能性のあるその他のプラットフォームで正しく実行されない可能性があるため推奨されていません。かわりに、maf-feature.xmlファイルにある既存のadfmf:include要素を介してJavaScriptおよびCSS包含を実行する必要があり、これにより、MAF AMXアプリケーション機能の起動時にスクリプトが確実にページに挿入されます。
さらに、VerbatimコンポーネントでのJavaScriptの使用は、AMXページからサーバーへのAJAXコールがサポートされていないために影響を受けます。これは、セキュリティ・アーキテクチャによるもので、これによってMAF AMXページをホストするブラウザが、そのリソースを取得するためにセキュア・サーバーに接続するために必要なセキュリティ情報に対してアクセス権を持たないことが保証されます。かわりに、サーバーとの通信は、埋込みJavaコード層から発生する必要があります。
出力HTMLコンポーネントの使用方法
出力HTML (outputHtml)コンポーネントでは、HTMLコンテンツをMAF AMXページに表示するために、ELでバインドされたプロパティまたはメソッドから動的および安全に取得できます。出力HTMLコンポーネントはVerbatimコンポーネント(「Verbatimコンポーネントの使用方法」を参照)と同様に動作し、JavaScriptおよびAJAXの使用に関して同じ制限が適用されます(「JavaScriptおよびAJAXのVerbatimコンポーネントでの使用に関する必知事項」を参照)。
JDeveloperでは、出力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というJava Beanからのコードを示しています。
// 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コンテンツをリモート・ソースから直接ダウンロードするのではなく、Java Beanプロパティから取得するため、動的に提供されるHTMLの取得または生成をコーディングする場合は、既存のMAFセキュリティ機能を使用することを検討してください。「MAFアプリケーションの保護」および「カスタムHTMLコンポーネントからのインジェクション攻撃リスクについて」を参照してください。さらに、提供されるHTMLが信頼できるソースからのもので、脅威がないことを確認します。
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
反復の有効化方法
イテレータ(iterator)操作を使用して、同じ種類のデータを持つ任意の数のアイテムをスタンプします。これによりデータを繰り返し処理して各要素のUIを作成できます。
JDeveloperでは、「イテレータ」は「コンポーネント」ウィンドウの「データ・ビュー」の下にあります(図を参照)。
UIコンポーネントのコンテンツのリフレッシュ方法
リフレッシュ・コンテナ(refreshContainer)コンポーネントには、エンド・ユーザーのプルダウン・ジェスチャーによってステータス・インジケータが表示され、リフレッシュできるコンテンツが格納されます。
プルダウン・ジェスチャーが解放されるか、またはそのしきい値に到達したときにコンテンツの更新が開始され、リスト・アイテムのインスタンスなどのコンテンツがリフレッシュされるまでステータス・インジケータが変化します。
つまり、リフレッシュ・コンテナ・コンポーネントでは、リフレッシュをジェスチャーとして公開でき、MAF AMXページにリフレッシュ・ボタンを追加する必要がなくなります。エンド・ユーザーにとって望ましくないスクロールを発生させることになるため、リフレッシュ・コンテナをスクロール可能な親コンポーネント内で配置しないように注意してください。そのかわりに、リフレッシュ・コンテナの内側にリスト・ビューなどのスクロール可能なコンポーネントを配置できます。エンド・ユーザーがリフレッシュ・コンテナ内の任意の場所でプルダウン・ジェスチャーを実行すると、MAF AMXにより、リフレッシュ・コンテナとエンド・ユーザーの指の間で、その上にスクロールされているUIコンポーネントがないか確認されます。その上にスクロールされているコンポーネントがない場合は、エンド・ユーザーが通常どおりにコンテンツをスクロールできるように、リフレッシュ・コンテナはジェスチャーを無視します。すべてのコンポーネントがその上にスクロールされている場合は、リフレッシュ・コンテナは、エンド・ユーザーがコンテンツをプルダウンすることを許し、以前非表示にされた情報ポケットがリフレッシュ・コンテナの上に表示されます。必要なしきい値(スキンに指定された高さ)に到達する前に指が離された場合は、そのポケットは再び非表示になります。エンド・ユーザーがそのしきい値を超えて指を下にドラッグした場合は、アクション・イベントが発生してアプリケーションは操作を実行でき、データがリフレッシュされます。このポケットは、処理が完了するか、またはリフレッシュ・コンテナのオプションのrefreshCompleteExpression属性が指定されていれば、データの変更イベントが発生するまで、開いたままです。
JDeveloperでは、リフレッシュ・コンテナは「コンポーネント」ウィンドウの「データ・ビュー」の下にあります。
次の例は、MAF AMXファイルのrefreshContainer要素の定義を示しています。このコンポーネントでは、「リスト・ビュー」のコンテンツがリフレッシュされます。pullText、busyText、subTextの各属性は、アクティブ化されたリフレッシュ・コンテナの様々な段階で表示されるテキストを定義します。
<amx:refreshContainer id="rc1"
refreshDesc="#{pageFlowScope.componentProperties.refreshDesc}"
pullText="#{pageFlowScope.componentProperties.pullText}"
busyText="#{pageFlowScope.componentProperties.busyText}"
subText="#{pageFlowScope.componentProperties.subText}"
actionListener="#{PropertyBean.RefreshActionHandler}">
<amx:setPropertyListener type="action"
from="Last updated: Recently"
to="#{pageFlowScope.componentProperties.subText}"/>
<amx:listView id="listView1"
var="row"
value="#{bindings.contacts.collectionModel}"
bufferStrategy="viewport"
collapsibleDividers="true"
dividerAttribute="last"
dividerMode="firstLetter"
rendered="#{pageFlowScope.componentProperties.rendered}"
showDividerCount="true"
showMoreStrategy="autoScroll">
<amx:listItem id="listItem1" action="details">
<amx:outputText id="outputText1"
value="#{row.first} #{row.last}"/>
<amx:setPropertyListener from="#{row.rowKey}"
to="#{pageFlowScope.currentContact}"
type="action"/>
<amx:setPropertyListener from="#{row.first}"
to="#{pageFlowScope.currentContactFirst}"
type="action"/>
<amx:setPropertyListener from="#{row.last}"
to="#{pageFlowScope.currentContactLast}"
type="action"/>
<amx:setPropertyListener from="#{row.address}"
to="#{pageFlowScope.currentContactAddress}"
type="action"/>
<amx:setPropertyListener from="#{row.city}"
to="#{pageFlowScope.currentContactCity}"
type="action"/>
<amx:setPropertyListener from="#{row.state}"
to="#{pageFlowScope.currentContactState}"
type="action"/>
<amx:setPropertyListener from="#{row.zip}"
to="#{pageFlowScope.currentContactZip}"
type="action"/>
<amx:setPropertyListener from="#{row.phone}"
to="#{pageFlowScope.currentContactPhone}"
type="action"/>
<amx:setPropertyListener from="#{row.mobile}"
to="#{pageFlowScope.currentContactMobile}"
type="action"/>
</amx:listItem>
</amx:listView>
</amx:refreshContainer>例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
アクション・リスナーの使用方法
アクション・リスナー(actionListener)コンポーネントにより、親コンポーネントが使用するタイプに基づいてELを介して宣言でコマンドを呼び出すことができます。
アクション・リスナー・コンポーネントを使用する主な理由は、親コンポーネントにジェスチャー対応アクションを追加すること、およびタップなどの単一ジェスチャーに対して複数の操作を実行できるためです。「アクション・リスナー・コンポーネントと属性間の相違点に関する必知事項」を参照してください。
JDeveloperでは、「アクション・リスナー」コンポーネントは「コンポーネント」ウィンドウの「操作」→「リスナー」の下にあります。
0個以上のアクション・リスナー・コンポーネントを、任意のコマンド・コンポーネント(ボタン、リンク、リスト・アイテム、フィルム・ストリップ・アイテム)の子として追加できます。アクション・リスナー・コンポーネントのtype属性は、ActionEventを作動させるジェスチャー(swipeLeft、swipeRight、tapHoldなど)を定義します。
詳細は、次の項を参照してください。
プロパティ・リスナーの設定の使用方法
プロパティ・リスナーの設定(setPropertyListener)コンポーネントによって、コンポーネントでのエンド・ユーザー・アクションを受けて、1つの場所(コンポーネントのfrom属性で定義)から別の場所(コンポーネントのto属性で定義)に宣言的に値をコピーできるため、同じ結果を得るためにJavaコードを記述する必要がありません。
JDeveloperでは、「プロパティ・リスナーの設定」コンポーネントは「コンポーネント」ウィンドウの「操作」→「リスナー」の下にあります。
次の例は、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など)を定義します。
詳細は、次の項を参照してください。
クライアント・リスナーの使用方法
クライアント・リスナー(clientListener)コンポーネントを使用すると、特定のイベント・タイプの起動時に実行されるJavaScriptリスナー・スクリプトを宣言的に登録できます。
ナビゲーション・ドラッグ動作やポップアップ表示動作など、既存の動作コンポーネントにはスクリプトが不要なものもあるため、クライアント・リスナー・コンポーネントを使用する前に、このようなコンポーネントがMAF AMXに含まれているかどうかを確認する必要があります。
JDeveloperでは、「クライアント・リスナー」コンポーネントは「コンポーネント」ウィンドウの「操作」→「リスナー」の下にあります。
次の例は、MAF AMXファイルのclientListener要素定義を示しています。両方の属性が必要で、次のように指定されている必要があります。
-
method: 指定タイプのイベントでトリガーされると起動する、クライアント側のJavaScriptメソッド名を定義します。 -
type: リスニング対象のクライアント側コンポーネント・イベントのタイプを定義します。必ずしもすべてのイベント・タイプがすべてのコンポーネントに存在するわけではなく、すべてのイベントがプラットフォーム間または同じプラットフォームのバージョン間で常に動作しているわけではありません。イベントの例としては、action(親コンポーネントがボタンの場合)、valueChange(親コンポーネントが入力テキストの場合)などがあります。親コンポーネントによっては、touchstart、touchend、tap、tapholdなど、いくつかのDOMイベントを使用できる場合があります。また、ビュー・コンポーネントのshowpagecomplete、mafviewvisible、mafviewhidden、amxnavigatestart、amxnavigateend(「デバイス・プロパティに関する必知事項」を参照)など、特別なDOMイベントを持つコンポーネントもあります。type属性は初期宣言のELはサポートしていますが、そのEL値への変更はサポートしていません(つまり、親コンポーネントを再レンダリングするアクションが実行されないかぎり、式に関連付けられた値は変更できません)。
<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:clientListener type="showpagecomplete" method="handleClientListenerBlue"/>
<amx:clientListener type="mafviewvisible" method="handleClientListenerBlue"/>
<amx:clientListener type="mafviewhidden" method="handleClientListenerBlue"/>
<amx:clientListener type="amxnavigatestart" method="handleClientListenerBlue"/>
<amx:clientListener type="amxnavigateend" method="handleClientListenerBlue"/>
<amx:panelPage id="pp1">
<amx:facet name="header">
<amx:outputText id="header" value="clientListener"/>
</amx:facet>
<amx:facet name="primary">
<amx:commandButton id="back" action="__back" text="Back"/>
</amx:facet>
<amx:facet name="secondary">
<amx:commandButton id="props" text="Properties" action="properties"/>
</amx:facet>
<amx:commandButton id="button1" text="Click Me">
<amx:clientListener type="#{bindings.pType}"
method="#{bindings.pMethod}"/>
</amx:commandButton>
<amx:verbatim id="v1"><![CDATA[
<script type="text/javascript">
function handleClientListenerGray(clientEvent) {
_handleClientListener(clientEvent, "gray");
}
function handleClientListenerBlue(clientEvent) {
_handleClientListener(clientEvent, "blue");
}
function handleClientListenerOrange(clientEvent) {
_handleClientListener(clientEvent, "orange");
}
function clearRecentEvents(clientEvent) {
for (var i=9; i>=0; --i) {
var row = document.getElementsByClassName("recent"+i)[0];
row.textContent = "n/a";
row.style.color = "";
}
}
function _handleClientListener(clientEvent, color) {
try {
for (var i=9; i>0; --i) {
var currentRow = document.getElementsByClassName("recent"+i)[0];
var olderRow = document.getElementsByClassName
("recent"+(i-1))[0];
currentRow.textContent = olderRow.textContent;
currentRow.style.color = olderRow.style.color;
}
document.getElementsByClassName("recent0")[0].
textContent = clientEvent;
document.getElementsByClassName("recent0")[0].style.color = color;
console.log("Handled clientListener: " + clientEvent, clientEvent);
}
catch (problem) {
console.log("Error in verbatim code: " +
clientEvent, clientEvent, problem);
alert("Error in verbatim code: " + clientEvent + "\n\n" + problem);
}
}
</script>
<style type="text/css">
.recentLine {
white-space: normal;
word-wrap: break-word;
font-size: 12px;
color: gray;
}
</style>
<fieldset style="min-width: 50px;">
<legend style="color: gray;">Recent Events</legend>
<div id="recent0" class="recent0 recentLine">n/a</div>
<div id="recent1" class="recent1 recentLine">n/a</div>
<div id="recent2" class="recent2 recentLine">n/a</div>
<div id="recent3" class="recent3 recentLine">n/a</div>
<div id="recent4" class="recent4 recentLine">n/a</div>
<div id="recent5" class="recent5 recentLine">n/a</div>
<div id="recent6" class="recent6 recentLine">n/a</div>
<div id="recent7" class="recent7 recentLine">n/a</div>
<div id="recent8" class="recent8 recentLine">n/a</div>
<div id="recent9" class="recent9 recentLine">n/a</div>
</fieldset>
]]></amx:verbatim>
</amx:panelPage>
</amx:view>
イベントの詳細は、「イベント・リスナーの使用方法」を参照してください。
日時の変換方法
日時の変換(convertDateTime)は、独立したUIコンポーネントではありません。これは、出力テキストおよび入力テキスト・コンポーネントと組み合せて使用して、指定されたパターンに従った様々な書式で、変換された日付、時刻または日時の組合せを表示するコンバータ操作です。
JDeveloperでは、「日時の変換」は「コンポーネント」ウィンドウの「バリデータおよびコンバータ」の下にあります(図14-64を参照)。
次の例は、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>
日時値を変換するには:
-
「コンポーネント」ウィンドウから、「日時の変換」コンポーネントをドラッグして「出力テキスト」コンポーネントまたは「入力テキスト」コンポーネント内に挿入し、それをそのコンポーネントの子要素にします。
-
日時の変換コンポーネントの「プロパティ」ウィンドウを開き、その属性を定義します。
注意:
日時の変換コンポーネントは、デザインタイムには何の効果も持ちません。
日時の変換コンポーネントでは、入力値文字列を日付に変換する際に一定レベルの寛容性があります。
-
月に対して関連付けられたパターン
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などです。
日時パターンに関する必知事項
java.text.SimpleDateFormat定義に従って、日時書式を、日時パターン文字列で指定します。日時パターン文字列では、引用符で囲まれていないAからZおよびaからzの文字は、日付または時間の文字列のコンポーネントを表すパターン文字と認識されます。テキストは、解釈されないように一重引用符(')で囲むことができます。" ' ' "は一重引用符を表します。すべてのその他の文字は解釈されません。かわりに、それらは書式設定中に単に出力文字列にコピーされるか、解析中に入力文字列と照合されます。
表14-9は、定義済パターン文字を示しています(AからZおよびaからzのすべてのその他の文字は予約されています)。
表14-9 日時パターン文字
| 文字 | 日付または時刻のコンポーネント | 表示内容 | 例 |
|---|---|---|---|
|
G |
紀元 |
テキスト |
|
|
y |
年 |
年 |
|
|
M |
年における月 |
月 |
|
|
w |
年における週 |
数値 |
|
|
W |
月における週 |
数値 |
|
|
D |
年における日 |
数値 |
|
|
d |
月における日 |
数値 |
|
|
F |
月における曜日 |
数値 |
|
|
E |
曜日 |
テキスト |
|
|
a |
午前/午後 |
テキスト |
|
|
H |
1日における時(0-23) |
数値 |
|
|
k |
1日における時(1-24) |
数値 |
|
|
K |
午前/午後の時(0 - 11) |
数値 |
|
|
h |
午前/午後の時(1 - 12) |
数値 |
|
|
m |
1時間における分 |
数値 |
|
|
s |
1分における秒 |
数値 |
|
|
S |
ミリ秒 |
数値 |
|
|
z |
タイムゾーン |
一般的なタイムゾーン |
|
|
Z |
タイムゾーン |
RFC 822タイムゾーン |
|
パターン文字は通常繰り返されます。これは、それらの数が正確な表示を決定するためです。
数値の変換方法
数値の変換(convertNumber)は、独立したUIコンポーネントではなく、出力テキストおよび入力テキスト、入力テキストおよび入力数値スライダの各コンポーネントと組み合せて使用して、次の指定されたパターンに従った様々な書式で、変換された数値または通貨値を表示するコンバータ操作です。
数値の変換コンポーネントは、次のタイプの操作を提供します。
-
値から文字列。表示目的です。
-
書式設定された文字列から値。書式設定された入力値が、基礎となっている値に解析される場合です。
数値の変換が、入力テキスト・コンポーネントの子として指定されている場合、デフォルトで、モバイル・デバイスに数字キーボードが表示されます。
JDeveloperでは、「数値の変換」は「コンポーネント」ウィンドウの「バリデータおよびコンバータ」の下にあります。
次の例は、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" roundingMode="HALF_UP"/> </amx:inputText> </amx:panelPage>
数値を変換するには:
-
「コンポーネント」ウィンドウから、「数値の変換」コンポーネントをドラッグして「出力テキスト」コンポーネント、「入力テキスト」コンポーネントまたは「入力数値スライダ」コンポーネント内に挿入し、それをそのコンポーネントの子要素にします。
-
数値の変換コンポーネントの「プロパティ」ウィンドウを開き、その属性を定義します。
注意:
数値の変換コンポーネントは、デザインタイムには何の効果も持ちません。
ドラッグ・ナビゲーションを有効にする方法
ナビゲーション・ドラッグ動作(navigationDragBehavior)の処理では、モバイル・デバイスの画面を指定された方向(左または右)にドラッグすることで、次または前のMAF AMXページに移動するアクションを起動できます。指定された方向へのドラッグが発生するとインジケータが画面の適切な側に表示され、引き続きドラッグしてインジケータが完全に表示されたときに停止するとアクションが実行されることを示します。インジケータが完全に表示される前にドラッグを放すと、インジケータがスライドされ、アクションは起動されません。
注意:
ドラッグ・ジェスチャーを消費する近いコンテナが他にない場合、この動作は発生しません。
MAF AMXページには、navigationDragBehavior要素の3つ以上のインスタンスを含むことはできず、1つはdirection属性をbackに設定したもので、もう1つはforwardに設定したものです。
JDeveloperでは、ナビゲーション・ドラッグ動作は「コンポーネント」ウィンドウの「操作」の下にあります。
次の例は、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>
実行時のドラッグ・ナビゲーション動作を図に示します(mobileFusionFxスキンを使用して表示)。
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
disabled属性に関する必知事項
disabled属性の値は、次のいずれかが発生した場合に計算されます。
-
MAF AMXページがレンダリングされる。
-
PropertyChangeListenerがコンポーネントを更新する: エンド・ユーザーのナビゲーション・ドラッグ動作を起動する機能を動的に有効化または無効化する場合、PropertyChangeListenerを使用します(Beanからの更新が必要な他のコンポーネントで使用される方法と同様)。
次の例は、disabled属性が定義されているnavigationDragBehavior要素を含むMAF AMXページを示しています。アクティブ化された場合に、disabled属性がその値を読み取るバッキングBeanのboolean値(MyBeanの例のnavDisabled)を変更するボタン(commandButton)によって機能が駆動されます。バッキングBeanは、プロパティ変更リスナーを使用します。
<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(navigationDragBehaviorの例の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);
}
}ロード・インジケータの使用方法
ロード・インジケータ動作(loadingIndicatorBehavior)の処理では、次のことをオーバーライドすることで、ロード・インジケータの動作を定義できます。
-
フェイルセーフ・タイマーの持続時間(ミリ秒単位)。
-
フェイルセーフしきい値に達した場合に、アクションの方針の決定するために起動できるオプションのJavaScript関数名。
JDeveloperでは、ロード・インジケータ動作は「コンポーネント」ウィンドウの「操作」の下にあります(図14-68を参照)。
図14-68 「コンポーネント」ウィンドウのロード・インジケータ動作
次の例は、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を返します。
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
};
例については、次を参照してください。
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
カスタムUIコンポーネントの作成
JavaScriptおよびMAF APIを使用して、カスタムUIコンポーネントを作成でき、このコンポーネントのJavaScriptファイルは、アプリケーション機能レベル包含を使用して、プロジェクトに追加できます。
カスタム・コンポーネントを作成するには、次の手順を実行します。
-
/META-INF/amx-tag-libraries.xmlファイルに、XMLネームスペース、サポートするカスタム・コンポーネント、およびその属性のメタデータを指定します。例14-2に、サンプルの
amx-tag-libraries.xmlファイルを示します。 -
adf.mf.api.amx.TypeHandler.registerAPIを使用して、タグ名前空間および1つ以上の一連のタイプ・ハンドラを登録するJavaScriptファイルを生成します。例14-1は、カスタムUIコンポーネントを宣言するJavaScriptファイルからの抽出を示しています。
-
タイプ・ハンドラごとにレンダリング・メンバー関数と、オプションでその他の関数を実装します。
-
JavaScriptファイルをアプリケーション機能のコンテンツに含めます。
Galleryアプリケーション機能に2つのJavaScriptファイル(
custom.jsおよびproperties.js)が含まれるCompGalleryサンプル・アプリケーションからの例を次に示します。 -
次の例に示すように、カスタム・コンポーネントの1つを使用する各MAF AMXページに対し、
view要素のxmlnsエントリを追加します。<?xml version="1.0" encoding="UTF-8" ?> <amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:amx="http://xmlns.oracle.com/adf/mf/amx" xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt" xmlns:custom="http://xmlns.example.com/custom"> ... </amx:view>
カスタムUIコンポーネントの作成方法の例については、「サンプルのMAFアプリケーション」に記載されているCompGalleryという名前のMAFサンプル・アプリケーションに含まれるamx-tag-libraries.xml、custom.amx、exampleEvents.amxおよびexampleList.amxの各ファイルを参照してください。これらのカスタムUIコンポーネントのランタイム実装は、次の図に示すように、CompGalleryサンプル・アプリケーションのGeneralカテゴリの下に表示されます。
図compgallerycustom.pngの説明
例14-1 カスタム・コンポーネントを登録するサンプルのJavaScriptファイル
(function() {
// TypeHandler for custom "x" elements
var x = adf.mf.api.amx.TypeHandler.register("http://xmlns.example.com/custom",
"x");
x.prototype.render = function(amxNode) {
var rootElement = document.createElement("div");
rootElement.appendChild(document.createTextNode("Hello World"));
return rootElement;
};
// TypeHandler for custom "y" elements
var y = adf.mf.api.amx.TypeHandler.register("http://xmlns.example.com/custom",
"y");
y.prototype.render = function(amxNode) {
var rootElement = document.createElement("div");
rootElement.appendChild(document.createTextNode("Goodbye World"));
return rootElement;
};
})();例14-2 サンプルのamx-tag-libraries.xmlファイル
<?xml version="1.0" encoding="UTF-8"?>
<!-- Tag library tag that defines a set of AMX tag handlers -->
<tag-library xmlns="http://xmlns.oracle.com/adf/mf/amx/tag-library">
<!-- Define a tag library for a namespace -->
<library namespace="http://xmlns.oracle.com/adf/mf/amx">
<!--
Register a UI tag. The tag handler defines the capabilities of what is being created.
Custom tag handlers are permitted to provide advanced behaviors that are not possible
through meta data alone.
name: the name of the tag
java-class: the Java class of the tag handler to use
naming-container: if set to "true", child nodes with have their IDs prepended with this component's ID. Defaults to false
serialize: if set to "false", the nodes for this tag will not be sent to the web view. Useful for tags that are only
useful for tag handler usage.
serialize-text-content: if set to "true" the text content of the tag will be sent to the JavaScript layer. For performance
reasons this defaults to false
-->
<tag name="inputText" java-class="oracle.maf.amx.typehandler.UITagHandler">
<!--
Specify a "normal" attribute using the "attribute" tag.
supports-el: if a ValueExpression should be created for the attribute or if the value should be
sent to the browser as-is. Defaults to true if not specified
serialize: if set to "false" the attribute will not be sent to the web view. Useful if only the tag handler needs
to use the attribute
evaluate: if set to true, indicates that the attribute value should be evaluated when the node is initialized
supports-validation: if set to true, the attribute will be used with validation. Also implies that the component
is an input component that accepts a value that may be validated.
-->
<attribute name="id" supports-el="false"/>
<attribute name="value" supports-converter="true"/>
...
</tag>
</library>
</tag-library>ジェスチャーの有効化
エンド・ユーザーのジェスチャーに反応するために、ボタン、リンク、リスト・アイテムおよび多数のデータ視覚化の各コンポーネントを構成できます。
ジェスチャーは次のとおりです。
-
右方向にスワイプ
-
左方向にスワイプ
-
上方向にスワイプ
-
下方向にスワイプ
-
タップしたまま押さえる
-
アクション: ジェスチャーとしては、アクションは基本的なタップを表します。
-
始点方向にスワイプ: このジェスチャーは、右から左(RTL)のテキスト方向に対応するために使用されます。このジェスチャーは、次のように解決されます。
-
テキスト方向が左から右である場合、左方向にスワイプします。
-
テキスト方向が右から左である場合、右方向にスワイプします。
-
-
終点方向にスワイプ: このジェスチャーは、右から左(RTL)のテキスト方向に対応するために使用されます。このジェスチャーは、次のように解決されます。
-
テキスト方向が左から右である場合、右方向にスワイプします。
-
テキスト方向が右から左である場合、左方向にスワイプします。
-
次の操作のtype属性に対して、swipeRight、swipeLeft、swipeUp、swipeDown、swipeStart、swipeEnd、actionおよびtapHold値を定義できます。
-
プロパティ・リスナーの設定(「プロパティ・リスナーの設定の使用方法」を参照)
-
アクション・リスナー(「アクション・リスナーの使用方法」を参照)
-
ポップアップ表示動作(「ポップアップ・コンポーネントの使用方法」を参照)
-
ポップアップを閉じる動作(「ポップアップ・コンポーネントの使用方法」を参照)
type属性の値は親コンポーネントに基づいて制限されており、リンク(commandLink)およびリスト・アイテム(listItem)のコンポーネントに対してのみサポートされています。
注意:
リンク(実行) (linkGo)コンポーネントに対するジェスチャー・サポートはありません。
始点方向にスワイプと終点方向にスワイプは、右から左(RTL)のテキスト方向に対応するために使用されます。通常は、左と右ではなく、始点と終点のスワイプ・スタイルを設定することをお薦めします。
次の例は、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コンポーネントでのジェスチャーの使用方法を示しています。このサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
iOSデバイスで使用するためのSirikitの実装
SirikitがサポートされているiOS 12デバイスにデプロイしたMAFアプリケーションでは、エンド・ユーザーは自分の音声のみを使用してタスクを完了できます。
Siriは、iOSオペレーティング・システムに組み込まれている仮想アシスタントです。SiriKitでは、エンド・ユーザーが音声コマンドを発行して作業を完了できるようにすることで、MAFアプリケーションがSiriとやり取りできるようになります。この機能を使用すると、エンド・ユーザーは、ハンズフリー・モードで、またはデバイスがロックされたときにデバイス上のアプリケーションと対話できます。
- MAFアプリケーションへのプラグインの追加
- プラグインの使用方法の説明の指定
- MAFが提供するJava APIを使用したコードの記述
MAFでは、PublicSamples.zipファイルにパッケージ化されたSiriDemoサンプル・アプリケーションを提供しています(「MAFサンプル・アプリケーション」を参照)。
このサンプル・アプリケーションを実行し、そのコードを確認して、MAFアプリケーションでのSiriKitの実装方法を理解します。MAFアプリケーションに含まれるmaf-plugin-siriプラグインを登録します。「MAFアプリケーションでの追加プラグインの登録」を参照してください。
MAFアプリケーションがユーザー・データをSiriに送信する理由をユーザーに通知するために、使用方法の説明(NSSiriUsageDescription)を追加します。「iOSのデバイス機能にアクセスするプラグインの使用方法の説明の指定」を参照してください。
oracle.adfmf.framework.event.SiriEventoracle.maf.api.platform.ios.SiriIntegrationoracle.maf.api.platform.ios.SiriShortcut
SiriBean.javaクラスと、ApplicationControllerプロジェクトのSiriEventListener.javaクラスを参照してください。これらのAPIの詳細は、Oracle Mobile Application Framework Java APIリファレンスを参照してください。
3D Touchに対応したiOSデバイスで使用するアプリケーションのショートカットの実装
3D Touchに対応したiOSデバイスにデプロイするMAFアプリケーションは、静的および動的アプリケーション・ショートカットをエンド・ユーザーに提供できます。
3D Touchは、様々なレベルの圧力をタッチスクリーンに加えることにより、エンド・ユーザーがサポートされているデバイスで追加機能にアクセスできるiOSの機能です。図14-70は、エンド・ユーザーがフォアグラウンドのMAFアプリケーションのアイコンを押したときに表示される2つのアプリケーション・ショートカットを示しています。これらのアプリケーション・ショートカットが表示されたら、エンド・ユーザーは目的のショートカット・メニューをタップして、関連付けられたアクション(たとえば、MAFアプリケーションのデフォルトのアプリケーション機能と異なるアプリケーション機能に移動)を呼び出します。
図14-70 3D Touchに対応したiOSデバイスのアプリケーションのショートカット
MAFが提供する次のJava APIを使用して、この機能を実装します。
-
oracle.adfmf.framework.event.ApplicationShortcutEvent -
oracle.maf.api.platform.ios.ApplicationShortcutItem -
oracle.maf.api.platform.ios.ApplicationShortcutItem.Icon -
oracle.maf.api.platform.ios.ApplicationShortcuts
これらのAPIの詳細は、Oracle Mobile Application Framework Java APIリファレンスを参照してください。
MAFは、Android、ユニバーサルWindowsプラットフォームまたは3D Touchに対応していないiOSデバイスにデプロイするMAFアプリケーションでの3D Touchの実装を無視します。
次のコードの抜粋は、アプリケーション・ショートカットを作成してアプリケーションに登録し、エンド・ユーザーがショートカットにアクセスした際に発生するイベントをリスニングし、対応するロジックを呼び出す方法を示します。
// Create a list of application shortcuts.
...
import java.util.ArrayList;
import java.util.List;
...
public void createAppShortcuts(ActionEvent e) {
List<ApplicationShortcutItem> items = new ArrayList<>();
// Create a shortcut item
ApplicationShortcutItem item1 = new ApplicationShortcutItem("type1", "Feature 1");
item1.setLocalizedSubtitle("Subtitle 1");
item1.setIcon(ApplicationShortcutItem.Icon.LOVE);
items.add(item1);
// Create a second shortcut item. This second shortcut demonstrated how you can insert user information,
// perhaps contact information, into a shortcut using the setUserInfo method.
ApplicationShortcutItem item2 = new ApplicationShortcutItem("type2", "Feature 2");
item2.setLocalizedSubtitle("go to feature2");
item2.setIcon(ApplicationShortcutItem.Icon.TASK);
HashMap<String,Object> map = new HashMap<>();
map.put("alpha", "beta");
item2.setUserInfo(map);
items.add(item2);
...
// Create more shortcut items, if desired, and once complete, configure the application with these shortcut items.
ApplicationShortcuts.setShortcutItems(items);
}
// Clear previously-created application shortcuts by passing an empty list to the setShortcutItems method
public void clearShortcuts(ActionEvent e)
{
System.out.println("In clearShortcuts");
List<ApplicationShortcutItem> items = new ArrayList<>();
ApplicationShortcuts.setShortcutItems(items);
}
// Listen for the event where end user invokes the application shortcut
// Consider registering this listener in your application’s LifeCycleListener start method, for example.
EventSourceFactory.getEventSource(EventSourceFactory.APPLICATION_SHORTCUT_EVENT_SOURCE_NAME).addListener(new ShortcutEventListener());
...
private final class ShortcutEventListener implements EventListener
{
@Override
public void onMessage(Event event)
{
ApplicationShortcutItem item = (ApplicationShortcutItem) event.getPayloadObject();
AdfmfJavaUtilities.setELValue("#{applicationScope.applicationShortcut}", item.toString());
// Once you get the event payload, decide what to do. The following example assumes that the shortcut(s) are
// implemented to navigate end users to application features within the MAF application.
if ("type1".equals(item.getType()))
AdfmfContainerUtilities.gotoFeature("feature1");
....
データ視覚化の指定
MAFでは、データ視覚化コンポーネントのセットを様々なチャート、ゲージおよびマップの作成に使用して、MAF AMXアプリケーション機能のデータを表すことができます。
MAF AMXファイルの<dvtm>ネームスペースの下で次の要素を宣言できます。
-
areaChart(「面グラフの作成方法」を参照) -
barChart(「棒グラフの作成方法」を参照) -
bubbleChart(「バブル・チャートの作成方法」を参照) -
comboChart(「コンボ・チャートの作成方法」を参照) -
lineChart(「線グラフの作成方法」を参照) -
pieChart(「円グラフの作成方法」を参照) -
scatterChart(「散布図の作成方法」を参照) -
sparkChart(「スパーク・チャートの作成方法」を参照) -
funnelChart(「ファンネル・チャートの作成方法」を参照) -
stockChart(「株価チャートの作成方法」を参照) -
ledGauge(「LEDゲージの作成方法」を参照) -
statusMeterGauge(「ステータス・メーター・ゲージの作成方法」を参照) -
dialGauge(「ダイアル・ゲージの作成方法」を参照) -
ratingGauge(「評価ゲージの作成方法」を参照) -
geographicMap(「地理マップ・コンポーネントの作成方法」を参照) -
thematicMap(「テーマ・マップ・コンポーネントの作成方法」を参照) -
treemap(「ツリーマップ・コンポーネントの作成方法」を参照) -
sunburst(「サンバースト・コンポーネントの作成方法」を参照) -
timeline(「時系列コンポーネントの作成方法」を参照) -
nBox(「NBoxコンポーネントの作成方法」を参照) -
pictoChart(統計図表の作成方法を参照)
チャート、ゲージ、マップおよび拡張コンポーネント要素には、すべてまたはほとんどに共通の多数の属性があります。Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
JDeveloperでは、データ視覚化コンポーネントは「コンポーネント」ウィンドウの次の場所にあります。
-
チャート・コンポーネントは、「MAF AMXデータ視覚化」→「共通」→「チャート」の下にあります。
-
ゲージ・コンポーネントは、「MAF AMXデータ視覚化」→「共通」→「ゲージ」の下にあります。
-
マップ・コンポーネントは、「MAF AMXデータ視覚化」→「共通」→「マップ」の下にあります。
-
ツリーマップ、サンバースト、時系列およびNBoxは、「MAF AMXデータ視覚化」→「共通」→「その他」の下にあります。
図14-71 「コンポーネント」ウィンドウのデータ視覚化コンポーネント
データ視覚化コンポーネントをトラック・アンド・ドロップすると、次のようなダイアログの1つが開き、作成しているコンポーネントのタイプに関する情報が表示されます。
-
モバイル・チャートの作成 (図14-72を参照)
図14-72 チャートの作成コンポーネント
-
モバイル・ゲージの作成 (図14-73を参照)
図14-73 ゲージの作成コンポーネント
-
コンポーネント・ギャラリ (図14-74を参照)
図14-74 マップの作成コンポーネント
-
サンバーストの作成(図14-75を参照)
図14-75 サンバーストの作成
注意:
コンポーネントの作成後、ソース・エディタまたは「構造」ビューでそのコンポーネントを選択し、「プロパティ」ウィンドウで「コンポーネント定義の編集」をクリックすることによって、作成ダイアログを再起動できます。
「プロパティ」ウィンドウで提供される同一の編集機能を使用すると、いくつかのデータ視覚化コンポーネントの子コンポーネント(データ・ポイント・レイヤーなど)を編集できます。
CompGalleryという名前のMAFサンプル・アプリケーションは、MAF AMXアプリケーション機能での様々なデータ視覚化コンポーネントの使用方法を示しています。このサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
MAF AMXデータ視覚化コンポーネントの詳細は、次を参照してください。
-
データ視覚化コンポーネントにイベント・リスナーを追加する方法の詳細は、「イベント・リスナーの使用方法」を参照してください。イベント・リスナーは、iOSおよびAndroidのどちらのデバイスでもMAF AMXの実行時の記述のためにコンポーネントに適用できますが、それらのリスナーは設計時には何の効果も持ちません。
-
「データ・コントロール」ウィンドウから作成されるデータバインドされたデータ視覚化コンポーネントの詳細は、「データバインドされたデータ視覚化コンポーネントの作成方法」を参照してください。
-
チャートおよびその他のデータ視覚化コンポーネント用の静的データの提供方法の詳細は、「静的データに基づくデータ視覚化コンポーネントの作成方法」を参照してください。
-
チャート・コンポーネントのインタラクティブ性の詳細は、「チャート・コンポーネントのインタラクティブ性を有効にする方法」を参照してください。
-
極チャートの作成の詳細は、「極チャートを作成する方法」を参照してください。
-
データ視覚化コンポーネントにおけるアクセシビリティのサポートの詳細は、「MAFのアクセシビリティのサポートの理解」を参照してください。
面グラフの作成方法
面グラフ(areaChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けれされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、面の色やパターンなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。カスタム系列スタイルの定義の詳細は、「線グラフの作成方法」を参照してください。
面グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。
次の例は、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>図14-76 デザインタイムの面グラフ
データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrowに次のプロパティが含まれている必要があります。
-
series: このデータ・アイテムが属する系列の名前。 -
group: このデータ・アイテムが属するグループの名前。 -
value: データ・アイテムの値。
コレクションのrowには、個々のデータ・アイテムに適用可能なcolorやmarkerShapeなどの他のプロパティも含めることもできます。
次の例に示すように、属性グループ(attributeGroups要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、chartDataItemのcolor属性およびmarkerShape属性は、追加のグループ化式に基づいて設定されます。
attributeGroups設定はデータ視覚化コンポーネント間で共有でき、属性値は対象のコンポーネント全体に自動的に適用されます。この機能を有効にするには、attributeGroupsのdiscriminant属性を設定します。同じdiscriminant値を持つコンポーネントは各自の設定(attributeGroupsのattributeMatchRule子要素の値など)を共有します。
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>
注意:
前の例および図14-76では、カスタム・スタイルが系列レベルで設定されていないため、系列はデフォルトの色傾斜に基づいた色で表示されます。
orientation属性では、面グラフを水平方向または垂直方向として定義できます。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、面グラフ・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-areaChart - supported properties: all
チャートのスタイル設定の詳細は、「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
棒グラフの作成方法
棒グラフ(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>図14-77 デザインタイムの棒グラフ
棒グラフのデータ・モデルは、個々の棒を記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。
-
series: この棒が属する系列の名前。 -
group: この棒が属するグループの名前。 -
value: データ・アイテムの値(必須)。
データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。
orientation属性では、棒グラフを水平方向または垂直方向として定義できます。
chartDataItemのxおよびy属性に加え、z属性を設定することにより、第3の次元となるバーの幅を有効にできます。これは、各バーが別々の重みを表す離散的なデータ・ポイントを記述するときに便利です。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、棒グラフ・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-barChart - supported properties: all
チャートのスタイル設定の詳細は、「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
レンジ・チャートの作成方法
レンジ・チャートによって、データ・アイテムの低値および高値をチャートに表示できます。
レンジ・チャートとしてレンダリングするように面グラフまたは棒グラフを構成するには、<dvtm:chartDataItem>子コンポーネントがサポートするlowおよびhigh属性の値を指定します。次の例は、レンジ・チャートをレンダリングするように面グラフを構成する方法を示しています。図14-78は、棒グラフ・コンポーネントによってレンダリングされたレンジ・チャートの例を示しています。
<dvtm:areaChart var="row" value="#{bindings.rangeData.collectionModel}" id="ac1">
<amx:facet name="dataStamp">
<dvtm:chartDataItem group="#{row.group}" series="#{row.series}" low="#{row.low}" high="#{row.high}" id="cdi1"/>
</amx:facet>
<dvtm:legend position="end" id="l1"/>
</dvtm:areaChart>図14-78 棒グラフでのレンジ・チャートのレンダリング
1つの範囲属性の値(lowまたはhigh)のみを指定している場合、MAFはデータ・アイテムをnullとして処理し、チャート上でそのアイテムをレンダリングしません。レンジ・チャートをレンダリングするには、lowとhighの両方の属性の値を指定する必要があります。ツールチップおよびデータ・カーソルは、データの高値および低値を表示します。
詳細は、次を参照してください。
バブル・チャートの作成方法
バブル・チャート(bubbleChart)は、各データ・アイテムがx座標、y座標およびサイズ(バブル)を持つ一連のデータ・アイテムを表示します。さらに、各データ・アイテムには、colorやmarkerShapeなど様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、線グラフ(「線グラフの作成方法」を参照)や面グラフ(「面グラフの作成方法」を参照)とは異なり、バブル・チャートには系列およびグループの厳密な概念がありません。
バブル・チャートは、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>図14-79 デザインタイムのバブル・チャート
次の例では、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として渡されます。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、バブル・チャート・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-bubbleChart - supported properties: all
チャートのスタイル設定の詳細は、「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
コンポ・チャートの作成方法
コンボ・チャート(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>図14-80 デザインタイムのコンポ・チャート
orientation属性では、コンボ・チャートを水平方向または垂直方向として定義できます。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、コンボ・チャート・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-comboChart - supported properties: all
チャートのスタイル設定の詳細は、「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
線グラフの作成方法
線グラフ(lineChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、線の色、太さ、スタイルなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。
線グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll属性を使用して有効化されます。
次の例は、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>図14-81 デザインタイムの線グラフ
データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrowに次のプロパティが含まれている必要があります。
-
series: この線が属する系列の名前。 -
group: この線が属するグループの名前。 -
value: データ・アイテムの値。
コレクションのrowには、個々のデータ・アイテムに適用可能なcolorやmarkerShapeなどの他のプロパティも含めることもできます。
次の例に示すように、属性グループ(attributeGroups要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、データ・アイテムのcolorおよびshape属性が、追加のグループ化式に基づいて設定されます。attributeGroupsには、次の子要素があります。
-
dvtmネームスペースのattributeExceptionRule: 特定のブール条件が満たされる場合に、属性値を別の値に置き換えます。 -
dvtmネームスペースのattributeMatchRule: データが特定の値に一致する場合に、属性を置き換えます。 -
amxネームスペースのattribute。
<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ファセットを定義し、seriesStamp要素を使用してカスタム系列スタイルを設定します。
<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>
orientation属性では、線グラフを水平方向または垂直方向として定義できます。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、線グラフ・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-lineChart - supported properties: all
チャートのスタイル設定の詳細は、「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
円グラフの作成方法
円グラフ(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>図14-82 デザインタイムの円グラフ
円グラフの区分ラベルの位置を構成するには、sliceLabelPosition属性を使用します。デフォルト(auto)で、区分内にラベルが収まる場合、ラベルは区分の内側に配置されます。それ以外は、区分の外側に配置されます。
selectionEffect属性を設定することにより、円グラフ・コンポーネントの展開(区分の間隔)効果を定義することもできます。
sliceGaps属性を使用すると、次の図に示すような、隣接する区分の間にギャップのある円グラフ・コンポーネントを作成できます。sliceGapsの値は、チャートにギャップのない0(デフォルト)から、最大のギャップを可能にする1の範囲です。
円グラフのデータ・モデルは、個々の円データ・アイテムを定義するアイテムのコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。
-
label: 区分ラベル。 -
value: 区分の値。
モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。
-
borderColor: 区分の境界線の色。 -
color: 区分の色。 -
explode: 区分を開くときのオフセット。
amxネームスペースからfacet子要素を定義できます。facetには、pieDataItemを子として含めることができます(「円グラフのデータ・アイテムの定義」を参照)。
円グラフをドーナツ・グラフとして構成
中心が空洞のドーナツのような円グラフ・コンポーネントを作成できます。
空いている領域(と、結果的にはドーナツの幅)のサイズを構成するには、pieChartのinnerRadius属性を使用します。また、ドーナツの中心部のテキストを指定するには、centerLabel属性を設定します。
図14-83 デザインタイムのドーナツ・グラフ
円グラフのスタイル設定
dvtm-pieChart、dvtm-chartPieLabel、dvtm-chartPieCenterLabelおよび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
-
ドーナツ・グラフの中心部のラベルのスタイルは、次のものを使用して設定できます。
.dvtm-chartPieCenterLabel - supported properties: font-family, font-size, font-weight, color, font-style
チャートのスタイル設定の詳細は、「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
散布図の作成方法
散布図(scatterChart)は、各アイテムがx座標、y座標およびサイズを持つデータ・アイテムを表す連続しないドットでデータを表示します。さらに、各データ・アイテムには、colorやmarkerShapeなど様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、線グラフ(「線グラフの作成方法」を参照)や面グラフ(「面グラフの作成方法」を参照)とは異なり、散布図には系列およびグループの厳密な概念がありません。
散布図は、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>図14-84 デザインタイムの散布図
散布図のデータ・モデルは、個々のデータ・アイテムを記述するアイテム(行)のコレクションによって表されます。各データ・アイテムの属性は、スタンプ(dataStamp)によって定義され、通常、次のものがあります。
-
x、y: 値の座標(必須)。 -
markerSize: マーカーのサイズ(オプション)。
モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。
-
borderColor: データ・アイテムの境界線の色。 -
color: データ・アイテムの色。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、散布図コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-scatterChart - supported properties: all
チャートのスタイル設定の詳細は、「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
スパーク・チャートの作成方法
スパークチャート(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> 図14-85 デザインタイムのスパーク・チャート
スパーク・チャートのデータ・モデルは、個々のスパーク・データ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。
-
value: スパーク値。
amxネームスペースからfacet子要素を定義できます。facetには、sparkDataItemを子として含めることができます(「スパーク・チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、スパーク・チャート・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-sparkChart - supported properties: all
チャートのスタイル設定の詳細は、「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
ファンネル・チャートの作成方法
ファンネル・チャート(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> 図14-86 デザインタイムのファンネル・チャート
ファンネル・チャートのデータ・モデルは、個々のファンネル・データ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。
-
value: ファンネル値 -
label: ファンネル区分ラベル
amxネームスペースからfacet子要素を定義できます。facetには、funnelDataItemを子として含めることができます(「ファンネルのデータ・アイテムの定義」を参照)。
クラスdvtm-funnelChartおよびdvtm-funnelDataItemで定義されているデフォルトCSS設定を上書きすることで、ファンネル・チャート・コンポーネントをスタイル設定できます。
-
トップレベル要素は次を使用してスタイル設定できます。
.dvtm-funnelChart - supported properties: all
-
ファンネル・チャートのデータ・アイテムは次を使用してスタイル設定できます。
.dvtm-funnelDataItem - supported properties: border-color, background-color
チャートのスタイル設定の詳細は、「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
株価チャートの作成方法
株価チャート(stockChart)コンポーネントは、特定の日の様々な時点での株価の始値、終値、安値および高値を表示します。始値および終値を表示するローソク・バーは、通常、その日に株価が上昇したときに緑色で、終値が始値より低い場合に赤色で表示されます。
次の例は、MAF AMXファイルで定義されたstockChart要素を示しています。dataStampファセットにはstockDataItem要素が含まれています。
<dvtm:stockChart id="stockChart1"
dataCursor="#{pageFlowScope.dataCursor}"
dataCursorBehavior="#{pageFlowScope.dataCursorBehavior}"
dataSelection="#{pageFlowScope.dataSelection}"
emptyText="No data found"
footnote=""
footnoteHalign="#{pageFlowScope.footnoteHalign}"
inlineStyle="width: 100%; height:#{DvtProperties.hostedMode ?
'400px' : deviceScope.hardware.screen.availableHeight-200}px"
shortDesc="Stock Chart"
styleClass="dvtm-gallery-component"
subtitle="#{pageFlowScope.subtitle}"
title="#{pageFlowScope.title}"
titleHalign="#{pageFlowScope.titleHalign}"
value="#{bindings.stockChartData.collectionModel}"
var="row"
volumeColor="#{pageFlowScope.volumeColor}"
zoomAndScroll="#{pageFlowScope.zoomAndScroll}"
timeAxisType="mixedFrequency"
animationOnDataChange="auto"
animationOnDisplay="auto"
viewportChangeListener="#{StockChartDataList.ViewportListener}">
<amx:facet name="dataStamp">
<dvtm:stockDataItem id="cdi1
close="#{row.close}"
high="#{row.high}"
low="#{row.low}"
open="#{row.open}"
volume="#{row.volume}"
x="#{row.x}"
series="BTC"
shortDesc="Stock Data Item">
</dvtm:stockDataItem>
</amx:facet>
<amx:facet name="seriesStamp">
<dvtm:seriesStyle series="BTC"
type="#{pageFlowScope.seriesType}"
id="ss1">
</dvtm:seriesStyle>
</amx:facet>
<amx:facet name="overview">
<dvtm:overview id="ovw" rendered="#{pageFlowScope.overview}">
</dvtm:overview>
</amx:facet>
<dvtm:xAxis id="xAxis"
viewportMinValue="#{pageFlowScope.viewportMinValue}"
viewportMaxValue="#{pageFlowScope.viewportMaxValue}">
</dvtm:xAxis>
<dvtm:y2Axis id="y2Axis">
<dvtm:tickLabel id="y2TickLabel"
rendered="#{pageFlowScope.showY2}"
scaling="none">
<amx:convertNumber id="cn5"
type="number"
minFractionDigits="1"
maxFractionDigits="1"/>
</dvtm:tickLabel>
</dvtm:y2Axis>
<dvtm:chartValueFormat id="cvf2label"
type="close">
<amx:convertNumber id="closeConvertNumber"
type="currency"
minFractionDigits="1"
maxFractionDigits="1"
currencySymbol="$"/>
</dvtm:chartValueFormat>
<dvtm:chartValueFormat id="cvf2label1"
type="high"
scaling="none">
<amx:convertNumber id="highConvertNumber"
type="currency"
minFractionDigits="1"
maxFractionDigits="1"
currencySymbol="$"/>
</dvtm:chartValueFormat>
<dvtm:chartValueFormat id="cvf2label2"
type="low"
scaling="none">
<amx:convertNumber id="lowConvertNumber"
type="currency"
minFractionDigits="1"
maxFractionDigits="1"
currencySymbol="$"/>
</dvtm:chartValueFormat>
<dvtm:chartValueFormat id="cvf2label3"
type="open"
scaling="none">
<amx:convertNumber id="openConvertNumber"
type="currency"
minFractionDigits="1"
maxFractionDigits="1"
currencySymbol="$"/>
</dvtm:chartValueFormat>
<dvtm:chartValueFormat id="cvf2label4"
type="volume"
scaling="none">
<amx:convertNumber id="cn6"
type="number"
minFractionDigits="1"
maxFractionDigits="1"/>
</dvtm:chartValueFormat>
<dvtm:yAxis id="yAxis">
<dvtm:tickLabel id="tc1" scaling="none">
<amx:convertNumber id="yAxisConvertNumber"
type="currency"
minFractionDigits="1"
maxFractionDigits="1"
currencySymbol="$"/>
</dvtm:tickLabel>
<dvtm:referenceLine id="rl2"
color="rgb(255,128,0)"
lineWidth="1"
lineStyle="solid"
location="front"
lineType="straight"
text="Technical analysis"
shortDesc="Technical Analysis"
displayInLegend="off"
rendered="#{pageFlowScope.technicalAnalysis}">
<amx:iterator var="ref"
value="#{bindings.stockReferenceData2.collectionModel}"
id="i2">
<dvtm:referenceLineItem value="#{ref.value}" x="#{ref.x}" id="rli2"/>
</amx:iterator>
</dvtm:referenceLine>
<dvtm:referenceLine id="rl1"
color="#008000"
lineWidth="1"
lineStyle="solid"
location="front"
lineType="straight"
text=""
shortDesc="Total Transaction Fees"
displayInLegend="off"
rendered="#{pageFlowScope.transactionFees}">
<amx:iterator var="ref"
value="#{bindings.stockReferenceData.collectionModel}"
id="i1">
<dvtm:referenceLineItem value="#{ref.value}" x="#{ref.x}" id="rli1"/>
</amx:iterator>
</dvtm:referenceLine>
</dvtm:yAxis>
<dvtm:chartValueFormat id="cvf1"
type="y"
scaling="none"/>
</dvtm:stockChart>
図14-87 設計時の株価チャート
株価チャートのデータ・モデルは、個々の株価データ・アイテムを記述するアイテム(行)のコレクションによって表されます。
amxネームスペースからfacet子要素を定義できます。facetには、stockDataItemを子として含めることができます(「株価のデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトのCSS設定を上書きすることで、株価コンポーネントのスタイルを設定できます。
-
dvtm-stockChart-rising -
dvtm-stockChart-falling -
dvtm-stockChart-range
チャートのスタイル設定の詳細は、「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
チャート・コンポーネントのスタイル設定方法
スパーク・チャートを除き、次のクラスで定義されているデフォルト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
チャート・コンポーネントのトップレベル要素のスタイル設定に加え、一部のチャートの特定の子要素をスタイル設定できます。
チャート・コンポーネントでのイベントの使用方法
ViewportChangeEventを使用して、チャート・コンポーネントのズームおよびスクロールを処理できます。ズームまたはスクロールのいずれかが発生すると、コンポーネントは、新しいビューポートを定義する情報でロードされるイベントを起動します。
viewportChangeListenerは、面グラフ、棒グラフ、コンボ・チャートおよび線グラフ・コンポーネントの属性として指定できます。
DrillEventを使用して、グラフ・コンポーネントのドリルを処理できます。ドリルが発生すると、コンポーネントはこのイベントを起動します。
drillListenerは、任意のチャート・コンポーネントの属性として指定できます。さらに、詳細なドリル制御を指定するため、chartDataItem、funnelDataItem、pieDataItemおよびseriesStyleのdrilling属性を使用できます。
「イベント・リスナーの使用方法」を参照してください。
チャート・ツールチップのカスタマイズに関する必知事項
MAF AMXのチャート値フォーマット(chartValueFormat)子コンポーネントでは、次の例に示すように、ラベルを指定してツールチップ内の値の表示を無効にすることによって、チャート・コンポーネントのツールチップをカスタマイズできます。
<dvtm:barChart id="bc1" var="row" value="bindings.Data.collectionModel"> <amx:facet name="dataStamp"> <dvtm:chartDataItem id="cdi1" series="row.series" group="row.group" value="row.value"/> </amx:facet> <dvtm:chartValueFormat id="cvf1" type="value" tooltipLabel="Revenue"> <amx:convertNumber ... /> </dvtm:chartValueFormat> <dvtm:chartValueFormat id="cvf2" type="series" tooltipLabel="Region"/> <dvtm:chartValueFormat id="cvf3" type="groups" tooltipLabel="Product Type"/> </dvtm:barChart>
カテゴリ軸でのチャートのソートを有効にする方法
棒グラフ、線グラフ、面グラフおよびコンボ・チャート・コンポーネントのsorting属性を使用すると、その値によるチャート・カテゴリのソートを有効にできます。たとえば、棒グラフのバーで表される国々をそのGDPの昇順または降順で表示できます。デフォルトでは、ソートは無効になっています。
チャートの初期ズームを定義する方法
棒グラフ、線グラフ、面グラフおよびコンボ・チャート・コンポーネントのinitialZooming属性を使用すると、現在のチャートのサイズで使用可能なチャートのズーム・レベルを自動的に設定しながら、グラフの初期状態で最初または最後のいずれのデータ・ポイントを表示するかを指定できます。デフォルトでは、初期ズームは無効になっています。
特定のチャート系列のスタックを定義する方法
棒グラフ、横棒グラフ、線グラフ、面グラフおよびコンボ・チャート・コンポーネントでは、stack属性がサポートされており、データ系列を積み重ねて表示できます。この属性を単独で使用する場合は、チャート内のデータ系列のすべてにスタックを適用するか、またはすべてに適用しないかのいずれかです。チャート内のいくつかの系列のスタックを有効にして、その他を無効にするには、子コンポーネントである系列スタイル(seriesStyle)のstackCategory属性と、親チャートのstack属性を同時に使用します。チャートのstack属性をonに設定し、系列スタイルのstackCategory属性を指定して、チャート内の特定の系列をどのようにスタックするかを定義します。
チャートの二重-Y軸分割を有効にする方法
棒グラフ、線グラフ、面グラフおよびコンボ・チャート・コンポーネントのsplitDualY属性を使用すると、Y2軸を使用するチャートで、同じX軸を共有するスタックされたプロット領域に2つのデータ・セットを別々に表示できます。デフォルトでは、この機能は無効になっています。
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>
図14-88 デザインタイムのLEDゲージ
LEDゲージのデータ・モデルは、value属性で指定される単一のメトリック値で表されます。
次のamx子要素を定義できます。
-
showPopupBehavior(「ポップアップ・コンポーネントの使用方法」を参照) -
closePopupBehavior(「ポップアップ・コンポーネントの使用方法」を参照) -
validationBehavior(「入力の検証」を参照)
ステータス・メーター・ゲージの作成方法
ステータス・メーター・ゲージ(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>
図14-89 デザインタイムの長方形のステータス・メーター・ゲージ
垂直の矩形で表したステータス・メーター・ゲージを作成するには、そのorientation属性をverticalに設定します。デフォルトでは、この属性はhorizontalに設定されいるため、横向きの長方形になります。
円形で表される(図14-90を参照)ステータス・メーター・ゲージを作成するには、orientation属性をcircularに設定します。
図14-90 デザインタイムの円形のステータス・メーター・ゲージ
ステータス・メーター・ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。
次のamx子要素を定義できます。
-
showPopupBehavior(「ポップアップ・コンポーネントの使用方法」を参照) -
closePopupBehavior(「ポップアップ・コンポーネントの使用方法」を参照) -
validationBehavior(「入力の検証」を参照)
ダイアル・ゲージの作成方法
ダイヤル・ゲージ(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>図14-91 デザインタイムのダイヤル・ゲージ
ダイヤル・ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。
次の例は、暗い背景テーマと、-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>図14-92 メトリック・ラベルおよびティック・ラベルの付いたデザインタイムのダイアル・ゲージ
dialGaugeに対して次のamx子要素を定義できます。
-
showPopupBehavior(「ポップアップ・コンポーネントの使用方法」を参照) -
closePopupBehavior(「ポップアップ・コンポーネントの使用方法」を参照) -
validationBehavior(「入力の検証」を参照)
評価ゲージの作成方法
評価ゲージ(ratingGauge)を使用すると、事前定義された視覚スケールに評価を表示したり、その評価を変更できます。デフォルトの評価単位は、星で表されます。ratingGaugeのshape属性を設定することによって、これを円、人間、矩形、星形、三角形またはひし形として構成できます。そのorientationプロパティの値を設定することで、垂直または水平にレンダリングすることもできます。デフォルトでは、水平にレンダリングされます。
次の例は、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>図14-93 デザインタイムの評価ゲージ
評価ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。
ratingGaugeに対して次のamx子要素を定義できます。
-
showPopupBehavior(「ポップアップ・コンポーネントの使用方法」を参照) -
closePopupBehavior(「ポップアップ・コンポーネントの使用方法」を参照) -
validationBehavior(「入力の検証」を参照)
shortDesc属性の上書き
ratingGaugeのshortDesc属性の値は、threshold子要素のshortDesc属性を設定することによって上書きできます。指定されると、ratingGaugeのvalue属性が指定されたしきい値に到達するたびに、thresholdのshortDescによって親のshortDescが置き換えられます。
次の例は、評価ゲージ・コンポーネントのshortDesc属性を上書きする方法を示しています。
<dvtm:ratingGauge id="ratingGauge1"
value="#{pageFlowScope.value}"
minValue="#{pageFlowScope.minValue}"
maxValue="#{pageFlowScope.maxValue}"
shortDesc="#{pageFlowScope.shortDesc}"
inputIncrement="#{pageFlowScope.inputIncrement}"
inlineStyle="#{pageFlowScope.inlineStyle}"
<dvtm:threshold id="tr1" maxValue="2" shortDesc="Performance: Poor"/>
<dvtm:threshold id="tr2" maxValue="3" shortDesc="Performance: Average"/>
<dvtm:threshold id="tr3" maxValue="4" shortDesc="Performance: Good"/>
<dvtm:threshold id="tr4" maxValue="5" shortDesc="Performance: Excellent"/>
</dvtm:ratingGauge>評価ゲージ・コンポーネントへのカスタム・スタイルの適用
エンド・ユーザーが評価ゲージ・コンポーネントに対して実行したアクションに応じて、評価単位(イメージ)は次のいずれかの状態を取得できます。
-
selected: 単位を選択した場合。
-
unselected: 単位を選択しなかった場合。
-
changed: 単位を変更した場合。
-
hover: 単位にマウスを置いた場合。
注意:
タッチ・インタフェースを使用するモバイル・デバイスでは、hover状態はタップしたまま押さえるジェスチャーを通じて呼び出されます。
各状態は、独自のイメージの配列と、色および枠線の色を定義するプロパティで表現できます。
デフォルトでは、ratingGaugeのshape属性によって、hoverおよびchanged状態の選択内容が決まります。unselected状態は、ratingGaugeのunselectedShape属性を使用して個別に設定できます。
デフォルトCSS設定を上書きすることで、評価ゲージ・コンポーネントをスタイル設定できます。CSSファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
次に、評価ゲージ単位の各状態の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;
}チャートおよびゲージ・コンポーネントの子要素の定義方法
チャートおよびゲージには様々な子要素を定義できます。それらの子要素のいくつかを次に示します。
-
chartDataItem(「チャートのデータ・アイテムの定義」を参照) -
xAxis、yAxisおよびy2Axis(「X軸、Y軸およびY2軸の定義および構成」を参照) -
legend(「凡例の定義および構成」を参照) -
pieDataItem(「円グラフのデータ・アイテムの定義」を参照) -
sparkDataItem(「スパーク・チャートのデータ・アイテムの定義」を参照) -
threshold(「しきい値の定義」を参照) -
funnelDataItem(「ファンネルのデータ・アイテムの定義」を参照) -
stockDataItem(「株価のデータ・アイテムの定義」を参照)
JDeveloperでは、データ視覚化コンポーネントの子コンポーネントは、「コンポーネント」ウィンドウの「MAF AMXデータ視覚化」→「共有子タグ」の下および「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」の下にあります(図14-94を参照)。
図14-94 チャートおよびゲージの子コンポーネントの作成
チャートのデータ・アイテムの定義
チャート・データ・アイテム(chartDataItem)要素は、円グラフを除くすべてのサポートされているチャートでチャート・データ・アイテムが使用するパラメータを指定します。
チャート・データ・アイテムでのテキスト表示を有効化でき、chartDataItem要素の関連する属性を設定することで、そのラベル、ラベル位置およびラベル・スタイルを制御でき、さらに、チャート自体のdataLabelPosition属性を設定することで指定されたチャートのすべてのデータ・ラベルの位置を指定できます。
注意:
散布図、円グラフおよびファンネル・チャートのコンポーネントでは、dataLabelPosition属性はサポートされていません。
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" />
軸用のグラフ領域のサイズをカスタマイズするには、X軸、Y軸およびY2軸コンポーネントのsize属性とmaxSize属性を使用します。また、軸ベースラインの色、幅およびスタイルをカスタマイズするには、その主ティック子要素を構成します。
スパーク・チャートのデータ・アイテムの定義
スパーク・チャートのデータ・アイテム(sparkDataItem)要素は、スパーク・チャート・アイテムのパラメータを指定します(「スパーク・チャートの作成方法」を参照)。
ファンネル・データ・アイテムの定義
ファンネル・データ・アイテム(funnelDataItem)要素は、ファンネル・チャート・アイテムのパラメータを指定します(「ファンネル・チャートの作成方法」を参照)。
地理マップ・コンポーネントの作成方法
地理マップ(geographicMap)は、1つのマップに重ね合せた1つ以上のインタラクティブな情報レイヤーでデータを表します。このコンポーネントが基礎となるマップ・プロバイダとしてGoogleマップまたはOracle Maps Cloud Serviceを使用するように構成します。マップ・プロバイダを指定しない場合、コンポーネントはGoogleマップを使用します。
図14-95 は、CompGalleryサンプル・アプリケーションのgeographicMapコンポーネントを示しています。
図14-95 CompGalleryサンプル・アプリケーションの地理マップ
geographicMapコンポーネントは、安定している最新v3バージョンのGoogle Maps JavaScript APIを使用します。
geographicMapに対してpointDataLayer子要素を定義できます。pointDataLayerを使用すると、ポイントに関連するデータをマップ上に表示できます。pointDataLayerは子要素としてpointLocationを持つことができます。pointLocationは、データ・ポイントの位置を決定するデータ・レイヤーのモデル内の列を指定します。これらの位置は、住所またはX座標とY座標で表すことができます。
pointLocationは、子要素としてmarkerを持つことができます。markerは、マップ上のデータ・ポイントに関連付けられた組込み形状またはカスタム形状をスタンプ・アウトするために使用します。markerでは、マーカーとしてレンダリングされるイメージのURIを指定するための一連のプロパティがサポートされています。マーカーは子要素としてconvertNumberを持つことができます(「数値の変換方法」を参照)。また、ポップアップ(「ポップアップ・コンポーネントの使用方法」を参照)を有効にして、geographicMapのmarkerに表示されるようにできます。そのためには、次の例に示すように、showPopupBehavior要素をmarker要素の子として宣言し、showPopupBehaviorのalignId属性をmarkerのid属性の値に設定します。
<dvtm:geographicMap id="geographicMap_1" shortDesc="#{pageFlowScope.shortDesc}">
<dvtm:pointDataLayer id="pdl1"
var="row"
value=
"#{bindings.geographicMapPointData.collectionModel}">
<dvtm:pointLocation id="pl1"
pointX="#{row.pointX}"
pointY="#{row.pointY}">
<dvtm:marker id="marker1"
shortDesc="#{row.shortDesc}"
rendered="true">
<amx:showPopupBehavior id="spb1"
popupId="popup1"
alignId="marker1"
align="topCenter"
decoration="anchor"/>
<amx:setPropertyListener from="#{row.shortDesc}"
to="#{pageFlowScope.currentCity}"
type="action"/>
</dvtm:marker>
</dvtm:pointLocation>
</dvtm:pointDataLayer>
</dvtm:geographicMap>
...
<amx:popup id="popup1" backgroundDimming="off" autoDismiss="true">
<amx:outputText id="otTest" value="City: #{pageFlowScope.currentCity}"/>
...
</amx:popup>
geographicMapコンポーネントでは、タッチ・ジェスチャーを使用したピンの挿入(マップ上での点の作成)が可能です。この機能を構成するには、mapInputListenerを使用します。「Mapコンポーネントでのイベントの使用方法」を参照してください。
geographicMapコンポーネントに関連するタスクの詳細は、次を参照してください。
地理プロバイダ情報を指定した地理マップ・コンポーネントの構成
基礎となるマップに特定のプロバイダ(GoogleまたはOracle)を使用するようにgeographicMapコンポーネントを構成するには、アプリケーションのadf-config.xmlファイルに名前と値のペアとして次のプロパティを設定します。
-
mapProvider:oraclemapsまたはgooglemapsを指定します。 -
geoMapKey:mapProviderがgooglemapsに設定されている場合は、ライセンス・キーを指定します。 -
geoMapClientId:mapProviderがgooglemapsに設定されている場合は、Googleマップ・ビジネス・ライセンスのクライアントIDを指定します。 -
mapViewerUrl:mapProviderがoraclemapsに設定されている場合は、Oracle Maps Cloud Serviceのマップ・ビューアURLを指定します。 -
baseMap:mapProviderがoraclemapsに設定されている場合は、Oracle Maps Cloud Serviceとともに使用するベース・マップを指定します。
注意:
Googleマップを使用するようにgeographicMapコンポーネントを構成するには、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>
Googleマップのライセンスがないと、アドレス解決を可能にするジオコーディング・サービスへのアクセスが制限されます。許可されている制限を超過すると、MAFは、ジオコーディング・サービスによって生成されるエラー・メッセージ用のハンドラを提供します。アドレス・ポイントの最大許容数を超過する場合、実行時にこれらのメッセージは表示されます。1秒当たり10リクエストに制限されているリクエストの数、および冗長リクエストの数はジオコーディングAPIに送られません。
次の表に示されたエラー・メッセージをモニターします。
表14-10
| エラーID | メッセージ | 説明 |
|---|---|---|
|
|
GeoCoder割当て制限を超過しました。 |
割当て制限を超過していることを示しています。 |
|
|
リクエストが拒否されました。APIキーおよびクライアントIDを確認します。 |
リクエストに、 |
注意:
Oracle Maps Cloud Serviceを使用する場合は、「使用条件」と業者向け通知を順守する必要があります。Oracle Maps Cloud Serviceは、http://www.oracle.com/us/corporate/contracts/maps-cloud-hd-policies-2767907.pdfで示されているOracle Maps Cloud Serviceエンタープライズ・ホスティングおよび配信ポリシーの規約の下に提供されます。
次の例は、Oracle Maps Cloud Service用の構成を示しています。
<adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties">
<adf-property name="mapProvider" value="oraclemaps"/>
<adf-property name="mapViewerUrl" value="your-mapviewer-server-url"/>
<adf-property name="baseMap" value="your-basemap-id"/>
</adf-properties-child>iOSデバイス上で実行されるMAFアプリケーションは、Apple iOSのアプリケーション・トランスポート・セキュリティ(ATS)ポリシーの要件を満たすために、アプリケーションからサービスへのすべての接続にHTTPSを使用する必要があります。MAFアプリケーションをiOSにデプロイしている場合は、次のいずれかのオプションを使用してアプリケーションを構成し、geographicMapコンポーネントがOracle Maps Cloud ServiceをiOSデバイスでレンダリングできるようにします。
-
MAFアプリケーションをデプロイするときにATSを無効にします。「iOSビルド・オプション」を参照してください。このオプションはお薦めできません。
-
HTTPSリクエストを受け入れるようにOracle Maps Cloud Serviceサービスを構成し、geographicMapコンポーネントがHTTPSを使用するようにMAFアプリケーションを構成します。後者の構成は、アプリケーションのadf-config.xmlファイルで実行します。次の例は、geographicMapコンポーネントがOracle Maps Cloud ServiceをiOS デバイス上でレンダリングできるように、アプリケーションのadf-config.xmlファイルを構成する方法を示しています。<adf:adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties"> <adf-property name="mapProvider" value="oracleMaps"/> <!-- Configure the URL for the mapviewer service that provides map data--> <adf-property name="mapViewerUrl" value="https://elocation.myserver.com/mapviewer"/> <!-- Configure the URL for the eLocation service that provides geocoding services, such as address resolution, directions, and so on --> <adf-property name="eLocationUrl" value="https://elocation.myserver.com/elocation"/> </adf:adf-properties-child> . . . </adf-config>
adf-config.xmlファイルの詳細は、「アプリケーション・コントローラ・プロジェクト・レベルのリソースについて」を参照してください。
地理マップ・コンポーネントでのルートの表示
geographicMapコンポーネントで、ルート(route)子コンポーネントを追加することで、想定されるウェイポイントを設定して、2点間のルートを表示できます。GoogleマップまたはOracle Maps Cloud Serviceは、どちらも、このユースケースを実装するためのプロバイダとして使用できます。
各geographicMapコンポーネントには、ルートの子コンポーネントを複数設定して、それぞれに1つのルートを指定できます。ルートの出発点、目的地およびオプションでウェイポイントを指定するには、地理マップの点の位置子コンポーネントを使用します。慣例的に、セット内の最初の点の位置は出発点を、最後の点の位置は目的地をそれぞれ定義します。この2つの点の位置に挟まれているすべての点がルートのウェイポイントです。
マップ上のルート表示に使用する線の色、幅および不透明度を定義できます。また、車、自転車または徒歩のうち、どの手段のルートを優先するか、ヒントを指定することも可能です。
次の例は、MAF AMXページのroute要素の定義方法を示しています。
<dvtm:geographicMap id="gm1">
<!-- route defined using a collection model -->
<dvtm:route travelMode="driving" id="d1">
<amx:iterator value="#{el.collectionModel}" var="row">
<dvtm:pointLocation address="#{row.address}" type="address"/>
</amx:iterator>
</dvtm:route>
<!-- route with explicitly defined start and destination -->
<dvtm:route travelMode="driving|walking|bicycling" id="d2">
<!-- route origin -->
<dvtm:pointLocation address="#{pageFlowScope.origin}" type="address">
<!-- route destination -->
<dvtm:pointLocation address="#{pageFlowScope.destination}" type="address"/>
</dvtm:route/>
<dvtm:pointDataLayer id="pdl1">
...
</dvtm:pointDataLayer>
<dvtm:pointDataLayer id="pdl2">
...
</dvtm:pointDataLayer>
</dvtm:geographicMap>
エンド・ユーザーがルートを表す線の上でクリックまたはタップすると、ActionEventが起動します。このイベントを使用すると、action属性を経由してナビゲーションを開始したり、actionListener属性を使用してJavaレイヤーのハンドラを起動したりできます。このアクションは、setPropertyListener、actionListener、showPopupBehaviorおよびshowPopupBehavior子要素で指定されたイベント・リスナーと動作をトリガーする場合にも使用できます。「イベント・リスナーの使用方法」を参照してください。
テーマ・マップ・コンポーネントの作成方法
テーマ・マップ(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>図14-96 デザインタイムのテーマ・マップ
markerZoomBehavior属性を使用すると、マップがズームされるとテーマ・マップのマーカーのスケール変更が有効化されます。rotation属性を設定することで、マーカーの回転を有効化でき、この属性の値は、イメージの中心に対してマーカーが回転する(時計回りの度数)角度を表します。
MAF AMXテーマ・マップは、次の拡張機能をサポートしています。
-
カスタム・マーカー(「カスタム・マーカーの定義」を参照)
-
領域の分離(「分離領域の定義」を参照)
-
初期ズーム(「初期ズームの有効化」を参照)
-
カスタム・ベース・マップ(「カスタム・ベース・マップの定義」を参照)
カスタム・マーカーの定義
MAF AMXテーマ・マップでは、MAF AMXイメージ・コンポーネントはサポートされていません。マップのpointLocation内でイメージを使用するには、pointLocationのmarker子要素で、そのsource 属性を使用してイメージを指定します。source属性がマーカーに対して設定されている場合、そのshape属性はMAF AMXで無視されます。
sourceHover、sourceSelectedおよびsourceHoverSelected属性で、ホバーおよび選択効果のイメージを指定できます。これらの1つが指定されていない場合、その特定のマーカー状態に対してはsource属性によって指定されているイメージが使用されます。sourceSelectedが指定されている場合、sourceHoverSelectedが指定されていないときはその値が使用されます。イメージは、PNG、JPG、SVGなどモバイル・デバイスのブラウザでサポートされている任意のフォーマットで構いません。
分離領域レイヤーの定義
データの地理的場所の伝達にリージョン・アウトラインが常に必要であるわけではありません。かわりに、テーマ・マップ・コンポーネントには、領域内でイメージやマーカーをセンタリングするためのオプションがあるため、リージョン・アウトラインが描画されない見えない領域レイヤーを定義するオプションがあります。
見えない領域レイヤーを定義するには、CSS値のbackground-colorおよびborder-colorを受け入れるareaLayerのareaStyle属性を使用します。
<dvtm:areaLayer id="areaLayer1" ... areaStyle="background-color:transparent;border-color:transparent">
この属性によって、dvtm-areaスキニング・キーを使用することなく、デフォルトの領域レイヤーの色および枠線の形状をオーバーライドできます。
分離領域の定義
MAF AMXテーマ・マップ・コンポーネントを構成し、areaDataLayerのisolatedRowKey属性を使用してマップの単一の分離領域に収まるようにレンダリングおよびズームできますが、この場合、その領域または領域データ・レイヤーの残りの領域はレンダリングされません。
注意:
分離できるのは、1つのマップで1つの領域のみです。
初期ズームの有効化
初期ズームでは、マップ・コンポーネントを通常どおりレンダリングし、その後、マーカーと領域の両方を含むデータ・オブジェクトにズームして合せることができます。この機能を有効にするには、テーマ・マップのinitialZooming属性を使用します。
カスタム・ベース・マップの定義
カスタム・ベース・マップ・サポートの一環として、MAF AMXでは、テーマ・マップ・コンポーネントに対して次のことを指定できます。
-
様々な解像度のイメージを持つレイヤー。
-
点の位置(
pointLocation)から参照できる名前付きの点を持つ点レイヤー。 -
カスタム・ベース・マップ・メタデータXMLファイルを指すテーマ・マップの
source属性。
注意:
MAF AMXでは、カスタム・ベース・マップは次のことはサポートされていません。
-
定型化された領域: 領域レイヤーはカスタム・ベース・マップに定義できないため、ポイント・レイヤーを使用します。
-
リソース・バンドル: ロケール固有のツールチップを追加するには、マーカー(
marker)のshortDesc属性でELを使用します。
カスタム・ベース・マップを作成するには、メタデータ・ファイルの定義を指す領域レイヤーを指定します(次の例を参照)。基本的なカスタム・ベース・マップを定義するには、背景レイヤーおよびポインタ・データ・レイヤーを指定します。MAF AMXゲージ・コンポーネントと同様に、メタデータ・ファイルで、画面解像度および表示方向ごとに異なるイメージを指定できます。ゲージタイプ・コンポーネントと同様に、テーマ・マップでは、画面解像度および方向に基づいてレイヤーに適切なイメージが選択されます。表示方向は左から右です。
レイヤーはいくつでも定義できます。すべてのレイヤーではすべての名前付きポイントにアクセスできます。名前付きポイントのX位置とY位置は、最初のイメージのイメージ・サイズにマッピングされます。次のいずれかが起きると、テーマ・マップ・コンポーネントはポイントの位置を計算します。
-
ズーム・インが実行されます。
-
違ったイメージが違った解像度で表示されます。
<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ファイルを示しています。
<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>
前の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データ視覚化では、markerのactionListener属性はサポートされていません。かわりに、action属性を使用することで、同じ機能を実現できます。
テーマ・マップ・コンポーネントへのカスタム・スタイルの適用
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、テーマ・マップ・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
次の例は、テーマ・マップ・コンポーネントのデフォルト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オブジェクトの名前およびプロパティ名は変更できません。かわりに、特定のプロパティ値を、アプリケーションのニーズに合わせて変更できます。カスタムCSSおよびJavaScriptファイルをアプリケーションに追加する方法の詳細は、「アプリケーション機能のコンテンツをMAF AMXページまたはタスク・フローとして定義する方法」を参照してください。
attributeGroups属性がテーマ・マップ・コンポーネント用に定義されている場合、CustomThematicMapStyleを使用して、そのコンポーネントの図形と色のデフォルト・セットを定義できます。この場合、CustomThematicMapStyleオブジェクトの構造は、次の例のようになっている必要があります。styleDefaultsは、次のフィールドを含むネストされたオブジェクトです。
-
colors: 領域とマーカーに使用される色のセットを表します。 -
shapes: マーカーに使用される図形のセットを表します。
window['CustomThematicMapStyle'] =
{
// custom style values
'styleDefaults': {
// custom color palette
'colors': ["#000000", "#ffffff"],
// custom marker shapes
'shapes' : ['circle', 'square']
}
};Mapコンポーネントでのイベントの使用方法
MapBoundsChangeEventを使用して、地図マップ・コンポーネントでの次のマップ・ビューのプロパティ変更を処理できます。
-
ズーム・レベルに対する変更。
-
マップ境界に対する変更。
-
マップの中心に対する変更。
これらの変更が発生すると、コンポーネントは、新しいマップ・ビューのプロパティ値でロードされるイベントを起動します。
mapBoundsChangeListenerを地理マップの属性として定義できます。
地理マップ・コンポーネントで、MapInputEventを使用してタップおよびマウス・クリックなどのエンド・ユーザー・アクションを処理できます。これらのアクションが発生すると、コンポーネントは、マップの緯度および経度、およびアクションのタイプ(マウス・ダウン、マウス・アップ、クリックなど)に関する情報でロードされるイベントを起動します。
mapInputListenerを地理マップ・コンポーネントの属性として定義できます。
詳細は、次の項を参照してください。
ツリーマップ・コンポーネントの作成方法
ツリーマップ(treemap)は、2つのディメンションに渡って(そのノードのサイズおよび色で)階層データを表示します(treemapNode)。
「コンポーネント」ウィンドウで、「ツリーマップ」は「MAF AMXデータ視覚化」→「共通」→「その他」の下にあり、その子コンポーネントは「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」→「サンバーストおよびツリーマップ」および「MAF AMXデータ視覚化」→「共有子タグ」の下にあります(図14-97を参照)。
図14-97 ツリーマップ・コンポーネント
次の例は、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>
図14-98 デザインタイムのツリーマップ
attributeGroups要素のattributeType属性をcontinuousに設定することで、グラデーション色を使用してツリーマップ・アイテムに関連付けられている値の視覚化を有効にでき、この色の強度は指定された範囲内の相対値を表します。
ツリーマップ・コンポーネントへのカスタム・スタイルの適用
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、ツリーマップ・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
次の例は、オーバーライドできるツリーマップ・コンポーネントのデフォルトの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"
},
}サブバースト・コンポーネントの作成方法
サンバースト(sunburst)は、2つのディメンションに渡って(そのノードのサイズおよび色で)階層データを表示します(sunburstNode)。
「コンポーネント」ウィンドウで、「サンバースト」は「MAF AMXデータ視覚化」→「共通」→「その他」の下にあり、その子コンポーネントは「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」→「サンバーストおよびツリーマップ」および「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>図14-99 デザインタイムのサンバースト
attributeGroups要素のattributeType属性をcontinuousに設定することで、グラデーション色を使用してサンバースト・アイテムに関連付けられている値の視覚化を有効にでき、この色の強度は指定された範囲内の相対値を表します。
サンバースト・コンポーネントへのカスタム・スタイルの適用
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、サンバースト・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
次の例は、オーバーライドできるサンバースト・コンポーネントのデフォルトの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"
}
}時系列コンポーネントの作成方法
時系列(timeline)は、イベントを時系列で表示できるインタラクティブ・コンポーネントであり、定義されていてまだ調整可能な時間範囲(ズームに使用可能)内を前後に移動できます。
イベントは、時系列アイテム・コンポーネント(timelineItem)によって表され、これにはタイトル、説明および継続時間の塗りつぶし色が含まれます。時系列コンポーネントを構成して、すべての使用可能なイベントを表示するサマリー・ウィンドウ(overviewの子要素)を表示できます。エンド・ユーザーは、モバイル・デバイス上のピンチおよびスプレッドのジェスチャーを使用して、イベントをズーム・インおよびズーム・アウトできます。さらに、2つの時系列を構成して2系列のイベントを表示し、関連する情報を並べて比較できます。
orientation属性を使用して、時系列コンポーネントを水平または垂直のいずれかで定義できます。
注意:
MAF AMXでは、時系列と同様のコンポーネントで使用できることが多い次の機能、子要素およびプロパティはサポートしていません。
-
ネストされたUIコンポーネント
-
アニメーション
-
属性および時間範囲の変更検出
-
時間のフェッチ
-
カスタム・タイム・スケール
-
時間通貨
-
部分トリガー
-
データのソート
-
書式設定された時間範囲
-
タイムゾーン
-
可視性
「コンポーネント」ウィンドウで、「時系列」は「MAF AMXデータ視覚化」→「共通」→「その他」の下にあり、その子コンポーネントは「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」→「時系列」および「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>図14-100 デザインタイムの時系列
時系列アイテムのdurationFillColor属性を使用して、継続時間バーの塗りつぶし色を制御できます。
時系列で2つの時間スケールを同時に表示するには、2番目の軸のスケールを決定する時間軸のscale属性を使用します。
時系列は水平および垂直にスクロールできます。コンポーネントがスクロール可能な(表示可能な表示領域の外側にデータが含まれている)場合、スクロールの方向を指す矢印によって示されます。
ヒント:
時系列開始時間は、最初の時系列アイテムの開始時間と同じ値に設定されている場合、対応する時系列アイテム・コンポーネントのバブルは切り捨てられて表示されることがあります。また、時系列終了時間が最後の時系列アイテムの終了時間と同じ値に設定されている場合、対応する時系列アイテム・コンポーネントのバブルは切り捨てられて表示されることがあります。時系列アイテムのバブルが完全に見られるように、時系列コンポーネントの開始時間と終了時間を設定する必要があります。
時系列コンポーネントへのカスタム・スタイルの適用
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、時系列コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
オーバーライド可能な次のCSSスタイル・クラスは、時系列およびその子コンポーネント用に定義されます。
-
.dvtm-timelinesupported properties:
all -
.timelineSeries-backgroundColorsupported properties:
color.timelineSeries-labelStyleサポートされているプロパティ:
font-family、font-size、font-weight、color、font-style.timelineSeries-emptyTextStyleサポートされているプロパティ:
font-family、font-size、font-weight、color、font-style -
.timelineItem-backgroundColorsupported properties:
color.timelineItem-selectedBackgroundColorsupported properties:
color.timelineItem-borderColorsupported properties:
color.timelineItem-selectedBorderColorsupported properties:
color.timelineItem-borderWidthsupported properties:
width.timelineItem-selectedBorderWidthsupported properties:
width.timelineItem-feelerColorsupported properties:
color.timelineItem-selectedFeelerColorsupported properties:
color.timelineItem-feelerWidthsupported properties:
width.timelineItem-selectedFeelerWidthsupported properties:
width.timelineItem-descriptionStyleサポートされているプロパティ:
font-family、font-size、font-weight、color、font-style.timelineItem-titleStyleサポートされているプロパティ:
font-family、font-size、font-weight、color、font-style -
.timeAxis-separatorColorsupported properties:
color.timeAxis-backgroundColorsupported properties:
color.timeAxis-borderColorsupported properties:
color.timeAxis-borderWidthsupported properties:
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]
}
}NBoxコンポーネントの作成方法
NBox (nBox)コンポーネントは、2つのディメンションに渡ってデータを表し、各ディメンションは多数の範囲に分かれ、その交点は各データが配置される個別のセルを形成します。
「コンポーネント」ウィンドウで、「NBox」は「MAF AMXデータ視覚化」→「共通」→「その他」の下にあり、その子コンポーネントは「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」→「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>図14-101 デザインタイムのNBox
統計図表の作成方法
データ・バインディングを定義(データの最初のシナリオで)または編集するには、統計図表(pictoChart)を使用します。データ・バインディングは、データ・コントロールおよびメソッドをUIコンポーネントに結び付ける方法です。
統計図表では、絶対数、または人口の様々な部分の相対サイズを視覚化するためにアイコンが使用されます。それらは、従来の表およびリストよりも効果的な数値情報表示方法として、インフォグラフィックで使用されます。統計図表は、デフォルトのフロー・レイアウトで使用するためにあります。テキストまたはデータ視覚化コンポーネント内の情報を視覚的に拡張またはサポートするために簡単に使用できるため、これにより、ツールが多用途になります。
統計図表は、「コンポーネント」ウィンドウ内の「MAF AMXデータ視覚化」→「共通」→「その他」の下にあります。次の例は、MAF AMXファイルで定義された統計図表要素とその子を示しています。
<dvtm:pictoChart id="pictoChart2"
animationDuration="#{pageFlowScope.animationDuration}"
animationOnDataChange="#{pageFlowScope.animationOnDataChange}"
animationOnDisplay="#{pageFlowScope.animationOnDisplay}"
columnCount="#{pageFlowScope.columnCount}"
columnWidth="#{pageFlowScope.columnWidth}"
emptyText="#{pageFlowScope.emptyText}"
inlineStyle="#{pageFlowScope.inlineStyle}"
layout="#{pageFlowScope.layout}"
layoutOrigin="#{pageFlowScope.layoutOrigin}"
rendered="#{pageFlowScope.rendered}"
rolloverBehavior="#{pageFlowScope.rolloverBehavior}"
rolloverBehaviorDelay="#{pageFlowScope.rolloverBehaviorDelay}"
rowCount="#{pageFlowScope.rowCount}"
rowHeight="#{pageFlowScope.rowHeight}"
selectedRowKeys="#{pageFlowScope.selectedRowKeys}"
shortDesc="#{pageFlowScope.shortDesc}"
styleClass="#{pageFlowScope.styleClass}">
<dvtm:pictoChartItem id="pci21"
borderColor="#{pageFlowScope.borderColor}"
borderWidth="#{pageFlowScope.borderWidth}"
color="#{pageFlowScope.color1}"
columnSpan="#{pageFlowScope.span1}"
count="#{pageFlowScope.count1}"
rowSpan="#{pageFlowScope.span1}"="#{pageFlowScope.shape}"/>
<dvtm:pictoChartItem id="pci22"
borderColor="#{pageFlowScope.borderColor}"
borderWidth="#{pageFlowScope.borderWidth}"
color="#{pageFlowScope.color2}"
columnSpan="#{pageFlowScope.span2}"
count="#{pageFlowScope.count2}"
rowSpan="#{pageFlowScope.span2}"
shape="#{pageFlowScope.shape}"/>
<dvtm:pictoChartItem id="pci23"
borderColor="#{pageFlowScope.borderColor}"
borderWidth="#{pageFlowScope.borderWidth}"
color="#{pageFlowScope.color3}"
columnSpan="#{pageFlowScope.span3}"
count="#{pageFlowScope.count3}"
rowSpan="#{pageFlowScope.span3}"
shape="#{pageFlowScope.shape}"/>
</dvtm:pictoChart>図14-102 デザインタイムの統計図表
マップ・コンポーネント、サンバースト、ツリーマップ、時系列、統計図表およびNBoxの子要素の定義方法
マップ・コンポーネント、サンバースト、ツリーマップ、時系列、統計図表およびNBoxの様々な子要素を定義できます。
JDeveloperでは、マップ、サンバースト、ツリーマップ、時系列、統計図表およびNBoxの子コンポーネントは、「コンポーネント」ウィンドウの「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」および「MAF AMXデータ視覚化」→「共有子タグ」の下にあります(図14-103を参照)。
図14-103 マップ、サンバースト、ツリーマップ、時系列、統計図表およびNBoxの子コンポーネントの作成
データバインドされたデータ視覚化コンポーネントの作成方法
「データ・コントロール」ウィンドウから挿入されたデータ・コレクションを使用して、データバインドされたデータ視覚化コンポーネントを宣言的に作成できます(「MAF AMXページへのデータ・コントロールの追加方法」を参照)。図14-117に示す「コンポーネント・ギャラリ」ダイアログで、いくつかのデータ視覚化コンポーネント・カテゴリ、タイプおよびレイアウトのオプションの中から選択できます。
図14-104 チャート・コンポーネントを作成するコンポーネント・ギャラリ
図14-105 ゲージ・コンポーネントを作成するコンポーネント・ギャラリ
図14-106 テーマ・マップ・コンポーネントを作成するコンポーネント・ギャラリ
注意:
いくつかのデータ視覚化コンポーネント・タイプには、特別な種類のデータが必要です。選択したコンポーネントのタイプの表示に十分なデータが含まれていないデータ・コレクションにコンポーネントをバインドすると、コンポーネントは表示されず、データが不十分であることを示すメッセージが表示されます。
「コンポーネント・ギャラリ」の表示をトリガーするには、「データ・コントロール」ウィンドウからMAF AMXページにコレクションをドラッグ・アンド・ドロップし、表示されるコンテキスト・メニューから「MAFチャート」、「MAFゲージ」または「MAFテーマ・マップ」のいずれかを選択します。(図14-107を参照)。
図14-107 データバインドされたデータ視覚化コンポーネントの作成
「コンポーネント・ギャラリ」から新しいデータバインド・コンポーネントのカテゴリ、タイプおよびレイアウトを選択し、「OK」をクリックすると、データ・バインディング・ダイアログを使用してデータ視覚化コンポーネントのデータ・コレクション属性のバインディングを開始できます。ダイアログの名前と、入力フィールド・ラベルは、選択したデータ視覚化コンポーネントのカテゴリおよびタイプによって異なります。図14-108に示すように、たとえば、カテゴリとして「棒」を、タイプとして「棒」を選択した場合、表示されるダイアログの名前は「モバイル棒チャートの作成」で、入力フィールドには「棒」、「X軸」および「凡例ラベル」というラベルが付けられます。様々なフィールドへの属性の現在のマッピングに基づいた、チャートの外観の動的なサンプルが、ダイアログの中央に表示されます。このサンプルの周りの領域はインタラクティブで、「面」、「棒」または「折れ線」、「X軸」および「凡例ラベル」フィールドにリンクされており、「使用可能」リストから属性をドラッグ・アンド・ドロップするためのもう1つの対象として使用できます。
図14-108 データバインドされたチャートのデータ値の指定
データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さなどのマーカーまたは散布図のポイントで示される数字です。データ値のカテゴリは、軸ラベルとして表されるメンバーです。バインディング内で属性が担うロール(データ値またはID)は、データ型(グラフには数値データ値が必要)およびマップされる場所(棒やX軸など)の両方によって決まります。
「コンポーネント・ギャラリ」を使用してデータバインド・ゲージ・コンポーネントを作成し、カテゴリとして「LED」を選択し、タイプとして「星形LED」を選択した場合、表示されるダイアログの名前は図14-109に示すように「モバイル星形LEDゲージの作成」になります。
図14-109 データバインド・ゲージのデータ値の指定
データバインドされたテーマ・マップ・コンポーネントを作成する場合に、「コンポーネント・ギャラリ」を使用すると、選択内容に関係なく、表示されるダイアログの名前は「データ・レイヤーの作成」になりますが、表示されるフィールドは「コンポーネント・ギャラリ」での選択内容に応じて異なります。たとえば、ベース・マップとして「すべてのユーザー」を選択し、領域レイヤーとして「世界(大陸)」を選択した場合、図14-109に示すダイアログが開きます。
図14-110 「データ・レイヤーの作成」ダイアログ
1つ以上のデータ・バインディング・ダイアログの完了後に、「プロパティ」ウィンドウを使用して、コンポーネントの属性の設定を指定できます。コンポーネントと関連付けられた子要素を使用して、さらにカスタマイズすることもできます(「チャートおよびゲージ・コンポーネントの子要素の定義方法」を参照)。
MAF AMXページにコレクションをドロップする際にコンテキスト・メニューから「MAF地理マップ」、「MAFサンバースト」、「MAF NBox」、「MAFタイムライン」または「MAFツリーマップ」を選択すると、次のいずれかのダイアログが表示されます。
図14-111 データバインドされた地理マップの作成
図14-112 データバインドされたサンバーストの作成
図14-113 データバインドされた時系列の作成
図14-114 データバインドされたツリーマップの作成
図14-115 データバインドされたNBoxの作成
「NBoxの作成」ダイアログへの入力は、行および列の数を定義することから始めます。その後、ボックス上のセルを選択して、ダイアログの下部で行または列全体の値を指定できます(図14-116を参照)。
図14-116 データバインドされたNBoxの行および列の値の設定
NBoxコンポーネントは、「次へ」をクリックして一連のダイアログのすべてのページを入力すると作成されます。
各ダイアログのフィールドごとの値の詳細は、「ヘルプ」をクリックするか[F1]を押して、オンライン・ヘルプを参照してください。
静的データに基づくデータ視覚化コンポーネントの作成方法
チャート、ツリーマップ、サンバーストおよび時系列の場合、そのvar属性もvalue属性も指定しないことができます。かわりに、データ・アイテムに対応している要素を列挙することによって、コンポーネント構造を静的に定義できます(例: チャートのcharDataItem要素や時系列の系列のtimelineItems)。これらの静的アイテムは必要な数を追加できます。これは、設計時にデータがわかっている場合に便利です。
次の例は、pieDataItem子コンポーネントを通じて定義された静的データを使用する円グラフ・コンポーネントを示しています。
<dvtm:pieChart id="pieChart1" > <amx:facet name="dataStamp"> <dvtm:pieDataItem id="di1" value="80000" label="Salary"/> <dvtm:pieDataItem id="di2" value="7500" label="Bonus"/> <dvtm:pieDataItem id="di3" value="12000" label="Commision"/> </amx:facet> <dvtm:legend position="none" id="l1"/> </dvtm:pieChart>
次の例は、コレクションではなく属性バインディングに基づいて値が指定されているpieDataItem子コンポーネントを示します。
<dvtm:pieDataItem id="di1" value="#{bindings.Salary.inputValue}" label="Salary"/>チャート・コンポーネントでインタラクティブ性を有効にする方法
チャートの次の子コンポーネント用イベントドリブン・トリガーを定義すると、いくつかのチャート・コンポーネントのタップを介してエンド・ユーザーによるインタラクティブ性を有効にできます。
-
チャートのデータ・アイテム
-
円グラフのデータ・アイテム
-
系列スタイル
プロパティ設定リスナーやポップアップ表示動作など、サポートされている操作に加え、起動されるアクションのタイプを定義するようにaction属性を設定できます。
<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">
...
UIコンポーネントのスタイル設定
MAFでは、UIコンポーネントにスタイルを適用するためにCSSを使用できます。
コンポーネント属性を使用したスタイルの定義方法
次の属性を設定することで、UIコンポーネントをスタイル設定できます。
-
styleClass属性は、レイアウト・コンポーネントに対して使用するCSSスタイル・クラスを定義します。<amx:panelPage styleClass="#{pageFlowScope.pStyleClass}">MAF AMXページまたはスキニングCSSファイルでレイアウト、コマンドおよび入力の各コンポーネントのスタイル・クラスを定義できますが、その場合、特定のスタイルがMAF AMXアプリケーション機能内のすべてのコンポーネントに適用されます(「スキニングに関する必知事項」を参照)。かわりに、MAFによって提供されるパブリック・スタイル・クラスを使用できます。
注意:
CSSファイルは、JDeveloperからアクセスできません。かわりに、MAFによって、ビルドまたはデプロイ時にこのファイルがパッケージに注入され、
Web Contentルート・ディレクトリの下のcssディレクトリにCSSファイルが表示されます。 -
inlineStyle属性は、任意のUIコンポーネントに使用するCSSスタイルを定義し、コンポーネントのルートDOM要素に適用される一連のCSSスタイルを表します。<amx:outputText inlineStyle="color:red;">
この属性は、基本スタイルの変更が必要な場合に使用してください。
注意:
いくつかのUIコンポーネントは、HTML
div要素やさらに複雑なマークアップなどのサブ要素でレンダリングされます。その結果、親コンポーネントにinlineStyle属性を設定しても、目的の効果が得られないことがあります。そのような場合、生成されたマークアップを調べ、inlineStyle属性を定義するかわりに、サブ要素にスタイルを伝播するCSSクラスを適用します。JavaScriptのデバッグ方法の詳細は、「JavaコードおよびJavaScriptのデバッグを有効にする方法」を参照してください。
これらの属性は、図14-117に示すように「プロパティ」ウィンドウの「スタイル」セクションに表示されます。
図14-117 「プロパティ」ウィンドウの「スタイル」セクション
MAF AMXでは、「プロパティ」ウィンドウ内に、inlineStyle属性の様々なプロパティを設定するために使用できるドロップダウン・エディタが提供されています(図14-118を参照)。
図14-118 「インライン・スタイル」エディタ
スキニングに関する必知事項
スキニングによって、MAF AMXアプリケーション機能内のすべてのUIコンポーネントに均一なスタイルを定義および適用し、機能全体に対するテーマを作成できます。
MAFのデフォルトのスキン・ファミリはmobileAltaで、デフォルト・バージョンはそのスキンの最新バージョンです。「MAFアプリケーションのスキニング」を参照してください。
スキニング用のCSS IDセレクタの使用に関する必知事項
MAF AMXでは、スキニング要素でのCSS IDセレクタの使用はサポートしていません。その結果、次のようなマークアップによって、MAF AMXページ遷移が粗くなります。
#tb1 {
position:absolute;
overflow:hidden;
width: 300px;
background-color: rgb(90,148,0);
}
この状況の理由は、MAF AMXページ間で遷移が発生すると、同時に画面上で2つのページがレンダリングされるということです。したがって、IDの衝突を防止するために、遷移の直前に、遷移の発生元ページからすべてのIDが削除されます。
CSS IDセレクタを使用するかわりに、クラス名を使用する必要があります。次の例は、MAF AMXページで定義されたMAF AMX UIコンポーネントと、特定のカスタム・クラスに設定されたそのstyleClass属性を示しています。
<amx:panelPage styleClass="MySpecialClassName"/>
次の例は、スキニング用のカスタム・クラスの使用方法を示しています。
.MySpecialClassName {
height: 420px;
}データ視覚化コンポーネントのスタイル設定方法
MAF AMXデータ視覚化コンポーネントのスタイル・プロパティの大部分は、cssディレクトリにあるdvtm.cssファイルで定義されます。アプリケーション機能レベルでのカスタム・スタイル定義を持つカスタムCSSファイルを追加することで、デフォルト値をオーバーライドできます(「デフォルト・スキン・スタイルのオーバーライド」を参照)。
スタイル・プロパティのいくつかは、CSSにマップできないため、カスタムJavaScriptファイルで定義する必要があります。それらのプロパティは、次のとおりです。
-
ダイヤル・ゲージ・コンポーネントの背景および針のイメージ(「ダイアル・ゲージの作成方法」を参照)。
-
時系列コンポーネントの継続時間バーのカラー・パレット(「時系列コンポーネントの作成方法」を参照)。
-
テーマ・マップ・コンポーネントのベース・マップ(「カスタム・ベース・マップの定義」を参照)。
-
地理マップ・コンポーネントのスタイル・プロパティ(「地理マップ・コンポーネントの作成方法」を参照)。
-
テーマ・マップ・コンポーネントのスタイル・プロパティ(「テーマ・マップ・コンポーネントへのカスタム・スタイルの適用」を参照)。
-
評価ゲージ・コンポーネントの選択済および未選択の状態(「評価ゲージ・コンポーネントへのカスタム・スタイルの適用」を参照)。
これらのカスタムJavaScriptファイルは、アプリケーション機能レベルの「包含」セクションで指定する必要があります(「アプリケーション機能のコンテンツをMAF AMXページまたはタスク・フローとして定義する方法」を参照)。それによって、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>
MAFのアクセシビリティのサポートの理解
MAFアプリケーションを開発する際は、アクセシビリティの問題に対処することで視覚的および身体的に障害があるユーザーに対応する必要があります。
非視覚的なメディアへのレンダリングを行うWebブラウザなどのユーザー・エージェント(スクリーン・リーダーなど)により、UIコンポーネントのテキスト説明が読み上げられ、障害を持つユーザーに有益な情報が提供されます。MAF AMX UIおよびデータ視覚化コンポーネントは、次のアクセシビリティ標準に準拠するように設計されています。
-
Accessible Rich Internet Applications (WAI-ARIA) 1.1仕様。
詳細は、次の項を参照してください。
-
WAI-ARIA 1.1仕様の「Introduction」(
http://www.w3.org/TR/wai-aria/#introduction) -
「Using WAI-ARIA」(
http://www.w3.org/TR/wai-aria/#usage)
-
-
Oracle Global HTML Accessibility Guidelines (OGHAG)。
詳細は、「Oracle Global HTML Accessibility Guidelinesに関する必知事項」を参照してください。
-
iOSのアクセシビリティ・ガイドライン。
詳細は、アクセシビリティ・プログラミング・ガイドfor iOSを参照してください。
そのようなコンポーネントの導入によって、アクセス可能なコンポーネントの外観の変更されたり、アプリケーション・ロジックが影響受けることがありません。
MAF AMXアプリケーション機能のアクセシビリティが適切に機能するために、次のガイドラインに従ってください。
-
ナビゲーションの深さは3レベル以内にして、ユーザーが簡単にホーム画面に戻れるようにする必要があります。
-
スクリプトを最小限に維持します。
-
DOMとの直接対話を提供しないでください。
-
JavaScriptのタイムアウトは使用しないでください。
-
フォーカスの不要な変更は回避します。
-
ポップアップ・トリガーを明示的に指定する
-
必要に応じて、WAI-ARIAライブ・リージョンを使用します(「基本的な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)
アクセシビリティのためのUIコンポーネントおよびデータ視覚化コンポーネントの構成方法
MAF AMX UIおよびデータ視覚化コンポーネントには、組込みのアクセシビリティ・サポートが備えられており、ほとんどのコンポーネントがアクセシビリティ監査の対象となっています(図14-121を参照)。
commandButtonやtableLayoutなどのAMX UIコンポーネントは、アクセシビリティをサポートするために、次の1つ以上の属性を公開します。
-
Shortdesc。
-
Summary
-
HintText
-
Landmark
shortDesc属性は、コンポーネントごとに異なる目的で使用します。たとえば、イメージ・コンポーネントにshortDesc属性を設定すると、MAF AMXファイルでそれはimage要素のalt属性の値として表示されます。shortDesc属性の値はローカライズできます。
tableLayoutコンポーネントにより公開されるsummaryおよびshortDesc属性については、tableLayoutコンポーネントを使用して他のコンポーネントを配置する場合、いずれの属性にも値を指定する必要はありません。このシナリオでは、MAFにより、実行時にレンダリングされるHTMLのtableLayoutコンポーネントにプレゼンテーション・ロールが追加されます。ただし、tableLayoutコンポーネントを使用してデータを表示する場合は、各属性に異なる値を構成してください。MAFでは実行時に、shortDesc属性に指定された値をHTML表のtitle属性として使用します。summary属性に指定された値は、HTML表でサマリーとしてレンダリングされます。
「プロパティ」ウィンドウの「アクセシビリティ」セクションで、コンポーネントの属性を設定できます。
パネル・グループ・レイアウト・コンポーネントおよびデック・コンポーネントの場合、ページのコンテキストに従って適用可能なランドマーク・ロール・タイプ(表14-14を参照)を定義します。landmark属性に次の値の1つを設定できます。
-
デフォルト(なし)
-
application
-
banner
-
complementary
-
contentinfo
-
form
-
main
-
navigation
-
search
inputNumberSliderなどのAMX UIコンポーネントは、WAI-ARIA仕様によって定義されるLabelおよびValueアクセシビリティ属性を持ちます。これらの属性値は実行時に自動的に適用され、変更できません。Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
アクセシビリティ監査ルールの構成方法は、「アクセシビリティ監査ルールの構成」を参照してください。
アクセシビリティ監査ルールの構成
JDeveloperの「プリファレンス」ダイアログを使用して次のようにアクセシビリティ監査ルールを構成できます。
- 図14-119に示す「監査」ペインで、「プロファイルの管理」をクリックして「監査プロファイル」ダイアログを開きます。
図14-119 アクセシビリティ監査ルールの設定
- 図14-120に示す「監査プロファイル」ダイアログで、ルールのツリーから「モバイル・アプリケーション・フレームワーク」ノードを展開し、次に「アクセシビリティ」を展開します。
図14-120 「監査プロファイル」ダイアログ
図14-121は、JDeveloperに表示されるアクセシビリティ監査警告を示しています。
図14-121 アクセシビリティ監査警告
アクセス可能なMAF AMXアプリケーション機能をテストする方法の詳細は、「iOSデバイス上でアクセシビリティのテストを実行する方法」を参照してください。
注意:
Androidでは、WAI-ARIAアクセシビリティ機能はデータ視覚化コンポーネントに対してサポートされません。
その他のMAF AMX UIコンポーネントは、アプリケーションがAndroidスクリーン・リーダー・モードで実行された場合、正しく動作しない可能性があります。
基本的なWAI-ARIA用語に関する必知事項
WAI-ARIA 1.0仕様に述べられているように、複雑なWebアプリケーションは、支援テクノロジがドキュメントの部分の背後にあるセマンティクスを判別できない場合や、ユーザーが、使用可能な方法で実際にそのすべての部分を移動できない場合に、アクセス不可能になります。WAI-ARIAでは、セマンティクスがロール(ユーザー・インタフェース要素を定義するタイプ)と、ロールによってサポートされている状態およびプロパティに分割されています。次のセマンティクス・アソシエーションによって、WAI-ARIA用語の基礎が形成されています。
-
ロール
-
Landmark
-
ライブ・リージョン
「Important Terms」(http://www.w3.org/TR/wai-aria/#terms)を参照してください。
次の表は、MAFに適用可能なロールのカテゴリ(WAI-ARIA 1.0仕様での定義)を示しています。
表14-11は、全般的なロール概念を定義する目的でWAI-ARIAのロールの分類をサポートするために使用される抽象ロールを示しています。
表14-11 抽象ロール
| 抽象ロール | 説明 |
|---|---|
|
input |
ユーザー入力を可能にする一般的なタイプのウィジェット。 |
|
landmark |
ナビゲーショナル・ランドマークを意図したページのリージョン。 |
|
select |
ユーザーが一連の選択肢から選択を行えるフォーム・ウィジェット。 |
|
widget |
グラフィカル・ユーザー・インタフェースのインタラクティブ・コンポーネント。 |
表14-12は、スタンドアロン・ユーザー・インタフェース・ウィジェットまたは大きい複合ウィジェットの一部として機能するウィジェット・ロールを示しています。
表14-12 ウィジェット・ロール
| ウィジェット・ロール | 説明 | ウィジェットで必要とされるステート |
|---|---|---|
|
alertdialog |
アラート・メッセージを含むダイアログのタイプ。最初のフォーカスはそのダイアログ内の要素に移動します。 |
aria-labelledby、aria-describedby |
|
button |
クリックまたは押されたときにユーザーによってトリガーされるアクションを可能にする入力。 |
aria-expanded (ステート)、aria-pressed (ステート) |
|
checkbox |
|
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 (ステート) |
表14-13は、ページ内のコンテンツを編成する構造を記述するドキュメント構造ロールを示しています。通常、ドキュメント構造はインタラクティブではありません。
表14-13 ドキュメント構造ロール
| ドキュメント構造ロール | 説明 |
|---|---|
|
img |
イメージを形成する要素のコレクションのコンテナ。 |
|
list |
非インタラクティブ・リスト・アイテムのグループ。 |
|
listitem |
リストまたはディレクトリ内の単一アイテム。 |
表14-14は、ナビゲーショナル・ランドマークを意図したページのリージョンを表すランドマーク・ロールを示しています。
表14-14 ランドマーク・ロール
| ランドマーク・ロール | 説明 |
|---|---|
|
application |
Webアプリケーション(Webドキュメントではなく)として宣言されるリージョン. |
|
banner |
ほとんどサイト指向のコンテンツ(ページ固有のコンテンツではなく)を含むリージョン。 |
|
complementary |
DOM階層の類似したレベルにあるメイン・コンテンツを補足するように設計ているが、メイン・コンテンツから切り離しても意味を持つドキュメントのサポート・セクション。 |
|
contentinfo |
親ドキュメントに関する情報が含まれている大きな認識可能なリージョン。 |
|
form |
全体として結合されてフォームを作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。 |
|
main |
ドキュメントのメイン・コンテンツ。 |
|
navigation |
ドキュメントまたは関連ドキュメントをナビゲートするためのナビゲーショナル要素(通常はリンク)のコレクション。 |
|
search |
全体として結合されて検索機能を作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。 |
MAF UIコンポーネントの大部分では、アクセス可能なWAI-ARIA属性は変更できません。一部のコンポーネントでは、デザインタイムで特別なアクセス可能な属性を設定でき、パネル・グループ・レイアウトおよびデックには、WAI-ARIAランドマーク・ロール・タイプを使用できます。「アクセシビリティのためのUIコンポーネントおよびデータ視覚化コンポーネントの構成方法」を参照してください。
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のアクセシビリティについての考え方とポリシーを参照してください。
入力の検証
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>
検証メッセージはポップアップ・コンポーネントに表示されます(「ポップアップ・コンポーネントの使用方法」を参照)。検証ポップアップのタイトルを構成することはできません。それは、相対的なメッセージ重大度によって自動的に決定されます。現在のメッセージのうちの最も重大なものが検証ポップアップのタイトルになります。つまり、すべての検証メッセージがWARNINGタイプである場合は、そのタイトルは「警告」になります。メッセージのいくつかがWARNINGタイプで、その他はERRORタイプの場合はタイトルは「エラー」に設定されます。
図14-122は、企業名を入力しなかった場合にStockTrackerサンプル・アプリケーションに表示されるポップアップ検証メッセージを示しています。このサンプル・アプリケーションおよびその他のサンプル・アプリケーションの詳細は、「サンプルのMAFアプリケーション」を参照してください。
図14-122 StockTrackerサンプル・アプリケーションでの検証メッセージ
イベント・リスナーの使用方法
MAF AMXページからJavaコードを呼び出し、アプリケーション・ロジックを実行するには、UIコンポーネントの属性としてリスナーを定義します。
次のいずれかの方法でUIコンポーネントの属性としてリスナーを定義できます。
-
MAF AMXファイルのソースでの手動による方法。
-
選択したコンポーネントの「プロパティ」から。
次のリスナーを使用して、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
-
-
drillListener: 次のパラメータで作成されるDrillEventをリスニングします。-
ドリル済オブジェクトのIDを表す
java.lang.String -
ドリル・データ・アイテムのrowkeyを表す
java.lang.String -
ドリル済オブジェクトのグループ名を表す
java.lang.String -
ドリル済オブジェクトの系列名を表す
java.lang.String
-
リスナーの値は、パターン#{*}に一致している必要があり、次の要件を満たしている必要があります。
-
タイプ名: EL式
-
ベース・タイプ: 文字列
-
プリミティブ・タイプ: 文字列
ELイベントの詳細は、「ELイベントについて」を参照してください。
ほとんどのMAF AMXイベント・クラスは、oracle.adfmf.amx.event.AMXEventクラスを拡張します。Javaコードでイベント・リスナーを定義するときは、oracle.adfmf.amx.event.AMXEventクラスを渡す必要があります。
詳細は、次の項を参照してください。
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;
}
追加の例は、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているAPIDemoというMAFサンプル・アプリケーションを参照してください。このサンプルは、Java Beanからリスナーをコールする方法を示しています。
イベント・リスナーの制約付きタイプ属性に関する必知事項
イベント・リスナーは、一部のMAF AMX UIコンポーネントの子として定義できます。リスナーのtype属性によって、それらがどのイベントを処理するために登録されるのかが識別されます。各親UIコンポーネントでは(親コンポーネントに適した)イベントのサブセットのみがサポートされているため、これらのサポートされているイベントは、リスナーに対して選択できる限られたタイプのリストに提示されます。
子イベント・リスナーそれぞれのtype属性(図14-123を参照)には、リスナー・イベントと一致する値の基本セットがあります。これらの値は、親コンポーネントでサポートされているイベントのみを表示するようフィルタされます。たとえば、ボタン・コンポーネントの下にあるアクション・リスナーまたはプロパティ・リスナーの設定の子では、actionタイプの値およびジェスチャーのみか表示されます。
図14-123は、親リスト・アイテム・コンポーネントのプロパティ・リスナーの設定のかぎられたタイプ・リストにおいて使用可能な値を示しています。
図14-123 イベント・タイプの選択
脚注の凡例
脚注1:詳細は、「disabled属性に関する必知事項」を参照してください。