DWR Autosuggetion

DWR (Direct Web Remoting) Autosuggetion

Document Version
Draft 1.0

Modification Comments
Created the document

Modified By
Sunil Soni

Reviewed By
-

Date
26-09-2011

Comments

Contents
1. 2. Introduction......................................................................................................................................... 3 JavaScript files that must be included in your application for DWR: .................................................. 3 2.1. 2.2. 2.3. 3. JCustomer.js: ............................................................................................................................... 3 Engine.js: ..................................................................................................................................... 5 Util.js:........................................................................................................................................... 5

Lets start with our project: .................................................................................................................. 5 3.1. 3.2. 3.3. 3.4. Create a Dynamic Website: ......................................................................................................... 5 Download and add the dwr jar files in the web-inf/ lib folder: ............................................... 5 Add following code in web.xml: .................................................................................................. 5 A dwr.xml file,placed also into the WEB-INF directory: .............................................................. 6 Page 1

DWR Autosuggetion

4.

Server side Java objects:...................................................................................................................... 7 create Java class, which will be called by the DWR javascript: ............................................................... 7 4.1. 4.2. 4.3. 4.4. SearchAction.java: ....................................................................................................................... 7 SearchUtil.java:............................................................................................................................ 8 DatabaseUtil.java ........................................................................................................................ 9 CommonConstant.java .............................................................................................................. 10

5.

Index.html: ........................................................................................................................................ 10

6.Figure:..................................................................................................................................................... 10

Page 2

DWR Autosuggetion

1. Introduction
The browser side JavaScript objects are implemented by the DWR JavaScript code. This code communicates with the servlet at the backend using asynchronous XMLHttpRequest support of the browser. Operations performed by DWR during remoting include:

DWR runtime processes a dwr.xml file to determine the objects that needs to be remoted DWR uses Java reflection to find out about the available fields and methods of the server-side object DWR generates JavaScript code that creates equivalent JavaScript objects within the browser All methods in the JavaScript object are invoked remotely and handled by the DWR servlet Methods that return values are handled by converter within DWR.

DWR consists of two main parts:

A Java Servlet running on the server that processes requests and sends responses back to the browser. JavaScript running in the browser that sends requests and can dynamically update the webpage.

which consists of: 1. A servlet (uk.ltd.getahead.dwr.DWRServlet) 2. A set of JavaScript libraries (util.js and engine.js)

2. JavaScript files that must be included in your application for DWR:

2.1. JCustomer.js:

complete path is /<App NAME>/dwr/interface/<YOUR CLASS NAME>.js.

in my application the path is /fas.war/dwr/interface/ JCustomer.js and one more javascript file /fas.war/dwr/interface/ searchDwr.js searchDwr.js
var nameRegEx = /^([a-zA-Z\-\/&_]){1,50}$/; function populateSearchFied(obj){

Page 3

DWR Autosuggetion

var textfieldValue = obj.value; if(nameRegEx.test(textfieldValue) ==false){ removeList(); return false; } JCustomer.getSearchResultAction(textfieldValue,searchCallback); removeList(); var v=document.getElementById("customerName").value; } function searchCallback(msg) { if (msg.length > 0) { document.getElementById("suggestions").style.display = "block"; var sList = document.getElementById("suggestionsList"); var ul = document.createElement('ul'); for (var i = 0; i < msg.length; i++){ var li = document.createElement('li'); li.innerHTML = msg[i]; li.onclick = bindFunction(msg[i]); ul.appendChild(li); } sList.appendChild(ul); } } function bindFunction(txt) { return function () {fillTextField(txt);}; } function fillTextField(txt) { document.getElementById("customerName").value = txt; document.getElementById("suggestions").style.display = "none"; removeList(); } function removeList() { var sList = document.getElementById("suggestionsList"); var children = sList.childNodes; for (var i = 0; i < children.length; i++) { sList.removeChild(children[i]); } }

JCustomer.js
function JCustomer () { }

Page 4

DWR Autosuggetion

JCustomer.getSearchResultAction = function(fieldValue,searchCallback){ DWREngine._execute('/fas/dwr', 'search', 'getSearchResultAction',fieldValue,searchCallback); }

2.2.

Engine.js:

DWR engine file : /<APP NAME>/dwr/engine.js. This is responsible for marshaling of Java objects/Values between Client and Server.

2.3.

Util.js:

This is not necessary, but it provides nice set of utility methods to work with HTML code :
/<APP NAME>/dwr/util.js

3. Lets start with our project:

3.1. 3.2. Create a Dynamic Website: Download and add the dwr jar files in the web-inf/ lib folder:

Download location : http://directwebremoting.org/dwr/downloads/index.html.

3.3.
<servlet>

Add following code in web.xml:

<servlet-name>dwr-invoker</servlet-name> <display-name>DWR Servlet</display-name> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern>

Page 5

DWR Autosuggetion
</servlet-mapping>

Setting debug parameter to true allows you to troubleshoot DWR readily to determine if things are working alright.

3.4.

A dwr.xml file,placed also into the WEB-INF directory:

