This post shows you how to build a very simple ajax dictionary. The dictionary does not have a database, it just add a string to keywords and send back to browsers. This application is a normal web application. In the third part, we will make a Ajax dictionary portlet in Liferay.
Step 1: Create a Web Project named AjaxDict
Step 2: Copy DWR.jar to 
Step 3: Declare DWR Servlet in
<?xml version="1.0"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<servlet>
<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>
</servlet-mapping>
</web-app>
Step 4.1: Create Dictionary Engine Class
package com.aq.jdict;
/**
* This is just a simple engine.
* In real application, this engine will search the keyword
* in database, then return the meaning and other information.
* @author naqalone
*
*/
public class JDEngine {
public static String search(String keyword)
{
String meaning="meaning of "+keyword;
return meaning;
}
}
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>A Sample Dictionary</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="Ajax Dictionary">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type='text/javascript'
src='/AjaxDict/dwr/interface/JDEngine.js'></script>
<script type='text/javascript' src='/AjaxDict/dwr/engine.js'></script>
<script type='text/javascript' src='/AjaxDict/dwr/util.js'></script>
<script>
function search()
{
var keyword;
keyword = DWRUtil.getValue("txtKeyword");
JDEngine.search(updateMeaning,keyword);
}
function updateMeaning(rxData)
{
DWRUtil.setValue("result",rxData);
}
</script>
</head>
<body>
<font color="#004080"> <strong>A very simple Ajax
Dictionary - Powered by DWR</strong> </font>
<br>
<br>
Keyword :
<input type="text" name="txtKeyword">
<input type="button" value="Search" name="btSearch"
onClick="javascript:search();">
<br>
Meaning:
<div id="result" border="1">
</div>
</body>
</html>
Step 5: Declare Engine class in
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="none" javascript="JDEngine">
<param name="class" value="com.aq.jdict.JDEngine"/>
</create>
<convert converter="bean" match="com.aq.jdict.JDEntry"/>
</allow>
</dwr>
Step 6: Configure the JBoss (or Tomcat)server
If you already configured a server, you can skip this step.
Step 7: Deploy
Step 8: Start jBoss
Step 9: Test in IE or Firefox
GOTO: http://locaclhost:8080/AjaxDict
That's all!
Part 1,
2
December 21, 2006
How to use DWR in Liferay Portal (Part 2 - A simple Dictionary)
December 07, 2006
How to use DWR in Liferay Portal (Part 1 - Installation)
This tutorial shows you how to use DWR in Liferay.
I assume that you already know how to use DWR. If not, please go here: Getting started with DWR
1. Download file dwr.jar (Current stable version is 1.1.3 Updated 7/12/2006)
2. Copy dwr.jar to C:\training\Liferay\ext\ext-lib\portalJARs in the portal directory are automatically copied to the portal classpath and are only visible by the portal.
3. Create a test bean:
package com.test;
public class SampleBean {
private String myName;
private String[] myMovies;
public String[] getMyMovies() {
myMovies = new String[3];
myMovies[0] = "Happy Feet";
myMovies[1] = "Casino Royale";
myMovies[2] = "Lord of the Ring";
return myMovies;
}
public String getMyName() {
myName = "Anh Quan";
return myName;
}
}
4. Store the dwr.xml in C:\training\Liferay\ext\ext-web\docroot\WEB-INF
Here is a sample dwr.xml
<dwr>
<allow>
<create creator="new" javascript="SampleBean">
<param name="class" value="com.test.SampleBean"/>
</create>
</allow>
</dwr>
5. Deploy to tomcat: Start\Run\Cmd , then C:\trainging\liferay\ext\ant deploy
6. Start your tomcat server C:\trainging\liferay\tomcat\bin\startup.bat
Check point:
1. Be sure that dwr.jar is copied to C:\training\liferay\tomcat\webapps\ROOT\WEB-INF\lib
and dwr.xml is copied to C:\training\liferay\tomcat\webapps\ROOT\WEB-INF
7. In IE, go to http://localhost:8080/dwr
You will see something like :Classes known to DWR:
Go to http://localhost:8080/dwr/test/SampleBean, click "Execute" next to getMyMovies( );
You will see:
8. Congratulation! You are now ready to explore the power of DWR.
Part 1,2