GWT学习（二）-- 入门编程

lingyibin

浏览: 196272 次
性别:
来自: 长沙

最近访客更多访客>>

apex53

辽东小小

bsll

我们快跑

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

编程 GWT JavaScript Web CSS

上一篇文章中，可以看到新建的项目结构很复杂，其实它是一个比较完整的示例。点击

这里的第二个按钮进行编译并运行，等一段时间，编译完之后，再右击项目，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>

这里，要注意

上方的注释，它基本的意思是说，如果要在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"，第二次点击时，把刚刚出现的文字清空，再弹出一个提示框。