上一篇文章中,可以看到新建的项目结构很复杂,其实它是一个比较完整的示例。点击
这里的第二个按钮进行编译并运行,等一段时间,编译完之后,再右击项目,Run As-->Web Application。等一会儿,然后在浏览器中浏览:http://localhost:8888/就可以看到结果,很酷的哦。
在输入框中输入名字,点击send,就会出现上图所示的可爱的弹出窗。
下面,我们来写一个自己的GWT应用。先来简化一下整个工程,我们要写的是简单的应用,用不到那么多东西。
简化前: 简化后:
如上图所示,把GreetingService.java、GreetingServiceAsync.java文件和shared文件夹都删除了。然后修改GwtTest.gwt.xml删到只剩下如下代码:
<?xml version="1.0" encoding="UTF-8"?> <module rename-to='gwttest'> <inherits name='com.google.gwt.user.User'/> <entry-point class='cn.ling.test.client.GwtTest'/> </module>
修改GweTest.java,删到只剩下如下代码:
package cn.ling.test.client;
import com.google.gwt.core.client.EntryPoint;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GwtTest implements EntryPoint {
public void onModuleLoad() {
}
}
修改GwtTest.html,删到只剩下如下代码:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="GwtTest.css">
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript" src="gwttest/gwttest.nocache.js"></script>
</head>
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>
这里,要注意
<script type="text/javascript" language="javascript" src="gwttest/gwttest.nocache.js"></script>
上方的注释,它基本的意思是说,如果要在head标签里面加其它标签的话,都加在上面这句的上方。
修改GwtTest.css,把里面的内容清空,但不要删除本文件
修改web.xml,把里面的servlet给删了,只剩如下代码:
<?xml version="1.0" encoding="UTF-8"?> <!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> <!-- Default page to serve --> <welcome-file-list> <welcome-file>GwtTest.html</welcome-file> </welcome-file-list> </web-app>
好了,现在看起来,整个工程就够简洁的了。
下面写一个简单的示例。
先在GwtTest.html中加入一个div
<div id="slot1" style="margin:10px"></div>
然后在GwtTest.java中的onModuleLoad函数内加入一些代码:
public void onModuleLoad() {
final Button btn = new Button("Click me");
final Label lbl = new Label();
//设置一下右对齐
lbl.setWidth("300px");
lbl.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
//设置一下不可以自动换行
lbl.setWordWrap(false);
btn.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
if(lbl.getText().equals("")){
lbl.setText("Hello,ling");
} else {
lbl.setText("");
Window.alert("Hello,ling!");
}
}
});
RootPanel.get("slot1").add(lbl);
RootPanel.get("slot1").add(btn);
}
onModuleLoad是Gwt运行时的入口函数。
用一开始时说到的方法编译和运行这个程序,结果很简单:页面中只一个按钮,第一次点击时,在按钮上出现"Hello,ling",第二次点击时,把刚刚出现的文字清空,再弹出一个提示框。