Gwt教程之创建UI

shiren1118

浏览: 133893 次
性别:
来自: 吉林

最近访客更多访客>>

li361879355

yanguz123

haozi92

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

UI GWT Google 浏览器 JavaScript

Gwt 教程之 创建UI

创建UI

现在我们决定StockWatcher 有那些功能，之前我们已经讨论了如何编写让GWT 编译器可编译的Java 源代码。下面我们开始构建应用程序的UI 。

GWT 的UI 是由 widgets 和 panels 组成的。Widgets 提供了通用UI 元素模型如buttons , text boxes , 和trees 。Panels, 比如 DockPanel , HorizontalPanel , 和RootPanel , 包含widgets ，用于界定在浏览器中它们是如何布局的。你有很多种方式自定义widgets 。当然，你也可以在网上找到好的第三方widget 库。

Widgets 和panels 在所以的浏览器上工作方式一模一样。通过使用它们，你大可不必为每个浏览器写专门的代码。GWT 有一套完整的widgets 组件是可用的且"out of the box, " ，当然，你可以不必局限于GWT 给你提供的那些。

RootPanel

任何GWT UI 层次的上方，都有一个 RootPanel 。RootPanel 中通常包装了 HTML host page 中的一个实际元素。默认的RootPanel 包装的是the HTML host page 的<body> 元素。你可以通过调用 RootPanel.get() 方法来获得它的引用，你也可以获得页面中的其他元素。只需要指定那些页面元素的属性id ，然后把它传到 RootPanel.get(String) 方法中。

因此，你有2 种选择来构建你的GWT 应用程序的界面。你可以使用正常的静态HTML 构造应用程序界面，只需要在名为placeholder 元素处插入GWT widgets 和panels 。这种方式在集成已有程序时非常有用，此外，你的网页可以包含空的<body> 元素, 这样你就可以获得默认的RootPanel 的引用，然后在此基础上构建完全的GWT widgets 界面。

在 StockWatcher 例子中, 我们要在我们的HTML 中使用一个 placeholder 元素。继续打开网页文件(src/com/google/gwt/sample/stockwatcher/public/StockWatcher.html) ，用下面的HTML 替换掉它的内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>StockWatcher</title>

</head>

<body>

<h1>Stock Watcher</h1>

</body>

</html>

这段代码定义了页面的静态内容。和正常的html 一样，<title> 标签显示的是在浏览器中页面的标题。<script> 引用的是GWT 将要生成的JavaScript 源码。最后，<div> 标签包含了我们的GWT widgets 。这里设定它的id 属性是为了我们能够在GWT 中通过RootPanel 来访问它。

另外，在文件上方的HTML 4.01 Transitional DOCTYPE 声明设定了要渲染的引擎为"Standards Mode 标准模式" 它提供了更好的跨浏览器能力。如果你移除掉此行，页面将以"Quirks Mode" 渲染，这也就意味着老的浏览器问题都将存在。在某种情况下，如果你要集成的程序依赖于某个浏览器的时候，你可能会选择"Quirks Mode" 。但现在，我们使用的是"Standards Mode".

Panels and Widgets

现在我们需要使用GWT panels and widgets 来构建UI 的动态部分。the Getting Started guide 的开始向你展示的是StockWatcher 的最终效果。库存列表以表格的形式显示，下方是新文本框和增加按钮，底部显示的是最近更新的时间戳。由于UI 元素是垂直的堆栈形式。我们查看 widget gallery 会发现 VerticalPanel 就是我们需要的，我们要使用GWT VerticalPanel 和它的三个孩子节点。

第一个节点是库存列表自己。由于这是一个表格，我们再回到gallery 来查找HTMLTable ，页面显示的那样。他是抽象标示所以我们需要查找合适的子类。Grid 表格不会起作用，因为它不运行我们从表格中间移除一行( 我们需要从列表中移除库存的功能) 。另外，FlexTable 确实有一个removeRow(int) 方法，它也有方法设定单元格内容（按行列索引），如果需要的话可以自动扩展表格。迟早会有用的。

VerticalPanel 上的第二个节点是一个新文本框标记和增加按钮。我们想让它们显示在同一行，所以需要另外一个内嵌的panel 来完成布局。因此，我们使用HorizontalPanel ，且TextBox 和Button 作为其子节点。

最后, VerticalPanel 的第三个节点是最后更新的时间戳，它显示了一个简单的Label 。这个Label 窗口被设计成一个动态显示的非html 文本。

之后，看代码: 打开 StockWatcher 的切入点类（ entry point class ） (src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java) 用如下代码替换:

package com.google.gwt.sample.stockwatcher.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.FlexTable;

import com.google.gwt.user.client.ui.HorizontalPanel;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.RootPanel;

import com.google.gwt.user.client.ui.TextBox;

import com.google.gwt.user.client.ui.VerticalPanel;

public class StockWatcher implements EntryPoint {

private VerticalPanel mainPanel = new VerticalPanel();

private FlexTable stocksFlexTable = new FlexTable();

private HorizontalPanel addPanel = new HorizontalPanel();

private TextBox newSymbolTextBox = new TextBox();

private Button addButton = new Button("Add");

private Label lastUpdatedLabel = new Label();

public void onModuleLoad() {

// set up stock list table

stocksFlexTable.setText(0, 0, "Symbol");

stocksFlexTable.setText(0, 1, "Price");

stocksFlexTable.setText(0, 2, "Change");

stocksFlexTable.setText(0, 3, "Remove");

// assemble Add Stock panel

addPanel.add(newSymbolTextBox);

addPanel.add(addButton);

// assemble main panel

mainPanel.add(stocksFlexTable);

mainPanel.add(addPanel);

mainPanel.add(lastUpdatedLabel);

// add the main panel to the HTML element with the id "stockList"

RootPanel.get("stockList").add(mainPanel);

// move cursor focus to the text box

newSymbolTextBox.setFocus(true);

}

我们所做的仅是使用GWT 的 widets 和panels 构建一个简单的界面而已。我们是自底向上实现的，首先通过类属性来初始化每个widget/panel 。之后在onModuleLoad() 方法中，我们设定了FlexTable 的首行，并把它的各个子节点加到panels 上。最后一步通过我们的HTML 页面上名为stockList 的<div> 元素，把我们外部的VerticalPanel 增加到RootPanel 上。

测试界面

是时候来测试一下我们做的改变了。保存已编辑的文件，在hosted 模式下运行StockWatcher （在eclipse 中，点击Run 按钮，如果你使用其他IDE 的话，运行 StockWatcher-shell ），你会看到StockWatcher 在hosted 模式下下浏览的原始形式。

正如你所看到的，当前我们所做的不是为了拿任何的设计奖，演示而已，我们之后会增加一些CSS 。StockWatcher 真正缺乏的是可交互性：该界面实际上暂时没有做任何事---- 让我们来通过增加一些事件监听器完成它吧!

详见GWT教程之增加事件监听器

7
顶

1
踩

分享到：

Gwt 教程之实现客户端功能 | GWT教程之增加事件监听器

2008-12-18 21:49
浏览 5981
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论