Which contains information for DWR. This file specifies the Java classes that should be remoted to JavaScript. This file contains:
<!DOCTYPE dwr PUBLIC -//GetAhead Limited//DTD Direct Web Remoting 1.0//EN http://www.getahead.ltd.uk/ dwr/dwr10.dtd> <dwr> <allow> <create creator=new javascript= JCustomer> <param name=class value= com.fas.dwr.action.SearchAction/> </create> </allow> </dwr>

As you can see in above code, i have added the creator attribute which will tell the dwr engine to create the javascript object named JCustomer, using which we can call the server side methods.

The above configuration tells DWR that: 1. com.fas.dwr.action.SearchAction should be remoted to JCustomer JavaScript object 2. JavaScript code can create instances remotely which return values and arguments of type JCustomer will be converted What exactly do the JCustomer objects looks like? Next we explore the server side Java objects.

Page 6

DWR Autosuggetion

4. Server side Java objects:

create Java class, which will be called by the DWR javascript:

4.1.

SearchAction.java:

Helper method and fields of the com.fas.dwr.action. SearchAction class

getSearchResultAction(String fieldValue)

A method to obtain all of the customer names from the database which contains character like searchKey. This method returns an string array of Customer objects. On the server-side, this is an array of Customer Java objects. DWR will convert them to an array of JCustomer JavaScript objects on the browser side.

SearchAction.java
package com.fas.dwr.action; import com.fas.dwr.utils.SearchUtil; public class SearchAction{ public String[] getSearchResultAction(String fieldValue){ String dataList[] = null; SearchUtil searchUtil = null; try{ searchUtil = new SearchUtil(); dataList = searchUtil.fetchResult(fieldValue.trim()); }catch(NullPointerException nullExp){ } return dataList; } }

Page 7

DWR Autosuggetion

4.2.

SearchUtil.java:

Helper method and fields of the com.fas.dwr.utils. SearchUtil class

This method takes a string argument searchKey and returns

fetchResult (String searchKey) OST_STOCK.CUSTOMER_NAME string array OST_STOCK is a table name and CUSTOMER_NAME is a coloumn name in database.

package com.fas.dwr.utils; import java.util.List; import import import import import import com.broadvision.data.client.Content; com.broadvision.data.common.TableData; com.broadvision.data.sql.SQLCondition; com.broadvision.data.sql.SQLExpression; com.broadvision.data.sql.SQLOperator; com.fas.common.utils.CommonConstants;

public class SearchUtil{ public String[] fetchResult(String searchKey){ List returnParamter = null; DatabaseUtil dataTranscation = null; SQLCondition sqlCondition = null; SQLExpression sqlExpression = null; String []htmlBuilder = null; try{ sqlExpression = new SQLExpression("OST_STOCK.CUSTOMER_NAME "); sqlCondition = new SQLCondition(sqlExpression,SQLOperator.OP_LIKE,new SQLExpression(("'%"+searchKey+"%'"))); dataTranscation = new DatabaseUtil(); returnParamter = dataTranscation.getContentList(CommonConstants.BV_OST_STOCK_CONTENT_TYPE_ID, sqlCondition); if(null != returnParamter){ htmlBuilder = new String[returnParamter.size()]; Content content = null; for(int i=0;i<returnParamter.size();i++){ content = (Content)returnParamter.get(i); htmlBuilder[i]= content.getStringValue("CUSTOMER_NAME"); }

Page 8

DWR Autosuggetion
} }catch(Exception ee){ } return htmlBuilder; }

4.3.

DatabaseUtil.java

Helper method and fields of the com.fas.dwr.utils. DatabaseUtil class:

DatabaseUtil

A constructor which contains a static block . Returns a List based on query condition. this util class obtain customer names from the database which contains keyword like searchKey.
getContentList

package com.fas.dwr.utils; import java.util.ArrayList; import java.util.List; import com.broadvision.data.client.DataManager; import com.fas.common.utils.CommonConstants; public class DatabaseUtil{ private static DataManager dataManager=null; static{ try{ dataManager=new DataManager(); }catch(Exception e){ System.out.println(">>>>> Data Base initialization failed while init data manager"); } }
public List getContentList(int contentId,SQLCondition condition){ List contentList = null; try{ contentList = new ArrayList(); contentList = dataManager.getContentsByCondition(contentId, CommonConstants.FAS_SERVICE_ID, condition, true); }catch(Exception ee){ } return contentList; } }

Page 9

DWR Autosuggetion

4.4.

CommonConstant.java

package com.fas.common.utils; public class CommonConstants { public static final int BV_OST_STOCK_CONTENT_TYPE_ID=1002; public static final int FAS_SERVICE_ID=92; }

5. Index.html:
create index.html using below code:
<table>

<tr><td width="46%" class="text01"><div align="right"><span class="team_name_txt1">Search Name:</span> </div></td><td width="54%" class="txt_01"> <div class="loginboxdiv"> <input class="" type="text" size="25" name="customerName" id="customerName" autocomplete="off" onkeyup="populateSearchFied(this)"/> </div> <div id="apDiv2" style="z-index:1000; position:absolute;background-color:#fff;"> <div class="suggestionsBox" id="suggestions" style="display:none;text-align:left; border:1px solid #efefef; font-size: medium;"> <div class="suggestionList" id="suggestionsList"></div> </div></div></td></tr></table>

6.Figure:
DWR makes Java objects appear as remote JavaScript objects:

Page 10