Oracle ADF Faces Rich Client: AutoSuggest Behaviorの使用

Oracle JDeveloper How-Toドキュメント
オラクル、 Juan Camilo Ruiz
2009年11月

Oracle Application Development Framework(Oracle ADF)11gにおけるAutoSuggest Behavior

af:autoSuggestBehaviorは、Oracle ADF 11g PS1リリースのOracle ADF Faces Rich Client部分にある新しいタグです。 ここでは、入力コンポーネントおよび値のリストにオートサジェスト・スタイル機能を適応する方法について説明します。

はじめに

af:autoSuggestBehaviorは、ユーザーが入力コンポーネントに入力するときに、候補を提示するドロップダウン・リストを生成します。 この機能は動作として実装されます。つまり、トップレベルのコンポーネント・タグへ挿入する必要があるサブエレメントであることを意味します。

HRスキーマ上のEmployees表を使用して、従業員エントリ・フォームを作成します。 オートサジェスト機能を宣言的な方法で使用するには、モデル・プロジェクトでモデル駆動型のリストを定義する必要があります。このリストは、SuggestedItemsリストの基本になります。 Employeesビュー・オブジェクトからFirstName属性を選択し、値のリストを作成します。

Create List of Values

値のリストの作成

Create List of Values

値のリストの作成

UI Hintsタブで、デフォルトの表示がInput Text with List of Valuesになるように選択します。

Create List of Values

値のリストの作成

これでUIに関する作業を開始できます

UIの実装

Employeesコレクションを空のページへドラッグ・アンド・ドロップして、入力フォームを作成します。

Create an Input Form

入力フォームの作成

FirstName属性はInput List Of Valuesとして表示されますが、必要とされるのは任意の入力テキストです。 次に、リスト内のコンポーネント・パレットから「 Auto Suggest Behavior」をドラッグ・アンド・ドロップします。

Auto Suggest Behavior

Auto Suggest Behaviorのドラッグ・アンド・ドロップ

次に、SuggestedItemsリストを入力するように指示されます。 SuggestedItems属性は、シグネチャList<javax.faces.model.SelectItem>を含むメソッドにバインドされる必要がありますが、モデル駆動型のリストでは、SuggestItemsプロパティをADFmのリスト・バインディングに追加しました。ここで、EL経由でアイテムの提示リストにアクセスできます。

Suggested Items List

Suggested Itemsリスト

ページのソース・コードは次のとおりです。

                                             
<af:inputListOfValues id="firstNameId"
                                          
                                             
popupTitle="Search and Select: #{bindings.FirstName.hints.label}"
                                          
                                             
value="#{bindings.FirstName.inputValue}"
                                          
                                             
label="#{bindings.FirstName.hints.label}"
                                          
                                             
model="#{bindings.FirstName.listOfValuesModel}"
                                          
                                             
required="#{bindings.FirstName.hints.mandatory}"
                                          
                                             
columns="#{bindings.FirstName.hints.displayWidth}"
                                          
                                             
shortDesc="#{bindings.FirstName.hints.tooltip}">
                                          
                                             
<f:validator binding="#{bindings.FirstName.validator}"/>
                                          
                                             
<af:autoSuggestBehavior suggestedItems="#{bindings.FirstName.suggestedItems}"/>
                                          
                                             
</af:inputListOfValues>
                                          

ソース・コード

                                   
ページを実行します。入力するとオートサジェスト機能により選択項目が表示されます。以下に、2つの例を示します。
<table> <tbody><tr> <td><div> Run the Page </div></td> <td> Run the Page </td> </tr> </tbody></table>

ページの実行

<h3>追加情報</h3>
                                  
<ul><li> JDeveloper Home on OTN.
</li><li> ADF Faces Rich Client Components Home.
</li><li> ADF Faces Rich Client Hosted Demo.</li></ul>