使用GWT 与 NetBeans 开发 AJAX 应用(1)

最新推荐文章于 2024-10-01 06:15:44 发布

mycsoft

最新推荐文章于 2024-10-01 06:15:44 发布

阅读量1.8k

点赞数

分类专栏： NetBeans 文章标签： netbeans gwt ajax google import shell

NetBeans 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

练习 1: 生成并运行简单的 HelloWorld 程序

在这部分练习中,你将会学会在NetBeans中生成一个简单的HelloWorld GWT 程序. 还会让你在 NetBeans 配置 GWT 类库.不过这个配置只需要做一次.

创建一个空的 Google Web Toolkit Web应用程序项目
添加一个按钮,并绑定事件响应.
创建一个可布署的WAR包.(编者注:这个功能将会在我正在编写的下一版本的插件中被支持).

(1.1) 创建新的 Google Web Toolkit Web应用程序项目

0. 启动 NetBeans IDE.
1. 选择文件->新增项目(Ctrl+Shift+N). 弹出新增项目对话框.
2. 在选择项目面板的中, 选择Web 类型以及 Google Web Toolkit Application 项目. 点击下一步. (图-1.10 )

图-1.10: 创建新的 Google Web Toolkit Web应用程序项目

3. 在名称和位置面板上, 在项目名称输入框中, 输入任意你想要的项目名称. 我现在使用默认的 GWTApplication 做为项目名称. 在项目位置区域中, 可以使用IDE默认的位置,也可以自定义一个位置 - 在这个练习中,我们使用 C:/myprograms - 来创建项目. (图-1.11 )

图-1.11: 指定项目名称

4. 在第一次创建 GWT项目是, IDE会询问你你存放解压后的Google Web Toolkit(GWT) 包的位置.这个包,在前面已经说过了. 点击浏览 , 进入存入GWT文件的目录. (图-1.11.1 )

图-1.11.1: GWT 配置

5. 单击完成, 关闭新增项目对话框.
6. 现在可以看到在NetBeans的项目 tab 窗口中出现了一个 GWTApplication 项目节点. IDE自动生成的 Main.html 显示在代码编辑器中. (图-1.12 )

图-1.12: GWTApplication 项目

7. 右键点击 GWTApplication 项目节点并选择 Run Project. 注意观察, Google Web Toolkit Development Shell 在 8888 端口被启动了. (图-1.13) 接着 GWTApplication 被显示在shell模式中.(图-1.14 )

图-1.13: Hosted mode shell

图-1.14: Hosted mode 浏览

正如你看到的,现在没有任何内容被显示,因为还没有可显示的代码被加入. 你将在下一步, 开始加入可运行的代码.

8. 关闭 Google Web Toolkit Development Shell 窗口必须要点击窗口右上角的X 按钮. 这样你才可以再次运行这个程序. (图-1.15 与图-1.16 )

图-1.15: 关闭 Google Web Toolkit Development Shell

图-1.16: 确认关闭

问题解答: 如果你遇到了<No main classes found> 问题, 请看下面的问题解答 .

问题解答: 如果你遇到 "Port 8888 is already in use; you probably still have another session active" 的错误信息,好像图-1.15 一样, 这是因为你没有关闭上一次的打开的 Google Web Toolkit Development Shell 窗口. 关闭之前打开的 Google Web Toolkit Development Shell 然后重新运行这个项目,如图-1.15 . (第当你修改了代码需要重新运行项目,就一定要这样做.)

图-1.15: 8888 端口已经在使用中

回到本节头部

(1.2) 添加一个按钮,并绑定事件响应

1. 修改 Main.java 文件.这个文件在 GWTApplication->Source Packages->GWTApplication.client路径下,参看代码-1.20. 需要加入的代码部分已经被高亮显示成粗体蓝色字体. 你可以直接从在线文档上复制这部分代码.

/*
* Main.java
*
* Created on July 5, 2006, 11:18 AM
*
* To change this template, choose Tools | Template Manager
* and open the template in the editor.
*/

package GWTApplication.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

/**
*
* @author sang
*/
public class Main implements EntryPoint {

    /** Creates a new instance of Main */
    public Main() {
    }

    public void onModuleLoad() {
        Button b = new Button("Click me", new ClickListener() {
            public void onClick(Widget sender) {
                Window.alert("Hello, AJAX");
            }
        });

        RootPanel.get().add(b);
    }

}

代码-1.20: Main.java 加入一个按钮

2. 右键单击 GWTApplication 项目节点,然后选择 Run Project.
3. 可以看到 "Click me" 按钮被显示在主机模式中.(图-1.21 )

图-1.21: 在主机模式中运行应用程序