📜  第一个GWT应用程序

📅  最后修改于: 2021-01-02 12:30:22             🧑  作者: Mango

第一个GWT申请

要构建GWT应用程序,我们有四个部分,在最后这一部分是可选的。

1)模块描述符:此部分有助于配置GWT应用程序。要配置,我们将配置文件写入XML

语法:name.gwt.xml

在这里,“名称”是应用程序的名称。所有配置文件都位于项目根目录中。

2)UI设计:它由用于设计GWT应用程序的HTML,CSS或图像组成。我们可以使用标记来配置其位置。我们可以在模块配置中找到配置文件。

3)客户端代码:在本节中,将使用GWT编译器将应用程序的所有代码和业务逻辑转换为JavaScript。我们可以使用标记找到资源的位置。该代码由入口点代码组成,无需参数即可编写。加载GWT应用程序模块后,每次都会调用EntryPoint.onModuleLoad()方法。

4)服务器端代码:在本节中,我们可以执行服务器端代码。如果我们的应用程序没有任何后端(服务器端脚本或数据库),则此部分是可选的。

创建申请:

使用GWT Web开发工具套件创建简单的Web开发项目。要创建应用程序,请执行以下步骤:

文件→新建→其他

现在,将打开一个弹出窗口,从中选择一个向导选项。

选择Google Web应用程序向导,然后单击“下一步”按钮。

单击下一步按钮后,将打开一个新向导。

现在,提供项目名称和程序包名称。在我们仅构建基本应用程序的同时,选择Google SDK选项下的Use GWT并取消选中Use Google App Engine。

单击完成按钮。

单击完成按钮后,将生成以下目录

入口点类别:

在此示例中,类SampleWebApplication被称为GWT应用程序的入口点。该文件包含对服务器端代码的许多引用。该文件必须干净,因为它具有许多参考。

存在一个预定义方法onModuleLoad() ,它是在运行GWT Web应用程序时执行的程序的入口点。

这与常见的Java程序中的public static void main(String args [])方法非常相似。

入口点类代码

SampleWebApplication.java

package com.javatpoint.helloworld.client;
 import com.google.gwt.core.client.EntryPoint;
 /** * Entry point classes define onModuleLoad() */ 
public class SampleWebApplication implements EntryPoint {
     / * This is the entry point method. */ 
public void onModuleLoad() {
 // TODO
 } 
}

部署描述符

它类似于J2EE编程中的web.xml,后者是基于Servlet的Java Web应用程序的部署描述符。

现在,在web.xml中,GWT创建了在“部署描述符”下定义的servlet。由于我们正在创建一个基本的Web应用程序,因此请删除所有服务器端代码和web.xml中的条目(也称为规范标记)。

我们创建一个欢迎文件SampleWebApplication.html,并将其包含在web.xml中。该文件是我们的GWT Web应用程序的第一页。

部署描述符代码

web.xml






SampleWebApplication.html


模块描述符

在本节中,我们将打开一个文件SampleWebApplication.gwt.xml ,该文件位于特定配置文件com.javatpoint.helloworld包下。

它包含来自核心GWT的库,该库包含在继承标记中。我们还可以使用继承标记添加第三方库。继承标记是指GWT控件的默认样式。

模块描述符代码

SampleWebApplication.gwt.xml




























欢迎文件

欢迎文件描述了项目的外观。它是根据我们的HTML和CSS需求设计的。
















Web Application Starter Project
















UI组件在入口点类下更改。我们编写了几行代码来添加UI组件。在此示例中,我们将添加Button,Vertical Panel,事件处理。

package com.javatpoint.helloworld.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * Entry point classes define onModuleLoad().
 */
public class SampleWebApplication implements EntryPoint {
    /** A vertical panel that hold other components over UI.*/
    VerticalPanel vPanel;
    /*
    * A label that gets updated on click of button.
    */
    Label lbl;    
    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        vPanel= new VerticalPanel ();
        lbl= new Label ();
        
        /*
        * Button and its click handlar.
        */
        Button btn = new Button("GWT Button");
        btn.addClickHandler(new ClickHandler() {
        
            @Override
        public void onClick(ClickEvent event) {
        lbl.setText("You clicked GWT Button!");
        }
        });        
        /*
        * adding label and button into Vertical Panel.
        */
        vPanel.add(lbl);
        vPanel.add(btn);        
        /*
        * Adding vertical panel into HTML page.
        */
        RootPanel.get().add(vPanel);
        }
    }

运行GWT Web应用程序

GWT Web应用程序以两种模式运行:

  • 开发模式:在这种模式下,Java代码会运行到JVM中
  • 生产模式:在这种模式下,GWT编译器将编译Java代码并创建在浏览器上运行的JavaScript。

在本教程中,我们将GWT Web应用程序运行到“ GWT Super Dev Mode”中,该模式在运行时编译Java代码并在浏览器上运行JavaScript。

现在复制URL:

输出: