ADF Faces RC: Working with the AutoSuggest Behavior
An Oracle JDeveloper How To
Document
Written by Juan
Camilo Ruiz, Oracle Corporation
November, 2009
The AutoSuggest Behavior in ADF 11g
The af:autoSuggestBehavior is a new tag from the ADF
Faces RC part of
the ADF 11g PS1 release. This article explains how input components and
list of values can adapt auto-suggest style functionality.
Introduction
The af:autoSuggestBehavior produces a dropdown list of
suggested items
as the user types into the input component. This functionality is
implemented as a behavior which means it is a sub-element that needs to
be inserted into a top-level component tag.
Let’s use our Employees table on the HR schema
to create an employee entry form. To use the auto-suggest functionality
in a declarative way you need to define a model-driven list of values
on your model project, which will be the base for the suggestedItems
list. Select the FirstName attribute from the Employees VO and create a
List of Values.
Create List of Values
Create List of Values
On the UI Hints Tab,select the Default Display to be
Input Text with
List of Values.
Create List of Values
Now we can work on the UI.
Implementing the UI
Drag and drop the Employee collection to an empty page
to create an
input form
Create an Input Form
The FirstName attribute is displayed as an
inputListOfValues, although all we need is to have any kind of input
text. Now drag and drop the autoSuggestBehavior from your component
palette inside of List.
Drag and Drop Auto Suggest
Behavior
Then you are prompted to enter the suggestedItems list.
The suggestedItems attribute needs to be bounded to a method with
signature List<javax.faces.model.SelectItem>, although
for model-driven list we have added the suggestItems property to the
list bindings on the ADFm -you can then access the suggest list of
items via EL.
Suggested Items List
The source code of your page then is
<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>
|
Source Code
Now run your page and now you will get auto suggest items as you type. Here are two different types of lists:
Where to get more information
|
Bookmark
