Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
![]() 前 |
![]() 次 |
この章では、値リスト・コンポーネントを使用して、ユーザーが値を選択できるオブジェクトのモデルドリブン・リストを表示する方法を説明します。
この章では、次の項目について説明します。
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モデルを使用している場合は、そのLOVのビュー基準として定義されたスマート・リスト・フィルタをinputComboboxListOfValues
で宣言的に選択できます。スマート・リストが実装されており、自動提案動作も使用されている場合、自動提案ではスマート・リストから最初に検索されます。ユーザーが何もせずに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 Business Componentsおよび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で実装している場合は、例11-3に示す書式をJSFページのエントリに含める必要があります。
例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()
メソッドを使用して、イベントのソースを区別できます。イベントがLOV検索および選択ダイアログの起動の結果の場合は、getPopupType()
によって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で実装している場合は、例11-6に示す書式をJSFページのエントリに含める必要があります。
例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に示されています。