Oracle Enterprise Pack for Eclipse Oracle Mobile Application Framework (OEPE Edition)でのモバイル・アプリケーションの開発 リリース2.2.1 E72511-01 |
|
前 |
次 |
この章では、MAF AMXページのユーザー・インタフェースを作成する方法について説明します。
この章には次の項が含まれます:
MAFは、iOSとAndroidのどちらのユーザー操作性に対しても適切に動作するMAF AMXページの作成を可能にする一連のUIコンポーネントおよび操作を提供します。
MAF AMXは、UIコンポーネントおよび操作をエディタ・ウィンドウで追加できることにより、通常のOEPEの開発環境を維持しています。本質的には、MAF AMX UIコンポーネントは、iOSおよびAndroidのプラットフォームでネイティブ・コンポーネントのHTML相当物をレンダリングし、OEPEでのそれらのデザインタイムの動作は、その他のテクノロジで使用されるコンポーネントに似ています。さらに、これらのUIコンポーネントは、宣言ナビゲーションおよびデータ・バインディングのためにMAFのコントローラおよびモデルと統合されています。
注意: モバイル・デバイス用のインタフェースを開発する場合は、画面領域が非常に限られていることに常に注意してください。また、一部のモバイル・デバイスではタッチスクリーンが使用できません。 |
詳細は、次を参照してください。
MAF AMXは、ページ内へのUIコンポーネントの配置を可能にするレイアウト・コンポーネント(表13-1にリスト)を提供します。通常、これらのコンポーネントを使用してページの構築を開始し、次にこれらのコンテナ内で、または子コンポーネントとして、他の機能を提供する他のコンポーネントを、レイアウト・コンポーネントに追加します。これらのコンポーネントのいくつかは、拡大するコンポーネント内に配置されたときに拡大する機能などの形状管理機能を提供します。
表13-1 MAF AMXのページ管理、レイアウトおよび間隔調整コンポーネント
コンポーネント | タイプ | 説明 |
---|---|---|
表示 |
コア・ページ構造コンポーネント |
MAF AMXファイル内に |
パネル・ページ |
コア・ページ構造コンポーネント |
MAF AMXファイル内に MAF AMXファイルの詳細は、第12.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ファイル内の 詳細は、第13.2.10項「スペーサ・コンポーネントの使用方法」を参照してください。 |
表のレイアウト |
ページ・レイアウト・コンテナ |
MAF AMXファイル内に |
行のレイアウト |
ページ・レイアウト・コンテナ |
MAF AMXファイル内に |
セル・フォーマット |
ページ・レイアウト・コンポーネント |
MAF AMXファイル内に |
レイアウト・コンポーネントを追加するには、それを「パレット」からMAF AMXページにドラッグ・アンド・ドロップします(第12.3.2.1項「UIコンポーネントの追加」を参照)。その後に、「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。各特定コンポーネントの属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次の例は、MAF AMXファイルで定義されているいくつかのページ・レイアウト要素を示しています。
注意: ページ・レイアウト要素は<amx> ネームスペースの下で宣言します。 |
<amx:panelPage id="pp1"> <amx:outputText id="outputText1" value="Sub-Section Title 1" styleClass="adfmf-text-sectiontitle"/> <amx:panelFormLayout id="panelFormLayout1" labelPosition="start"> <amx:panelLabelAndMessage id="panelLabelAndMessage1" label="Name"> <amx:commandLink id="commandLink1" text="Jane Don" action="editname" /> </amx:panelLabelAndMessage> <amx:panelLabelAndMessage id="panelLabelAndMessage2" label="Street Address"> <amx:commandLink id="commandLink2" text="123 Main Street" action="editaddr" /> </amx:panelLabelAndMessage> <amx:panelLabelAndMessage id="panelLabelAndMessage3" label="Phone"> <amx:outputText id="outputText2" value="212-555-0123" /> </amx:panelLabelAndMessage> </amx:panelFormLayout> <amx:outputText id="outputText3" value="Sub-Section Title 2" styleClass="adfmf-text-sectiontitle" /> <amx:panelFormLayout id="panelFormLayout2" labelPosition="start"> <amx:panelLabelAndMessage id="panelLabelAndMessage4" label="Type"> <amx:commandLink id="commandLink3" text="Personal" action="edittype" /> </amx:panelLabelAndMessage> <amx:panelLabelAndMessage label="Anniversary"> <amx:outputText id="outputText4" value="November 22, 2005" /> </amx:panelLabelAndMessage> </amx:panelFormLayout> <amx:panelFormLayout id="panelFormLayout3" labelPosition="start"> <amx:panelLabelAndMessage id="panelLabelAndMessage5" label="Date Created"> <amx:outputText id="outputText5" value="June 20, 2011" /> </amx:panelLabelAndMessage> </amx:panelFormLayout> </amx:panelPage>
レイアウト・コンポーネントのビジュアル・プレゼンテーションを管理するには、標準Cascading Style Sheet (CSS)を使用します。CSSは、アプリケーション・プロジェクトのView Content/css
ディレクトリにあり、デフォルトのCSSはMAFによって提供されています。詳細は、第13.6.1項「コンポーネント属性を使用したスタイルの定義方法」を参照してください。
MAF AMXを使用してiOSプラットフォーム用に作成されたユーザー・インタフェースは、言語環境が左から右、右から左のどちらであっても正しく表示されます。後者の場合、コンポーネントは画面の左側ではなく右側から表示されます。ポップアップ(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)、パネル・アイテム、パネル・スプリッタ(第13.2.9項「パネル・スプリッタ・コンポーネントの使用方法」)などの一部のMAF AMXレイアウト・コンポーネントは、特定の右から左の動作を有効化するように構成できます。MAF AMXページの右から左の構成の詳細は、第13.4項「ジェスチャーの有効化」および第12.2.11項「ページ遷移スタイルの指定方法」を参照してください。
注意: 右から左のテキスト方向は、Androidプラットフォームではサポートされていません。 |
UIDemoという名前のMAFサンプル・アプリケーションは、ボタンなどのMAF AMX UIコンポーネントとともにレイアウト・コンポーネントを使用して一般的なパターンに従った一般的なレイアウトのいくつかを実現する方法を示しています。さらに、このサンプル・アプリケーションは、スタイルを使用してページ・レイアウトを特定のパターンに合せる方法を示します。UIDemoアプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。
表示(MAF AMXファイルのview
要素)は、コア・ページ構造コンポーネントであり、MAF AMXファイルの作成時にそのファイルに自動的に挿入されます。このコンポーネントは、ページおよびその構造の階層表現を提供し、単一のMAF AMXページを表します。
詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
パネル・ページ(MAF AMXファイルのpanelPage
要素)は、他のコンポーネントをレイアウトする画面のスクロール可能領域の定義を可能にするコンポーネントです。
デフォルトでは、MAF AMXページを作成するときに、OEPEによってパネル・ページ・コンポーネントが自動的に作成され、そのページに挿入されます。そのページにコンポーネントを追加すると、それらはパネル・ページ・コンポーネント内に挿入されます。
特定の領域(ページのヘッダーやフッターなど)をスクロールできないようにし、向きが変更されたときのストレッチを有効化するには、パネル・ページに対してファセット・コンポーネントを指定します。パネル・ページのヘッダー・ファセットには、各ページのナビゲーション・バーに配置されるタイトルが含まれています。パネル・ページに含めることができる他のタイプのファセット・コンポーネントの詳細は、第13.2.7項「ファセット・コンポーネントの使用方法」を参照してください。
次の例は、MAF AMXファイルに定義されたpanelPage
要素を示しています。このパネル・ページには、ヘッダー・ファセットが含まれています。
<amx:panelPage id="pp1"> <amx:facet name="header"> <amx:outputText id="ot1" value="Welcome"/> </amx:facet> </amx:panelPage>
詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
パネル・グループ・レイアウト・コンポーネントは、基本レイアウト・コンポーネントであり、その子を垂直方向または水平方向に配置します。また、子コンポーネントをページの横および下に流すラッピング・レイアウト・オプションがあります。
パネル・グループ・レイアウト・コンポーネントを作成するには、「パレット」を使用します。
パネル・グループ・レイアウト・コンポーネントを追加するには:
「パレット」で、「MAF AMX」ペインを開き、MAF AMXページに「パネル・グループ・レイアウト」をドラッグ・アンド・ドロップします。
目的の子コンポーネントをパネル・グループ・レイアウト・コンポーネントに挿入します。
隣接する子コンポーネント間に間隔を追加するには、スペーサ(spacer
)コンポーネントを挿入します(「パレット」のMAF AMXペインからも可能です)。
「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次の例は、MAF AMXファイルに定義されたpanelGroupLayout
要素を示しています。
<amx:panelGroupLayout styleClass="prod" id="pgl1"> <amx:outputText styleClass="prod-label" value="Screen Size:" id="ot1"/> </amx:panelGroupLayout>
パネル・グループ・レイアウト・コンポーネントのスクロール動作は、scrollPolicy
属性によって定義され、auto
(デフォルト)、none
またはscroll
に設定できます。この動作は、デフォルトでは、アクティブ・スキンに定義されているものになります。
アクティブ・スキンに定義されている動作にかかわらずスクロールを無効にするには、scrollPolicy
属性をnone
に設定します。パネル・グループ・レイアウト・コンポーネントがスクロール可能でない場合は、この内容は制限されません。
アクティブ・スキンに定義されている動作にかかわらずスクロールを有効にするには、scrollPolicy
属性をscroll
に設定します。パネル・グループ・レイアウト・コンポーネントがスクロール可能な場合は、コンポーネントのサイズが制限されるときにスクロールが提供されます。
スクロールでは大量のメモリーが消費され、アプリケーションがクラッシュする可能性があるため、スクロールの使用は最小限にする必要があります。mobileAlta
スキン(第13.6.3項「スキニングに関する必知事項」を参照)では、パネル・グループ・レイアウト、パネル・フォーム・レイアウト(第13.2.4項「パネル・フォーム・レイアウト・コンポーネントの使用方法」を参照)および表のレイアウト(第13.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
の各属性とともに使用する必要があります。
注意: 単一列レイアウトから複数列レイアウトに変更するには、maxColumns 属性の設定値にかかわらず、rows 属性の値を1より大きくする必要があります。rows 属性が指定されている場合、maxColumns 属性は、列の数をその数値を最大としてレイアウトを制限しますが、子コンポーネントを配置するにはこれと同数の列が必要です。 |
パネル・フォーム・レイアウト・コンポーネントを追加するには:
「パレット」で、「パネル・フォーム・レイアウト」コンポーネントをMAF AMXページにドラッグ・アンド・ドロップします。
「新規パネル・フォーム・レイアウト」ダイアログで、コンポーネントの属性を設定します。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次の例は、MAF AMXファイルに定義されたpanelFormLayout
要素を示しています。
<amx:panelFormLayout styleClass="prod" id="pfl1"> <amx:panelLabelAndMessage label="Type" id="plm1"> <amx:commandLink text="Personal" action="edittype" id="cl1"/> </amx:panelLabelAndMessage> </amx:panelFormLayout>
パネル・ストレッチ・レイアウト(panelStretchLayout
)コンポーネントは、top、bottomおよびcenterの3つの子ファセット・コンポーネントを管理します(次の例を参照)。これらのファセットは、任意の数および組合せで使用できます。
<amx:panelStretchLayout id="psl1"> <amx:facet name="top"> </amx:facet> <amx:facet name="center"> </amx:facet> <amx:facet name="bottom"> </amx:facet> </amx:panelStretchLayout>
パネル・ストレッチ・レイアウト・コンポーネントを積み重ねた3つの長方形のセットで表現しようとする場合、次のことが適用されます。
一番上の長方形の高さは、topファセットに指定したとおりの高さで定義されます。
一番下の長方形の高さは、bottomファセットに指定したとおりの高さで定義されます。
残りの垂直領域が中央の長方形に割り当てられます。この矩形の高さがCenter.height
に定義された値よりも小さく、panelStretchLayout
のscrollPolicy
属性がscroll
またはauto
のいずれかに設定されている場合、スクロールバーが追加されます。
パネル・ストレッチ・レイアウト・コンポーネントを追加するには、次の手順を実行します。
「パレット」で、「パネル・ストレッチ・レイアウト」をMAF AMXページにドラッグ・アンド・ドロップします。
作成した子ファセット・コンポーネントを確認し、必要に応じて、一部を削除します。
「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
パネル・ラベルおよびメッセージ(panelLabelAndMessage
)コンポーネントは、label
属性が定義されていないコンポーネントを配置するために使用します。これらのコンポーネントとしては、通常、出力テキスト、ボタンまたはリンクがあります。
パネル・ラベルおよびメッセージ・コンポーネントを追加するには:
「パレット」のMAF AMXペインで、「パネル・ラベルおよびメッセージ」コンポーネントを「パネル・グループ・レイアウト」コンポーネントにドラッグ・アンド・ドロップします。
「新規パネル・ラベルおよびメッセージ」ダイアログで、コンポーネントの属性を設定します。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次の例は、MAF AMXファイルで定義されているpanelLabelAndMessage
要素を示しています。label
属性が、子コンポーネントに対して使用されています。
<amx:panelLabelAndMessage label="Phone" id="plm1"> <amx:outputText value="212-555-0123" id="ot1"/> </amx:panelLabelAndMessage>
ファセット(facet
)コンポーネントは、親レイアウト・コンポーネント上に、ヘッダーやフッターなど任意の名前のファセットを定義するために使用します。ファセットの位置およびレンダリングは、親コンポーネントによって決定されます。
MAF AMXページのヘッダーは、通常、ヘッダー、プライマリおよびセカンダリの各ファセットと組み合せたパネル・ページ・コンポーネント(第13.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)によって表されます。
ヘッダー・ファセット: ページ・タイトルが含まれています。
プライマリ・アクション・ファセット: ヘッダー・バーの左隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
セカンダリ・アクション・ファセット: ヘッダー・バーの右隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
MAF AMXページのフッターは、フッター・ファセットと組み合せたパネル・ページ・コンポーネント(第13.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)によって表されます。
フッター・ファセット: コンテンツ領域の下に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
次の例は、パネル・ページ・コンテナ内で宣言されているfacet
要素を示しています。ファセットのタイプは、常にそのname
属性で定義されます(表13-2を参照)。
<amx:panelPage id="pp1"> <amx:facet name="footer"> <amx:commandButton id="cb2" icon="folder.png" text="Move (#{myBean.mailcount})" action"move"/> </amx:facet> </amx:panelPage>
表13-2は、特定の親コンポーネントとともに使用できる事前定義済ファセット・タイプを示しています。
表13-2 ファセット・タイプと親コンポーネント
親コンポーネント | ファセット・タイプ(名前) |
---|---|
パネル・ページ( |
|
リスト・ビュー( |
|
カルーセル( |
|
パネル・スプリッタ( |
|
パネル・ストレッチ・レイアウト( |
|
データ視覚化コンポーネント。 詳細は、第13.5項「データ視覚化の指定」を参照してください。 |
|
ファセット・コンポーネントを追加するには:
「アウトライン」ペインに表示されるコンテキスト・メニューを使用して、ファセット・コンポーネントを別のコンポーネントの子として追加できます。コンテキスト・メニューには、選択した親コンポーネントで有効なオプションが表示されます。
ファセットを追加するには、「アウトライン」または「ソース」エディタで親コンポーネントを選択してから、次のいずれかの手順を実行します。
図13-2
に示すとおり、「アウトライン」でamx:PanelPageエントリを右クリックすると、ファセットを入力できます。
あるいは、次のようにします。
「パレット」で、ファセット・コンポーネントを表13-2に示す別のコンポーネントにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、コンポーネントの属性を設定します。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
ポップアップ(popup
)コンポーネントを使用して、ポップアップ・ウィンドウを表示します。このコンポーネントは、ビュー・コンポーネントの子として宣言できます。
ポップアップ・コンポーネントとともに次の操作を使用できます。
ポップアップを閉じる動作(closePopupBehavior
)の操作は、クライアントによってトリガーされるイベントに応答してポップアップを閉じる宣言的な方法です。
ポップアップ表示動作(showPopupBehavior
)の操作は、ポップアップ表示動作のtype
属性を使用して指定されたクライアントによってトリガーされるイベントに応答してポップアップを表示する宣言的な方法です。
ポップアップ表示動作のpopupId
属性には、その親コンポーネントに関連するポップアップ・コンポーネントの一意の識別子を指定します。ポップアップ表示動作のalignId
属性には、そのポップアップの位置合せを行う際の基準となるUIコンポーネントの一意の識別子を指定します。識別子を手動で設定するのは、手間がかかり、さらに無効な参照が発生する可能性もあるため、これらの2つの属性の値は標準の「プロパティ」ウィンドウと統合されているエディタを使用して設定します。これらの識別子を検証するために特別に定義されている監査ルールがあります(第12.3.2.4章「要素識別子とその監査に関する必知事項」を参照)。
ポップアップ表示動作のdecoration
属性では、指定されているalignId
と一致するコンポーネントを指すアンカーを持つようにポップアップを構成できます。これは、decoration
属性をanchor
に設定することで実行します(デフォルト値はsimple
)。
注意: alignId 属性を使用するためにdecoration="anchor" を定義する必要はありません。decoration="anchor" を使用する際に、alignId 属性が指定されていないかalignId で一致するものが見つからない場合は、decoration はsimple にデフォルト設定されるため、ポップアップ・コンポーネントには最小限の装飾が行われます。 |
ポップアップ表示動作のalign
属性に設定する値は、ポップアップ・コンポーネントの配置を示します(その配置を行うのに十分なスペースがある場合)。十分な領域がない場合は、MAFによって別の位置が選択されます。
ヒント: ポップアップを画面の中央に配置するには、パネル・ページ・コンポーネントのalignId 属性を設定してから、align="center" を使用してください。 |
ポップアップ表示動作コンポーネントの属性とその値の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次の例は、MAF AMXファイルで定義されているpopup
およびshowPopupBehavior
要素を示しています。
<amx:view> <amx:panelPage id="panelPage1"> <amx:commandButton id="commandButton1" text="Show Popup"> <amx:showPopupBehavior popupId="popup1" type="action" align="topStart" alignId="panelPage1" decoration="anchor"/> </amx:commandButton> </amx:panelPage> <amx:popup id="popup1" animation="slideUp" autoDismiss="true" backgroundDimming="off"/> </amx:view>
ポップアップ・コンポーネントは、ユーザー入力エラーが発生したときに検証メッセージを表示できます。詳細は、第13.9項「入力の検証」を参照してください。
ポップアップの子を設定するには、次の手順を実行します。
「アウトライン」ペインでpopup
要素を選択し、マウスの右ボタンをクリックします。
ポップアップ・コンポーネントのリストから「子の追加」を選択します(図13-3を参照)。
このポップアップ表示動作が起動したときに表示されるポップアップ・コンポーネントを選択します。
UIDemoという名前のMAFサンプル・アプリケーションは、ポップアップ・コンポーネントの使用方法と、スタイルを適用してページ・レイアウトを特定のパターンに合せる方法を示しています。UIDemoアプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。
パネル・スプリッタ(panelSplitter
)コンポーネントは、左側にあるナビゲーション・ペインで制御可能な複数のコンテンツ領域を表示するために使用します。パネル・スプリッタ・コンポーネントは、通常、表示サイズが大きいタブレット・デバイスで使用されます。これらのコンポーネントは、通常、表示領域の左側にリストが、右側にコンテンツがある場合に使用されます。
パネル・スプリッタには、MAF AMXページにパネル・スプリッタをドラッグ・アンド・ドロップすると自動的に生成されるナビゲータ・ファセット(第13.2.7項「ファセット・コンポーネントの使用方法」を参照)、およびパネル・アイテム・コンポーネントを含めることができます。パネル・アイテム(panelItem
)コンポーネントは、パネル・スプリッタのコンテンツ領域を表します。各パネル・スプリッタ・コンポーネントには少なくとも1つのパネル・アイテムが必要なため、パネル・スプリッタが作成されるときにパネル・アイテムがパネル・スプリッタに自動的に追加されます。各パネル・アイテム・コンポーネントには、パネル・グループ・レイアウトに含めることができるどのようなコンポーネントも含めることができます(第13.2.3項「パネル・グループ・レイアウト・コンポーネントの使用方法」を参照)。
「パネル・スプリッタ」の左側は、ナビゲータ・ファセット(navigator
)によって表されます。これは、アニメーション付きの複数のコンテンツのみが必要とされる場合(たとえば、異なるボタンを選択してコンテンツを切り替えるときにアニメーションを必要とする選択ボタン付きの複数コンテンツ領域を描画する場合)のオプションです。横モードの場合、このファセットがレンダリングされます。縦モードの場合、ボタンはコンテンツ領域の上に配置され、クリックされたときにこのファセットのコンテンツがポップアップ内で起動されます。
iOSプラットフォーム用の開発を行う場合、右から左の言語環境に対応するようにパネル・スプリッタとパネル・アイテムを構成するには、それらのanimation
属性をslideStart
、slideEnd
、flipStart
、flipEnd
のいずれかに設定します。パネル・アイテム・コンポーネントのanimation
属性は、パネル・スプリッタのanimation
属性をオーバーライドします。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次の例は、MAF AMXファイルに定義されたpanelSplitter
要素と、子コンポーネントとして使用されるnavigator
ファセットを示しています。
<amx:panelSplitter id="ps1" selectedItem="#{bindings.display.inputValue}" animation="flipEnd"> <amx:facet name="navigator"> <amx:listView id="lv1" value="#{bindings.data.collectionModel}" var="row" showMoreStrategy="autoScroll" bufferStrategy="viewport> ... </listView> </facet> <amx:panelItem id="x"> <amx:panelGroupLayout> ... </panelGroupLayout> </panelItem> <amx:panelItem id="y"> <amx:panelGroupLayout> ... </panelGroupLayout> </panelItem> </panelSplitter>
その他の例は、「ファイル」→「新」→「MAFサンプル」にあるUIDemoアプリケーションを参照してください。
詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
スペーサ(spacer
)コンポーネントを使用して、MAF AMXページでコンポーネントを区切るために空白領域を作成します。spacer
のheight
属性(垂直空白用)およびwidth
属性(水平空白用)を使用して、縦または横の空白をページに組み込むことができます。
スペーサ・コンポーネントを追加するには、次の手順を実行します。
「コンポーネント」ウィンドウで、「スペーサ」をMAF AMXページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次の例は、MAF AMXファイルに定義されたspacer
要素を示しています。
<amx:outputText id="ot1" value="This is a long piece of text for this page..."/> <amx:spacer id="s1" height="10"/> <amx:outputText id="ot2" value="This is some more lengthy text..."/>
表のレイアウト(tableLayout
)コンポーネントは、セルを含む行で構成される一般的な表のフォーマットでデータを表示するために使用します。
行のレイアウト(rowLayout
)コンポーネントは、表のレイアウトの単一の行を表します。表のレイアウト・コンポーネントには、1つ以上の行のレイアウト・コンポーネント、または行のレイアウト・コンポーネントを生成できるイテレータ・コンポーネントのいずれかが含まれている必要があります。
セル・フォーマット(cellFormat
)コンポーネントは、行のレイアウトのセルを表します。行のレイアウト・コンポーネントには、1つ以上のセル・フォーマット・コンポーネント、セル・フォーマット・コンポーネントを生成できるイテレータ・コンポーネント、属性リスト・イテレータ・コンポーネントまたはファセット定義コンポーネントのいずれかが含まれている必要があります。
表のレイアウト構造では、セル・コンテンツで割合による高さを使用したり、表構造全体に高さをまとめて割り当てることはできません。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスの次の属性の説明を参照してください。
表のレイアウト・コンポーネントのlayout
属性およびwidth
属性
行のレイアウト・コンポーネントのwidth
属性およびheight
属性
表のレイアウト・コンポーネントを追加するには:
「コンポーネント」ウィンドウで、「表のレイアウト」をMAF AMXページにドラッグ・アンド・ドロップします。
必要な数の行のレイアウト・コンポーネント、イテレータ・コンポーネント、属性リスト・イテレータ・コンポーネントまたはファセット定義の子コンポーネントを表のレイアウト・コンポーネントに挿入します。
セル・フォーマット・コンポーネント、イテレータ・コンポーネント、属性リスト・イテレータ・コンポーネントまたはファセット定義の子コンポーネントをそれぞれの行のレイアウト・コンポーネントに挿入します。
「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次の例は、MAF AMXファイルで定義されているtableLayout
要素およびその子を示しています。
<amx:tableLayout id="tableLayout1" rendered="#{pageFlowScope.pRendered}" styleClass="#{pageFlowScope.pStyleClass}" inlineStyle="#{pageFlowScope.pInlineStyle}" borderWidth="#{pageFlowScope.pBorderWidth}" cellPadding="#{pageFlowScope.pCellPadding}" cellSpacing="#{pageFlowScope.pCellSpacing}" halign="#{pageFlowScope.pHalign}" layout="#{pageFlowScope.pLayoutTL}" shortDesc="#{pageFlowScope.pShortDesc}" summary="#{pageFlowScope.pSummary}" width="#{pageFlowScope.pWidth}"> <amx:rowLayout id="rowLayout1"> <amx:cellFormat id="cellFormatA" rowSpan="2" halign="center"> <amx:outputText id="otA" value="Cell A"/> </amx:cellFormat> <amx:cellFormat id="cellFormatB" rowSpan="2" halign="center"> <amx:outputText id="otB" value="Cell B (wide content)"/> </amx:cellFormat> <amx:cellFormat id="cellFormatC" rowSpan="2" halign="center"> <amx:outputText id="otC" value="Cell C"/> </amx:cellFormat> </amx:rowLayout> <amx:rowLayout id="rowLayout2"> <amx:cellFormat id="cellFormatD" halign="end"> <amx:outputText id="otD" value="Cell D"/> </amx:cellFormat> <amx:cellFormat id="cellFormatE"> <amx:outputText id="otE" value="Cell E"/> </amx:cellFormat> </amx:rowLayout> </amx:tableLayout>
デック(deck
)コンポーネントは、一度に1つの子コンポーネントを示すコンテナを表します。表示されている1つの子コンポーネント(displayedChild
属性で定義)から別の子コンポーネントへの遷移は、遷移(transition
)操作で有効になります。遷移はアニメーションの形態で行うことができます。遷移の詳細は、第12.2.11項「ページ遷移スタイルの指定方法」を参照してください。
デックは、前後に移動できます。
デック・コンポーネントを追加するには、次の手順を実行します。
「コンポーネント」ウィンドウで、「デック」をMAF AMXページにドラッグ・アンド・ドロップします。
必要な数の遷移操作および子UIコンポーネントをデック・コンポーネントに挿入します。
「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次の例は、MAF AMXファイルで定義されているdeck
要素およびその子を示しています。デック・コンポーネントのdisplayedChild
属性は、表示する子コンポーネントIDを定義します。通常、これは、ボタンを1つ選択などのコンポーネントまたはその他の選択コンポーネントによって制御されます。
<amx:deck id="deck1" rendered="#{pageFlowScope.pRendered}" styleClass="#{pageFlowScope.pStyleClass}" inlineStyle="width:95px;height:137px;overflow:hidden; #{pageFlowScope.pInlineStyle}" landmark="#{pageFlowScope.pLandmark}" shortDesc="#{pageFlowScope.pShortDesc}" displayedChild="#{pageFlowScope.pDisplayedChild}"> <amx:transition triggerType="#{pageFlowScope.pTriggerType}" transition="#{pageFlowScope.pTransition}"/> <amx:transition triggerType="#{pageFlowScope.pTriggerType2}" transition="#{pageFlowScope.pTransition2}"/> <amx:commandLink id="linkCardBack1" text="Card Back">> <amx:setPropertyListener from="linkCardA" to="#{pageFlowScope.pDisplayedChild}"/> </amx:commandLink> <amx:commandLink id="linkCardA1" text="Card Front A"> <amx:setPropertyListener id="setPL1" from="linkCardB" to="#{pageFlowScope.pDisplayedChild}"/> </amx:commandLink> <amx:commandLink id="linkCardB1" text="Card Front B"> <amx:setPropertyListener id="setPL2" from="linkCardC" to="#{pageFlowScope.pDisplayedChild}"/> </amx:commandLink> <amx:commandLink id="linkCardC1" text="Card Front C"> <amx:setPropertyListener id="setPL3" from="linkCardD" to="#{pageFlowScope.pDisplayedChild}"/> </amx:commandLink> <amx:commandLink id="linkCardD1" text="Card Front D"> <amx:setPropertyListener id="setPL4" from="linkCardE" to="#{pageFlowScope.pDisplayedChild}"/> </amx:commandLink> <amx:commandLink id="linkCardE1" text="Card Front E"> <amx:setPropertyListener id="setPL5" from="linkCardBack" to="#{pageFlowScope.pDisplayedChild}"/> </amx:commandLink> </amx:deck>
詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
フラグメント(fragment
)コンポーネントによってMAF AMXページ・コンテンツの共有が可能になります。このコンポーネントは、MAF AMXフラグメント・ファイルとともに使用されます。詳細は、第12.3.1.6項「ページ・コンテンツの共有」を参照してください。
フラグメント・コンポーネントを追加するには、次の手順を実行します。
「コンポーネント」ウィンドウで、「フラグメント」をMAF AMXページにドラッグ・アンド・ドロップします。
「フラグメントの挿入」ダイアログを使用して、フラグメントのSrc属性をフラグメント・ファイル(.amxf
)に設定します。
オプションで、「構造」ビューを使用して、属性、属性リスト、ファセットなどの子コンポーネントを追加します。
「プロパティ」ウィンドウを使用して、追加したすべてのコンポーネントの属性を設定します。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
第12.3.1項「MAF AMXページの操作方法」には、MAF AMXページおよび対応するMAF AMXフラグメント・ファイルに追加されたfragment
要素を示す2つの例があります。
FragmentDemoという名前のMAFサンプル・アプリケーションは、フラグメントの作成および使用方法を示しています。このサンプル・アプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。
MAF AMXアプリケーション機能を開発する際に、次のUIコンポーネントを使用できます。
入力テキスト(第13.3.1項「入力テキスト・コンポーネントの使用方法」を参照)
入力数値スライダ(第13.3.2項「入力数値スライダ・コンポーネントの使用方法」を参照)
入力日(第13.3.3項「入力日コンポーネントの使用方法」を参照)
出力テキスト(第13.3.4項「出力テキスト・コンポーネントの使用方法」を参照)
ボタン(第13.3.5項「ボタンの使用方法」を参照)
リンク(第13.3.6項「リンクの使用方法」を参照)
イメージ(第13.3.7項「イメージの表示方法」を参照)
チェックボックス(第13.3.8項「チェックボックス・コンポーネントの使用方法」を参照)
ブール・スイッチ(第13.3.9項「ブール・スイッチ・コンポーネントの使用方法」を参照)
チェックボックスを複数選択(第13.3.10項「チェックボックスを複数選択コンポーネントの使用方法」を参照)
選択肢を複数選択(第13.3.11項「選択肢を複数選択コンポーネントの使用方法」を参照)
選択肢(第13.3.14項「選択肢コンポーネントの使用方法」を参照)
選択ボタン(第13.3.12項「選択ボタン・コンポーネントの使用方法」を参照)
ラジオ・ボタン(第13.3.13項「ラジオ・ボタン・コンポーネントの使用方法」を参照)
リスト・ビュー(第13.3.15項「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」を参照)
カルーセル(第13.3.16項「カルーセル・コンポーネントの使用方法」を参照)
フィルム・ストリップ(第13.3.17項「フィルム・ストリップ・コンポーネントの使用方法」を参照)
Verbatim (第13.3.18項「Verbatimコンポーネントの使用方法」を参照)
出力HTML (第13.3.19項「出力HTMLコンポーネントの使用方法」を参照)
イテレータ(第13.3.20項「反復の有効化方法」を参照)
MAF AMXアプリケーション機能を開発する際は、UIコンポーネントの子として、操作、リスナー・タイプ・コンポーネント、コンバータなど、次のその他のコンポーネントも使用できます。
バンドルのロード(第13.3.21項「リソース・バンドルのロード方法」を参照)
アクション・リスナー(第13.3.22項「アクション・リスナーの使用方法」を参照)
プロパティ・リスナーの設定(第13.3.23項「プロパティ・リスナーの設定の使用方法」を参照)
日時の変換(第13.3.24項「日時の変換方法」を参照)
数値の変換(第13.3.25項「数値の変換方法」を参照)
ナビゲーション・ドラッグ動作(第13.3.26項「ドラッグ・ナビゲーションの有効化」を参照)
ロード・インジケータ動作(第13.3.27項「ロード・インジケータの使用方法」を参照)
UIコンポーネントを追加するには、「パレット」からMAF AMXページにそのコンポーネントをドラッグ・アンド・ドロップします(第12.3.2.1項「UIコンポーネントの追加」を参照)。その後に、「プロパティ」ウィンドウを使用して、コンポーネントの属性を設定します。各特定コンポーネントの属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
注意: MAF AMXページで、レイアウト・コンポーネント内にUIコンポーネントを配置します(第13.2項「ページ・レイアウトの設計」を参照)。<dvtm> ネームスペースの下で宣言するデータ視覚化コンポーネントを除き、UI要素は<amx> >ネームスペースの下で宣言します。 |
いくつかのUIコンポーネントにはイベント・リスナーを追加できます。詳細は、第13.10項「イベント・リスナーの使用方法」を参照してください。イベント・リスナーは、iOSとAndroidのどちらのデバイスでもMAF AMX実行時の記述のためにコンポーネントに適用できますが、それらのリスナーはデザインタイムでは何の効果も持ちません。
これらのUIコンポーネントにおけるアクセシビリティのサポートの詳細は、第13.8項「MAFのアクセシビリティのサポートの理解」を参照してください。
MAF AMXを使用してiOSプラットフォーム用に作成されたユーザー・インタフェースは、言語環境が左から右、右から左のどちらであっても正しく表示されます。後者の場合、コンポーネントは画面の左側ではなく右側から表示されます。
注意: MAFは、デザインタイムにEL式を評価しません。コンポーネントの属性の値が式に設定されている場合、この値はOEPEのプレビューでは式として表示され、実行時のコンポーネントの表示は異なる場合があります。 |
CompGalleryという名前のMAFサンプル・アプリケーションは、MAF AMX UIコンポーネントの作成および構成方法を示しています。UIDemoという名前のもう1つのサンプル・アプリケーションは、MAF AMXページでのコンポーネントのレイアウト方法を示しています。これらのサンプル・アプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。
入力テキスト(inputText
)コンポーネントは、編集可能テキスト・フィールドを表します。使用可能な入力テキスト・コンポーネントのタイプは次のとおりです。
標準単一行入力テキストで、これは、MAF AMXファイルのinputText
要素で宣言されます。
<amx:inputText id="text1" label="Text Input:" value="#{myBean.text}" />
パスワード入力テキスト:
<amx:inputText id="text1" label="Password Input:" value="#{myBean.text}" secret="true" />
複数行入力テキスト(テキスト領域とも呼ばれる):
<amx:inputText id="text1" label="Textarea:" value="#{myBean.text}" simple="true" rows="4" />
図13-4は、「プレビュー」ペインに表示されている入力テキスト・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:inputText id="inputText1" label="Input Text" value="text"/>
inputType
属性によって、コンポーネントでユーザー入力がどのように(テキスト(デフォルト)、電子メール・アドレス、数値、電話番号、URLのいずれかとして)解釈されるのかを定義できます。これらの入力タイプは、HTML5によって許容される値に基づいています。
入力テキスト・コンポーネントに入力される日時値とともに数値の変換を有効にするには、数値の変換(第13.3.25項「数値の変換方法」を参照)および日時の変換(第13.3.24項「日時の変換方法」を参照)コンポーネントを使用します。
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
いくつかのモバイル・デバイスでは、エンド・ユーザーが入力テキスト・フィールドをタップすると、キーボードが表示(スライドアップ)されます。入力テキストがMAF AMXページの唯一のコンポーネントである場合、ページがロードされるときに、デフォルトで入力フォーカスはこのフィールド上に配置され、キーボードが表示されます。
複数行入力テキストは、それが唯一のコンポーネントである場合、セカンダリ・ページに表示されることがあります。その場合、ページがロードされてキーボードが表示されたときに複数行入力テキストがフォーカスを受け取ります。
iOSデバイスとAndroidデバイスでは、入力テキスト・コンポーネントのレンダリングおよび動作は異なります。iPhoneおよびiPadでは、入力テキスト・コンポーネントが表示されるときに境界線がある場合とない場合があります。
入力テキスト・コンポーネントを作成する際は、次の点を考慮してください。
コンテンツを入力または編集するには、エンド・ユーザーはフィールド内をタップする必要があります。それにより、タップした場所に点滅する挿入カーソルが表示され、エンド・ユーザーがコンテンツを編集できるようになります。フィールドにコンテンツが含まれていない場合、挿入カーソルはフィールドの先頭に配置されます。
入力テキスト・コンポーネントによって表されるフィールドには、通常、プロンプトとして使用されるデフォルト・テキストが含まれていることがあります。エンド・ユーザーがそのようなフィールド内でキーボードのキーをタップすると、編集モードになったときにそのデフォルト・テキストがクリアされます。この動作は、入力テキストのhintText
属性を使用して有効化および構成されます。
入力テキスト・コンポーネントによって表されるフィールドには、選択済の外観はありません。選択は、フィールド内の点滅する挿入カーソルによって示されます。
エンド・ユーザーがフィールドに収まる数を超えたテキストを入力すると、タイピングの続行に従って一度に1文字ずつテキスト・コンテンツが左にシフトします。
複数行入力テキスト・コンポーネントは、任意の高さの長方形としてレンダリングされます。このコンポーネントでは、コンテンツが大きすぎてフィールドの境界内に収まらない場合のスクロールがサポートされています。テキスト領域が一杯になるとテキストの行が上にスクロールし、新しい行のテキストが追加されます。指定された表示領域に表示できる数よりも多くの行がある場合、エンド・ユーザーは上または下にフリックしてテキストの行をスクロールできます。コンポーネント内にスクロールバーが表示されてその領域がスクロール可能であることを示します。
パスワード・フィールドは入力された各文字を一時的にエコーし、その後、その文字をドットに変換してパスワードを保護します。
iOSでの入力テキスト・コンポーネントの外観および動作は、カスタマイズできます(第13.3.1.1項「入力テキスト・コンポーネントのカスタマイズ」を参照)。
MAF AMXでは、iOSデバイスでの入力の大文字化および修正をサポートしており、さらに「実行」ボタンまたは「検索」ボタンとして表示および機能し(図13-6参照)、単一行入力テキスト・コンポーネントではDataChangeEvent
をトリガーするモバイル・デバイスのソフト・キーパッドの右下にある「return」ボタン(図13-5を参照)をオーバーライドする機能もサポートしています。
表13-3に、入力テキスト・コンポーネントの属性をリストしますが、これらの属性を使用して、そのコンポーネントの外観および動作と、入力テキストによって表されるフィールドへの値の入力に使用されるソフト・キーパッドをカスタマイズできます。
表13-3 入力テキスト・コンポーネントの入力およびカスタマイズ属性
属性 | 値 | 説明 |
---|---|---|
|
|
テキスト・フィールドを使用する方法を示します。
iOSの「実行」ボタンおよび「検索」ボタンのサポートは変更されたり、任意の時点で終了される可能性がありますが、一部のiOSデバイスのキーパッドは強化機能を備えています。たとえば、単一行テキスト・フィールドに「return」ボタンを表示するかわりに、「実行」ボタンまたは「検索」ボタンですでに置き換えられている可能性があります。 |
|
|
入力テキストによって表されるフィールドの編集中に、iOSで値を大文字表記するための特別な処理をリクエストします。 このプロパティの設定はAndroidには影響しません。 |
|
|
入力テキストによって表されるフィールドの編集中に、iOSで値を修正するための特別な処理をリクエストします。 このプロパティの設定はAndroidには影響しません。 |
iOSデバイスのシミュレータでは、自動大文字化および自動修正のサポートが限定されているため、この機能をiOSデバイスでテストする必要があります。
入力数値スライダ(inputNumberSlider
)コンポーネントは、キーを使用して値を入力するかわりにスライダを使用して値の範囲から数値を選択できるようにします。スライダの溝またはトラックの塗り潰されている部分が、現在の値を視覚的に表しています。
スライダの値を数値的に示すには、出力または入力テキスト・コンポーネントとともに入力数値スライダを使用できます。入力テキスト・コンポーネントではスライダ値を直接入力することもできます。エンド・ユーザーが入力テキスト・フィールドをタップすると、数値モードのキーボードがスライドアップします。このキーボードは、スライドダウン・ボタンを使用するか、スライダ・コンポーネントからタップすることにより消去できます。
入力数値スライダ・コンポーネントは、常に、コンポーネントの定義済範囲内の最大値および最小値を表示します。
注意: 入力数値スライダ・コンポーネントは、正確な数値入力が必要な場合や値の範囲が広い場合(たとえば、0から1000)は使用しないでください。 |
次の例は、MAF AMXファイルで定義されているinputNumberSlider
要素を示しています。
<amx:inputNumberSlider id="slider1" value="#{myBean.count}"/>
図13-7は、「プレビュー」ペインに表示されている入力数値スライダ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:inputNumberSlider id="inputNumberSlider1" label="Input Number" minimum="0" maximum="20" stepSize="1" value="10"/>
入力数値スライダ・コンポーネントに入力される数値の変換を有効にするには、数値の変換コンポーネント(第13.3.25項「数値の変換方法」を参照)を使用します。
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
他のMAF AMX UIコンポーネントと同様に、入力数値スライダ・コンポーネントには通常の状態と選択済状態があります。コンポーネントは、いつでもタッチされたときに選択済状態になります。エンド・ユーザーは、スライダ値を変更するには、タッチしてからスライダ・ボタンを操作します。
入力数値スライダ・コンポーネントには、オプションのimageLeft
属性およびimageRight
属性があり、これらは、エンド・ユーザーに追加情報を提供するためにスライダのいずれかの側に表示可能なイメージを示します。
入力日(inputDate
)コンポーネントは、日付を入力するためのポップアップ入力フィールドを提示します。デフォルトの日付フォーマットは、現在のロケールに適切な省略の日付フォーマットです。たとえば、米語(ENU)のデフォルトの書式はmm/dd/yy
です。inputType
属性によって、コンポーネントが入力として日付、時刻または日時を受け入れるのかどうかが定義されます。タイムゾーンは、モバイル・デバイスに対して構成されているタイムゾーンに依存します。したがって、デバイスに関連しています。実行時に、入力日コンポーネントにはそのデバイスのネイティブのルック・アンド・フィールがあります。
次の例は、MAF AMXファイルで定義されているinputDate
要素を示しています。このコンポーネントのinputType
属性は、デフォルト値のdate
に設定されています。value
属性が読取り専用の場合、EL式またはその他のタイプの値に設定でき、value
が読取り専用でない場合は、EL式としてのみ指定できます。
<amx:inputDate id="inputDate1" label="Input Date" value="#{myBean.date}"/>
詳細は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
W3Cによって定義されているHTML5のグローバル日付と時刻
「ファイル」→「新」→「MAFサンプル」にあるCompGallery
MAF AMXは、テキストを表示するラベルとして使用するための出力テキスト(outputText
)コンポーネントを提供しています。
次の例は、MAF AMXファイルで定義されているoutputText
要素を示しています。
<amx:outputText id="ot1" value="output" styleClass="#{pageFlowScope.pStyleClass}"/>
図13-8は、「プレビュー」ペインに表示されている出力テキスト・コンポーネントを示しています。
出力テキスト・コンポーネントの数値および日時関連データの変換を容易にするには、数値の変換(第13.3.25項「数値の変換方法」を参照)および日時の変換(第13.3.24項「日時の変換方法」を参照)コンバータを使用します。
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGalleryおよびUIDemo
ボタン(commandButton
)コンポーネントは、アクション(たとえば、保存、取消し、送信)をトリガーするため、およびアプリケーション内で他のページへのナビゲーション(たとえば、戻る。第13.3.5.7項「戻るボタン・ナビゲーションの有効化」を参照)を有効化するために使用します。
ボタンは、次の方法のいずれかで使用できます。
テキスト・ラベル付きボタン。
テキスト・ラベルおよびイメージ・アイコン付きボタン。
注意: アイコン・イメージと配置(テキスト・ラベルの左または右)を定義できます。 |
イメージ・アイコンのみが付いたボタン(たとえば、レコードを追加または削除するための + および - ボタン)。
MAFでは、次の3つの表示領域に対して1つのデフォルト・ボタン・タイプがサポートされています。
最上部ヘッダー・バーに表示されるボタンで、MAF AMXページでは、ヘッダーは、ヘッダー、プライマリおよびセカンダリの各ファセットと組み合せたパネル・ページ・コンポーネント(第13.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)によって表されます(iPhoneではこれが一般的です)。
ヘッダー・ファセットには、ページ・タイトルが含まれています。
プライマリ・アクション・ファセットは、 ヘッダー・バーの左隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
セカンダリ・アクション・ファセットは、ヘッダー・バーの右隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
ページのコンテンツ領域に表示されるボタン。
ページのフッター・バーに表示されるボタン。MAF AMXページでは、フッターは、フッター・ファセットと組み合せたパネル・ページ・コンポーネント(第13.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)によって表されます。
フッター・ファセットは、コンテンツ領域の下に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
どのタイプでも、すべてのボタン・コンポーネントには次の3つの状態があります。
標準。
アクティブ: ボタンがエンド・ユーザーによってタップまたはタッチされたときの外観を表します。ボタンがタップされた(タッチされてリリースされた)ときに、ボタン・アクションが実行されます。タッチしたときにアクティブ化された外観が表示され、リリースしたときにアクションが実行されます。エンド・ユーザーがボタンにタッチした後に指をドラッグしてボタンから離した場合、アクションは実行されません。ただし、ボタンにタッチしている間中、アクティブ化された外観が表示されます。
無効。
ボタン・コンポーネントの外観は、adfmf-commandButton-
<style>
に設定したそのstyleClass
属性によって定義されます。表13-4に示すどのスタイルでも、MAF AMXページ内の有効な任意の場所に配置されているボタンに適用できます。
表13-4 主なボタン・スタイル
ボタン・スタイル名 | 説明 |
---|---|
デフォルト |
次の場所に配置されているボタンのデフォルト・スタイル
|
戻る |
いずれかのパネル・ページ・ファセット(プライマリ、セカンダリ、ヘッダー、フッター)に配置されるボタンの戻るスタイル。このスタイルを、デフォルト・ボタンに適用すると、ページに戻るという外観を表示できます。このボタン・スタイルは、Springboardに戻るまたはページに戻るボタンによく使用されます。 詳細は、第13.3.5.2項「戻るスタイル・ボタンの表示」を参照してください |
強調表示 |
いずれかのパネル・ページ・ファセット(プライマリ、セカンダリ、ヘッダー、フッター)またはMAF AMXページのコンテンツ領域に配置されるボタンの強調表示スタイル。このスタイルをボタンに追加すると、保存(または完了)ボタンで一般的なiPhoneボタンの外観を提供できます。 詳細は、第13.3.5.3項「強調表示スタイル・ボタンの表示」を参照してください |
アラート |
アラート・スタイルは削除の外観をボタンに追加します。詳細は、第13.3.5.4項「アラート・スタイル・ボタンの表示」を参照してください |
ボタンに適用して太い角丸の境界線でボタンを修飾できる角丸スタイル(adfmf-commandButton-rounded
)があります(図13-9を参照)。このスタイルは他のどのようなスタイルとも組み合せて定義できます。
MAF AMXには、多数の追加の装飾スタイルが用意されています(第13.3.5.5項「追加のボタン・スタイルの使用」参照)。
MAF AMXでのボタン・コンポーネントの子の操作および属性の処理には、特定の順序があります。詳細は、第13.3.5.8項「操作と属性の処理順序に関する必知事項」を参照してください。
「パネル・ページ」ファセットまたはコンテンツ領域内に配置可能な様々なデフォルト・スタイル・ボタンを次に示します。
テキスト・ラベルのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。
イメージ・アイコンのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。
次の例は、MAF AMXファイルで宣言されているcommandButton
要素を示しています。最初の例は、テキスト・ラベル付きのデフォルト・ボタンの定義を示しています。
<amx:panelPage id="pp1"> <amx:facet name="primary"> <amx:commandButton id="cb1" text="Cancel" action="cancel" actionListener="#{myBean.rollback}"/> </amx:facet> </amx:panelPage>
次の例は、イメージ・アイコン付きのデフォルト・ボタンの定義を示しています。
<amx:panelPage id="pp1"> <amx:facet name="primary"> <amx:commandButton id="cb1" icon="plus.png" action="add" actionListener="#{myBean.AddItem}"/> </amx:facet> </amx:panelPage>
次の例は、パネル・ページのフッター・ファセット内で宣言されているcommandButton
要素を示しています。
<amx:panelPage id="pp1"> <amx:facet name="footer"> <amx:commandButton id="cb2" icon="folder.png" text="Move (#{myBean.mailcount})" action="move"/> </amx:facet> </amx:panelPage>
次の例は、パネル・ページのコンテンツ領域の一部で宣言されているcommandButton
要素を示しています。
<amx:panelPage id="pp1"> <amx:commandButton id="cb1" text="Reply" actionListener="#{myBean.share}"/> </amx:panelPage>
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
MAFサンプル・アプリケーションであるCompGalleryは、「ファイル」→「新」→「MAFサンプル」にあります。
「パネル・ページ」ファセットまたはコンテンツ領域内に配置される様々な戻るスタイル・ボタンを次に示します。
テキスト・ラベルのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。
イメージ・アイコンのみが付いた「標準」、「アクティブ」または「無効」の各ボタン。
次の例は、MAF AMXファイルで宣言されているcommandButton
要素を示しています。
<amx:panelPage id="pp1"> <amx:facet name="header"> <amx:outputText value="Details" id="ot1"/> </amx:facet> <amx:facet name="primary"> <amx:commandButton id="cb1" text="Back" action="__back"/> </amx:facet> ... </amx:panelPage>
プライマリ・ファセット内にボタン・コンポーネント配置し、そのaction
属性を__back
に設定した場合は常に、MAF AMXによって戻る矢印スタイル設定が自動的に適用されます(図13-10参照)。
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
他のタイプのボタンと同様に、「パネル・ページ」ファセットまたはコンテンツ領域内に配置される強調表示スタイル・ボタンには、「標準」、「アクティブ」または「無効」の状態があります。
次の例は、MAF AMXファイルで宣言されているcommandButton
要素を示しています。
<amx:panelPage id="pp1"> <amx:facet name="secondary"> <amx:commandButton id="cb2" text="Save" action="save" styleClass="adfmf-commandButton-highlight"/> </amx:facet> </amx:panelPage>
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
「パネル・ページ」内に配置されるアラート・スタイル・ボタンには、「標準」、「アクティブ」または「無効」の状態があります。
次の例は、MAF AMXファイルで宣言されているcommandButton
要素を示しています。
<amx:commandButton id="cb1" text="Delete" actionListener="#{myBean.delete}" styleClass="adfmf-commandButton-alert" />
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
MAF AMXには、次の追加のボタン・スタイルが用意されています。
「暗い」スタイル
「明るい」スタイル
「小規模」スタイル
「大規模」スタイル
「強調表示」スタイル
「確認」スタイル
2種類の「代替」スタイル
MAFアプリケーションでは、次のコンテキスト内でボタン・コンポーネントを使用できます。
特定のアクションを実行するためのコンテンツ領域
ポップスタイル・アラート・メッセージ
ナビゲーション・バー
MAFでは、ナビゲーション・バーで使用する標準ボタンを作成できます。
編集ボタンで、エンド・ユーザーは編集またはコンテンツ操作モードに入ることができます。
取消ボタンで、エンド・ユーザーは、変更を保存することなく編集またはコンテンツ操作モードを終了できます。
保存ボタンで、エンド・ユーザーは、変更を保存して編集またはコンテンツ操作モードを終了できます。
完了ボタンで、エンド・ユーザーは、変更があれば保存して現在のモードを終了できます。
元に戻すボタンで、エンド・ユーザーは最後のアクションを元に戻すことができます。
やり直しボタンで、エンド・ユーザーは最後の元に戻したアクションをやり直すことができます。
戻るボタンで、エンド・ユーザーはSpringboardに戻ることができます。
ページに戻るボタンで、エンド・ユーザーはボタン・テキスト・ラベルによって識別されるページに戻ることができます。
追加ボタンで、エンド・ユーザーは新しいオブジェクトを追加または作成できます。
コンテンツ領域
ページのコンテンツ領域内に配置されたボタンは、そのページ内のボタンの場所およびコンテキストに指定されている特定のアクションを実行します。これらのボタンは、ナビゲーション・バーに配置されているボタンとは異なる外観を持っている場合があります。
アクション・シート
アクション・シート内に配置されるボタンの例には、「ノートの削除」ボタンおよび「取消」ボタンのグループがあります。
アクション・シート・ボタンでは、表示の幅が拡張されます。
アラート・メッセージ
「OK」ボタンは、パスワード入力に失敗した後のログイン検証などの検証メッセージ内に配置できます。
MAF AMXでは、前に訪問したページに戻るデフォルト動作を持つ戻るボタンを使用した移動がサポートされています。詳細は、第12.2.9項「UIコンポーネントを使用したアクション結果の指定方法」を参照してください。
__back
ナビゲーションを備えたパネル・ページのプライマリ・ファセットにボタン・コンポーネントを追加すると、そのボタンには、戻る矢印の視覚的スタイリングが自動的に設定されます(第13.3.5.2項「戻るスタイル・ボタンの表示」を参照)。これを無効にするには、styleClass
属性をamx-commandButton-normal
に設定します。
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
ボタン、リンク、リスト・アイテムなどのコンポーネントがアクティブになっている場合に、MAF AMXによって操作および属性が処理される順序は、次のとおりです。
次の子操作は、XMLファイルに表示される順序で処理されます。
プロパティ・リスナーの設定
アクション・リスナー
ポップアップ表示動作
ポップアップを閉じる動作
アクション・リスナー(actionListener
)属性が処理されて関連付けられたJavaメソッドが起動されます。
アクション(action
)属性が処理されて、ナビゲーション・ケースがあればそれに従います。
リンク(commandLink
)コンポーネントは、アクションをトリガーするためおよび他のビューへのナビゲーションを有効化するために使用します。
リンク・コンポーネントは、その子として任意のタイプのコンポーネントを定義できます。プロパティ・リスナーの設定(第13.3.23項「プロパティ・リスナーの設定の使用方法」を参照)、アクション・リスナー(第13.3.22項「アクション・リスナーの使用方法」を参照)、ポップアップ表示動作、ポップアップを閉じる動作(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)、検証動作(第13.9項「検証の入力」を参照)などのコンポーネントをリンク・コンポーネントの子として使用することで、クリックおよびジェスチャーを実行できるアクション可能な領域を作成できます。
リンク内にイメージ・コンポーネントを配置することで(第13.3.7項「イメージの表示方法」を参照)、クリック可能イメージを作成できます。
次の例は、MAF AMXファイルで宣言されているcommandLink
要素を示しています。
<amx:commandLink id="cl1" text="linked" action="gotolink" actionListener="#{myBean.doSomething}"/>
図13-14は、「プレビュー」ペインに表示されている基本的なリンク・コンポーネントを示しています。
次の例は、MAF AMXファイルで宣言されているcommandLink
要素を示しています。このコンポーネントは、panelFormLayout
コンポーネントおよびpanelLabelAndMessage
コンポーネント内に配置されます。
<amx:panelPage id="pp1"> <amx:panelFormLayout id="form"> <amx:panelLabelAndMessage id="panelLabelAndMessage1" label="Label"> <amx:commandLink id="cl1" text="linked" action="gotolink" actionListener="#{myBean.doSomething}"/> </amx:panelLabelAndMessage> </amx:panelFormLayout> </amx:panelPage>
図13-15は、フォーム内に配置され、「プレビュー」ペインに表示されているリンク・コンポーネントを示しています。
MAF AMXでのリンク・コンポーネントの子の操作および属性の処理には、特定の順序があります。詳細は、第13.3.5.8項「操作と属性の処理順序に関する必知事項」を参照してください。
MAF AMXでは、リンクと類似していますが、ページ間のナビゲーションは許可されない別のコンポーネントであるリンク(実行) (goLink
)コンポーネントが提供されています。このコンポーネントを使用して、外部ページへのリンクを有効化できます。図13-16は、「プレビュー」ペインに表示されているリンク(実行)コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:goLink id="goLink1" text="Go Link" url="http://example.com"/>
イメージは、リンク(実行)コンポーネントの子として指定できる唯一のコンポーネントです。
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
MAF AMXでは、ビットマップによって表されるイメージ(image
)コンポーネントを使用して、iOSおよびAndroidデバイス上にイメージを表示できます。
ボタンおよびリスト・ビューにイメージを配置するだけでなく、それをリンク・コンポーネント内に配置して(第13.3.6項「リンクの使用方法」を参照)クリック可能イメージを作成できます。
次の例は、MAF AMXファイル内のimage
要素定義を示しています。
<amx:image id="i1" styleClass="prod-thumb" source="images/img-big-#{pageFlowScope.product.uid}.png" />
Androidプラットフォームでサポートされているフォーマットは次のとおりです。
GIF
JPEG
PNG
BMP
iOSプラットフォームでサポートされているフォーマットは次のとおりです。
PNG
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGalleryおよびUIDemo
チェックボックス(selectBooleanCheckbox
)コンポーネントは、true
またはfalse
の値からの単一選択(選択済状態と選択解除状態の間で切り替えできる)を可能にするために作成するチェックボックスを表します。
チェックボックス・コンポーネントのlabel
属性を使用するとチェックボックスの左側にテキストを配置でき、text
属性を使用すると右側にテキストを配置できます。
次の例は、MAF AMXファイルで宣言されているselectBooleanCheckbox
要素を示しています。
<amx:selectBooleanCheckbox id="check1" label="Agree to the terms:" value="#{myBean.bool1}" valueChangeListener= "#{PropertyBean.ValueChangeHandler}"/>
図13-17は、「プレビュー」ペインに表示されている選択解除されたチェックボックス・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectBooleanCheckbox id="selectBooleanCheckbox1" label="Checkbox" value="false" valueChangeListener= "#{PropertyBean.ValueChangeHandler}"/>
<amx:selectBooleanCheckbox id="selectBooleanCheckbox1" label="Checkbox" value="true" valueChangeListener= "#{PropertyBean.ValueChangeHandler}"/>
図13-18は、「プレビュー」ペインに表示されている選択されたチェックボックス・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
iOSでは、ネイティブ・チェックボックス・コンポーネントはサポートされていません。ブール・スイッチは、通常、プロパティ・ページで使用され、ブール選択を可能にします(第13.3.9項「ブール・スイッチ・コンポーネントの使用方法」を参照)。
ブール・スイッチ(selectBooleanSwitch
)コンポーネントは、チェックボックスのかわりのスイッチ・メタファーとしてのブール値の編集を可能にします。
他のMAF AMX UIコンポーネントと同様に、このコンポーネントには標準および選択済の状態があります。値を切り替えるには、エンド・ユーザーはスイッチを1回タップ(タッチしてリリース)します。タップするたびにスイッチが切り替わります。
次の例は、MAF AMXファイルで定義されているselectBooleanSwitch
要素を示しています。
<amx:selectBooleanSwitch id="switch1" label="Flip switch:" onLabel="On" offLabel="Off" value="#{myBean.bool1}" valueChangeListener= "#{PropertyBean.ValueChangeHandler}"/>
図13-19は、「プレビュー」ペインに表示されているブール・スイッチ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectBooleanSwitch id="selectBooleanSwitch1" label="Switch" value="value1" valueChangeListener= "#{PropertyBean.ValueChangeHandler}"/>
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
チェックボックスを複数選択(selectManyCheckbox
)コンポーネントは、true
またはfalse
の値の複数選択を可能にするために使用するチェックボックスのグループを表します。これにより、グループ内の各チェックボックスの選択済と選択解除の切替えが可能になります。この選択メカニズムは、チェックボックスを複数選択コンポーネントに含まれているアイテムの選択コンポーネント(第13.3.14.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
注意: チェックボックスの複数選択コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。 |
次の例は、MAF AMXファイルで宣言されているselectManyCheckbox
要素を示しています。
<amx:selectManyCheckbox id="selectManyCheckbox1" label="Select shipping options" value="#{myBean.shipping}" valueChangeListener="#{PropertyBean.ValueChangeHandler}"> <amx:selectItem id="selectItem1" label="Air" value="#{myBean.shipping.air}"/> <amx:selectItem id="selectItem2" label="Rail" value="#{myBean.shipping.rail}"/> <amx:selectItem id="selectItem3" label="Water" value="#{myBean.shipping.water}"/> </amx:selectManyCheckbox>
図13-20は、「プレビュー」ペインに表示されているチェックボックスを複数選択コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectManyCheckbox id="selectManyCheckbox1" label="Select Many Checkbox" value="value2" valueChangeListener="#{PropertyBean.ValueChangeHandler}"> <amx:selectItem id="selectItem1" label="Selection 1" value="value1"/> <amx:selectItem id="selectItem2" label="Selection 2" value="value2"/> <amx:selectItem id="selectItem3" label="Selection 3" value="value3"/> </amx:selectManyCheckbox>
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
MAF AMXでは、ポップアップ・スタイル(デフォルト)とリスト・スタイル(使用可能な選択肢の数がデバイスの画面サイズを超えている場合に使用される)の、チェックボックスを複数選択コンポーネントを表示するための2つの代替方法が提供されています。
iPhoneとiPadの両方でのポップアップスタイルのチェックボックスを複数選択コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストがポップアップに表示されます。選択を行うには、エンド・ユーザーは1つ以上の選択肢をタップします。選択内容を保存するには、エンド・ユーザーはポップアップの外をタップするか、閉じるボタン( x )を使用してポップアップを閉じます。
ポップアップを閉じるときに、コンポーネントに表示されている値が、選択済の値に更新されます。
選択肢の数がデバイスのサイズを超える場合、スクロール可能なリスト・ビュー(第13.3.15項「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」を参照)を含むフルページ・ポップアップが生成されます。
iPhoneとiPadの両方でのリストスタイルのチェックボックスを複数選択コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストが表示されます。選択を行うには、エンド・ユーザーは上下にスクロールして使用可能な選択肢を参照し、1つ以上の選択肢をタップします。選択内容を保存するには、エンド・ユーザーは閉じるボタン( x )をタップします。
リストを閉じるときに、コンポーネントに表示されている値が、選択済の値に更新されます。
注意: どちらの場合も、選択を取り消すメカニズムは提供されていません。 |
選択肢を複数選択(selectManyChoice
)コンポーネントは、リストの複数の値の選択を可能にします。この選択メカニズムは、チェックボックスを複数選択コンポーネントに含まれているアイテムの選択コンポーネント(第13.3.14.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
注意: チェックボックスを複数選択コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。 |
次の例は、MAF AMXファイルで宣言されているselectManyChoice
要素を示しています。
<amx:selectManyChoice id="check1" label="Select Option:" value="#{myBean.shipping}" valueChangeListener="#{PropertyBean.ValueChangeHandler}"> <amx:selectItem id="selectItem1" label="Signature Required" value="signature" /> <amx:selectItem id="selectItem2" label="Insurance" value="insurance" /> <amx:selectItem id="selectItem3" label="Delivery Confirmation" value="deliveryconfirm"/> </amx:selectManyChoice>
<amx:selectManyChoice id="check1" label="Select Shipping Options:" value="#{myBean.shipping}"> <amx:selectItems id="selectItems1" value="#{myBean.shippingOptions}"/> </amx:selectManyChoice>
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
すべてのサポートされているデバイス上の選択肢を複数選択コンポーネントの外観と動作は、チェックボックスを複数選択コンポーネントとほとんど同一です(詳細は、第13.3.10項「チェックボックスを複数選択コンポーネントの使用方法」を参照してください)。
選択ボタン(selectOneButton
)コンポーネントは、常に1つのボタンがアクティブになっている、アクションをリストするボタン・グループを表します。この選択メカニズムは、選択ボタン・コンポーネントに含まれているアイテムの選択コンポーネント(第13.3.14.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
注意: 選択ボタン・コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。 |
次の例は、MAF AMXファイルで定義されているselectOneButton
要素を示しています。
<amx:selectOneButton id="bg1" value="#{myBean.myState}" valueChangeListener="#{PropertyBean.ValueChangeHandler}"> <amx:selectItem id="selectItem1" label="Yes" value="yes"/> <amx:selectItem id="selectItem2" label="No" value="no"/> <amx:selectItem id="selectItem3" label="Maybe" value="maybe"/> </amx:selectOneButton>
図13-22は、「プレビュー」ペインに表示されている選択ボタン・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectOneButton id="selectOneButton1" label="Select Button" value="value1" valueChangeListener="#{PropertyBean.ValueChangeHandler}"> <amx:selectItem id="selectItem1" label="Value 1" value="value1"/> <amx:selectItem id="selectItem2" label="Value 2" value="value2"/> <amx:selectItem id="selectItem3" label="Value 3" value="value3"/> </amx:selectOneButton>
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
ラジオ・ボタン(selectOneRadio
)コンポーネントは、使用可能な選択肢をリストするラジオ・ボタンのグループを表します。この選択メカニズムは、ラジオ・ボタン・コンポーネントに含まれているアイテムの選択コンポーネント(第13.3.14.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
注意: ラジオ・ボタン・コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。 |
次の例は、MAF AMXファイル内のselectOneRadio
要素定義を示しています。最初の例は、アイテムの選択コンポーネントを使用したラジオ・ボタンの定義を示しています。
<amx:selectOneRadio id="radio1" label="Choose a pet:" value="#{myBean.myPet}" valueChangeListener="#{PropertyBean.ValueChangeHandler}"> <amx:selectItem id="selectItem1" label="Cat" value="cat"/> <amx:selectItem id="selectItem2" label="Dog" value="dog"/> <amx:selectItem id="selectItem3" label="Hamster" value="hamster"/> <amx:selectItem id="selectItem4" label="Lizard" value="lizard"/> </amx:selectOneRadio>
次の例は、アイテムの選択コンポーネントを使用したラジオ・ボタンの定義を示しています。
<amx:selectOneRadio id="radio1" label="Choose a pet:" value="#{myBean.myPet}" valueChangeListener="#{PropertyBean.ValueChangeHandler}"> <amx:selectItems id="selectItems1" value="myBean.allPets"/> </amx:selectOneRadio>
図13-23は、「プレビュー」ペインに表示されているブール・スイッチ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectOneRadio id="selectOneRadio1" label="Radio Button" value="value1" valueChangeListener="#{PropertyBean.ValueChangeHandler}"> <amx:selectItem id="selectItem1" label="Value 1" value="value1"/> <amx:selectItem id="selectItem2" label="Value 2" value="value2"/> <amx:selectItem id="selectItem3" label="Value 3" value="value3"/> </amx:selectOneRadio>
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
選択肢(selectOneChoice
)コンポーネントは、リストからの単一の値の選択を可能にするために使用するコンボ・ボックスを表します。この選択メカニズムは、選択肢コンポーネントに含まれているアイテムの選択コンポーネント(第13.3.14.3項「アイテムの選択コンポーネントの違いに関する必知事項」を参照)によって提供されます。
注意: 選択肢コンポーネントには、アイテムの選択コンポーネントを1つ以上含めることができます。 |
次の例は、MAF AMXファイルのselectOneChoice
要素の定義をselectItem
サブ要素とともに示しています。
<amx:selectOneChoice id="choice1" label="Your state:" value="#{myBean.myState}" valueChangeListener="#{PropertyBean.ValueChangeHandler}"> <amx:selectItem id="selectItem1" label="Alaska" value="AK"/> <amx:selectItem id="selectItem2" label="Alabama" value="AL"/> <amx:selectItem id="selectItem3" label="California" value="CA"/> <amx:selectItem id="selectItem4" label="Connecticut" value="CT"/> </amx:selectOneChoice>
次の例は、MAF AMXファイルのselectOneChoice
要素の定義をselectItems
サブ要素とともに示しています。
<amx:selectOneChoice id="choice1" label="Your state:" value="#{myBean.myState}" valueChangeListener="#{PropertyBean.ValueChangeHandler}"> <amx:selectItems id="selectItems1" value="myBean.allStates"/> </amx:selectOneChoice>
図13-24は、「プレビュー」ペインに表示されている選択肢コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectOneChoice id="selectOneChoice1" label="Choice" value="value1" valueChangeListener="#{PropertyBean.ValueChangeHandler}"> <amx:selectItem id="selectItem1" label="Value 1" value="value1"/> <amx:selectItem id="selectItem2" label="Value 2" value="value2"/> <amx:selectItem id="selectItem3" label="Value 3" value="value3"/> </amx:selectOneChoice>
詳細、図および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
MAF AMXでは、選択肢コンポーネントを表示するため、ポップアップ・スタイルとドロップダウン・スタイルの2つの代替方法が提供されています。
iPhoneでのネイティブ選択肢コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストが、デフォルトで最初のオプションが選択された状態で表示されます。選択を行うには、エンド・ユーザーは上下にスクロールして使用可能な選択肢を参照します。選択内容を保存するには、エンド・ユーザーはツール・バーの「終了」をタップします。
iPadでは、ユーザーの対話は、次の点を除いてiPhoneにおける対話と同様です。
選択のリストは、ポップアップ・ダイアログに表示されます。
iPadのスタイリングが選択のリストの周囲に実装され、リストのソースを示すためにノッチが使用されます。
アイテムを選択しないで選択のリストを閉じるには、エンド・ユーザーはポップアップ・ダイアログの外をタップする必要があります。
注意: 選択のリストおよびツール・バーを表示するためのUIは、ブラウザにネイティブであり、CSSを使用してスタイリングすることはできません。 |
選択肢コンポーネント内のリスト値は、無効として表示できます。
選択肢の数がデバイスの表示サイズを超える場合、ネイティブな方法でスクロール可能なリスト・ページが生成されます。
Androidデバイスでのネイティブ選択肢コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると、ポップアップ・ダイアログ形式の選択肢のリストが表示されます。選択肢の数がデバイスのサイズ内に収まる場合は単純なポップアップが表示されます。この場合次のようになります。
選択リストの1つのアイテムを1回タップすると、そのアイテムが選択され、ポップアップが閉じます。選択内容は選択肢コンポーネント・ラベルに反映されます。
ポップアップの外で1回タップするか戻るキーをクリックすると、変更が適用されることなくポップアップが閉じます。
表示される選択肢の数がデバイス・サイズ内に収まらない場合は、ポップアップにスクロール可能リストが含まれます。その場合は次のようになります。
選択リストの1つのアイテムを1回タップすると、そのアイテムが選択され、ポップアップが閉じます。選択内容は選択肢コンポーネント・ラベルに反映されます。
戻るキーをクリックすると、変更が適用されることなくポップアップが閉じます。
アイテムの選択(selectItems
)コンポーネントは、複数選択コンポーネントと単一選択コンポーネントの両方で選択できるオブジェクトのリストを提供します。
アイテムの選択(selectItem
)コンポーネントは、選択コンポーネントの単一選択可能なアイテムを表しています。
リスト・ビュー(listView
)コンポーネントを使用して、エンド・ユーザーが1つ以上のオプションを選択できる選択肢のリストとしてデータを表示します。
通常、リスト・アイテム(listItem)・コンポーネントは、リスト・ビュー・コンポーネント内の1つのアイテムを表しており、リスト・アイテム・コンポーネントをリスト・ビュー内に配置して、データ・アイテムのリストのレイアウト設定およびスタイル設定を行います。各アイテムには複数のリスト・アイテム・コンポーネントが含めることができ、この場合、リスト・アイテム・コンポーネントがアイテム(行)を満たすと、超過リスト・アイテム・コンポーネントは後続行に折り返します。これを構成するには、リスト・ビュー・レイアウト属性をカードに設定します(デフォルト・レイアウトは行で、リスト内の1つのアイテム当たり1つのリスト・アイテム・コンポーネントを表示します)。詳細は、第6.3.15.3項「リスト・ビュー・レイアウトの構成」を参照してください。セクションの追加
リスト・ビューによって、次のうち1つを定義できます。
リスト(コレクション)内のアイテム数に基づいてレプリケートされる選択可能アイテム。
リスト・ビューのvar属性およびvalue属性を指定することなく子リスト・アイテム・コンポーネントを追加することによって生成される静的アイテム。これらの静的アイテムは必要な数を追加できます。これは、設計時にリストのコンテンツがわかっている場合に便利です。この場合、リストは編集可能ではなく、メニュー・アイテムのセットのように動作します。
次のタイプのリスト・ビュー・コンポーネントを作成できます。
基本リスト
次の例は、MAF AMXファイルで定義されているlistView
要素を示しています。この定義は、基本コンポーネントに対応しています。
<amx:listView id="listView1" showMoreStrategy="autoScroll" bufferStrategy="viewport"> <amx:listItem id="listItem1"> <amx:outputText id="outputText1" value="ListItem Text"/> </amx:listItem> <amx:listItem id="listItem2"> <amx:outputText id="outputText3" value="ListItem Text"/> </amx:listItem> <amx:listItem id="listItem3"> <amx:outputText id="outputText5" value="ListItem Text"/> </amx:listItem> <amx:listItem id="listItem4"> <amx:outputText id="outputText7" value="This is really long text to test how it is handled"/> </amx:listItem> </amx:listView>
図13-25は、デザインタイムの基本リスト・ビュー・コンポーネントを示しています。
次の例は、MAF AMXファイル内のlistView
要素のもう1つの定義を示しています。この定義も基本コンポーネントに対応していますが、このリスト・ビューの値はコレクションによって設定されます。
<amx:listView id="list1" value="#{myBean.listCollection}" var="row" showMoreStrategy="autoScroll" bufferStrategy="viewport"> <amx:listItem actionListener="#{myBean.selectRow}" showLinkIcon="false" id="listItem1"> <amx:outputText value="#{row.name}" id="outputText1"/> </amx:listItem> </amx:listView>
注意: 現在は、リスト・アイテム内の出力テキストに含まれるテキスト文字列が長すぎて1行に収まらない場合、そのテキストは行の端で折り返されません。この動作を回避するには、件名の出力テキスト子コンポーネントのinlineStyle 属性に、"white-space: normal;" を追加します。 |
アイコン付きリスト
次の例は、MAF AMXファイルで定義されているlistView
要素を示しています。この定義は、アイコン付きコンポーネントに対応しています。
<amx:listView id="list1" value="#{myBean.listCollection}" var="row" showMoreStrategy="autoScroll" bufferStrategy="viewport"> <amx:listItem id="listItem1"> <amx:tableLayout id="tl1" width="100%"> <amx:rowLayout id="rl1"> <amx:cellFormat id="cf11" width="40px" halign="center"> <amx:image id="image1" source="#{row.image}"/> </amx:cellFormat> <amx:cellFormat id="cf12" width="100%" height="43px"> <amx:outputText id="outputText1" value="#{row.desc}"/> </amx:cellFormat> </amx:rowLayout> </amx:tableLayout> </amx:listItem> </amx:listView>
図13-26は、デザインタイムのアイコンおよびテキスト付きリスト・ビュー・コンポーネントを示しています。
検索付きリスト
区切り付きリスト。このタイプのリストでは、データをグループ化して順序を示すことができます。リスト・ビュー・コンポーネントの属性によって、各区切りの特性が定義されます。属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
MAF AMXでは、次のことを実行できるリスト区切りが提供されています。
そのコンテンツを個別に閉じます。
各区切り内のアイテム数を表示します。
同時に閉じます。
次の例は、MAF AMXファイルで定義されているlistView
要素を示しています。この定義は、折りたたみ可能な区切りおよびアイテム数付きのコンポーネントに対応しています。
<amx:listView id="list1" value="#{bindings.data.collectionModel}" var="row" collapsibleDividers="true" collapsedDividers="#{pageFlowScope.mylistDisclosedDividers}" dividerMode="all" dividerAttribute="type" showDividerCount="true" showMoreStrategy="autoScroll" bufferStrategy="viewport" fetchSize="10"> <amx:listItem> <amx:outputText id="ot1" value="#{row.name}"> </amx:listItem> </amx:listView>
注意: この種類のリストはデータをソートしないだけでなく、受信するデータはソート済であると想定されるため、区切り付きリスト内のデータはdividerAttribute でソートする必要があります。 |
注意: リスト・ビュー・コンポーネントが編集モードになっている(つまり、そのeditMode 属性が指定されている)場合、区切りは表示されません。 |
区切りが表示されている場合、エンド・ユーザーは、リスト・ビューのローカライズされたアルファベット順のインデックス・ユーティリティ(dividerMode
属性がfirstLetter
に設定されているリスト・ビュー・コンポーネントで使用可能)を使用して特定の区切りにすばやく移動できます。このユーティリティは、sectionIndex
属性をoff
に設定することで無効化できます。
インデックス・ユーティリティ(indexer)は、インデックス・バーおよびインデックス・アイテムで構成され、次の特性があります。
リストにソートされていないデータまたは重複した区切りが含まれている場合、インデックス・アイテムは、リスト内の最初に出現したものを指します。
使用可能な文字のみがインデックスで強調表示され、その強調表示されたもののみがアクティブになります。これは、データ・モデルでは変更によってトリガーされます(エンド・ユーザーが「次へ」行アイテムをタップしたときなど)。
インデックスの大/小文字は区別されません。
不明な文字は、ハッシュ( # )記号で隠されます。
インデクサ文字は、リストにロードされた行でのみアクティブ化(タップ)できます。たとえば、リスト・ビューで、fetchSize
属性を使用して、文字Cまでの行がロードされた場合、インデクサではAからCまでの文字が有効になります。その他の文字は、行がさらにロードされるとインデクサに表示されます。
表13-5は、インデックス・ユーティリティに定義可能なスタイルを示しています。
表13-5 リスト・ビューのインデックス・スタイル
styleClass名 | 説明 |
---|---|
|
インデックス・バーのスタイルを定義します。 |
|
インデックス・バーの1つのアイテムのスタイルを定義します。 |
|
インデックス・バーの関連する区切りへのリンクを持つアイテムのスタイルを定義します。 |
|
インデックス・バーの文字のスタイルを定義します。 |
|
インデックス・バーの2つの文字間のブレットのスタイルを定義します。 |
|
インデックス・バーのすべての不明な文字を表す文字のスタイルを定義します。 |
表示可能な区切りを持つリスト・ビュー・コンポーネントがスクロールを提供するコンテナとして機能し、それがスクロールの対象となる場合、区切りはビューの上部に固定されます。この場合は、リスト・ビュー・コンポーネントの高さを明示的に指定する必要があります。その他すべての場合で、リスト・ビュー自体はスクロールを実行しないが親コンテナ(パネル・ページなど)のスクロールを使用する場合は、リスト・ビューに高さ制約の設定はなく、高さはその子コンポーネントによって決まります。このような定義された高さ制約がないことによって、アニメーション化された遷移および区切りの固定が効果的に無効化されます。
凹枠リスト
次の例は、MAF AMXファイルで定義されているlistView
要素を示しています。この定義は、凹枠コンポーネントに対応しています。
<amx:listView id="listView1" styleClass="adfmf-listView-insetList" showMoreStrategy="autoScroll" bufferStrategy="viewport"> <amx:listItem id="listItem1"> <amx:outputText id="outputText1" value="ListItem Text"/> </amx:listItem> <amx:listItem id="listItem2"> <amx:outputText id="outputText3" value="ListItem Text"/> </amx:listItem> <amx:listItem id="listItem3"> <amx:outputText id="outputText5" value="ListItem Text"/> </amx:listItem> <amx:listItem id="listItem4"> <amx:outputText id="outputText7" value="This is really long text to test how it is handled"/> </amx:listItem> </amx:listView>
図13-27は、デザインタイムの凹枠リスト・ビュー・コンポーネントを示しています。
次の例は、MAF AMXファイル内のlistView
要素のもう1つの定義を示しています。この定義も凹枠コンポーネントに対応していますが、このリスト・ビューの値はコレクションによって設定されます。
<amx:listView id="list1" value="#{CarBean.carCollection}" var="row" styleClass="adfmf-listView-insetList" showMoreStrategy="autoScroll" bufferStrategy="viewport" fetchSize="10"> <amx:listItem id="li1" action="go"> <amx:outputText id="ot1" value="#{row.name}"/> </amx:listItem> </amx:listView>
MAF AMXでのリスト・アイテム・コンポーネントの子の操作および属性の処理には、特定の順序があります。詳細は、第13.3.5.8項「操作と属性の処理順序に関する必知事項」を参照してください。
他のMAF AMXコンポーネントとは異なり、リスト・ビューをMAF AMXページにドラッグ・アンド・ドロップし、データ・コントロールからのコンテンツでlistViewを生成すると、「コンポーネント・ギャラリ」というダイアログが表示されます。このダイアログでリスト・ビューに対して特定のレイアウトを選択できます。図13-28は、リスト・ビュー・コンポーネント・ギャラリを示しています。
表13-6には、リスト・ビュー・コンポーネント・ギャラリに表示されるサポート済のリスト・フォーマットが一覧表示されています。
表13-6 リスト・フォーマット
フォーマット | 要素行の値 |
---|---|
シンプル |
|
メイン-サブ・テキスト |
|
開始-終了 |
|
四分円 |
|
選択したリスト・フォーマットの「ListViewギャラリ」に表示されている「バリエーション」は、区切りか先頭イメージのいずれかまたは両方を追加するためのオプションで構成されています。
先頭イメージのあるバリエーションを選択すると、イメージ行が「リスト・アイテム・コンテンツ」表に追加されます。
区切りのあるバリエーションを選択すると、「区切り属性」フィールドがデフォルトの「区切りなし」ではなく、リスト内の最初の属性にデフォルトで設定され、「区切りモード」フィールドにそのデフォルト値の「すべて」が移入されます。
「ListViewギャラリ」に表示されている「スタイル」オプションでは、シェブロンを抑制することも、凹枠スタイル・リストを使用することも、その両方を行うこともできます。
この選択によって、「リスト・ビューの編集」ダイアログの状態は変更されません。影響されるのは、生成されるMAF AMXマークアップのみです。
凹枠リストのあるスタイルを選択すると、生成されたMAF AMXマークアップのlistView
要素にadfmf-listView-insetList
スタイル・クラスが設定されます。
凹枠リストのある「シンプル」フォーマットの例を次に示します。
<amx:listView var="row" value="#{bindings.employees.collectionModel}" fetchSize="#{bindings.employees.rangeSize}" styleClass="adfmf-listView-insetList" id="listView2" showMoreStrategy="autoScroll" bufferStrategy="viewport"> <amx:listItem id="li2"> <amx:outputText value="#{row.employeename}" id="ot3"/> </amx:listItem> </amx:listView>
「ListViewギャラリ」の「説明」ペインは、現在選択されているバリエーションに基づいて更新されます。フォーマットには、メイン・スタイルの簡単な説明が示され、その後に選択したバリエーションの詳細が続きます。4つのメイン・スタイルに、それぞれ4つのバリエーションがあり、表13-7に示す16の固有の説明が提供されています。
表13-7 リスト・ビューのバリエーションとスタイル
リスト・フォーマット | バリエーション | 説明 |
---|---|---|
シンプル |
基本 |
テキスト・フィールドがリスト・アイテムの開始側に表示されます。 |
シンプル |
区切り |
テキスト・フィールドは、リスト・アイテムの開始側に、アイテムが区切りによりグループ化されて表示されます。 |
シンプル |
イメージ |
テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。 |
シンプル |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
メイン-サブ・テキスト |
基本 |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。 |
メイン-サブ・テキスト |
区切り |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。リスト・アイテムは区切りによってグループ化されます。 |
メイン-サブ・テキスト |
イメージ |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。 |
メイン-サブ・テキスト |
区切りおよびイメージ |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
開始-終了 |
基本 |
テキスト・フィールドがリスト・アイテムの両側に表示されます。 |
開始-終了 |
区切り |
テキスト・フィールドは、リスト・アイテムの両側に、アイテムが区切りによりグループ化されて表示されます。 |
開始-終了 |
イメージ |
テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。 |
開始-終了 |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
四分円 |
基本 |
テキスト・フィールドは、リスト・アイテムの四隅に表示されます。 |
四分円 |
区切り |
テキスト・フィールドは、リスト・アイテムの四隅に、アイテムが区切りによりグループ化されて表示されます。 |
四分円 |
イメージ |
テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。 |
四分円 |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
「パレット」→「データ」→「データ・コントロール」ペインからデータ・バインディングを選択した後、エディタにドロップすると、OEPEにはリストビュー・ギャラリが表示されます(図13-29を参照)。
ダイアログに入力する際は、次の点を考慮してください。
左側にあるイメージは、選択されているリスト・ビュー・フォーマットのメイン・コンテンツ要素を反映しています。
「値」列の編集可能セルには、静的テキスト文字列が移入されます(表13-8を参照)。
「リスト・アイテム・コンテンツ」セルにイメージが含まれている場合、「値」
セルはデフォルトで<add path to your image>
文字列になります。この場合、それをイメージのパスに置き換える必要があります。
「リスト・アイテム選択」は選択モードを示します。
リスト・ビューに、データがバインドされているのではなく、リスト・アイテム子コンポーネントが含まれている場合、区切り属性を設定できないため、「区切り属性」と「区切りモード」の両方のフィールドは無効化されています。
表13-8 リスト・ビューの静的テキスト文字列
リスト・フォーマット | 要素行の値 | 出力テキストの値 |
---|---|---|
シンプル |
|
|
メイン-サブ・テキスト |
|
|
開始-終了 |
|
|
四分円 |
|
|
図13-29は、リスト要素のレイアウトを指定できる「リスト・ビューの構成」ダイアログを示しています。
バインド済リスト・ビューを作成するときに考慮する特殊な場合は次のとおりです。
JavaBeanメソッドによって汎用性がないリストが戻される場合、図13-29に示すように「要素タイプ」フィールドを使用して、リスト・アイテム・コンテンツを作成する必要があります。
用意されているデータ・コレクション値がコレクションベースでない場合、「値」列によって、「値バインディング」列が空白値と置き換えられます。
詳細は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるUIDemo。このサンプルは、様々なタイプのリスト・ビュー・コンポーネントの使用方法と、スタイルを適用してページ・レイアウトを特定のパターンに合せる方法を示しています。
リスト・ビュー・コンポーネントを構成して、任意の長さのリストにデータを表示できます。これは、リストの下部にデータを追加することによって行います。
fetchSize
属性によって、リスト・ビュー・コンポーネントが最初にロードする行数が決定されます。fetchSize
で定義されているよりも多くの使用可能な行がある場合は、最後にフェッチされた行の後にクリック可能領域が表示されます。この領域内をクリックすると、fetchSize
に等しい行のバッチがさらにロードされます。表示する行がなくなるとクリック可能領域は表示されなくなります。
fetchSize
属性はロード済行の数を表していません。かわりに、何行ずつ増加するのかを表しています。リスト・ビュー・コンポーネントの作成時には、fetchSize
属性は、デフォルトでPageDef
イテレータのrangeSize
を指すEL式を使用するように設定されています。PageDef
ファイルの詳細は、第12.3.2.3.5項「生成されるドラッグ・アンド・ドロップ・アーティファクトに関する必知事項」および図12-40「PageDefファイル」を参照してください。fetchSize
をrangeSize
と同じ値に設定するとアプリケーションのパフォーマンスが向上します。
次の例は、データ・コントロールのtestResults
と呼ばれるコレクションから作成されたlistView
要素を示しています(第12.3.2.3項「データ・コントロールのビューへの追加」を参照)。
<amx:listView var="row" value="#{bindings.testResults.collectionModel}" fetchSize="#{bindings.testResults.rangeSize}">
前述の例では、fetchSize
属性はbindings.testResults
のrangeSize
を指しています。次の例は、このMAF AMXページのPageDef
ファイルの行を示しています。このPageDef
ファイルには、testResults
かバインドされるtestResultsIterator
というaccessorIterator
要素が含まれています。
<accessorIterator MasterBinding="Class1Iterator" Binds="testResults" RangeSize="25" DataControl="Class1" BeanClass="mobile.Test" id="testResultsIterator"/>
fetchSize
属性が-1に設定されている場合、すてのレコードが取得されます。
リスト・ビュー・コンポーネントの次の2つの属性は、スクロール動作を有効化します。
showMoreStrategy
: 必要な場合にさらに行をロードするためのリスト・ビュー・コンポーネントの計画を定義します。
リスト・ビュー・コンポーネントが親コンテナの1つによるスクロールの対象となるのではなく、独自にスクロールを提供する場合(「リスト・ビューで独自のスクロールを強制するには:」を参照)で、リスト・ビューが最後までスクロールされた場合は、showMoreStrategyが自動的に起動され、レコードの次のセットのフェッチが可能になります。
実行時に、この属性は自身をデフォルトで「さらに行をロード」リンクとして表します。
showMoreStrategy
属性の値を設定してリスト・ビューのスクロールおよび行表示動作を構成する方法の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
bufferStrategy
: 行に対するユーザー・インタフェースの保存方法を定義します。
リスト・ビューの高さが制限されており、親コンテナのいずれかによるスクロールの対象になるのではなく、独自のスクロールを提供できる場合(「リスト・ビューに独自のスクロールを適用するには:」を参照)、リスト・ビューには、以前は非表示だった行とそのコンテンツがフェッチされて表示されます。リスト・ビューは、次のいずれかの方法でこれを実現します。
隠し行の増加分を継続的にリストに追加する。
レンダリング・エンジン内で使用可能な追加行の数を制限し、リスト・ビューの表示可能領域(ビューポート)にある行のみを保存することで、MAFアプリケーションが使用するメモリーを減らします。
この機能は、listView
のbufferStrategy
属性を使用し、additive
(メモリー消費を気にしない場合)またはviewport
(メモリー使用量を減らそうとしている場合)のいずれかに設定することによって構成できます。後者の場合、スクロール中に新しい行の内容が表示されるまでに遅延が生じる可能性があります。空白行が表示される数を最小にするために、listView
のbufferSize
属性を設定できます。この属性は、行が存在している必要のある、ビューポートから非表示になるまでの距離(ピクセル単位)を決定します。
リスト・ビューで独自のスクロールを強制するには:
リスト・ビューを、パネル・ページの唯一の非ファセットの子にする。
リスト・ビューに固定の高さを設定する。次に例を示します。
inlineStyle="height: 200px;"
リスト・ビュー・コンポーネントのrangeChangeListener
属性(第13.10項「イベント・リスナーの使用方法」を参照)では、「さらに行をロード」リンクがアクティブ化されている場合またはリスト・ビューが最後までスクロールされている場合のJavaハンドラ・メソッドをバインドできます。このメソッドは、oracle.adfmf.amx.event.RangeChangeEvent
オブジェクトをパラメータとして使用し、「プロパティ」ウィンドウから「プロパティの編集 - 範囲変更リスナー」ダイアログを起動したときに作成されます。
ダイアログの「OK」をクリックすると、この設定がMAF AMXページのlistView
要素に追加されます。
<amx:listView id="listView1" rangeChangeListener="#{pageFlowScope.HRBean.goGet}" >
また、次の例に示すJavaメソッドがサンプルのHRBean
クラスに追加されます。
public void goGet(RangeChangeEvent rangeChangeEvent) { // Add event code here... }
注意: rangeChangeListener は、リスト・ビューによって新しいデータがフェッチされるたびにコールされます。RangeChangeEvent を使用して、さらにデータが使用可能かどうかを定義できます(第13.10項「イベント・リスナーの使用方法」を参照)。 |
リスト・ビューのアイテムは再配置できます。この機能は、iOSとAndroidのプラットフォームで類似しており、どちらも各リスト・アイテムの右マージンに沿って整列した再配置アイコンが表示されます。再配置操作は、エンド・ユーザーがハンドルとして再配置アフォーダンスを使用してリスト・アイテムにタッチしてドラッグしたときに開始されます。この操作は、エンド・ユーザーが表示画面から指を離したときに完了します。
注意: エンド・ユーザーがリスト・アイテム上の他の場所をタッチしてドラッグした場合は、リストが上下にスクロールします。 |
再配置ドラッグ操作によって、リスト・アイテムがドッキング解除され、エンド・ユーザーはリスト内でリスト・アイテムを上下に移動できるようになります。
そのアイテムを再配置可能にするには、リスト・ビューが静的ではなく編集モードになっており、移動を許容可能になっている必要があります。
次の例は、MAF AMXファイルで定義されているlistView
要素を示しています。この定義によって、リスト・モードを編集可能と読取り専用の間で切り替えることができる「編集」および編集停止ボタンが上部に表示されたリストが提示されます。
<amx:panelPage id="pp1"> <amx:commandButton id="edit" text="Edit" rendered="#{!bindings.inEditMode.inputValue}"> <amx:setPropertyListener id="spl1" from="true" to="#{bindings.inEditMode.inputValue}" type="action"/> </amx:commandButton> <amx:commandButton id="stop" text="Stop Editing" rendered="#{bindings.inEditMode.inputValue}"> <amx:setPropertyListener id="spl2" from="false" to="#{bindings.inEditMode.inputValue}" type="action"/> </amx:commandButton> <amx:listView id="lv1" value="#{bindings.data.collectionModel}" var="row" editMode="#{bindings.inEditMode.inputValue}" moveListener="#{MyBean.Reorder}"> <amx:listItem id="li1"> <amx:outputText id= "ot1" value="#{row.description}"> </amx:listItem> </amx:listView> </amx:panelPage>
詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
リスト・ビュー・コンポーネントは、各行が1つのリスト・アイテム・コンポーネントを含んでいる(デフォルト)行のセットとして、または、各カードが1つ以上のリスト・アイテム・コンポーネントを含んでいるカードのセットとしてレイアウトできます。
レイアウトを定義するには、リスト・ビューのlayout
属性を使用し、これをrows
またはcards
に設定します。カード・レイアウトを使用する場合は、次の点について考慮してください。
各リスト・アイテム・コンポーネントは、水平に並べられたカードのグループ内のカードとして表示されます。
使用可能なスペースがすべて消費されると、次のカードが新しい行で折り返されます。
リスト・ビュー内でリスト・アイテム・コンポーネント(カード)の水平配置を制御するには、リスト・ビューのhalign
属性をstart
、center
またはend
に設定します。
リスト・ビューの外観を一般的にカスタマイズするには、次の手順を実行します。
スキン内でデフォルトで定義されているカード・サイズをオーバーライドするには、リスト・アイテムのinlineStyle
属性を使用して新しい幅を指定します。詳細は、第13.6.1項「コンポーネント属性を使用したスタイルの定義方法」を参照してください。
注意: 値をautoにしたり、パーセント単位を使用することはできません。 |
あるいは、スキニングを使用して.amx-listView-cards .amx-listItem
セレクタから幅をオーバーライドできます(第13.6.3項「スキニングに関する必知事項」を参照)。
スキン内でデフォルトで定義されているカードの周囲のスペースをオーバーライドするには、リスト・アイテムのinlineStyle
属性を使用して新しいmargin-top
およびmargin-left
を指定し(第13.6.1項「コンポーネント属性を使用したスタイルの定義方法」を参照)、リスト・ビューのcontentStyle
属性を使用して新しいpadding-bottom
およびpadding-right
を指定します。
あるいは、スキニングを使用して.amx-listView-cards .amx-listItem
セレクタからmargin-topおよびmargin-leftをオーバーライドし、.amx-listView-cards .amx-listView-content
セレクタからpadding-bottom
およびpadding-right
をオーバーライドします(第13.6.3項「スキニングに関する必知事項」を参照)。
レイアウトの場合、halign
属性を使用して、わずかなリスト・アイテム・コンテンツの配置を変更します。ただし、この属性を使用しても、視覚的な効果がないことがあります。
カード・レイアウトを備えたリスト・ビュー・コンポーネントが編集モードにあると、レイアウトはrows
モードに切り替わります。
MAF AMXページ・レイアウトを特定のパターンに合せるために、一連の事前定義済スタイルを使用するstyleClass
属性(第13.6項「UIコンポーネントのスタイル設定」を参照)を介して定義される様々なタイプのリスト・ビュー・コンポーネントおよびスタイルを組み合せて使用できます。
UIDemoという名前のMAFサンプル・アプリケーションは、各コンポーネントのすべてのオプションのスタイルおよびそれに関連するレンダリングを示しています。UIDemoアプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。
次の例は、MAF AMXファイルで定義されているlistView
要素およびその子要素を示しています。各outputText
子要素がリスト内でどのようにレイアウトされるかは、listItem
のtableLayout
子要素によって指定されます。かわりに、styleClass
属性を使用してoutputText
要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-startText
に設定すると、出力テキスト・コンポーネントが行の開始(左)側に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-endText
に設定すると、出力テキスト・コンポーネントが行の終了(右)側に配置され、そのテキストに青いフォントが適用されます。右向き矢印が表示されるかどうかは、listItem
要素のshowLinkIcon
属性によって構成されます。この属性のデフォルト値はtrue
であるため、この例にはこの設定は含まれていません。
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row"> <amx:listItem id="listItem1"> <amx:tableLayout id="tl1" width="100%"> <amx:rowLayout id="rl1"> <amx:cellFormat id="cf1s1" width="10px"/> <amx:cellFormat id="cf11" width="60%" height="43px"> <amx:outputText id="outputText11" value="#{row.name}"/> </amx:cellFormat> <amx:cellFormat id="cf1s2" width="10px"/> <amx:cellFormat id="cf12" halign="end" width="40%"> <amx:outputText id="outputText12" value="#{row.status}" styleClass="adfmf-listItem-highlightText"/> </amx:cellFormat> </amx:rowLayout> </amx:tableLayout> </amx:listItem> </amx:listView>
図13-30は、各行の開始(左)側と終了(右)側に異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、テキストの他に各リスト・アイテムを拡張するリンクを表す右向き矢印が配置されています。
次の例は、MAF AMXファイルで定義されているlistView
要素およびその子要素を示しています。各outputText
子要素がリスト内でどのようにレイアウトされるかは、listItem
のtableLayout
子要素によって指定されます。かわりに、styleClass
属性を使用してoutputText
要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-startText
に設定すると、出力テキスト・コンポーネントが行の開始に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-endText
に設定すると、出力テキスト・コンポーネントが行の終了に配置され、そのテキストに青いフォントが適用されます。それぞれの特定の行に右向き矢印が表示されるかどうかは、listItem
要素のshowLinkIcon
属性によって構成されます。この例では、この属性はすべてのlistItem
要素に対してfalse
に設定されているため、右向き矢印は表示されません。
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row"> <amx:listItem id="listItem1" showLinkIcon="false"> <amx:tableLayout id="tl1" width="100%"> <amx:rowLayout id="rl1"> <amx:cellFormat id="cf1s1" width="10px"/> <amx:cellFormat id="cf11" width="60%" height="43px"> <amx:outputText id="outputText11" value="#{row.name}"/> </amx:cellFormat> <amx:cellFormat id="cf1s2" width="10px"/> <amx:cellFormat id="cf12" halign="end" width="40%"> <amx:outputText id="outputText12" value="#{row.status}" styleClass="adfmf-listItem-highlightText"/> </amx:cellFormat> </amx:rowLayout> </amx:tableLayout> </amx:listItem> </amx:listView>
図13-31は、各行の開始と終了に異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、リンクを表す右向き矢印は含まれていません。
次の例は、MAF AMXファイルで定義されているlistView
要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、終了テキストの下に配置されるサブテキストが含まれています。各outputText
子要素がリスト内でどのようにレイアウトされるかは、listItem
のtableLayout
子要素によって指定されます。かわりに、styleClass
属性を使用してoutputText
要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartText
に設定すると、出力テキスト・コンポーネントが行の左側に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-upperEndText
に設定すると、出力テキスト・コンポーネントが行の右側に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-captionText
に設定すると、出力テキスト・コンポーネントが、styleClass
属性がadfmf-listItem-upperStartText
に設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row"> <amx:listItem id="listItem1"> <amx:tableLayout id="tl1" width="100%"> <amx:rowLayout id="rl11"> <amx:cellFormat id="cf1s1" width="10px" rowSpan="2"/> <amx:cellFormat id="cf11" width="60%" height="28px"> <amx:outputText id="outputTexta1" value="#{row.name}"/> </amx:cellFormat> <amx:cellFormat id="cf1s2" width="10px"/> <amx:cellFormat id="cf12" halign="end" width="40%"> <amx:outputText id="outputTexta2" value="#{row.status}" styleClass="adfmf-listItem-highlightText"/> </amx:cellFormat> </amx:rowLayout> <amx:rowLayout id="rl12"> <amx:cellFormat id="cf13" columnSpan="3" width="100%" height="12px"> <amx:outputText id="outputTexta3" value="#{row.desc}" styleClass="adfmf-listItem-captionText"/> </amx:cellFormat> </amx:rowLayout> </amx:tableLayout> </amx:listItem> </amx:listView>
図13-32は、各行の開始と終了に異なるスタイルのテキストが追加され、左側の終了テキストの下にサブテキストが追加されたリスト・ビュー・コンポーネントを示しています。
次の例は、MAF AMXファイルで定義されているlistView
要素およびその子要素を示しています。このリスト・ビューには、メイン・テキストおよびサブテキストを含む行が移入されます。各outputText
子要素がリスト内でどのようにレイアウトされるかは、listItem
のtableLayout
子要素によって指定されます。かわりに、styleClass
属性を使用してoutputText
要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-mainText
に設定すると、出力テキスト・コンポーネントが行の開始に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-captionText
に設定すると、出力テキスト・コンポーネントが、styleClass
属性がadfmf-listItem-mainText
に設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row"> <amx:listItem id="listItem1"> <amx:tableLayout id="tla1" width="100%"> <amx:rowLayout id="rla1"> <amx:cellFormat id="cf1s1" width="10px" rowSpan="2"/> <amx:cellFormat id="cfa1" width="100%" height="28px"> <amx:outputText id="outputTexta1" value="#{row.name}"/> </amx:cellFormat> </amx:rowLayout> <amx:rowLayout id="rla2"> <amx:cellFormat id="cfa2" width="100%" height="12px" > <amx:outputText id="outputTexta2" value="#{row.desc}" styleClass="adfmf-listItem-captionText"/> </amx:cellFormat> </amx:rowLayout> </amx:tableLayout> </amx:listItem> </amx:listView>
図13-33は、各行にメイン・テキストとサブテキストとして異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。
次の例は、MAF AMXファイルで定義されているlistView
要素およびその子要素を示しています。このリスト・ビューには、アイコン、メイン・テキストおよびサブテキストを含むセルが移入されます。各outputText
子要素がリスト内でどのようにレイアウトされるかは、listItem
のtableLayout
子要素によって指定されます。かわりに、styleClass
属性を使用してoutputText
要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-mainText
に設定すると、出力テキスト・コンポーネントが行の左側に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-captionText
に設定すると、出力テキスト・コンポーネントが、styleClass
属性がadfmf-listItem-mainText
に設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。image
要素の位置は、それが囲むcellFormat
によって定義されます。
<amx:listView id="lv1" value="#{myBean.listCollection}" var="row"> <amx:listItem id="li1"> <amx:tableLayout id="tl1" width="100%"> <amx:rowLayout id="rl1"> <amx:cellFormat id="cf1" rowSpan="2" width="40px" halign="center"> <amx:image id="i1" source="#{row.image}"/> </amx:cellFormat> <amx:cellFormat id="cf2" width="100%" height="28px"> <amx:outputText id="ot1" value="#{row.name}"/> </amx:cellFormat> </amx:rowLayout> <amx:rowLayout id="rl2"> <amx:cellFormat id="cf3" width="100%" height="12px"> <amx:outputText id="ot2" value="#{row.desc}" styleClass="adfmf-listItem-captionText"/> </amx:cellFormat> </amx:rowLayout> </amx:tableLayout> </amx:listItem> </amx:listView>
図13-34は、各行に、アイコンおよびメイン・テキストとサブテキストとして異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。
次の例は、MAF AMXファイルで定義されているlistView
要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、各行の両側に配置されている2つの異なるタイプのテキストが含まれています。各outputText
子要素がリスト内でどのようにレイアウトされるかは、listItem
のtableLayout
子要素によって指定されます。かわりに、styleClass
属性を使用してoutputText
要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartText
に設定すると、出力テキスト・コンポーネントが行の左上隅に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-upperEndText
に設定すると、出力テキスト・コンポーネントが行の右上隅に配置され、そのテキストに大きいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerStartText
に設定すると、出力テキスト・コンポーネントが行の左下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerEndText
に設定すると、出力テキスト・コンポーネントが行の右下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。右向き矢印が表示されるかどうかは、listItem
要素のshowLinkIcon
属性によって構成されます。この属性のデフォルト値はtrue
であるため、この例にはこの設定は含まれていません。
<amx:listView id="lv1" value="#{myBean.listCollection}" var="row"> <amx:listItem id="li1"> <amx:tableLayout id="tl1" width="100%"> <amx:rowLayout id="rl1"> <amx:cellFormat id="cf1" width="10px" rowSpan="2"/> <amx:cellFormat id="cf2" width="60%" height="28px"> <amx:outputText id="ot1" value="#{row.name}"/> </amx:cellFormat> <amx:cellFormat id="cf3" width="10px" rowSpan="2"/> <amx:cellFormat id="cf4" width="40%" halign="end"> <amx:outputText id="ot2" value="#{row.status}" styleClass="adfmf-listItem-highlightText"/> </amx:cellFormat> </amx:rowLayout> <amx:rowLayout id="rla2"> <amx:cellFormat id="cf5" width="60%" height="12px"> <amx:outputText id="ot3" value="#{row.desc}" styleClass="adfmf-listItem-captionText"/> </amx:cellFormat> <amx:cellFormat id="cf6" width="40%" halign="end"> <amx:outputText id="ot4" value="#{row.priority}" styleClass="adfmf-listItem-captionText"/> </amx:cellFormat> </amx:rowLayout> </amx:tableLayout> </amx:listItem> </amx:listView>
図13-35は、各行の開始と終了に2つのタイプの異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、テキストの他に各リスト・アイテムを拡張するリンクを表す右向き矢印が配置されています。
次の例は、MAF AMXファイルで定義されているlistView
要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、各行の両側に配置されている2つの異なるタイプのテキストが含まれています。各outputText
子要素がリスト内でどのようにレイアウトされるかは、listItem
のtableLayout
子要素によって指定されます。かわりに、styleClass
属性を使用してoutputText
要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartText
に設定すると、出力テキスト・コンポーネントが行の左上隅に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-upperEndText
に設定すると、出力テキスト・コンポーネントが行の右上隅に配置され、そのテキストに大きいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerStartTextNoChevron
に設定すると、出力テキスト・コンポーネントが行の左下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerEndTextNoChevron
に設定すると、出力テキスト・コンポーネントが行の右下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。それぞれの特定の行に右向き矢印が表示されるかどうかは、listItem
要素のshowLinkIcon
属性によって構成されます。この例では、この属性はすべてのlistItem
要素に対してfalse
に設定されているため、右向き矢印は表示されません。
<amx:listView id="lv1" value="#{myBean.listCollection}" var="row"> <amx:listItem id="li1" showLinkIcon="false"> <amx:tableLayout id="tl1" width="100%"> <amx:rowLayout id="rl1"> <amx:cellFormat id="cf1" width="10px" rowSpan="2"/> <amx:cellFormat id="cf2" width="60%" height="28px"> <amx:outputText id="ot1" value="#{row.name}"/> </amx:cellFormat> <amx:cellFormat id="cf3" width="10px" rowSpan="2"/> <amx:cellFormat id="cf4" width="40%" halign="end"> <amx:outputText id="ot2" value="#{row.status}" styleClass="adfmf-listItem-highlightText"/> </amx:cellFormat> </amx:rowLayout> <amx:rowLayout id="rl2"> <amx:cellFormat id="cf5" width="60%" height="12px"> <amx:outputText id="ot3" value="#{row.desc}" styleClass="adfmf-listItem-captionText"/> </amx:cellFormat> <amx:cellFormat id="cf6" width="40%" halign="end"> <amx:outputText id="ot4" value="#{row.priority}" styleClass="adfmf-listItem-captionText"/> </amx:cellFormat> </amx:rowLayout> </amx:tableLayout> </amx:listItem> </amx:listView>
図13-36は、各行の開始と終了に2つのタイプの異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。
モデルからではなくハードコード化された値によって移入されるリスト・ビュー・コンポーネントを作成する場合、このリスト・ビューは静的になり、デザインタイムに設定するそのプロパティのいくつか(たとえばdividerAttribute
、dividerMode
、fetchSize
、moveListener
)がランタイムに無視されるようになります。
MAF AMXでは、リスト・ビュー・コンポーネントのvalue
属性が設定されていない場合、そのコンポーネントを静的であるとみなします。そのようなリストは編集できません(つまり、リストのeditMode
属性を指定できません)。
カルーセル(carousel
)コンポーネントは、回転カルーセルにイメージなどの他のコンポーネントを表示するために使用します。エンド・ユーザーは、スライダを使用するか、別のイメージを正面にドラッグすることでアクティブなアイテムを変更できます。
カルーセル・コンポーネントにはカルーセル・アイテム(carouselItem
)コンポーネントが含まれており、text
属性によって表されるそのテキストは、それがそのカルーセルのアクティブなアイテムであるときに表示されます。通常、カルーセル・アイテムにはイメージ・コンポーネントが含まれていますが、他のコンポーネントを使用することもできます。たとえば、イメージを囲む子としてリンクを使用することもできます。表示するオブジェクトごとにカルーセル・アイテム・コンポーネントを作成し、これらのコンポーネントを個々のオブジェクトにバインドするかわりに、カルーセル・コンポーネントを完全なコレクションにバインドします。その後、コンポーネントは各アイテムに値をスタンプすることで、1つのカルーセル・アイテム・コンポーネントを繰り返しレンダリングします。各アイテムがスタンプされると、現在のアイテムのデータが、EL式でカルーセル・コンポーネントのvar
属性を使用して特定可能なプロパティにコピーされます。カルーセルのレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。カルーセル・コンポーネントにはnodeStamp
というファセットが含まれており、これは、各アイテムのテキストと短い説明の両方を表示するために使用されるカルーセル・アイテムのホルダーであり、各アイテムに表示されるイメージに対する親コンポーネントでもあります。
カルーセル・アイテムは、その子コンポーネントのみ拡大します。単一のイメージ・コンポーネントをカルーセル・アイテムの内部に配置する場合、イメージはそのアイテムに割り当てられた四角形に合せて拡大されます(エンド・ユーザーがカルーセルをスピンすると、これらのサイズが縮小または拡大されます)。
ヒント: アプリケーションのパフォーマンスの低下を最小限に抑えるは、重いコンポーネントを子として使用しないようにします。複雑な構造にすると、いくつかのカルーセル・アイテム・スタンプが同時に表示されるため、その影響が倍増します。 |
デフォルトでは、カルーセルは水平に表示されます。水平方向のカルーセル内にあるオブジェクトは中央に垂直に配置され、カルーセル自体はコンテナの中心に水平に配置されます。参照ローロデックスが必要な場合は、垂直に表示されるようにカルーセルを構成できます。デフォルトでは、垂直方向のカルーセル内にあるオブジェクトは中心に水平に配置され、カルーセル自体は中央に垂直に配置されます。カルーセルのorientation
属性を使用してこの配置を変更できます。
前後のイメージを部分的に表示するかわりに、displayItems
属性を使用して、フィルムストリップ・デザインまたは循環デザインでイメージを表示するようにカルーセルを構成することができます。
デフォルトでは、カルーセルが循環モードで表示するように構成されている場合、エンド・ユーザーが補助アイテム(現在、中央に表示されていないアイテム)にポインタを置くと、そのアイテムが枠で囲まれ選択可能であることが示されます。auxiliaryPopOut
属性を使用すると、アイテムが移動し、最大サイズで表示されるように、カルーセルを構成できます。
OEPEでは、「カルーセル」は「パレット」のMAF AMXの下にあります(図13-37を参照)。
カルーセル・コンポーネントを作成するには、表示するイメージを含むデータ・モデルを作成してから、カルーセルをそのモデルにバインドし、カルーセル・アイテム・コンポーネントをカルーセルのnodeStamp
ファセットに挿入します。最後に、イメージ・コンポーネント(またはイメージ・コンポーネントを含むその他のコンポーネント)をカルーセル・アイテム・コンポーネントに子として挿入します。
次の例は、MAF AMXファイル内のcarousel
要素定義を示しています。carousel
要素を定義するときは、carousel
要素のnodeStamp
ファセット内にcarouselItem
要素を配置する必要があります。
<amx:carousel id="carousel1" value="#{bindings.products.collectionModel}" var="item" auxiliaryOffset="0.9" auxiliaryPopOut="hover" auxiliaryScale="0.8" controlArea="full" displayItems="circular" halign="center" valign="middle" disabled="false" shortDesc="spin" orientation="horizontal" styleClass="AMXStretchWidth" inlineStyle="height:250px;background-color:#EFEFEF;"> <amx:facet name="nodeStamp"> <amx:carouselItem id="item1" text="#{item.name}" shortDesc="Product: #{item.name}"> <amx:commandLink id="link1" action="goto-productDetails" actionListener="#{someMethod()}"> <amx:image id="image1" styleClass="prod-thumb" source="images/img-big-#{item.uid}.png"/> <amx:setPropertyListener id="spl1" from="#{item}" to="#{pageFlowScope.product}" type="action"/> </amx:commandLink> </amx:carouselItem> </amx:facet> </amx:carousel>
カルーセル・コンポーネントでは、CollectionModel
クラスを使用して基礎となるコレクションのデータにアクセスします。java.util.List
やarray
などの他のモデル・クラスを使用することもできますが、その場合、カルーセルによってインスタンスが自動的にCollectionModel
クラスに変換されますが、機能は追加されません。
スライダを使用することで、エンド・ユーザーはカルーセル・コレクションを移動できます。通常、スライダ上のサムにはオブジェクトの総数のうちの現在のオブジェクト番号が表示されます。オブジェクトの総数が大きすぎて計算できない場合、スライダ上のサムには現在のオブジェクト番号のみ表示されます。
詳細および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
フィルム・ストリップ(filmStrip
)は、グループ(ページ)のセット内に分散されたデータを垂直方向または水平方向に視覚化するコンテナ・コンポーネントです。グループに含まれるディスプレイ・アイテム(filmStripItem
)を表すUIコンポーネントは、同じサイズおよびタイプである必要があり、一度に1つのグループのみを表示できます。エンド・ユーザーは、フィルム・ストリップのページを移動でき、アイテムを選択してタップすることでアクションを生成できます。
OEPEでは、フィルム・ストリップは「パレット」のMAF AMXの下にあります(図13-38を参照)。
次の例は、MAF AMXファイル内のfilmStrip
要素定義を示しています。
<amx:filmStrip id="fs1" var="item" value="#{bindings.contacts.collectionModel}" rendered="#{pageFlowScope.pRendered}" styleClass="#{pageFlowScope.pStyleClass}" inlineStyle="#{pageFlowScope.pInlineStyle}" shortDesc="#{pageFlowScope.pShortDesc}" halign="#{pageFlowScope.pFsHalign}" valign="#{pageFlowScope.pFsValign}" itemsPerPage="#{pageFlowScope.pMaxItems}" orientation="#{pageFlowScope.pOrientation}"> <amx:filmStripItem id="fsi1" inlineStyle="text-align:center; width:200px;"> <amx:commandLink id="ciLink" action="details" shortDesc="Navigate to details"> <amx:image id="ciImage" source="images/people/#{item.first}.png"/> <amx:setPropertyListener id="spl1" from="#{item.rowKey}" to="#{pageFlowScope.currentContact}" type="action"/> <amx:setPropertyListener id="spl2" from="#{item.first}" to="#{pageFlowScope.currentContactFirst}" type="action"/> <amx:setPropertyListener id="spl3" from="#{item.last}" to="#{pageFlowScope.currentContactLast}" type="action"/> </amx:commandLink> </amx:filmStripItem> </amx:filmStrip>
詳細および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
垂直に配置されたフィルム・ストリップでは、ディスプレイ・アイテムは上から下に配置されます。テキストの方向に応じて、ページ制御は次のように配置されます。
テキストの方向が左から右の場合、ページ制御は右側に置かれます。
テキストの方向が右から左の場合、ページ制御は左側に置かれます。
水平に配置されたフィルム・ストリップでは、テキストの方向モードを反映する必要があり、左から右モードでは最初のアイテムが左に置かれ、右から左モードでは最初のアイテムは右に置かれます。どちらの場合でも、ページ・ステータス・コンポーネントは一番下にあります。
フィルム・ストリップ・コンポーネントのナビゲーションはデック(第13.2.12項「デック・コンポーネントの使用方法」を参照)およびパネル・スプリッタ・コンポーネント(第13.2.9項「パネル・スプリッタ・コンポーネントの使用方法」を参照)と同様で、一度に1ページが表示され、ページの変更はページIDまたは番号の選択によってトリガーされます。
子フィルム・ストリップ・アイテム・コンポーネントは、他のMAF AMXページに移動するための使用は想定されていないため、action
属性をサポートしていません。必要な場合は、ネストされているコマンド・リンク・コンポーネントを介してナビゲーションを有効化できます。
該当するコンポーネントが存在しない場合や自身でHTMLを使用してレイアウトする必要がある場合は、Verbatim (verbatim
)操作を使用して独自のHTMLをページに挿入できます。
OEPEでは、「Verbatim」は「パレット」のMAF AMXの下にあります(図13-39を参照)。
詳細および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
JavaScriptを直接Verbatimコンテンツ(amx:verbatim
要素内)に挿入することは、現在サポートされているプラットフォームの今後のバージョンまたはMAFが今後サポートする可能性のあるその他のプラットフォームで正しく実行されない可能性があるため推奨されていません。かわりに、maf-feature.xml
ファイルにある既存のadfmf:include
要素を介してJavaScriptおよびCSS包含を実行する必要があり、これにより、MAF AMXアプリケーション機能の起動時にスクリプトが確実にページに挿入されます。
さらに、VerbatimコンポーネントでのJavaScriptの使用は、AMXページからサーバーへのAJAXコールがサポートされていないために影響を受けます。これは、セキュリティ・アーキテクチャによるもので、これによってMAF AMXページをホストするブラウザが、そのリソースを取得するためにセキュア・サーバーに接続するために必要なセキュリティ情報に対してアクセス権を持たないことが保証されます。かわりに、サーバーとの通信は、埋込みJavaコード層から発生する必要があります。
出力HTML (outputHtml
)コンポーネントでは、HTMLコンテンツをMAF AMXページに表示するために、ELでバインドされたプロパティまたはメソッドから動的および安全に取得できます。出力HTMLコンポーネントはVerbatimコンポーネント(第13.3.18項「Verbatimコンポーネントの使用方法」を参照)と同様に動作し、JavaScriptおよびAJAXの使用に関して同じ制限が適用されます(第13.3.18.1項「JavaScriptおよびAJAXのVerbatimコンポーネントでの使用に関する必知事項」を参照)。
OEPEでは、出力HTMLは「パレット」のMAF AMXの下にあります(図13-40を参照)。
次の例は、MAF AMXファイル内のoutputHtml
要素定義を示しています。value
属性は、文字列プロパティに対してELバインディングを提供し、これは、MAF AMXページの最終レンダリングのoutputHTML
として表示されるHTMLコンテンツを取得するために使用されます。
<amx:tableLayout id="t1" width="100%"> <amx:rowLayout id="r1"> <amx:cellFormat id="cf1" width="100%"> <amx:outputHtml id="ReceiptView" value="#{pageFlowScope.purchaseBean.htmlReceiptView}"/> </amx:cellFormat> </amx:rowLayout> <amx:rowLayout id="r2"> <amx:cellFormat id="cf2" width="100%"> <amx:outputHtml id="CheckView" value="#{pageFlowScope.purchaseBean.htmlCheckView}"/> </amx:cellFormat> </amx:rowLayout> </amx:tableLayout>
次の例は、前述の例で示した出力HTMLコンポーネントのHTMLを提供するMyPurchaseBean
という名前のJavaBeanのコードを示しています。
// The property accessor that gets the receipt view HTML public String getHtmlReceiptView() { // Perform some URL remote call to get the HTML to be // inserted as a view of the Receipt and return that value return obtainReceiptHTMLFromServer(); } // The property accessor that gets the check view HTML public String getHtmlCheckView() { // Perform some URL remote call to get the HTML to be // inserted as a view of the Check and return that value return obtainCheckHTMLFromServer(); }
出力HTMLコンポーネントはそのHTMLコンテンツをリモート・ソースから直接ダウンロードするのではなく、JavaBeanプロパティから取得するため、動的に提供されるHTMLの取得または生成をコーディングする場合は、既存のMAFセキュリティ機能を使用することを検討してください。詳細は、第30章「MAFアプリケーションの保護」を参照してください。さらに、提供されるHTMLが信頼できるソースのものであり、脅威がないことを確認してください。
詳細および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
イテレータ(iterator
)操作を使用して、同じ種類のデータを持つ任意の数のアイテムをスタンプします。これによりデータを繰り返し処理して各要素のUIを作成できます。
OEPEでは、「イテレータ」は「パレット」のMAF AMXの下にあります。
詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
バンドルのロード(loadBundle
)操作によって、ページ上のMAF AMX UIコンポーネントにローカライズ済テキストを提供するリソース・バンドルを指定できます。詳細は、第13.7項「UIコンポーネントのローカライズ」を参照してください。
OEPEでは、「バンドルのロード」は「パレット」のMAF AMXの下にあります(図13-41を参照)。
MAF AMXファイル内で、loadBundle
要素をview
要素の子として宣言します。
詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
アクション・リスナー(actionListener
)コンポーネントにより、親コンポーネントが使用するタイプに基づいてELを介して宣言でコマンドを呼び出すことができます。
アクション・リスナー・コンポーネントを使用する重要な理由は、ジェスチャー・サポート・アクションを親コンポーネントに追加できること、および1つのジェスチャー(タップを含む)で複数の操作を実行できる機能です。詳細は、第13.3.22.1項「アクション・リスナー・コンポーネントと属性間の相違点に関する必知事項」を参照してください。
OEPEでは、「アクション・リスナー」コンポーネントは「パレット」のMAF AMXの下にあります(図13-42を参照)。
0(ゼロ)以上のアクション・コンポーネントを任意のコマンド・コンポーネント(ボタン、リンク、リスト・アイテム、フィルム・ストリップ・アイテムおよびデータ視覚化コンポーネントのサブセット)の子として追加できます。アクション・リスナー・コンポーネントのtype
属性は、ActionEvent
を作動させるジェスチャー(swipeLeft
、swipeRight
、tapHold
など)を定義します。
詳細は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
ボタン、リンク、リスト・アイテムなどのコンポーネントにはactionListener
属性があり、これは、アクション・リスナー・コンポーネントを冗長にする可能性があります。ただし、アクション・リスナー・コンポーネントとは異なり、これらのコンポーネントにはジェスチャーをサポートするtype
属性がないため、MAFでは、親コンポーネントのactionListener
属性に加えて、アクション・リスナー・コンポーネントが提供されています。
プロパティ・リスナーの設定(setPropertyListener
)コンポーネントによって、コンポーネントでのエンド・ユーザー・アクションを受けて、1つの場所(コンポーネントのfrom
属性で定義)から別の場所(コンポーネントのto
属性で定義)に宣言的に値をコピーできるため、同じ結果を得るためにJavaコードを記述する必要がありません。
OEPEでは、「プロパティ・リスナーの設定」コンポーネントは「パレット」のMAF AMXの下にあります(図13-43を参照)。
次の例は、MAF AMXファイル内のsetPropertyListener
要素定義を示しています。
<amx:listView value="#{bindings.products.collectionModel}" var="row" id="lv1"> <amx:listItem id="li1" action="details"> <amx:outputText value="#{row.name}" id="ot1" /> <amx:setPropertyListener id="spl1" from="#{row}" to="#{pageFlowScope.product}" type="action"/> </amx:listItem> </amx:listView>
0(ゼロ)以上のプロパティ・リスナーの設定コンポーネントを任意のコマンド・コンポーネント(ボタン、リンク、リスト・アイテム、フィルム・ストリップ・アイテムおよびデータ視覚化コンポーネントのサブセット)の子として追加できます。プロパティ・リスナーの設定コンポーネントのtype
属性は、ActionEvent
を作動させるジェスチャー(swipeLeft
、swipeRight
、tapHold
など)を定義します。
詳細は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
日時の変換(convertDateTime
)は、独立したUIコンポーネントではありません。これは、出力テキストおよび入力テキスト・コンポーネントと組み合せて使用して、指定されたパターンに従った様々な書式で、変換された日付、時刻または日時の組合せを表示するコンバータ操作です。
OEPEでは、「日時の変換」は「パレット」のMAF AMXの下にあります(図13-44を参照)。
次の例は、MAF AMXファイルで宣言されているconvertDateTime
要素を示しています。
<amx:panelPage id="pp1"> <amx:inputText styleClass="ui-text" value="Order Date" id="it1" > <amx:convertDateTime id="cdt1" type="both"/> </amx:inputText> </amx:panelPage>
日時値を変換するには:
「コンポーネント」ウィンドウから、「日時の変換」コンポーネントをドラッグして「出力テキスト」コンポーネントまたは「入力テキスト」コンポーネント内に挿入し、それをそのコンポーネントの子要素にします。
日時の変換コンポーネントに対して「プロパティ」エディタを開き、その属性を定義します。詳細は、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
の文字は、日付または時間の文字列のコンポーネントを表すパターン文字と認識されます。テキストは、解釈されないように一重引用符('
)で囲むことができます。" ' ' "
は一重引用符を表します。すべてのその他の文字は解釈されません。かわりに、それらは書式設定中に単に出力文字列にコピーされるか、解析中に入力文字列と照合されます。
表13-9は、定義済パターン文字を示しています(A
からZ
およびa
からz
のすべてのその他の文字は予約されています)。
表13-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コンポーネントではなく、出力テキストおよび入力テキスト、入力テキストおよび入力数値スライダの各コンポーネントと組み合せて使用して、次の指定されたパターンに従った様々な書式で、変換された数値または通貨値を表示するコンバータ操作です。
数値の変換コンポーネントは、次のタイプの操作を提供します。
値から文字列。表示目的です。
書式設定された文字列から値。書式設定された入力値が、基礎となっている値に解析される場合です。
数値の変換が、入力テキスト・コンポーネントの子として指定されている場合、デフォルトで、モバイル・デバイスに数字キーボードが表示されます。
OEPEでは、「数値の変換」は「パレット」のMAF AMXの下にあります(図13-45を参照)。
次の例は、MAF AMXファイルで定義されているconvertNumber
要素を示しています。
<amx:panelPage id="pp1"> <amx:inputText styleClass="ui-text" value="Product Price" id="it1" > <amx:convertNumber id="cn1" type="percent" groupingUsed="false" integerOnly="true"/> </amx:inputText> </amx:panelPage>
数値を変換するには:
「コンポーネント」ウィンドウから、「数値の変換」コンポーネントをドラッグして「出力テキスト」コンポーネント、「入力テキスト」コンポーネントまたは「入力数値スライダ」コンポーネント内に挿入し、それをそのコンポーネントの子要素にします。
数値の変換コンポーネントに対して「プロパティ」エディタを開き、その属性を定義します。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
注意: 数値の変換コンポーネントは、デザインタイムには何の効果も持ちません。 |
ナビゲーション・ドラッグ動作(navigationDragBehavior
)の処理では、モバイル・デバイスの画面を指定された方向(左または右)にドラッグすることで、次または前のMAF AMXページに移動するアクションを起動できます。指定された方向へのドラッグが発生するとインジケータが画面の適切な側に表示され、引き続きドラッグしてインジケータが完全に表示されたときに停止するとアクションが実行されることを示します。インジケータが完全に表示される前にドラッグを放すと、インジケータがスライドされ、アクションは起動されません。
注意: ドラッグ・ジェスチャーを消費する近いコンテナが他にない場合、この動作は発生しません。 |
MAF AMXページには、navigationDragBehavior
要素の3つ以上のインスタンスを含むことはできず、1つはdirection
属性をback
に設定したもので、もう1つはforward
に設定したものです。
OEPEでは、ナビゲーション・ドラッグ動作は「パレット」のMAF AMXの下にあります(図13-46を参照)。
次の例は、MAF AMXファイルで定義されているnavigationDragBehavior
要素を示しています。この要素は、view
要素の子にのみなれることに注意してください。
<amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:amx="http://xmlns.oracle.com/adf/mf/amx" xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt"> <amx:navigationDragBehavior id="ndb1" direction="forward" action="gotoDetail"/> Foot 1 <amx:panelPage id="pp1"> <amx:facet name="header"> ... </amx:panelPage> </amx:view>
図13-47は、実行時のドラッグ・ナビゲーション動作を示しています(mobileFusionFx
スキンを使用して表示)。
詳細および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
disabled
属性の値(次の2つの例を参照)は、次のいずれかのことが発生したときに計算されます。
MAF AMXページがレンダリングされる。
PropertyChangeListener
がコンポーネントを更新する: エンド・ユーザーのナビゲーション・ドラッグ動作を起動する機能を動的に有効化または無効化する場合、PropertyChangeListener
を使用します(Beanからの更新が必要な他のコンポーネントで使用される方法と同様)。
次の最初の例は、disabled属性が定義されているnavigationDragBehavior
要素を含むMAF AMXページを示しています。アクティブ化された場合に、disabled
属性がその値を読み取るバッキングBeanのboolean
値(次の2番目の例のnavDisabled
)を変更するボタン(commandButton
)によって機能が駆動されます。その後、バッキングBeanはPropertyChangeListenerを使用します。
<amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:amx="http://xmlns.oracle.com/adf/mf/amx" xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt"> <amx:panelPage id="pp1"> <amx:facet name="header"> <amx:outputText value="Header1" id="ot1"/> </amx:facet> <amx:commandButton id="cb1" text="commandButton1" actionListener="#{pageFlowScope.myBean.doSomething}"/> </amx:panelPage> <amx:navigationDragBehavior id="ndb1" direction="forward" action="goView2" disabled="#{pageFlowScope.myBean.navDisabled}"/> </amx:view>
次の例は、navigationDragBehaviorのdisabled
属性の値を提供するバッキングBean (前述の例のmyBean
)を示しています。
public class MyBean { boolean navDisabled = true; private PropertyChangeSupport propertyChangeSupport = new PropertyChangeSupport(this); public void setNavDisabled(boolean navDisabled) { boolean oldNavDisabled = this.navDisabled; this.navDisabled = navDisabled; propertyChangeSupport.firePropertyChange("navDisabled", oldNavDisabled, navDisabled); } public boolean isNavDisabled() { return navDisabled; } public void doSomething(ActionEvent actionEvent) { setNavDisabled(!navDisabled); } public void addPropertyChangeListener(PropertyChangeListener l) { propertyChangeSupport.addPropertyChangeListener(l); } public void removePropertyChangeListener(PropertyChangeListener l) { propertyChangeSupport.removePropertyChangeListener(l); } }
ロード・インジケータ動作(loadingIndicatorBehavior
)の処理では、次のことをオーバーライドすることで、ロード・インジケータの動作を定義できます。
フェイルセーフ・タイマーの持続時間(ミリ秒単位)。
フェイルセーフしきい値に達した場合に、アクションの方針の決定するために起動できるオプションのJavaScript関数名。
詳細は、adf.mf.api.amx.showLoadingIndicator
を参照してください。
OEPEでは、ロード・インジケータ動作は「パレット」のMAF AMXの下にあります(図13-48を参照)。
次の例は、MAF AMXファイルで定義されているloadingIndicatorBehavior
要素を示しています。この要素は、view
要素の子にのみなれることに注意してください。
<amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:amx="http://xmlns.oracle.com/adf/mf/amx" xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt"> <amx:loadingIndicatorBehavior id="lib1" failSafeDuration="3000" failSafeClientHandler="window.customFailSafeHandler"/> <amx:panelPage id="pp1"> <amx:facet name="header"> <!-- The loading indicator custom fail safe handler will appear if the long running operation runs longer than 3 seconds --> <amx:commandButton id="cb1" text="longRunningOperation" actionListener= "#{pageFlowScope.myBean.longRunningOperation} /> </amx:panelPage> </amx:view>
前述の例では、commandButton
は長時間実行メソッドにバインドされ、ページがロードされると、ロード・インジケータが実行時間の長い操作に適用されることを示しています(ページ自体のロードに時間がかかる場合ではなく)。
次の例は、アプリケーション機能に含まれるcustom.js
ファイルを示しています。これは、loadingIndicatorBehavior
ページでfailSafeClientHandler
のクライアント・ハンドラを定義します。API要件によって、この関数はhide
、repeat
またはfreeze
のいずれかのString
を返します。詳細は、adf.mf.api.amx.showLoadingIndicator
を参照してください。
window.customFailSafeHandler = function() { var answer = prompt( "This is taking a long time.\n\n" + "Use \"a\" to hide the indicator.\n" + "Use \"z\" to wait for it.\n" + "Otherwise, give it more time."); if (answer == "a") return "hide"; // don't ask again; hide the indicator else if (answer == "z") return "freeze" // don't ask again; wait for it to finish else return "repeat"; // ask again after another duration };
詳細および例は、次を参照してください。
Oracle Mobile Application Frameworkタグ・リファレンス
「ファイル」→「新」→「MAFサンプル」にあるMAFサンプル・アプリケーションであるCompGallery
次のジェスチャーに反応するために、ボタン、リンク、リスト・アイテムおよび多数のデータ視覚化の各コンポーネントを構成できます。
右方向にスワイプ
左方向にスワイプ
上方向にスワイプ
下方向にスワイプ
タップしたまま押さえる
始点方向にスワイプ: このジェスチャーは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。このジェスチャーは、次のように解決されます。
テキスト方向が左から右である場合、左方向にスワイプします。
テキスト方向が右から左である場合、右方向にスワイプします。
終点方向にスワイプ: このジェスチャーは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。このジェスチャーは、次のように解決されます。
テキスト方向が左から右である場合、右方向にスワイプします。
テキスト方向が右から左である場合、左方向にスワイプします。
次の操作のtype
属性に対して、swipeRight
、swipeLeft
、swipeUp
、swipeDown
、swipeStart
、swipeEnd
およびtapHold
値を定義できます。
プロパティ・リスナーの設定(第13.3.23項「プロパティ・リスナーの設定の使用方法」を参照)
アクション・リスナー(第13.3.22項「アクション・リスナーの使用方法」を参照)
ポップアップ表示動作(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
ポップアップを閉じる動作(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
type
属性の値は親コンポーネントに基づいて制限されており、リンク(commandLink
)およびリスト・アイテム(listItem
)のコンポーネントに対してのみサポートされています。
注意: リンク(実行) (linkGo )コンポーネントに対するジェスチャー・サポートはありません。 |
始点方向にスワイプと終点方向にスワイプは、iOSプラットフォームで右から左のテキスト方向に対応するために使用されます。通常は、左と右ではなく、始点と終点のスワイプ・スタイルを設定することをお薦めします。
次の例は、MAF AMXファイルのtype
属性のtapHold
値の使用を示しています。この例では、タップしたまま押さえるジェスチャーによってポップアップ・コンポーネントの表示がトリガーされます。
<amx:panelPage id="pp1"> <amx:listView id="lv1" value="#{bindings.data.collectionModel}" var="row"> <amx:listItem id="li1" action="gosomewhere"> <amx:outputText id="ot1" value="#{row.description}"/> <amx:setPropertyListener id="spl1" from="#{row.rowKey}" to="#{mybean.currentRow}" type="tapHold"/> <amx:showPopupBehavior id="spb1" type="tapHold" alignid="pp1" popupid="pop1" align="startAfter"/> </amx:listItem> </amx:listView>> </amx:panelPage> <amx:popup id="pop1"> <amx:panelGroupLayout id="pgl1" layout="horizontal"> <amx:commandLink id="cm1" actionListener="#{mybean.doX}"> <amx:image id="i1" source="images/x.png"/> <amx:closePopupBehavior id="cpb1" type="action" popupid="pop1"/> </amx:commandLink> <amx:commandLink id="cm2" actionListener="#{mybean.doY}"> <amx:image id="i2" source="images/y.png"/> <amx:closePopupBehavior id="cpb2" type="action" popupid="pop1"/> </amx:commandLink> <amx:commandLink id="cm3" actionListener="#{mybean.doZ}"> <amx:image id="i3" source="images/y.png"/> <amx:closePopupBehavior id="cpb3" type="action" popupid="pop1"/> </amx:commandLink> </amx:panelGroupLayout> </amx:popup>
次の例は、MAF AMXファイル内のswipeRight
ジェスチャーの使用方法を示しています。
<amx:panelPage id="pp1"> <amx:listView id="lv1" value="#{bindings.data.collectionModel}" var="row"> <amx:listItem id="li1" action="gosomewhere"> <amx:outputText id="ot1" value="#{row.description}"/> <amx:setPropertyListener id="spl1" from="#{row.rowKey}" to="#{mybean.currentRow}" type="swipeRight"/> <actionListener id="al1" binding="#{mybean.DoX}" type="swipeRight"/> </amx:listItem> </amx:listView>> </amx:panelPage>
詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
GestureDemoという名前のMAFサンプル・アプリケーションは、様々なMAF AMX UIコンポーネントでのジェスチャーの使用方法を示しています。このサンプル・アプリケーションは、「ファイル」→「新」→「MAFサンプル」にあるアプリケーションです。
MAFでは、データ視覚化コンポーネントのセットを様々なチャート、ゲージおよびマップの作成に使用して、MAF AMXアプリケーション機能のデータを表すことができます。MAF AMXファイルの<dvtm>
ネームスペースの下で次の要素を宣言できます。
areaChart
(第13.5.1項「面グラフの作成方法」を参照)
barChart
(第13.5.2項「棒グラフの作成方法」を参照)
horizontalBarChart
(第13.5.3項「横棒グラフの作成方法」を参照)
bubbleChart
(第13.5.4項「バブル・チャートの作成方法」を参照)
comboChart
(第13.5.5項「コンポ・チャートの作成方法」を参照)
lineChart
(第13.5.6項「線グラフの作成方法」を参照)
pieChart
(第13.5.7項「円グラフの作成方法」を参照)
scatterChart
(第13.5.8項「散布図の作成方法」を参照)
sparkChart
(第13.5.9項「スパーク・チャートの作成方法」を参照)
funnelChart
(第13.5.10項「ファンネル・チャートの作成方法」を参照)
ledGauge
(第13.5.13項「LEDゲージの作成方法」を参照)
statusMeterGauge
(第13.5.14項「ステータス・メーター・ゲージの作成方法」を参照)
dialGauge
(第13.5.15項「ダイアル・ゲージの作成方法」を参照)
ratingGauge
(第13.5.16項「評価ゲージの作成方法」を参照)
geographicMap
(第13.5.18項「地理マップ・コンポーネントの作成方法」を参照)
thematicMap
(第13.5.19項「テーマ・マップ・コンポーネントの作成方法」を参照)
treemap
(第13.5.21項「ツリーマップ・コンポーネントの作成方法」を参照)
sunburst
(第13.5.22項「サンバースト・コンポーネントの作成方法」を参照)
timeline
(第13.5.23項「時系列コンポーネントの作成方法」を参照)
nBox
(第13.5.24項「NBoxコンポーネントの作成方法」を参照)
チャート、ゲージ、マップおよび拡張コンポーネント要素には、すべてまたはほとんどに共通の多数の属性があります。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
OEPEでは、データ視覚化コンポーネントは「パレット」の「MAF AMXデータ視覚化」の下にあります。すべてのデータ視覚化コンポーネントを表示するには、スクロール・バーを使用します。
データ視覚化コンポーネントをドラッグ・アンド・ドロップすると、ダイアログが開き、作成するコンポーネントのタイプに関連付けられた情報に応じたコンテンツが表示されます。
モバイル・チャートの作成
モバイル・ゲージの作成
地理マップ
サンバーストの作成またはツリーマップ
注意: コンポーネントの作成後、ソース・エディタまたは構造ビューでそのコンポーネントを選択し、「プロパティ」ウィンドウで「コンポーネント定義の編集」をクリックすることによって、作成ダイアログを再起動できます。「プロパティ」ウィンドウで提供される同一の編集機能を使用すると、いくつかのデータ視覚化コンポーネントの子コンポーネント(データ・ポイント・レイヤーなど)を編集できます。 |
CompGalleryというMAFサンプル・アプリケーションは、MAF AMXアプリケーション機能での様々なデータ視覚化コンポーネントの使用方法を示しています。このサンプル・アプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。
MAF AMXデータ視覚化コンポーネントの詳細は、次を参照してください:
イベント・リスナーをデータ視覚化コンポーネントに追加する方法の詳細は、第13.10項「イベント・リスナーの使用方法」を参照してください。イベント・リスナーは、iOSとAndroidのどちらのデバイスでもMAF AMX実行時の記述のためにコンポーネントに適用できますが、それらのリスナーはデザインタイムでは何の効果も持ちません。
「データ・コントロール」ウィンドウから作成されるデータバインドされたデータ視覚化コンポーネントの詳細は、第13.5.26項「データバインドされたデータ視覚化コンポーネントの作成方法」を参照してください。
データ視覚化コンポーネントにおけるアクセシビリティのサポートの詳細は、第13.8項「MAFのアクセシビリティのサポートの理解」を参照してください。
MAF AMXデータ視覚化コンポーネントの使用上の制約の詳細は、第E.6.2項「データ視覚化コンポーネントの制限」を参照してください。
面グラフ(areaChart
)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けれされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、面の色やパターンなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。カスタム系列スタイルの定義の詳細は、第13.5.6項「線グラフの作成方法」を参照してください。
面グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll
属性を使用して有効化されます。
面グラフの向き(垂直または水平)は、orientation
属性と、値vertical
およびhorizontal
によって制御されます。
次の例は、MAF AMXファイルに定義されたareaChart
要素を示しています。デフォルト系列スタイルで基本的な面グラフを作成するには、それにコレクションを渡し、chartDataItem
要素をネストしたdataStamp
ファセットを指定します。
<dvtm:areaChart id="areaChart1" value="#{bindings.lineData.collectionModel}" var="row" inlineStyle="width: 400px; height: 300px;" animationOnDisplay="auto" animationDuration="1500" > <amx:facet name="dataStamp"> <dvtm:chartDataItem id="areaChartItem1" series="#{row.series}" group="#{row.group}" value="#{row.value}" /> </amx:facet> <dvtm:yAxis id="yAxis1" axisMaxValue="80.0" majorIncrement="20.0" title="yAxis Title" /> <dvtm:legend id="l1" position="end" /> </dvtm:areaChart>
データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrow
に次のプロパティが含まれている必要があります。
series
: このデータ・アイテムが属する系列の名前。
group
: このデータ・アイテムが属するグループの名前。
value
: データ・アイテムの値。
コレクションのrow
には、個々のデータ・アイテムに適用可能なcolor
やshape
などの他のプロパティも含めることができます。
次の例に示すように、属性グループ(attributeGroups
要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、データ・アイテムのcolor
およびshape
属性が、追加のグループ化式に基づいて設定されます。attributeGroups
には、次の子要素があります。
dvtm
ネームスペースのattributeExceptionRule
: 特定のブール条件が満たされる場合に、属性値を別の値に置き換えます。
dvtm
ネームスペースのattributeMatchRule
: データが特定の値に一致する場合に、属性を置き換えます。
amx
ネームスペースのattribute
。
<dvtm:areaChart id="areaChart1" value="#{bindings.lineData.collectionModel}" var="row" inlineStyle="width: 400px; height: 300px;" title="Chart Title" animationOnDisplay="auto" animationDuration="1500" > <amx:facet name="dataStamp"> <dvtm:chartDataItem id="chartDataItem1" series="#{row.series}" group="#{row.group}" value="#{row.value}" /> <dvtm:attributeGroups id="ag1" type="color" value="#{row.brand}" /> </amx:facet> <dvtm:yAxis id="yAxis1" axisMaxValue="80.0" majorIncrement="20.0" title="yAxis Title" /> <dvtm:legend id="l1" position="end" /> </dvtm:areaChart>
このコンポーネントに対して定義できるareaChart
子要素およびdvtm
子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
amx
ネームスペースからfacet
子要素を定義できます。facet
には、chartDataItem
を子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、面グラフ・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-areaChart - supported properties: all
グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
棒グラフ(barChart
)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを垂直の棒として視覚的に表すために使用します。系列は、個々のデータ・アイテムごとではなく系列レベルで適用する必要があるいくつかの一般的なスタイル・プロパティを持つグラフィカル要素を使用して視覚化されます。
棒グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll
属性を使用して有効化されます。
次の例は、MAF AMXファイルで定義されているbarChart
要素を示しています。dataStamp
ファセットは、ネストされたchartDataItem
要素とともに指定されます。
<dvtm:barChart id="barChart1" value="#{bindings.barData.collectionModel}" var="row" inlineStyle="width: 400px; height: 300px;" animationOnDisplay="zoom" animationDuration="3000" > <amx:facet name="dataStamp"> <dvtm:chartDataItem id="chartDataItem1" series="#{row.series}" group="#{row.group}" value="#{row.value}" /> </amx:facet> <dvtm:yAxis id="yAxis1" axisMaxValue="80.0" majorIncrement="20.0" title="yAxis Title" /> <dvtm:legend id="l1" position="start" /> </dvtm:barChart>
棒グラフのデータ・モデルは、個々の棒を記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。
series
: この棒が属する系列の名前。
group
: この棒が属するグループの名前。
value
: データ・アイテムの値(必須)。
データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnull
として渡されます。
このコンポーネントに対して定義できるbarChart
子要素およびdvtm
子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
amx
ネームスペースからfacet
子要素を定義できます。facet
には、chartDataItem
を子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、棒グラフ・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-barChart - supported properties: all
グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
横棒グラフ(horizontalBarChart
)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを水平の棒として視覚的に表すために使用します。系列は、個々のデータ・アイテムごとではなく系列レベルで適用する必要があるいくつかの一般的なスタイル・プロパティを持つグラフィカル要素を使用して視覚化されます。
棒グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll
属性を使用して有効化されます。
次の例は、MAF AMXファイルで定義されているhorizontalBarChart
要素を示しています。dataStamp
ファセットは、ネストされたchartDataItem
要素とともに指定されます。
<dvtm:horizontalBarChart id="horizBarChart1" value="#{bindings.barData.collectionModel}" var="row" inlineStyle="width: 400px; height: 300px;" dataSelection="#{pageFlowScope.dataSelection}" hideAndShowBehavior="#{pageFlowScope.hideAndShowBehavior}" rolloverBehavior="#{pageFlowScope.rolloverBehavior}" stack="#{pageFlowScope.stack}" > <amx:facet name="dataStamp"> <dvtm:chartDataItem id="chartDataItem1" series="#{row.series}" group="#{row.group}" value="#{row.value}" /> </amx:facet> <dvtm:yAxis id="yAxis1" axisMaxValue="80.0" majorIncrement="20.0" title="yAxis Title" /> <dvtm:legend id="l1" position="start" /> </dvtm:horizontalBarChart>
横棒グラフのデータ・モデルは、個々の棒を記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。
series
: この棒が属する系列の名前。
group
: この棒が属するグループの名前。
value
: データ・アイテムの値(必須)。
データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnull
として渡されます。
このコンポーネントに対して定義できるhorizontalBarChart
子要素およびdvtm
子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
amx
ネームスペースからfacet
子要素を定義できます。facet
には、chartDataItem
を子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
向き属性によって、棒グラフを垂直または水平として定義できます。
このコンポーネントに対して定義できるbarChart
子要素およびdvtm
子要素の詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、横棒グラフ・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-horizontalBarChart - supported properties: all
グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
バブル・チャート(bubbleChart
)は、各データ・アイテムがx
座標、y
座標およびサイズ(バブル)を持つ一連のデータ・アイテムを表示します。さらに、各データ・アイテムには、color
やmarkerShape
など様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、線グラフ(第13.5.6項「線グラフの作成方法」を参照)や面グラフ(第13.5.1項「面グラフの作成方法」を参照)と異なり、バブル・チャートには系列およびグループの厳密な概念がありません。
バブル・チャートは、X軸およびY軸に沿ってズームおよびスクロールできます。これはzoomAndScroll
属性を使用して有効化されます。
次の例は、MAF AMXファイルで定義されているbubbleChart
要素を示しています。dataStamp
ファセットは、ネストされたchartDataItem
要素とともに指定されます。各データ・アイテムのcolor
およびmarkerShape
属性は、データ・モデルで提供されている値に基づいて個別に設定されます。また、基礎となるデータ・コントロールでは、row.label
、row.size
およびrow.shape
の変数参照がそれぞれサポートされている必要があります。
<dvtm:bubbleChart id="bubbleChart1" value="#{bindings.bubbleData.collectionModel}" inlineStyle="width: 400px; height: 300px;" dataSelection="multiple" rolloverBehavior="dim" animationOnDisplay="auto" var="row"> <amx:facet name="dataStamp"> <dvtm:chartDataItem id="chartDataItem1" group="#{row.group}" x="#{row.x}" y="#{row.y}" markerSize="#{row.size}" color="#{row.color}" markerShape="#{row.shape}" /> </amx:facet> </dvtm:bubbleChart>
次の例では、データ・アイテムからなる関連する1つのグループに対して一般的なスタイル属性を設定するためにattributeGroups
要素が使用されています。
<dvtm:bubbleChart id="bubbleChart1" value="#{bindings.bubbleData.collectionModel}" dataSelection="multiple" rolloverBehavior="dim" animationOnDisplay="auto" title="Bubble Chart" var="row"> <amx:facet name="dataStamp"> <dvtm:chartDataItem id="chartDataItem1" group="#{row.label}" x="#{row.x}" y="#{row.y}" > <dvtm:attributeGroups id="ag1" type="color" value="#{row.category}" /> <dvtm:attributeGroups id="ag2" type="shape" value="#{row.brand}" /> </dvtm:chartDataItem> </amx:facet> </dvtm:bubbleChart>
バブル・チャートのデータ・モデルは、個々のデータ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。
label
: データ・アイテム・ラベル(オプション)。
x
、y
: 値の座標(必須)。
z
: データ・アイテムのサイズ(必須)。
データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnull
として渡されます。
このコンポーネントに対して定義できるbubbleChart
子要素およびdvtm
子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
amx
ネームスペースからfacet
子要素を定義できます。facet
には、chartDataItem
を子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、バブル・チャート・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-bubbleChart - supported properties: all
グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
コンボ・チャート(comboChart
)は、線グラフと棒グラフなど、2つ以上の異なるグラフを重ねたものを表します。
次の例は、MAF AMXファイルで定義されているcomboChart
要素を示しています。dataStamp
ファセットは、ネストされたchartDataItem
要素とともに指定されます。seriesStamp
ファセットは、系列のデフォルト・スタイル・プロパティをオーバーライドし、seriesStyle
要素を使用してカスタム系列スタイルを設定します。
<dvtm:comboChart id="comboChart1" value="#{bindings.barData.collectionModel}" var="row" inlineStyle="width: 400px; height: 300px;" animationOnDisplay="auto" animationDuration="1500" > <amx:facet name="dataStamp"> <dvtm:chartDataItem id="chartDataItem1" series="#{row.series}" group="#{row.group}" value="#{row.value}" /> </amx:facet> <amx:facet name="seriesStamp"> <dvtm:seriesStyle id="seriesStyle1" series="#{row.series}" type="bar" rendered="#{(row.series eq 'Series 1') or (row.series eq 'Series 2') or (row.series eq 'Series 3')}" /> <dvtm:seriesStyle id="seriesStyle2" series="#{row.series}" type="line" lineWidth="5" rendered="#{(row.series eq 'Series 4') or (row.series eq 'Series 5')}" /> </amx:facet> <dvtm:yAxis id="yAxis1" axisMaxValue="80.0" majorIncrement="20.0" title="yAxis Title" /> <dvtm:legend position="start" id="l1" /> </dvtm:comboChart>
このコンポーネントに対して定義できるcomboChart
子要素およびdvtm
子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
コンボ・チャートの向き(垂直または水平)は、orientation
属性と、値vertical
およびhorizontal
によって制御できます。
amx
ネームスペースからfacet
子要素を定義できます。facet
には、chartDataItem
を子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、コンボ・チャート・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-comboChart - supported properties: all
グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
線グラフ(lineChart
)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、線の色、太さ、スタイルなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。
線グラフは、X軸に沿ってズームおよびスクロールできます。これはzoomAndScroll
属性を使用して有効化されます。
線グラフの向き(垂直または水平)は、orientation
属性と、値vertical
およびhorizontal
によって制御できます。
線グラフは、<dvtm:chartSeriesStyle>
のtype
属性のlineWithArea
オプションを使用すると、任意で作成できます。これにより、一杯になった面を線グラフの下に追加できます。一杯になった面の色は、areaColor
属性を使用して指定できます。
線グラフには様々なタイプの線が使用できます。線のタイプを指定するには、<dvtm:chartSeriesStyle>のlineType属性を使用します。lineType属性の値は、次のとおりです。
straight
: 直線コネクタ。
curved
: 曲線コネクタ。
stepped
: ステップ・コネクタ。線と面にのみ適用されます。
centeredStepped
: 中心にあるステップ・コネクタ。線と面にのみ適用されます。
segmented
: 立ち上がりのないステップ・コネクタ。線にのみ適用されます。
centeredSegmented
: 立ち上がりのない中心にあるステップ・コネクタ。線グラフにのみ適用されます。
auto
(デフォルト): 線/面グラフ用の直線。散布図用にはありません。
このコンポーネントに対して定義できるlineChart
子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次の例は、MAF AMXファイルに定義されたlineChart
要素を示しています。デフォルト系列スタイルで基本的な線グラフを作成するには、それにコレクションを渡し、chartDataItem
要素をネストしたdataStamp
ファセットを指定します。
<dvtm:lineChart id="lineChart1" inlineStyle="width: 400px; height: 300px;" rolloverBehavior="dim" animationOnDisplay="auto" value="#{bindings.lineData1.collectionModel}" var="row" > <amx:facet name="dataStamp"> <dvtm:chartDataItem id="chartDataItem1" series="#{row.series}" group="#{row.group}" value="#{row.value}" color="#{row.color}" /> </amx:facet> </dvtm:lineChart>
データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrow
に次のプロパティが含まれている必要があります。
series
: この線が属する系列の名前。
group
: この線が属するグループの名前。
value
: データ・アイテムの値。
コレクションのrow
には、個々のデータ・アイテムに適用可能なcolor
やshape
などの他のプロパティも含めることができます。
次の例に示すように、属性グループ(attributeGroups
要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、データ・アイテムのcolor
およびshape
属性が、追加のグループ化式に基づいて設定されます。attributeGroups
には、次の子要素があります。
dvtm
ネームスペースのattributeExceptionRule
: 特定のブール条件が満たされる場合に、属性値を別の値に置き換えます。
dvtm
ネームスペースのattributeMatchRule
: データが特定の値に一致する場合に、属性を置き換えます。
amx
ネームスペースのattribute
。
同じページにあるコンポーネントが同じデータ・セットのデータを視覚化する場合、MAFでは、これらのコンポーネント間の属性グループ・バケット設定の共有がサポートされているため、属性値はコンポーネントに対して一貫して自動的に適用されます。
これをサポートするために、attributeGroups
タグには属性discriminant
が含まれています。これはオプションの文字列値であり、attributeGroups
タグに同じ識別値を持つコンポーネントは、バケット割当てを共有できます。
<dvtm:lineChart id="lineChart1" inlineStyle="width: 400px; height: 300px;" rolloverBehavior="dim" animationOnDisplay="auto" title="Line Chart" value="#{bindings.lineData1.collectionModel}" var="row" > <amx:facet name="dataStamp"> <dvtm:chartDataItem id="chartDataItem1" series="#{row.series}" group="#{row.group}" value="#{row.value}" /> <dvtm:attributeGroups id="ag1" type="color" value="#{row.brand}" /> </dvtm:chartDataItem> </amx:facet> </dvtm:lineChart>
注意: この項の2つの例では、カスタム・スタイルが系列レベルで設定されていないため、系列はデフォルトの色傾斜に基づいた色で表示されます。 |
系列のデフォルト・スタイル・プロパティをオーバーライドするには、次に示すように、オプションのseriesStamp
ファセットを定義し、seriesStyle
要素を使用してカスタム系列スタイルを設定します。
<dvtm:lineChart id="lineChart1" inlineStyle="width: 400px; height: 300px;" rolloverBehavior="dim" animationOnDisplay="auto" title="Line Chart" value="#{bindings.lineData1.collectionModel}" var="row" > <amx:facet name="dataStamp"> <dvtm:chartDataItem id="chartDataItem1" series="#{row.series}" group="#{row.group}" value="#{row.value}" /> </amx:facet> <amx:facet name="seriesStamp"> <dvtm:seriesStyle series="#{row.series}" lineStyle="#{row.lineStyle}" lineWidth="#{row.lineWidth}" /> </amx:facet> </dvtm:lineChart>
前述の例では、seriesStyle
要素がseries
属性の値に基づいてグループ化されています。同じ名前を持つ系列は、seriesStyle
の他の属性(color
、lineStyle
、lineWidth
など)によって定義された、同じプロパティ・セットを共有する必要があります。MAF AMXでは、同じ系列名を持つ異なる属性値を検出した場合、前回処理された値を適用します。
かわりに、次の例に示すように、seriesStyle
要素のrendered
属性を使用して、MAF AMXチャートで系列スタイルを制御できます。
<dvtm:lineChart id="lineChart1" inlineStyle="width: 400px; height: 300px;" rolloverBehavior="dim" animationOnDisplay="auto" title="Line Chart" value="#{bindings.lineData1.collectionModel}" var="row" > <amx:facet name="dataStamp"> <dvtm:chartDataItem id="chartDataItem1" series="#{row.series}" group="#{row.group}" value="#{row.value}" color="#{row.color}" /> </amx:facet> <amx:facet name="seriesStamp"> <dvtm:seriesStyle series="#{row.series}" color="red" lineWidth="3" lineStyle="solid" rendered="#{row.series == 'Coke'}" /> <dvtm:seriesStyle series="#{row.series}" color="blue" lineWidth="2" lineStyle="dotted" rendered="#{row.series == 'Pepsi'}" /> </amx:facet> </dvtm:lineChart>
このコンポーネントに対して定義できるlineChart
子要素およびdvtm子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
amx
ネームスペースからfacet
子要素を定義できます。facet
には、chartDataItem
を子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、線グラフ・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-lineChart - supported properties: all
グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
円グラフ(pieChart
)は、各データ・アイテムを円セグメント(区分)で表したデータの比率によって区分を示すために使用します。区分はサイズ別に(最大から最小へと)ソートでき、小さい区分は他の単一の区分に集約できます。
次の例は、MAF AMXファイルで定義されているpieChart
要素を示しています。dataStamp
ファセットは、ネストされたpieDataItem
要素とともに指定されます。
<dvtm:pieChart id="pieChart1" inlineStyle="width: 400px; height: 300px;" value="#{bindings.pieData.collectionModel}" var="row" animationOnDisplay="zoom" animationDuration="3000" > <amx:facet name="dataStamp"> <dvtm:pieDataItem id="pieDataItem1" label="#{row.name}" value="#{row.data}" /> </amx:facet> <dvtm:legend position="bottom" id="l1" /> </dvtm:pieChart>
円グラフのデータ・モデルは、個々の円データ・アイテムを定義するアイテムのコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。
label
: 区分ラベル。
value
: 区分の値。
モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。
borderColor
: 区分の境界線の色。
color
: 区分の色。
explode
: 区分を開くときのオフセット。
このコンポーネントに対して定義できるpieChart
子要素およびdvtm
子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
amx
ネームスペースからfacet
子要素を定義できます。facet
には、pieDataItem
を子として含めることができます(第13.5.17.4項「円グラフのデータ・アイテムの定義」を参照)。
クラスdvtm-pieChart
、dvtm-chartPieLabel
およびdvtm-chartSliceLabel
で定義されているデフォルトCSS設定を上書きすることで、円グラフ・コンポーネントをスタイル設定できます。
トップレベル要素は次を使用してスタイル設定できます。
.dvtm-pieChart - supported properties: all
円グラフのラベルは次を使用してスタイル設定できます。
.dvtm-chartPieLabel - supported properties: font-family, font-size, font-weight, color, font-style
円グラフの区分ラベルは次を使用してスタイル設定できます。
.dvtm-chartSliceLabel - supported properties: font-family, font-size, font-weight, color, font-style
グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
散布図(scatterChart
)は、各アイテムがx
座標、y
座標およびサイズを持つデータ・アイテムを表す連続しないドットでデータを表示します。さらに、各データ・アイテムには、color
やmarkerShape
など様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、線グラフ(第13.5.6項「線グラフの作成方法」を参照)や面グラフ(第13.5.1項「面グラフの作成方法」を参照)と異なり、散布図には系列およびグループの厳密な概念がありません。
散布図は、X軸およびY軸に沿ってズームおよびスクロールできます。これはzoomAndScroll
属性を使用して有効化されます。
次の例は、MAF AMXファイルで定義されているscatterChart
要素を示しています。dataStamp
ファセットは、ネストされたchartDataItem
要素とともに指定されます。各データ・アイテムのcolor
およびmarkerShape
属性は、データ・モデルで提供されている値に基づいて個別に設定されます。
<dvtm:scatterChart id="scatterChart1" inlineStyle="width: 400px; height: 300px;" animationOnDisplay="zoom" animationDuration="3000" value="#{bindings.scatterData.collectionModel}" var="row" > <amx:facet name="dataStamp"> <dvtm:chartDataItem id="chartDataItem1" group="#{row.group}" color="#{row.color}" markerShape="auto" x="#{row.data.x}" y="#{row.data.y}"> <dvtm:attributeGroups type="color" value="#{row.series}" id="ag1" /> </dvtm:chartDataItem> </amx:facet> <dvtm:xAxis id="xAxis1" title="X Axis Title" /> <dvtm:yAxis id="xAxis2" title="Y Axis Title" /> <dvtm:legend position="bottom" id="l1" /> </dvtm:scatterChart>
散布図のデータ・モデルは、個々のデータ・アイテムを記述するアイテム(行)のコレクションによって表されます。各データ・アイテムの属性は、スタンプ(dataStamp
)によって定義され、通常、次のものがあります。
x
、y
: 値の座標(必須)。
markerSize
: マーカーのサイズ(オプション)。
モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。
borderColor
: データ・アイテムの境界線の色。
color
: データ・アイテムの色。
tooltip
: カスタム・ツールチップ。
このコンポーネントに対して定義できるscatterChart
子要素およびdvtm
子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
amx
ネームスペースからfacet
子要素を定義できます。facet
には、chartDataItem
を子として含めることができます(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、散布図コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-scatterChart - supported properties: all
グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
スパークチャート(sparkChart
)は、傾向や変化を、多くの場合、表の列内で表す簡単な縮小チャートです。このチャートは、多くの場合、データ密度の濃い表示に追加のコンテキストを提供するためにダッシュボードで使用されます。
次の例は、MAF AMXファイルで定義されているsparkChart
要素を示しています。dataStamp
ファセットは、ネストされたsparkDataItem
要素とともに指定されます。
<dvtm:sparkChart id="sparkChart1" value="#{bindings.sparkData.collectionModel}" var="row" type="line" inlineStyle="width:400px; height:300px; float:left;"> <amx:facet name="dataStamp"> <dvtm:sparkDataItem id="sparkDataItem1" value="#{row.value}" /> </amx:facet> </dvtm:sparkChart>
スパーク・チャートのデータ・モデルは、個々のスパーク・データ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。
value
: スパーク値。
sparkChart
の属性およびdvtm
子要素の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
amx
ネームスペースからfacet
子要素を定義できます。facet
には、sparkDataItem
を子として含めることができます(第13.5.17.5項「スパーク・チャートのデータ・アイテムの定義」を参照)。
次のクラスで定義されているデフォルトCSS設定を上書きすることで、スパーク・チャート・コンポーネントのトップレベル要素をスタイル設定できます。
.dvtm-sparkChart - supported properties: all
グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
ファンネル・チャート(funnelChart
)コンポーネントは、プロセスの手順に関連するデータの視覚的な表現を提供します。ステップは、横向きの円柱に対する縦向きのスライスとして表されます。特定のステップ(スライス)の実際の値がそのスライスの割当てに近づいた分、スライスが塗りつぶされます。通常、ファンネル・チャートには、ある区切りの値(時間など)に対する実際の値と目標の値が必要です。
次の例は、MAF AMXファイルで定義されているfunnelChart
要素を示しています。dataStamp
ファセットは、ネストされたfunnelDataItem
要素とともに指定されます。
<dvtm:funnelChart id="funnelChart1" var="row" value="#{bindings.funnelData.collectionModel}" styleClass="dvtm-gallery-component" sliceGaps="on" threeDEffect="#{pageFlowScope.threeD ? 'on' : 'off'}" orientation="#{pageFlowScope.orientation}" dataSelection="#{pageFlowScope.dataSelection}" footnote="#{pageFlowScope.footnote}" footnoteHalign="#{pageFlowScope.footnoteHalign}" hideAndShowBehavior="#{pageFlowScope.hideAndShowBehavior}" rolloverBehavior="#{pageFlowScope.rolloverBehavior}" seriesEffect="#{pageFlowScope.seriesEffect}" subtitle="#{pageFlowScope.titleDisplay ? pageFlowScope.subtitle : ''}" title="#{pageFlowScope.titleDisplay ? pageFlowScope.title : ''}" titleHalign="#{pageFlowScope.titleHalign}" animationOnDataChange="#{pageFlowScope.animationOnDataChange}" animationDuration="#{pageFlowScope.animationDuration}" animationOnDisplay="#{pageFlowScope.animationOnDisplay}" shortDesc="#{pageFlowScope.shortDesc}"> <amx:facet name="dataStamp"> <dvtm:funnelDataItem id="funnelDataItem1" label="#{row.label}" value="#{row.value}" targetValue="#{row.targetValue}" color="#{row.color}" shortDesc="This is a tooltip"> </dvtm:funnelDataItem> </amx:facet> <dvtm:legend id="l1" position="#{pageFlowScope.legendPosition}" rendered="#{pageFlowScope.legendDisplay}"/> </dvtm:funnelChart>
ファンネル・チャートのデータ・モデルは、個々のファンネル・データ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。
value
: ファンネル値
label
: ファンネル区分ラベル
funnelChart
の属性およびdvtm
子要素の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
amx
ネームスペースからfacet
子要素を定義できます。facet
には、funnelDataItem
を子として含めることができます(第13.5.17.6項「ファンネル・データ・アイテムの定義」を参照)。
クラスdvtm-funnelChart
およびdvtm-funnelDataItem
で定義されているデフォルトCSS設定を上書きすることで、ファンネル・チャート・コンポーネントをスタイル設定できます。
トップレベル要素は次を使用してスタイル設定できます。
.dvtm-funnelChart - supported properties: all
ファンネル・チャートのデータ・アイテムは次を使用してスタイル設定できます。
.dvtm-funnelDataItem - supported properties: border-color, background-color
グラフのスタイル設定の詳細は、第13.5.11項「チャート・コンポーネントのスタイル設定方法」を参照してください。
CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
スパーク・チャートを除き、次のクラスで定義されているデフォルト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 Java APIリファレンス
Oracle Mobile Application Frameworkタグ・リファレンス
チャートと異なり、ゲージでは、単一のデータ・ポイントを重視し、そのポイントを最小、最大およびしきい値インジケータと比較して問題領域を識別します。LED(電光表示)ゲージ(ledGauge
)は、重要業績評価指標(KPI)などの測定値をグラフィカルに表します。LEDゲージには、いくつかのスタイルがあります。矢印付きのものは、よい(上矢印)、普通(右または左矢印)および悪い(下矢印)を示すために使用されます。ゲージのしきい値はいくつでも指定できます。ただし、一部のLEDゲージ(矢印または三角形のインジケータを持つものなど)では、指し示す有効な方向の数が限られているため、サポートされるしきい値の数にかぎりがあります。矢印または三角形のインジケータの場合、しきい値の最大数は3です。
次の例は、MAF AMXファイルで定義されているledGauge
要素を示しています。
<dvtm:ledGauge id="ledGauge1" value="65" type="circle" inlineStyle="width: 100px; height: 80px; float: left; border-color: navy; background-color: lightyellow;"> <dvtm:threshold id="threshold1" text="Low" maxValue="40" /> <dvtm:threshold id="threshold2" text="Medium" maxValue="60" /> <dvtm:threshold id="threshold3" text="High" maxValue="80" /> </dvtm:ledGauge>
LEDゲージのデータ・モデルは、value
属性で指定される単一のメトリック値で表されます。
このコンポーネントに対して定義できるledGauge
子要素およびdvtm
子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次のamx
子要素を定義できます。
showPopupBehavior
(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
closePopupBehavior
(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
validationBehavior
(第13.9項「入力の検証」を参照)
ステータス・メーター・ゲージ(statusMeterGauge
)は、長方形の水平バーまたは円に沿ってタスクの進捗状況または測定値のレベルを示します。コンポーネントのある部分は、別の部分にマークされた範囲に対する現在の測定値のレベルを示します。また、しきい値は、サイズ変更が可能なインジケータの背後に表示できます。
MAF AMXデータ視覚化のステータス・メーター・ゲージ・コンポーネントでは、参照線(referenceLine
)のサポートが提供されます。この参照線を使用して、ブレット・グラフを生成できます。
次の例は、MAF AMXファイルで定義されているstatusMeterGauge
要素を示しています。
<dvtm:statusMeterGauge id="meterGauge1" value="65" animationOnDisplay="auto" animationDuration="1000" inlineStyle="width: 300px; height: 30px; float: left; border-color: black; background-color: lightyellow;" minValue="0" maxValue="100"> <dvtm:metricLabel/> <dvtm:threshold id="threshold1" text="Low" maxValue="40" /> <dvtm:threshold id="threshold2" text="Medium" maxValue="60" /> <dvtm:threshold id="threshold3" text="High" maxValue="80" /> </dvtm:statusMeterGauge>
円形で表される(図13-62を参照)ステータス・メーター・ゲージを作成するには、orientation
属性をcircular
に設定します。デフォルトでは、この属性はhorizontal
に設定されいるため、横向きの長方形になります。
また、orientation
属性はvertical
に設定できます。これにより、ステータス・メーター・ゲージが垂直に並びます。
ステータス・メーター・ゲージのデータ・モデルは、value
属性で指定される単一のメトリック値です。また、最小値はminValue
属性で、最大値はmaxValue
属性によって指定できます。
このコンポーネントに対して定義できるstatusMeterGauge
子要素およびdvtm
子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次のamx
子要素を定義できます。
showPopupBehavior
(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
closePopupBehavior
(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
validationBehavior
(第13.9項「入力の検証」を参照)
ダイヤル・ゲージ(dialGauge
)は、悪いからよいまで変化する値(しきい値)の範囲を指定します。ゲージのインジケータではメトリックの現在の値が示される一方、図形によってその値のステータスを評価できます。
次の例は、MAF AMXファイルで定義されているdialGauge
要素を示しています。
<dvtm:dialGauge id="dialGauge1" background="#{pageFlowScope.background}" indicator="#{pageFlowScope.indicator}" value="#{pageFlowScope.value}" minValue="#{pageFlowScope.minValue}" maxValue="#{pageFlowScope.maxValue}" animationDuration="1000" animationOnDataChange="auto" animationOnDisplay="auto" shortDesc="#{pageFlowScope.shortDesc}" inlineStyle="#{pageFlowScope.inlineStyle}" styleClass="#{pageFlowScope.styleClass}" readOnly="true"> </dvtm:dialGauge>
ダイヤル・ゲージのデータ・モデルは、value
属性で指定される単一のメトリック値です。また、最小値はminValue
属性で、最大値はmaxValue
属性によって指定できます。
このコンポーネントに対して定義できるdialGauge
子要素およびdvtm
子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次の例は、暗い背景テーマと、-5000から5000の範囲を設定するカスタム・ティック・ラベルを備えたdialGauge
要素の定義を示しています。
<dvtm:dialGauge id="dialGauge1" background="circleDark" indicator="needleDark" value="#{pageFlowScope.value}" minValue="-5000" maxValue="5000" readOnly="false"> <dvtm:metricLabel id="metricLabel1" scaling="thousand" labelStyle="font-family: Arial, Helvetica; font-size: 20; color: white;"/> <dvtm:tickLabel id="tickLabel1" scaling="thousand" labelStyle="font-family: Arial, Helvetica; font-size: 18; color: white;"/> </dvtm:dialGauge>
dialGauge
に対して次のamx
子要素を定義できます。
showPopupBehavior
(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
closePopupBehavior
(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
validationBehavior
(第13.9項「入力の検証」を参照)
評価ゲージ(ratingGauge
)を使用すると、事前定義された視覚スケールに評価を表示したり、その評価を変更できます。デフォルトの評価単位は、星で表されます。ratingGaugeのshape
属性を設定することによって、この単位を円、長方形、星またはひし形として構成できます。
次の例は、MAF AMXファイルで定義されているratingGauge
要素を示しています。
<dvtm:ratingGauge id="ratingGauge1" value="#{pageFlowScope.value}" minValue="0" maxValue="5" inputIncrement="full" shortDesc="#{pageFlowScope.shortDesc}" inlineStyle="#{pageFlowScope.inlineStyle}" readOnly="true" shape="circle" unselectedShape="circle"> </dvtm:ratingGauge>
評価ゲージのデータ・モデルは、value
属性で指定される単一のメトリック値です。また、最小値はminValue
属性で、最大値はmaxValue
属性によって指定できます。
このコンポーネントに対して定義できるratingGauge
子要素およびdvtm
子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
ratingGauge
に対して次のamx
子要素を定義できます。
showPopupBehavior
(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
closePopupBehavior
(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
validationBehavior
(第13.9項「入力の検証」を参照)
ユーザーが評価ゲージ・コンポーネントに対して実行したアクションに応じて、評価単位(イメージ)は次のいずれかの状態を取得できます。
selected
: 単位を選択した場合。
unselected
: 単位を選択しなかった場合。
hover
: 単位にマウスを置いた場合。
注意: タッチ・インタフェースを使用するモバイル・デバイスでは、hover状態はタップしたまま押さえるジェスチャーを通じて呼び出されます。 |
changed
: 単位を変更した場合。
各状態は、color
およびborderColor
という2つの属性によって表されます。デフォルトでは、ratingGauge
のshape
属性によって、hover
およびchanged
状態の選択内容が決まります。unselected
状態は、ratingGauge
のunselectedShape
属性を使用して個別に設定できます。
デフォルトCSS設定を上書きすることで、評価ゲージ・コンポーネントをスタイル設定できます。CSSファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
次の例は、評価ゲージ単位の各状態のcolor
およびborderColor
に対するデフォルトCSSスタイル定義を示しています。
.dvtm-ratingGauge { } .dvtm-ratingGauge .dvtm-ratingGaugeSelected { border-width: 1px; border-style: solid; border-color: #FFC61A; color: #FFBB00; } .dvtm-ratingGauge .dvtm-ratingGaugeUnselected { border-width: 1px; border-style: solid; border-color: #D3D3D3; color: #F4F4F4; } .dvtm-ratingGauge .dvtm-ratingGaugeHover { border-width: 1px; border-style: solid; border-color: #6F97CF; color: #7097CF; } .dvtm-ratingGauge .dvtm-ratingGaugeChanged { border-width: 1px; border-style: solid; border-color: #A8A8A8; color: #FFBB00; }
チャートおよびゲージには様々な子要素を定義できます。それらの子要素のいくつかを次に示します。
chartDataItem
(第13.5.17.1項「チャートのデータ・アイテムの定義」を参照)
xAxis
、yAxis
およびy2Axis
(第13.5.17.3項「X軸、Y軸およびY2軸の定義」を参照)
legend
(第13.5.17.2項「凡例の定義」を参照)
pieDataItem
(第13.5.17.4項「円グラフのデータ・アイテムの定義」を参照)
sparkDataItem
(第13.5.17.5項「スパーク・チャートのデータ・アイテムの定義」を参照)
threshold
(第13.5.17.7項「しきい値の定義」を参照)
funnelDataItem
これらのおよびその他の子要素の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
OEPEでは、データ視覚化コンポーネントの子コンポーネントは、それぞれの視覚化タイプの下にあります(図13-66を参照)。
チャート・データ・アイテム(chartDataItem
)要素は、円グラフを除くすべてのサポートされているチャートでチャート・データ・アイテムが使用するパラメータを指定します。
チャート・データ・アイテムでのテキスト表示を有効化でき、chartDataItem
要素の関連する属性を設定することで、そのラベル、ラベル位置およびラベル・スタイルを制御でき、さらに、チャート自体のdataLabelPosition
属性を設定することで指定されたチャートのすべてのデータ・ラベルの位置を指定できます。
注意: 散布図、円グラフおよびファンネル・チャートのコンポーネントでは、dataLabelPosition 属性はサポートされていません。 |
chartDataItem
要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
凡例(legend
)要素は、凡例パラメータを指定します。凡例要素は、seriesStyle
要素のaction
プロパティを介してクリック相互作用をサポートしています。
legend
要素の属性の詳細は、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 Mobile Application Frameworkタグ・リファレンスを参照してください。
円グラフのデータ・アイテム(pieDataItem
)要素は、円グラフの区分のパラメータを指定します(第13.5.7項「円グラフの作成方法」を参照)。
pieDataItem
要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
スパーク・チャートのデータ・アイテム(sparkDataItem
)要素は、スパーク・チャート・アイテムのパラメータを指定します(第13.5.9項「スパーク・チャートの作成方法」を参照)。
sparkDataItem
要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
ファンネルのデータ・アイテム(funnelDataItem
)要素は、ファンネル・チャート・アイテムのパラメータを指定します(第13.5.10項「ファンネル・チャートの作成方法」を参照)。
funnelDataItem
要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
しきい値(threshold
)要素は、ゲージのしきい値範囲を指定します(第13.5.13項「LEDゲージの作成方法」および第13.5.14項「ステータス・メーター・ゲージの作成方法」を参照)。
threshold
要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
地理マップ(geographicMap
)は、1つのマップに重ね合せた1つ以上のインタラクティブな情報レイヤーでデータを表します。GoogleマップまたはOracle Maps Cloudサービスのいずれかを基本のマップ・プロバイダとして使用するようにこのコンポーネントを構成できます。マップ・プロバイダを指定しない場合、コンポーネントではGoogleマップを使用しますが、ライセンス・キーは不要です。第A.2項「アドレス・ポイント数を制限する地理マップ・コンポーネント」で説明するように、このタイプの使用では、コンポーネントが使用できるアドレス・ポイント数が制限されます。geographicMap
コンポーネントでは、最新の安定したv3バージョンのGoogleマップJavaScript APIが使用されます。
次の例は、CompGalleryサンプル・アプリケーションでのgeographicMap
コンポーネントを示しています。
geographicMap
に対してpointDataLayer
子要素を定義できます。pointDataLayer
によって、マップ上の点と関連付けられたデータを表示できます。pointDataLayer
は子要素としてpointLocation
を持つことができます。pointLocation
は、データ・ポイントの位置を決定するデータ・レイヤーのモデル内の列を指定します。これらの位置は、住所またはX座標とY座標で表すことができます。
pointLocation
は、子要素としてmarker
を持つことができます。marker
は、マップ上のデータ・ポイントに関連付けられた組込み形状またはカスタム形状をスタンプ・アウトするために使用します。marker
では、マーカーとしてレンダリングされるイメージのURIを指定するための一連のプロパティがサポートされています。マーカーは子要素としてconvertNumber
を持つことができます(第13.3.25項「数値の変換方法」を参照)。また、ポップアップ(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)がgeographicMap
のマーカーの上に表示されるようにできます。そのためには、次の例に示すように、showPopupBehavior
要素をmarker要素の子として宣言し、showPopupBehavior
のalignId
属性をmarker
のid
属性の値に設定します。
<dvtm:geographicMap id="geographicMap_1" shortDesc="#{pageFlowScope.shortDesc}"> <dvtm:pointDataLayer id="pdl1" var="row" value= "#{bindings.geographicMapPointData.collectionModel}"> <dvtm:pointLocation id="pl1" pointX="#{row.pointX}" pointY="#{row.pointY}"> <dvtm:marker id="marker1" shortDesc="#{row.shortDesc}" rendered="true"> <amx:showPopupBehavior id="spb1" popupId="popup1" alignId="marker1" align="topCenter" decoration="anchor"/> <amx:setPropertyListener from="#{row.shortDesc}" to="#{pageFlowScope.currentCity}" type="action"/> </dvtm:marker> </dvtm:pointLocation> </dvtm:pointDataLayer> </dvtm:geographicMap> ... <amx:popup id="popup1" backgroundDimming="off" autoDismiss="true"> <amx:outputText id="otTest" value="City: #{pageFlowScope.currentCity}"/> ... </amx:popup>
geographicMap
要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
地理マップ・コンポーネントでは、タッチ・ジェスチャーを使用してピン(マップ上のポイントの作成)を挿入できます。この機能は、mapInputListener
を使用して構成できます。詳細は、第13.5.20項「Mapコンポーネントでのイベントの使用方法」を参照してください。
地理マップ・コンポーネントに関連するタスクの詳細は、次を参照してください。
基礎となるマップに特定のプロバイダ(GoogleまたはOracle)を使用するように地理マップ・コンポーネントを構成するには、アプリケーションのadf-config.xml
ファイルに名前と値のペアとして次のプロパティを設定します。
mapProvider
: oraclemaps
またはgooglemaps
を指定します。
geoMapKey
: mapProvider
がgooglemaps
に設定されている場合は、ライセンス・キーを指定します。
geoMapClientId
: mapProvider
がgooglemaps
に設定されている場合は、Googleマップ・ビジネス・ライセンスのクライアントIDを指定します。
mapViewerUrl
: mapProvider
がoraclemaps
に設定されている場合は、Oracleマップのマップ・ビューアURLを指定します。
baseMap
: mapProvider
がoraclemaps
に設定されている場合は、Oracleマップとともに使用するベース・マップを指定します。
注意: Googleマップを使用するように地理マップ・コンポーネントを構成するには、Googleから該当するライセンスを取得する必要があります。 |
次の例は、Googleマップ用の構成を示しています。
<adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties"> <adf-property name="mapProvider" value="googlemaps"/> <adf-property name="geoMapKey" value="your key"/> </adf-properties-child>
次の例は、Oracleマップの構成を示しています。
<adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties"> <adf-property name="mapProvider" value="oraclemaps"/> <adf-property name="mapViewerUrl" value="http://elocation.oracle.com/mapviewer"/> <adf-property name="baseMap" value="ELOCATION_MERCATOR.WORLD_MAP"/> </adf-properties-child>
マップ・プロバイダ情報を指定しない場合、MAF AMX地理マップ・コンポーネントは、そのマップにGoogleマップを使用しますがライセンス・キーはありません。
基礎となるマップに特定のプロバイダ(GoogleまたはOracle)を使用するように地理マップ・コンポーネントを構成するには、アプリケーションのadf-config.xml
ファイルに名前と値のペアとして次のプロパティを設定します。
mapProvider
: oraclemaps
またはgooglemaps
を指定します。
geoMapKey
: mapProvider
がgooglemaps
に設定されている場合は、ライセンス・キーを指定します。
geoMapClientId
: mapProvider
がgooglemaps
に設定されている場合は、Googleマップ・ビジネス・ライセンスのクライアントIDを指定します。
mapViewerUrl
: mapProvider
がoraclemaps
に設定されている場合は、Oracleマップのマップ・ビューアURLを指定します。
baseMap
: mapProvider
がoraclemaps
に設定されている場合は、Oracleマップとともに使用するベース・マップを指定します。
注意: Googleマップを使用するように地理マップ・コンポーネントを構成するには、Googleから該当するライセンスを取得する必要があります。 |
次の例は、Googleマップ用の構成を示しています。
<adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties"> <adf-property name="mapProvider" value="googlemaps"/> <adf-property name="geoMapKey" value="your key"/> </adf-properties-child>
注意: OracleからOracle Maps Cloudサービスを使用するには、利用規約とさらにサプライヤの通知にも従う必要があります。Oracle Maps Cloudサービスを使用して開発されたアプリケーションにより、ドキュメントやアプリケーションからアクセス可能なリンクを介して、利用規約とサプライヤの通知がエンド・ユーザーに提示される必要があります。 |
次の例は、Oracleマップ用の構成を示しています。
<adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties"> <adf-property name="mapProvider" value="oraclemaps"/> <adf-property name="mapViewerUrl" value="your-mapviewer-server-url"/> <adf-property name="baseMap" value="your-basemap-id"/> </adf-properties-child>
マップ・プロバイダ情報を指定しない場合、MAF AMX地理マップ・コンポーネントは、そのマップにGoogleマップを使用しますがライセンス・キーはありません。
マップ・プロバイダとしてのGoogleマップの使用に関する問題の詳細は、第A.2項「アドレス・ポイント数を制限する地理マップ・コンポーネント」を参照してください。
adf-config.xml
ファイルの詳細は、第C.2項「アセンブリ・レベルのリソースについて」を参照してください。
テーマ・マップ(thematicMap
)では、ビジネス・データをスタイル設定された領域内のパターンまたは関連付けられたマーカーとして表します。テーマ・マップでは、地理的な詳細なしで、データに焦点を合せます。
次の例は、MAF AMXファイルで定義されているthematicMap
要素およびその子を示しています。
<dvtm:thematicMap id="tm1" animationOnDisplay="#{pageFlowScope.animationOnDisplay}" animationOnMapChange="#{pageFlowScope.animationOnMapChange}" animationDuration="#{pageFlowScope.animationDuration}" basemap="#{pageFlowScope.basemap}" tooltipDisplay="#{pageFlowScope.tooltipDisplay}" inlineStyle="#{pageFlowScope.inlineStyle}" zooming="#{pageFlowScope.zooming}" panning="#{pageFlowScope.panning}" initialZooming="#{pageFlowScope.initialZooming}"> <dvtm:areaLayer id="areaLayer1" layer="#{pageFlowScope.layer}" animationOnLayerChange= "#{pageFlowScope.animationOnLayerChange}" areaLabelDisplay="#{pageFlowScope.areaLabelDisplay}" labelType="#{pageFlowScope.labelType}" areaStyle="background-color" rendered="#{pageFlowScope.rendered}"> <dvtm:areaDataLayer id="areaDataLayer1" animationOnDataChange= "#{pageFlowScope.dataAnimationOnDataChange}" animationDuration= "#{pageFlowScope.dataAnimationDuration}" dataSelection="#{pageFlowScope.dataSelection}" var="row" value="#{bindings.thematicMapData.collectionModel}"> <dvtm:areaLocation id="areaLoc1" name="#{row.name}"> <dvtm:area action="sales" id="area1" shortDesc="#{row.name}"> <amx:setPropertyListener id="spl1" to= "#{DvtProperties.areaChartProperties.dataSelection}" from="#{row.name}" type="action"/> <dvtm:attributeGroups id="ag1" type="color" value="#{row.cat1}" /> </dvtm:area> </dvtm:areaLocation> </dvtm:areaDataLayer> </dvtm:areaLayer> <dvtm:legend id="l1" position="end"> <dvtm:legendSection id="ls1" source="ag1"/> </dvtm:legend> </dvtm:thematicMap>
markerZoomBehavior
属性を使用すると、マップがズームされるとテーマ・マップのマーカーのスケール変更が有効化されます。rotation
属性を設定することで、マーカーの回転を有効化でき、この属性の値は、イメージの中心に対してマーカーが回転する(時計回りの度数)角度を表します。
MAF AMXテーマ・マップは、次の拡張機能をサポートしています。
カスタム・マーカー(第13.5.19.1項「カスタム・マーカーの定義」を参照)
領域の分離(第13.5.19.3項「分離領域の定義」を参照)
初期ズーム(第13.5.19.4項「初期ズームの有効化」を参照)
カスタム・ベース・マップ(第13.5.19.5項「カスタム・ベース・マップの定義」を参照)
thematicMap
要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
MAF AMXテーマ・マップでは、MAF AMXイメージ・コンポーネントはサポートされていません。マップのpointLocation
内でイメージを使用するには、pointLocation
のmarker
子要素で、そのsource
属性を使用してイメージを指定します。source
属性がマーカーに対して設定されている場合、そのshape
属性はMAF AMXで無視されます。
sourceHover
、sourceSelected
およびsourceHoverSelected
属性で、ホバーおよび選択効果のイメージを指定できます。これらの1つが指定されていない場合、その特定のマーカー状態に対してはsource
属性によって指定されているイメージが使用されます。sourceSelected
が指定されている場合、sourceHoverSelected
が指定されていないときはその値が使用されます。イメージは、PNG、JPG、SVGなどモバイル・デバイスのブラウザでサポートされている任意のフォーマットで構いません。
データの地理的場所の伝達にリージョン・アウトラインが常に必要であるわけではありません。かわりに、テーマ・マップ・コンポーネントには、領域内でイメージやマーカーをセンタリングするためのオプションがあるため、リージョン・アウトラインが描画されない見えない領域レイヤーを定義するオプションがあります。
見えない領域レイヤーを定義するには、CSS値のbackground-color
およびborder-color
を受け入れるareaLayer
のareaStyle
属性を使用します。
<dvtm:areaLayer id="areaLayer1" ... areaStyle="background-color:transparent;border-color:transparent">
この属性によって、dvtm-area
スキニング・キーを使用することなく、デフォルトの領域レイヤーの色および枠線の形状をオーバーライドできます。
MAF AMXテーマ・マップ・コンポーネントを構成し、areaDataLayer
のisolatedRowKey
属性を使用してマップの単一の分離領域に収まるようにレンダリングおよびズームできますが、この場合、その領域または領域データ・レイヤーの残りの領域はレンダリングされません。
注意: 分離できるのは、1つのマップで1つの領域のみです。 |
初期ズームでは、マップ・コンポーネントを通常どおりレンダリングし、その後、マーカーと領域の両方を含むデータ・オブジェクトにズームして合せることができます。この機能を有効にするには、テーマ・マップのinitialZooming
属性を使用します。
カスタム・ベース・マップ・サポートの一環として、MAF AMXでは、テーマ・マップ・コンポーネントに対して次のことを指定できます。
様々な解像度のイメージを持つレイヤー。
点の位置(pointLocation
)から参照できる名前付きの点を持つ点レイヤー。
カスタム・ベース・マップ・メタデータXMLファイルを指すテーマ・マップのsource
属性。
注意: MAF AMXでは、カスタム・ベース・マップは次のことはサポートされていません。
|
カスタム・ベース・マップを作成するには、メタデータ・ファイルの定義を指す領域レイヤーを指定します(次の例を参照)。基本的なカスタム・ベース・マップを定義するには、背景レイヤーおよびポインタ・データ・レイヤーを指定します。MAF AMXゲージ・コンポーネントと同様に、メタデータ・ファイルで、画面解像度および表示方向ごとに異なるイメージを指定できます。ゲージタイプ・コンポーネントと同様に、テーマ・マップでは、画面解像度および方向に基づいてレイヤーに適切なイメージが選択されます。表示方向は左から右です。
<basemap id="car" > <layer id="exterior" > <image source="/maps/car-800x800.png" width="2560" height="1920" /> <image source="/maps/car-200x200.png" width="640" height="480" /> </layer> </basemap>
次の例は、点によってカスタム領域レイヤーを宣言するMAF AMXファイルを示しています。このMAF AMXファイルは、使用可能なイメージのリストを含む前述の例のメタデータ・ファイルを指しています。
<dvtm:thematicMap id="tm1" basemap="car" source="customBasemaps/map1.xml" > <dvtm:areaLayer id="al1" layer="exterior" > <dvtm:pointDataLayer id="pdl1" var="row" value="{bindings.thematicMapData.collectionModel}" > <dvtm:pointLocation id="pl1" type="pointXY" pointX="#{row.x}" pointY="#{row.y}" > <dvtm:marker id="m1" fillColor="#FFFFFF" shape="circle" /> </dvtm:pointLocation> </dvtm:pointDataLayer> </dvtm:areaLayer> </dvtm:thematicMap>
前述の例では、ベース・マップIDはthematicMap
のbasemap
属性と照合され、レイヤーIDはareaLayer
のlayer
属性と照合されます。点は(前述のベース・マップの場合と同様に)X座標とY座標で定義され、データが更新されたときに変更される可能性がある動的な点に対応します。
次の例は、点によってカスタム領域レイヤーを宣言するもう1つの方法を示しています。この例では、pointDataLayer
は、thematicMap
の直接の子です。方法は異なりますが、前述の例では、次に示す宣言と同じ結果がレンダリングされます。
<dvtm:thematicMap id="demo1" basemap="car" source="customBasemaps/map1.xml" > <dvtm:areaLayer id="al1" layer="exterior" /> <dvtm:pointDataLayer id="pdl1" var="row" value="{bindings.thematicMapData.collectionModel}" > <dvtm:pointLocation id="pl1" type="pointXY" pointX="#{row.x}" pointY="#{row.y}" > <dvtm:marker id="m1" fillColor="#FFFFFF" shape="circle" /> </dvtm:pointLocation> </dvtm:pointDataLayer> </dvtm:thematicMap>
静的な点を含むカスタム・ベース・マップを作成するには、次の例に示すメタデータ・ファイルに名前で点を指定します。このプロセスは、事前定義済ベース・マップに市区町村のマーカーを追加する場合に類似しています。
<basemap id="car" > <layer id="exterior" > <image source="/maps/car-800x800.png" width="2560" height="1920" /> <image source="/maps/car-800x800-rtl.png" width="2560" height="1920" dir="rtl" /> <image source="/maps/car-200x200.png" width="640" height="480" /> <image source="/maps/car-200x200-rtl.png" width="640" height="480" dir="rtl" /> </layer> <points > <point name="hood" x="219.911" y="329.663" /> <point name="frontLeftTire" x="32.975" y="32.456" /> <point name="frontRightTire" x="10.334" y="97.982" /> </points> </basemap>
名前付き点のX位置およびY位置は、layer
の最初のimage
要素のイメージのサイズにマップされるものと想定されます。
注意: 点は、ベース・マップ内でグローバルであり、すべてのレイヤーに適用されるため、点は特定のレイヤーおよびそのイメージには定義できません。 |
次の例は、名前付きの点によってカスタム領域レイヤーを宣言するMAF AMXファイルを示しています。このMAF AMXファイルは、この項の最初の方にある例に示されている、点とそれらの名前のリストを含むメタデータ・ファイルを参照しています。
<dvtm:thematicMap id="demo1" basemap="car" source="customBasemaps/map1.xml" > <dvtm:areaLayer id="al1" layer="exterior" /> <dvtm:pointDataLayer id="pdl1" var="row" value="#{bindings.thematicMapData.collectionModel}" > <dvtm:pointLocation id="pl1" type="pointName" pointName="#{row.name}" > <dvtm:marker id="m1" fillColor="#FFFFFF" shape="circle" /> </dvtm:pointLocation> </dvtm:pointDataLayer> </dvtm:thematicMap>
MAF AMXデータ視覚化では、marker
のactionListener
属性はサポートされていません。かわりに、action
属性を使用することで、同じ機能を実現できます。
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、テーマ・マップ・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
次の例は、テーマ・マップ・コンポーネントのデフォルトCSSスタイルを示しています。
.dvtm-thematicMap { background-color: #FFFFFF; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0,0,0,0); } .dvtm-areaLayer { background-color: #B8CDEC; border-color: #FFFFFF; border-width: 0.5px; /* border style and color must be set when setting border width */ border-style: solid; color: #000000; font-family: tahoma, sans-serif; font-size: 13px; font-weight: bold; font-style: normal; } .dvtm-area { border-color: #FFFFFF; border-width: 0.5px; /* border style and color must be set when setting border width */ border-style: solid; } .dvtm-marker { background-color: #61719F; opacity: 0.7; color: #FFFFFF; font-family: tahoma, sans-serif; font-size: 13px; font-weight: bold; font-style: normal; border-style: solid border-color: #FFCC33 border-width: 12px }
スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。次の例は、CSSを使用しないでテーマ・マップ・コンポーネントにカスタム・スタイルを適用する方法を示しています。
my-custom.js: CustomThematicMapStyle = { // selected area properties 'areaSelected': { // selected area border color 'borderColor': "#000000", // selected area border width 'borderWidth': '1.5px' }, // area properties on mouse hover 'areaHover': { // area border color on hover 'borderColor': "#FFFFFF", // area border width on hover 'borderWidth': '2.0px' }, // marker properties 'marker': { // separator upper color 'scaleX': 1.0, // separator lower color 'scaleY': 1.0, // should display title separator 'type': 'circle' }, // thematic map legend properties 'legend': { // legend position, such as none, auto, start, end, top, bottom 'position': "auto" } }; })();
CustomThematicMapStyle
オブジェクトの名前およびプロパティ名は変更できません。かわりに、特定のプロパティ値を、アプリケーションのニーズに合わせて変更できます。
attributeGroups
属性がテーマ・マップ・コンポーネント用に定義されている場合、CustomThematicMapStyle
を使用して、そのコンポーネントの図形と色のデフォルト・セットを定義できます。この場合、CustomThematicMapStyleオブジェクトの構造は、次の例のようになっている必要があります。styleDefaults
は、次のフィールドを含むネストされたオブジェクトです。
colors
: 領域とマーカーに使用される色のセットを表します。
shapes
: マーカーに使用される図形のセットを表します。
window['CustomThematicMapStyle'] = { // custom style values 'styleDefaults': { // custom color palette 'colors': ["#000000", "#ffffff"], // custom marker shapes 'shapes' : ['circle', 'square'] } };
MapBoundsChangeEvent
を使用して、地図マップ・コンポーネントでの次のマップ・ビューのプロパティ変更を処理できます。
ズーム・レベルに対する変更。
マップ境界に対する変更。
マップの中心に対する変更。
これらの変更が発生すると、コンポーネントは、新しいマップ・ビューのプロパティ値でロードされるイベントを起動します。
mapBoundsChangeListener
を地理マップの属性として定義できます。
MapInputEvent
を使用して、地理マップ・コンポーネントおよびテーマ・マップ・コンポーネントで、タップやマウス・クリックなどのエンド・ユーザー・アクションを処理できます。これらのアクションが発生すると、コンポーネントは、マップの緯度および経度、およびアクションのタイプ(マウス・ダウン、マウス・アップ、クリックなど)に関する情報でロードされるイベントを起動します。
mapInputListener
を地理マップ・コンポーネントの属性として定義できます。
詳細は、次を参照してください。
Oracle Mobile Application Framework Java APIリファレンス
Oracle Mobile Application Frameworkタグ・リファレンス
ツリーマップ(treemap
)は、2つのディメンションに渡って(そのノードのサイズおよび色で)階層データを表示します(treemapNode
)。
「パレット」では、「MAF AMXデータ視覚化」→「ツリーマップ」にツリーマップはあります(図13-69を参照)。
次の例は、MAF AMXファイルで定義されているtreemap
要素およびその子を示しています。
<dvtm:treemap id="treemap1" value="#{bindings.treemapData.collectionModel}" var="row" animationDuration="#{pageFlowScope.animationDuration}" animationOnDataChange="#{pageFlowScope.animationOnDataChange}" animationOnDisplay="#{pageFlowScope.animationOnDisplay}" layout="#{pageFlowScope.layout}" nodeSelection="#{pageFlowScope.nodeSelection}" rendered="#{pageFlowScope.rendered}" emptyText="#{pageFlowScope.emptyText}" inlineStyle="#{pageFlowScope.inlineStyle}" sizeLabel="#{pageFlowScope.sizeLabel}" styleClass="dvtm-gallery-component" colorLabel="#{pageFlowScope.colorLabel}" sorting="#{pageFlowScope.sorting}" selectedRowKeys="#{pageFlowScope.selectedRowKeys}" isolatedRowKey="#{pageFlowScope.isolatedRowKey}" legendSource="ag1"> <dvtm:treemapNode id="node1" fillPattern="#{pageFlowScope.fillPattern}" label="#{row.label}" labelDisplay="#{pageFlowScope.labelDisplay}" value="#{row.marketShare}" labelHalign="#{pageFlowScope.labelHalign}" labelValign="#{pageFlowScope.labelValign}"> <dvtm:attributeGroups id="ag1" type="color" value="#{row.deltaInPosition}" attributeType="continuous" minLabel="-1.5%" maxLabel="+1.5%" minValue="-1.5" maxValue="1.5" > <amx:attribute id="a1" name="color1" value="#ed6647" /> <amx:attribute id="a2" name="color2" value="#f7f37b" /> <amx:attribute id="a3" name="color3" value="#68c182" /> </dvtm:attributeGroups> </dvtm:treemapNode> </dvtm:treemap>
attributeGroups
要素のattributeType
属性をcontinuous
に設定することで、グラデーション色を使用してツリーマップ・アイテムに関連付けられている値の視覚化を有効にでき、この色の強度は指定された範囲内の相対値を表します。
treemap
要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、ツリーマップ・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
次の例は、オーバーライド可能なツリーマップ・コンポーネントのデフォルトCSSスタイルを示しています。
.dvtm-treemap { border-style: solid; border-color: #E2E8EE; border-radius: 3px; background-color: #EDF2F7; ... }
次の例は、オーバーライド可能なツリーマップ・ノードのデフォルトCSSスタイルを示しています。
.dvtm-treemapNodeSelected { // Selected node outer border color border-top-color: #E2E8EE; // Selected node inner border color border-bottom-color: #EDF2F7; }
次の例は、カスタムCSSを使用してスタイルを設定できる、ツリーマップ・ノードのlabel
テキストCSSプロパティを示しています。
.dvtm-treemapNodeLabel { font-family: Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; color: #7097CF; ... }
スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。次の例は、CSSを使用しないでツリーマップ・コンポーネントにカスタム・スタイルを適用する方法を示しています。
my-custom.js: window["CustomTreemapStyle"] = { // treemap properties "treemap" : { // Specifies the animation effect when the data changes - none, auto "animationOnDataChange": "auto", // Specifies the animation that is shown on initial display - none, auto "animationOnDisplay": "auto", // Specifies the animation duration in milliseconds "animationDuration": "500", // The text of the component when empty "emptyText": "No data to display", // Specifies the layout of the treemap - // squarified, sliceAndDiceHorizontal, sliceAndDiceVertical "layout": "squarified", // Specifies the selection mode - none, single, multiple "nodeSelection": "multiple", // Specifies whether or not the nodes are sorted by size - on, off "sorting": "on" }, // treemap node properties "node" : { // Specifies the label display behavior for nodes - node, off "labelDisplay": "off", // Specifies the horizontal alignment for labels displayed // within the node - center, start, end "labelHalign": "end", // Specifies the vertical alignment for labels displayed // within the node - center, top, bottom "labelValign": "center" }, }
サンバースト(sunburst
)は、2つのディメンションに渡って(そのノードのサイズおよび色で)階層データを表示します(sunburstNode
)。
「パレット」で、「サンバースト」は「MAF AMXデータ視覚化」の下にあります(子ノードもあります)。
次の例は、MAF AMXファイルで定義されているsunburst
要素およびその子を示しています。
<dvtm:sunburst id="sunburst1" value="#{bindings.sunburstData.collectionModel}" var="row" animationDuration="#{pageFlowScope.animationDuration}" animationOnDataChange="#{pageFlowScope.animationOnDataChange}" animationOnDisplay="#{pageFlowScope.animationOnDisplay}" colorLabel="#{pageFlowScope.colorLabel}" emptyText="#{pageFlowScope.emptyText}" inlineStyle="#{pageFlowScope.inlineStyle}" nodeSelection="#{pageFlowScope.nodeSelection}" rendered="#{pageFlowScope.rendered}" rotation="#{pageFlowScope.rotation}" shortDesc="#{pageFlowScope.shortDesc}" sizeLabel="#{pageFlowScope.sizeLabel}" sorting="#{pageFlowScope.sorting}" rotationAngle="#{pageFlowScope.startAngle}" styleClass="#{pageFlowScope.styleClass}" legendSource="ag1"> <dvtm:sunburstNode id="node1" fillPattern="#{pageFlowScope.fillPattern}" label="#{row.label}" labelDisplay="#{pageFlowScope.labelDisplay}" value="#{pageFlowScope.showRadius ? 1 : row.marketShare}" labelHalign="#{pageFlowScope.labelHalign}" radius="#{pageFlowScope.showRadius ? row.booksCount : 1}"> <dvtm:attributeGroups id="ag1" type="color" value="#{row.deltaInPosition}" attributeType="continuous" minLabel="-1.5%" maxLabel="+1.5%" minValue="-1.5" maxValue="1.5"> <amx:attribute id="a1" name="color1" value="#ed6647" /> <amx:attribute id="a2" name="color2" value="#f7f37b" /> <amx:attribute id="a3" name="color3" value="#68c182" /> </dvtm:attributeGroups> </dvtm:sunburstNode> </dvtm:sunburst>
attributeGroups
要素のattributeType
属性をcontinuous
に設定することで、グラデーション色を使用してサンバースト・アイテムに関連付けられている値の視覚化を有効にでき、この色の強度は指定された範囲内の相対値を表します。
sunburst
要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、サンバースト・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
次の例は、オーバーライド可能なサンバースト・コンポーネントのデフォルトCSSスタイルを示しています。
.dvtm-sunburst { border-style: solid; border-color: #E2E8EE; border-radius: 3px; background-color: #EDF2F7; ... }
次の例は、オーバーライド可能なサンバースト・ノードのデフォルトCSSスタイルを示しています。
.dvtm-sunburstNode { // Node border color border-color: "#000000"; } .dvtm-sunburstNodeSelected { // Selected node border color border-color: "#000000"; }
次の例は、カスタムCSSを使用してスタイルを設定できる、サンバースト・ノードのlabel
テキストCSSプロパティを示しています。
.dvtm-sunburstNodeLabel { font-family: Helvetica, sans-serif; font-size: 14px; font-style: normal; font-style: normal; color: #7097CF; ... }
スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。次の例は、CSSを使用しないでサンバースト・コンポーネントにカスタム・スタイルを適用する方法を示しています。
my-custom.js: window["CustomSunburstStyle"] = { // sunburst properties "sunburst" : { // Specifies whether or not the client side rotation is enabled - on, off "rotation": "off", // The text of the component when empty "emptyText": "No data to display", // Specifies the selection mode - none, single, multiple "nodeSelection": "multiple", // Animation effect when the data changes - none, auto "animationOnDataChange": "auto", // Specifies the animation that is shown on initial display - none, auto "animationOnDisplay": "auto", // Specifies the animation duration in milliseconds "animationDuration": "500", // Specifies the starting angle of the sunburst "startAngle": "90", // Specifies whether or not the nodes are sorted by size - on, off "sorting": "on" }, // sunburst node properties "node" : { // Specifies whether or not the label is displayed - on, off "labelDisplay": "off" } }
時系列(timeline
)は、イベントを時系列で表示できるインタラクティブ・コンポーネントであり、定義されていてまだ調整可能な時間範囲(ズームに使用可能)内を前後に移動できます。
イベントは、時系列アイテム・コンポーネント(timelineItem
)によって表され、これにはタイトル、説明および継続時間の塗りつぶし色が含まれます。2つの時系列を構成して2系列のイベントを表示し、関連する情報を並べて比較することができます。
注意: MAF AMXでは、時系列と同様のコンポーネントで使用できることが多い次の機能、子要素およびプロパティはサポートしていません。
|
「パレット」で、「時系列」は「MAF AMXデータ視覚化」の下にあり、その子コンポーネントである「時系列アイテム」および「時系列の系列」もここにあります。
次の例は、MAF AMXファイルで定義されているtimeline
要素およびその子を示しています。
<dvtm:timeline id="tl" itemSelection="#{pageFlowScope.itemSelection}" startTime="#{pageFlowScope.startTime}" endTime="#{pageFlowScope.endTime}"> <dvtm:timelineSeries id="ts1" label="#{pageFlowScope.s1Label}" value="#{bindings.series1Data.collectionModel}" var="row" selectionListener= "#{PropertyBean.timelineSeries1SelectionHandler}"> <dvtm:timelineItem id="ti1" startTime="#{row.startDate}" endTime="#{row.endDate}" title="#{row.title}" description="#{row.description}" durationFillColor="#AAAAAA"/> </dvtm:timelineSeries> <dvtm:timeAxis id="ta1" scale="#{pageFlowScope.scale}"/> </dvtm:timeline>
時系列アイテムのdurationFillColor
属性を使用して、継続時間バーの塗りつぶし色を制御できます。
時系列で2つの時間スケールを同時に表示するには、2番目の軸のスケールを決定する時間軸のscale
属性を使用します。
時系列は水平および垂直にスクロールできます。コンポーネントがスクロール可能な(表示可能な表示領域の外側にデータが含まれている)場合、スクロールの方向を指す矢印によって示されます。
timeline
要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、時系列コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第13.6.4項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
オーバーライド可能な次のCSSスタイル・クラスは、時系列およびその子コンポーネント用に定義されます。
.dvtm-timeline
サポートされているプロパティ: all
.timelineSeries-backgroundColor
サポートされているプロパティ: color
.timelineSeries-labelStyle
サポートされているプロパティ: font-family、font-size、font-weight、color、font-style
.timelineItem-backgroundColor
サポートされているプロパティ: color
.timelineItem-selectedBackgroundColor
サポートされているプロパティ: color
.timelineItem-borderColor
サポートされているプロパティ: color
.timelineItem-selectedBorderColor
サポートされているプロパティ: color
.timelineItem-borderWidth
サポートされているプロパティ: width
.timelineItem-feelerColor
サポートされているプロパティ: color
.timelineItem-selectedFeelerColor
サポートされているプロパティ: color
.timelineItem-feelerWidth
サポートされているプロパティ: width
.timelineItem-descriptionStyle
サポートされているプロパティ: font-family、font-size、font-weight、color、font-style
.timelineItem-titleStyle
サポートされているプロパティ: font-family、font-size、font-weight、color、font-style
.timeAxis-separatorColor
サポートされているプロパティ: color
.timeAxis-backgroundColor
サポートされているプロパティ: color
.timeAxis-borderColor
サポートされているプロパティ: color
.timeAxis-borderWidth
サポートされているプロパティ: width
.timeAxis-labelStyle
サポートされているプロパティ: font-family、font-size、font-weight、color、font-style
次の例は、時系列コンポーネントのデフォルトのスタイル設定のオーバーライドに使用できるカスタムのJavaScriptファイルを示しています。
// Custom timeline style definition with listing // of all properties that can be overriden window["CustomTimelineStyle"] = { // Determines if items in the timeline are selectable "itemSelection": none // Timeline properties "timelineSeries" : { // Duration bars color palette "colors" : [comma separated list of hex colors] } }
NBox (nBox
)コンポーネントは、2つのディメンションに渡ってデータを表し、各ディメンションは多数の範囲に分かれ、その交点は各データが配置される個別のセルを形成します。
「パレット」で、「NBox」は「MAF AMXデータ視覚化」の下にあります。
次の例は、MAF AMXファイルで定義されているnBox
要素およびその子を示しています。
<dvtm:nBox id="nBox1" var="item" value="#{bindings.NBoxNodesDataList.collectionModel}" columnsTitle="#{pageFlowScope.columnsTitle}" emptyText="#{pageFlowScope.emptyText}" groupBy="#{pageFlowScope.groupBy}" groupBehavior="#{pageFlowScope.groupBehavior}" highlightedRowKeys="#{pageFlowScope.showHighlightedNodes ? pageFlowScope.highlightedRowKeys : ''}" inlineStyle="#{pageFlowScope.inlineStyle}" legendDisplay="#{pageFlowScope.legendDisplay}" maximizedColumn="#{pageFlowScope.maximizedColumn}" maximizedRow="#{pageFlowScope.maximizedRow}" nodeSelection="#{pageFlowScope.nodeSelection}" rowsTitle="#{pageFlowScope.rowsTitle}" selectedRowKeys="#{pageFlowScope.selectedRowKeys}" shortDesc="#{pageFlowScope.shortDesc}"> <amx:facet name="rows"> <dvtm:nBoxRow value="low" label="Low" id="nbr1"/> <dvtm:nBoxRow value="medium" label="Med" id="nbr2"/> <dvtm:nBoxRow value="high" label="High" id="nbr3"/> </amx:facet> <amx:facet name="columns"> <dvtm:nBoxColumn value="low" label="Low" id="nbc2"/> <dvtm:nBoxColumn value="medium" label="Med" id="nbc1"/> <dvtm:nBoxColumn value="high" label="High" id="nbc3"/> </amx:facet> <amx:facet name="cells"> <dvtm:nBoxCell row="low" column="low" label="" background="rgb(234,153,153)" id="nbc4"/> <dvtm:nBoxCell row="medium" column="low" label="" background="rgb(234,153,153)" id="nbc5"/> <dvtm:nBoxCell row="high" column="low" label="" background="rgb(159,197,248)" id="nbc6"/> <dvtm:nBoxCell row="low" column="medium" label="" background="rgb(255,229,153)" id="nbc7"/> <dvtm:nBoxCell row="medium" column="medium" label="" background="rgb(255,229,153)" id="nbc8"/> <dvtm:nBoxCell row="high" column="medium" label="" background="rgb(147,196,125)" id="nbc9"/> <dvtm:nBoxCell row="low" column="high" label="" background="rgb(255,229,153)" id="nbc10"/> <dvtm:nBoxCell row="medium" column="high" label="" background="rgb(147,196,125)" id="nbc11"/> <dvtm:nBoxCell row="high" column="high" label="" background="rgb(147,196,125)" id="nbc12"/> </amx:facet> <dvtm:nBoxNode id="nbn1" row="#{item.row}" column="#{item.column}" label="#{item.name}" labelStyle="font-style:italic" secondaryLabel="#{item.job}" secondaryLabelStyle="font-style:italic" shortDesc="#{item.name + ': ' + item.job}"> <dvtm:attributeGroups id="ag1" type="indicatorShape" value="#{item.indicator1}" rendered="#{pageFlowScope.showIndicator}"/> <dvtm:attributeGroups id="ag2" type="indicatorColor" value="#{item.indicator2}" rendered="#{pageFlowScope.showIndicator}"/> <dvtm:attributeGroups id="ag3" type="color" value="#{item.group}" rendered="#{pageFlowScope.showColors}"/> </dvtm:nBoxNode> </dvtm:nBox>
nBox
要素およびその子要素の属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
マップ・コンポーネント、サンバースト、ツリーマップ、時系列およびNBoxの様々な子要素を定義できます。使用可能な子要素およびその属性の詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
OEPEでは、マップ、サンバースト、ツリーマップ、時系列およびNBoxの子コンポーネントは「パレット」の「MAF AMXデータ視覚化」の下にあります(図13-74を参照)。この図では、「パレット」→「レイアウト」から「詳細」オプションが選択されています。ここでは、「MAF AMXデータ視覚化」リストの各アイコンの隣にツールチップ・コンテンツが表示されています。
「データ・コントロール」ウィンドウ(第12.3.2.3項「データ・コントロールのビューへの追加」を参照)から挿入されるデータ・コレクションを使用して、データバインドされたデータ視覚化コンポーネントを宣言的に作成できます。パレット選択(図13-85を参照)では、見出し「MAF AMXデータ視覚化」の下にある数多くのデータ視覚化コンポーネント・カテゴリ、タイプおよびレイアウト・オプションから選択できます。
注意: いくつかのデータ視覚化コンポーネント・タイプには、特別な種類のデータが必要です。選択したコンポーネントのタイプの表示に十分なデータが含まれていないデータ・コレクションにコンポーネントをバインドすると、コンポーネントは表示されず、データが不十分であることを示すメッセージが表示されます。 |
「コンポーネント・ギャラリ」の表示をトリガーするには、「データ・コントロール」ウィンドウからMAF AMXページにコレクションをドラッグ・アンド・ドロップし、表示されるコンテキスト・メニューから「MAFチャート」、「MAFゲージ」または「MAFテーマ・マップ」のいずれかを選択します。(図13-76を参照)。
データバインドされている新しいコンポーネント用にカテゴリ、タイプおよびレイアウトをコンポーネント・ギャラリから選択し、「OK」をクリックすると、データ視覚化コンポーネントのデータ収集属性の設定値を起動できます。ギャラリ、ダイアログおよび入力フィールドのラベルの名前は、選択したデータ視覚化コンポーネントのカテゴリおよびタイプに応じて異なります。たとえば、タイプchartData
のデータ・コントロールをアプリケーションにドラッグし、タイプとして「チャート」→「横棒」を選択すると、表示されるダイアログの名前は「横棒グラフのバインド」になり、バインドされたデータ要素(age
、totalContribution
、totalSavings
およびshortDesc
)を選択できるようになり、棒またはY軸に適用できます(図13-77を参照)。
データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さなどのマーカーまたは散布図のポイントで示される数字です。データ値のカテゴリは、軸ラベルとして表されるメンバーです。バインディング内で属性が担うロール(データ値またはID)は、データ型(グラフには数値データ値が必要)およびマップされる場所(棒やX軸など)の両方によって決まります。
コンポーネント・ギャラリを使用してデータバインドされているテーマ・マップ・コンポーネントを作成する場合、表示されるダイアログの名前は「'thematicMap'のバインド」になり、コンポーネント・ギャラリでは、エリア・レイヤーとして詳細な選択項目を持ったベース・マップを選択できます。たとえば、ベース・マップとして「すべてのユーザー」を選択し、エリア・レイヤーとして「世界(大陸)」を選択すると、ダイアログ(図13-78を参照)が開きます。
1つ以上のデータ・バインディング・ダイアログの完了後に、「プロパティ」ウィンドウを使用して、コンポーネントの属性の設定を指定できます。コンポーネントと関連付けられた子要素を使用して、さらにカスタマイズすることもできます(第13.5.17項「チャートおよびゲージ・コンポーネントの子要素の定義方法」を参照)。
MAF AMXページにコレクションをドロップする際にコンテキスト・メニューから「MAF地理マップ」、「MAFサンバースト」、「MAF NBox」、「MAFタイムライン」または「MAFツリーマップ」を選択すると、次のいずれかのダイアログが表示されます。
「NBoxの作成」ダイアログへの入力は、行および列の数を定義することから始めます。その後、ボックス上のセルを選択して、ダイアログの下部で行または列全体の値を指定できます(図13-84を参照)。
NBoxコンポーネントは、「次へ」をクリックして一連のダイアログのすべてのページを入力すると作成されます。
各ダイアログのフィールドごとの値の詳細は、「ヘルプ」をクリックするか[F1]を押して、オンライン・ヘルプを参照してください。
「データ・コントロール」ウィンドウからデータバインドされたチャート・コンポーネントを作成する場合、seriesStyle
要素を追加することでチャートの一連のデータに対するスタイル設定情報を宣言的に指定した後に、「プロパティ」ウィンドウを使用してseriesStyle
要素のseries
属性用のエディタを開くことができます。また、seriesStyle
要素のaction
プロパティを使用すると、チャート・コンポーネントをクリック可能にできます。このエディタには、dataStamp
ファセット内のchartDataItem
要素の値に基づいたseries
属性の値がすでに移入されています。
チャートの次の子コンポーネント用イベントドリブン・トリガーを定義すると、いくつかのチャート・コンポーネントのタップを介してエンド・ユーザーによるインタラクティブ性を有効にできます。
プロパティ設定リスナーやポップアップ表示動作(完全なリストは表13-16「サポートされているイベント・リスナーおよびイベント・タイプ」を参照)など、サポートされている操作に加え、起動されるアクションのタイプを定義するようにアクション属性を設定できます。
<amx:panelPage id="pp1" styleClass="dvtm-gallery-panelPage"> ... <dvtm:lineChart id="lineChart1" var="row" value="#{bindings.lineData1.collectionModel}" ... > <amx:facet name="dataStamp"> <dvtm:chartDataItem group="#{row.group}" value="#{row.value}" series=" #{row.series}" label="#{pageFlowScope.labelDisplay ? row.value : ''}" > <amx:showPopupBehavior popupId="pAdvancedOptions" type="action" align="overlapTopCenter" alignId="pflOptionsForm" decoration="anchor"/> </dvtm:chartDataItem> </amx:facet> ... </dvtm:lineChart> ... </amx:panelPage> <amx:popup id="pAdvancedOptions" styleClass="dvtm-gallery-options-dialog">
詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
次のチャート・コンポーネントについて、そのcoordinateSystem
属性をpolar
に設定すると、極ビューを有効にできます。
面グラフ
棒グラフ
バブル・チャート
コンボ・チャート
線グラフ
散布図
極設定が前述のいずれのチャート・タイプにも適用される場合(棒を除き)、polarGridShape
属性を使用して極グリッドを循環またはポリゴンとして定義できます。
極チャートの放射軸は、そのY軸子コンポーネントを使用してカスタマイズできます。
詳細は、Oracle Fusion Middleware Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
MAFでは、UIコンポーネントにスタイルを適用するためにCSSを使用できます。
次の属性を設定することで、UIコンポーネントをスタイル設定できます。
styleClass
属性は、レイアウト・コンポーネントに対して使用するCSSスタイル・クラスを定義します。
<amx:panelPage styleClass="#{pageFlowScope.pStyleClass}">
MAF AMXページまたはスキニングCSSファイルでレイアウト、コマンドおよび入力の各コンポーネントのスタイル・クラスを定義できますが、その場合、特定のスタイルがMAF AMXアプリケーション機能内のすべてのコンポーネントに適用されます(第13.6.3項「スキニングに関する必知事項」を参照)。かわりに、MAFによって提供されるパブリック・スタイル・クラスを使用できます。
注意: OEPEからCSSファイルにはアクセスできません。かわりに、MAFによって、ビルドまたはデプロイ時にこのファイルがパッケージに注入され、ViewContent ルート・ディレクトリの下のcss ディレクトリにCSSファイルが表示されます。 |
inlineStyle
属性は、任意のUIコンポーネントに使用するCSSスタイルを定義し、コンポーネントのルートDOM要素に適用される一連のCSSスタイルを表します。
<amx:outputText inlineStyle="color:red;">
この属性は、基本スタイルの変更が必要な場合に使用してください。
注意: いくつかのUIコンポーネントは、HTMLdiv 要素やさらに複雑なマークアップなどのサブ要素でレンダリングされます。その結果、親コンポーネントにinlineStyle 属性を設定しても、目的の効果が得られないことがあります。そのような場合、生成されたマークアップを調べ、inlineStyle 属性を定義するかわりに、サブ要素にスタイルを伝播するCSSクラスを適用します。
JavaScriptのデバッグ方法の詳細は、第31.3.5項「JavaコードおよびJavaScriptのデバッグを有効にする方法」を参照してください。 |
これらの属性は、「プロパティ」ウィンドウの「プロパティ」セクションに表示されます(図13-85を参照)。Value列を使用して、スタイル・シートを定義するために各プロパティ値を指定します。
詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください。
OEPEには、各コンポーネントの組込みスタイル・クラスを使用するためのツールが含まれています。これは、HTMLファイルまたはHTML表現(amx:tableLayout
や同様の視覚化要素)を含むXMLファイルにあるタグをクリックしたときに「プロパティ」ウィンドウから使用できます。
OEPEには、スタイル・クラスを変更するために2つのオプションが用意されています。
要素のインライン・スタイル・クラスを編集すると、クラスの特性(フォント、サイズ、ウェイトなど)を指定できます。
アプリケーション用のCSSファイル内ですでに定義されている使用可能な組込みスタイル・クラスから選択できます。
要素のインライン・スタイル・クラスを編集するには、次の手順を実行します。
ソース・エディタで、表示されるツールチップを使用してamx:tableLayout
などの視覚化表示要素(図13-86を参照)を定義するファイルにあるタグをクリックします。この例では、OEPEによって「プロパティ」ペインに「表のレイアウト」ページが表示されています。
「表のレイアウト」ページで、図13-87に示すように「スタイル」タブを選択します。
「インライン・スタイル」入力ボックスの隣にあるアイコンをダブルクリックします。これによって、図13-88に示す「CSSスタイルの定義」ダイアログが開きます。
ダイアログの左には、編集可能なスタイル・プロパティのリストがあります。別のスタイル・プロパティを選択するとメイン表示が変わり、この表示には選択したスタイル・プロパティの特性が反映されています。たとえば、「テキスト」パネルでは、表のテキストのフォント、サイズ、スタイルおよびその他の特性を指定でき、「境界」スタイル・プロパティを選択すると上、左、右および下の境界の幅を個別に設定でき、さらに太さ、色やその他の特性も選択できます。
スタイルの特性を指定し終わったら、「OK」をクリックします。OEPEによって、AMXファイルに表の特性が追加されます。
組込みスタイル・クラスを選択するには、次の手順を実行します。
ソース・エディタで、表示されるツールチップを使用してcommandButton
などの視覚化表示要素(図13-89を参照)を定義するファイルにあるタグをクリックします。
「スタイル・クラス」フィールドの右側にあるアイコンをクリックして「スタイル・クラス」ダイアログを表示し、エントリを展開します(図13-90を参照)。アプリケーションの/css
ディレクトリに追加のCSSファイルがあるときは、選択できます(この例では単一エントリのみが表示されています)。
各スタイル・クラスにマウスを置くと、詳細情報がわかります。選択したら、「OK」をクリックします。
AMXタグを選択すると、その特定のタグに適した特性のリストが「プロパティ」ペインに表示されます。たとえば、amf:outputText
タグをクリックすると、「プロパティ」ペインに「出力テキスト」ダイアログが表示されます(図13-91を参照)。
図13-91に示すとおり、「すべて」タブを選択すると、編集可能なすべてのプロパティが1つのダイアログが表示されます。ここで示すとおり、「inlineStyle」値を選択して、イメージの右側にある強調表示された省略記号のアイコンをクリックすると、OEPEによってCSSスタイルの定義ダイアログ(図13-88を参照)が表示され、ここで、amf:outputText
のテキスト、背景、ブロック、ボックス、境界線、リスト、位置および拡張プロパティの適切な特性を指定できます。
スキニングによって、MAF AMXアプリケーション機能内のすべてのUIコンポーネントに均一なスタイルを定義および適用し、機能全体に対するテーマを作成できます。
MAFのデフォルトのスキン・ファミリはmobileAlta
で、デフォルト・バージョンはそのスキンの最新バージョンです。詳細は、第8章「MAFアプリケーションのスキニング」を参照してください。
デフォルト・バージョンのmobileAlta
(v1.2)は、inlineStyle
を使用せずに、goLink
、commandLink
およびimage
コンポーネントを垂直に揃えることができます。カスタム・スタイル・コンポーネントを使用してこれらの要素を中央に揃えた場合、mobileAlta
v1.2では、アプリケーションのプライマリ、ヘッダー、セカンダリおよびフッター・ファセットのために、これらのコンポーネントの中央揃えを処理します。
MAF AMXデータ視覚化コンポーネントのスタイル・プロパティの大部分は、css
ディレクトリにあるdvtm.css
ファイルで定義されます。デフォルト値をオーバーライドするには、アプリケーション機能レベルでカスタム・スタイル定義を含むカスタムCSSファイルを追加します。
スタイル・プロパティのいくつかは、CSSにマップできないため、カスタムJavaScriptファイルで定義する必要があります。それらのプロパティは、次のとおりです。
ダイヤル・ゲージ・コンポーネントの背景および針のイメージ(第13.5.15章「ダイアル・ゲージの作成方法」を参照)。
時系列コンポーネントの経過時間バーのカラー・パレット(第13.5.23項「時系列コンポーネントの作成方法」を参照)。
テーマ・マップ・コンポーネントのベース・マップ(第13.5.19.5項「カスタム・ベース・マップの定義」を参照)。
地理マップ・コンポーネントのスタイル・プロパティ(第13.5.18項「地理マップ・コンポーネントの作成方法」を参照)。
テーマ・マップ・コンポーネントのスタイル・プロパティ(第13.5.19.7項「テーマ・マップ・コンポーネントへのカスタム・スタイルの適用」を参照)。
評価ゲージ・コンポーネントのselectedおよびunselected状態(第13.5.16.1項「評価ゲージ・コンポーネントへのカスタム・スタイルの適用」を参照)。
アプリケーション機能レベルで「包含」セクションにこれらのカスタムJavaScriptファイルを指定する必要があります。それによって、XMLスタイル・テンプレートで定義したデフォルト・スタイル値をオーバーライドします。次の例はJavaScriptファイルを示していますが、これは、CSSを使用してスタイル設定できないプロパティのカスタム・スタイル設定を必要とするデータ視覚化コンポーネントを持つMAF AMXアプリケーション機能を含むMAFプロジェクトに追加するファイルと似ています。
my-custom.js: CustomChartStyle = { // common chart properties 'chart': { // text to be displayed, if no data is provided 'emptyText': null, // animation effect when the data changes 'animationOnDataChange': "none", // animation effect when the chart is displayed 'animationOnDisplay': "none", // time axis type - disabled, enabled, mixedFrequency 'timeAxisType': "disabled" }, // chart title separator properties 'titleSeparator': { // separator upper color 'upperColor': "#74779A", // separator lower color 'lowerColor': "#FFFFFF", // should display title separator 'rendered': false }, // chart legend properties 'legend': { // legend position - none, auto, start, end, top, bottom 'position': "auto" }, // default style values 'styleDefaults': { // default color palette 'colors': ["#003366", "#CC3300", "#666699", "#006666", "#FF9900", "#993366", "#99CC33", "#624390", "#669933", "#FFCC33", "#006699", "#EBEA79"], // default shapes palette 'shapes': ["circle", "square", "plus", "diamond", "triangleUp", "triangleDown", "human"], // series effect 'seriesEffect': "gradient", // animation duration in ms 'animationDuration': 1000, // animation indicators - all, none 'animationIndicators': "all", // animation up color 'animationUpColor': "#0099FF", // animation down color 'animationDownColor': "#FF3300", // default line width for line chart 'lineWidth': 3, // default line style for line chart - solid, dotted, dashed 'lineStyle': "solid", // should markers be displayed for line and area charts 'markerDisplayed': false, // default marker color 'markerColor': null, // default marker shape 'markerShape': "auto", // default marker size 'markerSize': 8, // pie feeler color for pie chart 'pieFeelerColor': "#BAC5D6", // slice label position and text type for pie chart 'sliceLabel': { 'position': "outside", 'textType': "percent" } } }; CustomGaugeStyle = { // default animation duration in milliseconds 'animationDuration': 1000, // default animation effect on data change 'animationOnDataChange': "none", // default animation effect on gauge display 'animationOnDisplay': "none", // default visual effect 'visualEffects': "auto" }; CustomTimelineStyle = { 'timelineSeries' : { // duration bars color palette 'colors' : ["#267db3", "#68c182", "#fad55c", "#ed6647"] }; ... }
JavaScriptファイルを定義した後、任意の値をコメント解除および変更できます。次の例に示すように、maf-feature.xml
ファイルに包含される機能としてこのファイルを追加します。
<?xml version="1.0" encoding="UTF-8" ?> <adfmf:features xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:adfmf="http://xmlns.oracle.com/adf/mf"> <adfmf:feature id="feature1" name="feature1"> <adfmf:content id="feature1.1"> <adfmf:amx file="feature1/untitled1.amx"> <adfmf:includes> <adfmf:include type="StyleSheet" file="css/custom.css"/> <adfmf:include type="JavaScript" file="feature1/js/my-custom.js"/> </adfmf:includes> </adfmf:amx> </adfmf:content> </adfmf:feature> </adfmf:features>
「MAF AMXページ」で、OEPEが提供する標準XLIFFを使用すると、UIコンポーネントに表示されるテキストをローカライズできます。これを行うには、.amx
ファイルを選択し、文字列を右クリックしてコンテキスト・メニューの「ソース」→「文字列の外部化」を選択します。これで、「文字列の外部化」ダイアログが表示されます(図13-92を参照)。
注意: プロジェクト・エクスプローラでファイルを右クリックし、「ソース」→「文字列の外部化」を選択すると、ファイルを外部化することもできます。 |
外部化する値/キー・ペアを選択し、「編集」を選択して値を変更します。目的のすべてのペアを編集したら、「終了」をクリックしてXLIFFファイルを作成します。XLIFFファイルのデフォルト名が表示され、これを変更するには、「構成」をクリックします。XLIFFファイルを作成したら、図13-93のようにこのファイルを編集し、外部化された文字列の値を変更します。
XLIFF (XML Localization Interchange File Format)ファイルが存在しない場合は、このファイルが作成されます。存在する場合は、新しいエントリが既存のXLIFFファイルに追加されます。さらに、ViewControllerBundle.xlf
ファイル(デフォルト名ですが、名前は基本的にプロジェクトと一致します)を指す表示コンポーネントの子として、対応するバンドルのロード(loadBundle
)コンポーネントが作成されます。
注意: ViewControllerBundle.xlf はデフォルトのファイル名です。この名前はプロジェクトの名前と一致します。 |
図13-94は、MAF AMXファイルでの変更を示しています。
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)。
詳細は、第13.8.3項「Oracle Global HTML Accessibility Guidelinesに関する必知事項」を参照してください。
iOSのアクセシビリティ・ガイドライン。
詳細は、『Accessibility Programming Guide for iOS』を参照してください。
そのようなコンポーネントの導入によって、アクセス可能なコンポーネントの外観の変更されたり、アプリケーション・ロジックが影響受けることがありません。
MAF AMXアプリケーション機能のアクセシビリティが適切に機能するために、次のガイドラインに従ってください。
ナビゲーションの深さは3レベル以内にして、ユーザーが簡単にホーム画面に戻れるようにする必要があります。
スクリプトを最小限に維持します。
DOMとの直接対話を提供しないでください。
JavaScriptのタイムアウトは使用しないでください。
フォーカスの不要な変更は回避します。
ポップアップ・トリガーを明示的に指定する
必要に応じて、WAI-ARIAライブ・リージョンを利用します(第13.8.2項「基本的なWAI-ARIA用語に関する必知事項」を参照)。
CSSの使用を最小限に維持します。
デフォルト・コンポーネントの外観をオーバーライドしないようにしてください。
拡大縮小が可能なサイズ単位を選択します。
CSSの位置設定は使用しないでください。
詳細は、次を参照してください。
『Mobile Accessibility』(http://www.w3.org/WAI/mobile
)
『Web Content Accessibility and Mobile Web: Making a Web Site Accessible Both for People with Disabilities and for Mobile Devices』(http://www.w3.org/WAI/mobile
)
MAF AMX UIおよびデータ視覚化コンポーネントには、組込みのアクセシビリティ・サポートが備えられており、ほとんどのコンポーネントがアクセシビリティ監査の対象となっています(図13-95を参照)。
表13-10は、「プロパティ」の「アクセシビリティ」セクションで設定できるコンポーネントおよびそれらの属性を示しています。
表13-10 構成可能なアクセシビリティ属性を持つUIコンポーネント
コンポーネント | アクセシビリティ属性 | アクセシビリティ監査メッセージ |
---|---|---|
ボタン( |
短い説明( |
|
選択ボタン( |
短い説明( |
|
リンク( |
短い説明( |
|
リンク(実行) ( |
短い説明( |
|
カルーセル( |
短い説明( |
|
カルーセル・アイテム( |
短い説明( |
|
リスト・アイテム( |
短い説明( |
|
ポップアップ( |
短い説明( |
|
イメージ( |
短い説明( |
|
入力テキスト( |
ヒント・テキスト( |
|
パネル・グループ・レイアウト( |
ランドマーク( |
NA脚注 1 |
デック( |
ランドマーク( |
NA (脚注1を参照) |
表のレイアウト( |
短い説明( |
|
セル・フォーマット( |
短い説明( |
|
フィルム・ストリップ( |
短い説明( |
|
フィルム・ストリップ・アイテム( |
短い説明( |
|
面グラフ( |
短い説明( |
|
棒グラフ( |
短い説明( |
|
横棒グラフ( |
短い説明( |
|
バブル・チャート( |
短い説明( |
|
コンボ・チャート( |
短い説明( |
|
線グラフ( |
短い説明( |
|
散布図( |
短い説明( |
|
スパーク・チャート( |
短い説明( |
|
円グラフ( |
短い説明( |
|
NBoxノード( |
短い説明( |
|
参照オブジェクト( |
短い説明( |
|
参照面( |
短い説明( |
|
参照線( |
短い説明( |
|
チャートのデータ・アイテム。( |
短い説明( |
|
円グラフのデータ・アイテム。( |
短い説明( |
|
ファンネル・データ・アイテム。( |
短い説明( |
|
面( |
短い説明( |
|
マーカー( |
短い説明( |
|
ツリーマップ・ノード。( |
短い説明( |
|
サンバースト・ノード。( |
短い説明( |
|
LEDゲージ( |
短い説明( |
|
ステータス・メーター・ゲージ( |
短い説明( |
|
ダイヤル・ゲージ( |
短い説明( |
|
評価ゲージ( |
短い説明( |
|
地理マップ( |
短い説明( |
|
テーマ・マップ( |
短い説明( |
|
ファンネル・チャート( |
短い説明( |
|
NBox ( |
短い説明( |
|
サンバースト( |
短い説明( |
|
時系列( |
短い説明( |
|
ツリーマップ( |
短い説明( |
|
脚注 1 ランドマーク属性にはデフォルト値(none)があり、アクセシビリティ監査の対象ではありません。
shortDesc
属性は、コンポーネントごとに異なる目的で使用します。たとえば、イメージ・コンポーネントにshortDesc
属性を設定すると、MAF AMXファイルでそれはimage
要素のalt
属性の値として表示されます。
shortDesc
属性の値はローカライズできます。
パネル・グループ・レイアウト・コンポーネントおよびデック・コンポーネントの場合、ページのコンテキストに従って適用可能なランドマーク・ロール・タイプ(表13-15「ランドマーク・ロール」を参照)を定義します。landmark
属性に次の値の1つを設定できます。
デフォルト(なし)
アプリケーション
banner
complementary
contentinfo
form
main
navigation
search
表13-11は、WAI-ARIA仕様によって定義されるそのアクセシビリティ属性が実行時に自動的に適用され、変更できないUIコンポーネントを示しています。
表13-11 静的アクセシビリティ属性を持つUIコンポーネント
コンポーネント | アクセシビリティ属性 | アクセシビリティ監査メッセージ |
---|---|---|
入力日( |
ラベル( |
|
入力数値スライダ( |
ラベル( |
|
パネル・ラベルおよびメッセージ( |
ラベル( |
|
アイテムの選択( |
ラベル( |
|
チェックボックス( |
ラベル( |
|
ブール・スイッチ( |
ラベル( |
|
ラジオ・ボタン( |
ラベル( |
|
チェックボックスを複数選択( |
ラベル( |
|
選択肢を複数選択( |
ラベル( |
|
選択肢( |
ラベル( |
|
出力テキスト( |
値( |
NA脚注 1 |
脚注 1 値属性はアクセシビリティ監査の対象外です。
図13-95は、OEPEに表示されるアクセシビリティ監査警告を示しています。
アクセス可能なMAF AMXアプリケーション機能をテストする方法の詳細は、第31.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仕様での定義)を示しています。
表13-12は、全般的なロール概念を定義する目的でWAI-ARIAのロールの分類をサポートするために使用される抽象ロールを示しています。
表13-12 抽象ロール
抽象ロール | 説明 |
---|---|
input |
ユーザー入力を可能にする一般的なタイプのウィジェット。 |
landmark |
ナビゲーショナル・ランドマークを意図したページのリージョン。 |
select |
ユーザーが一連の選択肢から選択を行えるフォーム・ウィジェット。 |
widget |
グラフィカル・ユーザー・インタフェースのインタラクティブ・コンポーネント。 |
表13-13は、スタンドアロン・ユーザー・インタフェース・ウィジェットまたは大きい複合ウィジェットの一部として機能するウィジェット・ロールを示しています。
表13-13 ウィジェット・ロール
ウィジェット・ロール | 説明 | ウィジェットで必要とされる状態 |
---|---|---|
alertdialog |
アラート・メッセージを含むダイアログのタイプ。最初のフォーカスはそのダイアログ内の要素に移動します。 |
aria-labelledby、aria-describedby |
button |
クリックまたは押されたときにユーザーによってトリガーされるアクションを可能にする入力。 |
aria-expanded (ステート)、aria-pressed (ステート) |
checkbox |
|
aria-checked (ステート) |
dialog |
応答を要求するためにアプリケーションの現在の処理を中断するように設計されているアプリケーション・ウィンドウによって表されるダイアログ。 |
aria-labelledby、aria-describedby |
link |
内部または外部リソースへのインタラクティブな参照。アクティブ化されるとユーザー・エージェントがそのリソースにナビゲートします。 |
aria-disabled (ステート)、aria-describedby |
option |
選択リスト内の選択可能アイテム。 |
aria-labelledby、aria-checked (ステート)、aria-selected (ステート) |
radio |
ラジオ・ロールのグループ内のチェック可能入力。同時にチェックできるのはそれらのうち1つのみです。 |
aria-checked (ステート)、aria-disabled (ステート) |
slider |
指定された範囲内からユーザーが値を選択するユーザー入力。 |
aria-valuemax、aria-valuemin、aria-valuenow、aria-disabled (ステート) |
listbox |
選択肢のリストからユーザーが1つ以上のアイテムを選択できるウィジェット。 |
aria-live |
radiogroup |
ラジオ・ボタンのグループ。 |
aria-disabled (ステート) |
listitem |
リストまたはディレクトリ内の単一アイテム。 |
aria-describedby |
textbox |
その値として自由形式のテキストを使用できる入力。 |
aria-labelledby、aria-readonly、aria-required、aria-multiline、aria-disabled (ステート) |
表13-14は、ページ内のコンテンツを編成する構造を記述するドキュメント構造ロールを示しています。通常、ドキュメント構造はインタラクティブではありません。
表13-14 ドキュメント構造ロール
ドキュメント構造ロール | 説明 |
---|---|
img |
イメージを形成する要素のコレクションのコンテナ。 |
list |
非インタラクティブ・リスト・アイテムのグループ。 |
listitem |
リストまたはディレクトリ内の単一アイテム。 |
表13-15は、ナビゲーショナル・ランドマークを意図したページのリージョンを表すランドマーク・ロールを示しています。
表13-15 ランドマーク・ロール
ランドマーク・ロール | 説明 |
---|---|
アプリケーション |
Webアプリケーション(Webドキュメントではなく)として宣言されるリージョン. |
banner |
ほとんどサイト指向のコンテンツ(ページ固有のコンテンツではなく)を含むリージョン。 |
complementary |
DOM階層の類似したレベルにあるメイン・コンテンツを補足するように設計ているが、メイン・コンテンツから切り離しても意味を持つドキュメントのサポート・セクション。 |
contentinfo |
親ドキュメントに関する情報が含まれている大きな認識可能なリージョン。 |
form |
全体として結合されてフォームを作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。 |
main |
ドキュメントのメイン・コンテンツ。 |
navigation |
ドキュメントまたは関連ドキュメントをナビゲートするためのナビゲーショナル要素(通常はリンク)のコレクション。 |
search |
全体として結合されて検索機能を作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。 |
MAF UIコンポーネントの大部分では、アクセス可能なWAI-ARIA属性は変更できません。一部のコンポーネントでは、デザインタイムで特別なアクセス可能な属性を設定でき、パネル・グループ・レイアウトおよびデックには、WAI-ARIAランドマーク・ロール・タイプを使用できます。詳細は、第13.8.1項「アクセシビリティのためのUIコンポーネントおよびデータ視覚化コンポーネントの構成方法」を参照してください。
Oracle Global HTML Accessibility Guidelines (OGHAG)は、オラクル社が準拠しているHTMLの一連のスクリプト標準です。これらの標準は、Section 508 (http://www.section508.gov
を参照)とWeb Content Accessibility Guidelines (WCAG) 1.0 level AA (http://www.w3.org/TR/WCAG10
を参照)を組み合せ、言い回しとチェックポイントの測定を改善したものです。
詳細は、http://www.oracle.com/us/corporate/accessibility/policies/index.htmlのOracleのアクセシビリティについての考え方とポリシー
を参照してください。
MAFでは、データ入力エラーおよびデータ入力中に発生するその他の状態に関してエンド・ユーザーに通知できます。それらのタイプ(エラーまたは警告)に応じて、検証メッセージのルック・アンド・フィールが異なります。
ユーザー入力の検証は、入力が送信されたときにトリガーされます。入力テキスト・コンポーネントは、エンド・ユーザーがフィールドから離れたときに自動的に検証されます。チェックボックスや選択肢などの選択コンポーネントの場合は、エンド・ユーザー選択を行ったときに検証が行われます。検証のために、MAF AMXページのUIコンポーネントは、検証グループ操作(validationGroup
)内にまとめられ、送信操作が実行されたときに入力が検証されるコンポーネントが定義されます。検証動作(validationBehavior
)コンポーネントは、コマンド・コンポーネントのアクションが実行される前にどの検証グループが検証されるのかを定義します。1つのコマンド・コンポーネントが、複数の子検証動作コンポーネントを持つことができます。コンポーネントに検証動作が定義されていない場合、検証は行われません。
注意: ネストされた検証グループ操作を定義することはできません。検証グループの無効な定義は次のとおりです。 <amx:view> <amx:panelPage> <amx:validationGroup> <amx:panelGroupLayout> <amx:validationGroup/> <amx:panelGroupLayout/> </amx:validationGroup> </amx:panelPage> </amx:view> 有効な定義は次のとおりです。 <amx:view> <amx:panelPage> <amx:validationGroup> </amx:panelPage> <amx:popup> <amx:validationGroup> </amx:popup> </amx:view> |
MAF AMXページに検証エラー・メッセージが含まれている場合は、リスト・アイテム、リンク、ボタンなどのコマンド・コンポーネントを使用して、エンド・ユーザーがそのページに移動しないようにできます。警告を含むメッセージでは、ナビゲーションが停止されることはありません。
次の例は、MAF AMXファイルでの複数の検証グループ操作および検証動作操作など検証要素の定義方法を示しています。
<amx:panelPage id="pp1"> <amx:facet name="header"> <amx:outputText id="outputText1" value="Validate"/> </amx:facet> <amx:facet name="secondary"> <amx:commandButton id="commandButton2" action="go" text="Save"> <amx:validationBehavior id="vb1" disabled="#{pageFlowScope.myPanel ne 'panel1'}" group="group1"/> <amx:validationBehavior id="vb2" disabled="#{pageFlowScope.myPanel ne 'panel2'}" group="group2"/> <!-- invalid, should be caught by audit rule but for any reason if group not found at run time, this validate is ignored --> <amx:validationBehavior id="vb3" disabled="false" group="groupxxx"/> <!-- group is not found at run time, this validate is ignored --> <amx:validationBehavior id="vb4" disabled="false" group="group3"/> </amx:commandButton> </amx:facet> <amx:panelSplitter id="ps1" selectedItem="#{pageFlowScope.myPanel}"> <amx:panelItem id="pi1"> <amx:validationGroup id="group1"> <amx:panelFormLayout id="pfl1"> <amx:inputText value="#{bindings.first.inputValue}" required="true" label="#{bindings.first.hints.label}" id="inputText1"/> <amx:inputText value="#{bindings.last.inputValue}" label="#{bindings.last.hints.label}" id="inputText2"/> </amx:panelFormLayout> </amx:validationGroup> </amx:panelItem> <amx:panelItem id="pi2"> <amx:validationGroup id="group2"> <amx:panelFormLayout id="pfl2"> <amx:inputText value="#{bindings.salary.inputValue}" label="#{bindings.first.hints.label}" id="inputText3"/> <amx:inputText value="#{bindings.last.inputValue}" label="#{bindings.last.hints.label}" id="inputText4"/> </amx:panelFormLayout> </amx:validationGroup> </amx:panelItem> </amx:panelSplitter> <amx:panelGroupLayout id="pgl1" rendered="false"> <amx:validationGroup id="group3"> <amx:panelFormLayout id="pfl4"> <amx:inputText value="#{bindings.salary.inputValue}" label="#{bindings.first.hints.label}" id="inputText5"/> <amx:inputText value="#{bindings.last.inputValue}" label="#{bindings.last.hints.label}" id="inputText6"/> </amx:panelFormLayout> </amx:validationGroup> </amx:panelGroupLayout> </amx:panelPage>
次の例は、MAF AMXファイルのポップアップに表示される検証メッセージの定義方法を示しています。
<amx:panelPage id="pp1"> <amx:facet name="header"> <amx:outputText id="outputText1" value="Login Demo"/> </amx:facet> <amx:facet name="secondary"> <amx:commandButton id="btnBack" action="__back" text="Back"/> </amx:facet> <amx:panelGroupLayout id="panelGroupLayout1"> <amx:validationGroup id="group1"> <amx:panelGroupLayout id="panelGroupLayout2"> <amx:inputText value="#{bindings.userName.inputValue}" label="#{bindings.userName.hints.label}" id="inputText1" showRequired="true" required="true"/> <amx:inputText value="#{bindings.password.inputValue}" label="#{bindings.password.hints.label}" id="inputText2" required="true" showRequired="true" secret="true"/> <amx:outputText id="outputText2" value="#{bindings.timeToStayLoggedIn.hints.label}: #{bindings.timeToStayLoggedIn.inputValue} minutes"/> </amx:panelGroupLayout> </amx:validationGroup> <amx:commandButton id="commandButton2" text="Login" action="navigationSuccess"> <amx:validationBehavior id="validationBehavior2" group="group1"/> </amx:commandButton> </amx:panelGroupLayout> </amx:panelPage>
検証メッセージはポップアップ・コンポーネントに表示されます(第13.2.8項「ポップアップ・コンポーネントの使用方法」を参照)。検証ポップアップのタイトルを構成することはできません。それは、相対的なメッセージ重大度によって自動的に決定されます。現在のメッセージのうちの最も重大なものが検証ポップアップのタイトルになります。つまり、すべての検証メッセージがWARNING
タイプである場合は、そのタイトルは「警告」になります。メッセージのいくつかがWARNING
タイプで、その他はERROR
タイプの場合はタイトルは「エラー」に設定されます。
図13-96は、実行時に生成されるポップアップ検証メッセージを示しています。
MAF AMXページからJavaコードを呼び出し、アプリケーション・ロジックを実行するには、次のいずれかの方法でUIコンポーネントの属性としてリスナーを定義します。
MAF AMXファイルのソースでの手動による方法。
選択したコンポーネントの「プロパティ」エディタから行う方法。詳細は、Oracle Mobile Application Frameworkタグ・リファレンスを参照してください
次のリスナーを使用して、MAF AMXページにUIトリガー・イベントの検出機能を追加できます。
valueChangeListener
: 次のパラメータで作成されるValueChangeEvent
をリスニングします。
古い値を表すjava.lang.Object
新しい変更済の値を表すjava.lang.Object
actionListener
: パラメータなしで作成されるActionEvent
をリスニングします。
selectionListener
: 次のパラメータで作成されるSelectionEvent
をリスニングします。
古い行キーを表すjava.lang.Object
選択済行キーを表すjava.lang.String[]
moveListener
: 古い行キーを表すRowKey
タイプの次のパラメータで作成されるMoveEvent
をリスニングします。
移動済行キーを表すjava.lang.Object
移動済行キーがその前に挿入された行キーを表すjava.lang.String[]
rangeChangeListener
: パラメータなしで作成されるRangeChangeEvent
をリスニングします。
mapBoundsChangeListener
: 次のパラメータで作成されるMapBoundsChangeEvent
をリスニングします。
最小マップ境界のX座標(経度)を表すjava.lang.Object
最小マップ境界のY座標(緯度)を表すjava.lang.Object
最大マップ境界のX座標(経度)を表すjava.lang.Object
最大マップ境界のY座標(緯度)を表すjava.lang.Object
マップの中心のX座標(経度)を表すjava.lang.Object
マップの中心のY座標(緯度)を表すjava.lang.Object
現在のズーム・レベルを表すint
mapInputListener
: 次のパラメータで作成されるMapInputEvent
をリスニングします。
イベント・タイプを表すjava.lang.String
イベント・ポイントのX座標を表すjava.lang.Object
イベント・ポイントのY座標を表すjava.lang.Object
viewportChangeListener
: 次のパラメータで作成されるViewportChangeEvent
をリスニングします。
最小X座標を表すjava.lang.Object
最大X座標を表すjava.lang.Object
最小Y座標を表すjava.lang.Object
最大Y座標を表すjava.lang.Object
最初の表示可能グループを表すjava.lang.Object
最後の表示可能グループを表すjava.lang.Object
リスナーの値は、パターン#{*}
に一致している必要があり、次の要件を満たしている必要があります。
タイプ名: EL式
ベース・タイプ: 文字列
プリミティブ・タイプ: 文字列
ELイベントの詳細は、第14.3.6項「ELイベントについて」を参照してください。
ほとんどのMAF AMXイベント・クラスは、oracle.adfmf.amx.event.AMXEvent
クラスを拡張します。Javaコードでイベント・リスナーを定義するときは、oracle.adfmf.amx.event.AMXEvent
クラスを渡す必要があります。
詳細は、次を参照してください。
Oracle Mobile Application Framework Java APIリファレンス
Oracle Mobile Application Frameworkタグ・リファレンス
MAFでは、マネージドBeanメソッドがMAF AMX固有のイベント・クラスを使用するように、リスナーに対してマネージドBeanメソッドを作成できます。次の3つの例は、同じマネージドBeanメソッドをコールするボタンおよびリンク・コンポーネントを示しています。AMXEvent
のソース値は、コンポーネントのIDを含むメッセージ・ボックスを表示することでどのオブジェクトがイベントを起動したのかを判別します。
次の例は、MAF AMXファイルからBeanメソッドをコールする方法を示しています。
<amx:commandButton text="commandButton1" id="commandButton1" actionListener="#{applicationScope.Bean.actionListenerMethod}"> </amx:commandButton> <amx:commandLink text="commandLink1" id="commandLink1" actionListener="#{applicationScope.Bean.actionListenerMethod}"> </amx:commandLink>
次の例は、AMXEventを使用する方法を示しています。
private void actionListenerMethod(AMXEvent amxEvent) { // Some Java handling }
次の例は、イベント・メソッドを起動する方法を示しています。
public Object invokeMethod(String methodName, Object[] params) { if (methodName.equals("actionListenerMethod")) { actionListenerMethod((AMXEvent) params[0]); } return null; }
その他の例については、「ファイル」→「新」→「MAFサンプル」にあるAPIDemoアプリケーションというMAFサンプル・アプリケーションを参照してください。このサンプルは、JavaBeansからリスナーをコールする方法を示しています。
イベント・リスナーは、一部のMAF AMX UIコンポーネントの子として定義できます。リスナーのtype
属性によって、それらがどのイベントを処理するために登録されるのかが識別されます。各親UIコンポーネントでは(親コンポーネントに適した)イベントのサブセットのみがサポートされているため、これらのサポートされているイベントは、リスナーに対して選択できる限られたタイプのリストに提示されます。
表13-16は、親UIコンポーネント、それが子として持つことができるイベント・リスナー、およびそれらがサポートしているイベント・タイプを示しています。
表13-16 サポートされているイベント・リスナーとイベント・タイプ
UIコンポーネント(親) | アクション・リスナー(子) | プロパティ・リスナーの設定(子) | ポップアップ表示動作(子) | ポップアップを閉じる動作(子) | actionListener (属性) | valueChangeListener (属性) | moveListener (属性) | selectionListener (属性) | mapBoundsChangeListener (属性) | mapInputListener (属性) | viewportChangeListener (属性) | rangeChangeListener (属性) |
---|---|---|---|---|---|---|---|---|---|---|---|---|
ボタン |
サポート対象 |
サポート対象 |
サポート対象 |
サポート対象 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
リンク |
サポート対象 |
サポート対象 |
サポート対象 |
サポート対象 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
リスト・アイテム |
サポート対象 |
サポート対象 |
サポート対象 |
サポート対象 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
入力日 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
入力数値スライダ |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
入力テキスト |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
リスト・ビュー |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
チェックボックス |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
スイッチ |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
チェックボックス(複数選択) |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
選択肢(複数選択) |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
選択肢 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
選択ボタン |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
ラジオ・ボタン |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
リンク(実行) |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
カルーセル |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
カルーセル・アイテム |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
イメージ |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
面グラフ |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
棒グラフ |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
バブル・チャート |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
コンボ・チャート |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
横棒グラフ |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
LEDゲージ |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
ダイヤル・ゲージ |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
評価ゲージ |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
線グラフ |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
円グラフ |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
散布図 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
スパーク・チャート |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
ステータス・メーター・ゲージ |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
地理マップ |
サポート対象外 |
サポート済脚注 1 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート済脚注 2 |
サポート対象 |
サポート対象 |
サポート対象外 |
サポート対象外 |
テーマ・マップ |
サポート対象外 |
サポート済脚注 3 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート済脚注 4 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サンバースト |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
ツリーマップ |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
時系列 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
NBox |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
サポート対象外 |
脚注 1 プロパティ・リスナーの設定は、地理マップの領域のマーカーの子として指定できます。
脚注 2 selectionListener属性は、地理マップの面データ・レイヤーまたは点データ・レイヤーに設定できます。
脚注 3 プロパティ・リスナーの設定は、テーマ・マップの領域のマーカーの子として指定できます。
脚注 4 selectionListener属性は、テーマ・マップの面データ・レイヤーまたは点データ・レイヤーに設定できます。
子イベント・リスナーのそれぞれのtype
属性には、リスナー・イベントと一致する値の基本セットがあります。これらの値は表13-16に示す情報に基づいてフィルタ処理され、それによって、子イベント・リスナーが、識別された親UIコンポーネントのコンテキスト内にある場合に、その親によってサポートされているイベントのみが表示されるようになります。たとえば、ボタン・コンポーネントの下にあるアクション・リスナーまたはプロパティ・リスナーの設定の子では、action
タイプの値およびジェスチャーのみか表示されます。
脚注の凡例
脚注 1: 詳細は、第13.3.26.1項「disabled属性に関する必知事項」を参照してください。