| Oracle® Fusion Middleware Oracle Mobile Application Frameworkでのモバイル・アプリケーションの開発 2.0 E56274-01 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Mobile Application Frameworkでのモバイル・アプリケーションの開発 2.0 E56274-01 |
|
前 |
次 |
この章では、MAF AMXページのユーザー・インタフェースを作成する方法について説明します。
この章には次の項が含まれます:
MAFは、iOSとAndroidのどちらのユーザー操作性に対しても適切に動作するMAF AMXページの作成を可能にする一連のUIコンポーネントおよび操作を提供します。
MAF AMXは、標準的なJDeveloper開発エクスペリエンスに準拠して、「コンポーネント」ウィンドウまたは「データ・コントロール」ウィンドウのいずれからもソース・エディタや「構造」ウィンドウにUIコンポーネントおよび操作をドラッグできるようになっています。実質的には、iOSおよびAndroidのプラットフォーム上のネイティブ・コンポーネントのHTML相当物がMAF AMX UIコンポーネントによってレンダリングされ、JDeveloperでのそれらのデザインタイムの動作は、その他のテクノロジで使用されるコンポーネントに似たものとなります。さらに、これらのUIコンポーネントは、宣言ナビゲーションおよびデータ・バインディングのためにMAFのコントローラおよびモデルと統合されます。
|
注意: モバイル・デバイス用のインタフェースを開発する場合は、画面領域が非常に限られていることに常に注意してください。また、一部のモバイル・デバイスではタッチスクリーンが使用できません。 |
詳細は、次を参照してください。
MAF AMXは、ページ内へのUIコンポーネントの配置を可能にするレイアウト・コンポーネント(表6-1にリスト)を提供します。通常、これらのコンポーネントを使用してページの構築を開始し、次にこれらのコンテナ内で、または子コンポーネントとして、他の機能を提供する他のコンポーネントを、レイアウト・コンポーネントに追加します。これらのコンポーネントのいくつかは、拡大するコンポーネント内に配置されたときに拡大する機能などの形状管理機能を提供します。
表6-1 MAF AMXのページ管理、レイアウトおよび間隔調整コンポーネント
| コンポーネント | タイプ | 説明 |
|---|---|---|
|
表示 |
コア・ページ構造コンポーネント |
MAF AMXファイル内に |
|
パネル・ページ |
コア・ページ構造コンポーネント |
MAF AMXファイル内に MAF AMXファイルの詳細は、第5.3.1.2項「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ファイル内の 詳細は、第6.2.10項「スペーサ・コンポーネントの使用方法」を参照してください。 |
|
表のレイアウト |
ページ・レイアウト・コンテナ |
MAF AMXファイル内に |
|
行のレイアウト |
ページ・レイアウト・コンテナ |
MAF AMXファイル内に |
|
セル・フォーマット |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
レイアウト・コンポーネントを追加するには、それを「コンポーネント」ウィンドウからMAF AMXページにドラッグ・アンド・ドロップします(第5.3.2.1項「UIコンポーネントの追加」を参照)。次に、「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します(第5.3.2.3項「UIコンポーネントの構成」を参照)。特定のコンポーネントごとの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
例6-1は、MAF AMXファイルで定義されているいくつかのページ・レイアウト要素を示しています。
|
注意: ページ・レイアウト要素は |
例6-1 ページ・レイアウト・コンポーネントの定義
<amx:panelPage id="pp1">
<amx:outputText id="outputText1"
value="Sub-Section Title 1"
styleClass="adfmf-text-sectiontitle"/>
<amx:panelFormLayout id="panelFormLayout1" labelPosition="start">
<amx:panelLabelAndMessage id="panelLabelAndMessage1" label="Name">
<amx:commandLink id="commandLink1" text="Jane Don" action="editname" />
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage id="panelLabelAndMessage2" label="Street Address">
<amx:commandLink id="commandLink2"
text="123 Main Street"
action="editaddr" />
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage id="panelLabelAndMessage3" label="Phone">
<amx:outputText id="outputText2" value="212-555-0123" />
</amx:panelLabelAndMessage>
</amx:panelFormLayout>
<amx:outputText id="outputText3"
value="Sub-Section Title 2"
styleClass="adfmf-text-sectiontitle" />
<amx:panelFormLayout id="panelFormLayout2" labelPosition="start">
<amx:panelLabelAndMessage id="panelLabelAndMessage4" label="Type">
<amx:commandLink id="commandLink3" text="Personal" action="edittype" />
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage label="Anniversary">
<amx:outputText id="outputText4" value="November 22, 2005" />
</amx:panelLabelAndMessage>
</amx:panelFormLayout>
<amx:panelFormLayout id="panelFormLayout3" labelPosition="start">
<amx:panelLabelAndMessage id="panelLabelAndMessage5" label="Date Created">
<amx:outputText id="outputText5" value="June 20, 2011" />
</amx:panelLabelAndMessage>
</amx:panelFormLayout>
</amx:panelPage>
レイアウト・コンポーネントのビジュアル・プレゼンテーションを管理するには、標準Cascading Style Sheet (CSS)を使用します。CSSは、ViewControllerプロジェクトのWeb Content/cssディレクトリに、MAFによって提供されているデフォルトCSSとともに配置されています。詳細は、第6.6.1項「コンポーネント属性を使用したスタイルの定義方法」を参照してください。
MAF AMXを使用してiOSプラットフォーム用に作成されたユーザー・インタフェースは、言語環境が左から右、右から左のいずれであっても正しく表示されます。後者の場合、コンポーネントは画面の左側ではなく右側から表示されます。ポップアップ(第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)、パネル・アイテム、パネル・スプリッタ(第6.2.9項「パネル・スプリッタ・コンポーネントの使用方法」)など、一部のMAF AMXレイアウト・コンポーネントは、特定の右から左の動作を有効化するように構成できます。MAF AMXページの右から左の構成の詳細は、第6.4項「ジェスチャーの有効化」および第5.2.11項「ページ遷移スタイルの指定方法」を参照してください。
|
注意: 右から左のテキスト方向は、Androidプラットフォームではサポートされていません。 |
UIDemoという名前のMAFサンプル・アプリケーションは、ボタンなどのMAF AMX UIコンポーネントとともにレイアウト・コンポーネントを使用して一般的なパターンに従った一般的なレイアウトのいくつかを実現する方法を示しています。さらに、このサンプル・アプリケーションは、スタイルを使用してページ・レイアウトを特定のパターンに合せる方法を示します。UIDemoアプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
表示(MAF AMXファイルのview要素)は、コア・ページ構造コンポーネントであり、MAF AMXファイルの作成時にそのファイルに自動的に挿入されます。このコンポーネントは、ページおよびその構造の階層表現を提供し、単一のMAF AMXページを表します。
詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
パネル・ページ(MAF AMXファイルのpanelPage要素)は、他のコンポーネントをレイアウトする画面のスクロール可能領域の定義を可能にするコンポーネントです。
デフォルトでは、MAF AMXページを作成するときに、JDeveloperによってパネル・ページ・コンポーネントが自動的に作成され、そのページに挿入されます。そのページにコンポーネントを追加すると、それらはパネル・ページ・コンポーネント内に挿入されます。
特定の領域(ページのヘッダーやフッターなど)をスクロールできないようにし、向きが変更されたときのストレッチを有効化するには、パネル・ページに対してファセット・コンポーネントを指定します。パネル・ページのヘッダー・ファセットには、各ページのナビゲーション・バーに配置されるタイトルが含まれています。パネル・ページに含めることができる他のタイプのファセット・コンポーネントの詳細は、第6.2.7項「ファセット・コンポーネントの使用方法」を参照してください。
例6-2は、MAF AMXファイルで定義されているpanelPage要素を示しています。このパネル・ページには、ヘッダー・ファセットが含まれています。
例6-2 パネル・ページの定義
<amx:panelPage id="pp1">
<amx:facet name="header">
<amx:outputText id="ot1" value="Welcome"/>
</amx:facet>
</amx:panelPage>
詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
パネル・グループ・レイアウト・コンポーネントは、基本レイアウト・コンポーネントであり、その子を垂直方向または水平方向に配置します。また、子コンポーネントを横に配置し、ページの端に達したら下に配置する、折返しレイアウトのオプションもあります。
パネル・グループ・レイアウト・コンポーネントを作成するには、「コンポーネント」ウィンドウを使用します。
パネル・グループ・レイアウト・コンポーネントを追加するには:
「コンポーネント」ウィンドウで、パネル・グループ・レイアウトをMAF AMXページにドラッグ・アンド・ドロップします。
目的の子コンポーネントをパネル・グループ・レイアウト・コンポーネントに挿入します。
隣接する子コンポーネント間に間隔を追加するには、スペーサ(spacer)コンポーネントを挿入します。
「プロパティ」ウィンドウを使用して、コンポーネント属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
例6-3は、MAF AMXファイルで定義されているpanelGroupLayout要素を示しています。
例6-3 パネル・グループ・レイアウトの定義
<amx:panelGroupLayout styleClass="prod" id="pgl1"> <amx:outputText styleClass="prod-label" value="Screen Size:" id="ot1"/> </amx:panelGroupLayout>
パネル・グループ・レイアウト・コンポーネントのスクロール動作はscrollPolicy属性により定義され、これはauto (デフォルト)、noneまたはscrollに設定できます。デフォルトでは、この動作はアクティブ・スキンで定義されているものに一致します。
アクティブ・スキンで定義されている動作とは関係なくスクロールを無効にするには、scrollPolicy属性をnoneに設定します。パネル・グループ・レイアウト・コンポーネントがスクロール可能でない場合、コンテンツは制約を受けません。
アクティブ・スキンで定義されている動作とは関係なくスクロールを有効にするには、scrollPolicy属性をscrollに設定します。パネル・グループ・レイアウト・コンポーネントがスクロール可能である場合は、コンポーネントのディメンションが制約されているとスクロールが提供されます。
スクロールは多量のメモリーを消費し、アプリケーションをクラッシュさせる可能性があるため、使用は最小限に抑える必要があります。mobileAltaスキン(第6.6.2項「スキニングに関する必知事項」を参照)では、パネル・グループ・レイアウト、パネル・フォーム・レイアウト(第6.2.4項「パネル・フォーム・レイアウト・コンポーネントの使用方法」を参照)および表のレイアウト(第6.2.11項「表のレイアウト・コンポーネントの使用方法」を参照)のスクロールは無効です。アプリケーションにmobileAltaスキンを使用し、scrollPolicyは必要な場合にのみscrollに設定することをお薦めします。パネル・フォーム・レイアウトおよび表のレイアウトのスクロール動作をシミュレートするには、スクロールが必要になったときに、スクロール可能なパネル・グループ・レイアウト・コンポーネントでそれらを囲みます。
パネル・フォーム・レイアウト(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属性とともに使用する必要があります。
|
注意: 単一列から複数列にレイアウトを切り替えるには、 |
パネル・フォーム・レイアウト・コンポーネントを追加するには:
「コンポーネント」ウィンドウで、パネル・フォーム・レイアウト・コンポーネントをMAF AMXページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、コンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
例6-4は、MAF AMXファイルで定義されているpanelFormLayout要素を示しています。
パネル・ストレッチ・レイアウト(panelStretchLayout)コンポーネントは、top、bottomおよびcenterの3つの子ファセット・コンポーネントを管理します(例6-5を参照)。これらのファセットは、任意の組合せでいくつでも使用できます。
例6-5 基本的なパネル・ストレッチ・レイアウトの定義
<amx:panelStretchLayout id="psl1"> <amx:facet name="top"> </amx:facet> <amx:facet name="center"> </amx:facet> <amx:facet name="bottom"> </amx:facet> </amx:panelStretchLayout>
3つの矩形が上下に重なった状態のパネル・ストレッチ・レイアウト・コンポーネントを表現しようとした場合は、次のことが該当します。
最上部の矩形の高さは、topファセットの通常の高さにより定義されます。
最下部の矩形の高さは、bottomファセットの通常の高さにより定義されます。
残りの垂直スペースは、中間の矩形に配分されます。この矩形の高さがCenter.heightに定義された値よりも小さく、panelStretchLayoutのscrollPolicy属性がscrollまたはautoのいずれかに設定されている場合、スクロールバーが追加されます。
パネル・ストレッチ・レイアウト・コンポーネントを追加するには:
「コンポーネント」ウィンドウで、パネル・ストレッチ・レイアウトをMAF AMXページにドラッグ・アンド・ドロップします。
作成された子ファセット・コンポーネントを確認し、必要に応じてその一部を削除します。
「プロパティ」ウィンドウを使用して、コンポーネント属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
パネル・ラベルおよびメッセージ(panelLabelAndMessage)コンポーネントは、label属性が定義されていないコンポーネントを配置するために使用します。これらのコンポーネントとしては、通常、出力テキスト、ボタンまたはリンクがあります。
パネル・ラベルおよびメッセージ・コンポーネントを追加するには:
「コンポーネント」ウィンドウで、パネル・ラベルおよびメッセージ・コンポーネントをパネル・グループ・レイアウト・コンポーネントにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、コンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
例6-4は、MAF AMXファイルで定義されているpanelLabelAndMessage要素を示しています。label属性が、子コンポーネントに対して使用されています。
ファセット(facet)コンポーネントは、親レイアウト・コンポーネント上に、ヘッダーやフッターなど任意の名前のファセットを定義するために使用します。ファセットの位置およびレンダリングは、親コンポーネントによって決定されます。
MAF AMXページのヘッダーは、通常、ヘッダー、プライマリおよびセカンダリ・ファセットと組み合せたパネル・ページ・コンポーネントによって表されます(第6.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)。
ヘッダー・ファセット: ページ・タイトルが含まれています。
プライマリ・アクション・ファセット: ヘッダー・バーの左隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
セカンダリ・アクション・ファセット: ヘッダー・バーの右隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
MAF AMXページのフッターは、フッター・ファセットと組み合せたパネル・ページ・コンポーネントによって表されます(第6.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)。
フッター・ファセット: コンテンツ領域の下に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
例6-7は、パネル・ページ・コンテナ内で宣言されているfacet要素を示しています。ファセットのタイプは、常にそのname属性で定義されます(表6-2を参照)。
例6-7 ファセットの定義
<amx:panelPage id="pp1">
<amx:facet name="footer">
<amx:commandButton id="cb2" icon="folder.png"
text="Move (#{myBean.mailcount})"
action"move"/>
</amx:facet>
</amx:panelPage>
表6-2には、特定の親コンポーネントとともに使用できる事前定義済ファセット・タイプがリストされています。
表6-2 ファセット・タイプと親コンポーネント
| 親コンポーネント | ファセット・タイプ(名前) |
|---|---|
|
パネル・ページ( |
|
|
リスト・ビュー( |
|
|
カルーセル( |
|
|
パネル・スプリッタ( |
|
|
パネル・ストレッチ・レイアウト( |
|
|
データ視覚化コンポーネント。 詳細は、第6.5項「データ視覚化の指定」を参照してください。 |
|
ファセット・コンポーネントを追加するには:
「構造」ウィンドウまたはソース・エディタに表示されるポップアップ・メニューを使用して、ファセット・コンポーネントを別のコンポーネントの子として追加できます。ポップアップ・メニューには、選択している親コンポーネントに有効なファセットのみが表示されます。ファセットを追加するには、最初に「構造」ウィンドウまたはソース・エディタで親コンポーネントを選択してから右クリックし、次のうちの1つを選択します。
親コンポーネントがパネル・ページである場合、図6-2に示すように、「ファセット-パネル・ページ」を選択し、リストからファセットのタイプを選択します。
親コンポーネントがリスト・ビューである場合、図6-3に示すように、「ファセット-リスト・ビュー」を選択し、リストからファセットのタイプを選択します。
親コンポーネントがカルーセルである場合、図6-4に示すように、「ファセット-カルーセル」→「ノード・スタンプ」を選択します。
親コンポーネントがパネル・スプリッタである場合、図6-5に示すように、「ファセット-パネル・スプリッタ」→「ナビゲータ」を選択します。
親コンポーネントがパネル・ストレッチ・レイアウトである場合、図6-6に示すように、「ファセット-パネル・ストレッチ・レイアウト」を選択し、リストからファセットのタイプを選択します。
親コンポーネントがデータ視覚化コンポーネントの1つである場合、図6-7に示すように、「ファセット」→「<MAF AMXデータ視覚化コンポーネント名>」を選択し、リストからファセットのタイプを選択します。
データ視覚化コンピュータとされらの属性の詳細は、第6.5項「データ視覚化の指定」を参照してください。
別の方法:
「コンポーネント」ウィンドウで、表6-2にリストされた別のコンポーネントにファセット・コンポーネントをドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、コンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
ポップアップ(popup)コンポーネントを使用して、ポップアップ・ウィンドウを表示します。このコンポーネントは、ビュー・コンポーネントの子として宣言できます。
ポップアップ・コンポーネントとともに次の操作を使用できます。
ポップアップを閉じる動作(closePopupBehavior)の操作は、クライアントによってトリガーされるイベントに応答してポップアップを閉じる宣言的な方法です。
ポップアップ表示動作(showPopupBehavior)の操作は、ポップアップ表示動作のtype属性を使用して指定されたクライアントによってトリガーされるイベントに応答してポップアップを表示する宣言的な方法です。
ポップアップ表示動作のpopupId属性は、その親コンポーネントに関連するポップアップ・コンポーネントの一意の識別子を指定します。ポップアップ表示動作のalignId属性は、そのポップアップを整列する基準となるUIコンポーネントの一意の識別子を指定します。識別子を手動で設定するのは、手間がかかり、さらに無効な参照が発生する可能性もあるため、これらの2つの属性の値は標準「プロパティ」ウィンドウと統合されているエディタを使用して設定します(図6-9を参照)。これらの識別子を検証するために特別に定義されている監査ルールがあります(第5.3.2.5章「要素識別子とその監査に関する必知事項」を参照)。
ポップアップ表示動作のdecoration属性を使用すると、指定されたalignIdに一致するコンポーネントを指すアンカーを持つようにポップアップを構成できます。これを行うには、decoration属性をanchorに設定します(デフォルト値はsimpleです)。
|
注意:
|
ポップアップ表示動作のalign属性に設定する値は、ポップアップ・コンポーネントの配置を示します(その配置を行うのに十分なスペースがある場合)。十分なスペースがない場合は、代替の配置がMAFによって選択されます。
|
ヒント: ポップアップを画面中央に配置するには、パネル・ページ・コンポーネントの |
ポップアップ表示動作コンポーネントの属性およびその値の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
例6-8は、MAF AMXファイルで定義されているpopupおよびshowPopupBehavior要素を示しています。
例6-8 ポップアップおよびポップアップ表示動作の定義
<amx:view>
<amx:panelPage id="panelPage1">
<amx:commandButton id="commandButton1" text="Show Popup">
<amx:showPopupBehavior popupId="popup1" type="action"
align="topStart" alignId="panelPage1"
decoration="anchor"/>
</amx:commandButton>
</amx:panelPage>
<amx:popup id="popup1"
animation="slideUp"
autoDismiss="true"
backgroundDimming="off"/>
</amx:view>
ポップアップ・コンポーネントは、ユーザー入力エラーが発生したときに検証メッセージを表示できます。詳細は、第6.9項「入力の検証」を参照してください。
ポップアップID属性を設定するには:
ソース・エディタまたは「構造」ウィンドウでshowPopupBehavior要素を選択します。
「ポップアップID」フィールドの右側にある下矢印をクリックし、使用可能なポップアップ・コンポーネントのリストから選択するか(図6-8を参照)、「ポップアップID」フィールドの右側にある「プロパティ・メニュー」アイコンをクリックして「ポップアップID」プロパティ・エディタを開きます(図6-9を参照)。
プロパティ・エディタを使用する場合は、「ポップアップID」プロパティ・エディタで「編集」を選択し、図6-10に示す「プロパティの編集: ポップアップID」ダイアログを開きます。
このポップアップ表示動作が起動されたときに表示するポップアップ・コンポーネントを選択します。
位置合せID属性を設定するには:
ソース・エディタまたは「構造」ウィンドウでshowPopupBehavior要素を選択します。
「位置合せID」フィールドの右側にある「プロパティ・メニュー」アイコンをクリックし、図6-11に示すように「位置合せID」プロパティ・エディタを開きます。
「位置合せID」プロパティ・エディタで「編集」を選択し、図6-12に示す「プロパティの編集: 位置合せID」ダイアログを開きます。
ポップアップ表示動作操作の親コンポーネントを選択します。
iOSプラットフォーム用の開発を行う場合、右から左の言語環境に対応するようにポップアップを構成するには、そのanimation属性をslideStartまたはslideEndに設定します。
UIDemoという名前のMAFサンプル・アプリケーションは、ポップアップ・コンポーネントの使用方法と、スタイルを適用して、特定のパターンに従ってページ・レイアウトを調整する方法を示しています。UIDemoアプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
パネル・スプリッタ(panelSplitter)コンポーネントは、左側にあるナビゲーション・ペインで制御可能な複数のコンテンツ領域を表示するために使用します。パネル・スプリッタ・コンポーネントは、通常、表示サイズが大きいタブレット・デバイスで使用されます。これらのコンポーネントは、通常、表示領域の左側にリストが、右側にコンテンツがある場合に使用されます。
パネル・スプリッタには、MAF AMXページにパネル・スプリッタをドラッグ・アンド・ドロップすると自動的に生成されるナビゲータ・ファセット(第6.2.7項「ファセット・コンポーネントの使用方法」を参照)およびパネル・アイテム・コンポーネントを含めることができます。パネル・アイテム(panelItem)コンポーネントは、パネル・スプリッタのコンテンツ領域を表します。各パネル・スプリッタ・コンポーネントには少なくとも1つのパネル・アイテムが必要なため、パネル・スプリッタが作成されるときにパネル・アイテムがパネル・スプリッタに自動的に追加されます。各パネル・アイテム・コンポーネントには、パネル・グループ・レイアウトに含めることができるどのようなコンポーネントも含めることができます(第6.2.3項「パネル・グループ・レイアウト・コンポーネントの使用方法」を参照)。
「パネル・スプリッタ」の左側は、ナビゲータ・ファセット(navigator)によって表されます。これは、アニメーション付きの複数のコンテンツのみが必要とされる場合(たとえば、異なるボタンを選択してコンテンツを切り替えるときにアニメーションを必要とする選択ボタン付きの複数コンテンツ領域を描画する場合)のオプションです。横モードの場合、このファセットがレンダリングされます。縦モードの場合、ボタンはコンテンツ領域の上に配置され、クリックされたときにこのファセットのコンテンツがポップアップ内で起動されます。
iOSプラットフォーム用の開発を行う場合、右から左の言語環境に対応するようにパネル・スプリッタとパネル・アイテムを構成するには、それらのanimation属性をslideStart、slideEnd、flipStart、flipEndのいずれかに設定します。パネル・アイテム・コンポーネントのanimation属性は、パネル・スプリッタのanimation属性をオーバーライドします。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
例6-9は、MAF AMXファイルで定義されているpanelSplitter要素を、子コンポーネントとして使用されているnavigatorファセットとともに示しています。
例6-9 ナビゲータを含むパネル・スプリッタの定義
<amx:panelSplitter id="ps1"
selectedItem="#{bindings.display.inputValue}"
animation="flipEnd">
<amx:facet name="navigator">
<amx:listView id="lv1"
value="#{bindings.data.collectionModel}"
var="row"
showMoreStrategy="autoScroll"
bufferStrategy="viewport>
...
</listView>
</facet>
<amx:panelItem id="x">
<amx:panelGroupLayout>
...
</panelGroupLayout>
</panelItem>
<amx:panelItem id="y">
<amx:panelGroupLayout>
...
</panelGroupLayout>
</panelItem>
</panelSplitter>
その他の例は、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるUIDemoアプリケーションを参照してください。
詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
スペーサ(spacer)コンポーネントは、MAF AMXページ上でコンポーネントを区分するための空白の領域を作成するために使用します。spacerのheight (垂直間隔の場合)およびwidth (水平間隔の場合)属性を使用して、縦および横の空白をページに組み込むことができます。
スペーサ・コンポーネントを追加するには:
「コンポーネント」ウィンドウで、スペーサをMAF AMXページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
例6-10は、MAF AMXファイルで定義されているspacer要素およびその子を示しています。
表のレイアウト(tableLayout)コンポーネントは、セルを含む行で構成される一般的な表のフォーマットでデータを表示するために使用します。
行のレイアウト(rowLayout)コンポーネントは、表のレイアウトの単一の行を表します。表のレイアウト・コンポーネントには、1つ以上の行のレイアウト・コンポーネント、または行のレイアウト・コンポーネントを生成できるイテレータ・コンポーネントのいずれかが含まれている必要があります。
セル・フォーマット(cellFormat)コンポーネントは、行のレイアウトのセルを表します。行のレイアウト・コンポーネントには、1つ以上のセル・フォーマット・コンポーネント、イテレータ・コンポーネント、属性リスト・イテレータ・コンポーネントまたはセル・フォーマット・コンポーネントを生成できるファセット定義コンポーネントのいずれかが含まれている必要があります。
表のレイアウト構造では、セル・コンテンツで割合による高さを使用したり、表構造全体に高さをまとめて割り当てることはできません。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスで次の属性の説明を参照してください。
表のレイアウト・コンポーネントのlayoutおよびwidth属性
行のレイアウト・コンポーネントのwidthおよびheight属性
表のレイアウト・コンポーネントを追加するには:
「コンポーネント」ウィンドウで、表のレイアウトをMAF AMXページにドラッグ・アンド・ドロップします。
必要な数の行のレイアウト、イテレータ、属性リスト・イテレータまたはファセット定義子コンポーネントを表のレイアウト・コンポーネントに挿入します。
セル・フォーマット、イテレータ、属性リスト・イテレータまたはファセット定義子コンポーネントをそれぞれの行のレイアウト・コンポーネントに挿入します。
「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
例6-11は、MAF AMXファイルで定義されているtableLayout要素およびその子を示しています。
例6-11 表のレイアウトの定義
<amx:tableLayout id="tableLayout1"
rendered="#{pageFlowScope.pRendered}"
styleClass="#{pageFlowScope.pStyleClass}"
inlineStyle="#{pageFlowScope.pInlineStyle}"
borderWidth="#{pageFlowScope.pBorderWidth}"
cellPadding="#{pageFlowScope.pCellPadding}"
cellSpacing="#{pageFlowScope.pCellSpacing}"
halign="#{pageFlowScope.pHalign}"
layout="#{pageFlowScope.pLayoutTL}"
shortDesc="#{pageFlowScope.pShortDesc}"
summary="#{pageFlowScope.pSummary}"
width="#{pageFlowScope.pWidth}">
<amx:rowLayout id="rowLayout1">
<amx:cellFormat id="cellFormatA" rowSpan="2" halign="center">
<amx:outputText id="otA" value="Cell A"/>
</amx:cellFormat>
<amx:cellFormat id="cellFormatB" rowSpan="2" halign="center">
<amx:outputText id="otB" value="Cell B (wide content)"/>
</amx:cellFormat>
<amx:cellFormat id="cellFormatC" rowSpan="2" halign="center">
<amx:outputText id="otC" value="Cell C"/>
</amx:cellFormat>
</amx:rowLayout>
<amx:rowLayout id="rowLayout2">
<amx:cellFormat id="cellFormatD" halign="end">
<amx:outputText id="otD" value="Cell D"/>
</amx:cellFormat>
<amx:cellFormat id="cellFormatE">
<amx:outputText id="otE" value="Cell E"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
デッキ(deck)コンポーネントは、その子コンポーネントを一度に1つ表示するコンテナを表します。表示される子コンポーネント(displayedChild属性によって定義)の別の子コンポーネントへの遷移は、遷移(transition)操作により有効になります。遷移は、アニメーションの形式にできます。遷移の詳細は、第5.2.11項「ページ遷移スタイルの指定方法」を参照してください。
デッキは前後に移動できます。
デッキ・コンポーネントを追加するには:
「コンポーネント」ウィンドウで、デッキをMAF AMXページにドラッグ・アンド・ドロップします。
必要な数の遷移操作および子UIコンポーネントをデッキ・コンポーネントに挿入します。
「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
例6-12は、MAF AMXファイルで定義されているdeck要素およびその子を示しています。デッキ・コンポーネントのdisplayedChild属性は、表示する子コンポーネントIDを定義します。通常、ボタンを1つ選択などの選択コンポーネントによってこのことが制御されます。
例6-12 デッキ定義
<amx:deck id="deck1"
rendered="#{pageFlowScope.pRendered}"
styleClass="#{pageFlowScope.pStyleClass}"
inlineStyle="width:95px;height:137px;overflow:hidden;
#{pageFlowScope.pInlineStyle}"
landmark="#{pageFlowScope.pLandmark}"
shortDesc="#{pageFlowScope.pShortDesc}"
displayedChild="#{pageFlowScope.pDisplayedChild}">
<amx:transition triggerType="#{pageFlowScope.pTriggerType}"
transition="#{pageFlowScope.pTransition}"/>
<amx:transition triggerType="#{pageFlowScope.pTriggerType2}"
transition="#{pageFlowScope.pTransition2}"/>
<amx:commandLink id="linkCardBack1" text="Card Back">>
<amx:setPropertyListener from="linkCardA"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
<amx:commandLink id="linkCardA1" text="Card Front A">
<amx:setPropertyListener id="setPL1"
from="linkCardB"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
<amx:commandLink id="linkCardB1" text="Card Front B">
<amx:setPropertyListener id="setPL2"
from="linkCardC"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
<amx:commandLink id="linkCardC1" text="Card Front C">
<amx:setPropertyListener id="setPL3"
from="linkCardD"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
<amx:commandLink id="linkCardD1" text="Card Front D">
<amx:setPropertyListener id="setPL4"
from="linkCardE"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
<amx:commandLink id="linkCardE1" text="Card Front E">
<amx:setPropertyListener id="setPL5"
from="linkCardBack"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
</amx:deck>
詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
フラグメント(fragment)コンポーネントは、MAF AMXページ・コンテンツの共有を有効にします。このコンポーネントは、MAF AMXフラグメント・ファイルと組み合せて使用されます。詳細は、第5.3.1.6項「ページ・コンテンツの共有」を参照してください。
フラグメント・コンポーネントを追加するには:
「コンポーネント」ウィンドウで、フラグメントをMAF AMXページにドラッグ・アンド・ドロップします。
「フラグメントの挿入」ダイアログを使用して、フラグメントのSrc属性をフラグメント・ファイル(.amxf)に設定します。
オプションで、「構造」ビューを使用して、属性、属性リストまたはファセットなどの子コンポーネントを追加します。
「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
フラグメントにコンテンツを含めるMAF AMXフラグメント・ファイルにファセット定義(facetRef)を追加し、facetRefのfacetName属性をファセットの名前に設定します。
例5-12「MAF AMXページ内のフラグメント」は、MAF AMXページに追加されたfragment要素を示しています。例5-11「フラグメント定義」は、対応するMAF AMXフラグメント・ファイルを示しています。
FragmentDemoという名前のMAFサンプル・アプリケーションは、フラグメントの作成方法および使用方法を示しています。このサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
MAF AMXアプリケーション機能を開発する際は、次のUIコンポーネントを使用できます。
入力テキスト(第6.3.1項「入力テキスト・コンポーネントの使用方法」を参照)
入力数値スライダ(第6.3.2項「入力数値スライダ・コンポーネントの使用方法」を参照)
入力日(第6.3.3項「入力日コンポーネントの使用方法」を参照)
出力テキスト(第6.3.4項「出力テキスト・コンポーネントの使用方法」を参照)
ボタン(第6.3.5項「ボタンの使用方法」を参照)
リンク(第6.3.6項「リンクの使用方法」を参照)
イメージ(第6.3.7項「イメージの表示方法」を参照)
チェックボックス(第6.3.8項「チェックボックス・コンポーネントの使用方法」を参照)
チェックボックスを複数選択(第6.3.9項「チェックボックスを複数選択コンポーネントの使用方法」を参照)
選択肢を複数選択(第6.3.11項「選択肢を複数選択コンポーネントの使用方法」を参照)
ブール・スイッチ(第6.3.12項「ブール・スイッチ・コンポーネントの使用方法」を参照)
選択肢(第6.3.10項「選択肢コンポーネントの使用方法」を参照)
選択ボタン(第6.3.13項「選択ボタン・コンポーネントの使用方法」を参照)
ラジオ・ボタン(第6.3.14項「ラジオ・ボタン・コンポーネントの使用方法」を参照)
リスト・ビュー(第6.3.15項「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」を参照)
カルーセル(第6.3.16項「カルーセル・コンポーネントの使用方法」を参照)
フィルム・ストリップ(第6.3.17項「フィルム・ストリップ・コンポーネントの使用方法」を参照)
Verbatim (第6.3.18項「Verbatimコンポーネントの使用方法」を参照)
出力HTML (第6.3.19項「出力HTMLコンポーネントの使用方法」を参照)
イテレータ(第6.3.20項「反復の有効化方法」を参照)
MAF AMXアプリケーション機能を開発する際は、UIコンポーネントの子として、操作、リスナー・タイプ・コンポーネントおよびコンバータなど、次のその他のコンポーネントも使用できます。
バンドルのロード(第6.3.21項「リソース・バンドルのロード方法」を参照)
アクション・リスナー(第6.3.22項「アクション・リスナーの使用方法」を参照)
プロパティ・リスナーの設定(第6.3.23項「プロパティ・リスナーの設定の使用方法」を参照)
日時の変換(第6.3.24項「日時の変換方法」を参照)
数値の変換(第6.3.25項「数値の変換方法」を参照)
ナビゲーション・ドラッグ動作(第6.3.26項「ドラッグ・ナビゲーションを有効にする方法」を参照)
ロード・インジケータ動作(第6.3.27項「ロード・インジケータの使用方法」を参照)
UIコンポーネントを追加するには、それを「コンポーネント」ウィンドウからMAF AMXページにドラッグ・アンド・ドロップします(第5.3.2.1項「UIコンポーネントの追加」を参照)。次に、「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します(第5.3.2.3項「UIコンポーネントの構成」を参照)。特定のコンポーネントごとの属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
|
注意: MAF AMXページで、レイアウト・コンポーネント内にUIコンポーネントを配置します(第6.2項「ページ・レイアウトの設計」を参照)。UI要素は、 |
いくつかのUIコンポーネントにはイベント・リスナーを追加できます。詳細は、第6.10項「イベント・リスナーの使用方法」を参照してください。イベント・リスナーは、iOSとAndroidのどちらのデバイスでもMAF AMXランタイムの記述のためにコンポーネントに適用できますが、それらのリスナーはデザインタイムでは何の効果も持ちません。
これらのUIコンポーネントにおけるアクセシビリティのサポートの詳細は、第6.8項「MAFのアクセシビリティのサポートの理解」を参照してください。
MAF AMXを使用してiOSプラットフォーム用に作成されたユーザー・インタフェースは、言語環境が左から右、右から左のいずれであっても正しく表示されます。後者の場合、コンポーネントは画面の左側ではなく右側から表示されます。
|
注意: MAFでは、デザインタイムにEL式を評価しません。コンポーネントの属性の値が式に設定されている場合、この値はJDeveloperのプレビューでは式として表示され、実行時のコンポーネントの表示は異なる場合があります。 |
CompGalleryという名前のMAFサンプル・アプリケーションは、MAF AMX UIコンポーネントの作成方法および構成方法を示しています。UIDemoという名前のもう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" />
図6-14は、「プレビュー」ペインに表示されている入力テキスト・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:inputText id="inputText1"
label="Input Text"
value="text"/>
inputType属性によって、コンポーネントでユーザー入力がどのように(テキスト(デフォルト)、電子メール・アドレス、数値、電話銀号、URLのいずれかとして)解釈されるのかを定義できます。これらの入力タイプは、HTML5によって許容される値に基づいています。
入力テキスト・コンポーネントに入力される日時値とともに数値の変換を有効にするには、数値の変換(第6.3.25項「数値の変換方法」を参照)および日時の変換(第6.3.24項「日時の変換方法」を参照)コンポーネントを使用します。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery。
いくつかのモバイル・デバイスでは、エンド・ユーザーが入力テキスト・フィールドをタップすると、キーボードが表示(スライドアップ)されます。入力テキストがMAF AMXページの唯一のコンポーネントである場合、ページがロードされるときに、デフォルトで入力フォーカスはこのフィールド上に配置され、キーボードが表示されます。
複数行入力テキストは、それが唯一のコンポーネントである場合、セカンダリ・ページに表示されることがあります。その場合、ページがロードされてキーボードが表示されたときに複数行入力テキストがフォーカスを受け取ります。
iOSデバイスとAndroidデバイスでは、入力テキスト・コンポーネントのレンダリングおよび動作は異なります。iPhoneおよびiPadでは、入力テキスト・コンポーネントが表示されるときに境界線がある場合とない場合があります。
入力テキスト・コンポーネントを作成する際は、次の点を考慮してください。
コンテンツを入力または編集するには、エンド・ユーザーはフィールド内をタップする必要があります。それにより、タップした場所に点滅する挿入カーソルが表示され、エンド・ユーザーがコンテンツを編集できるようになります。フィールドにコンテンツが含まれていない場合、挿入カーソルはフィールドの先頭に配置されます。
入力テキスト・コンポーネントによって表されるフィールドには、通常、プロンプトとして使用されるデフォルト・テキストが含まれていることがあります。エンド・ユーザーがそのようなフィールド内でキーボードのキーをタップすると、編集モードになったときにそのデフォルト・テキストがクリアされます。この動作は入力テキストのhintText属性により有効にされ、構成されます。
入力テキスト・コンポーネントによって表されるフィールドには、選択済の外観はありません。選択は、フィールド内の点滅する挿入カーソルによって示されます。
エンド・ユーザーがフィールドに収まる数を超えたテキストを入力すると、タイピングの続行に従って一度に1文字ずつテキスト・コンテンツが左にシフトします。
複数行入力テキスト・コンポーネントは、任意の高さの矩形としてレンダリングされます。このコンポーネントでは、コンテンツが大きすぎてフィールドの境界内に収まらない場合のスクロールがサポートされています。テキスト領域が一杯になるとテキストの行が上にスクロールし、新しい行のテキストが追加されます。指定された表示領域に表示できる数よりも多くの行がある場合、エンド・ユーザーは上または下にフリックしてテキストの行をスクロールできます。コンポーネント内にスクロールバーが表示されてその領域がスクロール可能であることを示します。
パスワード・フィールドは入力された各文字を一時的にエコーし、その後、その文字をドットに変換してパスワードを保護します。
iOSでの入力テキスト・コンポーネントの外観および動作はカスタマイズ可能です(第6.3.1.1項「入力テキスト・コンポーネントのカスタマイズ」を参照)。
MAF AMXは、iOSデバイスでの入力時の先頭大文字化および修正のサポートを提供するとともに、単一行入力テキスト・コンポーネントのために、モバイル・デバイスのソフト・キーパッドの右下にある「return」ボタン(図6-15を参照)をオーバーライドして、その表示と動作を「Go」または「Search」ボタンのものに置き換え(図6-16を参照)、DataChangeEventをトリガーするようにする機能を提供します。
表6-3には、入力テキスト・コンポーネントの属性(そのコンポーネントの外観と動作、および入力テキストによって表されるフィールドへの値の入力に使用するソフト・キーパッドの外観と動作をカスタマイズできるようにする)がリストされています。
表6-3 入力テキスト・コンポーネントの入力カスタマイズ属性
| 属性 | 値 | 説明 |
|---|---|---|
|
|
|
テキスト・フィールドをどのように使用するかを示します。
iOSでの「Go」および「Search」ボタンのサポートは変更が予定されており、いずれかの時点で終了する可能性がありますが、一部のiOSデバイスのキーパッドには拡張機能が備えられています。たとえば、単一行テキスト・フィールドについては、「return」ボタンが表示されるかわりに、すでに「Go」または「Search」ボタンに置き換えられている場合があります。 |
|
|
|
入力テキストによって表されるフィールドの編集中に、iOSによる、値の大文字化に関する特別な処理を要求します。 
Androidでは、このプロパティを設定しても影響がないことに注意してください。 |
|
|
|
入力テキストによって表されるフィールドの編集中に、iOSによる、値の修正に関する特別な処理を要求します。 
Androidでは、このプロパティを設定しても影響がないことに注意してください。 |
iOSによって提供される、デバイス・シミュレータでの自動大文字化および自動修正のサポートは限定的であるため、iOSデバイスでこの機能をテストする必要があります。
入力数値スライダ(inputNumberSlider)コンポーネントは、キーを使用して値を入力するかわりにスライダを使用して値の範囲から数値を選択できるようにします。スライダの溝またはトラックの塗り潰されている部分が、現在の値を視覚的に表しています。
スライダの値を数値的に示すには、出力または入力テキスト・コンポーネントとともに入力数値スライダを使用できます。入力テキスト・コンポーネントではスライダ値を直接入力することもできます。エンド・ユーザーが入力テキスト・フィールドをタップすると、数値モードのキーボードがスライドアップします。このキーボードは、スライドダウン・ボタンを使用するか、スライダ・コンポーネントからタップすることにより消去できます。
入力数値スライダ・コンポーネントは、常に、コンポーネントの定義済範囲内の最大値および最小値を表示します。
|
注意: 入力数値スライダ・コンポーネントは、正確な数値入力が必要な場合や値の範囲が広い場合(たとえば、0から1000)は使用しないでください。 |
例6-13は、MAF AMXファイルで定義されているinputNumberSlider要素を示しています。
図6-17は、「プレビュー」ペインに表示されている入力数値スライダ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:inputNumberSlider id="inputNumberSlider1"
label="Input Number"
minimum="0"
maximum="20"
stepSize="1"
value="10"/>
入力数値スライダ・コンポーネントに入力される数値の変換を有効にするには、数値の変換コンポーネント(第6.3.25項「数値の変換方法」を参照)を使用します。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery。
他のMAF AMX UIコンポーネントと同様に、入力数値スライダ・コンポーネントには通常の状態と選択済状態があります。コンポーネントは、いつでもタッチされたときに選択済状態になります。エンド・ユーザーは、スライダ値を変更するには、タッチしてからスライダ・ボタンを操作します。
入力数値スライダ・コンポーネントには、エンド・ユーザーに追加情報を提供するためにスライダのいずれかの側に表示できるイメージを指すオプションのimageLeftおよびimageRight属性があります。
入力日(inputDate)コンポーネントは、日付を入力するためのポップアップ入力フィールドを提示します。デフォルトの日付フォーマットは、現在のロケールに適切な省略の日付フォーマットです。たとえば、米語(ENU)のデフォルトの書式はmm/dd/yyです。inputType属性によって、コンポーネントが入力として日付、時刻または日時を受け入れるのかどうかが定義されます。タイムゾーンは、モバイル・デバイスに対して構成されているタイムゾーンに依存します。したがって、デバイスに関連しています。実行時、入力日コンポーネントのルック・アンド・フィールはそのデバイスのネイティブのものになります。
例6-14は、MAF AMXファイルで定義されているinputDate要素を示しています。このコンポーネントのinputType属性は、デフォルト値のdateに設定されています。value属性が読取り専用の場合、これはEL式またはその他の任意のタイプの値のいずれかに設定でき、value属性が読取り専用でない場合は、EL式としてのみ指定できます。
詳細は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
W3Cによって定義されているHTML5のグローバル日付と時刻
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
MAF AMXは、テキストを表示するラベルとして使用するために出力テキスト(outputText)コンポーネントを提供しています。
例6-15は、MAF AMXファイルで定義されているoutputText要素を示しています。
図6-18は、「プレビュー」ペインに表示されている出力テキスト・コンポーネントを示しています。
出力テキスト・コンポーネントの数値および日時関連データの変換を容易にするには、数値の変換(第6.3.25項「数値の変換方法」を参照)および日時の変換(第6.3.24項「日時の変換方法」を参照)コンバータを使用します。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGalleryおよびUIDemo
ボタン(commandButton)コンポーネントは、アクション(たとえば、保存、取消し、送信)をトリガーするため、およびアプリケーション内で他のページへのナビゲーション(たとえば、戻る。第6.3.5.7項「戻るボタン・ナビゲーションの有効化」を参照)を有効化するために使用します。
ボタンは、次の方法のいずれかで使用できます。
テキスト・ラベル付きボタン。
テキスト・ラベルおよびイメージ・アイコン付きボタン。
|
注意: アイコン・イメージと配置(テキスト・ラベルの左または右)を定義できます。 |
イメージ・アイコンのみが付いたボタン(たとえば、レコードを追加または削除するための + および - ボタン)。
MAFでは、次の3つの表示領域に対して1つのデフォルト・ボタン・タイプがサポートされています。
最上部ヘッダー・バーに表示されるボタン。MAF AMXページでは、ヘッダーは、ヘッダー、プライマリおよびセカンダリ・ファセットと組み合せたパネル・ページ・コンポーネントによって表され、iPhoneではこれが一般的です(第6.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)。
ヘッダー・ファセットには、ページ・タイトルが含まれています。
プライマリ・アクション・ファセットは、 ヘッダー・バーの左隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
セカンダリ・アクション・ファセットは、ヘッダー・バーの右隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
ページのコンテンツ領域に表示されるボタン。
ページのフッター・バーに表示されるボタン。MAF AMXページでは、フッターは、フッター・ファセットと組み合せたパネル・ページ・コンポーネントによって表されます(第6.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)。
フッター・ファセットは、コンテンツ領域の下に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
どのタイプでも、すべてのボタン・コンポーネントには次の3つの状態があります。
標準。
アクティブ: ボタンがエンド・ユーザーによってタップまたはタッチされたときの外観を表します。ボタンがタップされた(タッチされてリリースされた)ときに、ボタン・アクションが実行されます。タッチしたときにアクティブ化された外観が表示され、リリースしたときにアクションが実行されます。エンド・ユーザーがボタンにタッチした後、指をドラッグしてボタンから離した場合、アクションは実行されません。ただし、ボタンにタッチしている間中、アクティブ化された外観が表示されます。
無効。
ボタン・コンポーネントの外観は、adfmf-commandButton-<style>に設定したそのstyleClass属性によって定義されます。表6-4に示すどのスタイルでも、MAF AMXページ内の有効な任意の場所に配置されているボタンに適用できます。
表6-4 主なボタン・スタイル
| ボタン・スタイル名 | 説明 |
|---|---|
|
デフォルト |
次の場所に配置されているボタンのデフォルト・スタイル
|
|
戻る |
いずれかのパネル・ページ・ファセット(プライマリ、セカンダリ、ヘッダー、フッター)に配置されるボタンの戻るスタイル。このスタイルを、デフォルト・ボタンに適用すると、ページに戻るという外観を表示できます。このボタン・スタイルは、Springboardに戻るまたはページに戻るボタンによく使用されます。 詳細は、第6.3.5.2項「戻るスタイル・ボタンの表示」を参照してください |
|
強調表示 |
いずれかのパネル・ページ・ファセット(プライマリ、セカンダリ、ヘッダー、フッター)またはMAF AMXページのコンテンツ領域に配置されるボタンの強調表示スタイル。このスタイルをボタンに追加すると、保存(または完了)ボタンで一般的なiPhoneボタンの外観を提供できます。 詳細は、第6.3.5.3項「強調表示スタイル・ボタンの表示」を参照してください |
|
アラート |
アラート・スタイルは削除の外観をボタンに追加します。詳細は、第6.3.5.4項「アラート・スタイル・ボタンの表示」を参照してください |
ボタンに適用して太い角丸の境界線でボタンを修飾できる角丸スタイル(adfmf-commandButton-rounded)があります(図6-19を参照)。このスタイルは他のどのようなスタイルとも組み合せて定義できます。
MAF AMXでは、追加の装飾スタイルがいくつか提供されています(第6.3.5.5項「追加のボタン・スタイルの使用方法」を参照)。
MAF AMXにおけるボタン・コンポーネントの子操作および属性の処理には、特定の順序があります。詳細は、第6.3.5.8項「操作と属性の処理順序に関する必知事項」を参照してください。
パネル・ページ・ファセットまたはコンテンツ領域内に配置できる、次のような様々なタイプのデフォルト・スタイル・ボタンがあります。
テキスト・ラベルのみが示される標準、アクティブまたは無効ボタン
イメージ・アイコンのみが示される標準、アクティブまたは無効ボタン
例6-16および例6-17は、MAF AMXファイルで宣言されているcommandButton要素を示しています。
例6-16 テキスト・ラベル付きデフォルト・ボタンの定義
<amx:panelPage id="pp1">
<amx:facet name="primary">
<amx:commandButton id="cb1"
text="Cancel"
action="cancel"
actionListener="#{myBean.rollback}"/>
</amx:facet>
</amx:panelPage>
例6-17 イメージ・アイコン付きデフォルト・ボタンの定義
<amx:panelPage id="pp1">
<amx:facet name="primary">
<amx:commandButton id="cb1"
icon="plus.png"
action="add"
actionListener="#{myBean.AddItem}"/>
</amx:facet>
</amx:panelPage>
例6-18は、パネル・ページのフッター・ファセット内で宣言されているcommandButton要素を示しています。
例6-18 フッター・ファセットのテキスト・ラベルおよびイメージ付きデフォルト・ボタンの定義
<amx:panelPage id="pp1">
<amx:facet name="footer">
<amx:commandButton id="cb2"
icon="folder.png"
text="Move (#{myBean.mailcount})"
action="move"/>
</amx:facet>
</amx:panelPage>
例6-19は、パネル・ページのコンテンツ領域の一部で宣言されているcommandButton要素を示しています。
例6-19 ページ・コンテンツ領域におけるテキスト・ラベル付きデフォルト・ボタンの定義
<amx:panelPage id="pp1">
<amx:commandButton id="cb1"
text="Reply"
actionListener="#{myBean.share}"/>
</amx:panelPage>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
パネル・ページ・ファセットまたはコンテンツ領域内に配置される、次のような様々なタイプの戻るスタイル・ボタンがあります。
テキスト・ラベルのみが示される標準、アクティブまたは無効ボタン
イメージ・アイコンのみが示される標準、アクティブまたは無効ボタン
例6-20は、MAF AMXファイルで宣言されているcommandButton要素を示しています。
例6-20 テキスト・ラベル付き戻るボタンの定義
<amx:panelPage id="pp1">
<amx:facet name="header">
<amx:outputText value="Details" id="ot1"/>
</amx:facet>
<amx:facet name="primary">
<amx:commandButton id="cb1"
text="Back"
action="__back"/>
</amx:facet>
...
</amx:panelPage>
プライマリ・ファセット内にボタン・コンポーネント配置し、そのaction属性を__backに設定した場合は常に、図6-20のように、MAF AMXによって戻る矢印スタイリングがそれに自動的に適用されます。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
他のタイプのボタンと同様に、パネル・ページ・ファセットまたはコンテンツ領域内に配置される強調表示スタイル・ボタンは、標準、アクティブまたは無効の状態を取ることができます。
例6-21は、MAF AMXファイルで宣言されているcommandButton要素を示しています。
例6-21 テキスト・ラベル付き強調表示ボタンの定義
<amx:panelPage id="pp1">
<amx:facet name="secondary">
<amx:commandButton id="cb2"
text="Save"
action="save"
styleClass="adfmf-commandButton-highlight"/>
</amx:facet>
</amx:panelPage>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
パネル・ページ内に配置されるアラート・スタイル・ボタンは、標準、アクティブまたは無効の状態を取ることができます。
例6-22は、MAF AMXファイルで宣言されているcommandButton要素を示しています。
例6-22 テキスト・ラベル付きアラート・ボタンの定義
<amx:commandButton id="cb1"
text="Delete"
actionListener="#{myBean.delete}"
styleClass="adfmf-commandButton-alert" />
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
MAF AMXでは、次の追加のボタン・スタイルが提供されます。
暗いスタイル
明るいスタイル
小さいスタイル
大きいスタイル
強調表示スタイル
確認スタイル
代替スタイルの2つのバリエーション
MAFアプリケーションでは、次のコンテキスト内でボタン・コンポーネントを使用できます。
特定のアクションを実行するためのコンテンツ領域
ポップスタイル・アラート・メッセージ
ナビゲーション・バー
MAFでは、ナビゲーション・バーで使用する標準ボタンを作成できます。
編集ボタンで、エンド・ユーザーは編集またはコンテンツ操作モードに入ることができます。
取消ボタンで、エンド・ユーザーは、変更を保存することなく編集またはコンテンツ操作モードを終了できます。
保存ボタンで、エンド・ユーザーは、変更を保存して編集またはコンテンツ操作モードを終了できます。
完了ボタンで、エンド・ユーザーは、変更があれば保存して現在のモードを終了できます。
元に戻すボタンで、エンド・ユーザーは最後のアクションを元に戻すことができます。
やり直しボタンで、エンド・ユーザーは最後の元に戻したアクションをやり直すことができます。
戻るボタンで、エンド・ユーザーはSpringboardに戻ることができます。
ページに戻るボタンで、エンド・ユーザーはボタン・テキスト・ラベルによって識別されるページに戻ることができます。
追加ボタンで、エンド・ユーザーは新しいオブジェクトを追加または作成できます。
コンテンツ領域
ページのコンテンツ領域内に配置されたボタンは、そのページ内のボタンの場所およびコンテキストに指定されている特定のアクションを実行します。これらのボタンは、ナビゲーション・バーに配置されているボタンとは異なる外観を持っている場合があります。
アクション・シート
アクション・シート内に配置されるボタンの例は、ノートの削除ボタンおよび取消ボタンのグループです。
アクション・シート・ボタンは画面の幅まで拡大されます。
アラート・メッセージ
OKボタンは、パスワード入力の失敗後のログイン検証など、検証メッセージ内に配置できます。
MAF AMXでは、前に訪問したページに戻るデフォルト動作を持つ戻るボタンを使用した移動がサポートされています。詳細は、第5.2.9項「UIコンポーネントを使用したアクション結果の指定方法」を参照してください。
__backナビゲーションを備えたパネル・ページのプライマリ・ファセットにボタン・コンポーネントを追加すると、そのボタンには、戻る矢印の視覚的スタイリングが自動的に設定されます(第6.3.5.2項「戻るスタイル・ボタンの表示」を参照)。これを無効にするには、styleClass属性をamx-commandButton-normalに設定します。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
ボタン、リンク、リスト・アイテムなどのコンポーネントがアクティブになっている場合に、MAF AMXによって操作および属性が処理される順序は、次のとおりです。
次の子操作は、XMLファイルに表示される順序で処理されます。
プロパティ・リスナーの設定
アクション・リスナー
ポップアップ表示動作
ポップアップを閉じる動作
アクション・リスナー(actionListener)属性が処理されて関連付けられたJavaメソッドが起動されます。
アクション(action)属性が処理されて、ナビゲーション・ケースがあればそれに従います。
リンク(commandLink)コンポーネントは、アクションをトリガーするためおよび他のビューへのナビゲーションを有効化するために使用します。
リンク・コンポーネントは、その子として任意のタイプのコンポーネントを定義できます。プロパティ・リスナーの設定(第6.3.23項「プロパティ・リスナーの設定の使用方法」を参照)、アクション・リスナー(第6.3.22項「アクション・リスナーの使用方法」を参照)、ポップアップ表示動作、ポップアップを閉じる動作(第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)および検証動作(第6.9項「入力の検証」を参照)などのコンポーネントをリンク・コンポーネントの子として使用することで、クリックおよびジェスチャーを実行できるアクション可能な領域を作成できます。
リンク内にイメージ・コンポーネントを配置することで(第6.3.7項「イメージの表示方法」を参照)、クリック可能イメージを作成できます。
例6-23は、MAF AMXファイルで宣言されているcommandLink要素を示しています。
例6-23 基本的なリンクの定義
<amx:commandLink id="cl1"
text="linked"
action="gotolink"
actionListener="#{myBean.doSomething}"/>
図6-24は、「プレビュー」ペインに表示されている基本的なリンク・コンポーネントを示しています。
例6-24は、MAF AMXファイルで宣言されているcommandLink要素を示しています。このコンポーネントはpanelFormLayoutおよびpanelLabelAndMessageコンポーネント内に配置されます。
例6-24 フォーム内リンクの定義
<amx:panelPage id="pp1">
<amx:panelFormLayout id="form">
<amx:panelLabelAndMessage id="panelLabelAndMessage1" label="Label">
<amx:commandLink id="cl1"
text="linked"
action="gotolink"
actionListener="#{myBean.doSomething}"/>
</amx:panelLabelAndMessage>
</amx:panelFormLayout>
</amx:panelPage>
図6-25は、フォーム内に配置され、「プレビュー」ペインに表示されているリンク・コンポーネントを示しています。
MAF AMXにおけるリンク・コンポーネントの子操作および属性の処理には、特定の順序があります。詳細は、第6.3.5.8項「操作と属性の処理順序に関する必知事項」を参照してください。
MAF AMXでは、リンクに類似しているが、ページ間のナビゲーションは許可されない別のコンポーネントであるリンク(実行) (goLink)コンポーネントが提供されています。このコンポーネントを使用して、外部ページへのリンクを有効化できます。図6-26は、「プレビュー」ペインに表示されているリンク(実行)コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:goLink id="goLink1"
text="Go Link"
url="http://example.com"/>
イメージは、リンク(実行)コンポーネントの子として指定できる唯一のコンポーネントです。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
MAF AMXでは、ビットマップによって表されるイメージ(image)コンポーネントを使用してiOSおよびAndroidデバイス上にイメージを表示できます。
ボタンおよびリスト・ビューにイメージを配置するだけでなく、それをリンク・コンポーネント内に配置して(第6.3.6項「リンクの使用方法」を参照)クリック可能イメージを作成できます。
例6-25は、MAF AMXファイル内のimage要素定義を示しています。
例6-25 イメージの定義
<amx:image id="i1"
styleClass="prod-thumb"
source="images/img-big-#{pageFlowScope.product.uid}.png" />
Androidプラットフォームでサポートされているフォーマットは次のとおりです。
GIF
JPEG
PNG
BMP
iOSプラットフォームでサポートされているフォーマットは次のとおりです。
PNG
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGalleryおよびUIDemo
チェックボックス(selectBooleanCheckbox)コンポーネントは、trueまたはfalseの値からの単一選択(選択済状態と選択解除状態の間で切り替えできる)を可能にするために作成するチェックボックスを表します。
チェックボックス・コンポーネントのlabel属性を使用するとチェックボックスの左側にテキストを配置でき、text属性を使用すると右側にテキストを配置できます。
例6-26は、MAF AMXファイルで宣言されているselectBooleanCheckbox要素を示しています。
例6-26 選択解除されたチェックボックスの定義
<amx:selectBooleanCheckbox id="check1"
label="Agree to the terms:"
value="#{myBean.bool1}"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/>
図6-27は、「プレビュー」ペインに表示される選択解除されたチェックボックス・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectBooleanCheckbox id="selectBooleanCheckbox1"
label="Checkbox"
value="false"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/>
「プレビュー」ペインに表示される選択済のチェックボックス・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
例6-27 デザインタイムの選択済のチェックボックス
<amx:selectBooleanCheckbox id="selectBooleanCheckbox1"
label="Checkbox"
value="true"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
iOSでは、ネイティブ・チェックボックス・コンポーネントはサポートされていません。ブール・スイッチは、通常、プロパティ・ページで使用され、ブール選択を可能にします(第6.3.12項「ブール・スイッチ・コンポーネントの使用方法」を参照)。
チェックボックスを複数選択(selectManyCheckbox)コンポーネントは、trueまたはfalseの値の複数選択を可能にするために使用するチェックボックスのグループを表します。これにより、グループ内の各チェックボックスの選択済と選択解除の切替えが可能になります。この選択メカニズムは、チェックボックスを複数選択コンポーネントに含まれているアイテムの選択コンポーネント(第6.3.10.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
|
注意: チェックボックスを複数選択コンポーネントには、アイテムの選択コンポーネントを2つ以上含めることができます。 |
例6-28は、MAF AMXファイルで宣言されているselectManyCheckbox要素を示しています。
例6-28 チェックボックスを複数選択の定義
<amx:selectManyCheckbox id="selectManyCheckbox1"
label="Select shipping options"
value="#{myBean.shipping}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}">
<amx:selectItem id="selectItem1"
label="Air"
value="#{myBean.shipping.air}"/>
<amx:selectItem id="selectItem2"
label="Rail"
value="#{myBean.shipping.rail}"/>
<amx:selectItem id="selectItem3"
label="Water"
value="#{myBean.shipping.water}"/>
</amx:selectManyCheckbox>
図6-29は、「プレビュー」ペインに表示されているチェックボックスを複数選択コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<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>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
MAF AMXでは、チェックボックスを複数選択コンポーネントを表示するための2つの代替方法が提供されています。ポップアップ・スタイル(デフォルト)とリスト・スタイル(使用可能な選択肢の数がデバイスの画面サイズを超えている場合に使用される)です。
iPhoneとiPadの両方でのポップアップスタイルのチェックボックスを複数選択コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストがポップアップに表示されます。選択を行うには、エンド・ユーザーは1つ以上の選択肢をタップします。選択内容を保存するには、エンド・ユーザーはポップアップの外をタップするか、閉じるボタン( x )を使用してポップアップを閉じます。
ポップアップを閉じるときに、コンポーネントに表示されている値が、選択済の値に更新されます。
選択肢の数がデバイスのサイズを超える場合、スクロール可能なリスト・ビュー(第6.3.15項「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」を参照)を含むフルページ・ポップアップが生成されます。
iPhoneとiPadの両方でのリストスタイルのチェックボックスを複数選択コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストが表示されます。選択を行うには、エンド・ユーザーは上下にスクロールして使用可能な選択肢を参照し、1つ以上の選択肢をタップします。選択内容を保存するには、エンド・ユーザーは閉じるボタン( x )をタップします。
リストを閉じるときに、コンポーネントに表示されている値が、選択済の値に更新されます。
|
注意: どちらの場合も、選択を取り消すメカニズムは提供されていません。 |
選択肢(selectOneChoice)コンポーネントは、リストからの単一の値の選択を可能にするために使用するコンボ・ボックスを表します。この選択メカニズムは、選択肢コンポーネントに含まれているアイテムの選択コンポーネント(第6.3.10.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
|
注意: 選択肢コンポーネントには、アイテムの選択コンポーネントを2つ以上含めることができます。 |
例6-29は、MAF AMXファイルのselectOneChoice要素の定義をselectItemsサブ要素とともに示しています。
例6-29 アイテムの選択コンポーネントを使用した選択肢の定義
<amx:selectOneChoice id="choice1"
label="Your state:"
value="#{myBean.myState}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}">
<amx:selectItem id="selectItem1" label="Alaska" value="AK"/>
<amx:selectItem id="selectItem2" label="Alabama" value="AL"/>
<amx:selectItem id="selectItem3" label="California" value="CA"/>
<amx:selectItem id="selectItem4" label="Connecticut" value="CT"/>
</amx:selectOneChoice>
例6-30 アイテムの選択コンポーネントを使用した選択肢の定義
<amx:selectOneChoice id="choice1"
label="Your state:"
value="#{myBean.myState}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}">
<amx:selectItems id="selectItems1" value="myBean.allStates"/>
</amx:selectOneChoice>
図6-30は、「プレビュー」ペインに表示されている選択肢コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<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>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
MAF AMXでは、選択肢コンポーネントを表示するため、ポップアップ・スタイルとドロップダウン・スタイルの2つの代替方法が提供されています。
iPhoneでのネイティブ選択肢コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると、選択肢のリストが、デフォルトで最初のオプションが選択された状態で表示されます。選択を行うには、エンド・ユーザーは上下にスクロールして使用可能な選択肢を参照します。選択内容を保存するには、エンド・ユーザーはツール・バーの「終了」をタップします。
iPadでは、ユーザーの対話は、次の点を除いてiPhoneにおける対話と同様です。
選択のリストは、ポップアップ・ダイアログに表示されます。
iPadのスタイリングが選択のリストの周囲に実装され、リストのソースを示すためにノッチが使用されます。
アイテムを選択しないで選択のリストを閉じるには、エンド・ユーザーはポップアップ・ダイアログの外をタップする必要があります。
|
注意: 選択のリストおよびツール・バーを表示するためのUIは、ブラウザにネイティブであり、CSSを使用してスタイリングすることはできません。 |
選択肢コンポーネント内のリスト値は、無効として表示できます。
選択肢の数がデバイスの表示サイズを超える場合、ネイティブな方法でスクロール可能なリスト・ページが生成されます。
Androidデバイスでのネイティブ選択肢コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると、ポップアップ・ダイアログ形式の選択肢のリストが表示されます。選択肢の数がデバイスのサイズ内に収まる場合は単純なポップアップが表示されます。この場合次のようになります。
選択リストの1つのアイテムを1回タップすると、そのアイテムが選択され、ポップアップが閉じます。選択内容は選択肢コンポーネント・ラベルに反映されます。
ポップアップの外で1回タップするか戻るキーをクリックすると、変更が適用されることなくポップアップが閉じます。
表示される選択肢の数がデバイス・サイズ内に収まらない場合は、ポップアップにスクロール可能リストが含まれます。その場合は次のようになります。
選択リストの1つのアイテムを1回タップすると、そのアイテムが選択され、ポップアップが閉じます。選択内容は選択肢コンポーネント・ラベルに反映されます。
戻るキーをクリックすると、変更が適用されることなくポップアップが閉じます。
アイテムの選択(selectItems)コンポーネントは、複数選択コンポーネントおよび単一選択コンポーネントの両方で選択できるオブジェクトのリストを提供します。
アイテムの選択(selectItem)コンポーネントは、選択コンポーネントの単一選択可能なアイテムを表します。
選択肢を複数選択(selectManyChoice)コンポーネントは、リストの複数の値の選択を可能にします。この選択メカニズムは、チェックボックスを複数選択コンポーネントに含まれているアイテムの選択コンポーネント(第6.3.10.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
|
注意: チェックボックスを複数選択コンポーネントには、アイテムの選択コンポーネントを2つ以上含めることができます。 |
例6-31は、MAF AMXファイルで宣言されているselectManyChoice要素を示しています。
例6-31 アイテムの選択コンポーネントを使用した選択肢を複数選択の定義
<amx:selectManyChoice id="check1"
label="Select Option:"
value="#{myBean.shipping}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}">
<amx:selectItem id="selectItem1"
label="Signature Required"
value="signature" />
<amx:selectItem id="selectItem2"
label="Insurance"
value="insurance" />
<amx:selectItem id="selectItem3"
label="Delivery Confirmation"
value="deliveryconfirm"/>
</amx:selectManyChoice>
例6-32 アイテムの選択コンポーネントを使用した選択肢を複数選択の定義
<amx:selectManyChoice id="check1"
label="Select Shipping Options:"
value="#{myBean.shipping}">
<amx:selectItems id="selectItems1" value="#{myBean.shippingOptions}"/>
</amx:selectManyChoice>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
すべてのサポートされているデバイス上の選択肢を複数選択コンポーネントの外観と動作は、チェックボックスを複数選択コンポーネントとほとんど同一です(詳細は、第6.3.9項「チェックボックスを複数選択コンポーネントの使用方法」を参照してください)。
ブール・スイッチ(selectBooleanSwitch)コンポーネントは、チェックボックスのかわりのスイッチ・メタファーとしてのブール値の編集を可能にします。
他のMAF AMX UIコンポーネントと同様に、このコンポーネントには標準および選択済の状態があります。値を切り替えるには、エンド・ユーザーはスイッチを1回タップ(タッチしてリリース)します。タップするたびにスイッチが切り替わります。
例6-33は、MAF AMXファイルで定義されているselectBooleanSwitch要素を示しています。
例6-33 ブール・スイッチの定義
<amx:selectBooleanSwitch id="switch1"
label="Flip switch:"
onLabel="On"
offLabel="Off"
value="#{myBean.bool1}"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/>
図6-32は、「プレビュー」ペインに表示されているブール・スイッチ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectBooleanSwitch id="selectBooleanSwitch1"
label="Switch"
value="value1"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
iOSでは、プール・スイッチ・コンポーネントは、属性値を有効化または無効化するために設定ページでよく使用されます。
選択ボタン(selectOneButton)コンポーネントは、常に1つのボタンがアクティブになっている、アクションをリストするボタン・グループを表します。この選択メカニズムは、選択ボタン・コンポーネントに含まれているアイテムの選択コンポーネント(第6.3.10.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
|
注意: 選択ボタン・コンポーネントには、アイテムの選択コンポーネントを2つ以上含めることができます。 |
例6-34は、MAF AMXファイルで定義されているselectOneButton要素を示しています。
例6-34 選択ボタンの定義
<amx:selectOneButton id="bg1"
value="#{myBean.myState}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}">
<amx:selectItem id="selectItem1" label="Yes" value="yes"/>
<amx:selectItem id="selectItem2" label="No" value="no"/>
<amx:selectItem id="selectItem3" label="Maybe" value="maybe"/>
</amx:selectOneButton>
図6-33は、「プレビュー」ペインに表示されている選択ボタン・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<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>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
ラジオ・ボタン(selectOneRadio)コンポーネントは、使用可能な選択肢をリストするラジオ・ボタンのグループを表します。この選択メカニズムは、ラジオ・ボタン・コンポーネントに含まれているアイテムの選択コンポーネント(第6.3.10.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
|
注意: ラジオ・ボタン・コンポーネントには、アイテムの選択コンポーネントを2つ以上含めることができます。 |
例6-35および例6-36は、MAF AMXファイル内のselectOneRadio要素定義を示しています。
例6-35 アイテムの選択コンポーネントを使用したラジオ・ボタンの定義
<amx:selectOneRadio id="radio1"
label="Choose a pet:"
value="#{myBean.myPet}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}">
<amx:selectItem id="selectItem1" label="Cat" value="cat"/>
<amx:selectItem id="selectItem2" label="Dog" value="dog"/>
<amx:selectItem id="selectItem3" label="Hamster" value="hamster"/>
<amx:selectItem id="selectItem4" label="Lizard" value="lizard"/>
</amx:selectOneRadio>
例6-36 アイテムの選択コンポーネントを使用したラジオ・ボタンの定義
<amx:selectOneRadio id="radio1"
label="Choose a pet:"
value="#{myBean.myPet}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}">
<amx:selectItems id="selectItems1" value="myBean.allPets"/>
</amx:selectOneRadio>
図6-34は、「プレビュー」ペインに表示されているブール・スイッチ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<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>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
リスト・ビュー(listView)コンポーネントを使用して、エンド・ユーザーが1つ以上のオプションを選択できる選択肢のリストとしてデータを表示します。
リスト・アイテム(listItem)コンポーネントは、リスト・ビュー内の1つの行を表します。通常、リスト・ビュー内にリスト・アイテム・コンポーネントを配置し、データ・アイテムのリストをレイアウトおよびスタイル設定します。リスト・アイテム・コンポーネントは、実行時にスワイプ・ジェスチャーに応答します(第6.4項「ジェスチャーの有効化」を参照)。
リスト・ビューによって、次のうち1つを定義できます。
リスト(コレクション)内のアイテム数に基づいてレプリケートされる行。
リスト・ビューのvarおよびvalue属性を指定することなく子リスト・アイテム・コンポーネントを追加することによって生成される静的行。これらの静的アイテムは必要な数を追加できます。これは、設計時にリストのコンテンツがわかっている場合に便利です。この場合、リストは編集可能ではなく、メニュー・アイテムのセットのように動作します。
次のタイプのリスト・ビュー・コンポーネントを作成できます。
基本リスト
例6-37は、MAF AMXファイルで定義されているlistView要素を示しています。この定義は、基本コンポーネントに対応しています。
例6-37 基本リスト・ビューの定義
<amx:listView id="listView1"
showMoreStrategy="autoScroll"
bufferStrategy="viewport">
<amx:listItem id="listItem1">
<amx:outputText id="outputText1" value="ListItem Text"/>
</amx:listItem>
<amx:listItem id="listItem2">
<amx:outputText id="outputText3" value="ListItem Text"/>
</amx:listItem>
<amx:listItem id="listItem3">
<amx:outputText id="outputText5" value="ListItem Text"/>
</amx:listItem>
<amx:listItem id="listItem4">
<amx:outputText id="outputText7"
value="This is really long text to test how it is handled"/>
</amx:listItem>
</amx:listView>
図6-35は、デザインタイムの基本リスト・ビュー・コンポーネントを示しています。
例6-38は、MAF AMXファイル内のlistView要素のもう1つの定義を示しています。この定義も基本コンポーネントに対応していますが、このリスト・ビューの値はコレクションによって設定されます。
例6-38 基本リスト・ビューの定義
<amx:listView id="list1"
value="#{myBean.listCollection}"
var="row"
showMoreStrategy="autoScroll"
bufferStrategy="viewport">
<amx:listItem actionListener="#{myBean.selectRow}"
showLinkIcon="false"
id="listItem1">
<amx:outputText value="#{row.name}" id="outputText1"/>
</amx:listItem>
</amx:listView>
|
注意: 現在は、リスト・アイテム内の出力テキストに含まれるテキスト文字列が長すぎて1行に収まらない場合、そのテキストは行の端で折り返されません。この動作を回避するには、件名の出力テキスト子コンポーネントの |
アイコン付きリスト
例6-39は、MAF AMXファイルで定義されているlistView要素を示しています。この定義は、アイコン付きコンポーネントに対応しています。
例6-39 アイコン付きリスト・ビューの定義
<amx:listView id="list1"
value="#{myBean.listCollection}"
var="row"
showMoreStrategy="autoScroll"
bufferStrategy="viewport">
<amx:listItem id="listItem1">
<amx:tableLayout id="tl1" width="100%">
<amx:rowLayout id="rl1">
<amx:cellFormat id="cf11" width="40px" halign="center">
<amx:image id="image1" source="#{row.image}"/>
</amx:cellFormat>
<amx:cellFormat id="cf12" width="100%" height="43px">
<amx:outputText id="outputText1" value="#{row.desc}"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
</amx:listItem>
</amx:listView>
図6-36は、デザインタイムのアイコンおよびテキスト付きリスト・ビュー・コンポーネントを示しています。
検索付きリスト
区切り付きリスト。このタイプのリストでは、データをグループ化して順序を示すことができます。リスト・ビュー・コンポーネントの属性によって、各区切りの特性が定義されます。属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
MAF AMXでは、次のことを実行できるリスト区切りが提供されています。
そのコンテンツを個別に閉じます。
各区切り内のアイテム数を表示します。
同時に閉じます。
例6-40は、MAF AMXファイルで定義されているlistView要素を示しています。この定義は、折りたたみ可能な区切りおよびアイテム数付きのコンポーネントに対応しています。
例6-40 区切り付きリスト・ビューの定義
<amx:listView id="list1"
value="#{bindings.data.collectionModel}"
var="row"
collapsibleDividers="true"
collapsedDividers="#{pageFlowScope.mylistDisclosedDividers}"
dividerMode="all"
dividerAttribute="type"
showDividerCount="true"
showMoreStrategy="autoScroll"
bufferStrategy="viewport"
fetchSize="10">
<amx:listItem>
<amx:outputText id="ot1" value="#{row.name}">
</amx:listItem>
</amx:listView>
|
注意: 区切り付きリストでは、受け取ったデータがすでにソートされていることを想定し、データをソートしないため、このリストのデータは |
|
注意: リスト・ビュー・コンポーネントが編集モードになっている(つまり、その |
区切りが表示されている場合、エンド・ユーザーは、dividerMode属性がfirstLetterに設定されているリスト・ビュー・コンポーネントで使用できる、リスト・ビューのローカライズ済アルファベット順索引ユーティリティを使用して、特定の区切りにすばやく移動できます。sectionIndex属性をoffに設定すると、このユーティリティを無効にできます。
索引ユーティリティ(インデクサ)は索引バーおよび索引アイテムで構成され、次の特徴があります。
リストに未ソートのデータまたは重複する区切りが含まれている場合、索引アイテムはリスト内で最初にあるものを指します。
使用可能な文字は索引で強調表示されているもののみで、強調表示されている文字のみがアクティブになります。これは、データ・モデルの変更(たとえば、エンド・ユーザーが「次へ」行アイテムをタップした場合)によってトリガーされます。
索引では大/小文字は区別されません。
不明な文字はハッシュ( # )記号で隠されます。
インデクサ文字は、リストにロード済の行でのみアクティブ化(タップ)できます。たとえば、リスト・ビューでfetchSize属性を使用して文字Cまでの行をロードしている場合は、AからCまでの文字がインデクサによって有効化されます。その他の文字は、インデクサにさらに行がロードされると表示されるようになります。
表6-5は、索引ユーティリティに定義できるスタイルを示しています。
表6-5 リスト・ビューの索引スタイル
| styleClass名 | 説明 |
|---|---|
|
|
索引バーのスタイルを定義します。 |
|
|
索引バーの1つのアイテムのスタイルを定義します。 |
|
|
関連する区切りへのリンクを持つ索引バーのアイテムのスタイルを定義します。 |
|
|
索引バーの文字のスタイルを定義します。 |
|
|
索引バーの2つの文字間の黒丸のスタイルを定義します。 |
|
|
索引バーのすべての不明文字を表す文字のスタイルを定義します。 |
区切りが表示されているリスト・ビュー・コンポーネントがスクロールを提供するコンテナとして機能し、スクロール対象となった場合、区切りはビューの上部に固定されます。この場合、リスト・ビュー・コンポーネントの高さを明示的に設定する必要があります。その他のすべての場合で、リスト・ビュー自体ではスクロールを実行せず、かわりに親コンテナ(パネル・ページなど)のスクロールを使用する場合は、リスト・ビューに高さの制約は設定されず、その子コンポーネントによって高さが決定されます。明確な高さの制約がないことにより、実質的に、アニメーション化された遷移および区切りの固定が無効になります。
凹枠リスト
例6-41は、MAF AMXファイルで定義されているlistView要素を示しています。この定義は、凹枠コンポーネントに対応しています。
例6-41 凹枠リスト・ビューの定義
<amx:listView id="listView1"
styleClass="adfmf-listView-insetList"
showMoreStrategy="autoScroll"
bufferStrategy="viewport">
<amx:listItem id="listItem1">
<amx:outputText id="outputText1" value="ListItem Text"/>
</amx:listItem>
<amx:listItem id="listItem2">
<amx:outputText id="outputText3" value="ListItem Text"/>
</amx:listItem>
<amx:listItem id="listItem3">
<amx:outputText id="outputText5" value="ListItem Text"/>
</amx:listItem>
<amx:listItem id="listItem4">
<amx:outputText id="outputText7"
value="This is really long text to test how it is handled"/>
</amx:listItem>
</amx:listView>
図6-37は、デザインタイムの凹枠リスト・ビュー・コンポーネントを示しています。
例6-42は、MAF AMXファイル内のlistView要素のもう1つの定義を示しています。この定義も凹枠コンポーネントに対応していますが、このリスト・ビューの値はコレクションによって設定されます。
例6-42 凹枠リストの定義
<amx:listView id="list1"
value="#{CarBean.carCollection}"
var="row"
styleClass="adfmf-listView-insetList"
showMoreStrategy="autoScroll"
bufferStrategy="viewport"
fetchSize="10">
<amx:listItem id="li1" action="go">
<amx:outputText id="ot1" value="#{row.name}"/>
</amx:listItem>
</amx:listView>
MAF AMXにおけるリスト・アイテム・コンポーネントの子操作および属性の処理には、特定の順序があります。詳細は、第6.3.5.8項「操作と属性の処理順序に関する必知事項」を参照してください。
他のMAF AMXコンポーネントとは異なり、リスト・ビューをMAF AMXページにドラッグ・アンド・ドロップすると、「ListViewギャラリ」というダイアログが表示されます(図6-38を参照)。このダイアログでリスト・ビューに対して特定のレイアウトを選択できます。
表6-6には、「ListViewギャラリ」に表示される、サポートされる「リスト・フォーマット」がリストされています。
表6-6 リスト・フォーマット
| フォーマット | 要素行の値 |
|---|---|
|
シンプル |
|
|
メイン-サブ・テキスト |
|
|
開始-終了 |
|
|
四分円 |
|
選択したリスト・フォーマットの「ListViewギャラリ」に表示されている「バリエーション」(図6-38を参照)は、区切りか先頭イメージのいずれかまたは両方を追加するためのオプションで構成されています。
先頭イメージのあるバリエーションを選択すると、イメージ行が「リスト・アイテム・コンテンツ」表(図6-39を参照)に追加されます。
区切りのあるバリエーションを選択すると、「区切り属性」フィールドがデフォルトの「区切りなし」ではなく、リスト内の最初の属性にデフォルトで設定され、「区切りモード」フィールドにそのデフォルト値の「すべて」が移入されます。
「ListViewギャラリ」に表示されている「スタイル」オプション(図6-38を参照)では、シェブロンを抑制することも、凹枠スタイル・リストを使用することも、その両方を行うこともできます。
この選択によって、「リスト・ビューの編集」ダイアログ(図6-39を参照)の状態は変更されません。影響するのは、生成されるMAF AMXマークアップのみです。
凹枠リストのあるスタイルを選択すると、生成されたMAF AMXマークアップのlistView要素にadfmf-listView-insetListスタイル・クラスが設定されます。
次に、凹枠リストのあるシンプル・フォーマットの例を示します。
<amx:listView var="row"
value="#{bindings.employees.collectionModel}"
fetchSize="#{bindings.employees.rangeSize}"
styleClass="adfmf-listView-insetList"
id="listView2"
showMoreStrategy="autoScroll"
bufferStrategy="viewport">
<amx:listItem id="li2">
<amx:outputText value="#{row.employeename}" id="ot3"/>
</amx:listItem>
</amx:listView>
「ListViewギャラリ」の「説明」ペインは、現在選択されているバリエーションに基づいて更新されます。フォーマットには、メイン・スタイルの簡単な説明が示され、その後に選択したバリエーションの詳細が続きます。4つのメイン・スタイルに、それぞれ4つのバリエーションがあり、表6-7に示す16の固有の説明が提供されています。
表6-7 リスト・ビューのバリエーションとスタイル
| リスト・フォーマット | バリエーション | 説明 |
|---|---|---|
|
シンプル |
基本 |
テキスト・フィールドがリスト・アイテムの開始側に表示されます。 |
|
シンプル |
区切り |
テキスト・フィールドは、リスト・アイテムの開始側に、アイテムが区切りによりグループ化されて表示されます。 |
|
シンプル |
イメージ |
テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。 |
|
シンプル |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
メイン-サブ・テキスト |
基本 |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。 |
|
メイン-サブ・テキスト |
区切り |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。リスト・アイテムは区切りによってグループ化されます。 |
|
メイン-サブ・テキスト |
イメージ |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。 |
|
メイン-サブ・テキスト |
区切りおよびイメージ |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
開始-終了 |
基本 |
テキスト・フィールドがリスト・アイテムの両側に表示されます。 |
|
開始-終了 |
区切り |
テキスト・フィールドは、リスト・アイテムの両側に、アイテムが区切りによりグループ化されて表示されます。 |
|
開始-終了 |
イメージ |
テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。 |
|
開始-終了 |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
四分円 |
基本 |
テキスト・フィールドは、リスト・アイテムの四隅に表示されます。 |
|
四分円 |
区切り |
テキスト・フィールドは、リスト・アイテムの四隅に、アイテムが区切りによりグループ化されて表示されます。 |
|
四分円 |
イメージ |
テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。 |
|
四分円 |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
「ListViewギャラリ」で選択し、「OK」をクリックすると、「リスト・ビューの編集」ウィザードが起動されます。それを使用して、リスト・アイテム子コンポーネントに静的テキストを表示するバインドなしリスト・ビュー・コンポーネント(図6-39を参照)を作成するか、または動的バインディングのデータソースを選択(図6-40を参照)できます。
図6-39に示すダイアログに入力する際は、次の点を考慮してください。
「リスト・データ・コレクション」および「要素タイプ」フィールドは、「データのバインド」チェックボックスが選択解除された状態のときは無効化されています。
左側にあるイメージは、選択されているリスト・ビュー・フォーマットのメイン・コンテンツ要素を反映しています。
「値」列の編集可能セルには、静的テキスト文字列が移入されます(表6-8を参照)。
「リスト・アイテム・コンテンツ」セルにイメージが含まれている場合、「値」セルはデフォルトで<add path to your image>文字列になります。この場合、それをイメージのパスに置き換える必要があります。
「リスト・アイテム選択」は選択モードを示します。詳細は、図5-74「MAF AMXリスト・ビューの編集ダイアログ」でこのオプションの説明を参照してください。
リスト・ビューに、データがバインドされているのではなく、リスト・アイテム子コンポーネントが含まれている場合、区切り属性を設定できないため、「区切り属性」と「区切りモード」の両方のフィールドは無効化されています。
表6-8 リスト・ビューの静的テキスト文字列
| リスト・フォーマット | 要素行の値 | 出力テキストの値 |
|---|---|---|
|
シンプル |
|
|
|
メイン-サブ・テキスト |
|
|
|
開始-終了 |
|
|
|
四分円 |
|
|
図6-40は、リスト・ビュー・コンポーネントをデータにバインドすることを選択した場合の「リスト・ビューの作成」ダイアログを示しています。
図6-40に示すダイアログに入力する際は、次の点を考慮してください。
「データのバインド」チェックボックスを選択した場合、「リスト・データ・コレクション」フィールドが有効になります。「要素タイプ」フィールドは、式ビルダーを使用して「リスト・データ・コレクション」フィールドをEL式に設定すると有効になります。「DataControl定義」タブからデータ・コントロールを選択すると、「要素タイプ」フィールドは無効なままになります。
データソースを選択するには、「参照」をクリックします。これによって「リスト・ビュー・データ・コレクションの選択」ダイアログが開きます。そこで、データ・コントロール定義を選択するか(図6-41を参照)、ELビルダーを使用して適切なEL式を選択できます(図6-42を参照)。
「要素タイプ」フィールドを使用してデータ・コレクションのタイプを宣言できます(図6-40を参照)。
有効なデータ・コレクションを選択すると、「リスト・アイテム・コンテンツ」表の「値」列が「値バインディング」に変更され、その編集可能なセルにはデータコレクションから属性のリストが移入されます。特別な場合の設定の説明は、図6-43を参照してください。
左側のイメージは、選択したリスト・ビュー・フォーマットのメイン・コンテンツ要素を反映し、略図から基礎となる表の名前付き要素へのマッピングを提供します。
リスト・アイテムは、その特定要素に対してどちらが適切であるかによって、出力テキストまたはイメージ・コンポーネントのいずれかとして生成されます。
要素(行)数は選択したリスト・ビュー・フォーマットであらかじめ決まっているため、行を追加または削除することはできません。
要素の順序は変更できません。
「区切り属性」フィールドのデフォルト値は「区切りなし」です。この場合、「区切りモード」フィールドは無効です。デフォルト以外の値を選択する場合は、「区切りモード」パラメータを指定する必要があります。さらに、「ListViewギャラリ」で区切りを含むバリエーションを選択した場合、デフォルト値はリストの最初の属性に設定されます。
バインド済リスト・ビューを作成するときに考慮する特殊な場合は次のとおりです。
Java Beanメソッドによって汎用性がないリストが戻される場合、図6-40に示すように「要素タイプ」フィールドを使用して、リスト・アイテム・コンテンツを作成する必要があります。
入力されているリスト・データ・コレクション値がコレクションベースではない場合、図6-43に示すように、「値」列が空白の値を持つ「値バインディング」列に置換されます。
詳細は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのUIDemo。このサンプルは、様々なタイプのリスト・ビュー・コンポーネントの使用方法と、スタイルを適用してページ・レイアウトを特定のパターンに合せる方法を示しています。
リスト・ビュー・コンポーネントを構成して、任意の長さのリストにデータを表示できます。これは、リストの下部にデータを追加することによって行います。
fetchSize属性によって、リスト・ビュー・コンポーネントが最初にロードする行数が決定されます。fetchSizeで定義されているよりも多くの使用可能な行がある場合は、最後にフェッチされた行の後にクリック可能領域が表示されます。この領域内をクリックすると、fetchSizeに等しい行のバッチがさらにロードされます。表示する行がなくなるとクリック可能領域は表示されなくなります。
fetchSize属性はロード済行の数を表していません。かわりに、何行ずつ増加するのかを表しています。リスト・ビュー・コンポーネントの作成時には、fetchSize属性は、デフォルトでPageDefイテレータのrangeSizeを指すEL式を使用するように設定されています。PageDefファイルの詳細は、第5.3.2.4.5項「生成されるドラッグ・アンド・ドロップ・アーティファクトに関する必知事項」および図5-80「PageDefファイル」を参照してください。fetchSizeをrangeSizeと同じ値に設定するとアプリケーションのパフォーマンスが向上します。
例6-43は、データ・コントロールのtestResultsと呼ばれるコレクションから作成されたlistView要素を示しています(第5.3.2.4項「データ・コントロールのビューへの追加」を参照)。
例6-43 fetchSize属性の設定
<amx:listView var="row"
value="#{bindings.testResults.collectionModel}"
fetchSize="#{bindings.testResults.rangeSize}">
前述の例では、fetchSize属性はbindings.testResultsのrangeSizeを指しています。例6-44は、このMAF AMXページのPageDefファイルからの行を示しています。このPageDefファイルには、testResultsかバインドされるtestResultsIteratorというaccessorIterator要素が含まれています。
例6-44 PageDefファイルのaccessorIterator
<accessorIterator MasterBinding="Class1Iterator"
Binds="testResults"
RangeSize="25"
DataControl="Class1"
BeanClass="mobile.Test"
id="testResultsIterator"/>
fetchSize属性が-1に設定されている場合、すてのレコードが取得されます。
リスト・ビュー・コンポーネントの次の2つの属性によってスクロール動作が有効になります。
showMoreStrategy: リスト・ビュー・コンポーネントの、必要に応じて追加の行をロードする戦略を定義します。
リスト・ビュー・コンポーネントが、親コンテナのいずれかによるスクロールの対象になるのではなく、独自のスクロールを提供している場合に(「リスト・ビューで独自のスクロールを適用するには:」を参照)、そのリスト・ビューが末尾までスクロールされると、showMoreStrategyを自動的に起動して次のレコード・セットをフェッチできるようにします。
実行時、この属性はデフォルトで「さらに行をロード」リンクとして表示されます。
showMoreStrategy属性の値を設定してリスト・ビューのスクロールおよび行表示動作を構成する方法の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
bufferStrategy: 行のユーザー・インタフェースの取得方法を定義します。
リスト・ビューの高さが制限されており、親コンテナのいずれかによるスクロールの対象になるのではなく、独自のスクロールを提供できる場合(「リスト・ビューに独自のスクロールを適用するには:」を参照)、リスト・ビューには、以前は非表示だった行とそのコンテンツがフェッチされて表示されます。リスト・ビューでは、次のいずれかの方法でこのことを実現します。
継続的に非表示行をリストに追加し、非表示の行数を増大させます。
レンダリング・エンジン内で使用可能な追加行の数を制限し、リスト・ビューの表示領域(ビューポート)内の行のみを保持することで、MAFアプリケーションが使用するメモリーの量を削減します。
この機能は、listViewのbufferStrategy属性を使用し、この属性をadditive (メモリー消費量を考慮しない場合)またはviewport (メモリー使用量を削減する場合)のいずれかに設定することで構成できます。後者の場合は、スクロール時に新しい行のコンテンツが表示されるようになるまでに遅れが生じる場合があります。表示される空白行の数を最小限にするには、listViewのbufferSize属性を設定します。この属性は、行が非表示になる、行のビューポートからの距離(ピクセル単位)を決定します。
リスト・ビューに独自のスクロールを適用するには:
リスト・ビューを、パネル・ページの唯一の非ファセット子にします。
リスト・ビューに固定の高さを設定します。次に例を示します。
inlineStyle="height: 200px;"
リスト・ビュー・コンポーネントのrangeChangeListener属性(第6.10項「イベント・リスナーの使用方法」を参照)を使用すると、「さらに行をロード」リンクがアクティブ化された場合またはリスト・ビューが末尾までスクロールされた場合のJavaハンドラ・メソッドをバインドできます。このメソッドはoracle.adfmf.amx.event.RangeChangeEventオブジェクトをパラメータとして使用し、図6-44および図6-45に示すように、「プロパティ」ウィンドウから「プロパティの編集: 範囲変更リスナー」ダイアログを起動すると作成されます。
ダイアログで「OK」をクリックすると、MAF AMXページのlistView要素に次の設定が追加され、例6-45に示すJavaメソッドがサンプルHRBeanクラスに追加されます。
<amx:listView id="listView1" rangeChangeListener="#{pageFlowScope.HRBean.goGet}" >
例6-45 RangeChangeEventをトリガーするJavaメソッド
public void goGet(RangeChangeEvent rangeChangeEvent) {
// Add event code here...
}
|
注意:
|
リスト・ビューのアイテムは再配置できます。この機能は、iOSとAndroidのプラットフォームで類似しており、どちらも各リスト・アイテムの右マージンに沿って整列した再配置アイコンが表示されます。再配置操作は、エンド・ユーザーがハンドルとして再配置アフォーダンスを使用してリスト・アイテムにタッチしてドラッグしたときに開始されます。この操作は、エンド・ユーザーが表示画面から指を離したときに完了します。
|
注意: エンド・ユーザーがリスト・アイテム上の他の場所をタッチしてドラッグした場合は、リストが上下にスクロールします。 |
再配置ドラッグ操作によって、リスト・アイテムがドッキング解除され、エンド・ユーザーがリスト内でリスト・アイテムを上下に移動できるようになります。
そのアイテムを再配置可能にするには、リスト・ビューが静的ではなく編集モードになっており、移動を許容可能になっている必要があります。
例6-46は、MAF AMXファイルで定義されているlistView要素を示しています。この定義によって、リスト・モードを編集可能と読取り専用の間で切り替えることができる「編集」および編集停止ボタンが上部に表示されたリストが提示されます。
例6-46 再配置可能なリスト・ビューの定義
<amx:panelPage id="pp1">
<amx:commandButton id="edit"
text="Edit"
rendered="#{!bindings.inEditMode.inputValue}">
<amx:setPropertyListener id="spl1"
from="true"
to="#{bindings.inEditMode.inputValue}"
type="action"/>
</amx:commandButton>
<amx:commandButton id="stop"
text="Stop Editing"
rendered="#{bindings.inEditMode.inputValue}">
<amx:setPropertyListener id="spl2"
from="false"
to="#{bindings.inEditMode.inputValue}"
type="action"/>
</amx:commandButton>
<amx:listView id="lv1"
value="#{bindings.data.collectionModel}"
var="row"
editMode="#{bindings.inEditMode.inputValue}"
moveListener="#{MyBean.Reorder}">
<amx:listItem id="li1">
<amx:outputText id= "ot1" value="#{row.description}">
</amx:listItem>
</amx:listView>
</amx:panelPage>
詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
特定のパターンに従ってMAF AMXページ・レイアウトを調整するには、一連の事前定義済スタイルを使用するstyleClass属性(第6.6項「UIコンポーネントのスタイル設定」を参照)を介して定義される様々なタイプのリスト・ビュー・コンポーネントおよびスタイルを組み合せて使用します。
UIDemoという名前のMAFサンプル・アプリケーションは、各コンポーネントおよびその関連レンダリングのすべてのオプション・スタイルを示します。UIDemoアプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
例6-47は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-startTextに設定すると、出力テキスト・コンポーネントが行の開始(左)側に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-endTextに設定すると、出力テキスト・コンポーネントが行の終了(右)側に配置され、そのテキストに青いフォントが適用されます。右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この属性のデフォルト値はtrueであるため、この例にはこの設定は含まれていません。
例6-47 開始および終了テキストを持つリスト・ビューの定義
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="listItem1">
<amx:tableLayout id="tl1" width="100%">
<amx:rowLayout id="rl1">
<amx:cellFormat id="cf1s1" width="10px"/>
<amx:cellFormat id="cf11" width="60%" height="43px">
<amx:outputText id="outputText11" value="#{row.name}"/>
</amx:cellFormat>
<amx:cellFormat id="cf1s2" width="10px"/>
<amx:cellFormat id="cf12" halign="end" width="40%">
<amx:outputText id="outputText12" value="#{row.status}"
styleClass="adfmf-listItem-highlightText"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
</amx:listItem>
</amx:listView>
図6-46は、各行の開始(左)側と終了(右)側に異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、テキストの他に各リスト・アイテムを拡張するリンクを表す右向き矢印が配置されています。
例6-48は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-startTextに設定すると、出力テキスト・コンポーネントが行の開始に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-endTextに設定すると、出力テキスト・コンポーネントが行の終了に配置され、そのテキストに青いフォントが適用されます。それぞれの特定の行に右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この例では、この属性はすべてのlistItem要素に対してfalseに設定されているため、右向き矢印は表示されません。
例6-48 拡張リンクがない開始および終了テキストを持つリスト・ビューの定義
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="listItem1" showLinkIcon="false">
<amx:tableLayout id="tl1" width="100%">
<amx:rowLayout id="rl1">
<amx:cellFormat id="cf1s1" width="10px"/>
<amx:cellFormat id="cf11" width="60%" height="43px">
<amx:outputText id="outputText11" value="#{row.name}"/>
</amx:cellFormat>
<amx:cellFormat id="cf1s2" width="10px"/>
<amx:cellFormat id="cf12" halign="end" width="40%">
<amx:outputText id="outputText12" value="#{row.status}"
styleClass="adfmf-listItem-highlightText"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
</amx:listItem>
</amx:listView>
図6-47は、各行の開始と終了に異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、リンクを表す右向き矢印は含まれていません。
例6-49は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、終了テキストの下に配置されるサブテキストが含まれています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartTextに設定すると、出力テキスト・コンポーネントが行の左側に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-upperEndTextに設定すると、出力テキスト・コンポーネントが行の右側に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-captionTextに設定すると、出力テキスト・コンポーネントが、styleClass属性がadfmf-listItem-upperStartTextに設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。
例6-49 開始および終了テキストとサブテキストを持つリスト・ビューの定義
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="listItem1">
<amx:tableLayout id="tl1" width="100%">
<amx:rowLayout id="rl11">
<amx:cellFormat id="cf1s1" width="10px" rowSpan="2"/>
<amx:cellFormat id="cf11" width="60%" height="28px">
<amx:outputText id="outputTexta1" value="#{row.name}"/>
</amx:cellFormat>
<amx:cellFormat id="cf1s2" width="10px"/>
<amx:cellFormat id="cf12" halign="end" width="40%">
<amx:outputText id="outputTexta2" value="#{row.status}"
styleClass="adfmf-listItem-highlightText"/>
</amx:cellFormat>
</amx:rowLayout>
<amx:rowLayout id="rl12">
<amx:cellFormat id="cf13" columnSpan="3" width="100%" height="12px">
<amx:outputText id="outputTexta3"
value="#{row.desc}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
</amx:listItem>
</amx:listView>
図6-48は、各行の開始と終了に異なるスタイルのテキストが追加され、左側の終了テキストの下にサブテキストが追加されたリスト・ビュー・コンポーネントを示しています。
例6-50は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、メイン・テキストおよびサブテキストを含む行が移入されます。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-mainTextに設定すると、出力テキスト・コンポーネントが行の開始に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-captionTextに設定すると、出力テキスト・コンポーネントが、styleClass属性がadfmf-listItem-mainTextに設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。
例6-50 メイン・テキストとサブテキストを持つリスト・ビューの定義
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="listItem1">
<amx:tableLayout id="tla1" width="100%">
<amx:rowLayout id="rla1">
<amx:cellFormat id="cf1s1" width="10px" rowSpan="2"/>
<amx:cellFormat id="cfa1" width="100%" height="28px">
<amx:outputText id="outputTexta1" value="#{row.name}"/>
</amx:cellFormat>
</amx:rowLayout>
<amx:rowLayout id="rla2">
<amx:cellFormat id="cfa2" width="100%" height="12px" >
<amx:outputText id="outputTexta2" value="#{row.desc}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
</amx:listItem>
</amx:listView>
図6-49は、各行にメイン・テキストとサブテキストとして異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。
例6-51は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、アイコン、メイン・テキストおよびサブテキストを含むセルが移入されます。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-mainTextに設定すると、出力テキスト・コンポーネントが行の左側に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-captionTextに設定すると、出力テキスト・コンポーネントが、styleClass属性がadfmf-listItem-mainTextに設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。image要素の位置は、それが囲むcellFormatによって定義されます。
例6-51 アイコン、メイン・テキストおよびサブテキストを持つリスト・ビューの定義
<amx:listView id="lv1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="li1">
<amx:tableLayout id="tl1" width="100%">
<amx:rowLayout id="rl1">
<amx:cellFormat id="cf1" rowSpan="2" width="40px" halign="center">
<amx:image id="i1" source="#{row.image}"/>
</amx:cellFormat>
<amx:cellFormat id="cf2" width="100%" height="28px">
<amx:outputText id="ot1" value="#{row.name}"/>
</amx:cellFormat>
</amx:rowLayout>
<amx:rowLayout id="rl2">
<amx:cellFormat id="cf3" width="100%" height="12px">
<amx:outputText id="ot2" value="#{row.desc}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
</amx:listItem>
</amx:listView>
図6-50は、各行に、アイコンおよびメイン・テキストとサブテキストとして異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。
例6-52は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、各行の両側に配置されている2つの異なるタイプのテキストが含まれています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartTextに設定すると、出力テキスト・コンポーネントが行の左上隅に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-upperEndTextに設定すると、出力テキスト・コンポーネントが行の右上隅に配置され、そのテキストに大きいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerStartTextに設定すると、出力テキスト・コンポーネントが行の左下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerEndTextに設定すると、出力テキスト・コンポーネントが行の右下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この属性のデフォルト値はtrueであるため、この例にはこの設定は含まれていません。
例6-52 4つのタイプのテキストを持つリスト・ビューの定義
<amx:listView id="lv1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="li1">
<amx:tableLayout id="tl1" width="100%">
<amx:rowLayout id="rl1">
<amx:cellFormat id="cf1" width="10px" rowSpan="2"/>
<amx:cellFormat id="cf2" width="60%" height="28px">
<amx:outputText id="ot1" value="#{row.name}"/>
</amx:cellFormat>
<amx:cellFormat id="cf3" width="10px" rowSpan="2"/>
<amx:cellFormat id="cf4" width="40%" halign="end">
<amx:outputText id="ot2" value="#{row.status}"
styleClass="adfmf-listItem-highlightText"/>
</amx:cellFormat>
</amx:rowLayout>
<amx:rowLayout id="rla2">
<amx:cellFormat id="cf5" width="60%" height="12px">
<amx:outputText id="ot3" value="#{row.desc}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
<amx:cellFormat id="cf6" width="40%" halign="end">
<amx:outputText id="ot4" value="#{row.priority}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
</amx:listItem>
</amx:listView>
図6-51は、各行の開始と終了に2つのタイプの異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、テキストの他に各リスト・アイテムを拡張するリンクを表す右向き矢印が配置されています。
例6-53は、MAF AMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、各行の両側に配置されている2つの異なるタイプのテキストが含まれています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartTextに設定すると、出力テキスト・コンポーネントが行の左上隅に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-upperEndTextに設定すると、出力テキスト・コンポーネントが行の右上隅に配置され、そのテキストに大きいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerStartTextNoChevronに設定すると、出力テキスト・コンポーネントが行の左下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerEndTextNoChevronに設定すると、出力テキスト・コンポーネントが行の右下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。それぞれの特定の行に右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この例では、この属性はすべてのlistItem要素に対してfalseに設定されているため、右向き矢印は表示されません。
例6-53 拡張リンクのない4つのタイプのテキストを持つリスト・ビューの定義
<amx:listView id="lv1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="li1" showLinkIcon="false">
<amx:tableLayout id="tl1" width="100%">
<amx:rowLayout id="rl1">
<amx:cellFormat id="cf1" width="10px" rowSpan="2"/>
<amx:cellFormat id="cf2" width="60%" height="28px">
<amx:outputText id="ot1" value="#{row.name}"/>
</amx:cellFormat>
<amx:cellFormat id="cf3" width="10px" rowSpan="2"/>
<amx:cellFormat id="cf4" width="40%" halign="end">
<amx:outputText id="ot2" value="#{row.status}"
styleClass="adfmf-listItem-highlightText"/>
</amx:cellFormat>
</amx:rowLayout>
<amx:rowLayout id="rl2">
<amx:cellFormat id="cf5" width="60%" height="12px">
<amx:outputText id="ot3" value="#{row.desc}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
<amx:cellFormat id="cf6" width="40%" halign="end">
<amx:outputText id="ot4" value="#{row.priority}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
</amx:listItem>
</amx:listView>
図6-52は、各行の開始と終了に2つのタイプの異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。
モデルからではなくハードコード化された値によって移入されるリスト・ビュー・コンポーネントを作成する場合、このリスト・ビューは静的になり、デザインタイムに設定するそのプロパティのいくつか(たとえばdividerAttribute、dividerMode、fetchSize、moveListener)が実行時に無視されるようになります。
MAF AMXでは、リスト・ビュー・コンポーネントのvalue属性が設定されていない場合、そのコンポーネントを静的であると見なします。そのようなリストは編集できません(つまり、リストのeditMode属性を指定できません)。
カルーセル(carousel)コンポーネントは、回転カルーセルにイメージなどの他のコンポーネントを表示するために使用します。エンド・ユーザーは、スライダを使用するか、別のイメージを正面にドラッグすることでアクティブなアイテムを変更できます。
カルーセル・コンポーネントにはカルーセル・アイテム(carouselItem)コンポーネントが含まれ、text属性によって表されるそのテキストは、それがそのカルーセルのアクティブなアイテムであるときに表示されます。通常、カルーセル・アイテムにはイメージ・コンポーネントが含まれていますが、他のコンポーネントを使用することもできます。たとえば、イメージを囲む子としてリンクを使用することもできます。表示する各オブジェクトにカルーセル・アイテム・コンポーネントを作成し、これらのコンポーネントを各オブジェクトにバインドするかわりに、カルーセル・コンポーネントを完全なコレクションにバインドします。その後、コンポーネントは各アイテムに値をスタンプ設定し、1つのカルーセル・アイテム・コンポーネントを繰り返しレンダリングします。各アイテムにスタンプが設定されると、現在のアイテムのデータが、カルーセル・コンポーネントのvar属性を使用するEL式を使用して特定可能なプロパティにコピーされます。カルーセルのレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。カルーセル・コンポーネントには、テキストの表示に使用されるカルーセル・アイテムのホルダと各アイテムの短い説明の両方であり、各アイテムについて表示されるイメージの親コンポーネントでもあるnodeStampという名前のファセットが含まれます。
カルーセル・アイテムは、その単一の子コンポーネントを拡大します。カルーセル・アイテム内に1つのイメージ・コンポーネントを配置する場合、アイテムに割り当てられた正方形に収まるように、イメージが拡大されます(エンド・ユーザーがカルーセルを動かすと、寸法が拡大または縮小されます)。
|
ヒント: アプリケーションのパフォーマンスの低下を最小限に抑えるは、重いコンポーネントを子として使用しないようにします。複雑な構造にすると、いくつかのカルーセル・アイテム・スタンプが同時に表示されるため、その影響が倍増します。 |
デフォルトでは、カルーセルは水平に表示されます。カルーセルの水平方向のオブジェクトは垂直方向中央揃え、カルーセル自体はそのコンテナに対して水平方向中央揃えとなります。参照ローロデックス(回転式カード・ファイル)が必要な場合は、垂直に表示されるようにカルーセルを構成できます。デフォルトでは、垂直方向のカルーセルの中のオブジェクトは水平方向中央揃え、カルーセル自体は垂直方向中央揃えとなります。カルーセルのorientation属性を使用して配置を変更できます。
前および次のイメージを部分的に表示するかわりに、displayItems属性を使用して、フィルム・ストリップ・デザインまたは循環デザインでイメージを表示するようにカルーセルを構成できます。
デフォルトでは、カルーセルが循環モードで表示されるように構成されている場合、エンド・ユーザーが補助アイテム(現在、中央に表示されていないアイテム)にポインタを置くと、そのアイテムが枠で囲まれ、選択可能であることが示されます。auxiliaryPopOut属性を使用すると、アイテムが移動し、最大サイズで表示されるように、カルーセルを構成できます。
JDeveloperでは、「カルーセル」は「コンポーネント」ウィンドウの「データ・ビュー」の下にあります(図6-53を参照)。
カルーセル・コンポーネントを作成するには、まず表示するイメージを含むデータ・モデルを作成してから、そのモデルにカルーセルをバインドし、カルーセル・アイテム・コンポーネントをカルーセルのnodeStampファセットに挿入する必要があります。最後に、イメージ・コンポーネント(または、イメージ・コンポーネントが含まれる他のコンポーネント)を子としてカルーセル・アイテム・コンポーネントに挿入します。
例6-54は、MAF AMXファイル内のcarousel要素定義を示しています。carousel要素を定義するときは、carousel要素のnodeStampファセット内にcarouselItem要素を配置する必要があります。
例6-54 カルーセルの定義
<amx:carousel id="carousel1"
value="#{bindings.products.collectionModel}"
var="item"
auxiliaryOffset="0.9"
auxiliaryPopOut="hover"
auxiliaryScale="0.8"
controlArea="full"
displayItems="circular"
halign="center"
valign="middle"
disabled="false"
shortDesc="spin"
orientation="horizontal"
styleClass="AMXStretchWidth"
inlineStyle="height:250px;background-color:#EFEFEF;">
<amx:facet name="nodeStamp">
<amx:carouselItem id="item1" text="#{item.name}"
shortDesc="Product: #{item.name}">
<amx:commandLink id="link1" action="goto-productDetails"
actionListener="#{someMethod()}">
<amx:image id="image1" styleClass="prod-thumb"
source="images/img-big-#{item.uid}.png"/>
<amx:setPropertyListener id="spl1"
from="#{item}"
to="#{pageFlowScope.product}"
type="action"/>
</amx:commandLink>
</amx:carouselItem>
</amx:facet>
</amx:carousel>
カルーセル・コンポーネントでは、CollectionModelクラスを使用して基礎となるコレクションのデータにアクセスします。java.util.Listやarrayなどの他のモデル・クラスを使用することもでき、この場合はカルーセルによりインスタンスがCollectionModelクラスに自動的に変換されますが、機能は追加されません。
エンド・ユーザーはスライダを使用してカルーセル・コレクションを移動できます。通常、スライダのサムは総オブジェクト数の中の現在のオブジェクト番号を表示します。総オブジェクト数が大きすぎて計算できない場合、スライダのサムは現在のオブジェクト番号のみを表示します。
詳細および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
フィルム・ストリップ(filmStrip)は、一連のグループ(ページ)間に分散されたデータを、垂直または水平ストリップ形式で視覚化するコンテナ・コンポーネントです。グループに含まれる表示アイテム(filmStripItem)を表すUIコンポーネントは同じサイズとタイプである必要があり、一度に1つのグループのみが表示されます。エンド・ユーザーは、フィルム・ストリップのページを移動し、アイテムを選択してタップすることでアクションを生成できます。
JDeveloperでは、フィルム・ストリップは「コンポーネント」ウィンドウの「データ・ビュー」の下にあります(図6-54を参照)。
例6-55は、MAF AMXファイル内のfilmStrip要素定義を示しています。
例6-55 フィルム・ストリップの定義
<amx:filmStrip id="fs1"
var="item"
value="#{bindings.contacts.collectionModel}"
rendered="#{pageFlowScope.pRendered}"
styleClass="#{pageFlowScope.pStyleClass}"
inlineStyle="#{pageFlowScope.pInlineStyle}"
shortDesc="#{pageFlowScope.pShortDesc}"
halign="#{pageFlowScope.pFsHalign}"
valign="#{pageFlowScope.pFsValign}"
itemsPerPage="#{pageFlowScope.pMaxItems}"
orientation="#{pageFlowScope.pOrientation}">
<amx:filmStripItem id="fsi1"
inlineStyle="text-align:center; width:200px;">
<amx:commandLink id="ciLink"
action="details"
shortDesc="Navigate to details">
<amx:image id="ciImage" source="images/people/#{item.first}.png"/>
<amx:setPropertyListener id="spl1"
from="#{item.rowKey}"
to="#{pageFlowScope.currentContact}"
type="action"/>
<amx:setPropertyListener id="spl2"
from="#{item.first}"
to="#{pageFlowScope.currentContactFirst}"
type="action"/>
<amx:setPropertyListener id="spl3"
from="#{item.last}"
to="#{pageFlowScope.currentContactLast}"
type="action"/>
</amx:commandLink>
</amx:filmStripItem>
</amx:filmStrip>
詳細および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
垂直方向にレイアウトされたフィルム・ストリップでは、表示アイテムは上から下に向けて配置されます。テキストの方向に応じて、ページ・コントロールは次のように配置されます。
左から右のテキスト方向の場合は、ページ・コントロールは右側に配置されます。
右から左のテキスト方向の場合は、ページ・コントロールは左側に配置されます。
水平方向にレイアウトされたフィルム・ストリップでは、テキスト方向モードが反映されます。左から右モードでは最初のアイテムは左側に配置され、右から左モードでは最初のアイテムは右側に配置されます。いずれの場合も、ページ・ステータス・コンポーネントが下部に配置されます。
フィルム・ストリップ・コンポーネントのナビゲーションは、デッキ(第6.2.12項「デッキ・コンポーネントの使用方法」を参照)およびパネル・スプリッタ・コンポーネント(第6.2.9項「パネル・スプリッタ・コンポーネントの使用方法」を参照)と似ています。一度に1つのページが表示され、ページIDまたは番号を選択するとページの変更がトリガーされます。
子フィルム・ストリップ・アイテム・コンポーネントは、他のMAF AMXページへの移動で使用されることを想定していないため、action属性をサポートしていません。必要な場合は、ネストされたコマンド・リンク・コンポーネントを介したナビゲーションを有効にできます。
該当するコンポーネントが存在しない場合や自身でHTMLを使用してレイアウトする必要がある場合は、Verbatim (verbatim)操作を使用して独自のHTMLをページに挿入できます。
JDeveloperでは、「Verbatim」は、「コンポーネント」ウィンドウの「一般コントロール」の下にあります(図6-57を参照)。
詳細および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
JavaScriptを(amx:verbatim要素内の) verbatimコンテンツに直接挿入することは、現在サポートされているプラットフォームの将来のバージョンまたは将来MAFでサポートされる可能性のある他のプラットフォームで適切に実行されない可能性があるため、お薦めしません。かわりに、maf-feature.xmlファイル内の既存のadfmf:include要素を使用してJavaScriptおよびCSSを含めることで、MAF AMXアプリケーション機能の起動時にページにスクリプトが挿入されるようにすることをお薦めします。
また、JavaScriptをVerbatimコンポーネントとともに使用することは、AMXページからのサーバーに対するAJAXコールはサポートされていないという事実の影響を受けます。これは、MAF AMXページをホストするブラウザが、セキュア・サーバーに接続してそのリソースを取得するために必要なセキュリティ情報にアクセスできないようにするためのセキュリティ・アーキテクチャが原因です。かわりに、サーバーとの通信は、埋込みJavaコード・レイヤーから発生する必要があります。
出力HTML (outputHtml)コンポーネントを使用すると、MAF AMXページで表示するために、HTMLコンテンツをELバインド・プロパティまたはメソッドから動的かつ安全に取得できます。出力HTMLコンポーネントはVerbatimコンポーネント(第6.3.18「Verbatimコンポーネントの使用方法」を参照)と同様に動作し、JavaScriptおよびAJAXの使用に関して同じ制限が適用されます(第6.3.18.1項「JavaScriptおよびAJAXをVerbatimコンポーネントとともに使用する方法に関する必知事項」を参照)。
JDeveloperでは、出力HTMLは、「コンポーネント」ウィンドウの「一般コントロール」の下にあります(図6-56を参照)。
例6-56は、MAF AMXファイル内のoutputHtml要素定義を示しています。value属性は、MAF AMXページの最終レンダリングでoutputHTMLとして表示するHTMLコンテンツを取得するために使用される文字列プロパティにELバインディングを提供します。
例6-56 出力HTMLの定義
<amx:tableLayout id="t1" width="100%">
<amx:rowLayout id="r1">
<amx:cellFormat id="cf1" width="100%">
<amx:outputHtml id="ReceiptView"
value="#{pageFlowScope.purchaseBean.htmlReceiptView}"/>
</amx:cellFormat>
</amx:rowLayout>
<amx:rowLayout id="r2">
<amx:cellFormat id="cf2" width="100%">
<amx:outputHtml id="CheckView"
value="#{pageFlowScope.purchaseBean.htmlCheckView}"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
例6-57は、例6-56に示す出力HTMLコンポーネントのHTMLを提供するMyPurchaseBeanという名前のJava Beanのコードを示しています。
例6-57 HTMLの取得
// The property accessor that gets the receipt view HTML
public String getHtmlReceiptView() {
// Perform some URL remote call to get the HTML to be
// inserted as a view of the Receipt and return that value
return obtainReceiptHTMLFromServer();
}
// The property accessor that gets the check view HTML
public String getHtmlCheckView() {
// Perform some URL remote call to get the HTML to be
// inserted as a view of the Check and return that value
return obtainCheckHTMLFromServer();
}
出力HTMLコンポーネントはそのHTMLコンテンツをリモート・ソースから直接ダウンロードするのではなく、Java Beanプロパティから取得するため、動的に提供されるHTMLの取得または生成をコーディングする場合は、既存のMAFセキュリティ機能を使用することを検討してください。詳細は、第21章「モバイル・アプリケーションの保護」を参照してください。また、提供されるHTMLが信頼できるソースからのものであり、かつ脅威が含まれていないことを確認してください。
詳細および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
イテレータ(iterator)操作を使用して、同じ種類のデータを持つ任意の数のアイテムをスタンプします。これによりデータを繰り返し処理して各要素のUIを作成できます。
JDeveloperでは、「イテレータ」は「コンポーネント」ウィンドウの「データ・ビュー」の下にあります(図6-57を参照)。
詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
バンドルのロード(loadBundle)操作により、ページ上のMAF AMX UIコンポーネントのローカライズ済テキストを提供するリソース・バンドルを指定できます。詳細は、第6.7項「UIコンポーネントのローカライズ」を参照してください。
JDeveloperでは、「バンドルのロード」は「コンポーネント」ウィンドウの「操作」の下にあります(図6-58を参照)。
MAF AMXファイル内で、loadBundle要素をview要素の子として宣言します。
詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
アクション・リスナー(actionListener)コンポーネントにより、親コンポーネントが使用するタイプに基づいてELを介して宣言でコマンドを呼び出すことができます。
アクション・リスナー・コンポーネントを使用する主な理由は、親コンポーネントにジェスチャー対応アクションを追加すること、およびタップなどの単一ジェスチャーに対して複数の操作を実行できるためです。詳細は、第6.3.22.1項「アクション・リスナー・コンポーネントと属性間の違いに関する必知事項」を参照してください。
JDeveloperでは、アクション・リスナー・コンポーネントは「コンポーネント」ウィンドウの「操作」→「リスナー」の下にあります(図6-59を参照)。
0個以上のアクション・リスナー・コンポーネントを、任意のコマンド・コンポーネント(ボタン、リンク、リスト・アイテム、フィルム・ストリップ・アイテム)の子として追加できます。アクション・リスナー・コンポーネントのtype属性は、swipeLeft、swipeRight、tapHoldなどのジェスチャーのいずれによってActionEventが起動するかを定義します。
詳細は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
ボタン、リンクおよびリスト・アイテムなどのコンポーネントはactionListener属性を持つため、アクション・リスナー・コンポーネントの重複の原因となると考えられます。ただし、アクション・リスナー・コンポーネントとは異なり、これらのコンポーネントはジェスチャーをサポートするtype属性を持たないため、MAFで親コンポーネントのactionListener属性に加えてアクション・リスナー・コンポーネントが提供されます。
プロパティ・リスナーの設定(setPropertyListener)コンポーネントにより、コンポーネントに対するエンド・ユーザー・アクションの結果として、1つの場所(コンポーネントのfrom属性で定義)から別の場所(コンポーネントのto属性で定義)に宣言で値をコピーできるため、これと同じ結果を得るためにJavaコードを作成する必要がなくなります。
JDeveloperでは、プロパティ・リスナーの設定コンポーネントは「コンポーネント」ウィンドウの「操作」→「リスナー」の下にあります(図6-60を参照)。
例6-58は、MAF AMXファイル内のsetPropertyListener要素定義を示しています。
例6-58 プロパティ・リスナーの設定の定義
<amx:listView value="#{bindings.products.collectionModel}" var="row" id="lv1">
<amx:listItem id="li1" action="details">
<amx:outputText value="#{row.name}" id="ot1" />
<amx:setPropertyListener id="spl1"
from="#{row}"
to="#{pageFlowScope.product}"
type="action"/>
</amx:listItem>
</amx:listView>
0個以上のプロパティ・リスナーの設定コンポーネントを、任意のコマンド・コンポーネント(ボタン、リンク、リスト・アイテム、フィルム・ストリップ・アイテムおよびデータ視覚化コンポーネントのサブセット)の子として追加できます。プロパティ・リスナーの設定コンポーネントのtype属性は、swipeLeft、swipeRight、tapHoldなどのジェスチャーのいずれによってActionEventが起動するかを定義します。
詳細は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
日時の変換(convertDateTime)は、独立したUIコンポーネントではありません。これは、出力テキストおよび入力テキスト・コンポーネントと組み合せて使用して、指定されたパターンに従った様々な書式で、変換された日付、時刻または日時の組合せを表示するコンバータ操作です。
JDeveloperでは、「日時の変換」は「コンポーネント」ウィンドウの「バリデータおよびコンバータ」の下にあります(図6-61を参照)。
例6-59は、MAF AMXファイルで宣言されているconvertDateTime要素を示しています。
例6-59 日時の変換の使用方法
<amx:panelPage id="pp1">
<amx:inputText styleClass="ui-text" value="Order Date" id="it1" >
<amx:convertDateTime id="cdt1" type="both"/>
</amx:inputText>
</amx:panelPage>
日時値を変換するには:
「コンポーネント」ウィンドウから、「日時の変換」コンポーネントをドラッグし、それを出力テキストまたは入力テキスト・コンポーネント内に挿入し、それをそのコンポーネントの子要素にします。
日時の変換コンポーネントの「プロパティ」ウィンドウを開き、その属性を定義します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
|
注意: 日時の変換コンポーネントは、デザインタイムには何の効果も持ちません。 |
日時の変換コンポーネントでは、入力値文字列を日付に変換する際に一定レベルの寛容性があります。
月に対して関連付けられたパターンMMMを持つコンバータは、値のホルダーに添付されると、MMまたはMの形で指定された月の値を有効な値として受け入れます。
関連付けられたパターンで指定されているセパレータに関係なく、ダッシュ( - )、ピリオド( . )、スラッシュ( / )などのセパレータを使用できます。
パターン定義における寛容性は、pattern属性で設定します。
たとえば、コンバータのパターンが"MMM/d/yyyy"に設定されている場合、次の入力はコンバータにより有効なものとして許容されます。
Jan/4/2004 Jan-4-2004 Jan.4.2004 01/4/2004 01-4-2004 01.4.2004 1/4/2004 1-4-2004 1.4.2004
コンバータでは、java.text.SimpleDateFormat (dateStyle、timeStyleおよびpattern属性を使用して指定される)と同じ解析および書式設定規則がサポートされています。ただし、タイムゾーンが、timeStyle=fullなどの長い表示またはzzzzで設定されるパターンを持つように指定されている場合は例外です。タイムゾーンは太平洋標準時のような長い説明の文字列ではなく、一般的なタイムゾーン形式(GMT +/-オフセット)またはRFC-822タイムゾーンで表示されます。
変換の正確な結果は、ロケールによって異なりますが、一般的に次のルールが適用されます。
SHORTは、12.13.52や3:30pmなど完全に数値です。
MEDIUMはそれより長いJan 12、1952などです。
LONGは、それよりも長いJanuary 12、1952、3:30:32pmなどです。
FULLは、完全に指定されたTuesday, April 12, 1952 ADや3:30:42pm PSTなどです。
java.text.SimpleDateFormat定義に従って、日時書式を、日時パターン文字列で指定します。日時パターン文字列では、引用符で囲まれていないAからZおよびaからzの文字は、日付または時間の文字列のコンポーネントを表すパターン文字と認識されます。テキストは、解釈されないように一重引用符(')で囲むことができます。" ' ' "は一重引用符を表します。すべてのその他の文字は解釈されません。かわりに、それらは書式設定中に単に出力文字列にコピーされるか、解析中に入力文字列と照合されます。
表6-9は、定義済パターン文字を示しています(AからZおよびaからzのすべてのその他の文字は予約されています)。
表6-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では、「数値の変換」は「コンポーネント」ウィンドウの「バリデータおよびコンバータ」の下にあります(図6-62を参照)。
例6-60は、MAF AMXファイルで定義されているconvertNumber要素を示しています。
例6-60 数値の変換の使用方法
<amx:panelPage id="pp1">
<amx:inputText styleClass="ui-text" value="Product Price" id="it1" >
<amx:convertNumber id="cn1"
type="percent"
groupingUsed="false"
integerOnly="true"/>
</amx:inputText>
</amx:panelPage>
数値を変換するには:
「コンポーネント」ウィンドウから、「数値の変換」コンポーネントをドラッグし、それを出力テキスト、入力テキストまたは入力数値スライダ・コンポーネント内に挿入し、それをそのコンポーネントの子要素にします。
数値の変換コンポーネントの「プロパティ」ウィンドウを開き、その属性を定義します。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
|
注意: 数値の変換コンポーネントは、デザインタイムには何の効果も持ちません。 |
ナビゲーション・ドラッグ動作(navigationDragBehavior)操作を使用すると、モバイル・デバイス画面の一部を指定した方向(左または右)にドラッグすることによって、次または前のMAF AMXページに移動するアクションを起動できます。指定された方向へのドラッグが発生すると、画面の適切な側にインジケータが表示され、インジケータがすべて表示されるとすぐに、ドラッグが続いた後停止すると、アクションが実行されることが示されます。インジケータがすべて表示される前にドラッグが放された場合、インジケータはスライドされ、アクションは起動されません。
|
注意: 別のより近いコンテナによってドラッグ・ジェスチャーが消費されている場合、この動作は発生しません。 |
MAF AMXページには、1つはdirection属性がbackに設定され、1つはforwardに設定された、navigationDragBehavior要素のインスタンスを3つ以上含めることはできません。
JDeveloperでは、ナビゲーション・ドラッグ動作は「コンポーネント」ウィンドウの「操作」の下にあります(図6-63を参照)。
例6-61は、MAF AMXファイルで定義されているnavigationDragBehavior要素を示しています。この要素は、view要素の子にのみできることに注意してください。
例6-61 ナビゲーション・ドラッグ動作の使用方法
<amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:amx="http://xmlns.oracle.com/adf/mf/amx"
xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt">
<amx:navigationDragBehavior id="ndb1"
direction="forward"
action="gotoDetail"/> Foot 1
<amx:panelPage id="pp1">
<amx:facet name="header">
...
</amx:panelPage>
</amx:view>
図6-64は、実行時のナビゲーション・ドラッグ動作を示しています(mobileFusionFxスキンを使用して表示されています)。
詳細および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
disabled属性の値(例6-62および例6-63を参照)は、次のいずれかのことが発生したときに計算されます。
MAF AMXページのレンダリング。
PropertyChangeListenerによるコンポーネントの更新。エンド・ユーザーがナビゲーション・ドラッグ動作を起動できる機能を動的に有効または無効にするには、PropertyChangeListenerを使用します(Beanからの更新が必要なその他のコンポーネントで使用する場合と同様の方法)。
例6-62は、disabled属性が定義されているnavigationDragBehavior要素を含むMAF AMXページを示しています。アクティブ化された場合に、disabled属性がその値を読み取るバッキングBeanのboolean値(例6-63のnavDisabled)を変更するボタン(commandButton)によって機能が駆動されます。次に、バッキングBeanは、PropertyChangeListenerを使用します。
例6-62 MAF AMXページのdisabled属性を持つナビゲーション・ドラッグ動作
<amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:amx="http://xmlns.oracle.com/adf/mf/amx"
xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt">
<amx:panelPage id="pp1">
<amx:facet name="header">
<amx:outputText value="Header1" id="ot1"/>
</amx:facet>
<amx:commandButton id="cb1"
text="commandButton1"
actionListener="#{pageFlowScope.myBean.doSomething}"/>
</amx:panelPage>
<amx:navigationDragBehavior id="ndb1"
direction="forward"
action="goView2"
disabled="#{pageFlowScope.myBean.navDisabled}"/>
</amx:view>
例6-63は、navigationDragBehaviorのdisabled属性の値を提供するバッキングBean (例6-62のmyBean)を示しています。
例6-63 ナビゲーション・ドラッグ動作の無効機能のバッキングBean
public class MyBean {
boolean navDisabled = true;
private PropertyChangeSupport propertyChangeSupport =
new PropertyChangeSupport(this);
public void setNavDisabled(boolean navDisabled) {
boolean oldNavDisabled = this.navDisabled;
this.navDisabled = navDisabled;
propertyChangeSupport.firePropertyChange("navDisabled",
oldNavDisabled,
navDisabled);
}
public boolean isNavDisabled() {
return navDisabled;
}
public void doSomething(ActionEvent actionEvent) {
setNavDisabled(!navDisabled);
}
public void addPropertyChangeListener(PropertyChangeListener l) {
propertyChangeSupport.addPropertyChangeListener(l);
}
public void removePropertyChangeListener(PropertyChangeListener l) {
propertyChangeSupport.removePropertyChangeListener(l);
}
}
ロード・インジケータ動作(loadingIndicatorBehavior)操作を使用すると、次のものをオーバーライドすることでロード・インジケータの動作を定義できます。
フェイルセーフ・タイマーの期間(ミリ秒単位)。
フェイルセーフしきい値に達したときの一連のアクションを決定するために起動できるオプションのJavaScript関数名。
詳細は、表12-1「静的API」のadf.mf.api.amx.showLoadingIndicatorを参照してください。
JDeveloperでは、ロード・インジケータ動作は「コンポーネント」ウィンドウの「操作」の下にあります(図6-65を参照)。
例6-64は、MAF AMXファイルで定義されているloadingIndicatorBehavior要素を示しています。この要素は、view要素の子にのみできることに注意してください。
例6-64 ロード・インジケータ動作の使用方法
<amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:amx="http://xmlns.oracle.com/adf/mf/amx"
xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt">
<amx:loadingIndicatorBehavior id="lib1"
failSafeDuration="3000"
failSafeClientHandler="window.customFailSafeHandler"/>
<amx:panelPage id="pp1">
<amx:facet name="header">
<!-- The loading indicator custom fail safe handler will appear
if the long running operation runs longer than 3 seconds -->
<amx:commandButton id="cb1"
text="longRunningOperation"
actionListener=
"#{pageFlowScope.myBean.longRunningOperation} />
</amx:panelPage>
</amx:view>
前述の例では、commandButtonが長時間実行されるメソッドにバインドされて、(ページ自体のロードに長時間かかる場合ではなく)ページがロードされた場合に、長時間実行される操作にロード・インジケータが適用されることを示しています。
例6-65は、アプリケーション機能に含まれるcustom.jsファイルを示しています。これは、loadingIndicatorBehaviorページのfailSafeClientHandlerのクライアント・ハンドラを定義します。API要件に従って、この関数はhide、repeatまたはfreezeいずれかのStringを返します。詳細は、表12-1「静的API」のadf.mf.api.amx.showLoadingIndicatorを参照してください。
例6-65 サンプルcustom.jsファイル
window.customFailSafeHandler = function() {
var answer =
prompt(
"This is taking a long time.\n\n" +
"Use \"a\" to hide the indicator.\n" +
"Use \"z\" to wait for it.\n" +
"Otherwise, give it more time.");
if (answer == "a")
return "hide"; // don't ask again; hide the indicator
else if (answer == "z")
return "freeze" // don't ask again; wait for it to finish
else
return "repeat"; // ask again after another duration
};
詳細および例は、次を参照してください。
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあるMAFサンプル・アプリケーションのCompGallery
次のジェスチャーに反応するように、ボタン、リンク、リスト・アイテムおよびいくつかのデータ視覚化コンポーネントを構成できます。
右方向にスワイプ
左方向にスワイプ
上方向にスワイプ
下方向にスワイプ
タップしたまま押さえる
アクション: ジェスチャーとしては、アクションは基本的なタップを表します。
始点方向にスワイプ: このジェスチャーは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。このジェスチャーは、次のように解決されます。
テキスト方向が左から右である場合、左方向にスワイプします。
テキスト方向が右から左である場合、右方向にスワイプします。
終点方向にスワイプ: このジェスチャーは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。このジェスチャーは、次のように解決されます。
テキスト方向が左から右である場合、右方向にスワイプします。
テキスト方向が右から左である場合、左方向にスワイプします。
次の操作のtype属性に対して、swipeRight、swipeLeft、swipeUp、swipeDown、swipeStart、swipeEnd、actionおよびtapHold値を定義できます。
プロパティ・リスナーの設定(第6.3.23項「プロパティ・リスナーの設定の使用方法」を参照)
アクション・リスナー(第6.3.22項「アクション・リスナーの使用方法」を参照)
ポップアップ表示動作(第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
ポップアップを閉じる動作(第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
type属性の値は親コンポーネントに基づいて制限され、リンク(commandLink)およびリスト・アイテム(listItem)コンポーネントに対してのみサポートされています。
|
注意: リンク(実行) ( |
始点方向にスワイプと終点方向にスワイプは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。通常は、左と右ではなく、始点と終点のスワイプ・スタイルを設定することをお薦めします。
例6-66は、MAF AMXファイルのtype属性のtapHold値の使用を示しています。この例では、タップしたまま押さえるジェスチャーによってポップアップ・コンポーネントの表示がトリガーされます。
例6-66 タップしたまま押さえるジェスチャーの使用方法
<amx:panelPage id="pp1">
<amx:listView id="lv1"
value="#{bindings.data.collectionModel}"
var="row">
<amx:listItem id="li1" action="gosomewhere">
<amx:outputText id="ot1" value="#{row.description}"/>
<amx:setPropertyListener id="spl1"
from="#{row.rowKey}"
to="#{mybean.currentRow}"
type="tapHold"/>
<amx:showPopupBehavior id="spb1"
type="tapHold"
alignid="pp1"
popupid="pop1"
align="startAfter"/>
</amx:listItem>
</amx:listView>>
</amx:panelPage>
<amx:popup id="pop1">
<amx:panelGroupLayout id="pgl1" layout="horizontal">
<amx:commandLink id="cm1" actionListener="#{mybean.doX}">
<amx:image id="i1" source="images/x.png"/>
<amx:closePopupBehavior id="cpb1" type="action" popupid="pop1"/>
</amx:commandLink>
<amx:commandLink id="cm2" actionListener="#{mybean.doY}">
<amx:image id="i2" source="images/y.png"/>
<amx:closePopupBehavior id="cpb2" type="action" popupid="pop1"/>
</amx:commandLink>
<amx:commandLink id="cm3" actionListener="#{mybean.doZ}">
<amx:image id="i3" source="images/y.png"/>
<amx:closePopupBehavior id="cpb3" type="action" popupid="pop1"/>
</amx:commandLink>
</amx:panelGroupLayout>
</amx:popup>
例6-67は、MAF AMXファイル内のswipeRightジェスチャーの使用方法を示しています。
例6-67 右方向にスワイプ・ジェスチャーの使用方法
<amx:panelPage id="pp1">
<amx:listView id="lv1"
value="#{bindings.data.collectionModel}"
var="row">
<amx:listItem id="li1" action="gosomewhere">
<amx:outputText id="ot1" value="#{row.description}"/>
<amx:setPropertyListener id="spl1"
from="#{row.rowKey}"
to="#{mybean.currentRow}"
type="swipeRight"/>
<actionListener id="al1" binding="#{mybean.DoX}" type="swipeRight"/>
</amx:listItem>
</amx:listView>>
</amx:panelPage>
詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
GestureDemoという名前のMAFサンプル・アプリケーションは、様々なMAF AMX UIコンポーネントでのジェスチャーの使用方法を示しています。このサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
MAFでは、MAF AMXアプリケーション機能でデータを表すための様々なチャート、ゲージおよびマップを作成するために使用できる一連のデータ視覚化コンポーネントを採用しています。MAF AMXファイルの<dvtm>ネームスペースの下で次の要素を宣言できます。
areaChart (第6.5.1項「面グラフの作成方法」を参照)
barChart (第6.5.2項「棒グラフの作成方法」を参照)
horizontalBarChart (第6.5.3項「横棒グラフの作成方法」を参照)
bubbleChart (第6.5.4項「バブル・チャートの作成方法」を参照)
comboChart (第6.5.5項「コンボ・チャートの作成方法」を参照)
lineChart (第6.5.6項「線グラフの作成方法」を参照)
pieChart (第6.5.7項「円グラフの作成方法」を参照)
scatterChart (第6.5.8項「散布図の作成方法」を参照)
sparkChart (第6.5.9項「スパーク・チャートの作成方法」を参照)
funnelChart (第6.5.10項「ファンネル・チャートの作成方法」を参照)
ledGauge (第6.5.13項「LEDゲージの作成方法」を参照)
statusMeterGauge (第6.5.14項「ステータス・メーター・ゲージの作成方法」を参照)
dialGauge (第6.5.15項「ダイアル・ゲージの作成方法」を参照)
ratingGauge (第6.5.16項「評価ゲージの作成方法」を参照)
geographicMap (第6.5.18項「地理マップ・コンポーネントの作成方法」を参照)
thematicMap (第6.5.19項「テーマ・マップ・コンポーネントの作成方法」を参照)
treemap (第6.5.21項「ツリーマップ・コンポーネントの作成方法」を参照)
sunburst (第6.5.22項「サンバースト・コンポーネントの作成方法」を参照)
timeline (第6.5.23項「時系列コンポーネントの作成方法」を参照)
nBox (第6.5.24項「NBoxコンポーネントの作成方法」を参照)
チャート、ゲージ、マップおよび拡張コンポーネントの要素には、それらのすべてまたはほとんどに共通する複数の属性があります。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
JDeveloperでは、データ視覚化コンポーネントは「コンポーネント」ウィンドウの次の場所にあります。
チャート・コンポーネントは、「MAF AMXデータ視覚化」→「共通」→「チャート」の下にあります。
ゲージ・コンポーネントは、「MAF AMXデータ視覚化」→「共通」→「ゲージ」の下にあります。
マップ・コンポーネントは、「MAF AMXデータ視覚化」→「共通」→「マップ」の下にあります。
ツリーマップ、サンバースト、時系列およびNBoxは、「MAF AMXデータ視覚化」→「共通」→「その他」の下にあります。
データ視覚化コンポーネントをドラッグ・アンド・ドロップすると、次のいずれかに似たダイアログが開き、作成しているコンポーネントのタイプに関する情報が表示されます。
モバイル・チャートの作成 (図6-67を参照)
モバイル・ゲージの作成 (図6-68を参照)
コンポーネント・ギャラリ (図6-69を参照)
「サンバーストの作成」または「ツリーマップ」(図6-68を参照)
|
注意: コンポーネントの作成後、ソース・エディタまたは「構造」ビューでそのコンポーネントを選択し、「プロパティ」ウィンドウで「コンポーネント定義の編集」をクリックすることによって、作成ダイアログを再起動できます。 「プロパティ」ウィンドウで提供される同一の編集機能を使用すると、いくつかのデータ視覚化コンポーネントの子コンポーネント(データ・ポイント・レイヤーなど)を編集できます。 |
CompGalleryという名前のMAFサンプル・アプリケーションは、MAF AMXアプリケーション機能での様々なデータ視覚化コンポーネントの使用方法を示しています。このサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
MAF AMXデータ視覚化コンポーネントの詳細は、次を参照してください。
イベント・リスナーをデータ視覚化コンポーネントに追加する方法の詳細は、第6.10項「イベント・リスナーの使用方法」を参照してください。イベント・リスナーは、iOSとAndroidのどちらのデバイスでもMAF AMXランタイムの記述のためにコンポーネントに適用できますが、それらのリスナーはデザインタイムでは何の効果も持ちません。
「データ・コントロール」ウィンドウから作成されるデータバインドされたデータ視覚化コンポーネントの詳細は、第6.5.26項「データバインドされたデータ視覚化コンポーネントの作成方法」を参照してください。
データ視覚化コンポーネントにおけるアクセシビリティのサポートの詳細は、第6.8項「MAFのアクセシビリティのサポートの理解」を参照してください。
MAF AMXデータ視覚化コンポーネントの使用上の制約の詳細は、第D.6.2項「データ視覚化コンポーネントの制限」を参照してください。
面グラフ(areaChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けれされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、面の色やパターンなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。カスタム系列スタイルの定義の詳細は、第6.5.6項「線グラフの作成方法」を参照してください。
面グラフは、そのX軸に沿ってズームおよびスクロールできます。これは、zoomAndScroll属性を使用することによって有効になります。
例6-68は、MAF AMXファイルで定義されているareaChart要素を示しています。デフォルト系列スタイルで基本的な面グラフを作成するには、それにコレクションを渡し、chartDataItem要素をネストしたdataStampファセットを指定します。
例6-68 デフォルト系列スタイルを持つ面グラフの定義
<dvtm:areaChart id="areaChart1"
value="#{bindings.lineData.collectionModel}"
var="row"
inlineStyle="width: 400px; height: 300px;"
animationOnDisplay="auto"
animationDuration="1500" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="areaChartItem1" series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
</amx:facet>
<dvtm:yAxis id="yAxis1"
axisMaxValue="80.0"
majorIncrement="20.0"
title="yAxis Title" />
<dvtm:legend id="l1" position="end" />
</dvtm:areaChart>
データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrowに次のプロパティが含まれている必要があります。
series: このデータ・アイテムが属する系列の名前。
group: このデータ・アイテムが属するグループの名前。
value: データ・アイテムの値。
コレクションのrowには、個々のデータ・アイテムに適用可能なcolorやshapeなどの他のプロパティも含めることができます。
例6-69に示すように、属性グループ(attributeGroups要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、データ・アイテムのcolorおよびshape属性が、追加のグループ化式に基づいて設定されます。attributeGroupsは、次の子要素を持つことができます。
dvtmネームスペースのattributeExceptionRule: 特定のブール条件が満たされる場合に、属性値を別の値に置き換えます。
dvtmネームスペースのattributeMatchRule: データが特定の値に一致する場合に属性を置き換えます。
amxネームスペースのattribute。
例6-69 デフォルト系列スタイルおよびグループ化を含む面グラフの定義
<dvtm:areaChart id="areaChart1"
value="#{bindings.lineData.collectionModel}"
var="row"
inlineStyle="width: 400px; height: 300px;"
title="Chart Title"
animationOnDisplay="auto"
animationDuration="1500" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="chartDataItem1"
series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
<dvtm:attributeGroups id="ag1"
type="color"
value="#{row.brand}" />
</amx:facet>
<dvtm:yAxis id="yAxis1"
axisMaxValue="80.0"
majorIncrement="20.0"
title="yAxis Title" />
<dvtm:legend id="l1" position="end" />
</dvtm:areaChart>
このコンポーネントに定義できるareaChartの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトのCSS設定を上書きすることで、面グラフ・コンポーネントの最上位要素のスタイルを設定できます。
.dvtm-areaChart - supported properties: all
チャートのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
棒グラフ(barChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを垂直の棒として視覚的に表すために使用します。系列は、個々のデータ・アイテムごとではなく系列レベルで適用する必要があるいくつかの一般的なスタイル・プロパティを持つグラフィカル要素を使用して視覚化されます。
棒グラフは、そのX軸に沿ってズームおよびスクロールできます。これは、zoomAndScroll属性を使用することによって有効になります。
例6-70は、MAF AMXファイルで定義されているbarChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。
例6-70 棒グラフの定義
<dvtm:barChart id="barChart1"
value="#{bindings.barData.collectionModel}"
var="row"
inlineStyle="width: 400px; height: 300px;"
animationOnDisplay="zoom"
animationDuration="3000" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="chartDataItem1"
series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
</amx:facet>
<dvtm:yAxis id="yAxis1"
axisMaxValue="80.0"
majorIncrement="20.0"
title="yAxis Title" />
<dvtm:legend id="l1" position="start" />
</dvtm:barChart>
棒グラフのデータ・モデルは、個々の棒を記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。
series: この棒が属する系列の名前。
group: この棒が属するグループの名前。
value: データ・アイテムの値(必須)。
データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。
このコンポーネントに定義できるbarChartの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトのCSS設定を上書きすることで、棒グラフ・コンポーネントの最上位要素のスタイルを設定できます。
.dvtm-barChart - supported properties: all
チャートのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
横棒グラフ(horizontalBarChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを水平の棒として視覚的に表すために使用します。系列は、個々のデータ・アイテムごとではなく系列レベルで適用する必要があるいくつかの一般的なスタイル・プロパティを持つグラフィカル要素を使用して視覚化されます。
棒グラフは、そのX軸に沿ってズームおよびスクロールできます。これは、zoomAndScroll属性を使用することによって有効になります。
例6-70は、MAF AMXファイルで定義されているhorizontalBarChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。
例6-71 横棒グラフの定義
<dvtm:horizontalBarChart id="horizBarChart1"
value="#{bindings.barData.collectionModel}"
var="row"
inlineStyle="width: 400px; height: 300px;"
dataSelection="#{pageFlowScope.dataSelection}"
hideAndShowBehavior="#{pageFlowScope.hideAndShowBehavior}"
rolloverBehavior="#{pageFlowScope.rolloverBehavior}"
stack="#{pageFlowScope.stack}" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="chartDataItem1"
series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
</amx:facet>
<dvtm:yAxis id="yAxis1"
axisMaxValue="80.0"
majorIncrement="20.0"
title="yAxis Title" />
<dvtm:legend id="l1" position="start" />
</dvtm:horizontalBarChart>
横棒グラフのデータ・モデルは、個々の棒を記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。
series: この棒が属する系列の名前。
group: この棒が属するグループの名前。
value: データ・アイテムの値(必須)。
データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。
このコンポーネントに定義できるhorizontalBarChartの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトのCSS設定を上書きすることで、横棒グラフ・コンポーネントの最上位要素のスタイルを設定できます。
.dvtm-horizontalBarChart - supported properties: all
チャートのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
バブル・チャート(bubbleChart)は、各データ・アイテムがx、y座標とサイズ(バブル)を持つ一連のデータ・アイテムを表示します。さらに、各データ・アイテムには、colorやmarkerShapeなど様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、線グラフ(第6.5.6項「線グラフの作成方法」を参照)や面グラフ(第6.5.1項「面グラフの作成方法」を参照)と異なり、バブル・チャートには系列およびグループの厳密な概念がありません。
バブル・チャートは、そのXおよびY軸に沿ってズームおよびスクロールできます。これは、zoomAndScroll属性を使用することによって有効になります。
例6-72は、MAF AMXファイルで定義されているbubbleChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。各データ・アイテムのcolorおよびmarkerShape属性は、データ・モデルで提供されている値に基づいて個別に設定されます。また、基礎となるデータ・コントロールでは、row.label、row.sizeおよびrow.shapeの変数参照がそれぞれサポートされている必要があります。
例6-72 カスタム・データ・アイテム・プロパティを設定したバブル・チャートの定義
<dvtm:bubbleChart id="bubbleChart1"
value="#{bindings.bubbleData.collectionModel}"
inlineStyle="width: 400px; height: 300px;"
dataSelection="multiple"
rolloverBehavior="dim"
animationOnDisplay="auto"
var="row">
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="chartDataItem1"
group="#{row.group}"
x="#{row.x}"
y="#{row.y}"
markerSize="#{row.size}"
color="#{row.color}"
markerShape="#{row.shape}" />
</amx:facet>
</dvtm:bubbleChart>
例6-73では、データ・アイテムからなる関連する1つのグループに対して一般的なスタイル属性を設定するためにattributeGroups要素が使用されています。
例6-73 属性グループを設定したバブル・チャートの定義
<dvtm:bubbleChart id="bubbleChart1"
value="#{bindings.bubbleData.collectionModel}"
dataSelection="multiple"
rolloverBehavior="dim"
animationOnDisplay="auto"
title="Bubble Chart"
var="row">
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="chartDataItem1"
group="#{row.label}"
x="#{row.x}"
y="#{row.y}" >
<dvtm:attributeGroups id="ag1" type="color" value="#{row.category}" />
<dvtm:attributeGroups id="ag2" type="shape" value="#{row.brand}" />
</dvtm:chartDataItem>
</amx:facet>
</dvtm:bubbleChart>
バブル・チャートのデータ・モデルは、個々のデータ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。
label: データ・アイテム・ラベル(オプション)。
x、y: 値の座標(必須)。
z: データ・アイテムのサイズ(必須)。
データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。
このコンポーネントに定義できるbubbleChartの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトのCSS設定を上書きすることで、バブル・チャート・コンポーネントの最上位要素のスタイルを設定できます。
.dvtm-bubbleChart - supported properties: all
チャートのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
コンボ・チャート(comboChart)は、折れ線と棒のグラフなど、2つ以上の異なるグラフを重ねたものを表します。
例6-74は、MAF AMXファイルで定義されているcomboChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。seriesStampファセットは、系列のデフォルト・スタイル・プロパティをオーバーライドし、seriesStyle要素を使用してカスタム系列スタイルを設定します。
例6-74 コンボ・チャートの定義
<dvtm:comboChart id="comboChart1"
value="#{bindings.barData.collectionModel}"
var="row"
inlineStyle="width: 400px; height: 300px;"
animationOnDisplay="auto"
animationDuration="1500" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="chartDataItem1"
series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
</amx:facet>
<amx:facet name="seriesStamp">
<dvtm:seriesStyle id="seriesStyle1"
series="#{row.series}"
type="bar"
rendered="#{(row.series eq 'Series 1') or
(row.series eq 'Series 2') or
(row.series eq 'Series 3')}" />
<dvtm:seriesStyle id="seriesStyle2"
series="#{row.series}"
type="line"
lineWidth="5"
rendered="#{(row.series eq 'Series 4') or
(row.series eq 'Series 5')}" />
</amx:facet>
<dvtm:yAxis id="yAxis1"
axisMaxValue="80.0"
majorIncrement="20.0"
title="yAxis Title" />
<dvtm:legend position="start" id="l1" />
</dvtm:comboChart>
このコンポーネントに定義できるcomboChartの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトのCSS設定を上書きすることで、コンボ・チャート・コンポーネントの最上位要素のスタイルを設定できます。
.dvtm-comboChart - supported properties: all
チャートのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
線グラフ(lineChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、線の色、太さ、スタイルなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。
線グラフは、そのX軸に沿ってズームおよびスクロールできます。これは、zoomAndScroll属性を使用することによって有効になります。
例6-75は、MAF AMXファイルで定義されているlineChart要素を示しています。デフォルト系列スタイルで基本的な線グラフを作成するには、それにコレクションを渡し、chartDataItem要素をネストしたdataStampファセットを指定します。
例6-75 デフォルト系列スタイルを持つ線グラフの定義
<dvtm:lineChart id="lineChart1"
inlineStyle="width: 400px; height: 300px;"
rolloverBehavior="dim"
animationOnDisplay="auto"
value="#{bindings.lineData1.collectionModel}"
var="row" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="chartDataItem1"
series="#{row.series}"
group="#{row.group}"
value="#{row.value}"
color="#{row.color}" />
</amx:facet>
</dvtm:lineChart>
データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrowに次のプロパティが含まれている必要があります。
series: この線が属する系列の名前。
group: この線が属するグループの名前。
value: データ・アイテムの値。
コレクションのrowには、個々のデータ・アイテムに適用可能なcolorやshapeなどの他のプロパティも含めることができます。
例6-76に示すように、属性グループ(attributeGroups要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、データ・アイテムのcolorおよびshape属性が、追加のグループ化式に基づいて設定されます。attributeGroupsは、次の子要素を持つことができます。
dvtmネームスペースのattributeExceptionRule: 特定のブール条件が満たされる場合に、属性値を別の値に置き換えます。
dvtmネームスペースのattributeMatchRule: データが特定の値に一致する場合に属性を置き換えます。
amxネームスペースのattribute。
例6-76 デフォルト系列スタイルおよびグループ化を含む線グラフの定義
<dvtm:lineChart id="lineChart1"
inlineStyle="width: 400px; height: 300px;"
rolloverBehavior="dim"
animationOnDisplay="auto"
title="Line Chart"
value="#{bindings.lineData1.collectionModel}"
var="row" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="chartDataItem1"
series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
<dvtm:attributeGroups id="ag1"
type="color"
value="#{row.brand}" />
</dvtm:chartDataItem>
</amx:facet>
</dvtm:lineChart>
系列のデフォルト・スタイル・プロパティをオーバーライドするには、例6-77に示すように、オプションのseriesStampファセットを定義し、seriesStyle要素を使用してカスタム系列スタイルを設定します。
例6-77 カスタム系列スタイルを持つ線グラフの定義
<dvtm:lineChart id="lineChart1"
inlineStyle="width: 400px; height: 300px;"
rolloverBehavior="dim"
animationOnDisplay="auto"
title="Line Chart"
value="#{bindings.lineData1.collectionModel}"
var="row" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="chartDataItem1"
series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
</amx:facet>
<amx:facet name="seriesStamp">
<dvtm:seriesStyle series="#{row.series}"
lineStyle="#{row.lineStyle}"
lineWidth="#{row.lineWidth}" />
</amx:facet>
</dvtm:lineChart>
前述の例では、seriesStyle要素がseries属性の値に基づいてグループ化されています。同じ名前を持つ系列は、seriesStyleの他の属性(color、lineStyle、lineWidthなど)によって定義された、同じプロパティ・セットを共有する必要があります。MAF AMXでは、同じ系列名を持つ異なる属性値を検出した場合、前回処理された値を適用します。
かわりに、図6-78に示すように、seriesStyle要素のrendered属性を使用して、MAF AMXチャートで系列スタイルを制御できます。
例6-78 フィルタ対象系列スタイルを持つ線グラフの定義
<dvtm:lineChart id="lineChart1"
inlineStyle="width: 400px; height: 300px;"
rolloverBehavior="dim"
animationOnDisplay="auto"
title="Line Chart"
value="#{bindings.lineData1.collectionModel}"
var="row" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="chartDataItem1"
series="#{row.series}"
group="#{row.group}"
value="#{row.value}"
color="#{row.color}" />
</amx:facet>
<amx:facet name="seriesStamp">
<dvtm:seriesStyle series="#{row.series}"
color="red"
lineWidth="3"
lineStyle="solid"
rendered="#{row.series == 'Coke'}" />
<dvtm:seriesStyle series="#{row.series}"
color="blue"
lineWidth="2"
lineStyle="dotted"
rendered="#{row.series == 'Pepsi'}" />
</amx:facet>
</dvtm:lineChart>
このコンポーネントに定義できるlineChartの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトのCSS設定を上書きすることで、線グラフ・コンポーネントの最上位要素のスタイルを設定できます。
.dvtm-lineChart - supported properties: all
チャートのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
円グラフ(pieChart)は、各データ・アイテムを円セグメント(区分)で表したデータの比率による区分を示すために使用します。区分はサイズ別に(最大から最小へと)ソートでき、小さい区分は他の単一の区分に集約できます。
例6-79は、MAF AMXファイルで定義されているpieChart要素を示しています。dataStampファセットは、ネストされたpieDataItem要素とともに指定されます。
例6-79 円グラフの定義
<dvtm:pieChart id="pieChart1"
inlineStyle="width: 400px; height: 300px;"
value="#{bindings.pieData.collectionModel}"
var="row"
animationOnDisplay="zoom"
animationDuration="3000" >
<amx:facet name="dataStamp">
<dvtm:pieDataItem id="pieDataItem1"
label="#{row.name}"
value="#{row.data}" />
</amx:facet>
<dvtm:legend position="bottom" id="l1" />
</dvtm:pieChart>
円グラフのデータ・モデルは、個々の円データ・アイテムを定義するアイテムのコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。
label: 区分ラベル。
value: 区分の値。
モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。
borderColor: 区分の境界線の色。
color: 区分の色。
explode: 区分を開くときのオフセット。
このコンポーネントに定義できるpieChartの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
amxネームスペースからfacet子要素を定義できます。facetには、pieDataItemを子として含めることができます(第6.5.17.4項「円グラフのデータ・アイテムの定義」を参照)。
dvtm-pieChart、dvtm-chartPieLabelおよびdvtm-chartSliceLabelクラスで定義されているデフォルトのCSS設定を上書きすることで、円グラフ・コンポーネントのスタイルを設定できます。
最上位要素のスタイルは、次のものを使用して設定できます。
.dvtm-pieChart - supported properties: all
円グラフのラベルのスタイルは、次のものを使用して設定できます。
.dvtm-chartPieLabel
- supported properties:
font-family, font-size, font-weight, color, font-style
円グラフの区分のラベルのスタイルは、次のものを使用して設定できます。
.dvtm-chartSliceLabel
- supported properties:
font-family, font-size, font-weight, color, font-style
チャートのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
散布図(scatterChart)は、各アイテムがx、y座標とサイズを持つデータ・アイテムを表す連続しないドットでデータを表示します。さらに、各データ・アイテムには、colorやmarkerShapeなど様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、線グラフ(第6.5.6項「線グラフの作成方法」を参照)や面グラフ(第6.5.1項「面グラフの作成方法」を参照)と異なり、散布図には系列およびグループの厳密な概念がありません。
散布図は、そのXおよびY軸に沿ってズームおよびスクロールできます。これは、zoomAndScroll属性を使用することによって有効になります。
例6-80は、MAF AMXファイルで定義されているscatterChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。各データ・アイテムのcolorおよびmarkerShape属性は、データ・モデルで提供されている値に基づいて個別に設定されます。
例6-80 散布図の定義
<dvtm:scatterChart id="scatterChart1"
inlineStyle="width: 400px; height: 300px;"
animationOnDisplay="zoom"
animationDuration="3000"
value="#{bindings.scatterData.collectionModel}"
var="row" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem id="chartDataItem1"
group="#{row.group}"
color="#{row.color}"
markerShape="auto"
x="#{row.data.x}"
y="#{row.data.y}">
<dvtm:attributeGroups type="color"
value="#{row.series}"
id="ag1" />
</dvtm:chartDataItem>
</amx:facet>
<dvtm:xAxis id="xAxis1" title="X Axis Title" />
<dvtm:yAxis id="xAxis2" title="Y Axis Title" />
<dvtm:legend position="bottom" id="l1" />
</dvtm:scatterChart>
散布図のデータ・モデルは、個々のデータ・アイテムを記述するアイテム(行)のコレクションによって表されます。各データ・アイテムの属性は、スタンプ(dataStamp)によって定義され、通常、次のものがあります。
x、y: 値の座標(必須)。
markerSize: マーカーのサイズ(オプション)。
モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。
borderColor: データ・アイテムの境界線の色。
color: データ・アイテムの色。
tooltip: カスタム・ツールチップ。
このコンポーネントに定義できるscatterChartの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
amxネームスペースからfacet子要素を定義できます。facetには、chartDataItemを子として含めることができます(第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトのCSS設定を上書きすることで、散布図コンポーネントの最上位要素のスタイルを設定できます。
.dvtm-scatterChart - supported properties: all
チャートのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
スパーク・チャート(sparkChart)は、傾向や変化を、多くの場合、表の列内で表す簡単な縮小グラフです。このチャートは、多くの場合、データ密度の濃い表示に追加のコンテキストを提供するためにダッシュボードで使用されます。
例6-81は、MAF AMXファイルで定義されているsparkChart要素を示しています。dataStampファセットは、ネストされたsparkDataItem要素とともに指定されます。
例6-81 スパーク・チャートの定義
<dvtm:sparkChart id="sparkChart1"
value="#{bindings.sparkData.collectionModel}"
var="row"
type="line"
inlineStyle="width:400px; height:300px; float:left;">
<amx:facet name="dataStamp">
<dvtm:sparkDataItem id="sparkDataItem1" value="#{row.value}" />
</amx:facet>
</dvtm:sparkChart>
スパーク・チャートのデータ・モデルは、個々のスパーク・データ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。
value: スパーク値。
sparkChartの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
amxネームスペースからfacet子要素を定義できます。facetには、sparkDataItemを子として含めることができます(第6.5.17.5項「スパーク・チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトのCSS設定を上書きすることで、スパーク・チャート・コンポーネントの最上位要素のスタイルを設定できます。
.dvtm-sparkChart - supported properties: all
チャートのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
ファンネル・チャート(funnelChart)コンポーネントは、プロセスのステップに関するデータを視覚的に表現します。ステップは、横向きの円柱に対する縦向きのスライスとして表されます。特定のステップ(スライス)の実際の値がそのスライスの割当てに近づいた分、スライスが塗りつぶされます。通常、ファンネル・チャートには、時間などのステージ値に対する実績値と目標値が必要です。
例6-82は、MAF AMXファイルで定義されているfunnelChart要素を示しています。dataStampファセットは、ネストされたfunnelDataItem要素とともに指定されます。
例6-82 ファンネル・チャートの定義
<dvtm:funnelChart id="funnelChart1"
var="row"
value="#{bindings.funnelData.collectionModel}"
styleClass="dvtm-gallery-component"
sliceGaps="on"
threeDEffect="#{pageFlowScope.threeD ? 'on' : 'off'}"
orientation="#{pageFlowScope.orientation}"
dataSelection="#{pageFlowScope.dataSelection}"
footnote="#{pageFlowScope.footnote}"
footnoteHalign="#{pageFlowScope.footnoteHalign}"
hideAndShowBehavior="#{pageFlowScope.hideAndShowBehavior}"
rolloverBehavior="#{pageFlowScope.rolloverBehavior}"
seriesEffect="#{pageFlowScope.seriesEffect}"
subtitle="#{pageFlowScope.titleDisplay ?
pageFlowScope.subtitle : ''}"
title="#{pageFlowScope.titleDisplay ? pageFlowScope.title : ''}"
titleHalign="#{pageFlowScope.titleHalign}"
animationOnDataChange="#{pageFlowScope.animationOnDataChange}"
animationDuration="#{pageFlowScope.animationDuration}"
animationOnDisplay="#{pageFlowScope.animationOnDisplay}"
shortDesc="#{pageFlowScope.shortDesc}">
<amx:facet name="dataStamp">
<dvtm:funnelDataItem id="funnelDataItem1"
label="#{row.label}"
value="#{row.value}"
targetValue="#{row.targetValue}"
color="#{row.color}"
shortDesc="This is a tooltip">
</dvtm:funnelDataItem>
</amx:facet>
<dvtm:legend id="l1"
position="#{pageFlowScope.legendPosition}"
rendered="#{pageFlowScope.legendDisplay}"/>
</dvtm:funnelChart>
ファンネル・チャートのデータ・モデルは、個々のファンネル・データ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。
value: ファンネル値
label: ファンネル区分ラベル
funnelChartの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
amxネームスペースからfacet子要素を定義できます。facetには、funnelDataItemを子として含めることができます(第6.5.17.6項「ファンネル・データ・アイテムの定義」を参照)。
dvtm-funnelChartおよびdvtm-funnelDataItemクラスで定義されているデフォルトのCSS設定を上書きすることで、ファンネル・チャート・コンポーネントのスタイルを設定できます。
最上位要素のスタイルは、次のものを使用して設定できます。
.dvtm-funnelChart - supported properties: all
ファンネル・チャート・データ・アイテムのスタイルは、次のものを使用して設定できます。
.dvtm-funnelDataItem - supported properties: border-color, background-color
チャートのスタイル設定の詳細は、第6.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
スパーク・チャートを除き、次のクラスで定義されているデフォルトの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を面グラフ、棒グラフ、横棒グラフ、コンボ・チャートおよび線グラフ・コンポーネントの属性として指定できます。
詳細は、次を参照してください。
Oracle Mobile Application Framework Oracle Fusion Middleware Java APIリファレンス
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
チャートと異なり、ゲージでは、単一のデータ・ポイントを重視し、そのポイントを最小、最大およびしきい値インジケータと比較して問題領域を識別します。LED(電光表示)ゲージ(ledGauge)は、重要業績評価指標(KPI)などの測定値をグラフィカルに表します。LEDゲージには、いくつかのスタイルがあります。矢印付きのものは、よい(上矢印)、普通(右または左矢印)および悪い(下矢印)を示すために使用されます。ゲージのしきい値はいくつでも指定できます。ただし、一部のLEDゲージ(矢印または三角形のインジケータを持つものなど)では、指し示す有効な方向の数が限られているため、サポートされるしきい値の数にかぎりがあります。矢印または三角形のインジケータの場合、しきい値の最大数は3です。
例6-83は、MAF AMXファイルで定義されているledGauge要素を示しています。
例6-83 LEDゲージの定義
<dvtm:ledGauge id="ledGauge1"
value="65"
type="circle"
inlineStyle="width: 100px; height: 80px; float: left;
border-color: navy; background-color: lightyellow;">
<dvtm:threshold id="threshold1" text="Low" maxValue="40" />
<dvtm:threshold id="threshold2" text="Medium" maxValue="60" />
<dvtm:threshold id="threshold3" text="High" maxValue="80" />
</dvtm:ledGauge>
LEDゲージのデータ・モデルは、value属性で指定される単一のメトリック値で表されます。
このコンポーネントに定義できるledGaugeの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
次のamx子要素を定義できます。
showPopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
closePopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
validationBehavior (第6.9項「入力の検証」を参照)
ステータス・メーター・ゲージ(statusMeterGauge)は、矩形の水平バーまたは円に沿ってタスクの進捗状況または測定値のレベルを示します。コンポーネントのある部分が、別の部分に示されている範囲に対する現在の測定値のレベルを示します。また、しきい値は、サイズ変更が可能なインジケータの背後に表示できます。
MAF AMXのデータ視覚化のステータス・メーター・ゲージ・コンポーネントでは、参照線(referenceLine)のサポートが提供されます。この参照線を使用して、ブレット・グラフを生成できます。
例6-84は、MAF AMXファイルで定義されているstatusMeterGauge要素を示しています。
例6-84 ステータス・メーター・ゲージの定義
<dvtm:statusMeterGauge id="meterGauge1"
value="65"
animationOnDisplay="auto"
animationDuration="1000"
inlineStyle="width: 300px;
height: 30px;
float: left;
border-color: black;
background-color: lightyellow;"
minValue="0"
maxValue="100">
<dvtm:metricLabel/>
<dvtm:threshold id="threshold1" text="Low" maxValue="40" />
<dvtm:threshold id="threshold2" text="Medium" maxValue="60" />
<dvtm:threshold id="threshold3" text="High" maxValue="80" />
</dvtm:statusMeterGauge>
円で表されるステータス・メーター・ゲージを作成するには(図6-83を参照)、そのorientation属性をcircularに設定します。デフォルトでは、この属性はhorizontalに設定されており、横長の矩形が表示されます。
ステータス・メーター・ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。
このコンポーネントに定義できるstatusMeterGaugeの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
次のamx子要素を定義できます。
showPopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
closePopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
validationBehavior (第6.9項「入力の検証」を参照)
ダイアル・ゲージ(dialGauge)は、悪いからよいまで変化する値(しきい値)の範囲を指定します。ゲージのインジケータではメトリックの現在の値が示される一方、図形によってその値のステータスを評価できます。
例6-84は、MAF AMXファイルで定義されているdialGauge要素を示しています。
例6-85 ダイアル・ゲージの定義
<dvtm:dialGauge id="dialGauge1"
background="#{pageFlowScope.background}"
indicator="#{pageFlowScope.indicator}"
value="#{pageFlowScope.value}"
minValue="#{pageFlowScope.minValue}"
maxValue="#{pageFlowScope.maxValue}"
animationDuration="1000"
animationOnDataChange="auto"
animationOnDisplay="auto"
shortDesc="#{pageFlowScope.shortDesc}"
inlineStyle="#{pageFlowScope.inlineStyle}"
styleClass="#{pageFlowScope.styleClass}"
readOnly="true">
</dvtm:dialGauge>
ダイアル・ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。
このコンポーネントに定義できるdialGaugeの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
例6-86は、暗い背景テーマと、-5000から5000の範囲を設定するカスタム・ティック・ラベルを含む、dialGauge要素の定義を示しています。
例6-86 メトリックとティック・ラベルの定義
<dvtm:dialGauge id="dialGauge1"
background="circleDark"
indicator="needleDark"
value="#{pageFlowScope.value}"
minValue="-5000"
maxValue="5000"
readOnly="false">
<dvtm:metricLabel id="metricLabel1"
scaling="thousand"
labelStyle="font-family: Arial, Helvetica;
font-size: 20; color: white;"/>
<dvtm:tickLabel id="tickLabel1"
scaling="thousand"
labelStyle="font-family: Arial, Helvetica;
font-size: 18; color: white;"/>
</dvtm:dialGauge>
dialGaugeに対して次のamx子要素を定義できます。
showPopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
closePopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
validationBehavior (第6.9項「入力の検証」を参照)
評価ゲージ(ratingGauge)を使用すると、事前定義された視覚スケールに評価を表示したり、その評価を変更できます。デフォルトの評価単位は、星で表されます。ratingGaugeのshape属性を設定することによって、この単位を円、矩形、星形またはひし形として構成できます。
例6-87は、MAF AMXファイルで定義されているratingGauge要素を示しています。
例6-87 評価ゲージの定義
<dvtm:ratingGauge id="ratingGauge1"
value="#{pageFlowScope.value}"
minValue="0"
maxValue="5"
inputIncrement="full"
shortDesc="#{pageFlowScope.shortDesc}"
inlineStyle="#{pageFlowScope.inlineStyle}"
readOnly="true"
shape="circle"
unselectedShape="circle">
</dvtm:ratingGauge>
評価ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。
このコンポーネントに定義できるratingGaugeの属性およびdvtm子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
ratingGaugeに対して次のamx子要素を定義できます。
showPopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
closePopupBehavior (第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
validationBehavior (第6.9項「入力の検証」を参照)
ユーザーが評価ゲージ・コンポーネントに対して実行したアクションに応じて、評価単位(イメージ)は次のいずれかの状態を取得できます。
selected: 単位を選択した場合。
unselected: 単位を選択しなかった場合。
hover: 単位にマウスを置いた場合。
|
注意: タッチ・インタフェースを使用するモバイル・デバイスでは、hover状態はタップしたまま押さえるジェスチャーを通じて呼び出されます。 |
changed: 単位を変更した場合。
各状態は、colorおよびborderColorという2つの属性によって表されます。デフォルトでは、ratingGaugeのshape属性によって、hoverおよびchanged状態の選択内容が決まります。unselected状態は、ratingGaugeのunselectedShape属性を使用して個別に設定できます。
デフォルトCSS設定を上書きすることで、評価ゲージ・コンポーネントをスタイル設定できます。CSSファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
例6-88は、評価ゲージ単位の各状態のcolorおよびborderColorに対するデフォルトCSSスタイル定義を示しています。
例6-88 CSSのスタイル設定
.dvtm-ratingGauge {
}
.dvtm-ratingGauge .dvtm-ratingGaugeSelected {
border-width: 1px;
border-style: solid;
border-color: #FFC61A;
color: #FFBB00;
}
.dvtm-ratingGauge .dvtm-ratingGaugeUnselected {
border-width: 1px;
border-style: solid;
border-color: #D3D3D3;
color: #F4F4F4;
}
.dvtm-ratingGauge .dvtm-ratingGaugeHover {
border-width: 1px;
border-style: solid;
border-color: #6F97CF;
color: #7097CF;
}
.dvtm-ratingGauge .dvtm-ratingGaugeChanged {
border-width: 1px;
border-style: solid;
border-color: #A8A8A8;
color: #FFBB00;
}
チャートおよびゲージには様々な子要素を定義できます。それらの子要素のいくつかを次に示します。
chartDataItem (第6.5.17.1項「チャートのデータ・アイテムの定義」を参照)
xAxis、yAxisおよびy2Axis (第6.5.17.3項「X軸、Y軸およびY2軸の定義」を参照)
legend (第6.5.17.2項「凡例の定義」を参照)
pieDataItem (第6.5.17.4項「円グラフのデータ・アイテムの定義」を参照)
sparkDataItem (第6.5.17.5項「スパーク・チャートのデータ・アイテムの定義」を参照)
threshold (第6.5.17.7項「しきい値の定義」を参照)
funnelDataItem
これらおよびその他の子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
JDeveloperでは、データ視覚化コンポーネントの子コンポーネントは、「コンポーネント」ウィンドウの「MAF AMXデータ視覚化」→「共有子タグ」の下および「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」の下にあります(図6-66を参照)。
チャート・データ・アイテム(chartDataItem)要素は、円グラフを除くすべてのサポートされているチャートでチャート・データ・アイテムが使用するパラメータを指定します。
chartDataItem要素の関連する属性およびチャート自体のdataLabelPosition属性を設定して、特定のチャートのすべてのデータ・ラベルの位置を指定することにより、チャート・データ・アイテムのテキスト表示を有効にし、そのラベル、ラベル位置およびラベル・スタイルを制御できます。
|
注意: スパーク・チャート、円グラフおよびファンネル・チャート・コンポーネントでは、 |
chartDataItem要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
凡例(legend)要素は、凡例パラメータを指定します。
legend要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
X軸(xAxis)およびY軸(yAxis)要素は、チャートのX軸とY軸を定義します。Y2軸(y2Axis)は、オプションのY2軸を定義します。これらの要素は、MAF AMXファイルで次のように宣言されます。
<dvtm:xAxis id="xAxis1" scrolling="on" axisMinValue="0.0" axisMaxValue="50.0" />
xAxis、yAxisおよびy2Axis要素の属性および子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
円グラフのデータ・アイテム(pieDataItem)要素は、円グラフの区分のパラメータを指定します(第6.5.7項「円グラフの作成方法」を参照)。
pieDataItem要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
スパーク・チャートのデータ・アイテム(sparkDataItem)要素は、スパーク・チャート・アイテムのパラメータを指定します(第6.5.9項「スパーク・チャートの作成方法」を参照)。
sparkDataItem要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
ファンネル・データ・アイテム(funnelDataItem)要素は、ファンネル・チャート・アイテムのパラメータを指定します(第6.5.10項「ファンネル・チャートの作成方法」を参照)。
funnelDataItem要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
しきい値(threshold)要素は、ゲージのしきい値範囲を指定します(第6.5.13項「LEDゲージの作成方法」および第6.5.14項「ステータス・メーター・ゲージの作成方法」を参照)。
threshold要素の属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
地理マップ(geographicMap)は、1つのマップに重ね合せた1つ以上のインタラクティブな情報レイヤーでビジネス・データを表します。このコンポーネントを構成して、GoogleマップまたはOracleマップのいずれかをマップ・プロバイダとして 使用できます(第6.5.18.1項「地理プロバイダ情報を指定した地理マップ・コンポーネントの構成」を参照)。
例6-89は、MAF AMXファイルで定義されているgeographicMap要素を示しています。
例6-89 地理マップの定義
<dvtm:geographicMap id="g1" mapType="ROADMAP"
centerX="-98.57" centerY="39.82"
zoomLevel="2" initialZooming="auto">
<dvtm:pointDataLayer id="pdl1"
var="row"
value="#{bindings.locationData.collectionModel}"
dataSelection="multiple"
selectionListener="#{myBean.doSomeGood}">
<dvtm:pointLocation id="pl1" type="address" address="#{row.address}">
<dvtm:marker shortDesc="#{row.shortDesc}" id="m1" />
</dvtm:pointLocation>
</dvtm:pointDataLayer>
</dvtm:geographicMap>
geographicMapに対してpointDataLayer子要素を定義できます。pointDataLayerによって、マップ上の点と関連付けられたデータを表示できます。pointDataLayerは子要素としてpointLocationを持つことができます。pointLocationは、データ・ポイントの位置を決定するデータ・レイヤーのモデル内の列を指定します。これらの位置は、住所またはX座標とY座標で表すことができます。
pointLocationは、子要素としてmarkerを持つことができます。markerは、マップ上のデータ・ポイントに関連付けられた組込み形状またはカスタム形状をスタンプ・アウトするために使用します。markerでは、マーカーとしてレンダリングされるイメージのURIを指定するための一連のプロパティがサポートされています。マーカーは子要素としてconvertNumberを持つことができます(第6.3.25項「数値の変換方法」を参照)。
geographicMap要素の属性およびその子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
地理マップ・コンポーネントでは、タッチ・ジェスチャーを使用したピンの挿入(マップ上での点の作成)が可能です。この機能を構成するには、mapInputListenerを使用します。詳細は、第6.5.20項「マップ・コンポーネントでのイベントの使用方法」を参照してください。
基礎となるマップに特定のプロバイダ(GoogleまたはOracle)を使用するように地理マップ・コンポーネントを構成するには、アプリケーションのadf-config.xmlファイルに名前と値のペアとして次のプロパティを設定します。
mapProvider: oraclemapsまたはgooglemapsを指定します。
geoMapKey: mapProviderがgooglemapsに設定されている場合は、ライセンス・キーを指定します。
geoMapClientId: mapProviderがgooglemapsに設定されている場合は、Googleマップ・ビジネス・ライセンスのクライアントIDを指定します。
mapViewerUrl: mapProviderがoraclemapsに設定されている場合は、Oracleマップのマップ・ビューアURLを指定します。
baseMap: mapProviderがoraclemapsに設定されている場合は、Oracleマップとともに使用するベース・マップを指定します。
|
注意: Googleマップを使用するように地理マップ・コンポーネントを構成するには、Googleから該当するライセンスを取得する必要があります。 |
例6-90は、Googleマップ用の構成を示しています。
例6-90 Googleマップの構成
<adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties"> <adf-property name="mapProvider" value="googlemaps"/> <adf-property name="geoMapKey" value="your key"/> </adf-properties-child>
例6-91は、Oracleマップの構成を示しています。
例6-91 Oracleマップの構成
<adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties">
<adf-property name="mapProvider" value="oraclemaps"/>
<adf-property name="mapViewerUrl"
value="http://elocation.oracle.com/mapviewer"/>
<adf-property name="baseMap" value="ELOCATION_MERCATOR.WORLD_MAP"/>
</adf-properties-child>
マップ・プロバイダ情報を指定しない場合、MAF AMX地理マップ・コンポーネントは、そのマップとしてGoogleマップを使用しますがライセンス・キーはありません。
adf-config.xmlファイルの詳細は、次を参照してください:
テーマ・マップ(thematicMap)では、ビジネス・データをスタイル設定された領域内のパターンまたは関連付けられたマーカーとして表します。テーマ・マップでは、地理的な詳細なしで、データに焦点を合せます。
例6-92は、MAF AMXファイルで定義されているthematicMap要素およびその子を示しています。
例6-92 テーマ・マップの定義
<dvtm:thematicMap id="tm1"
animationOnDisplay="#{pageFlowScope.animationOnDisplay}"
animationOnMapChange="#{pageFlowScope.animationOnMapChange}"
animationDuration="#{pageFlowScope.animationDuration}"
basemap="#{pageFlowScope.basemap}"
tooltipDisplay="#{pageFlowScope.tooltipDisplay}"
inlineStyle="#{pageFlowScope.inlineStyle}"
zooming="#{pageFlowScope.zooming}"
panning="#{pageFlowScope.panning}"
initialZooming="#{pageFlowScope.initialZooming}">
<dvtm:areaLayer id="areaLayer1"
layer="#{pageFlowScope.layer}"
animationOnLayerChange=
"#{pageFlowScope.animationOnLayerChange}"
areaLabelDisplay="#{pageFlowScope.areaLabelDisplay}"
labelType="#{pageFlowScope.labelType}"
areaStyle="background-color"
rendered="#{pageFlowScope.rendered}">
<dvtm:areaDataLayer id="areaDataLayer1"
animationOnDataChange=
"#{pageFlowScope.dataAnimationOnDataChange}"
animationDuration=
"#{pageFlowScope.dataAnimationDuration}"
dataSelection="#{pageFlowScope.dataSelection}"
var="row"
value="#{bindings.thematicMapData.collectionModel}">
<dvtm:areaLocation id="areaLoc1" name="#{row.name}">
<dvtm:area action="sales" id="area1" shortDesc="#{row.name}">
<amx:setPropertyListener id="spl1"
to=
"#{DvtProperties.areaChartProperties.dataSelection}"
from="#{row.name}"
type="action"/>
<dvtm:attributeGroups id="ag1" type="color" value="#{row.cat1}" />
</dvtm:area>
</dvtm:areaLocation>
</dvtm:areaDataLayer>
</dvtm:areaLayer>
<dvtm:legend id="l1" position="end">
<dvtm:legendSection id="ls1" source="ag1"/>
</dvtm:legend>
</dvtm:thematicMap>
markerZoomBehavior属性を使用すると、マップがズームされたときにテーマ・マップのマーカーのスケーリングを有効にできます。マーカーのrotation属性を設定することでマーカーの回転を有効にできます。この属性の値は、マーカーが、イメージの中心を基準として時計回りに回転する角度を表します。
MAF AMXテーマ・マップでは、次の拡張機能をサポートしています。
カスタム・マーカー(第6.5.19.1項「カスタム・マーカーの定義」を参照)
領域の分離(第6.5.19.3項「分離領域の定義」を参照)
初期ズーム(第6.5.19.4項「初期ズームの有効化」を参照)
カスタム・ベース・マップ(第6.5.19.5項「カスタム・ベース・マップの定義」を参照)
thematicMap要素の属性およびその子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
MAF AMXテーマ・マップでは、MAF AMXイメージ・コンポーネントはサポートされていません。マップのpointLocation内でイメージを使用するには、pointLocationのmarker子要素で、そのsource属性を使用してイメージを指定します。source属性がマーカーに対して設定されている場合、そのshape属性はMAF AMXによって無視されます。
sourceHover、sourceSelectedおよびsourceHoverSelected属性で、ホバーおよび選択効果のイメージを指定できます。これらの1つが指定されていない場合、その特定のマーカー状態に対してはsource属性によって指定されているイメージが使用されます。sourceSelectedが指定されている場合、sourceHoverSelectedが指定されていないときはその値が使用されます。イメージは、PNG、JPG、SVGなどモバイル・デバイスのブラウザでサポートされている任意のフォーマットで構いません。
リージョンの枠は、常にデータの地理的位置を示す必要はありません。かわりに、テーマ・マップ・コンポーネントには領域内の中心にイメージまたはマーカーを配置するオプションがあるため、リージョンの枠が描画されない非表示の領域レイヤーを定義できます。
非表示の領域レイヤーを定義するには、background-colorおよびborder-colorのCSS値を受け入れる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では、カスタム・ベース・マップの次のものはサポートされていません。
|
カスタム・ベース・マップを作成するには、メタデータ・ファイルの定義を指す領域レイヤーを指定します(例6-93を参照)。基本的なカスタム・ベース・マップを定義するには、背景レイヤーおよびポインタ・データ・レイヤーを指定します。MAF AMXゲージ・コンポーネントと同様に、メタデータ・ファイルで、画面解像度および表示方向ごとに異なるイメージを指定できます。ゲージタイプ・コンポーネントと同様に、テーマ・マップでは、画面解像度および方向に基づいてレイヤーに適切なイメージが選択されます。表示方向は左から右です。
例6-93 イメージのリストを含むメタデータ・ファイル
<basemap id="car" >
<layer id="exterior" >
<image source="/maps/car-800x800.png"
width="2560"
height="1920" />
<image source="/maps/car-200x200.png"
width="640"
height="480" />
</layer>
</basemap>
例6-94は、点によってカスタム領域レイヤーを宣言するMAF AMXファイルを示しています。このMAF AMXファイルは、使用可能なイメージのリストを含む例6-93に示すメタデータ・ファイルを指しています。
例6-94 点によるカスタム領域レイヤーの宣言
<dvtm:thematicMap id="tm1" basemap="car" source="customBasemaps/map1.xml" >
<dvtm:areaLayer id="al1" layer="exterior" >
<dvtm:pointDataLayer id="pdl1"
var="row"
value="{bindings.thematicMapData.collectionModel}" >
<dvtm:pointLocation id="pl1"
type="pointXY"
pointX="#{row.x}"
pointY="#{row.y}" >
<dvtm:marker id="m1" fillColor="#FFFFFF" shape="circle" />
</dvtm:pointLocation>
</dvtm:pointDataLayer>
</dvtm:areaLayer>
</dvtm:thematicMap>
前述の例では、ベース・マップIDはthematicMapのbasemap属性と照合され、レイヤーIDはareaLayerのlayer属性と照合されます。点は(前述のベース・マップの場合と同様に)X座標とY座標で定義され、データが更新されたときに変更される可能性がある動的な点に対応します。
例6-95は、点によってカスタム領域レイヤーを宣言するもう1つの方法を示しています。この例では、pointDataLayerは、thematicMapの直接の子です。方法は異なりますが、例6-95では、例6-94で示した宣言と同じ結果がレンダリングされます。
例6-95 直接の子要素を使用した点によるカスタム領域レイヤーの宣言
<dvtm:thematicMap id="demo1" basemap="car" source="customBasemaps/map1.xml" >
<dvtm:areaLayer id="al1" layer="exterior" />
<dvtm:pointDataLayer id="pdl1"
var="row"
value="{bindings.thematicMapData.collectionModel}" >
<dvtm:pointLocation id="pl1"
type="pointXY"
pointX="#{row.x}"
pointY="#{row.y}" >
<dvtm:marker id="m1" fillColor="#FFFFFF" shape="circle" />
</dvtm:pointLocation>
</dvtm:pointDataLayer>
</dvtm:thematicMap>
静的な点を含むカスタム・ベース・マップを作成するには、例6-96に示すメタデータ・ファイルで名前で点を指定します。このプロセスは、事前定義済ベース・マップに市区町村のマーカーを追加する場合に類似しています。
例6-96 名前付きの点のリストを含むメタデータ・ファイル
<basemap id="car" >
<layer id="exterior" >
<image source="/maps/car-800x800.png"
width="2560"
height="1920" />
<image source="/maps/car-800x800-rtl.png"
width="2560"
height="1920"
dir="rtl" />
<image source="/maps/car-200x200.png"
width="640"
height="480" />
<image source="/maps/car-200x200-rtl.png"
width="640"
height="480"
dir="rtl" />
</layer>
<points >
<point name="hood" x="219.911" y="329.663" />
<point name="frontLeftTire" x="32.975" y="32.456" />
<point name="frontRightTire" x="10.334" y="97.982" />
</points>
</basemap>
名前付きの点のXおよびY位置は、layerの最初のimage要素のイメージ・ディメンションにマップされると想定されます。
|
注意: これらの点はベース・マップ内のスコープでグローバルで、すべてのレイヤーに適用されるため、特定のレイヤーおよびそのイメージに点を定義することはできません。 |
例6-97は、名前付きの点によってカスタム領域レイヤーを宣言するMAF AMXファイルを示しています。このMAF AMXファイルは、点とそれらの名前のリストを含む例6-93に示すメタデータ・ファイルを指しています。
例6-97 名前付きの点によるカスタム領域レイヤーの宣言
<dvtm:thematicMap id="demo1" basemap="car" source="customBasemaps/map1.xml" >
<dvtm:areaLayer id="al1" layer="exterior" />
<dvtm:pointDataLayer id="pdl1"
var="row"
value="#{bindings.thematicMapData.collectionModel}" >
<dvtm:pointLocation id="pl1" type="pointName" pointName="#{row.name}" >
<dvtm:marker id="m1" fillColor="#FFFFFF" shape="circle" />
</dvtm:pointLocation>
</dvtm:pointDataLayer>
</dvtm:thematicMap>
MAF AMXのデータ視覚化では、markerのactionListener属性はサポートされていません。かわりに、action属性を使用することで同じ機能を実現できます。
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、テーマ・マップ・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
例6-98は、テーマ・マップ・コンポーネントのデフォルトCSSスタイルを示しています。
例6-98 CSSのスタイル設定
.dvtm-thematicMap {
background-color: #FFFFFF;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.dvtm-areaLayer {
background-color: #B8CDEC;
border-color: #FFFFFF;
border-width: 0.5px;
/* border style and color must be set when setting border width */
border-style: solid;
color: #000000;
font-family: tahoma, sans-serif;
font-size: 13px;
font-weight: bold;
font-style: normal;
}
.dvtm-area {
border-color: #FFFFFF;
border-width: 0.5px;
/* border style and color must be set when setting border width */
border-style: solid;
}
.dvtm-marker {
background-color: #61719F;
opacity: 0.7;
color: #FFFFFF;
font-family: tahoma, sans-serif;
font-size: 13px;
font-weight: bold;
font-style: normal;
border-style: solid
border-color: #FFCC33
border-width: 12px
}
スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。例6-99は、CSSを使用しないでテーマ・マップ・コンポーネントにカスタム・スタイルを適用する方法を示しています。
例6-99 非CSSカスタム・スタイル設定
my-custom.js:
CustomThematicMapStyle = {
// selected area properties
'areaSelected': {
// selected area border color
'borderColor': "#000000",
// selected area border width
'borderWidth': '1.5px'
},
// area properties on mouse hover
'areaHover': {
// area border color on hover
'borderColor': "#FFFFFF",
// area border width on hover
'borderWidth': '2.0px'
},
// marker properties
'marker': {
// separator upper color
'scaleX': 1.0,
// separator lower color
'scaleY': 1.0,
// should display title separator
'type': 'circle'
},
// thematic map legend properties
'legend': {
// legend position, such as none, auto, start, end, top, bottom
'position': "auto"
}
};
})();
CustomThematicMapStyleオブジェクトの名前およびプロパティ名は変更できません。かわりに、特定のプロパティ値を、アプリケーションのニーズに合わせて変更できます。カスタムCSSおよびJavaScriptファイルをアプリケーションに追加する方法の詳細は、第4.10章「アプリケーション機能のコンテンツ・タイプの定義」を参照してください。
attributeGroups属性がテーマ・マップ・コンポーネント用に定義されている場合、CustomThematicMapStyleを使用して、そのコンポーネントの図形と色のデフォルト・セットを定義できます。この場合、CustomThematicMapStyleオブジェクトの構造は、例6-100のようになっている必要があります。styleDefaultsは、次のフィールドを含むネストされたオブジェクトです。
colors: 領域とマーカーに使用される色のセットを表します。
shapes: マーカーに使用される図形のセットを表します。
MapBoundsChangeEventを使用して、地理マップ・コンポーネントでの次のマップ・ビュー・プロパティの変更を処理できます。
ズーム・レベルの変更。
マップ境界の変更。
マップ中心の変更。
これらの変更が発生した場合、新しいマップ・ビュー・プロパティ値がロードされたイベントがコンポーネントによって起動されます。
地理マップの属性としてmapBoundsChangeListenerを定義できます。
地理およびテーマ・マップ・コンポーネントで、MapInputEventを使用してタップおよびマウス・クリックなどのエンド・ユーザー・アクションを処理できます。これらのアクションが発生すると、マップの緯度および経度の情報およびアクションのタイプ(たとえば、マウス・ボタンが押された、マウス・ボタンが放された、クリックなど)がロードされたイベントが、コンポーネントによって起動されます。
地理マップ・コンポーネントの属性としてmapInputListenerを定義できます。
詳細は、次を参照してください。
Oracle Mobile Application Framework Oracle Fusion Middleware Java APIリファレンス
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
ツリーマップ(treemap)は、ノード(treemapNode)のサイズと色で表された、2つのディメンションにまたがる階層データを表示します。
「コンポーネント」ウィンドウで、「ツリーマップ」は「MAF AMXデータ視覚化」→「共通」→「その他」の下にあり、その子コンポーネントは「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」→「サンバーストおよびツリーマップ」および「MAF AMXデータ視覚化」→「共有子タグ」の下にあります(図6-90を参照)。
例6-101は、MAF AMXファイルで定義されているtreemap要素およびその子を示しています。
例6-101 ツリーマップの定義
<dvtm:treemap id="treemap1"
value="#{bindings.treemapData.collectionModel}"
var="row"
animationDuration="#{pageFlowScope.animationDuration}"
animationOnDataChange="#{pageFlowScope.animationOnDataChange}"
animationOnDisplay="#{pageFlowScope.animationOnDisplay}"
layout="#{pageFlowScope.layout}"
nodeSelection="#{pageFlowScope.nodeSelection}"
rendered="#{pageFlowScope.rendered}"
emptyText="#{pageFlowScope.emptyText}"
inlineStyle="#{pageFlowScope.inlineStyle}"
sizeLabel="#{pageFlowScope.sizeLabel}"
styleClass="dvtm-gallery-component"
colorLabel="#{pageFlowScope.colorLabel}"
sorting="#{pageFlowScope.sorting}"
selectedRowKeys="#{pageFlowScope.selectedRowKeys}"
isolatedRowKey="#{pageFlowScope.isolatedRowKey}"
legendSource="ag1">
<dvtm:treemapNode id="node1"
fillPattern="#{pageFlowScope.fillPattern}"
label="#{row.label}"
labelDisplay="#{pageFlowScope.labelDisplay}"
value="#{row.marketShare}"
labelHalign="#{pageFlowScope.labelHalign}"
labelValign="#{pageFlowScope.labelValign}">
<dvtm:attributeGroups id="ag1"
type="color"
value="#{row.deltaInPosition}"
attributeType="continuous"
minLabel="-1.5%"
maxLabel="+1.5%"
minValue="-1.5"
maxValue="1.5" >
<amx:attribute id="a1" name="color1" value="#ed6647" />
<amx:attribute id="a2" name="color2" value="#f7f37b" />
<amx:attribute id="a3" name="color3" value="#68c182" />
</dvtm:attributeGroups>
</dvtm:treemapNode>
</dvtm:treemap>
attributeGroups要素のattributeType属性をcontinuousに設定することで、色の濃さが指定された範囲内での相対値を表すグラデーション色を使用した、ツリーマップ・アイテムに関連付けられた値の視覚化を有効にできます。
treemap要素の属性およびその子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、ツリーマップ・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
例6-102は、オーバーライド可能なツリーマップ・コンポーネントのデフォルトCSSスタイルを示しています。
例6-102 ツリーマップのデフォルトCSSスタイル設定
.dvtm-treemap {
border-style: solid;
border-color: #E2E8EE;
border-radius: 3px;
background-color: #EDF2F7;
...
}
例6-103は、オーバーライド可能なツリーマップ・ノードのデフォルトCSSスタイルを示しています。
例6-103 ツリーマップ・ノードのデフォルトCSSスタイル設定
.dvtm-treemapNodeSelected {
// Selected node outer border color
border-top-color: #E2E8EE;
// Selected node inner border color
border-bottom-color: #EDF2F7;
}
例6-104は、カスタムCSSを使用してスタイルを設定できる、ツリーマップ・ノードのlabelテキストCSSプロパティを示しています。
例6-104 ラベルのCSSのスタイル設定
.dvtm-treemapNodeLabel {
font-family: Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #7097CF;
...
}
スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。例6-105は、CSSを使用しないでツリーマップ・コンポーネントにカスタム・スタイルを適用する方法を示しています。
例6-105 非CSSカスタム・スタイル設定
my-custom.js:
window["CustomTreemapStyle"] = {
// treemap properties
"treemap" : {
// Specifies the animation effect when the data changes - none, auto
"animationOnDataChange": "auto",
// Specifies the animation that is shown on initial display - none, auto
"animationOnDisplay": "auto",
// Specifies the animation duration in milliseconds
"animationDuration": "500",
// The text of the component when empty
"emptyText": "No data to display",
// Specifies the layout of the treemap -
// squarified, sliceAndDiceHorizontal, sliceAndDiceVertical
"layout": "squarified",
// Specifies the selection mode - none, single, multiple
"nodeSelection": "multiple",
// Specifies whether or not the nodes are sorted by size - on, off
"sorting": "on"
},
// treemap node properties
"node" : {
// Specifies the label display behavior for nodes - node, off
"labelDisplay": "off",
// Specifies the horizontal alignment for labels displayed
// within the node - center, start, end
"labelHalign": "end",
// Specifies the vertical alignment for labels displayed
// within the node - center, top, bottom
"labelValign": "center"
},
}
サンバースト(sunburst)は、ノード(sunburstNode)のサイズと色で表された、2つのディメンションにまたがる階層データを表示します。
「コンポーネント」ウィンドウで、「サンバースト」は「MAF AMXデータ視覚化」→「共通」→「その他」の下にあり、その子コンポーネントは「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」→「サンバーストおよびツリーマップ」および「MAF AMXデータ視覚化」→「共有子タグ」の下にあります(図6-90「「コンポーネント」ウィンドウのツリーマップおよびその他の拡張コンポーネント」を参照)。
例6-106は、MAF AMXファイルで定義されているsunburst要素およびその子を示しています。
例6-106 サンバーストの定義
<dvtm:sunburst id="sunburst1"
value="#{bindings.sunburstData.collectionModel}"
var="row"
animationDuration="#{pageFlowScope.animationDuration}"
animationOnDataChange="#{pageFlowScope.animationOnDataChange}"
animationOnDisplay="#{pageFlowScope.animationOnDisplay}"
colorLabel="#{pageFlowScope.colorLabel}"
emptyText="#{pageFlowScope.emptyText}"
inlineStyle="#{pageFlowScope.inlineStyle}"
nodeSelection="#{pageFlowScope.nodeSelection}"
rendered="#{pageFlowScope.rendered}"
rotation="#{pageFlowScope.rotation}"
shortDesc="#{pageFlowScope.shortDesc}"
sizeLabel="#{pageFlowScope.sizeLabel}"
sorting="#{pageFlowScope.sorting}"
rotationAngle="#{pageFlowScope.startAngle}"
styleClass="#{pageFlowScope.styleClass}"
legendSource="ag1">
<dvtm:sunburstNode id="node1"
fillPattern="#{pageFlowScope.fillPattern}"
label="#{row.label}"
labelDisplay="#{pageFlowScope.labelDisplay}"
value="#{pageFlowScope.showRadius ? 1 : row.marketShare}"
labelHalign="#{pageFlowScope.labelHalign}"
radius="#{pageFlowScope.showRadius ? row.booksCount : 1}">
<dvtm:attributeGroups id="ag1"
type="color"
value="#{row.deltaInPosition}"
attributeType="continuous"
minLabel="-1.5%"
maxLabel="+1.5%"
minValue="-1.5"
maxValue="1.5">
<amx:attribute id="a1" name="color1" value="#ed6647" />
<amx:attribute id="a2" name="color2" value="#f7f37b" />
<amx:attribute id="a3" name="color3" value="#68c182" />
</dvtm:attributeGroups>
</dvtm:sunburstNode>
</dvtm:sunburst>
attributeGroups要素のattributeType属性をcontinuousに設定することで、色の濃さが指定された範囲内での相対値を表すグラデーション色を使用した、サンバースト・アイテムに関連付けられた値の視覚化を有効にできます。
sunburst要素の属性およびその子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、サンバースト・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
例6-107は、オーバーライド可能なサンバースト・コンポーネントのデフォルトCSSスタイルを示しています。
例6-107 サンバーストのデフォルトCSSスタイル設定
.dvtm-sunburst {
border-style: solid;
border-color: #E2E8EE;
border-radius: 3px;
background-color: #EDF2F7;
...
}
例6-108は、オーバーライド可能なサンバースト・ノードのデフォルトCSSスタイルを示しています。
例6-108 サンバースト・ノードのデフォルトCSSスタイル設定
.dvtm-sunburstNode {
// Node border color
border-color: "#000000";
}
.dvtm-sunburstNodeSelected {
// Selected node border color
border-color: "#000000";
}
例6-109は、カスタムCSSを使用してスタイルを設定できる、サンバースト・ノードのlabelテキストCSSプロパティを示しています。
例6-109 ラベルのCSSのスタイル設定
.dvtm-sunburstNodeLabel {
font-family: Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-style: normal;
color: #7097CF;
...
}
スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。例6-110は、CSSを使用しないでサンバースト・コンポーネントにカスタム・スタイルを適用する方法を示しています。
例6-110 非CSSカスタム・スタイル設定
my-custom.js:
window["CustomSunburstStyle"] = {
// sunburst properties
"sunburst" : {
// Specifies whether or not the client side rotation is enabled - on, off
"rotation": "off",
// The text of the component when empty
"emptyText": "No data to display",
// Specifies the selection mode - none, single, multiple
"nodeSelection": "multiple",
// Animation effect when the data changes - none, auto
"animationOnDataChange": "auto",
// Specifies the animation that is shown on initial display - none, auto
"animationOnDisplay": "auto",
// Specifies the animation duration in milliseconds
"animationDuration": "500",
// Specifies the starting angle of the sunburst
"startAngle": "90",
// Specifies whether or not the nodes are sorted by size - on, off
"sorting": "on"
},
// sunburst node properties
"node" : {
// Specifies whether or not the label is displayed - on, off
"labelDisplay": "off"
}
}
時系列(timeline)はズームに使用できる対話型コンポーネントであり、これを使用して、時系列順でイベントを表示したり、定義されているが調整可能な時間範囲内で前後に移動することができます。
イベントは、タイトル、説明および継続時間の塗りつぶしの色を含む、時系列アイテム・コンポーネント(timelineItem)で表されます。2つの時系列を構成して2系列のイベントを表示し、関連する情報を並べて比較できます。
|
注意: MAF AMXは、時系列に似たコンポーネントで多くの場合使用可能な次の機能、子要素およびプロパティをサポートしていません。
|
「コンポーネント」ウィンドウで、「時系列」は「MAF AMXデータ視覚化」→「共通」→「その他」の下にあり、その子コンポーネントは「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」→「時系列」および「MAF AMXデータ視覚化」→「共有子タグ」の下にあります(図6-90「「コンポーネント」ウィンドウのツリーマップおよびその他の拡張コンポーネント」を参照)。
例6-111は、MAF AMXファイルで定義されているtimeline要素およびその子を示しています。
例6-111 時系列の定義
<dvtm:timeline id="tl"
itemSelection="#{pageFlowScope.itemSelection}"
startTime="#{pageFlowScope.startTime}"
endTime="#{pageFlowScope.endTime}">
<dvtm:timelineSeries id="ts1"
label="#{pageFlowScope.s1Label}"
value="#{bindings.series1Data.collectionModel}"
var="row"
selectionListener=
"#{PropertyBean.timelineSeries1SelectionHandler}">
<dvtm:timelineItem id="ti1"
startTime="#{row.startDate}"
endTime="#{row.endDate}"
title="#{row.title}"
description="#{row.description}"
durationFillColor="#AAAAAA"/>
</dvtm:timelineSeries>
<dvtm:timeAxis id="ta1" scale="#{pageFlowScope.scale}"/>
</dvtm:timeline>
durationFillColor属性を使用して、特定の時系列アイテムの継続時間バーの塗りつぶしの色を制御できます。
時系列で同時に2つのタイム・スケールを表示するには、2番目の軸のスケールを決定する時間軸のscale属性を使用します。
時系列は、水平および垂直にスクロールできます。コンポーネントがスクロール可能である場合(つまり、表示されている表示領域の外側にデータが含まれている場合)、このことはスクロールの方向を指す矢印によって示されます。
timeline要素の属性およびその子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、時系列コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第6.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
オーバーライド可能な次のCSSスタイル・クラスが、時系列およびその子コンポーネントに定義されています。
.dvtm-timeline
サポートされるプロパティ: all
.timelineSeries-backgroundColor
サポートされるプロパティ: color
.timelineSeries-labelStyle
サポートされるプロパティ: font-family、font-size、font-weight、color、font-style
.timelineItem-backgroundColor
サポートされるプロパティ: color
.timelineItem-selectedBackgroundColor
サポートされるプロパティ: color
.timelineItem-borderColor
サポートされるプロパティ: color
.timelineItem-selectedBorderColor
サポートされるプロパティ: color
.timelineItem-borderWidth
サポートされるプロパティ: width
.timelineItem-feelerColor
サポートされるプロパティ: color
.timelineItem-selectedFeelerColor
サポートされるプロパティ: color
.timelineItem-feelerWidth
サポートされるプロパティ: width
.timelineItem-descriptionStyle
- サポートされるプロパティ: font-family、font-size、font-weight、color、font-style
.timelineItem-titleStyle
- サポートされるプロパティ: font-family、font-size、font-weight、color、font-style
.timeAxis-separatorColor
サポートされるプロパティ: color
.timeAxis-backgroundColor
サポートされるプロパティ: color
.timeAxis-borderColor
サポートされるプロパティ: color
.timeAxis-borderWidth
サポートされるプロパティ: width
.timeAxis-labelStyle
- サポートされるプロパティ: font-family、font-size、font-weight、color、font-style
例6-112は、時系列コンポーネントのデフォルト・スタイルをオーバーライドするために使用できるカスタムJavaScriptファイルを示しています。
例6-112 カスタムJavaScriptファイル
// Custom timeline style definition with listing
// of all properties that can be overriden
window["CustomTimelineStyle"] = {
// Determines if items in the timeline are selectable
"itemSelection": none
// Timeline properties
"timelineSeries" : {
// Duration bars color palette
"colors" : [comma separated list of hex colors]
}
}
NBox (nBox)コンポーネントは、2つのディメンションにまたがるデータを表し、各ディメンションは複数の範囲に分割され、その交点が各データ・アイテムが配置される個別のセルになります。
「コンポーネント」ウィンドウで、「NBox」は「MAF AMXデータ視覚化」→「共通」→「その他」の下にあり、その子コンポーネントは「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」→「NBox」および「MAF AMXデータ視覚化」→「共有子タグ」の下にあります(図6-90「「コンポーネント」ウィンドウのツリーマップおよびその他の拡張コンポーネント」を参照)。
例6-111は、MAF AMXファイルで定義されているnBox要素およびその子を示しています。
例6-113 NBoxの定義
<dvtm:nBox id="nBox1"
var="item"
value="#{bindings.NBoxNodesDataList.collectionModel}"
columnsTitle="#{pageFlowScope.columnsTitle}"
emptyText="#{pageFlowScope.emptyText}"
groupBy="#{pageFlowScope.groupBy}"
groupBehavior="#{pageFlowScope.groupBehavior}"
highlightedRowKeys="#{pageFlowScope.showHighlightedNodes ?
pageFlowScope.highlightedRowKeys : ''}"
inlineStyle="#{pageFlowScope.inlineStyle}"
legendDisplay="#{pageFlowScope.legendDisplay}"
maximizedColumn="#{pageFlowScope.maximizedColumn}"
maximizedRow="#{pageFlowScope.maximizedRow}"
nodeSelection="#{pageFlowScope.nodeSelection}"
rowsTitle="#{pageFlowScope.rowsTitle}"
selectedRowKeys="#{pageFlowScope.selectedRowKeys}"
shortDesc="#{pageFlowScope.shortDesc}">
<amx:facet name="rows">
<dvtm:nBoxRow value="low" label="Low" id="nbr1"/>
<dvtm:nBoxRow value="medium" label="Med" id="nbr2"/>
<dvtm:nBoxRow value="high" label="High" id="nbr3"/>
</amx:facet>
<amx:facet name="columns">
<dvtm:nBoxColumn value="low" label="Low" id="nbc2"/>
<dvtm:nBoxColumn value="medium" label="Med" id="nbc1"/>
<dvtm:nBoxColumn value="high" label="High" id="nbc3"/>
</amx:facet>
<amx:facet name="cells">
<dvtm:nBoxCell row="low"
column="low"
label=""
background="rgb(234,153,153)"
id="nbc4"/>
<dvtm:nBoxCell row="medium"
column="low"
label=""
background="rgb(234,153,153)"
id="nbc5"/>
<dvtm:nBoxCell row="high"
column="low"
label=""
background="rgb(159,197,248)"
id="nbc6"/>
<dvtm:nBoxCell row="low"
column="medium"
label=""
background="rgb(255,229,153)"
id="nbc7"/>
<dvtm:nBoxCell row="medium"
column="medium"
label=""
background="rgb(255,229,153)"
id="nbc8"/>
<dvtm:nBoxCell row="high"
column="medium"
label=""
background="rgb(147,196,125)"
id="nbc9"/>
<dvtm:nBoxCell row="low"
column="high"
label=""
background="rgb(255,229,153)"
id="nbc10"/>
<dvtm:nBoxCell row="medium"
column="high"
label=""
background="rgb(147,196,125)"
id="nbc11"/>
<dvtm:nBoxCell row="high"
column="high"
label=""
background="rgb(147,196,125)"
id="nbc12"/>
</amx:facet>
<dvtm:nBoxNode id="nbn1"
row="#{item.row}"
column="#{item.column}"
label="#{item.name}"
labelStyle="font-style:italic"
secondaryLabel="#{item.job}"
secondaryLabelStyle="font-style:italic"
shortDesc="#{item.name + ': ' + item.job}">
<dvtm:attributeGroups id="ag1"
type="indicatorShape"
value="#{item.indicator1}"
rendered="#{pageFlowScope.showIndicator}"/>
<dvtm:attributeGroups id="ag2"
type="indicatorColor"
value="#{item.indicator2}"
rendered="#{pageFlowScope.showIndicator}"/>
<dvtm:attributeGroups id="ag3"
type="color"
value="#{item.group}"
rendered="#{pageFlowScope.showColors}"/>
</dvtm:nBoxNode>
</dvtm:nBox>
nBox要素の属性およびその子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
マップ・コンポーネント、サンバースト、ツリーマップ、時系列およびNBoxの様々な子要素を定義できます。使用可能な子要素およびその属性の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
JDeveloperでは、マップ、サンバースト、ツリーマップ、時系列およびNBoxの子コンポーネントは、「コンポーネント」ウィンドウの「MAF AMXデータ視覚化」→「その他のタイプ固有の子タグ」および「MAF AMXデータ視覚化」→「共有子タグ」の下にあります(図6-95を参照)。
「データ・コントロール」ウィンドウから挿入されたデータ・コレクションを使用して、データバインドされたデータ視覚化コンポーネントを宣言的に作成できます(第5.3.2.4項「データ・コントロールのビューへの追加」を参照)。図6-109に示す「コンポーネント・ギャラリ」ダイアログで、いくつかのデータ視覚化コンポーネント・カテゴリ、タイプおよびレイアウトのオプションの中から選択できます。
|
注意: いくつかのデータ視覚化コンポーネント・タイプには、特別な種類のデータが必要です。選択したコンポーネントのタイプの表示に十分なデータが含まれていないデータ・コレクションにコンポーネントをバインドすると、コンポーネントは表示されず、データが不十分であることを示すメッセージが表示されます。 |
「コンポーネント・ギャラリ」の表示をトリガーするには、「データ・コントロール」ウィンドウからMAF AMXページにコレクションをドラッグ・アンド・ドロップし、表示されるポップアップ・メニューから「MAFチャート」、「MAFゲージ」または「MAFテーマ・マップ」のいずれかを選択します(図6-99を参照)。
「コンポーネント・ギャラリ」から新しいデータバインド・コンポーネントのカテゴリ、タイプおよびレイアウトを選択し、「OK」をクリックすると、データ・バインディング・ダイアログを使用してデータ視覚化コンポーネントのデータ・コレクション属性のバインディングを開始できます。ダイアログの名前と、入力フィールド・ラベルは、選択したデータ視覚化コンポーネントのカテゴリおよびタイプによって異なります。図6-100に示すように、たとえば、カテゴリとして「横棒」を、タイプとして「棒」を選択した場合、表示されるダイアログの名前は「モバイル横棒チャートの作成」で、入力フィールドには「棒」というラベルがつけられます。
データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さなどのマーカーまたは散布図のポイントで示される数字です。データ値のカテゴリは、軸ラベルとして表されるメンバーです。バインディング内で属性が担うロール(データ値またはID)は、データ型(グラフには数値データ値が必要)およびマップされる場所(棒やX軸など)の両方によって決まります。
「コンポーネント・ギャラリ」を使用してデータバインド・ゲージ・コンポーネントを作成し、カテゴリとして「LED」を選択し、タイプとして「星形LED」を選択した場合、表示されるダイアログの名前は図6-101に示すように「モバイル星形LEDゲージの作成」になります。
データバインドされたテーマ・マップ・コンポーネントを作成する場合に、「コンポーネント・ギャラリ」を使用すると、選択内容に関係なく、表示されるダイアログの名前は「データ・レイヤーの作成」になりますが、表示されるフィールドは「コンポーネント・ギャラリ」での選択内容に応じて異なります。たとえば、ベース・マップとして「すべてのユーザー」を選択し、領域レイヤーとして「世界(大陸)」を選択した場合、図6-101に示すダイアログが開きます。
1つ以上のデータ・バインディング・ダイアログの完了後は、「プロパティ」ウィンドウを使用してコンポーネント属性の設定を指定できます。コンポーネントと関連付けられた子要素を使用して、さらにカスタマイズすることもできます(第6.5.17項「チャートおよびゲージ・コンポーネントの子要素の定義方法」を参照)。
コレクションをMAF AMXページにドロップすると表示されるポップアップ・メニューから「MAF地理マップ」、「MAFサンバースト」、「MAF NBox」、「MAFタイムライン」または「MAFツリーマップ」を選択すると、次のいずれかのダイアログが表示されます。
「NBoxの作成」ダイアログを完了するには、まず行および列の数を定義します。次に図6-108に示すように、ボックス上のセルを選択して、ダイアログの下部で行または列全体の値を指定できます。
「次へ」をクリックして一連のダイアログのすべてのページを完了すると、NBoxコンポーネントが作成されます。
各ダイアログの各フィールドの値の詳細は、「ヘルプ」をクリックするか[F1]を押してオンライン・ヘルプを参照してください。
MAFでは、CSSを使用してUIコンポーネントにスタイルを適用できます。
次の属性を設定することで、UIコンポーネントをスタイル設定できます。
styleClass属性は、レイアウト・コンポーネントに対して使用するCSSスタイル・クラスを定義します。
<amx:panelPage styleClass="#{pageFlowScope.pStyleClass}">
MAF AMXページまたはスキニングCSSファイルでレイアウト、コマンドおよび入力コンポーネントのスタイル・クラスを定義できます。その場合、特定のスタイルがMAF AMXアプリケーション機能内のすべてのコンポーネントに適用されます(第6.6.2項「スキニングに関する必知事項」を参照)。かわりに、MAFによって提供されるパブリック・スタイル・クラスを使用できます。
|
注意: CSSファイルは、JDeveloperからアクセスできません。かわりに、MAFによって、ビルドまたはデプロイ時に、このファイルがパッケージに注入され、そのときにCSSファイルが |
inlineStyle属性は、任意のUIコンポーネントに使用するCSSスタイルを定義し、コンポーネントのルートDOM要素に適用される一連のCSSスタイルを表します。
<amx:outputText inlineStyle="color:red;">
この属性は、基本スタイルの変更が必要な場合に使用してください。
|
注意: いくつかのUIコンポーネントは、HTML JavaScriptのデバッグ方法の詳細は、第22.3.5項「JavaコードおよびJavaScriptのデバッグを有効にする方法」を参照してください。 |
これらの属性は、図6-109に示すように「プロパティ」ウィンドウの「スタイル」セクションに表示されます。
MAF AMXでは、「プロパティ」ウィンドウ内に、inlineStyle属性の様々なプロパティを設定するために使用できるドロップダウン・エディタが提供されています(図6-110を参照)。
詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
スキニングによって、MAF AMXアプリケーション機能内のすべてのUIコンポーネントに均一なスタイルを定義および適用し、機能全体に対するテーマを作成できます。
MAFのデフォルト・スキン・ファミリはmobileAltaという名前で、デフォルト・バージョンはそのスキンの最新バージョンです。詳細は、第4.12項「モバイル・アプリケーションのスキニング」を参照してください。
MAF AMXデータ視覚化コンポーネントのスタイル・プロパティの大部分は、cssディレクトリにあるdvtm.cssファイルで定義されます。アプリケーション機能レベルでのカスタム・スタイル定義を持つカスタムCSSファイルを追加することでデフォルト値をオーバーライドできます(第4.12.9章「デフォルト・スキン・スタイルのオーバーライド」を参照)。
スタイル・プロパティのいくつかは、CSSにマップできないため、カスタムJavaScriptファイルで定義する必要があります。それらのプロパティは、次のとおりです。
ダイアル・ゲージ・コンポーネントの背景および針のイメージ(第6.5.15章「ダイアル・ゲージの作成方法」を参照)。
時系列コンポーネントの継続時間バーのカラー・パレット(第6.5.23項「時系列コンポーネントの作成方法」を参照)。
テーマ・マップ・コンポーネントのベース・マップ(第6.5.19.5項「カスタム・ベース・マップの定義」を参照)。
地理マップ・コンポーネントのスタイル・プロパティ(第6.5.18項「地理マップ・コンポーネントの作成方法」を参照)。
テーマ・マップ・コンポーネントのスタイル・プロパティ(第6.5.19.7項「テーマ・マップ・コンポーネントへのカスタム・スタイルの適用」を参照)。
評価ゲージ・コンポーネントのselectedおよびunselected状態(第6.5.16.1項「評価ゲージ・コンポーネントへのカスタム・スタイルの適用」を参照)。
「包含」セクションでこれらのカスタムJavaScriptファイルをアプリケーション機能レベルで指定する必要があります(第4.10.1章「アプリケーション・コンテンツの定義方法」を参照)。それによって、XMLスタイル・テンプレートで定義したデフォルト・スタイル値をオーバーライドします。例6-114は、CSSを使用してスタイル設定できないプロパティのカスタム・スタイル設定を必要とするデータ視覚化コンポーネントを持つMAF AMXアプリケーション機能を含むMAFプロジェクトに追加する場合のようなJavaScriptファイルを示しています。
例6-114 カスタム・スタイル・プロパティの定義
my-custom.js:
CustomChartStyle = {
// common chart properties
'chart': {
// text to be displayed, if no data is provided
'emptyText': null,
// animation effect when the data changes
'animationOnDataChange': "none",
// animation effect when the chart is displayed
'animationOnDisplay': "none",
// time axis type - disabled, enabled, mixedFrequency
'timeAxisType': "disabled"
},
// chart title separator properties
'titleSeparator': {
// separator upper color
'upperColor': "#74779A",
// separator lower color
'lowerColor': "#FFFFFF",
// should display title separator
'rendered': false
},
// chart legend properties
'legend': {
// legend position - none, auto, start, end, top, bottom
'position': "auto"
},
// default style values
'styleDefaults': {
// default color palette
'colors': ["#003366", "#CC3300", "#666699", "#006666", "#FF9900",
"#993366", "#99CC33", "#624390", "#669933", "#FFCC33",
"#006699", "#EBEA79"],
// default shapes palette
'shapes': ["circle", "square", "plus", "diamond",
"triangleUp", "triangleDown", "human"],
// series effect
'seriesEffect': "gradient",
// animation duration in ms
'animationDuration': 1000,
// animation indicators - all, none
'animationIndicators': "all",
// animation up color
'animationUpColor': "#0099FF",
// animation down color
'animationDownColor': "#FF3300",
// default line width for line chart
'lineWidth': 3,
// default line style for line chart - solid, dotted, dashed
'lineStyle': "solid",
// should markers be displayed for line and area charts
'markerDisplayed': false,
// default marker color
'markerColor': null,
// default marker shape
'markerShape': "auto",
// default marker size
'markerSize': 8,
// pie feeler color for pie chart
'pieFeelerColor': "#BAC5D6",
// slice label position and text type for pie chart
'sliceLabel': {
'position': "outside",
'textType': "percent" }
}
};
CustomGaugeStyle = {
// default animation duration in milliseconds
'animationDuration': 1000,
// default animation effect on data change
'animationOnDataChange': "none",
// default animation effect on gauge display
'animationOnDisplay': "none",
// default visual effect
'visualEffects': "auto"
};
CustomTimelineStyle = {
'timelineSeries' : {
// duration bars color palette
'colors' : ["#267db3", "#68c182", "#fad55c", "#ed6647"]
};
...
}
JavaScriptファイルを定義した後、任意の値をコメント解除および変更できます。例6-115が示すように、maf-feature.xmlファイルに含める機能としてこのファイルを追加します。
例6-115 アプリケーション機能でのカスタム・スタイル・ファイルのインクルード
<?xml version="1.0" encoding="UTF-8" ?>
<adfmf:features xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:adfmf="http://xmlns.oracle.com/adf/mf">
<adfmf:feature id="feature1" name="feature1">
<adfmf:content id="feature1.1">
<adfmf:amx file="feature1/untitled1.amx">
<adfmf:includes>
<adfmf:include type="StyleSheet" file="css/custom.css"/>
<adfmf:include type="JavaScript" file="feature1/js/my-custom.js"/>
</adfmf:includes>
</adfmf:amx>
</adfmf:content>
</adfmf:feature>
</adfmf:features>
MAF AMXページで、JDeveloperによって提供される標準リソース・バンドルを使用することで、UIコンポーネントによって表示されるテキストをローカライズできます。これを行うには、コンポーネントおよびそのテキスト表示プロパティのうちローカライズする値を持つものを1つ選択し、「プロパティ」ウィンドウの該当するボックスで「テキスト・リソースの選択」を選択します(図6-111を参照)。
これによって図6-112に示す標準の「テキスト・リソースの選択」ダイアログが表示されます。このダイアログを使用して、変更するプロパティの文字列参照を入力または検索します。
ローカライズ済文字列リソースを定義すると、その参照のELが「テキスト・リソースの選択」ダイアログの起動元のプロパティに自動的に入力されます。XLIFF (XML Localization Interchange File Format)ファイルが存在しない場合は、このファイルが作成されます。存在する場合は、既存のXLIFFファイルに新しいエントリが追加されます。さらに、対応するバンドルのロード(loadBundle)コンポーネントが、ViewControllerBundle.xlfファイル(デフォルト名ですが、基本的にはプロジェクトの名前に一致します)を指す表示コンポーネントの子として作成されます。
|
注意:
|
図6-113は、MAF AMXファイルの変更を示しています。
詳細は、4.11.1項「リソース・バンドルの使用」を参照してください。
MAFアプリケーションを開発する際は、アクセシビリティの問題に対処することで視覚的および身体的に障害があるユーザーに対応する必要があります。非視覚的なメディアへのレンダリングを行うWebブラウザなどのユーザー・エージェント(スクリーン・リーダーなど)により、UIコンポーネントのテキスト説明が読み上げられ、障害を持つユーザーに有益な情報が提供されます。MAF AMX UIおよびデータ視覚化コンポーネントは、次のアクセシビリティ標準に準拠するように設計されています。
Accessible Rich Internet Applications (WAI-ARIA) 1.0仕様。
詳細は、次を参照してください。
WAI-ARIA 1.0仕様の「Introduction」(http://www.w3.org/TR/wai-aria/introduction)
「Using WAI-ARIA」(http://www.w3.org/TR/wai-aria/usage)
Oracle Global HTML Accessibility Guidelines (OGHAG)。
詳細は、第6.8.3項「Oracle Global HTML Accessibility Guidelinesに関する必知事項」を参照してください。
iOSのアクセシビリティ・ガイドライン。
詳細は、『Accessibility Programming Guide for iOS』を参照してください。
そのようなコンポーネントの導入によって、アクセス可能なコンポーネントの外観の変更されたり、アプリケーション・ロジックが影響受けることがありません。
MAF AMXアプリケーション機能のアクセシビリティが適切に機能するようにするには、次のガイドラインに従ってください。
ナビゲーションの深さは3レベル以内にして、ユーザーが簡単にホーム画面に戻れるようにする必要があります。
スクリプトを最小限に維持します。
DOMとの直接対話を提供しないでください。
JavaScriptのタイムアウトは使用しないでください。
フォーカスの不要な変更は回避します。
ポップアップ・トリガーを明示的に指定する
必要に応じて、WAI-ARIAライブ・リージョンを利用します(第6.8.2項「基本的なWAI-ARIA用語に関する必知事項」を参照)。
CSSの使用を最小限に維持します。
デフォルト・コンポーネントの外観をオーバーライドしないようにしてください。
拡大縮小が可能なサイズ単位を選択します。
CSSの位置設定は使用しないでください。
詳細は、次を参照してください。
『Mobile Accessibility』(http://www.w3.org/WAI/mobile)
『Web Content Accessibility and Mobile Web: Making a Web Site Accessible Both for People with Disabilities and for Mobile Devices』(http://www.w3.org/WAI/mobile)
MAF AMX UIおよびデータ視覚化コンポーネントには、組込みのアクセシビリティ・サポートが備えられており、ほとんどのコンポーネントがアクセシビリティ監査の対象となっています(図6-116を参照)。
表6-10には、「プロパティ」ウィンドウの「アクセシビリティ」セクションで設定できるコンポーネントとそれらの属性がリストされています。
表6-10 構成可能なアクセシビリティ属性を持つUIコンポーネント
| コンポーネント | アクセシビリティ属性 | アクセシビリティ監査メッセージ |
|---|---|---|
|
ボタン( |
短い説明( |
|
|
選択ボタン( |
短い説明( |
|
|
リンク( |
短い説明( |
|
|
リンク(実行) ( |
短い説明( |
|
|
カルーセル( |
短い説明( |
|
|
カルーセル・アイテム( |
短い説明( |
|
|
リスト・アイテム( |
短い説明( |
|
|
ポップアップ( |
短い説明( |
|
|
イメージ( |
短い説明( |
|
|
入力テキスト( |
ヒント・テキスト( |
|
|
パネル・グループ・レイアウト( |
ランドマーク( |
NA脚注 1 |
|
デッキ( |
ランドマーク( |
NA (脚注1を参照) |
|
表のレイアウト( |
短い説明( |
|
|
セル・フォーマット( |
短い説明( |
|
|
フィルム・ストリップ( |
短い説明( |
|
|
フィルム・ストリップ・アイテム( |
短い説明( |
|
|
面グラフ( |
短い説明( |
|
|
棒グラフ( |
短い説明( |
|
|
横棒グラフ( |
短い説明( |
|
|
バブル・チャート( |
短い説明( |
|
|
コンボ・チャート( |
短い説明( |
|
|
線グラフ( |
短い説明( |
|
|
散布図( |
短い説明( |
|
|
スパーク・チャート( |
短い説明( |
|
|
円グラフ( |
短い説明( |
|
|
NBoxノード( |
短い説明( |
|
|
参照オブジェクト( |
短い説明( |
|
|
参照面( |
短い説明( |
|
|
参照線( |
短い説明( |
|
|
チャートのデータ・アイテム( |
短い説明( |
|
|
円グラフのデータ・アイテム( |
短い説明( |
|
|
ファンネル・データ・アイテム( |
短い説明( |
|
|
面( |
短い説明( |
|
|
マーカー( |
短い説明( |
|
|
ツリーマップ・ノード( |
短い説明( |
|
|
サンバースト・ノード( |
短い説明( |
|
|
LEDゲージ( |
短い説明( |
|
|
ステータス・メーター・ゲージ( |
短い説明( |
|
|
ダイアル・ゲージ( |
短い説明( |
|
|
評価ゲージ( |
短い説明( |
|
|
地理マップ( |
短い説明( |
|
|
テーマ・マップ( |
短い説明( |
|
|
ファンネル・チャート( |
短い説明( |
|
|
NBox ( |
短い説明( |
|
|
サンバースト( |
短い説明( |
|
|
時系列( |
短い説明( |
|
|
ツリーマップ( |
短い説明( |
|
脚注 1 ランドマーク属性にはデフォルト値(none)があり、アクセシビリティ監査の対象ではありません。
shortDesc属性は、コンポーネントごとに異なる目的で使用します。たとえば、イメージ・コンポーネントにshortDesc属性を設定すると、MAF AMXファイルでそれはimage要素のalt属性の値として表示されます。
shortDesc属性の値はローカライズできます。
パネル・グループ・レイアウトおよびデッキ・コンポーネントの場合、ページのコンテキストに従って適用可能なランドマーク・ロール・タイプ(表6-15「ランドマーク・ロール」を参照)を定義します。landmark属性に次の値の1つを設定できます。
デフォルト(なし)
application
banner
complementary
contentinfo
form
main
navigation
search
表6-11は、WAI-ARIA仕様によって定義されるそのアクセシビリティ属性が実行時に自動的に適用され、変更できないUIコンポーネントを示しています。
表6-11 静的アクセシビリティ属性を持つUIコンポーネント
| コンポーネント | アクセシビリティ属性 | アクセシビリティ監査メッセージ |
|---|---|---|
|
入力日( |
ラベル( |
|
|
入力数値スライダ( |
ラベル( |
|
|
パネル・ラベルおよびメッセージ( |
ラベル( |
|
|
アイテムの選択( |
ラベル( |
|
|
チェックボックス( |
ラベル( |
|
|
ブール・スイッチ( |
ラベル( |
|
|
ラジオ・ボタン( |
ラベル( |
|
|
チェックボックスを複数選択( |
ラベル( |
|
|
選択肢を複数選択( |
ラベル( |
|
|
選択肢( |
ラベル( |
|
|
出力テキスト( |
値( |
NA脚注 1 |
脚注 1 値属性はアクセシビリティ監査の対象外です。
JDeveloperの「プリファレンス」ダイアログを使用して次のようにアクセシビリティ監査ルールを構成できます。
(Windowsコンピュータ上の) JDeveloperで、メイン・メニューから「ツール」→「プリファレンス」を選択します。
プリファレンスのリストから、「監査」を選択します(図6-114を参照)。
図6-114に示す「監査」ペインで、「プロファイルの管理」をクリックして「監査プロファイル」ダイアログを開きます。
図6-115に示す「監査プロファイル」ダイアログで、ルールのツリーから「モバイル・アプリケーション・フレームワーク」ノードを展開し、次に「アクセシビリティ」を展開します。
図6-115に示すように、アクセシビリティ監査ルールを選択し、アプリケーションに適用します。
図6-116は、JDeveloperに表示されるアクセシビリティ監査警告を示しています。
アクセス可能なMAF AMXアプリケーション機能をテストする方法の詳細は、第22.2.1項「iOSデバイス上でアクセシビリティのテストを実行する方法」を参照してください。
|
注意: Androidでは、WAI-ARIAアクセシビリティ機能はデータ視覚化コンポーネントに対してサポートされません。 その他のMAF AMX UIコンポーネントは、アプリケーションがAndroidスクリーン・リーダー・モードで実行された場合、正しく動作しない可能性があります。 |
WAI-ARIA 1.0仕様に述べられているように、複雑なWebアプリケーションは、支援テクノロジがドキュメントの部分の背後にあるセマンティクスを判別できない場合や、ユーザーが、使用可能な方法で実際にそのすべての部分を移動できない場合に、アクセス不可能になります。WAI-ARIAでは、セマンティクスがロール(ユーザー・インタフェース要素を定義するタイプ)と、ロールによってサポートされている状態およびプロパティに分割されています。次のセマンティクス・アソシエーションによって、WAI-ARIA用語の基礎が形成されています。
ロール
ランドマーク
ライブ・リージョン
詳細は、『Important Terms』(http://www.w3.org/TR/wai-aria/terms)を参照してください。
次の表には、MAFに適用可能なロールのカテゴリ(WAI-ARIA 1.0仕様での定義)がリストされています。
表6-12は、全般的なロール概念を定義する目的でWAI-ARIAのロールの分類をサポートするために使用される抽象ロールを示しています。
表6-12 抽象ロール
| 抽象ロール | 説明 |
|---|---|
|
input |
ユーザー入力を可能にする一般的なタイプのウィジェット。 |
|
landmark |
ナビゲーショナル・ランドマークを意図したページのリージョン。 |
|
select |
ユーザーが一連の選択肢から選択を行えるフォーム・ウィジェット。 |
|
widget |
グラフィカル・ユーザー・インタフェースのインタラクティブ・コンポーネント。 |
表6-13は、スタンドアロン・ユーザー・インタフェース・ウィジェットまたは大きい複合ウィジェットの一部として機能するウィジェット・ロールを示しています。
表6-13 ウィジェット・ロール
| ウィジェット・ロール | 説明 | ウィジェットで必要とされるステート |
|---|---|---|
|
alertdialog |
アラート・メッセージを含むダイアログのタイプ。最初のフォーカスはそのダイアログ内の要素に移動します。 |
aria-labelledby、aria-describedby |
|
button |
クリックまたは押されたときにユーザーによってトリガーされるアクションを可能にする入力。 |
aria-expanded (ステート)、aria-pressed (ステート) |
|
checkbox |
|
aria-checked (ステート) |
|
dialog |
応答を要求するためにアプリケーションの現在の処理を中断するように設計されているアプリケーション・ウィンドウによって表されるダイアログ。 |
aria-labelledby、aria-describedby |
|
link |
内部または外部リソースへのインタラクティブな参照。アクティブ化されるとユーザー・エージェントがそのリソースにナビゲートします。 |
aria-disabled (ステート)、aria-describedby |
|
option |
選択リスト内の選択可能アイテム。 |
aria-labelledby、aria-checked (ステート)、aria-selected (ステート) |
|
radio |
ラジオ・ロールのグループ内のチェック可能入力。同時にチェックできるのはそれらのうち1つのみです。 |
aria-checked (ステート)、aria-disabled (ステート) |
|
slider |
指定された範囲内からユーザーが値を選択するユーザー入力。 |
aria-valuemax、aria-valuemin、aria-valuenow、aria-disabled (ステート) |
|
listbox |
選択肢のリストからユーザーが1つ以上のアイテムを選択できるウィジェット。 |
aria-live |
|
radiogroup |
ラジオ・ボタンのグループ。 |
aria-disabled (ステート) |
|
listitem |
リストまたはディレクトリ内の単一アイテム。 |
aria-describedby |
|
textbox |
その値として自由形式のテキストを使用できる入力。 |
aria-labelledby、aria-readonly、aria-required、aria-multiline、aria-disabled (ステート) |
表6-14は、ページ内のコンテンツを編成する構造を記述するドキュメント構造ロールを示しています。通常、ドキュメント構造はインタラクティブではありません。
表6-14 ドキュメント構造ロール
| ドキュメント構造ロール | 説明 |
|---|---|
|
img |
イメージを形成する要素のコレクションのコンテナ。 |
|
list |
非インタラクティブ・リスト・アイテムのグループ。 |
|
listitem |
リストまたはディレクトリ内の単一アイテム。 |
表6-15は、ナビゲーショナル・ランドマークを意図したページのリージョンを表すランドマーク・ロールを示しています。
表6-15 ランドマーク・ロール
| ランドマーク・ロール | 説明 |
|---|---|
|
application |
Webアプリケーション(Webドキュメントではなく)として宣言されるリージョン. |
|
banner |
ほとんどサイト指向のコンテンツ(ページ固有のコンテンツではなく)を含むリージョン。 |
|
complementary |
DOM階層の類似したレベルにあるメイン・コンテンツを補足するように設計ているが、メイン・コンテンツから切り離しても意味を持つドキュメントのサポート・セクション。 |
|
contentinfo |
親ドキュメントに関する情報が含まれている大きな認識可能なリージョン。 |
|
form |
全体として結合されてフォームを作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。 |
|
main |
ドキュメントのメイン・コンテンツ。 |
|
navigation |
ドキュメントまたは関連ドキュメントをナビゲートするためのナビゲーショナル要素(通常はリンク)のコレクション。 |
|
search |
全体として結合されて検索機能を作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。 |
MAF UIコンポーネントの大部分では、アクセス可能なWAI-ARIA属性は変更できません。いくつかのコンポーネントでは、デザインタイムに特別なアクセス可能な属性を設定できます。また、パネル・グループ・レイアウトおよびデッキには、WAI-ARIAランドマーク・ロール・タイプを使用できます。詳細は、第6.8.1項「アクセシビリティのためのUIおよびデータ視覚化コンポーネントの構成方法」を参照してください。
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ページに検証エラー・メッセージが含まれている場合、リスト・アイテム、リンクおよびボタンなどのコマンド・コンポーネントを使用して、エンド・ユーザーがそのページから移動できないようにすることができます。警告を含むメッセージでは、ナビゲーションが停止されることはありません。
例6-116は、MAF AMXファイルでの複数の検証グループおよび検証動作操作など検証要素の定義方法を示しています。
例6-116 入力の検証の定義
<amx:panelPage id="pp1">
<amx:facet name="header">
<amx:outputText id="outputText1" value="Validate"/>
</amx:facet>
<amx:facet name="secondary">
<amx:commandButton id="commandButton2" action="go" text="Save">
<amx:validationBehavior id="vb1"
disabled="#{pageFlowScope.myPanel ne 'panel1'}"
group="group1"/>
<amx:validationBehavior id="vb2"
disabled="#{pageFlowScope.myPanel ne 'panel2'}"
group="group2"/>
<!-- invalid, should be caught by audit rule but for any reason
if group not found at run time, this validate is ignored -->
<amx:validationBehavior id="vb3" disabled="false" group="groupxxx"/>
<!-- group is not found at run time, this validate is ignored -->
<amx:validationBehavior id="vb4" disabled="false" group="group3"/>
</amx:commandButton>
</amx:facet>
<amx:panelSplitter id="ps1" selectedItem="#{pageFlowScope.myPanel}">
<amx:panelItem id="pi1">
<amx:validationGroup id="group1">
<amx:panelFormLayout id="pfl1">
<amx:inputText value="#{bindings.first.inputValue}"
required="true"
label="#{bindings.first.hints.label}"
id="inputText1"/>
<amx:inputText value="#{bindings.last.inputValue}"
label="#{bindings.last.hints.label}"
id="inputText2"/>
</amx:panelFormLayout>
</amx:validationGroup>
</amx:panelItem>
<amx:panelItem id="pi2">
<amx:validationGroup id="group2">
<amx:panelFormLayout id="pfl2">
<amx:inputText value="#{bindings.salary.inputValue}"
label="#{bindings.first.hints.label}"
id="inputText3"/>
<amx:inputText value="#{bindings.last.inputValue}"
label="#{bindings.last.hints.label}"
id="inputText4"/>
</amx:panelFormLayout>
</amx:validationGroup>
</amx:panelItem>
</amx:panelSplitter>
<amx:panelGroupLayout id="pgl1" rendered="false">
<amx:validationGroup id="group3">
<amx:panelFormLayout id="pfl4">
<amx:inputText value="#{bindings.salary.inputValue}"
label="#{bindings.first.hints.label}"
id="inputText5"/>
<amx:inputText value="#{bindings.last.inputValue}"
label="#{bindings.last.hints.label}"
id="inputText6"/>
</amx:panelFormLayout>
</amx:validationGroup>
</amx:panelGroupLayout>
</amx:panelPage>
例6-117は、MAF AMXファイルでのポップアップに表示される検証メッセージの定義方法を示しています。
例6-117 ポップアップ・メッセージを含む入力の検証の定義
<amx:panelPage id="pp1">
<amx:facet name="header">
<amx:outputText id="outputText1" value="Login Demo"/>
</amx:facet>
<amx:facet name="secondary">
<amx:commandButton id="btnBack" action="__back" text="Back"/>
</amx:facet>
<amx:panelGroupLayout id="panelGroupLayout1">
<amx:validationGroup id="group1">
<amx:panelGroupLayout id="panelGroupLayout2">
<amx:inputText value="#{bindings.userName.inputValue}"
label="#{bindings.userName.hints.label}"
id="inputText1"
showRequired="true"
required="true"/>
<amx:inputText value="#{bindings.password.inputValue}"
label="#{bindings.password.hints.label}"
id="inputText2"
required="true"
showRequired="true"
secret="true"/>
<amx:outputText id="outputText2"
value="#{bindings.timeToStayLoggedIn.hints.label}:
#{bindings.timeToStayLoggedIn.inputValue} minutes"/>
</amx:panelGroupLayout>
</amx:validationGroup>
<amx:commandButton id="commandButton2"
text="Login"
action="navigationSuccess">
<amx:validationBehavior id="validationBehavior2" group="group1"/>
</amx:commandButton>
</amx:panelGroupLayout>
</amx:panelPage>
検証メッセージはポップアップ・コンポーネントに表示されます(第6.2.8項「ポップアップ・コンポーネントの使用方法」を参照)。検証ポップアップのタイトルを構成することはできません。それは、相対的なメッセージ重大度によって自動的に決定されます。現在のメッセージのうちの最も重大なものが検証ポップアップのタイトルになります。つまり、すべての検証メッセージがWARNINGタイプである場合は、そのタイトルは「警告」になります。メッセージのいくつかがWARNINGタイプで、その他はERRORタイプの場合はタイトルは「エラー」に設定されます。
図6-117は、実行時に生成されるポップアップ検証メッセージを示しています。
MAF AMXページからJavaコードを呼び出し、アプリケーション・ロジックを実行するには、次のいずれかの方法でUIコンポーネントの属性としてリスナーを定義します。
MAF AMXファイルのソースでの手動による方法。
選択したコンポーネントの「プロパティ」から。詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンスを参照してください。
次のリスナーを使用して、MAF AMXページにUIトリガー・イベントの検出機能を追加できます。
valueChangeListener: 次のパラメータで作成されるValueChangeEventをリスニングします。
古い値を表すjava.lang.Object
新しい変更済の値を表すjava.lang.Object
actionListener: パラメータなしで作成されるActionEventをリスニングします。
selectionListener: 次のパラメータで作成されるSelectionEventをリスニングします。
古い行キーを表すjava.lang.Object
選択済行キーを表すjava.lang.String[]
moveListener: 古い行キーを表すRowKeyタイプの次のパラメータで作成されるMoveEventをリスニングします。
移動済行キーを表すjava.lang.Object
移動済行キーがその前に挿入された行キーを表すjava.lang.String[]
rangeChangeListener: パラメータなしで作成されるRangeChangeEventをリスニングします。
mapBoundsChangeListener: 次のパラメータで作成されるMapBoundsChangeEventをリスニングします。
最小マップ境界のX座標(緯度)を表すjava.lang.Object
最小マップ境界のY座標(経度)を表すjava.lang.Object
最大マップ境界のX座標(緯度)を表すjava.lang.Object
最大マップ境界のY座標(経度)を表すjava.lang.Object
マップ中心のX座標(緯度)を表すjava.lang.Object
マップ中心のY座標(経度)を表すjava.lang.Object
現在のズーム・レベルを表すint
mapInputListener: 次のパラメータで作成されるMapInputEventをリスニングします。
イベント・タイプを表すjava.lang.String
イベント・ポイントのX座標を表すjava.lang.Object
イベント・ポイントのY座標を表すjava.lang.Object
viewportChangeListener: 次のパラメータで作成されるViewportChangeEventをリスニングします。
最小X座標を表すjava.lang.Object
最大X座標を表すjava.lang.Object
最小Y座標を表すjava.lang.Object
最大Y座標を表すjava.lang.Object
最初の表示可能グループを表すjava.lang.Object
最後の表示可能グループを表すjava.lang.Object
リスナーの値は、パターン#{*}に一致している必要があり、次の要件を満たしている必要があります。
タイプ名: EL式
ベース・タイプ: 文字列
プリミティブ・タイプ: 文字列
ELイベントの詳細は、第7.3.6項「ELイベントについて」を参照してください。
大部分のMAF AMXイベント・クラスは、oracle.adfmf.amx.event.AMXEventクラスの拡張です。Javaコードでイベント・リスナーを定義するときは、oracle.adfmf.amx.event.AMXEventクラスを渡す必要があります。
詳細は、次を参照してください。
Oracle Mobile Application Framework Oracle Fusion Middleware Java APIリファレンス
Oracle Fusion Middleware Oracle Mobile Application Frameworkのタグ・リファレンス
MAFでは、マネージドBeanメソッドがMAF AMX固有のイベント・クラスを使用するように、リスナーに対してマネージドBeanメソッドを作成できます。例6-118、例6-119および例6-120は、同じマネージドBeanメソッドをコールするボタンおよびリンク・コンポーネントを示しています。AMXEventのソース値は、コンポーネントのIDを含むメッセージ・ボックスを表示することでどのオブジェクトがイベントを起動したのかを判別します。
例6-118 MAF AMXファイルからのBeanメソッドのコール
<amx:commandButton text="commandButton1"
id="commandButton1"
actionListener="#{applicationScope.Bean.actionListenerMethod}">
</amx:commandButton>
<amx:commandLink text="commandLink1"
id="commandLink1"
actionListener="#{applicationScope.Bean.actionListenerMethod}">
</amx:commandLink>
例6-120 イベント・メソッドの呼出し
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コンポーネントでは(親コンポーネントに適した)イベントのサブセットのみがサポートされているため、これらのサポートされているイベントは、リスナーに対して選択できる限られたタイプのリストに提示されます。
表6-16は、親UIコンポーネント、それが子として持つことができるイベント・リスナー、およびそれらがサポートしているイベント・タイプを示しています。
表6-16 サポートされているイベント・リスナーとイベント・タイプ
| UIコンポーネント(親) | アクション・リスナー(子) | プロパティ・リスナーの設定(子) | ポップアップ表示動作(子) | ポップアップを閉じる動作(子) | actionListener (属性) | valueChangeListener (属性) | moveListener (属性) | selectionListener (属性) | mapBoundsChangeListener (属性) | mapInputListener (属性) | viewportChangeListener (属性) | rangeChangeListener (属性) |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
ボタン |
サポート |
サポート |
サポート |
サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
リンク |
サポート |
サポート |
サポート |
サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
リスト・アイテム |
サポート |
サポート |
サポート |
サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
入力日 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
入力数値スライダ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
入力テキスト |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
リスト・ビュー |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
サポート |
未サポート |
未サポート |
未サポート |
サポート |
|
チェックボックス |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
スイッチ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
チェックボックス(複数選択) |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
選択肢(複数選択) |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
選択肢 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
選択ボタン |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
ラジオ・ボタン |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
リンク(実行) |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
カルーセル |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
カルーセル・アイテム |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
イメージ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
面グラフ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
サポート |
未サポート |
|
棒グラフ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
サポート |
未サポート |
|
バブル・チャート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
コンボ・チャート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
サポート |
未サポート |
|
横棒グラフ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
サポート |
未サポート |
|
LEDゲージ |
未サポート |
未サポート |
サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
ダイアル・ゲージ |
未サポート |
未サポート |
サポート |
サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
評価ゲージ |
未サポート |
未サポート |
サポート |
サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
線グラフ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
サポート |
未サポート |
|
円グラフ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
散布図 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
スパーク・チャート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
ステータス・メーター・ゲージ |
未サポート |
未サポート |
サポート |
サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
地理マップ |
未サポート |
サポート済脚注 1 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート済脚注 2 |
サポート |
サポート |
未サポート |
未サポート |
|
テーマ・マップ |
未サポート |
サポート済脚注 3 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート済脚注 4 |
未サポート |
未サポート |
未サポート |
未サポート |
|
サンバースト |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
ツリーマップ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
時系列 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
NBox |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
未サポート |
未サポート |
脚注 1 プロパティ・リスナーの設定は、地理マップの領域のマーカーの子として指定できます。
脚注 2 selectionListener属性は、地理マップの面データ・レイヤーまたは点データ・レイヤーに設定できます。
脚注 3 プロパティ・リスナーの設定は、テーマ・マップの領域のマーカーの子として指定できます。
脚注 4 selectionListener属性は、テーマ・マップの面データ・レイヤーまたは点データ・レイヤーに設定できます。
子イベント・リスナーそれぞれのtype属性(図6-118を参照)には、リスナー・イベントと一致する値の基本セットがあります。これらの値は表6-16に示す情報に基づいてフィルタ処理され、それによって、子イベント・リスナーが、識別された親UIコンポーネントのコンテキスト内にある場合に、その親によってサポートされているイベントのみが表示されるようになります。たとえば、ボタン・コンポーネントの下にあるアクション・リスナーまたはプロパティ・リスナーの設定の子では、actionタイプの値およびジェスチャーのみか表示されます。
図6-118は、親リスト・アイテム・コンポーネントのプロパティ・リスナーの設定のかぎられたタイプ・リストにおいて使用可能な値を示しています。
脚注の説明
脚注 1: 詳細は、第6.3.26.1項「disabled属性に関する必知事項」を参照してください。
