| Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル開発者ガイド 11g リリース2 (11.1.2.3.0) B70750-01 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル開発者ガイド 11g リリース2 (11.1.2.3.0) B70750-01 |
|
前 |
次 |
この章では、「ADFモバイルAMX」ページのユーザー・インタフェースを作成する方法について説明します。
この章では、次の項目について説明します。
ADFモバイルは、iOSとAndroidのどちらのユーザー操作性に対しても適切に動作する「ADFモバイルAMX」ページの作成を可能にする一連のレイアウト・コンポーネントおよびフィールド・コンポーネントを提供します。ADFモバイルAMXでは、コンポーネントをコンポーネント・パレットまたはデータ・コントロール・パレットからエディタにドラッグできるようにすることで、ADF Facesと同じ開発操作性が維持されていますが、それらのコンポーネントはADF Facesのものと同等ではなく、ADFモバイルAMXコンポーネントでは、ADF Facesコンポーネントの各プロパティおよび動作がサポートされていません。本質的には、ADFモバイルAMX UIコンポーネントは、iOSおよびAndroidのプラットフォームでネイティブ・コンポーネントのHTML相当物をレンダリングし、それらのデザインタイムの動作は、ADF Facesコンポーネントにとてもよく似ています。さらに、これらのUIコンポーネントは、宣言ナビゲーションおよびデータ・バインディングのためにADFモバイルのコントローラおよびモデルと統合されています。
|
注意: モバイル・デバイス用のインタフェースを開発する場合は、画面領域が非常に限られていることに常に注意してください。また、一部のモバイル・デバイスではタッチスクリーンが使用できません。 |
詳細は、次の項を参照してください。
ADFモバイルAMXは、ページ内へのUIコンポーネントの配置を可能にするレイアウト・コンポーネント(表8-1に記載)を提供します。通常、これらのコンポーネントを使用してページの構築を開始し、次にこれらのコンテナ内で、または子コンポーネントとして、他の機能を提供する他のコンポーネントを、レイアウト・コンポーネントに追加します。これらのコンポーネントのいくつかは、拡大するコンポーネント内に配置されたときに拡大する機能などの形状管理機能を提供します。
表8-1 ADFモバイルAMXのページ管理、レイアウトおよび間隔調整コンポーネント
| コンポーネント | タイプ | 説明 |
|---|---|---|
|
ビュー |
コア・ページ構造コンポーネント |
ADFモバイルAMXファイル内に |
|
パネル・ページ |
コア・ページ構造コンポーネント |
ADFモバイルAMXファイル内に ADFモバイルAMXファイルの詳細は、第7.3.1.2項「ADFモバイルAMXページの作成」を参照してください。 |
|
ファセット |
コア・ページ構造コンポーネント |
ADFモバイルAMXファイル内に |
|
パネル・グループ・レイアウト |
ページ・レイアウト・コンテナ |
ADFモバイルAMXファイル内に |
|
パネル・フォーム・レイアウト |
ページ・レイアウト・コンテナ |
ADFモバイルAMXファイル内に |
|
パネル・ラベルおよびメッセージ |
ページ・レイアウト・コンテナ |
ADFモバイルAMXファイル内に |
|
リスト・ビュー |
ページ・レイアウト・コンテナ |
ADFモバイルAMXファイル内に |
|
リスト・アイテム |
ページ・レイアウト・コンポーネント |
ADFモバイルAMXファイル内に |
|
ポップアップ |
セカンダリ・ウィンドウ |
ADFモバイルAMXファイル内に |
|
パネル・スプリッタ |
インタラクティブ・ページ・レイアウト・コンテナ |
ADFモバイルAMXファイル内に |
|
パネル・アイテム |
インタラクティブ・ページ・レイアウト・コンポーネント |
ADFモバイルAMXファイル内に |
|
スペーサ |
間隔調整コンポーネント |
ADFモバイルAMXファイル内の 詳細は、Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイドの空白または行を使用したコンテンツの区切りに関する項を参照してください。 |
|
表のレイアウト |
ページ・レイアウト・コンテナ |
ADFモバイルAMXファイル内に |
|
行のレイアウト |
ページ・レイアウト・コンテナ |
ADFモバイルAMXファイル内に |
|
セル・フォーマット |
ページ・レイアウト・コンポーネント |
ADFモバイルAMXファイル内に |
レイアウト・コンポーネントを追加するには、それを「コンポーネント・パレット」から「ADFモバイルAMX」ページにドラッグ・アンド・ドロップします(第7.3.2.1項「UIコンポーネントの追加」を参照)。その後で、「プロパティ・インスペクタ」を使用してそのコンポーネントの属性を設定します(第7.3.2.3項「UIコンポーネントの構成」を参照)。それぞれの特定のコンポーネントの属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
例8-1は、ADFモバイルAMXファイルで定義されているいくつかのページ・レイアウト要素を示しています。
|
注意: ページ・レイアウト要素は |
例8-1 ページ・レイアウト・コンポーネントの定義
<amx:panelPage id="pp1">
<amx:outputText id="outputText1"
value="Sub-Section Title 1"
styleClass="adfmf-text-sectiontitle"/>
<amx:panelFormLayout id="panelFormLayout1" labelPosition="start">
<amx:panelLabelAndMessage id="panelLabelAndMessage1" label="Name">
<amx:commandLink id="commandLink1" text="Jane Doe" 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="888-555-1212" />
</amx:panelLabelAndMessage>
</amx:panelFormLayout>
<amx:outputText id="outputText3"
value="Sub-Section Title 2"
styleClass="adfmf-text-sectiontitle" />
<amx:panelFormLayout id="panelFormLayout2" labelPosition="start">
<amx:panelLabelAndMessage id="panelLabelAndMessage4" label="Type">
<amx:commandLink id="commandLink3" text="Personal" action="edittype" />
</amx:panelLabelAndMessage>
<amx:panelLabelAndMessage label="Anniversary">
<amx:outputText id="outputText4" value="November 22, 2005" />
</amx:panelLabelAndMessage>
</amx:panelFormLayout>
<amx:panelFormLayout id="panelFormLayout3" labelPosition="start">
<amx:panelLabelAndMessage id="panelLabelAndMessage5" label="Date Created">
<amx:outputText id="outputText5" value="June 20, 2011" />
</amx:panelLabelAndMessage>
</amx:panelFormLayout>
</amx:panelPage>
レイアウト・コンポーネントのビジュアル・プレゼンテーションを管理するには、標準Cascading Style Sheet (CSS)を使用します。CSSは、ViewControllerプロジェクトのWeb Content/cssディレクトリに、フレームワークによって提供されているデフォルトCSSとともに配置されています。詳細は、第8.6.1項「コンポーネント属性を使用したスタイルの定義方法」を参照してください。
LayoutDemoという名前のADFモバイル・サンプル・アプリケーションは、ボタンなどのADFモバイルAMX UIコンポーネントとともにレイアウト・コンポーネントを使用して一般的なパターンに従った一般的なレイアウトのいくつかを実現する方法を示しています。さらに、このサンプル・アプリケーションは、スタイルを使用してページ・レイアウトを特定のパターンに合せる方法を示します。LayoutDemoアプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
表示(ADFモバイルAMXファイルのview要素)は、コア・ページ構造コンポーネントであり、ADFモバイルAMXファイルの作成時にそのファイルに自動的に挿入されます。このコンポーネントは、ページおよびその構造の階層表現を提供し、単一の「ADFモバイルAMX」ページを表します。
詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
パネル・ページ(ADFモバイルAMXファイルのpanelPage要素)は、他のコンポーネントをレイアウトする画面のスクロール可能領域の定義を可能にするコンポーネントです。
デフォルトでは、「ADFモバイルAMX」ページを作成するときに、JDeveloperによってパネル・ページ・コンポーネントが自動的に作成され、そのページに挿入されます。そのページにコンポーネントを追加すると、それらはパネル・ページ・コンポーネント内に挿入されます。
特定の領域(ページのヘッダーやフッターなど)をスクロールできないようにし、向きが変更されたときのストレッチを有効化するには、パネル・ページに対してファセット・コンポーネントを指定します。パネル・ページのヘッダー・ファセットには、各ページのナビゲーション・バーに配置されるタイトルが含まれています。パネル・ページに含めることができる他のタイプのファセット・コンポーネントの詳細は、第8.2.6項「ファセット・コンポーネントの使用方法」を参照してください。
例8-2は、ADFモバイルAMXファイルで定義されているpanelPage要素を示しています。このパネル・ページには、ヘッダー・ファセットが含まれています。
例8-2 パネル・ページの定義
<amx:panelPage id="pp1">
<amx:facet name="header">
<amx:outputText id="ot1" value="Welcome"/>
</amx:facet>
</amx:panelPage>
詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
パネル・グループ・レイアウト・コンポーネントは、基本レイアウト・コンポーネントであり、その子を垂直方向または水平方向に配置します。パネル・グループ・レイアウト・コンポーネントを作成するには、「コンポーネント・パレット」を使用します。
パネル・グループ・レイアウト・コンポーネントを追加するには:
「コンポーネント・パレット」で、「パネル・グループ・レイアウト」を「ADFモバイルAMX」ページにドラッグ・アンド・ドロップします。
目的の子コンポーネントをパネル・グループ・レイアウト・コンポーネントに挿入します。
隣接する子コンポーネント間に間隔を追加するには、スペーサ(spacer)コンポーネントを挿入します。
「プロパティ・インスペクタ」を使用して、コンポーネント属性を設定します。詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
例8-3は、ADFモバイルAMXファイルで定義されているpanelGroupLayout要素を示しています。
パネル・フォーム・レイアウト(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")
パネル・フォーム・レイアウト・コンポーネントを追加するには:
「コンポーネント・パレット」で、「パネル・フォーム・レイアウト」を「ADFモバイルAMX」ページにドラッグ・アンド・ドロップします。
「プロパティ・インスペクタ」でコンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
例8-4は、ADFモバイルAMXファイルで定義されているpanelFormLayout要素を示しています。
パネル・ラベルおよびメッセージ(panelLabelAndMessage)コンポーネントは、label属性が定義されていないコンポーネントを、パネル・フォーム・レイアウト内に配置するために使用します。これらのコンポーネントとしては、通常、出力テキスト、ボタンまたはリンクがあります。
パネル・ラベルおよびメッセージ・コンポーネントを追加するには:
「コンポーネント・パレット」で、「パネル・ラベルおよびメッセージ」コンポーネントを「パネル・グループ・レイアウト」コンポーネントにドラッグ・アンド・ドロップします。
「プロパティ」エディタでコンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
例8-4は、ADFモバイルAMXファイルで定義されているpanelLabelAndMessage要素を示しています。label属性が、子コンポーネントに対して使用されています。
ファセット(facet)コンポーネントは、親レイアウト・コンポーネント上に、ヘッダーやフッターなど任意の名前のファセットを定義するために使用します。ファセットの位置およびレンダリングは、親コンポーネントによって決定されます。
「ADFモバイルAMX」ページのヘッダーは、通常、ヘッダー、プライマリおよびセカンダリ・ファセットと組み合せたパネル・ページ・コンポーネントによって表されます(第8.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)。
ヘッダー・ファセット: ページ・タイトルが含まれています。
プライマリ・アクション・ファセット: ヘッダー・バーの左隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
セカンダリ・アクション・ファセット: ヘッダー・バーの右隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
「ADFモバイルAMX」ページのフッターは、通常、フッター・ファセットと組み合せたパネル・ページ・コンポーネントによって表されます(第8.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)。
フッター・ファセット: コンテンツ領域の下に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
例8-6は、パネル・ページ・コンテナ内で宣言されているfacet要素を示しています。ファセットのタイプは、常にそのname属性で定義されます(表8-2を参照)。
例8-6 ファセットの定義
<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>
表8-2は、特定の親コンポーネントとともに使用できるファセット・タイプを示しています。
表8-2 ファセット・タイプと親コンポーネント
| 親コンポーネント | ファセット・タイプ(名前) |
|---|---|
|
パネル・ページ( |
|
|
リスト・ビュー( |
|
|
データ視覚化コンポーネント。 詳細は、第8.5項「データ視覚化の指定」を参照してください。 |
|
ファセット・コンポーネントを追加するには:
「構造」ペインまたは「ソース」ビューに表示されるポップアップ・メニューを使用して、ファセット・コンポーネントを別のコンポーネントの子として追加できます。ポップアップ・メニューには、選択している親コンポーネントに有効なファセットのみが表示されます。ファセットを追加するには、最初に「構造」ペインまたは「ソース」ビューで親コンポーネントを選択してから右クリックし、次のうちの1つを選択します。
親コンポーネントがパネル・ページである場合、図8-2に示すように、「ファセット」→「パネル・ページ」を選択し、リストからファセットのタイプを選択します。
親コンポーネントがリスト・ビューである場合、図8-3に示すように、「ファセット」→「リスト・ビュー」を選択し、リストからファセットのタイプを選択します。
親コンポーネントがデータ視覚化コンポーネントの1つである場合、図8-4に示すように、「ファセット」→「<DVTMコンポーネント名>」を選択し、リストからファセットのタイプを選択します。
データ視覚化コンピュータとされらの属性の詳細は、第8.5項「データ視覚化の指定」を参照してください。
別の方法:
「コンポーネント・パレット」で、「ファセット」コンポーネントを表8-2に示す別のコンポーネントにドラッグ・アンド・ドロップします。
「プロパティ・インスペクタ」でコンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
リスト・ビュー(listView)コンポーネントを使用して、エンド・ユーザーが1つ以上のオプションを選択できる選択肢のリストとしてデータを表示します。
リスト・アイテム(listItem)コンポーネントは、リスト・ビュー内の1つの行を表します。通常、リスト・ビュー内にリスト・アイテム・コンポーネントを配置し、データ・アイテムのリストをレイアウトおよびスタイル設定します。リスト・アイテム・コンポーネントは、実行時にスワイプ・ジェスチャーに応答します(第8.4項「ジェスチャーの有効化」を参照).
リスト・ビューによって、次のうち1つを定義できます。
リスト(コレクション)内のアイテム数に基づいてレプリケートされる行。
リスト・ビューのvarおよびvalue属性を指定することなく子リスト・アイテム・コンポーネントを追加することによって生成される静的行。これらの静的アイテムは必要な数を追加できます。これは、設計時にリストのコンテンツがわかっている場合に便利です。この場合、リストはメニュー・アイテムのセットのように動作します。
次のタイプのリスト・ビュー・コンポーネントを作成できます。
基本リスト
例8-7は、ADFモバイルAMXファイルで定義されているlistView要素を示しています。この定義は、基本コンポーネントに対応しています。
例8-7 基本リスト・ビューの定義
<amx:listView id="listView1">
<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>
図8-5は、デザインタイムの基本リスト・ビュー・コンポーネントを示しています。
例8-8は、ADFモバイルAMXファイル内のlistView要素のもう1つの定義を示しています。この定義も基本コンポーネントに対応していますが、このリスト・ビューの値はコレクションによって設定されます。
アイコン付きリスト
例8-9は、ADFモバイルAMXファイルで定義されているlistView要素を示しています。この定義は、アイコン付きコンポーネントに対応しています。
例8-9 アイコン付きリスト・ビューの定義
<amx:listView id="list1" value="#{myBean.listCollection}" var="row">
<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>
図8-6は、デザインタイムのアイコンおよびテキスト付きリスト・ビュー・コンポーネントを示しています。
検索付きリスト
区切り付きリスト。このタイプのリストでは、データをグループ化して順序を示すことができます。リスト・ビュー・コンポーネントの属性によって、各区切りの特性が定義されます。属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
ADFモバイルAMXでは、次のことを実行できるリスト区切りが提供されています。
そのコンテンツを個別に閉じます。
各区切り内のアイテム数を表示します。
同時に閉じます。
例8-10は、ADFモバイルAMXファイルで定義されているlistView要素を示しています。この定義は、折りたたみ可能な区切りおよびアイテム数付きのコンポーネントに対応しています。
例8-10 区切り付きリスト・ビューの定義
<amx:listView id="list1"
value="#{bindings.data.collectionModel}"
var="row"
collapsibleDividers="true"
collapsedDividers="#{pageFlowScope.mylistDisclosedDividers}"
dividerMode="all"
dividerAttribute="type"
showDividerCount="true">
<amx:listItem>
<amx:outputText id="ot1" value="#{row.name}">
</amx:listItem>
</amx:listView>
凹枠リスト
例8-11は、ADFモバイルAMXファイルで定義されているlistView要素を示しています。この定義は、凹枠コンポーネントに対応しています。
例8-11 凹枠リスト・ビューの定義
<amx:listView id="listView1" styleClass="adfmf-listView-insetList">
<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>
図8-7は、デザインタイムの凹枠リスト・ビュー・コンポーネントを示しています。
例8-12は、ADFモバイルAMXファイル内のlistView要素のもう1つの定義を示しています。この定義も凹枠コンポーネントに対応していますが、このリスト・ビューの値はコレクションによって設定されます。
ADFモバイルAMXにおけるリスト・アイテム・コンポーネントの子操作および属性の処理には、特定の順序があります。詳細は、第8.3.5.7項「操作と属性の処理順序について」を参照してください。
他のADFモバイルAMXコンポーネントとは異なり、リスト・ビューをADFモバイルAMXページにドラッグ・アンド・ドロップすると、「ListViewギャラリ」というダイアログが表示されます(図8-8を参照)。このダイアログでリスト・ビューに対して特定のレイアウトを選択できます。
表8-3は、「ListViewギャラリ」に表示される、サポートされる「リスト・フォーマット」を示しています。
表8-3 リスト・フォーマット
| フォーマット | 要素行の値 |
|---|---|
|
シンプル |
|
|
メイン-サブ・テキスト |
|
|
開始-終了 |
|
|
四分円 |
|
選択したリスト・フォーマットの「ListViewギャラリ」に表示されている「バリエーション」(図8-8を参照)は、区切りか先頭イメージのいずれかまたは両方を追加するためのオプションで構成されています。
先頭イメージのあるバリエーションを選択すると、イメージ行が「リスト・アイテム・コンテンツ」表(図8-9を参照)に追加されます。
区切りのあるバリエーションを選択すると、「区切り属性」フィールドがデフォルトの「区切りなし」ではなく、リスト内の最初の属性にデフォルトで設定され、「区切りモード」フィールドにそのデフォルト値の「すべて」が移入されます。
「ListViewギャラリ」に表示されている「スタイル」オプション(図8-8を参照)では、シェブロンを抑制することも、凹枠スタイル・リストを使用することも、その両方を行うこともできます。
この選択によって、「リスト・ビューの編集」ダイアログ(図8-9を参照)の状態は変更されません。影響するのは、生成されるADFモバイルAMXマークアップのみです。
凹枠リストのあるスタイルを選択すると、生成されたADFモバイルAMXマークアップのlistView要素にadfmf-listView-insetListスタイル・クラスが設定されます。
シェブロンのないスタイルを選択すると、生成されたADFモバイルAMXマークアップのlistItem要素のshowLinkIcon属性がfalseに設定されます。
次に、凹枠リストとシェブロンのあるシンプル・フォーマットの例を示します。
<amx:listView var="row"
value="#{bindings.employees.collectionModel}"
fetchSize="#{bindings.employees.rangeSize}"
styleClass="adfmf-listView-insetList"
id="listView2">
<amx:listItem id="li2">
<amx:outputText value="#{row.employeename}" id="ot3"/>
</amx:listItem>
</amx:listView>
「ListViewギャラリ」の「説明」ペインは、現在選択されているバリエーションに基づいて更新されます。フォーマットには、メイン・スタイルの簡単な説明が示され、その後に選択したバリエーションの詳細が続きます。4つのメイン・スタイルに、それぞれ4つのバリエーションがあり、表8-4に示す16の固有の説明が提供されています。
表8-4 リスト・ビューのバリエーションとスタイル
| リスト・フォーマット | バリエーション | 説明 |
|---|---|---|
|
シンプル |
基本 |
テキスト・フィールドがリスト・アイテムの開始側に表示されます。 |
|
シンプル |
区切り |
テキスト・フィールドは、リスト・アイテムの開始側に、アイテムが区切りによりグループ化されて表示されます。 |
|
シンプル |
イメージ |
テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。 |
|
シンプル |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの開始側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
メイン-サブ・テキスト |
基本 |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。 |
|
メイン-サブ・テキスト |
区切り |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に続きます。リスト・アイテムは区切りによってグループ化されます。 |
|
メイン-サブ・テキスト |
イメージ |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。 |
|
メイン-サブ・テキスト |
区切りおよびイメージ |
目立つメイン・テキスト・フィールドがリスト・アイテムの開始側に表示され、従属テキストがその下に先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
開始-終了 |
基本 |
テキスト・フィールドがリスト・アイテムの両側に表示されます。 |
|
開始-終了 |
区切り |
テキスト・フィールドは、リスト・アイテムの両側に、アイテムが区切りによりグループ化されて表示されます。 |
|
開始-終了 |
イメージ |
テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。 |
|
開始-終了 |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの両側に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
|
四分円 |
基本 |
テキスト・フィールドは、リスト・アイテムの四隅に表示されます。 |
|
四分円 |
区切り |
テキスト・フィールドは、リスト・アイテムの四隅に、アイテムが区切りによりグループ化されて表示されます。 |
|
四分円 |
イメージ |
テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。 |
|
四分円 |
区切りおよびイメージ |
テキスト・フィールドは、リスト・アイテムの四隅に、先頭イメージに続いて表示されます。リスト・アイテムは区切りによってグループ化されます。 |
「ListViewギャラリ」で選択し、「OK」をクリックすると、「リスト・ビューの編集」ウィザードが起動されます。それを使用して、リスト・アイテム子コンポーネントに静的テキストを表示するバインドなしリスト・ビュー・コンポーネント(図8-9を参照)を作成するか、または動的バインディングのデータソースを選択(図8-10を参照)できます。
図8-9に示すダイアログに入力する際は、次の点を考慮してください。
「リスト・データ・コレクション」および「要素タイプ」フィールドは、「データのバインド」チェック・ボックスが選択解除された状態のときは無効化されています。
左側にあるイメージは、選択されているリスト・ビュー・フォーマットのメイン・コンテンツ要素を反映しています。
「値」列の編集可能セルには、静的テキスト文字列が移入されます(表8-5を参照)。
「リスト・アイテム・コンテンツ」セルにイメージが含まれている場合、「値」セルはデフォルトで<add path to your image>文字列になります。この場合、それをイメージのパスに置き換える必要があります。
リスト・ビューに、データがバインドされているのではなく、リスト・アイテム子コンポーネントが含まれている場合、区切り属性を設定できないため、「区切り属性」と「区切りモード」の両方のフィールドは無効化されています。
表8-5 リスト・ビューの静的テキスト文字列
| リスト・フォーマット | 要素行の値 | 出力テキストの値 |
|---|---|---|
|
シンプル |
|
|
|
メイン-サブ・テキスト |
|
|
|
開始-終了 |
|
|
|
四分円 |
|
|
図8-10は、リスト・ビュー・コンポーネントをデータにバインドすることを選択した場合の「リスト・ビューの編集」ダイアログを示しています。
図8-10に示すダイアログに入力する際は、次の点を考慮してください。
「データを今すぐバインド」チェック・ボックスを選択した場合、「リスト・データ・コレクション」および「要素タイプ」フィールドが有効になります。
データソースを選択するには、「参照」をクリックします。これによって「リスト・ビュー・データ・コレクションの選択」ダイアログが開きます。そこで、データ・コントロール定義を選択するか(図8-11を参照)、ELビルダーを使用して適切なEL式を選択できます(図8-12を参照)。
「要素タイプ」フィールドを使用してデータ・コレクションのタイプを宣言できます(図8-10を参照)。
有効なデータ・コレクションを選択すると、「リスト・アイテム・コンテンツ」表の「値」列が「値バインディング」に変更され、その編集可能なセルにはデータコレクションから属性のリストが移入されます。特別な場合の設定の説明は、図8-13を参照してください。
左側のイメージは、選択したリスト・ビュー・フォーマットのメイン・コンテンツ要素を反映し、略図から基礎となる表の名前付き要素へのマッピングを提供します。
リスト・アイテムは、その特定要素に対してどちらが適切であるかによって、出力テキストまたはイメージ・コンポーネントのいずれかとして生成されます。
要素(行)数は選択したリスト・ビュー・フォーマットであらかじめ決まっているため、行を追加または削除することはできません。
要素の順序は変更できません。
「区切り属性」フィールドのデフォルト値は「区切りなし」です。この場合、「区切りモード」フィールドは無効です。デフォルト以外の値を選択する場合は、「区切りモード」パラメータを指定する必要があります。さらに、「ListViewギャラリ」で区切りを含むバリエーションを選択した場合、デフォルト値はリストの最初の属性に設定されます。
バインド済リスト・ビューを作成するときに考慮する特殊な場合は次のとおりです。
Java Beanメソッドによって汎用性がないリストが戻される場合、図8-10に示すように「要素タイプ」フィールドを使用して、リスト・アイテム・コンテンツを作成する必要があります。
入力されているリスト・データ・コレクション値がコレクションベースではない場合、図8-13に示すように、「値」列が空白の値を持つ「値バインディング」列に置換されます。
詳細は、次の項を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
LayoutDemo (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。このサンプルは、様々なタイプのリスト・ビュー・コンポーネントの使用方法と、スタイルを適用してページ・レイアウトを特定のパターンに合せる方法を示しています。
リスト・ビュー・コンポーネントを構成して、任意の長さのリストにデータを表示できます。これは、リストの下部にデータを追加することによって行います。
fetchSize属性によって、リスト・ビュー・コンポーネントが最初にロードする行数が決定されます。fetchSizeで定義されているよりも多くの使用可能な行がある場合は、最後にフェッチされた行の後にクリック可能領域が表示されます。この領域内をクリックすると、fetchSizeに等しい行のバッチがさらにロードされます。表示する行がなくなるとクリック可能領域は表示されなくなります。
fetchSize属性はロード済行の数を表していません。かわりに、何行ずつ増加するのかを表しています。リスト・ビュー・コンポーネントの作成時には、fetchSize属性は、デフォルトでPageDefイテレータのrangeSizeを指すEL式を使用するように設定されています。PageDefファイルの詳細は、第7.3.2.4.5項「生成されるドラッグ・アンド・ドロップ・アーティファクトについて」および図7-49「PageDefファイル」を参照してください。fetchSizeをrangeSizeと同じ値に設定するとアプリケーションのパフォーマンスが向上します。
例8-13は、データ・コントロールのtestResultsと呼ばれるコレクションから作成されたlistView要素を示しています(第7.3.2.4項「データ・コントロールのビューへの追加」を参照)。
例8-13 fetchSize属性の設定
<amx:listView var="row"
value="#{bindings.testResults.collectionModel}"
fetchSize="#{bindings.testResults.rangeSize}">
前述の例では、fetchSize属性はbindings.testResultsのrangeSizeを指しています。例8-14は、この「ADFモバイルAMX」ページのPageDefファイルからの行を示しています。このPageDefファイルには、testResultsかバインドされるtestResultsIteratorというaccessorIterator要素が含まれています。
例8-14 PageDefファイルのaccessorIterator
<accessorIterator MasterBinding="Class1Iterator"
Binds="testResults"
RangeSize="25"
DataControl="Class1"
BeanClass="mobile.Test"
id="testResultsIterator"/>
詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のページ定義ファイルの使用方法に関する項を参照してください。
fetchSize属性が-1に設定されている場合、すてのレコードが取得されます。
リスト・ビューのアイテムは再配置できます。この機能は、iOSとAndroidのプラットフォームで類似しており、どちらも各リスト・アイテムの右マージンに沿って整列した再配置アイコンが表示されます。再配置操作は、エンド・ユーザーがハンドルとして再配置アフォーダンスを使用してリスト・アイテムにタッチしてドラッグしたときに開始されます。この操作は、エンド・ユーザーが表示画面から指を離したときに完了します。
|
注意: エンド・ユーザーがリスト・アイテム上の他の場所をタッチしてドラッグした場合は、リストが上下にスクロールします。 |
再配置ドラッグ操作によって、リスト・アイテムがドッキング解除され、エンド・ユーザーがリスト内でリスト・アイテムを上下に移動できるようになります。
そのアイテムを再配置可能にするには、リスト・ビューが編集モードになっており、移動を許容可能になっている必要があります。
例8-15は、ADFモバイルAMXファイルで定義されているlistView要素を示しています。この定義によって、リスト・モードを編集可能と編集不可の間で切り替えることができる「編集」および編集停止ボタンが上部に表示されたリストが提示されます。
例8-15 再配置可能なリスト・ビューの定義
<amx:panelPage id="pp1">
<amx:commandButton id="edit" text="Edit"
rendered="#{!bindings.inEditMode.inputValue}">
<amx:setPropertyListener from="true"
to="#{bindings.inEditMode.inputValue}"
type="action"/>
</amx:commandButton>
<amx:commandButton id="stop"
text="Stop Editing"
rendered="#{bindings.inEditMode.inputValue}">
<amx:setPropertyListener 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>
<amx:outputText id= "ot1" value="#{row.description}">
</amx:listItem>
</amx:listView>
</amx:panelPage>
詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
「ADFモバイルAMX」ページ・レイアウトを特定のパターンに合せるには、一連の事前定義済スタイルを使用するstyleClass属性(第8.6項「UIコンポーネントのスタイル設定」を参照)を介して定義される様々なタイプのリスト・ビュー・コンポーネントおよびスタイルを組み合せて使用します。
図8-14は、各行の開始(左)側と終了(右)側に異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、テキストのほかに各リスト・アイテムを拡張するリンクを表す右向き矢印が配置されています。
例8-16は、ADFモバイルAMXファイルで定義されているlistView要素およびその子要素を示しています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-startTextに設定すると、出力テキスト・コンポーネントが行の開始(左)側に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-endTextに設定すると、出力テキスト・コンポーネントが行の終了(右)側に配置され、そのテキストに青いフォントが適用されます。右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この属性のデフォルト値はtrueであるため、この例にはこの設定は含まれていません。
例8-16 開始および終了テキストを持つリスト・ビューの定義
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="listItema">
<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>
図8-15は、各行の開始と終了に異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、リンクを表す右向き矢印は含まれていません。
例8-17は、ADFモバイルAMXファイルで定義されているlistView要素およびその子要素を示しています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-startTextに設定すると、出力テキスト・コンポーネントが行の開始に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-endTextに設定すると、出力テキスト・コンポーネントが行の終了に配置され、そのテキストに青いフォントが適用されます。それぞれの特定の行に右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この例では、この属性はすべてのlistItem要素に対してfalseに設定されているため、右向き矢印は表示されません。
例8-17 拡張リンクがない開始および終了テキストを持つリスト・ビューの定義
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="listItema" 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>
図8-16は、各行の開始と終了に異なるスタイルのテキストが追加され、左側の終了テキストの下にサブテキストが追加されたリスト・ビュー・コンポーネントを示しています。
例8-18は、ADFモバイルAMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、終了テキストの下に配置されるサブテキストが含まれています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartTextに設定すると、出力テキスト・コンポーネントが行の左側に配置され、そのテキストに黒いフォントが適用されます。この属性をadfmf-listItem-upperEndTextに設定すると、出力テキスト・コンポーネントが行の右側に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-captionTextに設定すると、出力テキスト・コンポーネントが、styleClass属性がadfmf-listItem-upperStartTextに設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。
例8-18 開始および終了テキストとサブテキストを持つリスト・ビューの定義
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="listItema">
<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>
図8-17は、各行にメイン・テキストとサブテキストとして異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。
例8-19は、ADFモバイルAMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、メイン・テキストおよびサブテキストを含む行が移入されます。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-mainTextに設定すると、出力テキスト・コンポーネントが行の開始に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-captionTextに設定すると、出力テキスト・コンポーネントが、styleClass属性がadfmf-listItem-mainTextに設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。
例8-19 メイン・テキストとサブテキストを持つリスト・ビューの定義
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="listItema">
<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>
図8-18は、各行に、アイコンおよびメイン・テキストとサブテキストとして異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。
例8-20は、ADFモバイルAMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、アイコン、メイン・テキストおよびサブテキストを含むセルが移入されます。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-mainTextに設定すると、出力テキスト・コンポーネントが行の左側に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-captionTextに設定すると、出力テキスト・コンポーネントが、styleClass属性がadfmf-listItem-mainTextに設定されている出力テキスト・コンポーネントの下に配置され、そのテキストに小さいグレー・フォントが適用されます。image要素の位置は、それが囲むcellFormatによって定義されます。
例8-20 アイコン、メイン・テキストおよびサブテキストを持つリスト・ビューの定義
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="listItemd">
<amx:tableLayout id="tld1" width="100%">
<amx:rowLayout id="rld1">
<amx:cellFormat id="cfdi" rowSpan="2" width="40px" halign="center">
<amx:image id="imaged1" source="#{row.image}"/>
</amx:cellFormat>
<amx:cellFormat id="cfd1" width="100%" height="28px">
<amx:outputText id="outputTextd1" value="#{row.name}"/>
</amx:cellFormat>
</amx:rowLayout>
<amx:rowLayout id="rld2">
<amx:cellFormat id="cfd2" width="100%" height="12px">
<amx:outputText id="outputTextd2" value="#{row.desc}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
</amx:listItem>
</amx:listView>
図8-19は、各行の開始と終了に2つのタイプの異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。行には、テキストのほかに各リスト・アイテムを拡張するリンクを表す右向き矢印が配置されています。
例8-21は、ADFモバイルAMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、各行の両側に配置されている2つの異なるタイプのテキストが含まれています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartTextに設定すると、出力テキスト・コンポーネントが行の左上隅に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-upperEndTextに設定すると、出力テキスト・コンポーネントが行の右上隅に配置され、そのテキストに大きいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerStartTextに設定すると、出力テキスト・コンポーネントが行の左下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerEndTextに設定すると、出力テキスト・コンポーネントが行の右下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この属性のデフォルト値はtrueであるため、この例にはこの設定は含まれていません。
例8-21 4つのタイプのテキストを持つリスト・ビューの定義
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="listItema">
<amx:tableLayout id="tla1" width="100%">
<amx:rowLayout id="rla1">
<amx:cellFormat id="cf1s1" width="10px" rowSpan="2"/>
<amx:cellFormat id="cfa1" width="60%" height="28px">
<amx:outputText id="outputTexta1" value="#{row.name}"/>
</amx:cellFormat>
<amx:cellFormat id="cf1s2" width="10px" rowSpan="2"/>
<amx:cellFormat id="cfa2" width="40%" halign="end">
<amx:outputText id="outputTexta2" value=#{row.status}
styleClass="adfmf-listItem-highlightText"/>
</amx:cellFormat>
</amx:rowLayout>
<amx:rowLayout id="rla2">
<amx:cellFormat id="cfa3" width="60%" height="12px">
<amx:outputText id="outputTexta3" value="#{row.desc}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
<amx:cellFormat id="cfa4" width="40%" halign="end">
<amx:outputText id="outputTexta4" value="#{row.priority}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
</amx:listItem>
</amx:listView>
図8-20は、各行の開始と終了に2つのタイプの異なるスタイルのテキストが追加されたリスト・ビュー・コンポーネントを示しています。
例8-22は、ADFモバイルAMXファイルで定義されているlistView要素およびその子要素を示しています。このリスト・ビューには、各行の開始と終了に表示されるテキストに加えて、各行の両側に配置されている2つの異なるタイプのテキストが含まれています。各outputText子要素がリスト内でどのようにレイアウトされるかは、listItemのtableLayout子要素によって指定されます。かわりに、styleClass属性を使用してoutputText要素をレイアウトおよびスタイル設定できます。この属性をadfmf-listItem-upperStartTextに設定すると、出力テキスト・コンポーネントが行の左上隅に配置され、そのテキストに大きい黒いフォントが適用されます。この属性をadfmf-listItem-upperEndTextに設定すると、出力テキスト・コンポーネントが行の右上隅に配置され、そのテキストに大きいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerStartTextNoChevronに設定すると、出力テキスト・コンポーネントが行の左下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。この属性をadfmf-listItem-lowerEndTextNoChevronに設定すると、出力テキスト・コンポーネントが行の右下隅に配置され、そのテキストに小さいグレー・フォントが適用されます。それぞれの特定の行に右向き矢印が表示されるかどうかは、listItem要素のshowLinkIcon属性によって構成されます。この例では、この属性はすべてのlistItem要素に対してfalseに設定されているため、右向き矢印は表示されません。
例8-22 拡張リンクのない4つのタイプのテキストを持つリスト・ビューの定義
<amx:listView id="listView1" value="#{myBean.listCollection}" var="row">
<amx:listItem id="listItema" showLinkIcon="false">
<amx:tableLayout id="tla1" width="100%">
<amx:rowLayout id="rla1">
<amx:cellFormat id="cf1s1" width="10px" rowSpan="2"/>
<amx:cellFormat id="cfa1" width="60%" height="28px">
<amx:outputText id="outputTexta1" value="#{row.name}"/>
</amx:cellFormat>
<amx:cellFormat id="cf1s2" width="10px" rowSpan="2"/>
<amx:cellFormat id="cfa2" width="40%" halign="end">
<amx:outputText id="outputTexta2" value=#{row.status}
styleClass="adfmf-listItem-highlightText"/>
</amx:cellFormat>
</amx:rowLayout>
<amx:rowLayout id="rla2">
<amx:cellFormat id="cfa3" width="60%" height="12px">
<amx:outputText id="outputTexta3" value="#{row.desc}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
<amx:cellFormat id="cfa4" width="40%" halign="end">
<amx:outputText id="outputTexta4" value="#{row.priority}"
styleClass="adfmf-listItem-captionText"/>
</amx:cellFormat>
</amx:rowLayout>
</amx:tableLayout>
</amx:listItem>
</amx:listView>
ポップアップ(popup)コンポーネントを使用して、ポップアップ・ウィンドウを表示します。このコンポーネントは、ビュー・コンポーネントの子として宣言できます。
ポップアップ・コンポーネントとともに次の操作を使用できます。
ポップアップ表示動作(showPopupBehavior)の操作は、ポップアップ表示動作のtype属性を使用して指定されたクライアントによってトリガーされるイベントに応答してポップアップを表示する宣言的な方法です。
ポップアップを閉じる動作(closePopupBehavior)の操作は、クライアントによってトリガーされるイベントに応答してポップアップを閉じる宣言的な方法です。
ポップアップ表示動作のPopup Id属性は、その親コンポーネントに関連するポップアップ・コンポーネントの一意の識別子を指定します。ポップアップ表示動作のAlign Id属性は、そのポップアップを整列する基準となるコンポーネントの一意の識別子を指定します。識別子を手動で設定するのは、手間がかかり、さらに無効な参照が発生する可能性もあるため、これらの2つの属性の値は標準プロパティ・インスペクタと統合されているエディタを使用して設定します(図8-21を参照)。これらの識別子を検証するために特別に定義されている監査ルールがあります(第7.3.2.5章「要素識別子とその監査について」を参照)。
例8-23は、ADFモバイルAMXファイルで定義されているpopupおよびshowPopupBehavior要素を示しています。
例8-23 ポップアップおよびポップアップ表示動作の定義
<amx:view>
<amx:panelPage id="panelPage1">
<amx:commandButton id="commandButton1">
<amx:showPopupBehavior popupId="popup1" type="action"
align="before" alignId="panelPage1" />
</amx:commandButton>
</amx:panelPage>
<amx:popup id="popup1"/>
</amx:view>
ポップアップ・コンポーネントは、ユーザー入力エラーが発生したときに検証メッセージを表示できます。詳細は、第8.9項「入力の検証」を参照してください。
ポップアップID属性を設定するには:
「ソース」エディタまたは「構造」ペインのshowPopupBehavior要素を選択します。
図8-21に示すように、「ポップアップID」フィールドの右側にある下向き矢印をクリックして、「ポップアップID」ダイアログを開きます。
「ポップアップID」ダイアログで「編集」を選択し、図8-22に示すプロパティの編集: プロパティIDダイアログを開きます。
ポップアップ・コンポーネントを選択します。
位置合せID属性を設定するには:
「ソース」エディタまたは「構造」ペインのshowPopupBehavior要素を選択します。
図8-23に示すように、「位置合せID」フィールドの右側にある下向き矢印をクリックして、「位置合せID」ダイアログを開きます。
「ポップアップID」ダイアログで「編集」を選択し、図8-24に示すプロパティの編集: ポップアップIDダイアログを開きます。
ポップアップ表示動作操作の親コンポーネントを選択します。
LayoutDemoという名前のADFモバイル・サンプル・アプリケーションは、ポップアップ・コンポーネントの使用方法と、スタイルを適用してページ・レイアウトを特定のパターンに合せる方法を示しています。LayoutDemoアプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
パネル・スプリッタ(panelSplitter)コンポーネントは、左側にあるナビゲーション・ペインで制御可能な複数のコンテンツ領域を表示するために使用します。パネル・スプリッタ・コンポーネントは、通常、表示サイズが大きいタブレット・デバイスで使用されます。これらのコンポーネントは、通常、表示領域の左側にリストが、右側にコンテンツがある場合に使用されます。次のコンポーネントのいずれにもパネル・スプリッタ・コンポーネントを含めることができます。
パネル・グループ・レイアウト
パネル・ページ
ポップアップ
イテレータ
ファセット
パネル・アイテム
パネル・スプリッタには、ファセット(第8.2.6項「ファセット・コンポーネントの使用方法」を参照)およびパネル・アイテム・コンポーネントを含めることができます。パネル・アイテム(panelItem)コンポーネントは、パネル・スプリッタのコンテンツ領域を表します。各パネル・スプリッタ・コンポーネントには少なくとも1つのパネル・アイテムが必要なため、パネル・スプリッタが作成されるときにパネル・アイテムがパネル・スプリッタに自動的に追加されます。各パネル・アイテム・コンポーネントには、パネル・グループ・レイアウトに含めることができるどのようなコンポーネントも含めることができます(第8.2.3項「パネル・グループ・レイアウト・コンポーネントの使用方法」を参照)。
「パネル・スプリッタ」の左側は、ナビゲータ・ファセット(navigator)によって表されます。これは、アニメーション付きの複数のコンテンツのみが必要とされる場合(たとえば、異なるボタンを選択してコンテンツを切り替えるときにアニメーションを必要とする選択ボタン付きの複数コンテンツ領域を描画する場合)のオプションです。横モードの場合、このファセットがレンダリングされます。縦モードの場合、ボタンはコンテンツ領域の上に配置され、クリックされたときにこのファセットのコンテンツがポップアップ内で起動されます。
例8-24は、ADFモバイルAMXファイルで定義されているpanelSplitter要素を、子コンポーネントとして使用されているnavigatorファセットとともに示しています。
例8-24 ナビゲータを含むパネル・スプリッタの定義
<panelSplitter id="ps1"
selectedItem="#{bindings.display.inputValue}"
animation="flipover">
<facet name="navigator">
<listView value="#{bindings.data.collectionModel}" var="row">
<listItem>
<outputText value="#{row.description}">
<setPropertyListener from="#{row.type}"
to="#{bindings.display.inputValue}"
type="action"/>
</listItem>
</listView>
</facet>
<panelItem id="x">
<panelGroupLayout>
...
</panelGroupLayout>
</panelItem>
<panelItem id="y">
<panelGroupLayout>
...
</panelGroupLayout>
</panelItem>
</panelSplitter>
例8-25は、ADFモバイルAMXファイルで定義されているpanelSplitter要素を示しています。navigatorファセットは、このpanelSplitterに対して定義されていません。かわりに、selectOneButtonを使用してレイアウトの選択が可能になっています。
例8-25 選択ボタンを含むパネル・スプリッタの定義
<selectOneButton id="sob1" value="#{bindings.listtype.inputValue}">
<selectItem label="Contacts" value="contacts"/>
<selectItem label="Accounts" value="accounts"/>
</selectOneButton>
<panelSplitter id="ps1"
selectedItem="#{bindings.listtype.inputValue}"
position="0"
animation="flipover">
<panelItem id="contacts" animation="fade">
<panelGroupLayout>
...
</panelGroupLayout>
</panelItem>
<panelItem id="accounts">
<panelGroupLayout>
...
</panelGroupLayout>
</panelItem>
</panelSplitter>
例8-26は、ADFモバイルAMXファイルで定義されているpanelSplitter要素を、レイアウトの選択を可能にするselectOneButton付きのpanelSplitterであるnavigatorファセットとともに示しています。
例8-26 ナビゲータおよぴ選択ボタンを含むパネル・スプリッタの定義
<panelSplitter id="ps1"
selectedItem="#{bindings.display.inputValue}"
animation="flipover">
<facet name="navigator">
<selectOneButton id="sob1" value="#{bindings.listtype.inputValue}">
<selectItem label="Contacts" value="contacts"/>
<selectItem label="Accounts" value="accounts"/>
</selectOneButton>
<panelSplitter id="sv2"
selectedItem="#{bindings.listtype.inputValue}"
navigatorWidth="0"
animation="flipup">
<panelItem id="contacts">
<panelGroupLayout>
...
<commandButton ...>
<setPropertyListener from="x"
to="#{bindings.display.inputValue}"
type="action"/>
</commandButton>
</panelGroupLayout>
</panelItem>
<panelItem id="accounts">
<panelGroupLayout>
...
<commandLink ...>
<setPropertyListener from="y"
to="#{bindings.display.inputValue}"
type="action"/>
</commandLink>
</panelGroupLayout>
</panelItem>
</panelSplitter>
</facet>
<panelItem id="x">
<panelGroupLayout>
...
</panelGroupLayout>
</panelItem>
<panelItem id="y">
<panelGroupLayout>
...
</panelGroupLayout>
</panelItem>
</panelSplitter>
詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
表のレイアウト(tableLayout)コンポーネントは、セルを含む行で構成される一般的な表のフォーマットでデータを表示するために使用します。
行のレイアウト(rowLayout)コンポーネントは、表のレイアウトの単一の行を表します。表のレイアウト・コンポーネントには、1つ以上の行のレイアウト・コンポーネント、または行のレイアウト・コンポーネントを生成できるイテレータ・コンポーネントのいずれかが含まれている必要があります。
セル・フォーマット(cellFormat)コンポーネントは、行のレイアウトのセルを表します。行のレイアウト・コンポーネントには、1つ以上のセル・フォーマット・コンポーネント、またはセル・フォーマット・コンポーネントを生成できるイテレータ・コンポーネントのいずれかが含まれている必要があります。
表のレイアウト構造では、セル・コンテンツで割合による高さを使用したり、表構造全体に高さをまとめて割り当てることはできません。詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスの表のレイアウト、行のレイアウト、およびセル・フォーマット・コンポーネントのlayout、widthおよびheight属性の説明を参照してください。
表のレイアウト・コンポーネントを追加するには:
「コンポーネント・パレット」で、「表のレイアウト」を「ADFモバイルAMX」ページにドラッグ・アンド・ドロップします。
必要な数の行のレイアウトまたはイテレータ子コンポーネントを表のレイアウト・コンポーネントに挿入します。
セル・フォーマットまたはイテレータ子コンポーネントをそれぞれの行のレイアウト・コンポーネントに挿入します。
「プロパティ・インスペクタ」を使用して、すべての追加したコンポーネントの属性を設定します。詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
例8-27は、ADFモバイルAMXファイルで定義されているtableLayout要素およびその子を示しています。
例8-27 表のレイアウトの定義
<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>
ADFモバイルAMX機能を開発する際は、次のUIコンポーネントを使用できます。
入力テキスト(第8.3.1項「入力テキスト・コンポーネントの使用方法」を参照)
入力数値スライダ(第8.3.2項「入力数値スライダ・コンポーネントの使用方法」を参照)
入力日(第8.3.3項「入力日コンポーネントの使用方法」を参照)
出力テキスト(第8.3.4項「出力テキスト・コンポーネントの使用方法」を参照)
ボタン(第8.3.5項「ボタンの使用方法」を参照)
リンク(第8.3.6項「リンクの使用方法」を参照)
イメージ(第8.3.7項「イメージの表示方法」を参照)
チェックボックス(第8.3.8項「チェックボックス・コンポーネントの使用方法」を参照)
チェックボックスを複数選択(第8.3.9項「チェックボックスを複数選択コンポーネントの使用方法」を参照)
選択肢を複数選択(第8.3.11項「選択肢を複数選択コンポーネントの使用方法」を参照)
ブール・スイッチ(第8.3.12項「ブール・スイッチ・コンポーネントの使用方法」を参照)
選択肢(第8.3.10項「選択肢コンポーネントの使用方法」を参照)
選択ボタン(第8.3.13項「選択ボタン・コンポーネントの使用方法」を参照)
ラジオ・ボタン(第8.3.14項「ラジオ・ボタン・コンポーネントの使用方法」を参照)
カルーセル(第8.3.15項「カルーセル・コンポーネントの使用方法」を参照)
Verbatim (第8.3.16項「Verbatimコンポーネントの使用方法」を参照)
ADFモバイルAMX機能を開発する際は、UIコンポーネントの子として、操作、リスナー・タイプ・コンポーネントおよびコンバータなど、次のその他のコンポーネントも使用できます。
イテレータ(第8.3.17項「反復の有効化方法」を参照)
バンドルのロード(第8.3.18項「リソース・バンドルのロード方法」を参照)
アクション・リスナー(第8.3.19項「アクション・リスナーの使用方法」を参照)
プロパティ・リスナーの設定(第8.3.20項「プロパティ・リスナーの設定の使用方法」を参照)
日時の変換(第8.3.21項「日時の変換方法」を参照)
数値の変換(第8.3.22項「数値の変換方法」を参照)
UIコンポーネントを追加するには、それを「コンポーネント・パレット」から「ADFモバイルAMX」ページにドラッグ・アンド・ドロップします(第7.3.2.1項「UIコンポーネントの追加」を参照)。その後で、「プロパティ・インスペクタ」を使用してそのコンポーネントの属性を設定します(第7.3.2.3項「UIコンポーネントの構成」を参照)。それぞれの特定のコンポーネントの属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
|
注意: 「ADFモバイルAMX」ページで、レイアウト・コンポーネント内にUIコンポーネントを配置します(第8.2項「ページ・レイアウトの設計」を参照)。UI要素は、 |
いくつかのUIコンポーネントにはイベント・リスナーを追加できます。詳細は、第8.10項「イベント・リスナーの使用方法」を参照してください。イベント・リスナーは、iOSとAndroidのどちらのデバイスでもADFモバイルAMXランタイムの記述のためにコンポーネントに適用できますが、それらのリスナーはデザインタイムでは何の効果も持ちません。
CompGalleryという名前のADFモバイル・サンプル・アプリケーションは、ADFモバイルAMX UIコンポーネントの作成および構成方法を示しています。LayoutDemoという名前のもう1つのサンプル・アプリケーションは、「ADFモバイルAMX」ページでのコンポーネントのレイアウト方法を示しています。これらのサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
入力テキスト(inputText)コンポーネントは、編集可能テキスト・フィールドを表します。使用可能な入力テキスト・コンポーネントのタイプは次のとおりです。
標準単一行入力テキスト。これは、ADFモバイル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" />
図8-25は、「プレビュー」ペインに表示されている入力テキスト・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:inputText id="inputText1"
label="Input Text"
value="text"/>
inputType属性によって、コンポーネントでユーザー入力がどのように(テキスト(デフォルト)、電子メール・アドレス、数値、電話銀号、URLのいずれかとして)解釈されるのかを定義できます。これらの入力タイプは、HTML5によって許容される値に基づいています。
入力テキスト・コンポーネントに入力される日時値とともに数値の変換を有効にするには、数値の変換(第8.3.22項「数値の変換方法」を参照)および日時の変換(第8.3.21項「日時の変換方法」を参照)コンポーネントを使用します。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
いくつかのモバイル・デバイスでは、エンド・ユーザーが入力テキスト・フィールドをタップすると、キーボードが表示(スライドアップ)されます。入力テキストが「ADFモバイルAMX」ページの唯一のコンポーネントである場合、ページがロードされるときに、デフォルトで入力フォーカスはこのフィールド上に配置され、キーボードが表示されます。
複数行入力テキストは、それが唯一のコンポーネントである場合、セカンダリ・ページに表示されることがあります。その場合、ページがロードされてキーボードが表示されたときに複数行入力テキストがフォーカスを受け取ります。
iOSデバイスとAndroidデバイスでは、入力テキスト・コンポーネントのレンダリングおよび動作は異なります。iPhoneおよびiPadでは、入力テキスト・コンポーネントが表示されるときに境界線がある場合とない場合があります。
入力テキスト・コンポーネントを作成する際は、次の点を考慮してください。
入力テキスト・コンポーネントで表されるフィールドか境界線付きで表示される場合、そのフィールドは、高さが固定され、角丸になります。
コンテンツを入力または編集するには、エンド・ユーザーはフィールド内をタップする必要があります。それにより、タップした場所に点滅する挿入カーソルが表示され、エンド・ユーザーがコンテンツを編集できるようになります。フィールドにコンテンツが含まれていない場合、挿入カーソルはフィールドの先頭に配置されます。
入力テキスト・コンポーネントによって表されるフィールドには、通常、プロンプトとして使用されるデフォルト・テキストが含まれていることがあります。エンド・ユーザーがそのようなフィールド内でキーボードのキーをタップすると、編集モードになったときにそのデフォルト・テキストがクリアされます。
入力テキスト・コンポーネントによって表されるフィールドには、選択済の外観はありません。選択は、フィールド内の点滅する挿入カーソルによって示されます。
エンド・ユーザーがフィールドに収まる数を超えたテキストを入力すると、タイピングの続行に従って一度に1文字ずつテキスト・コンテンツが左にシフトします。
複数行入力テキスト・コンポーネントは、任意の高さの角丸の長方形としてレンダリングされます。このコンポーネントでは、コンテンツが大きすぎてフィールドの境界内に収まらない場合のスクロールがサポートされています。テキスト領域がいっぱいになるとテキストの行が上にスクロールし、新しい行のテキストが追加されます。指定された表示領域に表示できる数よりも多くの行がある場合、エンド・ユーザーは上または下にフリックしてテキストの行をスクロールできます。コンポーネント内にスクロールバーが表示されてその領域がスクロール可能であることを示します。
パスワード・フィールドは入力された各文字を一時的にエコーし、その後、その文字をドットに変換してパスワードを保護します。
入力数値スライダ(inputNumberSlider)コンポーネントは、キーを使用して値を入力するかわりにスライダを使用して値の範囲から数値を選択できるようにします。スライダの溝またはトラックの塗り潰されている部分が、現在の値を視覚的に表しています。
スライダの値を数値的に示すには、出力または入力テキスト・コンポーネントとともに入力数値スライダを使用できます。入力テキスト・コンポーネントではスライダ値を直接入力することもできます。エンド・ユーザーが入力テキスト・フィールドをタップすると、数値モードのキーボードがスライドアップします。このキーボードは、スライドダウン・ボタンを使用するか、スライダ・コンポーネントからタップすることにより消去できます。
入力数値スライダ・コンポーネントは、常に、コンポーネントの定義済範囲内の最大値および最小値を表示します。
|
注意: 入力数値スライダ・コンポーネントは、正確な数値入力が必要な場合や値の範囲が広い場合(たとえば、0～1000)は使用しないでください。 |
例8-28は、ADFモバイルAMXファイルで定義されているinputNumberSlider要素を示しています。
図8-26は、「プレビュー」ペインに表示されている入力数値スライダ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:inputNumberSlider id="inputNumberSlider1"
label="Input Number"
minimum="0"
maximum="20"
stepSize="1"
value="10"/>
入力数値スライダ・コンポーネントに入力される数値の変換を有効にするには、数値の変換コンポーネント(第8.3.22項「数値の変換方法」を参照)を使用します。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
他のADFモバイルAMX UIコンポーネントと同様に、入力数値スライダ・コンポーネントには通常の状態と選択済状態があります。コンポーネントは、いつでもタッチされたときに選択済状態になります。エンド・ユーザーは、スライダ値を変更するには、タッチしてからスライダ・ボタンを操作します。
入力日(inputDate)コンポーネントは、日付を入力するためのポップアップ入力フィールドを提示します。デフォルトの日付フォーマットは、現在のロケールに適切な省略の日付フォーマットです。たとえば、米語(ENU)のデフォルトの書式はmm/dd/yyです。inputType属性によって、コンポーネントが入力として日付、時刻または日時を受け入れるのかどうかが定義されます。タイムゾーンは、モバイル・デバイスに対して構成されているタイムゾーンに依存します。したがって、デバイスに関連しています。実行時、入力日コンポーネントにはそのデバイスのネイティブのルック・アンド・フィールがあります。
例8-29は、ADFモバイルAMXファイルで定義されているinputDate要素を示しています。このコンポーネントのinputType属性は、デフォルト値のdateに設定されています。
|
注意:
|
図8-27は、「プレビュー」ペインに表示されている入力日コンポーネントを示しています。
詳細は、次の項を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
W3Cによって定義されているグローバル日付と時刻
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
ADFモバイルAMXは、テキストを表示するラベルとして使用するために出力テキスト(outputText)コンポーネントを提供しています。
例8-30は、ADFモバイルAMXファイルで定義されているoutputText要素を示しています。
図8-28は、「プレビュー」ペインに表示されている出力テキスト・コンポーネントを示しています。
出力テキスト・コンポーネントの数値および日時関連データの変換を容易にするには、数値の変換(第8.3.22項「数値の変換方法」を参照)および日時の変換(第8.3.21項「日時の変換方法」を参照)コンバータを使用します。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGalleryおよびLayoutDemo(開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)
ボタン(commandButton)コンポーネントは、アクション(たとえば、保存、取消し、送信)をトリガーするため、およびアプリケーション内で他のページへのナビゲーション(たとえば、戻る。第8.3.5.6項「戻るボタン・ナビゲーションの有効化」を参照)を有効化するために使用します。
ボタンは、次の方法のいずれかで使用できます。
テキスト・ラベル付きボタン。
テキスト・ラベルおよびイメージ・アイコン付きボタン。
|
注意: アイコン・イメージと配置(テキスト・ラベルの左または右)を定義できます。 |
イメージ・アイコンのみが付いたボタン(たとえば、レコードを追加または削除するための + および - ボタン)。
ADFモバイルでは、次の3つの表示領域に対して1つのデフォルト・ボタン・タイプがサポートされています。
最上部ヘッダー・バーに表示されるボタン。「ADFモバイルAMX」ページでは、ヘッダーは、ヘッダー、プライマリおよびセカンダリ・ファセットと組み合せたパネル・ページ・コンポーネントによって表されます。iPhoneではこれが一般的です(第8.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)。
ヘッダー・ファセットには、ページ・タイトルが含まれています。
プライマリ・アクション・ファセットは、 ヘッダー・バーの左隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
セカンダリ・アクション・ファセットは、ヘッダー・バーの右隅に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
ページのコンテンツ領域に表示されるボタン。
ページのフッター・バーに表示されるボタン。「ADFモバイルAMX」ページでは、フッターは、フッター・ファセットと組み合せたパネル・ページ・コンポーネントによって表されます(第8.2.2項「パネル・ページ・コンポーネントの使用方法」を参照)。
フッター・ファセットは、コンテンツ領域の下に表示される領域を表します。一般的にボタンまたはリンク・コンポーネントを保持しますが、任意のコンポーネント・タイプを含めることができます。
どのタイプでも、すべてのボタン・コンポーネントには次の3つの状態があります。
標準。
選択済: ボタンがエンド・ユーザーによってタップまたはタッチされたときの外観を表します。ボタンがタップされた(タッチされてリリースされた)ときに、ボタン・アクションが実行されます。タッチしたときに選択済外観が表示され、リリースしたときにアクションが実行されます。エンド・ユーザーがボタンにタッチした後、指をドラッグしてボタンから離した場合、アクションは実行されません。ただし、ボタンにタッチしている間中、選択済外観が表示されます。
無効。
ボタン・コンポーネントの外観は、adfmf-commandButton-<style>に設定したそのstyleClass属性によって定義されます。表8-6に示すどのスタイルでも、「ADFモバイルAMX」ページ内の有効な任意の場所に配置されているボタンに適用できます。
表8-6 ボタン・スタイル
| ボタン・スタイル名 | 説明 |
|---|---|
|
デフォルト |
次の場所に配置されているボタンのデフォルト・スタイル
|
|
戻る |
いずれかのパネル・ページ・ファセット(プライマリ、セカンダリ、ヘッダー、フッター)に配置されるボタンの戻るスタイル。このスタイルを、デフォルト・ボタンに適用すると、ページに戻るという外観を表示できます。このボタン・スタイルは、Springboardに戻るまたはページに戻るボタンによく使用されます。 詳細は、第8.3.5.2項「戻るスタイル・ボタンの表示」を参照してください |
|
強調表示 |
いずれかのパネル・ページ・ファセット(プライマリ、セカンダリ、ヘッダー、フッター)または「ADFモバイルAMX」ページのコンテンツ領域に配置されるボタンの強調表示スタイル。このスタイルをボタンに追加すると、保存(または完了)ボタンで一般的なiPhoneボタンの外観を提供できます。 詳細は、第8.3.5.3項「強調表示スタイル・ボタンの表示」を参照してください |
|
アラート |
アラート・スタイルは削除の外観をボタンに追加します。詳細は、第8.3.5.4項「アラート・スタイル・ボタンの表示」を参照してください |
ほかに、ボタンに適用して太い角丸の境界線でボタンを修飾できる角丸スタイル(adfmf-commandButton-rounded)があります。このスタイルは他のどのようなスタイルとも組み合せて定義できます。
ADFモバイルAMXにおけるボタン・コンポーネントの子操作および属性の処理には、特定の順序があります。詳細は、第8.3.5.7項「操作と属性の処理順序について」を参照してください。
パネル・ページ・ファセットまたはコンテンツ領域内に配置されている様々なタイプのデフォルト・スタイル・ボタンは、次のようにモバイル・デバイスに表示されます。
テキスト・ラベルのみが付いた標準ボタン:
テキスト・ラベルのみが付いた選択済ボタン:
テキスト・ラベルのみが付いた無効ボタン:
イメージ・アイコンのみが付いた標準ボタン:
イメージ・アイコンのみが付いた選択済ボタン:
イメージ・アイコンのみが付いた無効ボタン:
例8-31および例8-32は、ADFモバイルAMXファイルで宣言されているcommandButton要素を示しています。
例8-31 テキスト・ラベル付きデフォルト・ボタンの定義
<amx:panelPage id="pp1">
.<amx:facet name="primary">
<amx:commandButton id="cb1"
text="Cancel"
action="cancel"
actionListener="#{myBean.rollback}"/>
</amx:facet>
</amx:panelPage>
例8-32 イメージ・アイコン付きデフォルト・ボタンの定義
<amx:panelPage id="pp1">
.<amx:facet name="primary">
<amx:commandButton id="cb1"
icon="plus.png"
action="add"
actionListener="#{myBean.AddItem}"/>
</amx:facet>
</amx:panelPage>
例8-33は、パネル・ページのフッター・ファセット内で宣言されているcommandButton要素を示しています。
例8-33 フッター・ファセットのテキスト・ラベルおよびイメージ付きデフォルト・ボタンの定義
<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>
例8-34は、パネル・ページのコンテンツ領域の一部で宣言されているcommandButton要素を示しています。
例8-34 ページ・コンテンツ領域におけるテキスト・ラベル付きデフォルト・ボタンの定義
<amx:panelPage id="pp1">
<amx:commandButton id="cb1"
text="Reply"
actionListener="#{myBean.share}"/>
</amx:panelPage>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
パネル・ページ・ファセットまたはコンテンツ領域内に配置されている様々なタイプの戻るスタイル・ボタンは、次のようにモバイル・デバイスに表示されます。
テキスト・ラベルのみが付いた標準ボタン:
テキスト・ラベルのみが付いた選択済ボタン:
テキスト・ラベルのみが付いた無効ボタン:
イメージ・アイコンのみが付いた標準ボタン:
イメージ・アイコンのみが付いた選択済ボタン:
イメージ・アイコンのみが付いた無効ボタン:
例8-35は、ADFモバイルAMXファイルで宣言されているcommandButton要素を示しています。
例8-35 テキスト・ラベル付き戻るボタンの定義
<amx:panelPage id="pp1">
<amx:facet name="primary">
<amx:commandButton id="cb1"
text="Back"
action"__back"/>
</amx:facet>
</amx:panelPage>
プライマリ・ファセット内にボタン・コンポーネント配置し、そのaction属性を__backに設定した場合は常に、ADFモバイルAMXによって戻る矢印スタイリングがそれに自動的に適用されます。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
パネル・ページ・ファセットまたはコンテンツ領域内に配置されている様々なタイプの強調表示スタイル・ボタンは、次のようにモバイル・デバイスに表示されます。
標準ボタン
選択済ボタン
無効ボタン
例8-36は、ADFモバイルAMXファイルで宣言されているcommandButton要素を示しています。
例8-36 テキスト・ラベル付き強調表示ボタンの定義
<amx:panelPage id="pp1">
<amx:facet name="secondary">
<amx:commandButton id="cb2"
text="Save"
action"save"
styleClass="adfmf-commandButton-highlight"/>
</amx:facet>
</amx:panelPage>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
パネル・ページ・コンテンツ内に配置されている様々なタイプのアラート・スタイル・ボタンは、次のようにモバイル・デバイスに表示されます。
テキスト・ラベルのみが付いた標準ボタン:
テキスト・ラベルのみが付いた選択済ボタン:
テキスト・ラベルのみが付いた無効ボタン:
例8-37は、ADFモバイルAMXファイルで宣言されているcommandButton要素を示しています。
例8-37 テキスト・ラベル付きアラート・ボタンの定義
<amx:commandButton id="cb1"
text="Delete"
actionListener="#{myBean.delete}"
styleClass="adfmf-commandButton-alert" />
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
ADFモバイル・アプリケーションでは、次のコンテキスト内でボタン・コンポーネントを使用できます。
特定のアクションを実行するためのコンテンツ領域
ポップスタイル・アラート・メッセージ
ナビゲーション・バー
ADFモバイルでは、ナビゲーション・バーで使用する標準ボタンを作成できます。
編集ボタンで、エンド・ユーザーは編集またはコンテンツ操作モードに入ることができます。
取消ボタンで、エンド・ユーザーは、変更を保存することなく編集またはコンテンツ操作モードを終了できます。
保存ボタンで、エンド・ユーザーは、変更を保存して編集またはコンテンツ操作モードを終了できます。
完了ボタンで、エンド・ユーザーは、変更があれば保存して現在のモードを終了できます。
元に戻すボタンで、エンド・ユーザーは最後のアクションを元に戻すことができます。
やり直しボタンで、エンド・ユーザーは最後の元に戻したアクションをやり直すことができます。
戻るボタンで、エンド・ユーザーはSpringboardに戻ることができます。
ページに戻るボタンで、エンド・ユーザーはボタン・テキスト・ラベルによって識別されるページに戻ることができます。
追加ボタンで、エンド・ユーザーは新しいオブジェクトを追加または作成できます。
コンテンツ領域
ページのコンテンツ領域内に配置されたボタンは、そのページ内のボタンの場所およびコンテキストに指定されている特定のアクションを実行します。これらのボタンは、ナビゲーション・バーに配置されているボタンとは異なる外観を持っている場合があります。
アクション・シート
次に、アクション・シート内に配置されたボタンの例を示します。
アラート・メッセージ
次に、検証メッセージ内に配置されたボタンの例を示します。
ADFモバイルAMXでは、前に訪問したページに戻るデフォルト動作を持つ戻るボタンを使用した移動がサポートされています。詳細は、第7.2.9項「UIコンポーネントを使用したアクション結果の指定方法」を参照してください。
__backナビゲーションを備えたパネル・ページのプライマリ・ファセットにボタン・コンポーネントを追加すると、そのボタンには、戻る矢印の視覚的スタイリングが自動的に設定されます(第8.3.5.2項「戻るスタイル・ボタンの表示」を参照)。これを無効にするには、styleClass属性をamx-commandButton-normalに設定します。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
ボタン、リンク、リスト・アイテムなどのコンポーネントがアクティブになっている場合に、ADFモバイルAMXによって操作および属性が処理される順序は、次のとおりです。
次の子操作は、XMLファイルに表示される順序で処理されます。
プロパティ・リスナーの設定
アクション・リスナー
ポップアップ表示動作
ポップアップを閉じる動作
アクション・リスナー(actionListener)属性が処理されて関連付けられたJavaメソッドが起動されます。
アクション(action)属性が処理されて、ナビゲーション・ケースがあればそれに従います。
リンク(commandLink)コンポーネントは、アクションをトリガーするためおよび他のビューへのナビゲーションを有効化するために使用します。
パネル・グループ・レイアウトと同様に、リンク・コンポーネントは、その子として任意のタイプのコンポーネントを定義できます。プロパティ・リスナーの設定(第8.3.20項「プロパティ・リスナーの設定の使用方法」を参照)、アクション・リスナー(第8.3.19項「アクション・リスナーの使用方法」を参照)、ポップアップ表示動作、ポップアップを閉じる動作(第8.2.8項「ポップアップ・コンポーネントの使用方法」を参照)をリンク・コンポーネントの子として使用することで、クリックおよびジェスチャーを実行できるアクション可能な領域を作成できます。
リンク内にイメージ・コンポーネントを配置することで(第8.3.7項「イメージの表示方法」を参照)、クリック可能イメージを作成できます。
例8-38は、ADFモバイルAMXファイルで宣言されているcommandLink要素を示しています。
例8-38 リンクの定義
<amx:commandLink id="cl1"
text="linked"
action="gotolink"
actionListener="#{myBean.doSomething}"/>
図8-29は、「プレビュー」ペインに表示されているリンク・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:commandLink id="commandLink1"
text="Link"
action="__back"/>
ADFモバイルAMXにおけるリンク・コンポーネントの子操作および属性の処理には、特定の順序があります。詳細は、第8.3.5.7項「操作と属性の処理順序について」を参照してください。
ADFモバイルAMXでは、リンクに類似しているが、ページ間のナビゲーションは許可されない別のコンポーネントであるリンク(実行) (goLink)コンポーネントが提供されています。このコンポーネントを使用して、外部ページへのリンクを有効化できます。図8-30は、「プレビュー」ペインに表示されているリンク(実行)コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:goLink id="goLink1"
text="Go Link"
url="http://example.com"/>
イメージは、リンク(実行)コンポーネントの子として指定できる唯一のコンポーネントです。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
ADFモバイルAMXでは、ビットマップによって表されるイメージ(image)コンポーネントを使用してiOSおよびAndroidデバイス上にイメージを表示できます。
ボタンおよびリスト・ビューにイメージを配置するだけでなく、それをリンク・コンポーネント内に配置して(第8.3.6項「リンクの使用方法」を参照)クリック可能イメージを作成できます。
例8-39は、ADFモバイルAMXファイルのimage要素の定義を示しています。
例8-39 イメージの定義
<amx:image id="i1"
styleClass="prod-thumb"
source="images/img-big-#{pageFlowScope.product.uid}.png" />
Androidプラットフォームでサポートされているフォーマットは次のとおりです。
GIF
JPEG
PNG
BMP
iOSプラットフォームでサポートされているフォーマットは次のとおりです。
PNG
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGalleryおよびLayoutDemo(開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)
チェックボックス(selectBooleanCheckbox)コンポーネントは、trueまたはfalseの値からの単一選択(選択済状態と選択解除状態の間で切り替えできる)を可能にするために作成するチェックボックスを表します。
チェックボックス・コンポーネントのlabel属性を使用するとチェックボックスの左側にテキストを配置でき、text属性を使用すると右側にテキストを配置できます。
例8-40は、ADFモバイルAMXファイルで宣言されているselectBooleanCheckbox要素を示しています。
例8-40 チェックボックスの定義
<amx:selectBooleanCheckbox id="check1"
label="Agree to the terms:"
value="#{myBean.bool1}"/>
図8-31は、「プレビュー」ペインに表示されているチェックボックス・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectBooleanCheckbox id="selectBooleanCheckbox1"
label="Checkbox"
value="false"/>
図8-32は、様々な状態にあるチェックボックス・コンポーネントの視覚的表現を示しています。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
iOSでは、ネイティブ・チェックボックス・コンポーネントはサポートされていません。ブール・スイッチは、通常、プロパティ・ページで使用され、ブール選択を可能にします(第8.3.12項「ブール・スイッチ・コンポーネントの使用方法」を参照)。
チェックボックスを複数選択(selectManyCheckbox)コンポーネントは、trueまたはfalseの値の複数選択を可能にするために使用するチェックボックスのグループを表します。これにより、グループ内の各チェックボックスの選択済と選択解除の切替えが可能になります。この選択メカニズムは、チェックボックスを複数選択コンポーネントに含まれているアイテムの選択コンポーネント(第8.3.10.3項「アイテムの選択コンポーネントの違いについて」を参照)によって提供されます。
|
注意: チェックボックスを複数選択コンポーネントには、アイテムの選択(selectItems)コンポーネントを1つ、またはアイテムの選択(selectItem)コンポーネントを1つ以上含めることができます。 |
例8-41は、ADFモバイルAMXファイルで宣言されているselectManyCheckbox要素を示しています。
例8-41 チェックボックスを複数選択の定義
<amx:selectManyCheckbox id="selectManyCheckbox1"
label="Select shipping options"
value="#{myBean.shipping}"
<amx:selectItem label="Air" value="#{myBean.shipping.air}"/>
<amx:selectItem label="Rail" value="#{myBean.shipping.rail}"/>
<amx:selectItem label="Water" value="#{myBean.shipping.water}"/>
</amx:selectManyCheckbox>
図8-33は、「プレビュー」ペインに表示されているチェックボックスを複数選択コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectManyCheckbox id="selectManyCheckbox1"
label="Select Many Checkbox"
value="value2">
<amx:selectItem label="Selection 1" value="value1"/>
<amx:selectItem label="Selection 2" value="value2"/>
<amx:selectItem label="Selection 3" value="value3"/>
</amx:selectManyCheckbox>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
ADFモバイルAMXでは、チェックボックスを複数選択コンポーネントを表示するための2つの代替方法が提供されています。ポップアップ・スタイル(デフォルト)とリスト・スタイル(使用可能な選択肢の数がデバイスの画面サイズを超えている場合に使用される)です。
iPhoneとiPadの両方でのポップアップスタイルのチェックボックスを複数選択コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストがポップアップに表示されます。選択を行うには、エンド・ユーザーは1つ以上の選択肢をタップします。選択内容を保存するには、エンド・ユーザーはポップアップの外をタップするか、閉じるボタン( x )を使用してポップアップを閉じます。
ポップアップを閉じるときに、コンポーネントに表示されている値が、選択済の値に更新されます。
選択肢の数がデバイスのサイズを超える場合、スクロール可能なリスト・ビュー(第8.2.7項「リスト・ビューおよびリスト・アイテム・コンポーネントの使用方法」を参照)を含むフルページ・ポップアップが生成されます。
iPhoneとiPadの両方でのリストスタイルのチェックボックスを複数選択コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストが表示されます。選択を行うには、エンド・ユーザーは上下にスクロールして使用可能な選択肢を参照し、1つ以上の選択肢をタップします。選択内容を保存するには、エンド・ユーザーは閉じるボタン( x )をタップします。
リストを閉じるときに、コンポーネントに表示されている値が、選択済の値に更新されます。
|
注意: どちらの場合も、選択を取り消すメカニズムは提供されていません。 |
選択肢(selectOneChoice)コンポーネントは、リストからの単一の値の選択を可能にするために使用するコンボ・ボックスを表します。この選択メカニズムは、選択肢コンポーネントに含まれているアイテムの選択コンポーネント(第8.3.10.3項「アイテムの選択コンポーネントの違いについて」を参照)によって提供されます。
|
注意: 選択肢コンポーネントには、アイテムの選択(selectItems)コンポーネントを1つ、またはアイテムの選択(selectItem)コンポーネントを1つ以上含めることができます。 |
例8-42は、ADFモバイルAMXファイルのselectOneChoice要素の定義をselectItemsサブ要素とともに示しています。
例8-42 アイテムの選択コンポーネントを使用した選択肢の定義
<amx:selectOneChoice id="choice1"
label="Your state:"
value="#{myBean.myState}">
<amx:selectItem label="Alaska" value="AK"/>
<amx:selectItem label="Alabama" value="AL"/>
<amx:selectItem label="California" value="CA"/>
<amx:selectItem label="Connecticut" value="CT"/>
</amx:selectOneChoice>
例8-43 アイテムの選択コンポーネントを使用した選択肢の定義
<amx:selectOneChoice id="choice1"
label="Your state:"
value="#{myBean.myState}">
<amx:selectItems value="myBean.allStates"/>
</amx:selectOneChoice>
図8-34は、「プレビュー」ペインに表示されている選択肢コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectOneChoice id="selectOneChoice1"
label="Choice"
value="value1">
<amx:selectItem label="Value 1" value="value1"/>
<amx:selectItem label="Value 2" value="value2"/>
<amx:selectItem label="Value 3" value="value3"/>
</amx:selectOneChoice>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
ADFモバイルAMXでは、選択肢コンポーネントを表示するため、ポップアップ・スタイルとドロップダウン・スタイルの2つの代替方法が提供されています。
iPhoneでのネイティブ選択肢コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると選択肢のリストが、デフォルトで最初のオプションが選択された状態で表示されます。選択を行うには、エンド・ユーザーは上下にスクロールして使用可能な選択肢を参照します。選択内容を保存するには、エンド・ユーザーはツール・バーの「終了」をタップします。
iPadでは、ユーザーの対話は、以下の点を除いてiPhoneにおける対話と同様です。
選択のリストは、ポップアップ・ダイアログに表示されます。
iPadのスタイリングが選択のリストの周囲に実装され、リストのソースを示すためにノッチが使用されます。
アイテムを選択しないで選択のリストを閉じるには、エンド・ユーザーはポップアップ・ダイアログの外をタップする必要があります。
|
注意: 選択のリストおよびツール・バーを表示するためのUIは、ブラウザにネイティブであり、CSSを使用してスタイリングすることはできません。 |
選択肢コンポーネント内のリスト値は、無効として表示できます。
選択肢の数がデバイスの表示サイズを超える場合、ネイティブな方法でスクロール可能なリスト・ページが生成されます。
Androidデバイスでのネイティブ選択肢コンポーネントとエンド・ユーザーとの対話では、エンド・ユーザーがコンポーネントをタップすると、ポップアップ・ダイアログ形式の選択肢のリストが表示されます。選択肢の数がデバイスのサイズ内に収まる場合は単純なポップアップが表示されます。この場合次のようになります。
選択リストの1つのアイテムを1回タップすると、そのアイテムが選択され、ポップアップが閉じます。選択内容は選択肢コンポーネント・ラベルに反映されます。
ポップアップの外で1回タップするか戻るキーをクリックすると、変更が適用されることなくポップアップが閉じます。
表示される選択肢の数がデバイス・サイズ内に収まらない場合は、ポップアップにスクロール可能リストが含まれます。その場合は次のようになります。
選択リストの1つのアイテムを1回タップすると、そのアイテムが選択され、ポップアップが閉じます。選択内容は選択肢コンポーネント・ラベルに反映されます。
戻るキーをクリックすると、変更が適用されることなくポップアップが閉じます。
アイテムの選択(selectItems)コンポーネントは、JSF selectItems要素を基にしており、複数選択コンポーネントで選択できるオブジェクトのリストを提供します。詳細は、http://www.jsftoolbox.comのJSF Toolbox pageを参照してください。
アイテムの選択(selectItem)コンポーネントは、ADFのselectItem要素を基にしており、選択コンポーネントの単一選択可能アイテムを表します。詳細は、Oracle Fusion Middleware Oracle ADF Facesのタグ・リファレンスの<af:selectItemページに関する項を参照してください。
選択肢を複数選択(selectManyChoice)コンポーネントは、リストの複数の値の選択を可能にします。この選択メカニズムは、チェックボックスを複数選択コンポーネントに含まれているアイテムの選択コンポーネント(第8.3.10.3項「アイテムの選択コンポーネントの違いについて」を参照)によって提供されます。
|
注意: チェックボックスを複数選択コンポーネントには、アイテムの選択(selectItems)コンポーネントを1つ、またはアイテムの選択(selectItem)コンポーネントを1つ以上含めることができます。 |
例8-44は、ADFモバイルAMXファイルで宣言されているselectManyChoice要素を示しています。
例8-44 アイテムの選択コンポーネントを使用した選択肢を複数選択の定義
<amx:selectManyChoice id="check1"
label="Select Shipping Options:"
value="#{myBean.shipping}">
<amx:selectItem label="Signature Required" value="signature" />
<amx:selectItem label="Insurance" value="insurance" />
<amx:selectItem label="Delivery Confirmation" value="deliveryconfirm"/>
</amx:selectManyChoice>
例8-45 アイテムの選択コンポーネントを使用した選択肢を複数選択の定義
<amx:selectManyChoice id="check1"
label="Select Shipping Options:"
value="#{myBean.shipping}">
<amx:selectItems value="#{myBean.shippingOptions}"/>
</amx:selectManyChoice>
デザインタイムには、選択肢を複数選択コンポーネントは選択コンポーネントと同一に見えます。詳細は、図8-34および第8.3.10項「選択肢コンポーネントの使用方法」を参照してください。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
すべてのサポートされているデバイス上の選択肢を複数選択コンポーネントの外観と動作は、チェックボックスを複数選択コンポーネントとほとんど同一です(詳細は、第8.3.9項「チェックボックスを複数選択コンポーネントの使用方法」を参照してください)。
ブール・スイッチ(selectBooleanSwitch)コンポーネントは、チェックボックスのかわりのスイッチ・メタファーとしてのブール値の編集を可能にします。
他のADFモバイルAMX UIコンポーネントと同様に、このコンポーネントには標準および選択済の状態があります。値を切り替えるには、エンド・ユーザーはスイッチを1回タップ(タッチしてリリース)します。タップするたびにスイッチが切り替わります。
例8-46は、ADFモバイルAMXファイルで定義されているselectBooleanSwitch要素を示しています。
例8-46 ブール・スイッチの定義
<amx:selectBooleanSwitch id="switch1"
label="Flip switch:"
onLabel="On"
offLabel="Off"
value="#{myBean.bool1}"/>
図8-35は、「プレビュー」ペインに表示されているブール・スイッチ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectBooleanSwitch id="selectBooleanSwitch1"
label="Switch"
value="value1">
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
iOSでは、プール・スイッチ・コンポーネントは、属性値を有効化または無効化するために設定ページでよく使用されます。
選択ボタン(selectOneButton)コンポーネントは、常に1つのボタンがアクティブになっている、アクションをリストするボタン・グループを表します。この選択メカニズムは、選択ボタン・コンポーネントに含まれているアイテムの選択コンポーネント(第8.3.10.3項「アイテムの選択コンポーネントの違いについて」を参照)によって提供されます。
|
注意: 選択ボタン・コンポーネントには、アイテムの選択(selectItems)コンポーネントを1つ、またはアイテムの選択(selectItem)コンポーネントを1つ以上含めることができます。 |
例8-47は、ADFモバイルAMXファイルで定義されているselectOneButton要素を示しています。
例8-47 選択ボタンの定義
<amx:selectOneButton id="bg1" value="#{myBean.myState}">
<amx:selectItem label="Yes" value="yes"/>
<amx:selectItem label="No" value="no"/>
<amx:selectItem label="Maybe" value="maybe"/>
</amx:selectOneButton>
図8-36は、「プレビュー」ペインに表示されている選択ボタン・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectOneButton id="selectOneButton1"
label="Select Button"
value="value1">
<amx:selectItem label="Value 1" value="value1"/>
<amx:selectItem label="Value 2" value="value2"/>
<amx:selectItem label="Value 3" value="value3"/>
</amx:selectOneButton>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
ラジオ・ボタン(selectOneRadio)コンポーネントは、使用可能な選択肢をリストするラジオ・ボタンのグループを表します。この選択メカニズムは、ラジオ・ボタン・コンポーネントに含まれているアイテムの選択コンポーネント(第8.3.10.3項「アイテムの選択コンポーネントの違いについて」を参照)によって提供されます。
|
注意: ラジオ・ボタン・コンポーネントには、アイテムの選択(selectItems)コンポーネントを1つ、またはアイテムの選択(selectItem)コンポーネントを1つ以上含めることができます。 |
例8-48および例8-49は、ADFモバイルAMXファイルで宣言されているselectOneRadio要素を示しています。
例8-48 アイテムの選択コンポーネントを使用したラジオ・ボタンの定義
<amx:selectOneRadio id="radio1"
label="Choose a pet:"
value="#{myBean.myPet}">
<amx:selectItem label="Cat" value="cat"/>
<amx:selectItem label="Dog" value="dog"/>
<amx:selectItem label="Hamster" value="hamster"/>
<amx:selectItem label="Lizard" value="lizard"/>
</amx:selectOneRadio>
例8-49 アイテムの選択コンポーネントを使用したラジオ・ボタンの定義
<amx:selectOneRadio id="radio1"
label="Choose a pet:"
value="#{myBean.myPet}">
<amx:selectItems value="myBean.allPets"/>
</amx:selectOneRadio>
図8-37は、「プレビュー」ペインに表示されているブール・スイッチ・コンポーネントを示しています。このコンポーネントのパラメータは、次のように設定されます。
<amx:selectOneRadio id="selectOneRadio1"
label="Radio Button"
value="value1">
<amx:selectItem label="Value 1" value="value1"/>
<amx:selectItem label="Value 2" value="value2"/>
<amx:selectItem label="Value 3" value="value3"/>
</amx:selectOneRadio>
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
カルーセル(carousel)コンポーネントは、回転カルーセルにイメージなどの他のコンポーネントを表示するために使用します。エンド・ユーザーは、スライダを使用するか、別のイメージを正面にドラッグすることでアクティブなアイテムを変更できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のADF Facesカルーセル・コンポーネントの使用に関する項を参照してください。
カルーセル・コンポーネントにはカルーセル・アイテム(carouselItem)コンポーネントが含まれており、text属性によって表されるそのテキストは、それがそのカルーセルのアクティブなアイテムであるときに表示されます。通常、カルーセル・アイテムにはイメージ・コンポーネントが含まれていますが、他のコンポーネントを使用することもできます。たとえば、イメージを囲む子としてリンクを使用することもできます。
|
ヒント: アプリケーションのパフォーマンスの低下を最小限に抑えるは、重いコンポーネントを子として使用しないようにします。複雑な構造にすると、いくつかのカルーセル・アイテム・スタンプが同時に表示されるため、その影響が倍増します。 |
JDeveloperでは、「カルーセル」は「コンポーネント・パレット」の「データ・ビュー」の下にあります(図8-38を参照)。
例8-50は、ADFモバイルAMXファイルのcarousel要素の定義を示しています。carousel要素を定義するときは、carouselコンポーネントのnodeStampファセット内にcarouselItemコンポーネントを配置する必要があります。
例8-50 カルーセルの定義
<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=""
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 from="#{item}"
to="#{pageFlowScope.product}"
type="action"/>
</amx:commandLink>
</amx:carouselItem>
</amx:facet>
</amx:carousel>
図8-39は、iPhone上に表示されるカルーセル・コンポーネントを示しています。
詳細、図および例は、次を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
CompGallery (開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているADFモバイル・サンプル・アプリケーション)。
該当するコンポーネントが存在しない場合や自身でHTMLを使用してレイアウトする必要がある場合は、Verbatim (verbatim)操作を使用して独自のHTMLをページに挿入できます。
JDeveloperでは、「Verbatim」は、「コンポーネント・パレット」の「一般コントロール」の下にあります(図8-41を参照)。
詳細および例は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
イテレータ(iterator)操作を使用して、同じ種類のデータを持つ任意の数のアイテムをスタンプします。これによりデータを繰り返し処理して各要素のUIを作成できます。
JDeveloperでは、「イテレータ」は「コンポーネント・パレット」の「操作」の下にあります(図8-41を参照)。
詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
バンドルのロード(loadBundle)操作により、ページ上のADFモバイルAMX UIコンポーネントのローカライズ済テキストを提供するリソース・バンドルを指定できます。詳細は、第8.7項「UIコンポーネントのローカライズ」を参照してください。
JDeveloperでは、「バンドルのロード」は「コンポーネント・パレット」の「操作」の下にあります(図8-42を参照)。
ADFモバイルAMXファイル内で、loadBundle要素をview要素の子として宣言します。
詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
アクション・リスナー(actionListener)コンポーネントにより、親コンポーネントが使用するタイプに基づいてELを介して宣言でコマンドを呼び出すことができます。
JDeveloperでは、「アクション・リスナー」コンポーネントは「コンポーネント・パレット」の「リスナー」の下にあります(図8-43を参照)。
0個以上のアクション・リスナーまたはプロパティ・リスナーの設定コンポーネントを、任意のコマンド・コンポーネント(ボタン、リンク、リスト・アイテム)の子として追加できます。actionListener、valueChangeListener、moveListenerなどのリスナー属性は様々なコンポーネントに対して定義されます。アクション・リスナーまたはプロパティ・リスナーの設定コンポーネントのtype属性で、このリスナー・コンポーネントがどのインベントを処理するのかと親のリスナー属性名(action、valueChange、move)の最初の部分でどのイベントを表すのかを示すことができます。また、type属性は、swipeLeft、swipeRight、tapHoldなどのジェスチャーを表すこともできます。
詳細は、次の項を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
プロパティ・リスナーの設定(setPropertyListener)コンポーネントにより、コードを作成することなく1つの場所(コンポーネントのfrom属性で定義)から別の場所(コンポーネントのto属性で定義)に宣言で変数値を移動できます。
JDeveloperでは、「プロパティ・リスナーの設定」コンポーネントは「コンポーネント・パレット」の「リスナー」の下にあります(図8-44を参照)。
例8-51は、ADFモバイルAMXファイルのsetPropertyListener要素の定義を示しています。
例8-51 プロパティ・リスナーの設定の定義
<amx:listView value="#{bindings.products.collectionModel}" var="row" id="lv1">
<amx:listItem action="details">
<amx:outputText value="#{row.name}" id="ot1" />
<amx:setPropertyListener from="#{row}"
to="#{pageFlowScope.product}"
type="action"/>
</amx:listItem>
</amx:listView>
0個以上のプロパティ・リスナーの設定またはアクション・リスナー・コンポーネントを、任意のコマンド・コンポーネント(ボタン、リンク、リスト・アイテム)の子として追加できます。actionListener、valueChangeListener、moveListenerなどのリスナー属性は様々なコンポーネントに対して定義されます。プロパティ・リスナーの設定またはアクション・リスナー・コンポーネントのtype属性で、このリスナー・コンポーネントがどのインベントを処理するのかと親のリスナー属性名(action、valueChange、move)の最初の部分でどのイベントを表すのかを示すことができます。また、type属性は、swipeLeft、swipeRight、tapHoldなどのジェスチャーを表すこともできます。
詳細は、次の項を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
日時の変換(convertDateTime)は、独立したUIコンポーネントではありません。これは、出力テキストおよび入力テキスト・コンポーネントと組み合せて使用して、指定されたパターンに従った様々な書式で、変換された日付、時刻または日時の組合せを表示するコンバータ操作です。
JDeveloperでは、「日時の変換」は「コンポーネント・パレット」の「バリデータおよびコンバータ」の下にあります(図8-45を参照)。
例8-52は、ADFモバイルAMXファイルで宣言されているconvertDateTime要素を示しています。
例8-52 日時の変換の使用方法
<amx:panelPage id="pp1">
<amx:inputText styleClass="ui-text" value="Order Date" id="it1" >
<amx:convertDateTime type="both"/>
</amx:inputText>
</amx:panelPage>
日時値を変換するには:
「コンポーネント・パレット」から、「日時の変換」コンポーネントをドラッグし、それを出力テキストまたは入力テキスト・コンポーネント内に挿入し、それをそのコンポーネントの子要素にします。
日時の変換コンポーネントに対して「プロパティ」エディタを開き、その属性を定義します。詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
|
注意: 日時の変換コンポーネントは、デザインタイムには何の効果も持ちません。 |
日時の変換コンポーネントでは、入力値文字列を日付に変換する際に一定レベルの寛容性があります。
月に対して関連付けられたパターン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の文字は、日付または時間の文字列のコンポーネントを表すパターン文字と認識されます。テキストは、解釈されないように一重引用符(')で囲むことができます。" ' ' "は一重引用符を表します。すべてのその他の文字は解釈されません。かわりに、それらは書式設定中に単に出力文字列にコピーされるか、解析中に入力文字列と照合されます。
表8-7は、定義済パターン文字を示しています(AからZおよびaからzのすべてのその他の文字は予約されています)。
表8-7 日時パターン文字
| 文字 | 日付または時間コンポーネント | 表示内容 | 例 |
|---|---|---|---|
|
G |
紀元 |
テキスト |
|
|
y |
年 |
年 |
|
|
M |
年における月 |
月 |
|
|
w |
年における週 |
番号 |
|
|
W |
月における週 |
番号 |
|
|
D |
年における日 |
番号 |
|
|
d |
月における日 |
番号 |
|
|
F |
月における曜日 |
番号 |
|
|
E |
曜日 |
テキスト |
|
|
a |
午前/午後 |
テキスト |
|
|
H |
1日における時間(0-23) |
番号 |
|
|
k |
1日における時間(1-24) |
番号 |
|
|
K |
午前/午後における時間(0-11) |
番号 |
|
|
h |
午前/午後における時間(1-12) |
番号 |
|
|
m |
1時間における分 |
番号 |
|
|
s |
1分における秒 |
番号 |
|
|
S |
ミリ秒 |
番号 |
|
|
z |
タイム・ゾーン |
一般的なタイムゾーン |
|
|
Z |
タイム・ゾーン |
RFC 822タイムゾーン |
|
パターン文字は通常繰り返されます。これは、それらの数が正確な表示を決定するためです。
数値の変換(convertNumber)は、独立したUIコンポーネントではありません。これは、出力テキストおよび入力テキスト・コンポーネントと組み合せて使用して、指定されたパターンに従った様々な書式で、変換された数値または通貨値を表示するコンバータ操作です。
数値の変換コンポーネントは、次のタイプの操作を提供します。
値から文字列。表示目的です。
書式設定された文字列から値。書式設定された入力値が、基礎となっている値に解析される場合です。
数値の変換が、入力テキスト・コンポーネントの子として指定されている場合、デフォルトで、モバイル・デバイスに数字キーボードが表示されます。
JDeveloperでは、「数値の変換」は「コンポーネント・パレット」の「バリデータおよびコンバータ」の下にあります(図8-46を参照)。
例8-53は、ADFモバイルAMXファイルで定義されているconvertNumber要素を示しています。
例8-53 数値の変換の使用方法
<amx:panelPage id="pp1">
<amx:inputText styleClass="ui-text" value="Product Price" id="it1" >
<amx:convertNumber type="percent" groupingUsed="false" integerOnly="true"/>
</amx:inputText>
</amx:panelPage>
数値を変換するには:
「コンポーネント・パレット」から、「数値の変換」コンポーネントをドラッグし、それを出力テキストまたは入力テキスト・コンポーネント内に挿入し、それをそのコンポーネントの子要素にします。
数値の変換コンポーネントに対して「プロパティ」エディタを開き、その属性を定義します。詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
|
注意: 数値の変換コンポーネントは、デザインタイムには何の効果も持ちません。 |
次のジェスチャーに反応するように、ボタン、リンク、リスト・アイテム・コンポーネントを構成できます。
右方向にスワイプ
左方向にスワイプ
上方向にスワイプ
下方向にスワイプ
タップしたまま押さえる
次の操作のtype属性に対して、swipeRight、swipeLeft、swipeUp、swipeDownおよびtapHold値を定義できます。
プロパティ・リスナーの設定(第8.3.20項「プロパティ・リスナーの設定の使用方法」を参照)
アクション・リスナー(第8.3.19項「アクション・リスナーの使用方法」を参照)
ポップアップ表示動作(第8.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
ポップアップを閉じる動作(第8.2.8項「ポップアップ・コンポーネントの使用方法」を参照)
type属性の値は親コンポーネントに基づいて制限されており、ボタン、リンクおよびリスト・アイテム・コンポーネントに対してのみサポートされています。
例8-54は、ADFモバイルAMXファイルのtype属性のtapHold値の使用を示しています。この例では、タップしたまま押さえるジェスチャーによってポップアップ・コンポーネントの表示がトリガーされます。
例8-54 タップしたまま押さえるジェスチャーの使用方法
<amx:panelPage id="pp1">
<amx:listView id="lv1"
value="#{bindings.data.collectionModel}"
var="row">
<amx:listItem action="gosomewhere">
<amx:outputText id="ot1" value="#{row.description}"/>
<amx:setPropertyListener from="#{row.rowKey}"
to="#{mybean.currentRow}"
type="tapHold"/>
<amx:showPopupBehavior 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 type="action" popupid="pop1"/>
</amx:commandLink>
<amx:commandLink id="cm2" actionListener="#{mybean.doY}">
<amx:image id="i2" source="images/y.png"/>
<amx:closePopupBehavior type="action" popupid="pop1"/>
</amx:commandLink>
<amx:commandLink id="cm3" actionListener="#{mybean.doZ}">
<amx:image id="i3" source="images/y.png"/>
<amx:closePopupBehavior type="action" popupid="pop1"/>
</amx:commandLink>
</amx:panelGroupLayout>
</amx:popup>
例8-55は、ADFモバイルAMXファイル内のswipeRightジェスチャーの使用方法を示しています。
例8-55 右方向にスワイプ・ジェスチャーの使用方法
<amx:panelPage id="pp1">
<amx:listView id="lv1"
value="#{bindings.data.collectionModel}"
var="row">
<amx:listItem action="gosomewhere">
<amx:outputText id="ot1" value="#{row.description}"/>
<amx:setPropertyListener from="#{row.rowKey}"
to="#{mybean.currentRow}"
type="swipeRight"/>
<actionListener binding="#{mybean.DoX}" type="swipeRight"/>
</amx:listItem>
</amx:listView>>
</amx:panelPage>
詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
GestureDemoという名前のADFモバイル・サンプル・アプリケーションは、様々なADFモバイルAMX UIコンポーネントでのジェスチャーの使用方法を示しています。このサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
ADFモバイルは、一連のデータ視覚化ツールを備えており、それらを使用して様々なチャート、ゲージおよびマップを作成し、ADFモバイルAMX機能でデータを表すことができます。ADFモバイルAMXファイルの<dvtm>ネームスペースの下で次の要素を宣言できます。
areaChart (第8.5.1項「面グラフの作成方法」を参照)
barChart (第8.5.2項「棒グラフの作成方法」を参照)
horizontalBarChart (第8.5.3項「横棒グラフの作成方法」を参照)
bubbleChart (第8.5.4項「バブル・チャートの作成方法」を参照)
comboChart (第8.5.5項「組合せグラフの作成方法」を参照)
lineChart (第8.5.6項「折れ線グラフの作成方法」を参照)
pieChart (第8.5.7項「円グラフの作成方法」を参照)
scatterChart (第8.5.8項「散布図の作成方法」を参照)
sparkChart (第8.5.9項「スパーク・チャートの作成方法」を参照)
ledGauge (第8.5.10項「LEDゲージの作成方法」を参照)
statusMeterGauge (第8.5.11項「ステータス・メーター・ゲージの作成方法」を参照)
dialGauge (第8.5.12項「ダイアル・ゲージの作成方法」を参照)
geographicMap (第8.5.14項「地理マップ・コンポーネントの作成方法」を参照)
thematicMap (第8.5.15項「テーマ・マップ・コンポーネントの作成方法」を参照)
チャート、ゲージおよびマップ要素には、それらのすべてまたは大部分に共通するいくつかの属性があります。詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
JDeveloperでは、チャート・コンポーネントは「コンポーネント・パレット」の「DVTモバイルAMX」→「チャート」の下にあり(図8-47を参照)、ゲージ・コンポーネントは「DVTモバイルAMX」→「ゲージ」の下にあり(図8-48を参照)、マップ・コンポーネントは「DVTモバイルAMX」→「マップ」の下にあります(図8-49を参照)。
チャート、ゲージまたはマップをトラック・アンド・ドロップすると、次のダイアログの1つが開き、作成しているコンポーネントのタイプに関する情報が表示されます。
データ視覚化コンポーネントにはイベント・リスナーを追加できます。詳細は、第8.10項「イベント・リスナーの使用方法」を参照してください。イベント・リスナーは、iOSとAndroidのどちらのデバイスでもADFモバイルAMXランタイムの記述のためにコンポーネントに適用できますが、それらのリスナーはデザインタイムでは何の効果も持ちません。
「データ・コントロール」パネルから作成されるデータバインドされたデータ視覚化コンポーネントの詳細は、第8.5.16項「データバインドされたデータ視覚化コンポーネントの作成方法」を参照してください。
CompGalleryという名前のADFモバイル・サンプル・アプリケーションは、ADFモバイルAMXアプリケーション機能での様々なデータ視覚化コンポーネントの使用方法を示しています。このサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
ADFモバイルAMXデータ視覚化コンポーネントの使用上の制約の詳細は、第C.5.2項「データ視覚化コンポーネントの制限」を参照してください。
Oracle ADFデータ視覚化コンポーネントの詳細は、Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイドのADFデータ視覚化コンポーネントの使用方法に関する項を参照してください。
面グラフ(areaChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けれされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、面の色やパターンなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。カスタム系列スタイルの定義の詳細は、第8.5.6項「折れ線グラフの作成方法」を参照してください。
例8-56は、ADFモバイルAMXファイルで定義されているareaChart要素を示しています。デフォルト系列スタイルで基本的な面グラフを作成するには、それにコレクションを渡し、chartDataItem要素をネストしたdataStampファセットを指定します。
例8-56 デフォルト系列スタイルを持つ面グラフの定義
<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 series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
</amx:facet>
<dvtm:yAxis axisMaxValue="80.0" majorIncrement="20.0" title="yAxis Title" />
<dvtm:legend position="end" />
</dvtm:areaChart>
データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrowに次のプロパティが含まれている必要があります。
series: このデータ・アイテムが属する系列の名前。
group: このデータ・アイテムが属するグループの名前。
value: データ・アイテムの値。
コレクションのrowには、個々のデータ・アイテムに適用可能なcolorやshapeなどの他のプロパティも含めることができます。
図8-53に示すように、属性グループ(attributeGroups要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、データ・アイテムのcolorおよびshape属性が、追加のグループ化式に基づいて設定されます。
例8-57 デフォルト系列スタイルおよびグループ化を含む面グラフの定義
<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 series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
<dvtm:attributeGroups id="ag_1"
type="color shape"
value="#{row.brand}" />
</amx:facet>
<dvtm:yAxis axisMaxValue="80.0" majorIncrement="20.0" title="yAxis Title" />
<dvtm:legend position="end" />
</dvtm:areaChart>
areaChart要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
areaChartに対して次の子要素を定義できます。
chartDataItem (第8.5.13.1項「チャートのデータ・アイテムの定義」を参照)
xAxis、yAxisおよびy2Axis (第8.5.13.3項「X軸、Y軸およびY2軸の定義」を参照)
legend (第8.5.13.2項「凡例の定義」を参照)
棒グラフ(barChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けされている場合に、データを垂直の棒として視覚的に表すために使用します。系列は、個々のデータ・アイテムごとではなく系列レベルで適用する必要があるいくつかの一般的なスタイル・プロパティを持つグラフィカル要素を使用して視覚化されます。
例8-58は、ADFモバイルAMXファイルで定義されているbarChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。
例8-58 棒グラフの定義
<dvtm:barChart id="barChart1"
value="#{bindings.barData.collectionModel}"
var="row"
inlineStyle="width: 400px; height: 300px;"
title="Bar Chart"
animationOnDisplay="zoom"
animationDuration="3000" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
</amx:facet>
<dvtm:yAxis axisMaxValue="80.0" majorIncrement="20.0" title="yAxis Title" />
<dvtm:legend position="start" />
</dvtm:barChart>
棒グラフのデータ・モデルは、個々の棒を記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。
series: この棒が属する系列の名前。
group: この棒が属するグループの名前。
value: データ・アイテムの値(必須)。
データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。
barChart要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
barChartに対して次の子要素を定義できます。
chartDataItem (第8.5.13.1項「チャートのデータ・アイテムの定義」を参照)
xAxis、yAxisおよびy2Axis (第8.5.13.3項「X軸、Y軸およびY2軸の定義」を参照)
legend (第8.5.13.2項「凡例の定義」を参照)
横棒グラフ(barChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けれされている場合に、データを水平の棒として視覚的に表すために使用します。系列は、個々のデータ・アイテムごとではなく系列レベルで適用する必要があるいくつかの一般的なスタイル・プロパティを持つグラフィカル要素を使用して視覚化されます。
例8-58は、ADFモバイルAMXファイルで定義されているhorizontalBarChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。
例8-59 横棒グラフの定義
<dvtm:horizontalBarChart id="horizBarChart1"
value="#{bindings.barData.collectionModel}"
var="row"
inlineStyle="width: 400px; height: 300px;"
title="Horizontal Bar Chart"
dataSelection="#{pageFlowScope.dataSelection}"
hideAndShowBehavior="#{pageFlowScope.hideAndShowBehavior}"
rolloverBehavior="#{pageFlowScope.rolloverBehavior}"
stack="#{pageFlowScope.stack}" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
</amx:facet>
<dvtm:yAxis axisMaxValue="80.0" majorIncrement="20.0" title="yAxis Title" />
<dvtm:legend position="start" />
</dvtm:horizontalBarChart>
横棒グラフのデータ・モデルは、個々の棒を記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。
series: この棒が属する系列の名前。
group: この棒が属するグループの名前。
value: データ・アイテムの値(必須)。
データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。
horizontalBarChart要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
horizontalBarChartに対して次の子要素を定義できます。
chartDataItem (第8.5.13.1項「チャートのデータ・アイテムの定義」を参照)
xAxis、yAxisおよびy2Axis (第8.5.13.3項「X軸、Y軸およびY2軸の定義」を参照)
legend (第8.5.13.2項「凡例の定義」を参照)
バブル・チャート(bubbleChart)は、各データ・アイテムがx、y座標とサイズ(バブル)を持つ一連のデータ・アイテムを表示します。さらに、各データ・アイテムには、colorやshapeなど様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、折れ線グラフ(第8.5.6項「折れ線グラフの作成方法」を参照)や面グラフ(第8.5.1項「面グラフの作成方法」を参照)と異なり、バブル・チャートには系列およびグループの厳密な概念がありません。
例8-60は、ADFモバイルAMXファイルで定義されているbubbleChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。各データ・アイテムのcolorおよびshape属性は、データ・モデルで提供されている値に基づいて個別に設定されます。
例8-60 カスタム・データ・アイテム・プロパティを設定したバブル・チャートの定義
<dvtm:bubbleChart id="bubbleChart1"
value="#{bindings.bubbleData.collectionModel}"
inlineStyle="width: 400px; height: 300px;"
dataSelection="multiple"
rolloverBehavior="dim"
animationOnDisplay="auto"
title="Bubble Chart"
var="row">
<amx:facet name="dataStamp">
<dvtm:chartDataItem label="#{row.label}" x="#{row.x}" y="#{row.y}"
size="#{row.size}" color="#{row.color}"
shape="#{row.shape}" />
</amx:facet>
</dvtm:bubbleChart>
例8-61では、データ・アイテムからなる関連する1つのグループに対して一般的なスタイル属性を設定するためにattributeGroups要素が使用されています。
例8-61 属性グループを設定したバブル・チャートの定義
<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 label="#{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>
例8-62は、使用可能な子要素(chartDataItem、xAxis、yAxisおよびlegend)をすべて定義したバブル・チャートを示しています。
例8-62 すべての属性を設定したバブル・チャートの定義
<dvtm:bubbleChart id="bubbleChart1"
inlineStyle="width: 400px; height: 300px;"
value="#{bindings.bubbleData.collectionModel}"
var="row"
title="Chart Title"
animationOnDisplay="zoom"
animationDuration="3000" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem label="#{row.group}" x="#{row.data.x}"
y="#{row.data.y}" size="#{row.data.z}" >
<dvtm:attributeGroups type="color" value="#{row.series}" />
<dvtm:attributeGroups type="shape" value="#{row.group}" />
</dvtm:chartDataItem>
</amx:facet>
バブル・チャートのデータ・モデルは、個々のデータ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各棒のプロパティには次のようなものがあります。
label: データ・アイテム・ラベル(オプション)。
x、y: 値の座標(必須)。
z: データ・アイテムのサイズ(必須)。
データには、系列ごとに同じ数のグループが含まれている必要があります。系列またはデータのペアのいずれかが欠けている場合、それはAPIにnullとして渡されます。
bubbleChart要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
barChartに対して次の子要素を定義できます。
chartDataItem (第8.5.13.1項「チャートのデータ・アイテムの定義」を参照)
xAxis、yAxisおよびy2Axis (第8.5.13.3項「X軸、Y軸およびY2軸の定義」を参照)
legend (第8.5.13.2項「凡例の定義」を参照)
組合せグラフ(comboChart)は、折れ線と棒のグラフなど、2つ以上の異なるグラフを重ねたものを表します。
例8-63は、ADFモバイルAMXファイルで定義されているcomboChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。seriesStampファセットは、系列のデフォルト・スタイル・プロパティを上書きし、seriesStyle要素を使用してカスタム系列スタイルを設定します。
例8-63 組合せグラフの定義
<dvtm:comboChart id="comboChart1"
value="#{bindings.barData.collectionModel}"
var="row"
seriesVar="series"
inlineStyle="width: 400px; height: 300px;"
title="Combo Chart"
animationOnDisplay="auto"
animationDuration="1500" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
</amx:facet>
<amx:facet name="seriesStamp">
<dvtm:seriesStyle series="#{series.name}" type="bar"
rendered="#{(series.name eq 'Series 1') or
(series.name eq 'Series 2') or
(series.name eq 'Series 3')}" />
<dvtm:seriesStyle series="#{series.name}" type="line" lineWidth="5"
rendered="#{(series.name eq 'Series 4') or
(series.name eq 'Series 5')}" />
</amx:facet>
<dvtm:yAxis axisMaxValue="80.0" majorIncrement="20.0" title="yAxis Title" />
<dvtm:legend position="start" />
</dvtm:comboChart>
comboChart要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
comboChartに対して次の子要素を定義できます。
chartDataItem (第8.5.13.1項「チャートのデータ・アイテムの定義」を参照)
xAxis、yAxisおよびy2Axis (第8.5.13.3項「X軸、Y軸およびY2軸の定義」を参照)
legend (第8.5.13.2項「凡例の定義」を参照)
折れ線グラフ(lineChart)は、一連のデータ・アイテムが関連付けられ、グループおよび系列にカテゴリ分けれされている場合に、データを視覚的に表すために使用します。系列は、いくつかの一般的なスタイル・プロパティ(たとえば、線の色、太さ、スタイルなど)を持つグラフィカル要素を使用して視覚化されます。それらのプロパティは、個々のデータ・アイテムごとではなく、系列レベルで適用する必要があります。デフォルト系列スタイルを使用するかカスタム系列スタイルを使用するかを選択できます。
例8-64は、ADFモバイルAMXファイルで定義されているlineChart要素を示しています。デフォルト系列スタイルで基本的な折れ線グラフを作成するには、それにコレクションを渡し、chartDataItem要素をネストしたdataStampファセットを指定します。
例8-64 デフォルト系列スタイルを持つ折れ線グラフの定義
<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 series="#{row.series}"
group="#{row.group}"
value="#{row.value}"
color="#{row.color}" />
</amx:facet>
</dvtm:lineChart>
データ・アイテムはコレクション・モデルで初期化され、スタンプ・メカニズムを備えています。少なくとも、各コレクションのrowに次のプロパティが含まれている必要があります。
series: この線が属する系列の名前。
group: この線が属するグループの名前。
value: データ・アイテムの値。
コレクションのrowには、個々のデータ・アイテムに適用可能なcolorやshapeなどの他のプロパティも含めることができます。
図8-58に示すように、属性グループ(attributeGroups要素)を使用して、なんらかのグループ化条件に基づいてデータ・アイテムのグループに対してスタイル・プロパティを設定できます。この場合、データ・アイテムのcolorおよびshape属性が、追加のグループ化式に基づいて設定されます。
例8-65 デフォルト系列スタイルおよびグループ化を含む折れ線グラフの定義
<dvtm:lineChart id="lineChart1"
inlineStyle="width: 400px; height: 300px;"
rolloverBehavior="dim"
animationOnDisplay="auto"
title="Line Chart"
titleStyle="font-size: 12px; color: black;"
value="#{bindings.lineData1.collectionModel}"
var="row" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
<dvtm:attributeGroups id="ag_1"
type="color shape"
value="#{row.brand}" />
</dvtm:chartDataItem>
</amx:facet>
</dvtm:lineChart>
系列のデフォルト・スタイル・プロパティを上書きするには、図8-58に示すように、オプションのseriesStampファセットを定義し、seriesStyle要素を使用してカスタム系列スタイルを設定します。
例8-66 カスタム系列スタイルを持つ折れ線グラフの定義
<dvtm:lineChart id="lineChart1"
inlineStyle="width: 400px; height: 300px;"
rolloverBehavior="dim"
animationOnDisplay="auto"
title="Line Chart"
value="#{bindings.lineData1.collectionModel}"
var="row"
seriesVar="series" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem series="#{row.series}"
group="#{row.group}"
value="#{row.value}" />
</dvtm:chartDataItem>
<amx:facet name="seriesStamp">
<dvtm:seriesStyle series="#{series.name}"
lineStyle="#{series.lineStyle}"
lineWidth="#{series.lineWidth}" />
</amx:facet>
</dvtm:lineChart>
前述の例では、seriesVar属性が、メインlineChart要素に追加されています。この属性によって、seriesStampファセット内のseriesStyle要素を処理する際に使用される変数の名前が定義されます。seriesVarは、dataStampファセットを処理する際に自動的に作成および移入される内部コレクションのアイテムを参照します。実行時、dataStampファセットに含まれているchartDataItem要素が最初に処理されます。一意のseries属性値ごとに、一般的な系列プロパティを表す新しいJavaScriptオブジェクト・インスタンスがラッパーによって作成されます。そのインスタンスには、少なくともnameプロパティが含まれています。さらに、そのオブジェクトには、同じ系列名を持つすべての行に対して同じ値を持つ、元のデータ・コレクションからのプロパティが含まれています。図8-58は、dataStampファセットが処理されると図8-58に示す内部系列コレクションになるサンプル・コレクションのデータを示しています。
例8-67 折れ線のデータ・コレクション
row[0]: { series: 'A', value: 81, lineColor: 'red', lineStyle: 'solid' }
row[1]: { series: 'A', value: 26, lineColor: 'red', lineStyle: 'solid' }
row[2]: { series: 'A', value: 53, lineColor: 'red', lineStyle: 'solid' }
row[3]: { series: 'B', value: 10, lineColor: 'blue', lineStyle: 'solid' }
row[4]: { series: 'B', value: 44, lineColor: 'blue', lineStyle: 'solid' }
row[5]: { series: 'B', value: 35, lineColor: 'blue', lineStyle: 'solid' }
row[6]: { series: 'C', value: 83, lineColor: 'green', lineStyle: 'dot' }
row[7]: { series: 'C', value: 23, lineColor: 'green', lineStyle: 'dot' }
row[8]: { series: 'C', value: 54, lineColor: 'green', lineStyle: 'dot' }
例8-68 処理済の折れ線のデータ・コレクション
series[0]: { name: 'A', lineColor: 'red', lineStyle: 'solid' }
series[1]: { name: 'B', lineColor: 'blue', lineStyle: 'solid' }
series[2]: { name: 'C', lineColor: 'green', lineStyle: 'dot' }
かわりに、図8-58に示すように、seriesStyle要素のrendered属性を使用して、「ADFモバイルAMX」ページ設計で系列スタイルを制御できます。
例8-69 フィルタ対象系列スタイルを持つ折れ線グラフの定義
<dvtm:lineChart id="lineChart1"
inlineStyle="width: 400px; height: 300px;"
rolloverBehavior="dim"
animationOnDisplay="auto"
title="Line Chart"
titleStyle="font-size: 12px; color: black;"
value="#{bindings.lineData1.collectionModel}"
var="row"
seriesVar="series" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem series="#{row.series}"
group="#{row.group}"
value="#{row.value}"
color="#{row.color}" />
</amx:facet>
<amx:facet name="seriesStamp">
<dvtm:seriesStyle series="#{series.name}"
color="red"
lineWidth="3"
lineStyle="solid"
rendered="#{series.name == 'Coke'}" />
<dvtm:seriesStyle series="#{series.name}"
color="blue"
lineWidth="2"
lineStyle="dot"
rendered="#{series.name == 'Pepsi'}" />
</amx:facet>
</dvtm:lineChart>
lineChart要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
lineChartに対して次の子要素を定義できます。
chartDataItem (第8.5.13.1項「チャートのデータ・アイテムの定義」を参照)
xAxis、yAxisおよびy2Axis (第8.5.13.3項「X軸、Y軸およびY2軸の定義」を参照)
legend (第8.5.13.2項「凡例の定義」を参照)
円グラフ(pieChart)は、各データ・アイテムを円セグメント(区分)で表したデータの比率による区分を示すために使用します。
例8-70は、ADFモバイルAMXファイルで定義されているpieChart要素を示しています。dataStampファセットは、ネストされたpieDataItem要素とともに指定されます。
例8-70 円グラフの定義
<dvtm:pieChart id="pieChart1"
inlineStyle="width: 400px; height: 300px;"
value="#{bindings.pieData.collectionModel}"
var="row"
title="Pie Chart"
animationOnDisplay="zoom"
animationDuration="3000" >
<amx:facet name="dataStamp">
<dvtm:pieDataItem label="#{row.name}" value="#{row.data}" />
</amx:facet>
<dvtm:legend position="bottom" />
</dvtm:pieChart>
円グラフのデータ・モデルは、個々の円データ・アイテムを定義するアイテムのコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。
label: 区分ラベル。
value: 区分の値。
モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。
borderColor: 区分の境界線の色。
color: 区分の色。
explode: 区分を開くときのオフセット。
pieChart要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
pieChartに対して次の子要素を定義できます。
pieDataItem (第8.5.13.4項「円グラフのデータ・アイテムの定義」を参照)
legend (第8.5.13.2項「凡例の定義」を参照)
散布図(scatterChart)は、各アイテムがx, y座標とサイズを持つデータ・アイテムを表す連続しないドットでデータを表示します。さらに、各データ・アイテムには、colorやshapeなど様々なスタイル属性を設定できます。各データ・アイテムのプロパティを個別に設定することも、様々な条件に基づいてデータ・アイテムをグループにカテゴリ分けすることもできます。複数のグループ化条件を同時に使用でき、データ・アイテムの関係を視覚化するために様々なスタイル属性を使用することもできます。ただし、折れ線グラフ(第8.5.6項「折れ線グラフの作成方法」を参照)や面グラフ(第8.5.1項「面グラフの作成方法」を参照)と異なり、散布図には系列およびグループの厳密な概念がありません。
例8-71は、ADFモバイルAMXファイルで定義されているscatterChart要素を示しています。dataStampファセットは、ネストされたchartDataItem要素とともに指定されます。各データ・アイテムのcolorおよびshape属性は、データ・モデルで提供されている値に基づいて個別に設定されます。
例8-71 散布図の定義
<dvtm:scatterChart id="scatterChart1"
inlineStyle="width: 400px; height: 300px;"
title="Scatter Chart"
animationOnDisplay="zoom"
animationDuration="3000"
value="#{bindings.scatterData.collectionModel}"
var="row" >
<amx:facet name="dataStamp">
<dvtm:chartDataItem label="#{row.group}"
x="#{row.data.x}"
y="#{row.data.y}">
<dvtm:attributeGroups type="color shape"
value="#{row.series}" />
</dvtm:chartDataItem>
</amx:facet>
<dvtm:xAxis title="X Axis Title" />
<dvtm:yAxis title="Y Axis Title" />
<dvtm:legend position="bottom" />
</dvtm:scatterChart>
散布図のデータ・モデルは、個々のデータ・アイテムを記述するアイテム(行)のコレクションによって表されます。各データ・アイテムの属性は、スタンプ(dataStamp)によって定義され、通常、次のものがあります。
x、y: 値の座標(必須)。
size: マーカーのサイズ(オプション)。
モデルは、次のようなデータ・アイテムの他のプロパティも定義している場合があります。
borderColor: データ・アイテムの境界線の色。
color: データ・アイテムの色。
tooltip: カスタム・ツールチップ。
scatterChart要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
scatterChartに対して次の子要素を定義できます。
chartDataItem (第8.5.13.1項「チャートのデータ・アイテムの定義」を参照)
xAxis、yAxisおよびy2Axis (第8.5.13.3項「X軸、Y軸およびY2軸の定義」を参照)
legend (第8.5.13.2項「凡例の定義」を参照)
スパークチャート(sparkChart)は、傾向や変化を、多くの場合、表の列内で表す簡単な縮小グラフです。このチャートは、多くの場合、データ密度の濃い表示に追加のコンテキストを提供するためにダッシュボードで使用されます。
例8-72は、ADFモバイルAMXファイルで定義されているsparkChart要素を示しています。dataStampファセットは、ネストされたsparkDataItem要素とともに指定されます。
例8-72 スパーク・チャートの定義
<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 value="#{row.value}" />
</amx:facet>
</dvtm:sparkChart>
スパーク・チャートのデータ・モデルは、個々のスパーク・データ・アイテムを記述するアイテム(行)のコレクションによって表されます。通常、各データ・アイテムのプロパティには、次のものがあります。
value: スパーク値。
sparkChart要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
sparkChartに対して次の子要素を定義できます。
sparkDataItem (第8.5.13.5項「スパーク・チャートのデータ・アイテムの定義」を参照)
referenceObjects (第8.5.13.6項「参照オブジェクトの定義」を参照)
チャートと異なり、ゲージでは、単一のデータ・ポイントを重視し、そのポイントを最小、最大およびしきい値インジケータと比較して問題領域を識別します。LED(電光表示)ゲージ(ledGauge)は、重要業績評価指標(KPI)などの測定値をグラフィカルに表します。LEDゲージには、いくつかのスタイルがあります。矢印付きのものは、よい(上矢印)、普通(右または左矢印)および悪い(下矢印)を示すために使用されます。ゲージのしきい値はいくつでも指定できます。ただし、一部のLEDゲージ(矢印または三角形のインジケータを持つものなど)では、指し示す有効な方向の数が限られているため、サポートされるしきい値の数にかぎりがあります。矢印または三角形のインジケータの場合、しきい値の最大数は3です。
例8-73は、ADFモバイルAMXファイルで定義されているledGauge要素を示しています。
例8-73 LEDゲージの定義
<dvtm:ledGauge id="ledGauge1"
value="65"
type="circle"
labelDisplay="on"
inlineStyle="width: 100px; height: 80px; float: left;
border-color: navy; background-color: lightyellow;">
<dvtm:threshold text="Low" maxValue="40" />
<dvtm:threshold text="Medium" maxValue="60" />
<dvtm:threshold text="High" maxValue="80" />
</dvtm:ledGauge>
LEDゲージのデータ・モデルは、value属性で指定される単一のメトリック値で表されます。
ledGauge要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
ledGaugeに対して次の子要素を定義できます。
threshold (第8.5.13.7項「しきい値の定義」を参照)
ステータス・メーター・ゲージ(statusMeterGauge)は、矩形の水平バーに沿ってタスクの進捗状況または測定値のレベルを示します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。
例8-74は、ADFモバイルAMXファイルで定義されているstatusMeterGauge要素を示しています。
例8-74 ステータス・メーター・ゲージの定義
<dvtm:statusMeterGauge id="meterGauge1"
value="65"
animationOnDisplay="auto"
animationDuration="1000"
inlineStyle="width: 300px; height: 30px; float: left;
border-color: black;
background-color: lightyellow;"
labelDisplay="on"
minValue="0"
maxValue="100">
<dvtm:threshold text="Low" maxValue="40" />
<dvtm:threshold text="Medium" maxValue="60" />
<dvtm:threshold text="High" maxValue="80" />
</dvtm:statusMeterGauge>
ステータス・メーター・ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。
statusMeterGauge要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
statusMeterGaugeに対して次の子要素を定義できます。
threshold (第8.5.13.7項「しきい値の定義」を参照)
ダイヤル・ゲージ(dialGauge)は、悪いからよいまで変化する値(しきい値)の範囲を指定します。ゲージのインジケータではメトリックの現在の値が示される一方、図形によってその値のステータスを評価できます。
例8-74は、ADFモバイルAMXファイルで定義されているdialGauge要素を示しています。
例8-75 ダイヤル・ケージの定義
<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}"
labelDisplay="on"
inlineStyle="#{pageFlowScope.inlineStyle}"
styleClass="#{pageFlowScope.styleClass}"
readOnly="true"
</dvtm:dialGauge>
ダイヤル・ゲージのデータ・モデルは、value属性で指定される単一のメトリック値です。また、最小値はminValue属性で、最大値はmaxValue属性によって指定できます。
dialGauge要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
dialGaugeに対して次の子要素を定義できます。
threshold (第8.5.13.7項「しきい値の定義」を参照)
チャートおよびゲージには様々な子要素を定義できます。それらの子要素のいくつかを次に示します。
chartDataItem (第8.5.13.1項「チャートのデータ・アイテムの定義」を参照)
xAxis、yAxisおよびy2Axis (第8.5.13.3項「X軸、Y軸およびY2軸の定義」を参照)
legend (第8.5.13.2項「凡例の定義」を参照)
pieDataItem (第8.5.13.4項「円グラフのデータ・アイテムの定義」を参照)
sparkDataItem (第8.5.13.5項「スパーク・チャートのデータ・アイテムの定義」を参照)
referenceObject (第8.5.13.6項「参照オブジェクトの定義」を参照)
threshold (第8.5.13.7項「しきい値の定義」を参照)
詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
JDeveloperでは、チャートおよびゲージの子コンポーネントは、「コンポーネント・パレット」の「DVTモバイルAMX」→「チャートおよびゲージ子タグ」の下にあります(図8-47を参照)。
チャート・データ・アイテム(chartDataItem)要素は、円グラフを除くすべてのサポートされているチャートでチャート・データ・アイテムが使用するパラメータを指定します。
chartDataItem要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
凡例(legend)要素は、凡例パラメータを指定します。
legend要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
X軸(xAxis)およびY軸(yAxis)要素は、チャートのX軸とY軸を定義します。Y2軸(y2Axis)は、オプションのY2軸を定義します。これらの要素は、ADFモバイルAMXファイルで次のように定義されます。
<dvtm:xAxis scrolling="on" axisMinValue="0.0" axisMaxValue="50.0" />
xAxis、yAxisおよびy2Axis要素の属性および子要素の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
円グラフのデータ・アイテム(pieDataItem)要素は、円グラフの区分のパラメータを指定します(第8.5.7項「円グラフの作成方法」を参照)。
pieDataItem要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
スパーク・チャートのデータ・アイテム(sparkDataItem)要素は、スパーク・チャート・アイテムのパラメータを指定します(第8.5.9項「スパーク・チャートの作成方法」を参照)。
sparkDataItem要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
参照オブジェクト(referenceObject)要素は、スパーク・チャートの軸の参照オブジェクトを指定します(第8.5.9項「スパーク・チャートの作成方法」を参照)。
referenceObjects要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
しきい値(threshold)要素は、ゲージのしきい値範囲を指定します(第8.5.10項「LEDゲージの作成方法」および第8.5.11項「ステータス・メーター・ゲージの作成方法」を参照)。
threshold要素の属性の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
地理マップ(geographicMap)は、1つのマップに重ね合せた1つ以上のインタラクティブな情報レイヤーでビジネス・データを表します。このコンポーネントを構成して、GoogleマップまたはOracleマップのいずれかをマップ・プロバイダとして 使用できます(第8.5.14.1項「地理プロバイダ情報を指定した地理マップ・コンポーネントの構成」を参照)。
例8-76は、ADFモバイルAMXファイルで定義されているgeographicMap要素を示しています。
例8-76 地理マップの定義
<dvtm:geographicMap id="g1" mapType="ROADMAP"
centerX="-98.57" centerY="39.82"
zoomLevel="2" initialZooming="auto">
<dvtm:pointDataLayer id="pdl1"
var="row"
value="#{bindings.locationData.collectionModel}"
dataSelection="multiple"
selectionListener="#{myBean.doSomeGood}">
<dvtm:pointLocation id="pl1" type="address" address="#{row.address}">
<dvtm:marker shortDesc="#{row.shortDesc}" />
</dvtm:pointLocation>
</dvtm:pointDataLayer>
</dvtm:geographicMap>
geographicMapに対してpointDataLayer子要素を定義できます。pointDataLayerによって、マップ上の点と関連付けられたデータを表示できます。pointDataLayerは子要素としてpointLocationを持つことができます。pointLocationは、データ・ポイントの位置を決定するデータ・レイヤーのモデル内の列を指定します。これらの位置は、住所またはX座標とY座標で表すことができます。
pointLocationは、子要素としてmarkerを持つことができます。markerは、マップ上のデータ・ポイントに関連付けられた組込み形状またはカスタム形状をスタンプ・アウトするために使用します。markerでは、マーカーとしてレンダリングされるイメージのURIを指定するための一連のプロパティがサポートされています。マーカーは子要素としてconvertNumberを持つことができます(第8.3.22項「数値の変換方法」を参照)。
geographicMap要素の属性およびその子要素の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
基礎となるマップに特定のプロバイダ(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から該当するライセンスを取得する必要があります。 |
例8-77は、Googleマップ用の構成を示しています。
例8-77 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>
例8-78は、Oracleマップの構成を示しています。
例8-78 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>
マップ・プロバイダ情報を指定しない場合、ADFモバイルAMX地理マップ・コンポーネントは、そのマップとしてGoogleマップを使用しますがライセンス・キーはありません。
adf-config.xmlファイルの詳細は、次を参照してください。
テーマ・マップ(thematicMap)では、ビジネス・データをスタイル設定された領域内のパターンまたは関連付けられたマーカーとして表します。テーマ・マップでは、地理的な詳細なしで、データに焦点を合せます。
ADFモバイルAMXでは、Oracle ADF Thematic Mapコンポーネントのほとんどの機能、子要素およびプロパティがサポートされています。詳細は、Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイドのマップコンポーネントの使用方法に関する章を参照してください。次のものはサポートされていません。
ドラック・アンド・ドロップ機能。
コントロール・パネル。
ポップアップ・メニュー。
カスタム・リージョン(customAreaLayer)。
ドリル。
閉じることが可能な凡例グループのセクション。
閉じることが可能な凡例。
領域およびマーカー上のパターン(pattern)。
イメージ(ADFモバイルAMXイメージ(image)コンポーネント)。かわりに、マーカー(marker)子コンポーネントを指定してイメージを使用できます。詳細は、第8.5.15.1項「カスタム・マーカーの定義方法」を参照してください。
markerのactionListener属性。かわりに、同じ機能を、selectionListenerを使用するかactionとsetPropertyListenerの組合せを使用して実現できます(第8.10項「イベント・リスナーの使用方法」を参照)。
ADFモバイルAMXテーマ・マップには、Oracle ADFでは使用できない次の機能があります。
カスタム・マーカー(第8.5.15.1項「カスタム・マーカーの定義方法」を参照)
領域の分離(第8.5.15.2項「分離領域の定義方法」を参照)
初期ズーム(第8.5.15.3項「初期ズームの有効化」を参照)
カスタム・ベース・マップ(第8.5.15.4項「カスタム・ベース・マップの定義方法」を参照)
例8-79は、ADFモバイルAMXファイルで定義されているthematicMap要素およびその子を示しています。
例8-79 テーマ・マップの定義
<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}"
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 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 position="end">
<dvtm:legendSection source="ag1"/>
</dvtm:legend>
</dvtm:thematicMap>
thematicMap要素の属性およびその子要素の詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
ADFモバイルAMXテーマ・マップでは、ADFモバイルAMXイメージ・コンポーネントはサポートされていません。マップのpointLocation内でイメージを使用するには、pointLocationのmarker子要素で、そのsource属性を使用してイメージを指定します。source属性がマーカーに対して設定されている場合、そのshape属性はADFモバイルAMXによって無視されます。
sourceHover、sourceSelectedおよびsourceHoverSelected属性で、ホバーおよび選択効果のイメージを指定できます。これらの1つが指定されていない場合、その特定のマーカー状態に対してはsource属性によって指定されているイメージが使用されます。sourceSelectedが指定されている場合、sourceHoverSelectedが指定されていないときはその値が使用されます。イメージは、PNG、JPG、SVGなどモバイル・デバイスのブラウザでサポートされている任意のフォーマットで構いません。
ADFモバイルAMXテーマ・マップ・コンポーネントを構成し、areaDataLayerのisolatedRowKey属性を使用してマップの単一の分離領域に収まるようにレンダリングおよびズームできます。この場合、その領域または領域データ・レイヤーの残りの領域はレンダリングされません。
|
注意: 分離できるのは、1つのマップで1つの領域のみです。 |
初期ズームでは、マップ・コンポーネントを通常どおりレンダリングし、その後、マーカーと領域の両方を含むデータ・オブジェクトにズームして合せることができます。この機能を有効にするには、テーマ・マップのinitialZooming属性を使用します。
カスタム・ベース・マップ・サポートの一部として、ADFモバイルAMXでは、テーマ・マップ・コンポーネントに対して次のものを指定できます。
様々な解像度のイメージを持つレイヤー。
点の位置(pointLocation)から参照できる名前付きの点を持つ点レイヤー。
カスタム・ベース・マップ・メタデータXMLファイルを指すテーマ・マップのsource属性。
|
注意: ADFモバイルAMXでは、カスタム・ベース・マップのリソース・バンドルはサポートされていません。ロケール固有のツール・チップを追加する場合は、マーカー( |
カスタム・ベース・マップを作成するには、メタデータ・ファイルの定義を指す領域レイヤーを指定します(例8-80を参照)。基本的なカスタム・ベース・マップを定義するには、背景レイヤーおよびポインタ・データ・レイヤーを指定します。ADFモバイルAMXゲージ・コンポーネントと同様に、メタデータ・ファイルで、画面解像度および双方向画面(BiDi)ごとに異なるイメージを指定できます。ゲージタイプ・コンポーネントと同様に、テーマ・マップでは、画面解像度およびロケールに基づいてレイヤーに適切なイメージが選択されます。
例8-80 イメージのリストを含むメタデータ・ファイル
<basemap id="car" >
<layer id="exterior" >
<image source="/maps/car-800x800.png"
width="2560"
height="1920" />
<image source="/maps/car-800x800-bidi.png"
width="2560"
height="1920"
bidi="true" />
<image source="/maps/car-200x200.png"
width="640"
height="480" />
<image source="/maps/car-200x200-bidi.png"
width="640"
height="480"
bidi="true" />
</layer>
</basemap>
例8-81は、点によってカスタム領域レイヤーを宣言するADFモバイルAMXファイルを示しています。このADFモバイルAMXファイルは、使用可能なイメージのリストを含む例8-80に示すメタデータ・ファイルを指しています。
例8-81 点によるカスタム領域レイヤーの宣言
<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座標で定義され、データが更新されたときに変更される可能性がある動的な点に対応します。
例8-82は、点によってカスタム領域レイヤーを宣言するもう1つの方法を示しています。この例では、pointDataLayerは、thematicMapの直接の子です。方法は異なりますが、例8-82では、例8-81で示した宣言と同じ結果がレンダリングされます。
例8-82 直接の子要素を使用した点によるカスタム領域レイヤーの宣言
<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>
静的な点を含むカスタム・ベース・マップを作成するには、例8-83に示すメタデータ・ファイルで名前で点を指定します。このプロセスは、事前定義済ベース・マップに市区町村のマーカーを追加する場合に類似しています。
例8-83 名前付きの点のリストを含むメタデータ・ファイル
<basemap id="car" >
<layer id="exterior" >
<image source="/maps/car-800x800.png"
width="2560"
height="1920" />
<image source="/maps/car-800x800-bidi.png"
width="2560"
height="1920"
bidi="true" />
<image source="/maps/car-200x200.png"
width="640"
height="480" />
<image source="/maps/car-200x200-bidi.png"
width="640"
height="480"
bidi="true" />
</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>
例8-84は、名前付きの点によってカスタム領域レイヤーを宣言するADFモバイルAMXファイルを示しています。このADFモバイルAMXファイルは、点とそれらの名前のリストを含む例8-80に示すメタデータ・ファイルを指しています。
例8-84 名前付きの点によるカスタム領域レイヤーの宣言
<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>
デフォルトCSS設定を上書きするか、カスタムJavaScriptファイルを使用することで、テーマ・マップ・コンポーネントをスタイル設定できます。これらのファイルの拡張方法の詳細は、第8.6.3項「データ視覚化コンポーネントのスタイル設定方法」を参照してください。
例8-85は、テーマ・マップ・コンポーネントのデフォルトCSSスタイルを示しています。
例8-85 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;
}
スタイル設定のいくつかは、CSSを使用して指定できません。それらは、かわりにカスタムJavaScriptファイルを使用して定義する必要があります。例8-86は、CSSを使用しないでテーマ・マップ・コンポーネントにカスタム・スタイルを適用する方法を示しています。
例8-86 非CSSカスタム・スタイル設定
my-custom.js:
CustomThematicMapStyle = {
// selected area properties
'areaSelected': {
// selected area border color
'borderColor': "#000000",
// selected area border width
'borderWidth': '1.5px'
},
// area properties on mouse hover
'areaHover': {
// area border color on hover
'borderColor': "#FFFFFF",
// area border width on hover
'borderWidth': '2.0px'
},
// marker properties
'marker': {
// separator upper color
'scaleX': 1.0,
// separator lower color
'scaleY': 1.0,
// should display title separator
'type': 'circle'
},
// thematic map legend properties
'legend': {
// legend position, such as none, auto, start, end, top, bottom
'position': "auto"
}
};
})();
CustomThematicMapStyleオブジェクトの名前およびプロパティ名は変更できません。かわりに、特定のプロパティ値を、アプリケーションのニーズに合わせて変更できます。カスタムCSSおよびJavaScriptファイルをアプリケーションに追加する方法の詳細は、第5.9章「アプリケーション機能のコンテンツ・タイプの定義」を参照してください。
「データ・コントロール」パネルから挿入されたデータ・コレクションを使用してデータバインドされたチャート、ゲージまたはマップを宣言で作成できます(第7章「ADFモバイルAMXページの作成」を参照)。図8-69に示す「コンポーネント・ギャラリ」ダイアログで、いくつかのデータ視覚化コンポーネント・カテゴリ、タイプおよびレイアウトのオプションの中から選択できます。
|
注意: いくつかのデータ視覚化コンポーネント・タイプには、特別な種類のデータが必要です。選択したコンポーネントのタイプの表示に十分なデータが含まれていないデータ・コレクションにコンポーネントをバインドすると、コンポーネントは表示されず、データが不十分であることを示すメッセージが表示されます。 |
「コンポーネント・ギャラリ」の表示をトリガーするには、「データ・コントロール」パネルから「ADFモバイルAMX」ページにコレクションをドラッグ・アンド・ドロップし、「ADFモバイル・チャート」、「ADFモバイル・ゲージ」、「ADFモバイル地理マップ」または「ADFモバイル・テーマ・マップ」のいずれかを選択します。(図8-67を参照)。
「コンポーネント・ギャラリ」から新しいデータバインド・コンポーネントのカテゴリ、タイプおよびレイアウトを選択し、「OK」をクリックすると、データ・バインディング・ダイアログを使用してDVTコンポーネントのデータ・コレクション属性のバインディングを開始できます。ダイアログの名前と、入力フィールド・ラベルは、選択したDVTコンポーネントのカテゴリおよびタイプによって異なります。図8-68に示すように、たとえば、カテゴリとして「横棒」を、タイプとして「棒」を選択した場合、表示されるダイアログの名前は「モバイル横棒チャートの作成」で、入力フィールドには「棒」というラベルがつけられます。
データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さなどのマーカーまたは散布図のポイントで示される数字です。データ値のカテゴリは、軸ラベルとして表されるメンバーです。バインディング内で属性が担うロール(データ値またはID)は、データ型(グラフには数値データ値が必要)およびマップされる場所(棒やX軸など)の両方によって決まります。
データ・バインディング・ダイアログの完了後は、プロパティ・インスペクタを使用してコンポーネント属性の設定を指定できます。コンポーネントと関連付けられた子要素を使用して、さらにカスタマイズすることもできます(第8.5.13項「チャートおよびゲージ・コンポーネントの子要素の定義方法」を参照)。
詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の次の項を参照してください。
データバインドされたグラフの作成に関する項
"データバインドされたゲージの作成に関する項
データバインドされた地理マップおよびテーマ・マップに関する章
ADFモバイルでは、CSSを使用してUIコンポーネントにスタイルを適用できます。
次の属性を設定することで、UIコンポーネントをスタイル設定できます。
styleClass属性は、レイアウト・コンポーネントに対して使用するCSSスタイル・クラスを定義します。
<amx:panelPage styleClass="#{pageFlowScope.pStyleClass}">
「ADFモバイルAMX」ページまたはスキニングCSSファイルでレイアウト、コマンドおよび入力コンポーネントのスタイル・クラスを定義できます。その場合、特定のスタイルがADFモバイルAMXアプリケーション機能内のすべてのコンポーネントに適用されます(第8.6.2項「スキニングについて」を参照)。かわりに、ADFモバイルによって提供されるパブリック・スタイル・クラスを使用できます。
|
注意: CSSファイルは、JDeveloperからアクセスできません。かわりに、ADFモバイルによって、ビルドまたはデプロイ時に、このファイルがパッケージに注入され、そのときにCSSファイルが |
inlineStyle属性は、任意のUIコンポーネントに使用するCSSスタイルを定義し、コンポーネントのルートDOM要素に適用される一連のCSSスタイルを表します。
<amx:outputText inlineStyle="color:red;">
この属性は、基本スタイルの変更が必要な場合に使用してください。
|
注意: いくつかのUIコンポーネントは、HTML JavaScriptのデバッグ方法の詳細は、第18.3.4項「JavaコードおよびJavaScriptのデバッグを有効にする方法」を参照してください。 |
図8-69に示すように、これらの属性は、「プロパティ・インスペクタ」の「スタイル」セクションに表示されます。
ADFモバイルAMXでは、inlineStyle属性の様々なプロパティを設定するために使用できるドロップダウン・エディタが提供されています(図8-70を参照)。
詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
スキニングによって、ADFモバイルAMXアプリケーション機能内のUIコンポーネントに均一なスタイルを定義および適用し、機能全体に対するテーマを作成できます。詳細は、第5.11項「ADFモバイル・アプリケーションのスキニング」を参照してください。
ADFモバイルAMXデータ視覚化コンポーネントのスタイル・プロパティの大部分は、cssディレクトリにあるdvtm.cssファイルで定義されます。アプリケーション機能レベルでのカスタム・スタイル定義を持つカスタムCSSファイルを追加することでデフォルト値を上書きできます(第5.11.4章「デフォルト・スキン・スタイルのオーバーライド」を参照)。
スタイル・プロパティのいくつかは、CSSにマップできないため、カスタムJavaScriptファイルで定義する必要があります。それらのプロパティは、次のとおりです。
ダイヤル・ゲージ・コンポーネントの背景および針のイメージ(第8.5.12章「ダイアル・ゲージの作成方法」を参照)。
テーマ・マップ・コンポーネントのベース・マップ(第8.5.15.4項「カスタム・ベース・マップの定義方法」を参照)。
地理マップ・コンポーネントのスタイル・プロパティ(第8.5.14項「地理マップ・コンポーネントの作成方法」を参照)。
「包含」セクションでこれらのカスタムJavaScriptファイルをアプリケーション機能レベルで指定する必要があります(第5.9.1章「アプリケーション・コンテンツの定義方法」を参照)。それによって、XMLスタイル・テンプレートで定義したデフォルト・スタイル値をオーバーライドします。例8-87は、CSSを使用してスタイル設定できないプロパティのカスタム・スタイル設定を必要とするデータ視覚化コンポーネントを持つADFモバイルAMXアプリケーション機能を含むADFモバイル・プロジェクトに追加する場合のようなJavaScriptファイルを示しています。
例8-87 カスタム・スタイル・プロパティの定義
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 (appllicable to line chart)
'lineWidth': 3,
// default line style (appllicable to line chart)
// solid / dotted / dashed
'lineStyle': "solid",
// should markers be displayed (appllicable to line and area charts)
'markerDisplayed': false,
// default marker color
'markerColor': null,
// default marker shape
'markerShape': "auto",
// default marker size
'markerSize': 8,
// pie feeler color (appllicable to pie chart only)
'pieFeelerColor': "#BAC5D6",
// slice label position and text type (appllicable to pie chart only)
'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"
};
...
}
JavaScriptファイルを定義した後、任意の値をコメント解除および変更できます。例8-88が示すように、adfmf-feature.xmlファイルに含める機能としてこのファイルを追加します。
例8-88 アプリケーション機能でのカスタム・スタイル・ファイルのインクルード
<?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>
「ADFモバイルAMX」ページで、JDeveloperによって提供される標準リソース・バンドルを使用することで、UIコンポーネントによって表示されるテキストをローカライズできます。これを行うには、コンポーネントおよびローカライズする値を持つテキスト表示プロパティの1つを選択し、「プロパティ・インスペクタ」の「値」ボックスの「テキスト・リソースの選択」を選択します(図8-71を参照)。
これによって図8-72に示す標準ADF 「テキスト・リソースの選択」ダイアログが表示されます。このダイアログを使用して、変更するプロパティの文字列参照を入力または検索します。
ローカライズ済文字列リソースを定義すると、その参照のELが「テキスト・リソースの選択」ダイアログの起動元のプロパティに自動的に入力されます。
図8-73は、ADFモバイルAMXファイルでの変更示しています。
詳細は、5.10項「リソース・バンドルの使用」を参照してください。
ADFモバイル・アプリケーションを開発する際は、アクセシビリティの問題に対処することで視覚的および身体的に障害があるユーザーに対応する必要があります。非視覚的なメディアへのレンダリングを行うWebブラウザなどのユーザー・エージェント(スクリーン・リーダーなど)により、UIコンポーネントのテキスト説明が読み上げられ、障害を持つユーザーに有益な情報が提供されます。ADFモバイル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)。
詳細は、第8.8.3項「Oracle Global HTML Accessibility Guidelinesについて」を参照してください。
iOSのアクセシビリティ・ガイドライン。
詳細は、『Accessibility Programming Guide for iOS』(http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html)を参照してください。
そのようなコンポーネントの導入によって、アクセス可能なコンポーネントの外観の変更されたり、アプリケーション・ロジックが影響受けることがありません。
ADFモバイルAMXアプリケーション機能のアクセシビリティが適切に機能するようにするには、次のガイドラインに従ってください。
ナビゲーションの深さは3レベル以内にして、ユーザーが簡単にホーム画面に戻れるようにする必要があります。
スクリプトを最小限に維持します。
DOMとの直接対話を提供しないでください。
JavaScriptのタイムアウトは使用しないでください。
フォーカスの不要な変更は回避します。
ポップアップ・トリガーを明示的に指定すること
必要に応じて、WAI-ARIAライブ・リージョンを利用します(第8.8.2項「基本的なWAI-ARIA用語について」を参照)。
CSSの使用を最小限に維持します。
デフォルト・コンポーネントの外観をオーバーライドしないようにしてください。
拡大縮小が可能なサイズ単位を選択します。
CSSの位置設定は使用しないでください。
詳細は、『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)を参照してください。
ADFモバイルAMX UIコンポーネントには、組込みのアクセシビリティ・サポートが備えられており、ほとんどのコンポーネントがアクセシビリティ監査の対象となっています(図8-75を参照)。
表8-8は、「プロパティ・インスペクタ」の「アクセシビリティ」セクションで設定できるUIコンポーネントとそれらの属性を示しています。
表8-8 構成可能なアクセシビリティ属性を持つUIコンポーネント
| コンポーネント | アクセシビリティ属性 | アクセシビリティ監査メッセージ |
|---|---|---|
|
ボタン( |
短い説明( |
|
|
選択ボタン( |
短い説明( |
|
|
リンク( |
短い説明( |
|
|
リンク(実行) ( |
短い説明( |
|
|
カルーセル( |
短い説明( |
|
|
カルーセル・アイテム( |
短い説明( |
|
|
リスト・アイテム( |
短い説明( |
|
|
ポップアップ( |
短い説明( |
|
|
イメージ( |
短い説明( |
|
|
入力テキスト( |
ヒント・テキスト( |
|
|
パネル・グループ・レイアウト( |
ランドマーク( |
NA 脚注 1 |
脚注 1 ランドマーク属性にはデフォルト値(none)があり、アクセシビリティ監査の対象ではありません。
shortDesc属性は、コンポーネントごとに異なる目的で使用します。たとえば、イメージ・コンポーネントにshortDesc属性を設定すると、ADFモバイルAMXファイルでそれはimage要素のalt属性の値として表示されます。
shortDesc属性の値はローカライズできます。
パネル・グループ・レイアウト・コンポーネントの場合、ページのコンテキストに従って適用可能なランドマーク・ロール・タイプ(表8-13「ランドマーク・ロール」を参照)を定義します。landmark属性に次の値の1つを設定できます。
デフォルト(なし)
application
banner
complementary
contentinfo
form
main
navigation
search
表8-9は、WAI-ARIA仕様によって定義されるそのアクセシビリティ属性が実行時に自動的に適用され、変更できないUIコンポーネントを示しています。
表8-9 静的アクセシビリティ属性を持つUIコンポーネント
| コンポーネント | アクセシビリティ属性 | アクセシビリティ監査メッセージ |
|---|---|---|
|
入力日( |
ラベル( |
|
|
入力数値スライダ( |
ラベル( |
|
|
パネル・ラベルおよびメッセージ( |
ラベル( |
|
|
アイテムの選択( |
ラベル( |
|
|
チェックボックス( |
ラベル( |
|
|
ブール・スイッチ( |
ラベル( |
|
|
ラジオ・ボタン( |
ラベル( |
|
|
チェックボックスを複数選択( |
ラベル( |
|
|
選択肢( |
ラベル( |
|
|
出力テキスト( |
値( |
NA 脚注 1 |
脚注 1 値属性はアクセシビリティ監査の対象外です。
JDeveloperの「プリファレンス」ダイアログを使用して次のようにアクセシビリティ監査ルールを構成できます。
JDeveloperでメイン・メニューから「ツール」→「プリファレンス」を選択します。
プリファレンスのリストから、「監査」→「プロファイル」を選択します。
監査: プロファイルペインで、ルールのツリーから「Application Development Framework (ADF)」ノードを開き、「ADFモバイル・フレームワーク」→「アクセシビリティ」を選択します。
図8-74に示すように、アクセシビリティ監査ルールを選択し、アプリケーションに適用します。
図8-75は、JDeveloperに表示されるアクセシビリティ監査警告を示しています。
アクセス可能なADFモバイルAMXアプリケーション機能をテストする方法の詳細は、第18.2.1項「iOSデバイス上でアクセシビリティのテストを実行する方法」を参照してください。
WAI-ARIA 1.0仕様に述べられているように、複雑なWebアプリケーションは、支援テクノロジがドキュメントの部分の背後にあるセマンティクスを判別できない場合や、ユーザーが、使用可能な方法で実際にそのすべての部分を移動できない場合に、アクセス不可能になります。WAI-ARIAでは、セマンティクスがロール(ユーザー・インタフェース要素を定義するタイプ)と、ロールによってサポートされている状態およびプロパティに分割されています。次のセマンティクス・アソシエーションによって、WAI-ARIA用語の基礎が形成されています。
ロール
ランドマーク
ライブ・リージョン
詳細は、http://www.w3.org/TR/wai-aria/termsを参照してください。
次の表は、ADFモバイルに適用可能なロールのカテゴリ(WAI-ARIA 1.0仕様での定義)を示しています。
表8-10は、全般的なロール概念を定義する目的でWAI-ARIAのロールの分類をサポートするために使用される抽象ロールを示しています。
表8-10 抽象ロール
| 抽象ロール | 説明 |
|---|---|
|
input |
ユーザー入力を可能にする一般的なタイプのウィジェット。 |
|
landmark |
ナビゲーショナル・ランドマークを意図したページのリージョン。 |
|
select |
ユーザーが一連の選択肢から選択を行えるフォーム・ウィジェット。 |
|
widget |
グラフィカル・ユーザー・インタフェースのインタラクティブ・コンポーネント。 |
表8-11は、スタンドアロン・ユーザー・インタフェース・ウィジェットまたは大きい複合ウィジェットの一部として機能するウィジェット・ロールを示しています。
表8-11 ウィジェット・ロール
| ウィジェット・ロール | 説明 | ウィジェットで必要とされる状態 |
|---|---|---|
|
alertdialog |
アラート・メッセージを含むダイアログのタイプ。最初のフォーカスはそのダイアログ内の要素に移動します。 |
aria-labelledby、aria-describedby |
|
ボタン |
クリックまたは押されたときにユーザーによってトリガーされるアクションを可能にする入力。 |
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 (ステート) |
表8-12は、ページ内のコンテンツを編成する構造を記述するドキュメント構造ロールを示しています。通常、ドキュメント構造はインタラクティブではありません。
表8-12 ドキュメント構造ロール
| ドキュメント構造ロール | 説明 |
|---|---|
|
img |
イメージを形成する要素のコレクションのコンテナ。 |
|
list |
非インタラクティブ・リスト・アイテムのグループ。 |
|
listitem |
リストまたはディレクトリ内の単一アイテム。 |
表8-13は、ナビゲーショナル・ランドマークを意図したページのリージョンを表すランドマーク・ロールを示しています。
表8-13 ランドマーク・ロール
| ランドマーク・ロール | 説明 |
|---|---|
|
application |
Webアプリケーション(Webドキュメントではなく)として宣言されるリージョン. |
|
banner |
ほとんどサイト指向のコンテンツ(ページ固有のコンテンツではなく)を含むリージョン。 |
|
complementary |
DOM階層の類似したレベルにあるメイン・コンテンツを補足するように設計ているが、メイン・コンテンツから切り離しても意味を持つドキュメントのサポート・セクション。 |
|
contentinfo |
親ドキュメントに関する情報が含まれている大きな認識可能なリージョン。 |
|
form |
全体として結合されてフォームを作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。 |
|
main |
ドキュメントのメイン・コンテンツ。 |
|
navigation |
ドキュメントまたは関連ドキュメントをナビゲートするためのナビゲーショナル要素(通常はリンク)のコレクション。 |
|
search |
全体として結合されて検索機能を作成するアイテムおよびオブジェクトのコレクションが含まれているリージョン。 |
ADFモバイルUIコンポーネントの大部分では、アクセス可能なWAI-ARIA属性は変更できません。いくつかのコンポーネントでは、設計時に特別なアクセス可能な属性を設定できます。また、パネル・グループ・レイアウトには、WAI-ARIAランドマーク・ロール・タイプを使用できます。詳細は、第8.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のアクセシビリティについての考え方とポリシーを参照してください。
ADFモバイルでは、データ入力エラーおよびデータ入力中に発生するその他の状態に関してエンド・ユーザーに通知できます。それらのタイプ(エラーまたは警告)に応じて、検証メッセージのルック・アンド・フィールが異なります。
ユーザー入力の検証は、入力が送信されたときにトリガーされます。入力テキスト・コンポーネントは、エンド・ユーザーがフィールドから離れたときに自動的に検証されます。チェックボックスや選択肢などの選択コンポーネントの場合は、エンド・ユーザー選択を行ったときに検証が行われます。検証のために、「ADFモバイル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>
|
「ADFモバイルAMX」ページに検証エラーメッセージが含まれている場合、エンド・ユーザーは、リスト・アイテム、リスト、ボタンなどのコマンド・コンポーネントでimmediate属性がtrueに設定されていないかぎり、それらのコンポーネントを使用してそのページから離れることはできません。警告を含むメッセージでは、ナビゲーションが停止されることはありません。
例8-89は、ADFモバイルAMXファイルでの複数の検証グループおよび検証動作操作など検証要素の定義方法を示しています。
例8-89 入力の検証の定義
<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 disabled="#{pageFlowScope.myPanel ne 'panel1'}"
group="group1"/>
<amx:validationBehavior 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 disabled="false" group="groupxxx"/>
<!-- group is not found at run time, this validate is ignored -->
<amx:validationBehavior disabled="false" group="group3"/>
</amx:commandButton>
</amx:facet>
<amx:panelSplitter selectedItem="#{pageFlowScope.myPanel}">
<amx:panel id="panel1">
<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:panel>
<amx:panel id="panel2">
<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:panel>
</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>
例8-90は、ADFモバイルAMXファイルでのポップアップに表示される検証メッセージの定義方法を示しています。
例8-90 ポップアップ・メッセージを含む入力の検証の定義
<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 group="group1"/>
</amx:commandButton>
</amx:panelGroupLayout>
</amx:panelPage>
検証メッセージはポップアップ・コンポーネントに表示されます(第8.2.8項「ポップアップ・コンポーネントの使用方法」を参照)。検証ポップアップのタイトルを構成することはできません。それは、相対的なメッセージ重大度によって自動的に決定されます。現在のメッセージのうちの最も重大なものが検証ポップアップのタイトルになります。つまり、すべての検証メッセージがWARNINGタイプである場合は、そのタイトルは「警告」になります。メッセージのいくつかがWARNINGタイプで、その他はERRORタイプの場合はタイトルは「エラー」に設定されます。
図8-76は、実行時に生成されるポップアップ検証メッセージを示しています。
「ADFモバイルAMX」ページからJavaコードを呼び出し、アプリケーション・ロジックを実行するには、次のいずれかの方法でUIコンポーネントの属性としてリスナーを定義します。
ADFモバイルAMXファイルのソースでの手動による方法。
選択したコンポーネントの「プロパティ」エディタから行う方法。詳細は、Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンスを参照してください。
次のリスナーを使用して、「ADFモバイル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をリスニングします。
古い開始範囲を表すint
古い終了範囲を表すint
新しい開始範囲を表すint
新しい終了範囲を表すint
リスナーの値は、パターン#{*}に一致している必要があり、次の要件を満たしている必要があります。
タイプ名: EL式
ベース・タイプ: 文字列
プリミティブ・タイプ: 文字列
ELイベントの詳細は、第9.2.3項「ELイベント」を参照してください。
大部分のADFモバイルAMXイベント・クラスは、oracle.adfmf.amx.event.AMXEventクラスの拡張です。Javaコードでイベント・リスナーを定義するときは、oracle.adfmf.amx.event.AMXEventクラスを渡す必要があります。
詳細は、次の項を参照してください。
Oracle Fusion Middleware Oracle ADFモバイルJava APIリファレンス
Oracle Fusion Middleware Oracle ADFモバイルのタグ・リファレンス
ADFモバイルでは、マネージドBeanメソッドがADFモバイルAMX固有のイベント・クラスを使用するように、リスナーに対してマネージドBeanメソッドを作成できます。例8-91、例8-92および例8-93は、同じマネージドBeanメソッドをコールするボタンおよびリンク・コンポーネントを示しています。AMXEventのソース値は、コンポーネントのIDを含むメッセージ・ボックスを表示することでどのオブジェクトがイベントを起動したのかを判別します。
例8-91 ADFモバイル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>
例8-92 AMXEventの使用方法
private void actionListenerMethod(AMXEvent amxEvent) {
Component source = (Component) amxEvent.getSource();
MessageBox.show("actionListener called for " + source.getId());
}
例8-93 イベント・メソッドの呼出し
public Object invokeMethod(String methodName, Object[] params) {
if (methodName.equals("actionListenerMethod")) {
actionListenerMethod((AMXEvent) params[0]);
}
return null;
}
追加の例は、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.adf.mobile/Samplesディレクトリ内のPublicSamples.zipファイルに配置されているJavaDemoというADFモバイル・サンプル・アプリケーションを参照してください。このサンプルは、Java Beanからリスナーをコールする方法を示しています。
イベント・リスナーは、いくつかのADFモバイルAMX UIコンポーネントの子として定義できます。リスナーのtype属性によって、それらがどのイベントを処理するために登録されるのかが識別されます。各親UIコンポーネントでは(親コンポーネントに適した)イベントのサブセットのみがサポートされているため、これらのサポートされているイベントは、リスナーに対して選択できる限られたタイプのリストに提示されます。
表8-14は、親UIコンポーネント、それが子として持つことができるイベント・リスナー、およびそれらがサポートしているイベント・タイプを示しています。
表8-14 サポートされているイベント・リスナーとイベント・タイプ
| UIコンポーネント(親) | アクション・リスナー(子) | プロパティ・リスナーの設定(子) | ポップアップ表示動作(子) | ポップアップを閉じる動作(子) | actionListener属性 | valueChangeListener属性 | moveListener属性 | selectionListener属性 |
|---|---|---|---|---|---|---|---|---|
|
ボタン |
サポート |
サポート |
サポート |
サポート |
サポート |
未サポート |
未サポート |
未サポート |
|
リンク |
サポート |
サポート |
サポート |
サポート |
サポート |
未サポート |
未サポート |
未サポート |
|
リスト・アイテム |
サポート |
サポート |
サポート |
サポート |
サポート |
未サポート |
未サポート |
未サポート |
|
入力日 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
入力数値スライダ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
入力テキスト |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
リスト・ビュー |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
|
チェックボックス |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
スイッチ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
チェックボックス(複数選択) |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
選択肢(複数選択) |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
選択肢 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
選択ボタン |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
ラジオ・ボタン |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
リンク(実行) |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
カルーセル |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
カルーセル・アイテム |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
イメージ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
面グラフ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
|
棒グラフ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
|
バブル・チャート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
|
組合せグラフ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
|
横棒グラフ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
|
LEDゲージ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
ダイヤル・ゲージ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
折れ線グラフ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
|
円グラフ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
|
散布図 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
|
スパーク・チャート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
|
ステータス・メーター・ゲージ |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート |
未サポート |
未サポート |
|
地理マップ |
未サポート |
サポート済脚注 1 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート済脚注 2 |
|
テーマ・マップ |
未サポート |
サポート済脚注 3 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |
サポート済脚注 4 |
脚注 1 プロパティ・リスナーの設定は、地理マップの領域のマーカーの子として指定できます。
脚注 2 selectionListener属性は、地理マップの面データ・レイヤーまたは点データ・レイヤーに設定できます。
脚注 3 プロパティ・リスナーの設定は、テーマ・マップの領域のマーカーの子として指定できます。
脚注 4 selectionListener属性は、テーマ・マップの面データ・レイヤーまたは点データ・レイヤーに設定できます。
子イベント・リスナーそれぞれのtype属性(図8-77を参照)には、リスナー・イベントと一致する値の基本セットがあります。これらの値は表8-14に示す情報に基づいてフィルタ処理され、それによって、子イベント・リスナーが、識別された親UIコンポーネントのコンテキスト内にある場合に、その親によってサポートされているイベントのみが表示されるようになります。たとえば、ボタン・コンポーネントの下にあるアクション・リスナーまたはプロパティ・リスナーの設定の子では、actionタイプの値およびジェスチャーのみか表示されます。
図8-77は、親リスト・アイテム・コンポーネントのプロパティ・リスナーの設定のかぎられたタイプ・リストにおいて使用可能な値を示しています。
