Configuring Ajax functionality in Woodstock

This document shows how to use Woodstock textField's embedded autocomplete functionality. Attached is the complete NB 6.0 project configured for Tomcat that presents sample code.

Download complete source code of sample project - NOTE: JAR files have been removed from the zipped project - so add your own libraries as specified below:

Set up your environment

Setting up your environment is very important step. Woodstock uses jsf-extensions for its JSF-bound Ajax functionality, and jsf-extentions will not function properly if not setup. Thankfully, this is pretty easy to do.

General requirements for any Woodstock Ajax enabled component:

- make sure to include all required for Woodstock libraries. Attached project requires the following libraries added:

   commons-beanutils.jar
   commons-collections.jar
   commons-digester.jar
   commons-fileupload-1.0.jar
   commons-logging.jar
   dataprovider.jar
   jhall.jar
   jsf-extensions-common-0.1.jar
   jsf-extensions-dynamic-faces-0.1.jar
   json-2.jar
   webui-jsf-suntheme.jar
   webui-jsf.jar

 

- add ThemeServlet to the web.xml file ( see attached)

 
 <servlet>
 <servlet-name>ThemeServlet</servlet-name>
 <servlet-class>com.sun.webui.theme.ThemeServlet</servlet-class>
 <load-on-startup>2</load-on-startup>
 </servlet>
 

<servlet-mapping>
   <servlet-name>ThemeServlet</servlet-name>
   <url-pattern>/theme/*</url-pattern>
   </servlet-mapping>

- add PARTIAL lifecycle parameter to FacesServlet (!!!)

 <servlet>
 <servlet-name>FacesServlet</servlet-name>
 <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
 <init-param>
 <param-name>javax.faces.LIFECYCLE_ID</param-name>
 <param-value>com.sun.faces.lifecycle.PARTIAL</param-value>
 </init-param>
 <load-on-startup>1</load-on-startup>
 </servlet>

 

 

Specific for autoComplete functionality:

- add Bean definition to faces-config.xml

 <managed-bean>
 <description>The backing bean for the field autoComplete example</description>
 <managed-bean-name>AutoCompleteBean</managed-bean-name>
 <managed-bean-class>autocomplete.AutoCompleteBean</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>

 

Create JSP page

See attached for the example. Important to note::

1. The head tag should contain flag to enable loading of jsf-extentions:

<webuijsf:head title="Field Component Tests"  debug="true" webuiAll="true" webuiJsfx="true"> 
  

2. the textField tag should contain autoComplete and autoCompleteExpression as specified in TLD documentation:

 <webuijsf:textField
   autoComplete="true"
   autoCompleteExpression = "#{AutoCompleteBean.getOptions}"
     text="#{AutoCompleteBean.text}"
 id = "tf" toolTip="tooltip" 
 columns="30" 
 required   = "true"
 label = ""
 />

 

Create back-end implementation

See src/autocomplete java file for example. AutoCompleteBean implements com.sun.webui.jsf.model.AutoComplete interface which defines the signature of the method to provide options:

 public Option[] getOptions(String filter);

 

Run the page

For the test application attached, point your browser to http://localhost:PORTNUMBER/autocomplete_jsf/faces/welcomeJSF.jsp and start typing in the textfield.

 

Please check or report any issues at https://woodstock.dev.java.net/servlets/ProjectIssues

Posted at 02:16PM Apr 02, 2008 by Dmitry Kushner in Personal  |  Comments[11]