GWT 學習 I

到http://code.google.com/webtoolkit/

首先看到Build AJAX apps in the Java language這段文字
是我熟悉的一塊,看起應該不會太難上手

即然還不是很了解什麼東西
看了一堆說明我想應該還不不懂是什麼東西
直直衝往Get Started Guide吧 (做中學,學中做 是我最愛的學習方式)
http://code.google.com/webtoolkit/gettingstarted.html#Install

在解開的目錄下有一個 command file
打開console 直接輸入 applicationCreator com.leon456.client.Test
開始發生了不可思議的事了
經由這個指令 發生以下的事

Created directory C:\Work\RES\gwt-windows-1.2.22\src
Created directory C:\Work\RES\gwt-windows-1.2.22\src\com\leon456
Created directory C:\Work\RES\gwt-windows-1.2.22\src\com\leon456\client
Created directory C:\Work\RES\gwt-windows-1.2.22\src\com\leon456\public
Created file C:\Work\RES\gwt-windows-1.2.22\src\com\leon456\Test.gwt.xml
Created file C:\Work\RES\gwt-windows-1.2.22\src\com\leon456\public\Test.html
Created file C:\Work\RES\gwt-windows-1.2.22\src\com\leon456\client\Test.java
Created file C:\Work\RES\gwt-windows-1.2.22\Test-shell.cmd
Created file C:\Work\RES\gwt-windows-1.2.22\Test-compile.cmd

就是這麼一個指令
注意最後二行 又有二個cmd檔

按常理source code完成了當然就是compile
我們先來試試Test-compile.cmd

Output will be written into C:\Work\RES\gwt-windows-1.2.22\www\com.leon456.Test Copying all files found on public path Compilation succeeded

到www目下看一下結果
直接點開Test.html

























再來試試另一個command file






這次是google 所提供的一個web server monitor 及一個browser幫你測剛剛完成Test
(事實上可以直接就執行Test-shell.cmd就可完成compile的動作)
就是這麼的簡單,一行程式都沒寫到
整個過程下來
總是,覺得少了自己動作的彈性吧
下回再來玩玩它的其它 features吧

試玩 DWR

心血來潮至dwr 看了一下資料
ajax這是一個最近炒的挺熱的話題
目前是對這個工具還沒完全了解
以下做個簡單的紀錄
1st step:
雖然在寫網頁時是用不到 JSP的語法(至少我在第一個example裡沒用到)
首先是要先下載dwr.jar 這個核心 下載
將下載的dwr.jar放到 WebApp/WEB-INF/lib下

2rd step:

撰寫我們的網頁UI

<p>Messages:</p>
<div id="chatlog"></div>
<p>
Your Message:
<input id="text"/>
<input type="button" value="Send"
onclick="sendMessage()"/>

</p>

以及java code





Message.java





package testdwr.bean;





public class Message


{


public Message(String newtext)


{


text = newtext;


if (text.length() > 256)


{


text = text.substring(0, 256);


}


text = text.replace('<', '['); text = text.replace('&', '_'); } public long getId() { return id; } public String getText() { return text; } long id = System.currentTimeMillis(); String text; }




Chat.java





package testdwr.bean;





import java.util.List;


import java.util.LinkedList;





public class Chat


{


public List addMessage(String text)


{


if (text != null &&


text.trim().length() > 0)


{


messages.addFirst(new Message(text));


while (messages.size() > 10)


{


messages.removeLast();


}


}





return messages;


}





public List getMessages()


{


return messages;


}





static LinkedList messages =new LinkedList();


}





將這二個class加到WEB-INF下







3nd step:


在web.xml加上這段宣告

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

接著再 WebApp/WEB-INF 增加一個dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!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="Chat">
<param name="class" value="testdwr.bean.Chat"/>
</create>
<convert converter="bean" match="testdwr.bean.Message"/>
</allow>
</dwr>

4th step:
在browser 輸入 http://localhost:8080/WebApp/dwr
會出現剛定義的 Chat的hyperlink
點選進入後
把
<script type='text/javascript' src='/JSFExample/dwr
/interface/Chat.js'></script>
<script type='text/javascript' src='/JSFExample/dwr
/engine.js'></script>
<script type='text/javascript' src='/JSFExample/dwr
/util.js'></script>

<script type="text/javascript">
function sendMessage(){
var text = DWRUtil.getValue("text");
DWRUtil.setValue("text", "");
Chat.addMessage(text);
DWRUtil.setValue("chatlog", text);
}

</script>

把這以上java script放到UI上
最後在輸 http://localhost:8080/WebApp
即可測試