使用Google Web Toolkit创建Web应用教程

PDF文件

google

web

toolkit

tutorial

下载需积分: 0 | 992KB | 更新于2024-08-02 | 100 浏览量 | 举报收藏

立即下载

"本资源是关于Google Web Toolkit (GWT) 的教程，旨在引导用户创建并测试基于GWT的Web应用程序。GWT是一个允许开发者使用Java语言开发前端应用的工具，它能将Java代码编译成JavaScript，同时提供了一个轻量级的服务器环境。教程分为三个步骤：创建GWT项目、测试默认项目组件以及检查项目文件结构。" 在Google Web Toolkit (GWT) 教程中，首先你需要创建一个GWT项目。这可以通过Google Plugin for Eclipse插件或GWT的命令行工具webAppCreator来完成。这些工具会自动生成项目所需的子目录和文件。创建项目后，你需要验证项目的配置是否正确，通过在开发模式下运行GWT启动应用。 **1. 创建GWT应用** 在Eclipse中创建StockWatcher应用是GWT初学者的一个常见实践。Eclipse因其广泛的可用性和免费性，被选为本教程的IDE。Google Plugin for Eclipse提供了一个用于创建GWT应用的向导。以下是创建应用的步骤： 1. 在Eclipse的工具栏上，点击“新建Web应用项目”按钮。 2. 配置新项目的属性，如项目名称（例如：StockWatcher）、模块名称（与项目名称相同）以及Web应用的包名。 3. 选择GWT版本和Web服务器设置，如Apache Tomcat或Jetty。 4. 完成向导，Eclipse将自动创建项目结构，包括src/main/java和src/main/webapp目录，以及必要的源代码和XML配置文件。 **2. 测试默认项目组件** 创建项目后，你可以通过Eclipse内置的开发服务器启动项目。这通常涉及到以下操作： 1. 右键点击项目，选择“GWT” -> “运行在开发模式下”，Eclipse会启动开发服务器并打开浏览器窗口显示应用。 2. 默认的StockWatcher应用可能包含一个简单的界面，例如一个输入框和按钮，可以输入股票代码并显示相关数据。 **3. 检查项目组件** 检查项目生成的文件和目录，了解GWT项目的组织结构： - `src/main/java`：包含Java源代码，通常有一个主模块类，继承自`com.google.gwt.core.client.EntryPoint`，这是GWT应用的入口点。 - `src/main/webapp`：包含Web应用的静态资源，如HTML、CSS和JavaScript文件，以及`WEB-INF`目录，其中包含`web.xml`部署描述符。 - `.gwt`目录：由GWT生成的编译结果和临时文件。 - `war`目录（如果存在）：发布时用到的Web应用结构。通过本教程，你将熟悉GWT的开发环境，学会如何利用Java进行前端开发，并理解GWT将Java代码转换为JavaScript的过程。随着学习深入，你还可以探索GWT提供的高级功能，如异步通信（RPC）、事件处理、UI布局以及国际化支持等。

implemented with the FlexTable widget will expand or collapse as the user

adds or removes stocks.

Buttons

Whenever possible, GWT defers to browsers' native user interface elements.

For instance, a Button widget becomes a true HTML <button> rather than a

synthetic button-like widget that's built, for example, from a <div>. This means

that GWT buttons render appropriately in different browsers and on different

client operating systems. The benefit of using native browser controls is that

they are fast, accessible, and most familiar to users. Also, they can be styled

with CSS.

Input Box

GWT provides several widgets to create fields that users can type in:

 TextBox widget, a single-line text box

 PassWordTextBox widget, a text box that visually masks input

 TextArea widget, a multi-line text box

 SuggestBox, a text box that displays a pre-configured set of items

StockWatcher users will type in a stock code which is single line of text;

therefore, implement a TextBox widget.

Label

In contrast with the Button widget, the Label widget does not map to the HTML

<label> element, used in HTML forms. Instead it maps to a <div> element that

contains arbitrary text that is not interpreted as HTML. As a <div> element, it is

a block-level element rather than an inline element.

<div class="gwt-Label">Last update : Oct 1, 2008 1:31:48 PM</div>

If you're interested in taking a peek at the API reference for the GWT widgets

you'll use to build the StockWatcher interface, click on the links in the table

below.

UI element

GWT implementation

a table to hold the stock data

FlexTable widget

two buttons, one to add stocks and one to

remove them

Button widget

an input box to enter the stock code

TextBox widget

Horizontal Panel

The two elements used to add a stock—the input box for typing in a new stock

symbol and the Add button—are closely related functionally and you want

keep them together visually. To lay them out side-by-side, you'll put the

TextBox widget and a Button widget in a horizontal panel. In the Java code,

you'll create a new instance of HorizontalPanel and name it addPanel.

Vertical Panel

You want to lay out the remaining elements vertically:

 the FlexTable widget for the stock table

 the Add Stock panel, which contains the input box and Add button

 the Label widget for the timestamp

You'll do this with a vertical panel. In the Java code, you'll create a new

instance of VerticalPanel and name it mainPanel.

Root Panel

There is one more panel you need that is not visible in the user interface: a

Root panel. A Root panel is the container for the dynamic elements of your

application. It is at the top of any GWT user interface hierarchy. There are two

ways you can use a Root panel, either to generate the entire body of the page

or to generate specific elements embedded in the body.

The Root panel works by wrapping an element in the HTML host page. By

default (that is, if you don't add any placeholders in the host page) the Root

panel wraps the body element. However, you can wrap any element if you

name it and then, when you call the Root panel, pass the name as a parameter.

You'll see how this works in the next two sections when you do it for

StockWatcher.

RootPanel.get() // Default. Wraps the HTML body element.

RootPanel.get("stockList") // Wraps any HTML element with an id of "stockList"

A host page can contain multiple Root panels. For example, if you're

embedding multiple GWT widgets or panels into a host page, each one can be

implemented independently of the others, wrapped in its own Root panel.

3. Embedding the application in the host page

To get the StockWatcher application to run in the browser, you need to embed

it in an HTML file, the HTML host page. The host page for the StockWatcher

project, StockWatcher.html, was generated by webAppCreator. For the starter

application, StockWatcher.html had an empty body element. As a result, the

Root panel wrapped the entire body element. Everything displayed in the

剩余86页未读，继续阅读

Andimeo

粉丝: 1

使用Google Web Toolkit创建Web应用教程

芯嵌STM32入门系列教程之二十三《STM32待机模式的使用》1

Google Web Toolkit开发实战

gwt_uibinder_i18n:Google Web Toolkit UiBinder 模板的简单 i18n 示例

使用Google Web Toolkit (GWT) 创建复杂浏览器应用

GWT Tutorial

gwt_tutorial

GWT 2.2 Tutorial and Developer Guide

Database Access in GWT – The Missing Tutorial

java1.6源码-javacc_gwt_tutorial:演示如何利用JavaCC6.1+使其与GWT兼容的源代码

Ionic框架入门教程：从零开始构建web应用

最新资源