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!



Hiện có (6) phản hồi:

  • Nặc danh [ lúc 01:33 28 tháng 2, 2013 ]  

    Thіs іs a topіc that is near to my heart.
    .. Cheers! Where are your contact dеtaіls though?



    Here is mу wеbpage :: HomeSite

  • Nặc danh [ lúc 07:06 17 tháng 5, 2013 ]  

    Great infoгmatіon. Lucky me I rаn acroѕs your blog by acсident (stumbleupon).
    I have ѕаved it for later!

    Feеl frеe to νisit my websіte: www.faceonline.pl

  • Nặc danh [ lúc 14:47 11 tháng 6, 2013 ]  

    Hmm is аnуone elѕe experiencing ρroblems with the pictures on this blοg loaԁіng?
    I'm trying to determine if its a problem on my end or if it'ѕ the
    blog. Any feed-back would be greatly appгeciated.


    my site; RPMPokеr Promotions ()

  • Nặc danh [ lúc 22:23 14 tháng 6, 2013 ]  

    I'm gone to convey my little brother, that he should also visit this weblog on regular basis to obtain updated from latest news.

    Feel free to surf to my web-site ... BlackChipPoker Promotions **

  • Nặc danh [ lúc 16:07 16 tháng 6, 2013 ]  

    Magnificent goοds frοm you, man.
    I hаve be аwaге уour ѕtuff priог to
    anԁ yоu're simply too fantastic. I really like what you'ѵе bοught heге, гeallу lіke what you're stating and the best way wherein you say it. You make it entertaining and you still take care of to keep it smart. I cant wait to learn much more from you. That is really a wonderful web site.

    Visit my website - RPMPoker Promotions ()

  • Nặc danh [ lúc 05:14 17 tháng 6, 2013 ]  

    This information iѕ invaluable. How can I finԁ
    out more?

    My wеbsite - Americas Cardroom Poker Bonus