Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-11 |
|
前 |
次 |
この章では、値リスト・コンポーネントを使用して、ユーザーが値を選択できるオブジェクトのモデルドリブン・リストを表示する方法を説明します。
この章では、次の項目について説明します。
ADF Facesには、各リスト項目の複数の属性を表示でき、ユーザーがオプションで必要な項目を検索できる値リスト(LOV)入力コンポーネントが2つあります。このLOVコンポーネントは、あるオブジェクトの属性の移入に使用されるフィールドが、実際はデータベースの外部キー関係のように他のオブジェクトのリスト内に含まれる場合に有用です。たとえば、ユーザーが従業員情報を編集できるフォームがあるとします。ユーザーがまず編集する従業員レコードを探す必要のある別のページを用意するかわりに、図11-1に示すように、その検索および選択機能をフォームに組み込むことができます。
このフォームにおいて、従業員名フィールドは従業員のリストが含まれるLOVです。ユーザーがinputListOfValues
コンポーネントの検索アイコンをクリックすると、図11-2に示すように、「検索および選択」ダイアログに、ユーザーが従業員を検索できる検索フィールドとともにすべての従業員が表示されます。
ユーザーがページに戻ると、図11-3に示すように、その従業員の現在の情報がフォームに表示されます。ユーザーは、データを編集して保存できます。
selectOneChoice
など、その他のリスト・コンポーネントでも、ユーザーはリストから選択できますが、ポップアップ・ダイアログは含まれず、小規模なリストを対象としています。この章で説明するのは、inputListOfValues
およびinputComboboxListOfValues
LOVコンポーネントのみです。選択コンポーネント、リスト・ボックス・コンポーネントおよびラジオ・ボタンの詳細は、第9章「入力コンポーネントの使用およびフォームの定義」を参照してください。
前の図に示したように、inputListOfValues
コンポーネントはユーザーが項目を検索および選択できるポップアップ・ダイアログを表示します。リストは表に表示されます。対照的に、inputComboboxListOfValues
コンポーネントでは、ユーザーは、単純なドロップダウン・リストから選択するか、inputListOfValues
コンポーネントの場合のように検索するという2つの異なる方法で項目を選択できます。
searchContent
ファセットを使用して、「検索および選択」ダイアログにレンダリングするカスタム・コンテンツを作成することもできます。returnPopupDataValue
属性を定義し、ユーザーが「検索および選択」ダイアログから項目を選択してダイアログを閉じたときにプログラムでこの属性に値を設定します。この値は、ReturnPopupEventからreturnPopupListener
の戻り値になります。returnPopupListener
を実装すると、LOVコンポーネント、その依存コンポーネントの値の設定、カスタム・コンテンツの表示などの関数を実行できます。searchContent
ファセットでは、表、ツリー、inputTextなどのコンポーネントを追加して、カスタム・コンテンツを表示できます。
searchContent
ファセットとListOfValues
モデルの両方を実装する場合、searchContent
ファセットの実装は「検索および選択」ダイアログのレンダリングよりも優先されます。例11-1に、表コンポーネントを使用してカスタム・コンテンツを表示するためのコードを示します。
例11-1 「検索および選択」ダイアログへのカスタム・コンテンツの追加
<af:inputListOfValues model="#{bean.listOfValuesModel}" ... returnPopupDataValue="#{bean.returnPopupDataValue}" returnPopupListener="#{bean.returnPopupListener}"> <f:facet name="searchContent"> <af:table id="t1" value="#{bean.listModel}" var="row" selectionListener="#{bean.selected}" ... </f:facet> </af:inputListOfValues>
readOnly
属性がtrue
に設定されている場合、入力フィールドは無効になります。readOnly
がfalse
に設定されている場合、editMode
属性は許可される入力のタイプを決定します。editMode
がselect
に設定されている場合、値はリストから選択することでのみ入力できます。editMode
がinput
に設定されている場合、値は入力することもできます。
ユーザーが部分的な値を入力したときに提案される項目のリストを自動的に表示するようにLOVコンポーネントを実装することもできます。たとえば、ユーザーがCa
と入力した場合、図11-4に示すように、Ca
に部分的に一致する提案リストが提案される項目リストとして表示されます。
図11-5に示すように、ユーザーは、このリストから項目を選択して入力フィールドに入力できます。
af:autoSuggestBehavior
タグをLOVコンポーネント内部に追加し、タグのsuggestItems
値を、リストを取得して表示するメソッドに設定して、自動提案動作を追加します。このメソッドはマネージドBeanに作成できます。ADFモデルを使用している場合、メソッドはデフォルトで実装されます。
LOVモデル実装で、リストをさらにフィルタ処理するスマート・リストを実装できます。両方のLOVコンポーネントのスマート・リストを実装できます。ADFモデルを使用している場合、inputComboboxListOfValues
では、そのLOVの表示基準として定義されたスマート・リスト・フィルタを宣言的に選択できます。スマート・リストが実装されており、自動提案動作も使用されている場合、自動提案ではスマート・リストから最初に検索されます。ユーザーが何もせずに2秒待機すると、自動提案は完全なリストからも検索して結果を追加します。maxSuggestedItems
属性は、返す項目の数を指定します(-1は完全なリストを示します)。maxSuggestedItems > 0
の場合は、ユーザーがクリックしてLOVの「検索および選択」ダイアログを起動できる「次へ」リンクがレンダリングされます。例11-2に、自動提案動作およびスマート・リストの両方を含むLOVコンポーネントのコードを示します。
例11-2 自動提案動作およびスマート・リスト
<af:autoSuggestBehavior suggestItems="#{bean.suggestItems}" smartList="#{bean.smartList}" maxSuggestedItems="7"/>
図11-6に、inputComboboxListOfValues
コンポーネントでリストを表示する方法を示します。ポップアップ・ダイアログに問合せパネルが含まれる場合は、ドロップダウン・リストの下部に「検索」リンクが表示されます。問合せパネルが使用されない場合は、「次へ」リンクが表示されます。
inputComboboxListOfValues
コンポーネントのドロップダウン・リストには、次の内容を表示できます。
完全なリスト: 図11-6に示したように、ListOfValuesModel.getItems()
メソッドにより項目の完全なリストが戻されます。
お気に入りリスト: ListOfValuesModel.getRecentItems()
メソッドにより、最近選択された項目のリストが戻されます。
検索リンク: ポップアップの「検索および選択」ダイアログが開かれるリンク。リンクは、ドロップダウン・リストのスクロール可能なリージョンにはありません。
customActions
ファセット: その他のコンテンツを追加するためのファセット。通常、1つ以上のcommandLink
コンポーネントが含まれます。ポップアップ・ダイアログの起動など、目的のアクションを実行するには、commandLink
にロジックを実装してください。
各行に表示される列数は、getItemDescriptors()
メソッドを使用してモデルから取得できます。デフォルトではすべての列が表示されます。
inputListOfValues
コンポーネントのポップアップ・ダイアログや、inputComboboxListOfValues
コンポーネントのオプションの検索ポップアップ・ダイアログにも、新規レコードを作成する機能があります。inputListOfValues
コンポーネントの場合、コンポーネントにcreatePopupId
属性が設定されていると、commandToolbarButton
を含むtoolbar
コンポーネントが作成アイコンとともに表示されます。図11-7に示すように、実行時に、LOVポップアップ・ダイアログにcommandToolbarButton
コンポーネントが表示されます。
ユーザーが「作成」ボタンをクリックすると、新規レコードの作成に使用できるポップアップ・ダイアログが表示されます。inputComboboxListOfValues
の場合は、ツールバーではなく、ダイアログ下部のcustomActions
ファセットに「作成」というラベルのcommandLink
が表示されます。このリンクにより、ユーザーが新規レコードを作成できるポップアップが起動されます。どちらの場合も、実際に新規レコードを作成するためのコードを入力する必要があります。
ヒント: 独自の作成機能を作成するかわりに、ADFビジネス・コンポーネントおよびADFデータ・バインディングを使用できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「入力表の作成」を参照してください。 |
問合せコンポーネント同様、LOVコンポーネントもデータ・モデルに依存して機能を提供しています。このデータ・モデルはListOfValuesModel
クラスです。このモデルでは、値リストの表示に表モデルが使用され、問合せモデルにアクセスしてリストの検索を実行することも可能です。LOVコンポーネントを使用するには、指定されたインタフェースをListOfValuesModel
に実装する必要があります。
ヒント: 独自の |
ユーザーがリストで項目を選択すると、データは選択された行のオブジェクト(ここでは各オブジェクトは選択した行のrowData
)のリストとして返されます。オブジェクトのリストは、選択された後でキューに入れられるReturnPopupEvent
イベントで入手できます。
QueryModel
クラスも実装する場合は、ユーザーが検索の実行やリストのフィルタ処理に使用できるQuery
コンポーネントがポップアップ・ダイアログに含まれます。LOVポップアップ・ダイアログでのQuery
コンポーネントの使用に関して、次の点に注意してください。
保存済検索機能はサポートされていません。
ポップアップ・ダイアログのQuery
コンポーネントとその機能は、対応するQueryDescriptor
クラスに基づいています。
LOVポップアップ・ダイアログに含めることのできるコンポーネントは、query
、toolbar
およびtable
のみです。
ユーザーが「検索」ボタンをクリックして検索を開始すると、ListOfValuesModel.performQuery()
メソッドが起動され、検索が実行されます。問合せモデルの詳細は、第12章「問合せコンポーネントの使用方法」を参照してください。
どちらのコンポーネントでも、オートコンプリート機能がサポートされているため、ユーザーが値の一部を入力フィールドに入力し、[Tab]を使用してフィールドから移動すると、条件の一部に一致する行がダイアログに移入されます。これを機能させるには、ユーザーが一部を入力した後に[Tab]を使用してフィールドから移動した場合に、入力した値がサーバーに戻されるロジックを実装する必要があります。サーバーでは、モデル実装により、部分的に入力された値を使用してリストがフィルタ処理され、値リストを取得する問合せが実行されます。ADF Facesには、この機能のためのAPIが用意されています。
LOVコンポーネントを使用するには、ADF FacesのAPIを使用してLOV機能にアクセスするデータ・モデルが必要です。図11-8に、ListOfValues
モデルのクラス図を示します。
ListOfValuesモデルおよび関連するイベントを作成する手順:
図11-8に示す各インタフェース・クラスの実装を作成します。表11-1にAPIを説明します。
表11-1 ListOfValuesモデルのAPI
メソッド | 機能 |
---|---|
|
コンポーネントで |
|
値が「検索および選択」ダイアログから選択されて、「OK」ボタンがクリックされた場合にコールされます。このメソッドにより、モデルは選択された値に基づいてモデルを更新できます。 |
|
オートコンプリートを有効化するかどうかを決定するためにブールが戻されます。 |
|
|
|
コンボボックス・ドロップダウンに表示する |
|
|
|
「検索および選択」ダイアログに作成される |
|
|
ListOfValues
モデルの例として、ADF FacesアプリケーションのApplication Sourcesディレクトリにある、oracle.adfdemo.view.lov
パッケージのDemoLOVBean
およびDemoComboboxLOVBean
クラスを参照してください。
inputListOfValues
コンポーネントの場合は、リストの移入に使用された属性にアクセスするマネージドBean (LOVモデルの作成に使用されたものと同じマネージドBeanでもかまいません)にロジックを指定します。inputComboboxListOfValues
コンポーネントでは、getItems()
およびgetRecentItems()
メソッドを使用してリストが戻されます。
InputListOfValues
コンポーネントに使用される「検索および選択」ダイアログの場合、またはInputComboboxListOfValues
コンポーネントに「検索および選択」ダイアログを使用する場合は、ListOfValuesModel.autoCompleteValue()
およびListOfValuesModel.valueSelected()
メソッドを実装します。これらのメソッドによりポップアップ・ダイアログが開かれ、コンポーネントに選択された値が適用されます。
inputListOfValues
コンポーネントでは、11.2項「ListOfValuesデータ・モデルの作成」に記載されているように、項目のリストにアクセスするために実装したListOfValues
モデルが使用されます。
始める前に:
ページまたはページ・フラグメントをすでに作成している必要があります。モデルに検索APIも実装すると、コンポーネントでは、ユーザーがリスト内の値を検索することもできるようになります。
inputListOfValuesコンポーネントを追加する手順:
コンポーネント・パレットの「共通」パネルから、ページに「入力値リスト」コンポーネントをドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
model: 11.2項「ListOfValuesデータ・モデルの作成」で作成した、ListOfValuesModel
実装に解決されるEL式を入力します。
value: 11.2項「ListOfValuesデータ・モデルの作成」で作成した、リストへの移入に使用された属性値に解決されるEL式を入力します。
「外観」セクションを開き、次の属性値を設定します。
popupTitle: 「検索および選択」ポップアップ・ダイアログのタイトルを指定します。
searchDesc: マウスが置かれた際にコンポーネントのヒントとして表示するテキストを入力します。
Placeholder: inputListOfValues
コンポーネントが空でフォーカスが設定されていない場合に、コンポーネントに表示されるテキストを指定します。コンポーネントにフォーカスが設定されるか、値が入力されると、プレースホルダ・テキストは非表示になります。
プレースホルダ・テキストは、ユーザーがinputListOfValues
コンポーネントに入力する必要のある内容を知らせる目的で使用されます。
このセクションの残りの属性は、その他の入力コンポーネントと同じ方法で移入できます。詳細は、9.3項「inputTextコンポーネントの使用方法」を参照してください。
「動作」セクションを開き、次の属性値を設定します。
autoSubmit: 該当するアクション(クリックやテキストの変更など)が実行された場合に、含まれているフォームがコンポーネントにより自動的に送信されるようにするにはtrue
に設定します。これにより、オートコンプリートが機能します。
createPopupId: リストに新規オブジェクトを作成するために使用されたポップアップ・ダイアログを実装した場合は、そのポップアップ・コンポーネントのIDを指定します。これにより、定義したポップアップ・ダイアログにバインドされたcommandToolbarButton
コンポーネントを含む表の上にtoolbar
コンポーネントが表示されます。ポップアップにダイアログを追加した場合は、表をリフレッシュするタイミングが自動的に決定されます。ポップアップにダイアログを追加しなかった場合、表は常にリフレッシュされます。
launchPopupListener: ポップアップの起動時に追加の機能を提供するために実装するlaunchPopupListener
に解決されるEL式を入力します。
returnPopupListener: 値が戻された場合に追加の機能を提供するために実装するreturnPopupListener
コンポーネントに解決されるEL式を入力します。
Usage: HTML5ブラウザでのinputListOfValues
コンポーネントのレンダリング方法を指定します。有効な値は、auto
、text
およびsearch
です。デフォルトはauto
です。
使用方法のタイプがsearch
の場合、inputListOfValues
コンポーネントはHTML5の検索入力タイプとしてレンダリングされます。一部のHTML5ブラウザでは、検索テキストの消去に使用できる「取消」アイコンが追加される場合があります。
このセクションの残りの属性は、その他の入力コンポーネントと同じ方法で移入できます。詳細は、9.3項「inputTextコンポーネントの使用方法」を参照してください。
ユーザーが新しい項目を作成できるようにする場合は、手順4で指定されたIDを使用してポップアップ・ダイアログを作成します。詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
コンポーネント・パレットで、「操作」パネルから「自動提案動作」をドラッグしてinputListOfValues
コンポーネントに子としてドロップします。
プロパティ・インスペクタで、自動提案属性ごとに次を入力します。
suggestItems
メソッドに解決されるEL式。
メソッドはsuggestItems
のList<javax.model.SelectItem>
を返す必要があります。メソッド・シグネチャは、List<javax.model.SelectItem> suggestItems(javax.faces.context.FacesContext, oracle.adf.view.rich.model.AutoSuggestUIHints)
の形式である必要があります。
smartList
メソッドに解決されるEL式。メソッドはスマート・リスト項目のList<javax.model.SelectItem>
を返す必要があります。
自動提案リストに表示する項目の数。完全なリストを表示するには-1を入力します。
このメソッドをマネージドBeanで実装している場合、JSFページ・エントリは例11-3に示す形式である必要があります。
例11-3 LOVのautoSuggestBehaviorタグ
<af:inputListOfValues value="#{bean.value}" id="inputId"> ... <af:autoSuggestBehavior suggestItems="#{bean.suggestItems}" smartList="#{bean.smartList}" maxSuggestedItems="7"/> </af:inputListOfValues>
コンポーネントがADFモデルなどのデータ・モデルで使用される場合、suggestItem
メソッドはデフォルト実装で提供される必要があります。
ADFモデルを使用していない場合は、suggestItems
メソッドを作成してリストを処理および表示します。suggestItems
メソッド・シグネチャを例11-4に示します。
デフォルトでは、inputComboboxListOfValues
およびinputListOfValues
コンポーネントの「検索および選択」ダイアログのサイズは、レンダリング時にエンド・ユーザーが変更できます。例11-5に示すように、アプリケーションのスキン・ファイルで-tr-stretch-search-dialog
セレクタ・キーをfalse
に設定することにより、エンド・ユーザーがこれらのダイアログのサイズを変更できないようにできます。-tr-stretch-search-dialog
セレクタ・キーのデフォルト値はtrue
です。スキニングの詳細は、スキニングに関する章を参照してください。
inputComboboxListOfValues
コンポーネントを使用すると、ユーザーはドロップダウン・リストから値を選択し、inputListOfValues
コンポーネントと同じように、ページのLOVフィールドおよび可能な場合はその他のフィールドに移入できます。ただし、リストの値を完全なリストとして表示することや、最近参照した値ごとに表示することも可能になります。問合せAPIを実装していれば、11.2項「ListOfValuesデータ・モデルの作成」で説明されているように、ポップアップ・ダイアログで検索を実行するようにコンポーネントを構成することもできます。
スキニングと「検索および選択」ダイアログのサイズ変更の詳細は、第11.3.2項「LOVコンポーネントの「検索および選択」ダイアログのスキニングに関する必知事項」を参照してください。
始める前に:
ページまたはページ・フラグメントをすでに作成している必要があります。
inputComboboxListOfValuesコンポーネントを追加する手順:
コンポーネント・パレットで、「共通」パネルから入力コンボ・ボックス値リストをドラッグしてページにドロップします。
プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
model: 11.2項「ListOfValuesデータ・モデルの作成」で作成した、ListOfValuesModel
実装に解決されるEL式を入力します。
value: 11.2項「ListOfValuesデータ・モデルの作成」で作成した、リストへの移入に使用された属性値に解決されるEL式を入力します。
「外観」セクションを開き、次の属性値を設定します。
popupTitle: 「検索および選択」ポップアップ・ダイアログのタイトルを指定します。
searchDesc: マウスが置かれた際にコンポーネントのヒントとして表示するテキストを入力します。
Placeholder: inputComboboxListOfValues
コンポーネントが空でフォーカスが設定されていない場合に、コンポーネントに表示されるテキストを指定します。コンポーネントにフォーカスが設定されるか、値が入力されると、プレースホルダ・テキストは非表示になります。
プレースホルダ・テキストは、ユーザーがinputComboboxListOfValues
コンポーネントに入力する必要のある内容を知らせる目的で使用されます。
このセクションの残りの属性は、その他の入力コンポーネントと同じ方法で移入できます。詳細は、9.3項「inputTextコンポーネントの使用方法」を参照してください。
「動作」セクションを開き、次の属性値を設定します。
autoSubmit: 該当するアクション(クリックやテキストの変更など)が実行された場合に、含まれているフォームがコンポーネントにより自動的に送信されるようにするにはtrue
に設定します。これにより、オートコンプリートが機能します。
createPopupId: リストに新規オブジェクトを作成するために使用されたポップアップ・ダイアログを実装した場合は、そのポップアップ・コンポーネントのIDを指定します。これにより、定義したダイアログにバインドされたcommandToolbarButton
コンポーネントを含む表の上にtoolbar
コンポーネントが表示されます。ポップアップにダイアログを追加した場合は、表をリフレッシュするタイミングが自動的に決定されます。ポップアップにダイアログを追加しなかった場合、表は常にリフレッシュされます。
launchPopupListener: ポップアップ・ダイアログが開かれる際に追加の機能を提供するために実装するlaunchPopupListener
ハンドラに解決されるEL式を入力します。
returnPopupListener: 値が戻された場合に追加の機能を提供するために実装するreturnPopupListener
ハンドラに解決されるEL式を入力します。
Usage: HTML5ブラウザでのinputComboboxListOfValues
コンポーネントのレンダリング方法を指定します。有効な値は、auto
、text
およびsearch
です。デフォルトはauto
です。
使用方法のタイプがsearch
の場合、inputComboboxListOfValues
コンポーネントはHTML5の検索入力タイプとしてレンダリングされます。一部のHTML5ブラウザでは、検索テキストの消去に使用できる「取消」アイコンが追加される場合があります。
このセクションの残りの属性は、その他の入力コンポーネントと同じ方法で移入できます。詳細は、9.3項「inputTextコンポーネントの使用方法」を参照してください。
launchPopupListener
を使用している場合は、LaunchPopupEvent
クラスのgetPopupType()
メソッドを使用してイベントのソースを区別できます。getPopupType()
は、イベントが「LOV検索および選択」ダイアログを起動した結果である場合にDROPDOWN_LIST
を返し、イベントがユーザーによるダイアログでの「検索」ボタンのクリックの結果である場合にSEARCH_DIALOG
を返します。
ユーザーが新しい項目を作成できるようにする場合は、手順5で指定されたIDを使用してポップアップ・ダイアログを作成します。詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
コンポーネント・パレットで、「操作」パネルから「自動提案動作」をドラッグし、inputComboboxListOfValues
コンポーネントに子としてドロップします。
プロパティ・インスペクタで、自動提案属性ごとに次を入力します。
suggestItems
メソッドに解決されるEL式。
メソッドはsuggestItems
のList<javax.model.SelectItem>
を返す必要があります。メソッド・シグネチャは、List<javax.model.SelectItem> suggestItems(javax.faces.context.FacesContext, oracle.adf.view.rich.model.AutoSuggestUIHints)
の形式である必要があります。
smartList
メソッドに解決されるEL式。メソッドはスマート・リスト項目のList<javax.model.SelectItem>
を返す必要があります。
自動提案リストに表示する項目の数。完全なリストを表示するには-1を入力します。
このメソッドをマネージドBeanで実装している場合、JSFページ・エントリは例11-6に示す形式である必要があります。
例11-6 LOVのautoSuggestBehaviorタグ
<af:inputComboboxListOfValues value="#{bean.value}" id="inputId"> ... <af:autoSuggestBehavior suggestItems="#{bean.suggestItems}" smartList="#{bean.smartList}" maxSuggestedItems="7"/> </af:inputComboboxListOfValues>
コンポーネントがADFモデルなどのデータ・モデルで使用される場合、suggestItem
メソッドはデフォルト実装で提供される必要があります。
コンポーネントをADFモデルとともに使用していない場合は、suggestItems
メソッドを作成してリストを処理および表示します。suggestItems
メソッド・シグネチャを例11-7に示します。