March 08, 2007

Test

A Code sample

code-sample { font-weight: bold; font-style: italic; }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat....

Code

code-sample { font-weight: bold; font-style: italic; }

December 21, 2006

How to use DWR in Liferay Portal (Part 2 - A simple Dictionary)

Tags: Ajax, DWR, Portal/Portlet

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 \WebRoot\WEB-INF\lib

Step 3: Declare DWR Servlet in \WebRoot\WEB-INF\web.xml

<?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;

}

}

Step 4.2 : Create \WebRoot\WEB-INF\index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>

<%

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">



<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 \WebRoot\WEB-INF\dwr.xml

<!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 18, 2006

Ajax - Hello World

Tags: Ajax

Ajax - one of the most important web technology in 2005. Ajax has changed not only the web development industry but also the software development industry. This new technology mades the gap between desktop application and web application smaller. Go here for more information about Ajax

In this tutorial, you will learn the basic principle of Ajax. You will see that it is not too much difficult.

Requirements for this tutorial:
1. Tomcat server (Download)

Step 1: Create a HTML file (C:\tomcat\webapps\ajax1.html)
<HTML>
<HEAD>
<script>
function loadurl(dest) {
try {

xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {

}

xmlhttp.onreadystatechange = myHandler;

xmlhttp.open("GET", dest);

xmlhttp.send(null);
}

function myHandler(){

if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
{

document.getElementById("output").innerHTML = xmlhttp.responseText;
}
}
</script>
</HEAD>
<body>
<input type="button" value="Load from server"/ onclick="javascript:loadurl('/sample.txt')">
<div id="output"></div>
</body>
</HTML>

Step 2: Create a sample resource
In real applications, a servlet or something else :) gets data from database and sends them back to the client.
To make it simple, I create a simple resource, just a simple text file located in the server:
Content of C:\tomcat\webapps\ROOT\sample.txt

Step 3: Test your result
- Start your server (C:\tomcat\bin\startup.bat)
- Open IE, type in address bar: http://localhost:8080/ajax1.html
- Click the button "Load from server"

That's all !

Review
Now look again what is under the hook. When you click the button, the javascript function loadurl will be called.

What happens in loadurl ?
1. create XMLHttpRequest object

2. Assign the listener for the event onreadystatechange

3. XMLHttpRequest object send request to server by executing the method: open("GET",dest)

4. Server receive the request, get content in the sample.txt, send back to the client. The browser will listen and invoke the listener myHandler() everytime the readyState of XMLHttpRequest object is changed.

5. myHandler need to check if the received data is ready or not. When the receiving is completed, the value of DOM object with id="output" will be changed to the response text

6. Maybe you wonder why we use xmlhttp.send(null) in this case. The reason is when we call the send method, the browser will wait for the response from the server. This is the Synchronous model. But Ajax is asynchronous, we will send null to the server, so the client will not wait. We send request by open("GET",dest);