Friday, February 9, 2007

A Generic Simple Search for ADF Faces

In this tutorial we will be building a simple search functionally which can be added to any ADF Faces Table. The figure below gives a preview of what we are going to build.



The Select Items in the drop down is dynamically generated from the meta-data information of the view.

Here's how to build this.

Create a new Web Application using the JSF, ADF BC Template.

Working with the Model project

Creating a Framework Extension Class for ViewObjectImpl with the Simple search functionality.

Create a Java class named CustomViewObjectImpl and modify the code to look like the following


package com.regee.adfext;

import oracle.jbo.ViewCriteria;

import oracle.jbo.ViewCriteriaRow;

import oracle.jbo.server.ViewObjectImpl;


public class CustomViewObjectImpl extends ViewObjectImpl {

public CustomViewObjectImpl() {

}

public void searchView(String searchAttributeName, String searchText){

if (searchAttributeName==null) return;

ViewCriteria vc =this.createViewCriteria();

ViewCriteriaRow vcRow = vc.createViewCriteriaRow();

vcRow.setAttribute(searchAttributeName,searchText );

vc.addElement(vcRow);

this.applyViewCriteria(vc);

this.executeQuery();

}

}


Setting up Project-Level Preferences for Framework Extension Classes

Open the Project Properties window for the 'Model' project and go to the section 'Business Components BaseClasses' and change the View Object base class to com.regee.adfext.CustomViewObjectImpl


Creating the Business Components (Employee, EmployeeView, AppModule)

Use the 'Business Components from Tables' wizard to generate the necessary entity, view and application module.

Exposing the 'searchView' method in the Client Interface.

Edit the EmployeeView and in the 'Client Interface' section, move the searchView method from the Available list to Selected list.


Working with the ViewController Project


Creating a resource file to place the Label Texts

From the ViewController project create a resource file named Resources.properties using the 'Simple Files' wizard and add the following content in it.


EmployeeId= Employee ID

FirstName= First Name

LastName= Last Name

Email= Mail

PhoneNumber= Phone #

HireDate = Date of Hire

JobId= Job

Salary = Salary

CommissionPct= Commission %

ManagerId= Manager

DepartmentId= Department


Create the EmployeeSearch.jspx page using the JSF JSP page wizard. Remember to select the 'Automatically Expose UI Components in a New ManagedBean' in the wizard so that JDEveloper will generate a backing bean for this page.


Add the <f:loadBundle> tag to the page just before the <f:view>tag to enable the resource bundle usage for this page.


Add ADF Faces Table based on the EmployeeView1.


Add a PanelHorizontal for placing our search components above the table.


Add a SelectOneChoice component inside the PanelHorizontal, which will display the attribute list.

Delete the SelectItems tag which is appearing inside the SelectOneChoice tag (remember to delete this from the structure window)

From the Properties window change the ID to selectOneChoiceSearchAttribute

Go to source of this SelectOneChoice component and replace the code with the following


<af:selectOneChoice

label="SearchOn" value="EmployeeId"

binding="#{backing_EmployeeSearch.selectOneChoiceSearchAttribute}"

id="selectOneChoiceSearchAttribute">

<af:forEach items="#{bindings.EmployeesView1Iterator.attributeDefs}"

var="item">

<af:selectItem label="#{res[item.name]}"

value="#{item.name}"

rendered="#{item.queriable}"/>

</af:forEach>

</af:selectOneChoice>

The value property of the selectInputChoice component is set to the value EmployeeId so that this comes as default in the dropdown list box.

Add the inputText component in which the user can enter the search text.

Change the ID of this to inputTextSearchText

From the Data Control Palette expand the EmployeeView1 node and drag the searchView method onto the PanelHorizotal as an ADF Command Button and in the ensuing Áction Binding Editor window set the following values

searchAttributeName= ${backing_EmployeeSearch.selectOneChoiceSearchAttribute.value

searchText = ${backing_EmployeeSearch.inputTextSearchText.value}

To change the order of columns in the dropdown change the order in the Page Definition.

Now run the application.

You can download a sample application based on the HR schema from the following link.

http://web.omnidrive.com/APIServer/public/bo40n456pBMyGmYZBMcohX2A/SimpleSearch.zip

I have removed the adf-faces-impl.jar and adf-faces-api.jar from the zip for making the zip size smaller. You can copy the corresponding files from the \jlib folder into the ViewController\public)html\WEB-INF\lib folder.