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属性を選択し、値のリストを作成します。

値のリストの作成

値のリストの作成

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

値のリストの作成

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

UIの実装

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

入力フォームの作成

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

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

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

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>
                                  
</div></td>
<td>
                                  
</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>