Tích hợp DWR vào Liferay

Bài viết hướng dẫn cách sử dụng DWR trong Liferay.


Nếu bạn chưa biết về DWR xin vào website để biết thêm chi tiết. DWR là một java open source library, có phương châm là "Easy Ajax for Java". DWR giúp cho developer phát triển một ứng dụng Ajax rất dễ dàng.


1. Download file dwr.jar (Current stable version is 1.1.3 Updated 7/12/2006)
2. Copy dwr.jar vào LIFERAY_PROJECT\ext\ext-lib\portal

Những file JARs trong thư mục portal này sẽ tự động thêm vào portal classpath và chỉ có hiển thị trong phạm vi portal

3. Tạo một 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. Tạo một file dwr.xml trong thư mục LIFERAY_PROJECT\ext\ext-web\docroot\WEB-INF
với nội dung như sau:
<dwr>

<allow>

<create creator="new" javascript="SampleBean">

<param name="class" value="com.test.SampleBean"/>

</create>

</allow>

</dwr>

5. Deploy to tomcat: Vào Start\Run\Cmd , sau đó gõ lệnh LIFERAY_PROJECT\ext\ant deploy
6. Bây giờ thì khởi động tomcat tomcat server C:\trainging\liferay\tomcat\bin\startup.bat
Check point:
1. Hãy đảm bảo file dwr.jar đã dược copy vào TOMCAT_HOME\webapps\ROOT\WEB-INF\lib
và dwr.xml được copy vào TOMCAT_HOME\webapps\ROOT\WEB-INF

7. Mở IE, vào địa chỉ sau http://localhost:8080/dwr
Bạn sẽ thấy một trang với nội dung như thế này:

Classes known to DWR:


Tiếp tục vào http://localhost:8080/dwr/test/SampleBean, nhấn nút "Execute" bên cạnh getMyMovies( );
Một dialog sẽ xuất hiện



8. Vậy là bạn đã tích hợp thành công DWR vào Liferay. Hãy khám phá sức mạnh tiềm ẩn của DWR trong các bài viết kế tiếp.

Ghi chú: LIFERAY_PROJECT là thư mục chứa 2 project:
ext - Liferay Extension Environment
release - Chứa source code của portal version mới nhất

Ví dụ LIFERAY_PROJECT = C:\training\liferay

(Xem chi tiết)

Ajax Dictionary đơn giản

Bài viết này xin giới thiệu với các bạn một chương trình từ điển cực kỳ đơn giản.Từ điển này sử dụng công nghệ Ajax, với thư viện DWR.
Chức năng minh họa của từ điển này chỉ là chèn thêm một chuỗi vào từ cần tra. Trong các bài viết tới, tôi xin giới thiệu một Ajax Dictionary Portlet trong Liferay. Nhưng trước hết thì hãy vượt qua bước cơ bản này đã.

Tham khảo bài viết: Tích hợp DWR vào Liferay

Bước 1: Tạo một Web Project tên là AjaxDict

Image Hosted by ImageShack.us

Bước 2: Copy DWR.jar vào \WebRoot\WEB-INF\lib
Image Hosted by ImageShack.us

Bước 3: Khai báo (declare) DWR Servlet trong file \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: Tạo 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;

}

}

Bước 4.2 : Tạo file \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">

<!--

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


Bước 5: Khai báo Engine class với DWR trong file \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>

Bước 6: Cấu hình the JBoss (or Tomcat)server
Nếu bạn đã cấu hình rồi thì bỏ qua bước này

Image Hosted by ImageShack.us

Bước 7: Deploy
Image Hosted by ImageShack.us

Image Hosted by ImageShack.us

Bước 8: Khởi động jBoss
Image Hosted by ImageShack.us

Bước 9: Kiểm tra kết quả trên IE hoặc Firefox

Vào địa chỉ sau: http://locaclhost:8080/AjaxDict
Image Hosted by ImageShack.us

Chúc thành công!



(Xem chi tiết)