jbpm5.1介绍（12）

转载

wx61ee58d59725e 2022-03-10 15:54:13 博主文章分类：java

GWT是什么

如今，编写网络应用程序是一个单调乏味且易于出错的过程。开发人员可能要花费 90% 的时间来处理浏览器行话。此外，构建、重复使用以及维护大量 JavaScript 代码库和 AJAX 组件可能困难且不可靠。Google Web Toolkit (GWT) 允许开发人员使用 Java 编程语言快速构建和维护复杂而又高性能的 JavaScript 前端应用程序，从而降低了开发难度，尤其是与 Eclipse Google 插件结合使用时，优势更明显。

google的官方说的很详细

http://code.google.com/intl/zh-CN/webtoolkit/overview.html

安装eclipse和插件

Update sites

If you are already familiar with installing Eclipse plugins, you can just use the update site URL below for your version of Eclipse.

Eclipse 3.7 (Indigo)

Eclipse 3.6 (Helios)

Eclipse 3.5 (Galileo)

使用群体

这些教程的目的是为那些希望使用Google网页工具包编写丰富的AJAX应用程序的开发。您可能是一个Java开发人员希望能够编写的Web应用程序时，应用的面向对象编程，并充分利用的工具，在您的Java IDE的软件工程原则。或者您可能GWT的能力与多种浏览器的排列的JavaScript生成高度优化的JavaScript大师好奇。 HTML，CSS和Java的知识虽然是假设，它并不需要运行这些教程。

开始之前

开始之前这些教程中，我们假设你做了以下工作：

•安装了Java SDK。

如果你没有一个最新版本的Java SDK安装，下载并安装Sun Java标准版SDK。

•安装Eclipse或您最喜爱的Java IDE。

在这些教程中，我们使用Eclipse，因为它是开源的。但是，GWT不配合你的Eclipse。您可以使用的IntelliJ，NetBeans或你喜欢的任何Java IDE。如果您使用一个Java IDE Eclipse的其他截图和一些在本教程中的具体说明会有所不同，但基本的GWT的概念将是相同的。

如果您的Java IDE不包括Apache Ant的支持，你可以下载并解压缩Ant来轻松编译和运行GWT应用程序。

•安装Eclipse的谷歌插件。

谷歌为Eclipse插件添加到Eclipse的功能，为创建和发展GWT应用程序。

•下载Google Web工具包。

Google网页工具包可以下载Eclipse的谷歌插件。另外，下载您的操作系统的谷歌Web工具包的最近期的分布。

•解压目录中的GWT分布，你要运行它。

GWT没有一个安装程序。你需要的所有文件，运行和使用GWT是位于中提取的目录。

您也可选择做到以下几点：

•安装谷歌的App Engine SDK。

谷歌的App Engine允许你运行的Java Web应用程序，包括GWT应用程序，Google的基础设施。在App Engine SDK可以下载Eclipse的谷歌插件。另外，分别用于Java的App Engine SDK下载。

GWT的教程

开始从头开发StockWatcher应用程序与谷歌Web工具包。您将学习创建一个GWT项目，建立与GWT的wigdets板，代码在Java语言中的客户端功能，在托管模式下的调试用户界面，应用CSS样式的Java编译成JavaScript，运行中的应用Web模式。

客户机/服务器通信

•通过GWT的RPC与服务器通信。

添加服务器使用GWT RPC调用。您将学习如何进行异步调用，序列化的Java对象，并处理异常。

•通过HTTP检索JSON数据

发出HTTP请求从服务器检索JSON数据。同样的技术也可用于检索XML数据。

国际化

•GWT应用程序的国际化

翻译成另一种语言使用静态字符串国际化的一个GWT应用程序的用户界面。

测试

•使用JUnit进行单元测试

GWT应用程序的使用JUnit的单元测试。

谷歌的App Engine

•GWT和谷歌的App Engine

GWT应用程序部署到App Engine。

入门

在本教程中，你将会写这个简单的AJAX应用程序，StockWatcher。

继续前进，尝试StockWatcher出来。添加一些股票代码，看看它是如何工作的。

在建设StockWatcher过程中，您将学习如何GWT提供的工具为您：

写在Java的浏览器应用程序，使用您所选择的Java IDE

调试Java在托管模式模拟浏览器体验

交叉编译你的Java代码到高度优化的JavaScript

保持一个多个浏览器的实现代码（JavaScript）的基地（JavaScript）

AJAX应用程序开发过程中使用GWT

本入门教程分为8节，一个典型的应用程序开发周期。基于前面的每个部分。在这个基本StockWatcher实现，所有的功能是编码的客户端上。服务器端编码和客户机/服务器通信是覆盖在其他教程。

步骤1：创建一个GWT项目

在这一点上，你下载了谷歌Web工具包的最近期的分布。

在本节中，您将创建使用Eclipse的谷歌插件或GWT的命令行实用工具webAppCreator StockWatcher项目。这些公用事业发电项目的子目录和文件，你需要开始做的工作。为了测试你的项目配置是否正确，你会在托管模式下运行GWT starter应用程序。然后，您将检查所创建的项目文件。

1。创建一个GWT应用程序

创建StockWatcher应用程序（使用Eclipse）

使用GWT的好处之一是，你可以利用的工具，如重构，代码完成，调试，可在一个Java IDE。在本教程中，我们使用Eclipse，因为它是广泛使用和自由。然而，随意使用您喜欢的IDE。

谷歌插件为Eclipse包含一个向导，用于创建GWT应用程序。下面是创建一个启动应用程序的步骤。

在工具栏上，单击“新建Web应用程序项目的按钮图标。

填写项目的细节：

输入项目名称“StockWatcher”。

输入包“com.google.gwt.sample.stockwatcher”。

请确保使用Google Web Toolkit的检查，并选择使用默认SDK（GWT）是。

（可选）如果您使用谷歌应用程序引擎，请检查并确定使用Google App Engine是使用默认的SDK（应用引擎）是选定的。

如果你没有安装的软件开发工具包，当你安装Eclipse的谷歌插件，你应该单击“配置的SDK...到指定的GWT（和在App Engine SDK）解压缩的目录。

点击Finish按钮。

与GWT1.6开始，已被合并前的命令行工具projectCreator和applicationCreator的webAppCreator。

创建StockWatcher应用程序。

在命令行，运行webAppCreator，并把它传递以下参数：

webAppCreator -out StockWatcher com.google.gwt.sample.stockwatcher.StockWatcher

超时参数指定的目录放置生成的文件，最后一个参数是GWT模块的名称。

提示：如果您包括GWT的命令行工具，在你的PATH环境变量，你不会有调用由他们指定的完整路径。

GWT webAppCreator生成的项目子目录和文件，你需要开始。

Created directory StockWatcher/src
Created directory StockWatcher/war
Created directory StockWatcher/war/WEB-INF
Created directory StockWatcher/war/WEB-INF/lib
Created directory StockWatcher/src/com/google/gwt/sample/stockwatcher
Created directory StockWatcher/src/com/google/gwt/sample/stockwatcher/client
Created directory StockWatcher/src/com/google/gwt/sample/stockwatcher/server
Created file StockWatcher/src/com/google/gwt/sample/stockwatcher/StockWatcher.gwt.xml
Created file StockWatcher/war/StockWatcher.html
Created file StockWatcher/war/StockWatcher.css
Created file StockWatcher/war/WEB-INF/web.xml
Created file StockWatcher/src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java
Created file StockWatcher/src/com/google/gwt/sample/stockwatcher/client/GreetingService.java
Created file StockWatcher/src/com/google/gwt/sample/stockwatcher/client/GreetingServiceAsync.java
Created file StockWatcher/src/com/google/gwt/sample/stockwatcher/server/GreetingServiceImpl.java
Created file StockWatcher/build.xml
Created file StockWatcher/README.txt
Created file StockWatcher/.project
Created file StockWatcher/.classpath
Created file StockWatcher/StockWatcher.launch
Created file StockWatcher/war/WEB-INF/lib/gwt-servlet.jar

目录结构

/src/com/google/gwt/sample/stockwatcher 包含GWT模块的定义和初始应用程序文件。

/war 静态资源可以公开服务，如图像文件，样式表和HTML主机网页。

/war/WEB-INF Java Web应用程序文件。

/war/WEB-INF/lib Java Web应用程序库。

开始使用GWT1.6以后静态文件都被移到/war下

创建的文件

StockWatcher.gwt.xml

GWT模块定义

StockWatcher.html

主网页

StockWatcher.css

应用样式表

web.xml中的

Java Web应用程序描述符

StockWatcher.java

GWT切入点类

GreetingService.java，GreetingServiceAsync.java，GreetingServiceImpl.java

GWT的样品RPC类

gwt-servlet.jar

GWT服务器运行时库

脚本创建

build.xml文件

在托管模式下运行的应用程序或GWT编译器命令行调用Ant构建文件。

创建Eclipse的文件

。项目

。类路径

StockWatcher.launch

要看到webAppCreator选项的完整列表，请参阅命令行工具，webAppCreator。

项目结构的更多信息，请参阅开发人员指南，目录/包公约。

2。测试的默认项目的组成部分

要检查所有项目组件创建，运行在托管模式下启动应用程序。在托管模式下，你可以在浏览器中的应用与互动，就像你当它的最终部署。

运行在托管模式下（从Eclipse）应用程序

在Package Explorer视图中，选择StockWatcher项目。

在工具栏上，单击运行按钮（Web应用程序运行）。

运行托管模式（从Eclipse）应用程序

webAppCreator创建一个Ant构建，目标是在托管模式下运行的应用程序的文件。

在命令行中，改变StockWatcher目录

执行：

ant hosted

提示：如果你在你的PATH环境变量的Ant命令行工具，你不会有调用由他们指定的完整路径。

GWT的打开两个窗口，托管模式浏览器和发展外壳或控制台。发展外壳包含一个日志查看器来显示状态和错误消息。托管模式浏览器包含起动应用程序。

jbpm5.1介绍（12）_java

GWT与起动的应用程序来帮助您测试所有组件的安装和配置之前，你开始发展船舶。当你开始编写的StockWatcher应用程序，你会替换为自己的首发的应用程序代码。

要终止起动的应用程序，从GWT菜单选择退出的GWT

3。研究项目的组成部分

让我们来看看一些生成的文件，看他们如何结合在一起，形成GWT项目。

模块XML文件

打开模块XML文件，StockWatcher/src/com/google/gwt/sample/stockwatcher/StockWatcher.gwt.xml.

它包含GWT模块，收集资源，包括一个GWT应用程序或共享的包的定义。默认情况下，StockWatcher继承每个项目所需的核心GWT功能。另外，您可以指定其他GWT模块继承。

在模块XML文件，您可以指定您的应用程序的入口点类。为了编译，一个GWT模块必须指定一个切入点。如果一个GWT模块没有切入点，那么它只能被继承其他模块。它可能包括其他的模块，其模块XML文件中指定的入口点。如果这样，那么你的模块有多个入口点。每个入口点是顺序执行。

默认情况下，StockWatcher使用两个样式表：GWT的默认样式表，standard.css（这是通过继承的主题引用），并应用样式表，这是由webAppCreator生成的StockWatcher.css。在本教程后面，您将学习如何覆盖默认的GWT的风格。

主网页

打开主机页面，StockWatcher/战争/ StockWatcher.html。

为Web应用程序中的代码执行在一个HTML文档。在GWT中，我们称这种宿主页面。例如，为StockWatcher项目的宿主页面StockWatcher.html。

宿主页面引用应用样式表，StockWatcher.css。

主机页面引用（由GWT产生）负责页面上的动态元素的JavaScript源代码的路径。整个身体的元素的内容可以动态生成的，例如，因为它与初始应用程序。但是，当您执行StockWatcher应用程序时，你会使用静态和动态元素的混合。您将创建一个HTML<DIV>元素作为占位符使用动态生成的页面部分。

选择Quirks模式与标准模式

为了提供更好的跨浏览器兼容性，GWT设置的HTML 4.01过渡的DOCTYPE声明。这台渲染引擎“Quirks模式”。如果你，而不是要呈现在“标准模式”的应用程序，还有一些其他文档类型，您可以使用武力的浏览器这个渲染模式。在一般情况下，GWT应用程序将在“标准模式”一样好“Quirks模式”，但在一些情况下，使用面板和部件可能无法正确呈现。此问题已得到大大改善，因为GWT 1.5的，和正在做更多的工作来解决这个问题一劳永逸。

保留浏览器历史记录

GWT提供了帮助满足您的应用程序，一个网页的用户的期望，在他们的能力，在这种情况下，作为一个多页的向导或购物车/结帐情况下使用的浏览器的后退按钮的具体机制。宿主页面中包含IFRAME标记纳入GWT应用程序的历史支持所必需的。

要了解GWT应用程序的管理浏览器历史记录的更多信息，请参阅开发人员指南，历史。

应用样式表

打开应用样式表，StockWatcher/战争/ StockWatcher.css。

样式表是与每个项目相关联。默认情况下，应用程序的样式表，StockWatcher.css，包含起动应用程序的样式规则。在本教程中的应用样式“部分中，您将取代起动应用程序的样式规则，为StockWatcher应用程序的样式规则。

正如任何网页，您可以指定多个样式表。在他们的继承顺序列出多个样式表，也就是说，在最后一个样式表中列出的最具体的样式规则。

Java源代码

打开的StockWatcher入口点类，StockWatcher/src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java.

目前，StockWatcher.java包含起动应用程序的Java源代码。在本教程中，您将与客户端代码为StockWatcher替换此代码。

StockWatcher类实现了GWT接口的EntryPoint。它包含的方法onModuleLoad。由于StockWatcher类StockWatcher的模块定义的入口点类中指定的，当您启动StockWatcher onModuleLoad方法被称为。

StockWatcher类继承通过其他GWT模块，在StockWatcher模块定义（StockWatcher.gwt.xml）的功能。例如，构建用户界面时，你将能够包括从包com.google.gwt.user.client.ui中的类型和资源，因为它是GWT的核心功能的一部分，包含在GWT模块com.google gwt.user.User。

下一步是什么

此时，您已经创建为StockWatcher应用程序的存根文件，并加载到Eclipse中（或任何Java IDE中你喜欢）项目。

现在，您可以设计的StockWatcher应用程序。

第2步：设计中的应用

此时，您已经创建的存根文件，你需要开始编码StockWatcher。

在本节中，你会检讨的功能要求和设计用户界面。

检查的功能要求。

标识的用户界面设计的元素。

1。检查的功能要求

最初，你想要的StockWatcher应用程序做6件事。

提供用户的能力，新增股票。（供应非法字符或现有股票在输入简单的验证。）

显示每个股票的以下信息：符号，价格自上次刷新，更改。

用户提供的能力，从列表中删除的股票。

刷新的股票价格。

自上次刷新数字和百分比计算的变化。

显示显示最后更新的时间戳。

2。识别的用户界面设计的元素

jbpm5.1介绍（12）_eclipse_02

研究StockWatcher的功能需求后，您决定您需要这些UI元素。

一个表：持有股票数据

两个按钮：添加股票和删除它们

一个输入框：输入股票代码

时间戳：显示上次刷新的时间和日期

设计团队建议增加以下内容。

一个标志

一个头

表明是否在价格上的变化是积极或消极的颜色

包括静态元素

GWT没有规定如何打好你的HTML页面。 GWT应用程序可以占用整个浏览器窗口，因为它在启动应用程序。或者，它可以被嵌入在现有的页面，因为它是在本教程的入门页面。

StockWatcher应用程序包含静态和动态的元素。谷歌代码标识和“StockWatcher”头是在HTML宿主页面的静态元素。编程使用GWT小部件和面板创建的所有其他元素。

下一步是什么

在这一点上，你检讨StockWatcher的功能要求。你有一个清晰的思路是什么StockWatcher。你知道你需要实现什么UI元素，您想如何打好出来。

现在，您可以建立使用GWT小部件和面板的用户界面。

第三步：构建用户界面

此时，您已经创建的StockWatcher项目的组成部分，并检讨其功能要求和用户界面设计。在本节中，您将构建GWT小部件和面板的用户界面了。

选择GWT小部件需要实现的UI元素。

选择所需的GWT UI元素的布局面板。

嵌入在宿主页面，StockWatcher.html的应用程序。

实施StockWatcher.java部件和面板。

测试在托管模式下的布局。

GWT的盾牌你太多担心跨浏览器兼容。如果构建GWT小部件和复合材料的界面，应用程序将同样的Firefox，IE浏览器，

Opera和Safari的最新版本。然而，DHTML的用户界面仍然显着离奇，因此，你还必须在每个浏览器测试您的应用程序彻底。

1。选择GWT小部件来实现UI元素

首先，看在构件库，并选择每个UI元素的GWT部件。

在构件库的部件有一个默认的样式，所以他们看起来不完全因为他们将在最终实施的StockWatcher。不要担心这个问题。首先，你会获得部件的工作重点。然后，在应用样式时，你会改变自己的外观与CSS。

库存数据表

GWT提供了一个特殊的表部件称为FlexTable。 FlexTable部件根据需求创建的细胞。这正是你需要含有股票数据的表，因为你不知道用户将增加多少股票。 FlexTable部件实现一个表将展开或折叠，为用户增加了或删除股票。

按钮

只要有可能，GWT按照浏览器的原生用户界面元素。例如，一个按钮构件成为一个真正的HTML<button>，而不是一种人工合成的类似按钮的控件的内置，例如，从一个<div>的。这意味着，在不同浏览器和不同的客户端操作系统适当GWT按钮呈现。使用本地浏览器控件的好处是，他们的快速，方便，和最熟悉的用户。此外，他们可以用CSS样式。

输入框

GWT提供了几个部件来创建字段，用户可以输入：

单行文本框TextBox的部件，

PassWordTextBox部件，一个文本框，视觉口罩输入

多行文本框TextArea的部件，

SuggestBox，显示项目的预配置设置

StockWatcher用户输入一个股票代码，这是单行文本，因此，实现一个TextBox部件。

标签

按钮构件的对比，“标签”widget不<label>元素的HTML，HTML表单中使用的地图。相反，它映射到一个<div>元素，其中包含任意的文本，

而不是解释为HTML。作为一个<div>元素，它是一个块级元素，而不是一个内联元素。

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

如果你有兴趣在GWT小部件，您将使用构建的StockWatcher界面API参考PEEK，单击下面的链接表中。

2。选择GWT的面板布局的UI元素

现在你知道你会使用什么部件，你会决定如何打好他们使用GWT面板。 GWT提供了几种类型的面板来管理布局。面板可嵌套在其他面板。

这是类似于铺设您的网页在HTML中使用嵌套的div元素或表。 StockWatcher，你会使用嵌套在一个垂直面板的水平面板。

jbpm5.1介绍（12）_java_03

水平面板

这两个用于增加对股票的输入框，键入一个新的股票代号“添加”按钮，是密切相关的功能，你想要让他们在一起视觉元素。要打好他们并排，

你会在一个水平面板TextBox的部件和一个Button组件。在Java代码中，您将创建一个新HorizontalPanel实例，并命名它addPanel。

垂直面板

你想奠定了剩余的元素垂直。

FlexTable部件：股市表

新增股份面板：包含输入框和添加按钮

标签小部件：时间戳

你会做一个垂直面板。在Java代码中，您将创建一个新VerticalPanel实例，并命名它mainPanel中。

根面板

有更多的面板，您需要在用户界面，这是不可见的：根面板。根面板是为您的应用程序的动态元素的容器。这是在任何GWT用户界面层次结构的顶部。

有两种方法可以使用一个根面板，以生成页面的整个身体或嵌入在体内产生的特定元素。

根面板包装在HTML宿主页面元素。默认情况下（也就是说，如果你没有在宿主页面中添加任何占位符）根面板包裹身体的元素。然而，

你可以换任何元素，如果你的名字，然后，当你调用根面板，作为一个参数传递的名称。你会看到如何在接下来的两部分作品时，你为StockWatcher。

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

主机页面可以包含多个根面板。例如，如果你嵌入到主机上的多个GWT小部件或面板，每一个都可以独立的实施，在自己的根面板包裹。

3。嵌入在主机上的应用

为了得到StockWatcher应用程序运行在浏览器中，你需要嵌入在一个HTML文件，HTML宿主页面。 StockWatcher项目，StockWatcher.html，主机页面生成webAppCreator。对于起动的应用程序中，StockWatcher.html有一个空体元素。因此，根面板包裹着整个身体的元素。在浏览器中显示的一切都是动态的，内置与GWT。如果您的应用程序没有静态元素，你就不会需要编辑的HTML宿主页面。

然而，StockWatcher您将使用一些静态的HTML文本和图像，除了动态元素。您将嵌入在浏览器页面使用一个占位符，<div>元素命名stockList中的GWT应用程序。这个执行策略是嵌入到现有的应用程序GWT特别有用。

打开主机页面，StockWatcher/war/ StockWatcher.html。

在头元素，更改标题文本StockWatcher。

在body元素中，添加一个<H1>标题，StockWatcher。

在body元素中，添加一个<div>元素，并给它一个ID stockList。

从起动项目申请中删除不需要的元素。

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

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="StockWatcher.css">

    <title>StockWatcher</title>

    <script type="text/javascript" language="javascript" src="stockwatcher/stockwatcher.nocache.js"></script>
  </head>

  <body>

    <h1>StockWatcher</h1>

    <div id="stockList"></div>

    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <h1>Web Application Starter Project</h1>
    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">Please enter your name:</td>

      </tr>
      <tr>
        <td id="nameFieldContainer"></td>
        <td id="sendButtonContainer"></td>
      </tr>
    </table>
  </body>
</html>

注：HTML注释已略。

4。执行部件和面板

接下来，您将构建GWT小部件和面板的用户界面。

大部分的UI就会显示StockWatcher启动。所以你执行他们在onModuleLoad方法。在本节中，你会：

实例化每个部件和面板。

创建的表中持有的股票数据。

铺陈部件使用添加股票面板和主面板。

副根面板的主要面板。

将光标移动到输入框的焦点。

您可以按照本节的教程一步一步，你可以剪切和粘贴在年底总结的整个代码块。

1。实例化每个部件和面板

实例化每个部件和面板使用类字段初始。

打开StockWatcher/src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java.

StockWatcher.java，起动应用程序用下面的代码替换所有现有的代码。

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

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 addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label();

  /**
   * Entry point method.
   */
  public void onModuleLoad() {
    // TODO Create table for stock data.
    // TODO Assemble Add Stock panel.
    // TODO Assemble Main panel.
    // TODO Associate the Main panel with the HTML host page.
    // TODO Move cursor focus to the input box.

  }

}

Eclipse的标志变量的定义，因为他们不能得到解决的类型。

提示：其中一个方法，你可以利用Eclipse是使用它的“建议”功能添加所需的进口报关单。

包括相应的进口报关单。

在X获得建议。

通过按回车键，选择“导入的EntryPoint（com.google.gwt.core.client.EntryPoint）”。

申报进口报关单以同样的方式解决所有其他的错误。如果你不使用Eclipse，剪切和粘贴突出显示的代码。

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.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 addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label();

  /**
   * Entry point method.
   */
  public void onModuleLoad() {
    // TODO Create table for stock data.
    // TODO Assemble Add Stock panel.
    // TODO Assemble Main panel.
    // TODO Associate the Main panel with the HTML host page.
    // TODO Move cursor focus to the input box.

  }

}

2。创建一个股票数据表

实施表，将持有的股票数据。设置标题行显示当用户启动StockWatcher。要做到这一点，使用setText方法建立在每列的标题标签：符号，价格，更改，删除。

库存数据创建表。

在onModuleLoad方法，取代TODO注释突出显示的代码。

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.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 addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label();

  /**
   * Entry point method.
   */
  public void onModuleLoad() {
    // Create table for stock data.
    stocksFlexTable.setText(0, 0, "Symbol");
    stocksFlexTable.setText(0, 1, "Price");
    stocksFlexTable.setText(0, 2, "Change");
    stocksFlexTable.setText(0, 3, "Remove");

    // TODO Assemble Add Stock panel.
    // TODO Assemble Main panel.
    // TODO Associate the Main panel with the HTML host page.
    // TODO Move cursor focus to the input box.

  }

}

3。制订的部件

要铺陈的部件，您将装配两个小组，新增股票面板和主面板。首先组装的添加库存面板，水平面板包装输入框和“添加”按钮。然后组装主面板，垂直面板，指定库存清单表，新增股票面板，和时间戳的布局。

布置在新增股票面板和主面板的部件。

在onModuleLoad方法，取代TODO注释突出显示的代码。

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.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 addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label();

  /**
   * Entry point method.
   */
  public void onModuleLoad() {
    // Create table for stock data.
    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(addStockButton);

    // Assemble Main panel.
    mainPanel.add(stocksFlexTable);
    mainPanel.add(addPanel);
    mainPanel.add(lastUpdatedLabel);

    // TODO Associate the Main panel with the HTML host page.
    // TODO Move cursor focus to the input box.

  }

}

4。副根面板的主要面板

为了嵌入在HTML宿主页面的任何GWT部件或面板，它必须包含在根面板。与垂直面板的根面板，mainPanel中关联。根面板包装，有一个“stocklist”的ID StockWatcher的宿主页面的HTML元素。在这种情况下，它是一个<div>元素。

主面板与主机通过根面板页关联。

在onModuleLoad方法，取代TODO注释突出显示的代码。

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.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 addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label();

  /**
   * Entry point method.
   */
  public void onModuleLoad() {
    // Create table for stock data.
    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(addStockButton);

    // Assemble Main panel.
    mainPanel.add(stocksFlexTable);
    mainPanel.add(addPanel);
    mainPanel.add(lastUpdatedLabel);

    // Associate the Main panel with the HTML host page.
    RootPanel.get("stockList").add(mainPanel);

    // TODO Move cursor focus to the input box.

  }

}

Eclipse的标志RootPanel和建议，包括进口报关单。

包括进口报关单。

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

5。光标焦点移动到输入框中

最后，移动光标焦点的输入框，StockWatcher负载时，用户可以开始增加库存。

在onModuleLoad方法，取代TODO注释突出显示的代码。

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 addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label();

  /**
   * Entry point method.
   */
  public void onModuleLoad() {
    // Create table for stock data.
    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(addStockButton);

    // Assemble Main panel.
    mainPanel.add(stocksFlexTable);
    mainPanel.add(addPanel);
    mainPanel.add(lastUpdatedLabel);

    // Associate the Main panel with the HTML host page.
    RootPanel.get("stockList").add(mainPanel);

    // Move cursor focus to the input box.
    newSymbolTextBox.setFocus(true);

  }

}

摘要

这里的，你做了什么，这点。

5。测试布局

在你的Ajax应用开发的GWT使用的一个好处是，你可以看到你的代码更改的影响，只要你刷新托管模式浏览器。所以，你可以看到你的变化，无论您是开发或调试Eclipse中，在调试模式下运行StockWatcher。然后你就可以Java和Debug透视图之间切换，而无需重新启动StockWatcher。

保存编辑过的文件。

保存StockWatcher.java

在托管模式下启动StockWatcher。

从Eclipse菜单栏中，选择Run> Debug

如果你不使用Eclipse，进入命令行ant host

托管模式浏览器显示您的StockWatcher应用程序的第一次迭代。

jbpm5.1介绍（12）_java_04

StockWatcher：建设中的UI元素

StockWatcher显示的Flex表头，输入框和“添加”按钮。您还没有设置标签的文本，但如此，它不会显示。你会做到这一点后，你已经实现了股票刷新机制。

保留在托管模式下运行StockWatcher。

在本教程的其余部分，你会经常测试在托管模式下的变化。

刷新托管模式

你并不总是需要修改源代码，重新启动后，在托管模式下的应用。相反，只要按一下在托管模式浏览器的“刷新”按钮保存您的更改后，托管模式会自动重新编译您的应用程序并打开新的版本。

最佳实践：您可能会注意到您所做的更改生效，有时即使你不刷新托管模式。此行为是一种托管模式下编译的代码交互的方式，的结果，但它并不总是可靠的。具体来说，它只有当你对现有功能的轻微变化。要确保你的变化，使一个习惯，总是刷新更改后的托管模式浏览器。

下一步是什么

在这一点上，你已经建立了实施GWT小部件和面板的StockWatcher的基本UI组件。部件不响应任何输入。

现在你可以在客户端上的事件处理代码。您将电线侦听事件的部件，并编写响应这些事件的代码。

第4步：管理客户端上的事件

此时，您已经创建的接口的所有元素。像许多用户界面框架，GWT是基于事件的。这意味着，在响应某些事件发生执行的代码。大多数情况下，该事件是由用户触发，使用鼠标或键盘进行交互的应用程序界面。

在本节中，你会连接你的部件，听取和处理鼠标和键盘事件。

审查的功能要求。

侦听事件。

对事件作出响应。

测试事件处理。

1。回顾事件处理的要求

让我们回顾一下StockWatcher要求，看看有什么事件发生。

任务UI事件（触发机制）响应

用户输入一个股票代码。单击“添加”按钮

或按返回在输入框中。

验证输入。

请检查如果股票已经存在。

添加一个新行。

创建一个删除按钮。

用户删除从表中的股票。按下删除“按钮。

从表中删除行。

GWT提供了不同的事件处理程序接口。要处理的添加和删除按钮的单击事件，你会使用对clickHandler接口。要处理键盘在输入框中事件，你会使用KeyPressHandler接口。

与GWT1.6开始，对clickHandler，KeyDownHandler，KeyPressHandler，KeyUpHandler接口取代现在已经过时的ClickListener和KeyBoardListener接口。

2。监听事件

事件处理程序接口

在GWT的事件使用事件处理程序接口模式类似其他用户界面框架。要订阅一个事件，你传递一个特定的事件处理程序接口，以适当的部件。事件处理程序接口定义一个或多个方法，部件，然后调用公布（发布）的事件。

处理鼠标事件

StockWatcher用户可以输入股票代码的方法之一是通过用鼠标点击“添加”按钮。

您将处理传递给它的对象，实现对clickHandler接口的添加按钮的Click事件。在这种情况下，你会使用一个匿名内部类来实现ClickHandler。在部件上的用户点击时，对clickHandler接口有一个方法的onClick，其中火灾。

当用户点击添加按钮，StockWatcher应该响应加入股票的库存表。因此，要处理单击事件，调用addStock的方法。你有没有写addStock方法，您将创建一个存根，然后在下一节代码。

“添加”按钮添加事件处理程序，因此它可以接收click事件。

在Stockwatcher.java，在onModuleLoad方法，剪切和粘贴的代码说：“听”添加“按钮的鼠标事件。”下面就是突出。

Eclipse的标志ClickHandler和建议包括进口报关单。

包括ClickHandler和ClickEvent的进口报关单。

Eclipse的标志addStock。

StockWatcher.java，创建的addStock方法存根。

选择Eclipse的快捷方式，创建类型'StockWatcher'（）的方法addStock。或复制和粘贴代码如下。

注：根据您的Eclipse配置，它可能会创建一个受保护的访问修饰符addStock方法。你是不是要子类StockWatcher，所以以后当你实施addStock方法，你会改变其进入私人。

package com.google.gwt.sample.stockwatcher.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.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 addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label();

  /**
   * Entry point method.
   */
  public void onModuleLoad() {
    // Create table for stock data.
    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(addStockButton);

    // Assemble Main panel.
    mainPanel.add(stocksFlexTable);
    mainPanel.add(addPanel);
    mainPanel.add(lastUpdatedLabel);

    // Associate the Main panel with the HTML host page.
    RootPanel.get("stockList").add(mainPanel);

    // Move cursor focus to the input box.
    newSymbolTextBox.setFocus(true);

    // Listen for mouse events on the Add button.
    addStockButton.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        addStock();
      }
    });

  }

  /**
   * Add stock to FlexTable. Executed when the user clicks the addStockButton or
   * presses enter in the newSymbolTextBox.
   */
  private void addStock() {
    // TODO Auto-generated method stub

  }

}

实现注意：对于规模较小的应用，如StockWatcher，处理事件相对较少，使用匿名内部类，得到用最少的代码做的工作。不过，如果你有大量的订阅事件的事件处理程序，这种方法可以是低效的，因为它可能导致创建许多单独的事件处理程序对象。在这种情况下，最好有一个类实现事件处理程序接口和处理来自多个事件出版商的事件。您可以通过调用它的getSource（）方法来区分事件源。这使得更好地利用内存，但需要稍微的代码。有关代码示例，请参阅开发人员指南，活动和处理。

处理键盘事件

除了使用“添加”按钮，StockWatcher用户可以输入股票代码，而不考虑他们的手从键盘上按在输入框中返回。

要订阅键盘事件，你可以调用addKeyPressHandler（KeyPressHandler）的方法，并传递给它一个KeyPressHandler。

挂钩的KeyPress事件处理程序的输入框，newSymbolTextBox。

在onModuleLoad方法，剪切和粘贴的代码评论说：“听着键盘事件在输入框中。”下面就是突出。

// Listen for mouse events on the Add button.
    addStockButton.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        addStock();
      }
    });

    // Listen for keyboard events in the input box.
    newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() {
      public void onKeyPress(KeyPressEvent event) {
        if (event.getCharCode() == KeyCodes.KEY_ENTER) {
          addStock();
        }
      }
    });

  }

  /**
   * Add stock to FlexTable. Executed when the user clicks the addStockButton or
   * presses enter in the newSymbolTextBox.
   */
  private void addStock() {
    // TODO Auto-generated method stub

  }

}

Eclipse的标志KeyPressHandler和建议包括进口报关单。

包括进口报关单。

import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyPressEvent;
import com.google.gwt.event.dom.client.KeyPressHandler;

事件处理程序，现在有线和事件的准备。你的下一步是填写存根addStock方法。

3。响应用户事件

此时，StockWatcher应倾听用户输入信号的用户输入一个股票代码，鼠标或键盘事件。所以接下来，您将测试事件处理程序接口是否是由编码StockWatcher要当它检测到一个事件响应工作：添加股票。 StockWatcher响应客户端上没有任何请求发送回服务器，或重新加载HTML页面。

股票添加到库存表

StockWatcher，用户将进入的股票，他们要监控到输入框在一次的股票代码。当他们按Enter或单击“添加”按钮，你想StockWatcher答复如下：

验证输入。

检查重复。

新增的股票。

添加一个按钮从列表中删除的股票。

在本节中，你会第一个响应代码，验证输入，只是为了看看，如果事件处理程序接口是工作。在下一节中，客户端功能进行编码，你将代码其余的步骤，添加股票。

addStock方法，您将实现此功能。

验证输入在文本框中

你想验证输入的股票代码是有效的。而非验证用户输入是否符合实际的股票代码，本教程的目的，你只需执行一个简单的字符的有效性检查。

首先，提取股票代码。要在TextBox部件的检索文本，使用它的getText方法。

接下来，确保charcters是不是在你指定的非法字符集。当你转换的用户输入，以标准的形式，使用正则表达式来检查它的格式。请记住，使用具有相同的含义在Java和JavaScript的正则表达式。

如果输入的是有效的，清晰的文本框，使用户可以添加其他股票代码。

最后，如果输入的是无效的，用户通过一个对话框警告。

验证用户输入的股票代码。

在StockWatcher.java。替换下面的代码存根addStock方法。

private void addStock() {
    final String symbol = newSymbolTextBox.getText().toUpperCase().trim();
    newSymbolTextBox.setFocus(true);

    // Stock code must be between 1 and 10 chars that are numbers, letters, or dots.
    if (!symbol.matches("^[0-9A-Z\\.]{1,10}$")) {
      Window.alert("'" + symbol + "' is not a valid symbol.");
      newSymbolTextBox.selectAll();
      return;
    }

    newSymbolTextBox.setText("");

    // TODO Don't add the stock if it's already in the table.

    // TODO Add the stock to the table.

    // TODO Add a button to remove this stock from the table.

    // TODO Get the stock price.

  }

Eclipse的标志窗口，并建议你包括进口报关单。

包括进口报关单。

import com.google.gwt.user.client.Window;

4。测试事件处理

此时，你应该能够在输入框中输入文字。如果您使用非法字符，一个对话框弹出并显示警告。试试看。

在托管模式下的测试事件处理。

点击已经打开的托管模式浏览器。

按“刷新”。

测试，这两个事件处理程序接口工作。

在输入框中输入股票代码。输入使用这两种方法，通过按回车键，用鼠标点击“添加”按钮。

在这一点上，股票是不能添加到表中。然而，输入框应该清楚，让你可以添加其他股票。

测试的有效性检查和错误消息。

做出一些错别字，包括非法字符。

jbpm5.1介绍（12）_eclipse_05

提示：你的Java代码所做的更改会立即显示在托管模式浏览器。如果您已经有托管模式浏览器中打开，你不需要重新启动它。只需点击工具栏上的“刷新”按钮重新载入更新的GWT代码。

虽然你没有编译StockWatcher，你可以在这里测试在Web模式下：运行StockWatcher

下一步是什么

在这一点上，你已经实现了信号用户已经进入了一个股票的鼠标和键盘事件的事件处理程序接口。 Stockwatcher响应验证输入。

现在，您可以执行的代码在客户端上，增加了股票的表，并提供一个按钮来删除它。您还可以显示股票价格和显示数据和显示数据时，最后更新的时间戳。

第5步：编码客户端功能

此时，你已经建立了从GWT小部件和面板的用户界面，并在事件处理程序有线。 StockWatcher接受输入，但它尚未添加股票到股票表或更新任何库存数据。

在本节中，您将完成实施所有StockWatcher的客户端功能。具体来说，您将编写代码以下内容：

添加和删除库存表的股票。

刷新表中的每个股票的价格变化领域。

实现时间戳显示最后更新时间。

你初步StockWatcher实现是很简单的，您的代码在客户端的功能。稍后，您将添加调用到服务器，以获取股票数据。

1。添加和删除库存表的股票

你的第一个任务是股票代码和一个删除按钮添加，股票表。请记住，FlexTable会自动调整来保存数据，所以你不必担心编写代码来处理。

创建一个数据结构。

库存表中添加行。

添加一个按钮，删除库存表的股票。

在托管模式下进行测试。

1。创建一个数据结构

你需要一个数据结构来保存用户输入的股票符号的列表。使用标准的Java ArrayList和致电名单上的股票。

创建一个数据结构。

StockWatcher.java，在StockWatcher类中，创建一个Java的ArrayList的一个新实例。

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 addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label();
  private ArrayList<String> stocks = new ArrayList<String>();

2。到Flex表中添加行

在用户输入一个股票代码，第一次检查，以确保它没有重复。如果不存在的股票代码，添加一个新行的FlexTable和填充与用户输入的股票符号，在第一列（列）的单元格。为文本添加到一个细胞中的FlexTable，调用setText方法。

检查的股票，看它是否存在，如果这样做，不添加再次。

在addStock方法上，取代与此代码的TODO注释。

// Don't add the stock if it's already in the table.
    if (stocks.contains(symbol))
      return;

如果股票不存在，添加它。

在addStock方法上，取代与此代码的TODO注释。

// Add the stock to the table.
    int row = stocksFlexTable.getRowCount();
    stocks.add(symbol);
    stocksFlexTable.setText(row, 0, symbol);

当您呼叫setText方法，FlexTable自动创建新的细胞需要，因此，您不需要明确地调整表。

3。添加一个按钮，从库存清单中删除的股票

使用户可以从列表中删除一个特定的股票，在表行的最后一个单元格中插入一个删除“按钮。要添加一个部件一个细胞在FlexTable，调用setWidget的方法。订阅点击事件与addClickHandler方法。如果删除的股票按钮出版的click事件，请从FlexTable和ArrayList的股票。

添加按钮，从列表中删除的股票。

在addStock方法上，取代与此代码的TODO注释。

// Add a button to remove this stock from the table.
    Button removeStockButton = new Button("x");
    removeStockButton.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        int removedIndex = stocks.indexOf(symbol);
        stocks.remove(removedIndex);
        stocksFlexTable.removeRow(removedIndex + 1);
      }
    });
    stocksFlexTable.setWidget(row, 3, removeStockButton);

4。测试添加/删除股票的功能

你多了一个“TODO代码：获得的股票价格。但是，首先做一个在托管模式下的快速检查，看看如果加上股票和删除股票的功能是按预期工作。

此时，当你输入一个股票代码，StockWatcher应该把它添加到库存表。试试看。

在托管模式下运行StockWatcher。

点击已经打开的托管模式浏览器。

按“刷新”。

新增股票。

在输入框中输入股票代码。

StockWatcher应股票添加到表中。该表的大小，以举行新的数据。然而，价格和变化的领域仍然是空的。如果你输入股票代码，以小写字母转换为大写。

验证，你不能向表中添加重复的股票。

新增股票代码表中已存在的的。

StockWatcher应清除输入框，但不能再添加相同的股票代码。

删除的股票。

点击“删除”按钮。

该公司股价从表中删除表调整大小。

jbpm5.1介绍（12）_eclipse_06

2。刷新价格变化领域

StockWatcher最重要的功能是更新用户正在看的股票价格。如果你正在编写StockWatcher使用传统的Web开发技术，你必须依靠完整的页面重载每次你想更新的价格。你可以做到这一点无论是手动（用户点击浏览器的刷新按钮）或自动（例如，使用一个<meta http-equiv="refresh" content="5">在HTML标题标签）。但在这个Web 2.0的时代，根本就没有足够的效率。 StockWatcher的用户希望他们的股票价格更新，他们希望他们现在无需等待一整页刷新...。

在本节中，你会：

自动刷新的价格和实施一个计时器，并指定刷新率改变的领域。

封装创建一个类，StockPrice的股票数据。

价格和变化领域实施refreshWatchList方法产生随机的股票数据。

与实施updateTable方法的股票数据加载的价格和变化领域。

1。自动刷新股票数据

GWT使得它容易更新应用程序的内容上飞。 StockWatcher，您将使用GWT的Timer类自动更新股票价格。

定时器是一个单线程的，浏览器的安全计时器类。它使您可以安排在未来的某个点运行的代码，无论是使用schedule（）方法或反复使用scheduleRepeating（）方法。因为你想StockWatcher自动更新股票价格，每五秒钟，你会使用scheduleRepeating（）。

当定时器触发，在run方法执行。 StockWatcher你将覆盖刷新价格和变化领域的refreshWatchList方法的调用run方法。现在，只要把refreshWatchList方法存根;在本节后面，你会实现它。

实现定时器。

修改onModuleLoad方法创建一个新的定时器实例，如下：

public void onModuleLoad() {

    ...

    // Move cursor focus to the text box.
    newSymbolTextBox.setFocus(true);

    // Setup timer to refresh list automatically.
    Timer refreshTimer = new Timer() {
      @Override
      public void run() {
        refreshWatchList();
      }
    };
    refreshTimer.scheduleRepeating(REFRESH_INTERVAL);

    ...

  }

Eclipse的标志定时器，REFRESH_INTERVAL和refreshWatchList。

声明定时器的进口。

如果您使用的是Eclipse的快捷方式，一定要选择GWT计时器。

进口com.google.gwt.user.client.Timer;

指定的刷新率。

如果您使用的是Eclipse的快捷方式，选择创建常量'REFRESH_INTERVAL“，然后指定刷新间隔（以毫秒为单位），5000。

否则，只是剪切和粘贴从下面突出显示的代码。

公共类StockWatcher实现的EntryPoint{

私有静态最后INT REFRESH_INTERVAL=5000;// MS

私人VerticalPanel mainPanel中=新VerticalPanel（）;

填充尽快添加一个新的股票价格变化值。

在addStock方法，突出显示的代码替换TODO注释。

private void addStock() {

    ...

    // Add a button to remove a stock from the table.
    Button removeStockButton = new Button("x");
    removeStockButton.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        int removedIndex = stocks.indexOf(symbol);
        stocks.remove(removedIndex);
        stocksFlexTable.removeRow(removedIndex + 1);
      }
    });
    stocksFlexTable.setWidget(row, 3, removeStockButton);

    // Get the stock price.
    refreshWatchList();

  }

Eclipse的标志refreshWatchList。

在StockWatcher类中，创建一个存根的refreshWatchList方法。

private void refreshWatchList() {
    // TODO Auto-generated method stub

  }

jbpm5.1介绍（12）_eclipse_07

使用Eclipse创建一个Java类

让您在Java语言编写的应用程序的主要方式GWT的速度AJAX开发。正因为如此，你可以利用静态类型检查和经过时间考验的，当它与现代IDE功能，如代码完成和自动重构相结合的面向对象编程模式的优势，使其比以往任何时候都更容易编写健壮的AJAX应用程序，具有良好的组织代码库。

StockWatcher，你会采取这种能力由保理到自己的类股票的价格数据的优势。

创建一个新的Java类名为StockPrice。

在Eclipse中，在Package Explorer窗格中，选择包com.google.gwt.sample.stockwatcher.client

从Eclipse菜单栏中，选择文件>新建>类

Eclipse中打开一个新的Java类窗口。

填写在新的类的窗口。

在名称输入StockPrice

接受其他字段的默认值。

按Finish

替换下面的代码。

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

public class StockPrice {

  private String symbol;
  private double price;
  private double change;

  public StockPrice() {
  }

  public StockPrice(String symbol, double price, double change) {
    this.symbol = symbol;
    this.price = price;
    this.change = change;
  }

  public String getSymbol() {
    return this.symbol;
  }

  public double getPrice() {
    return this.price;
  }

  public double getChange() {
    return this.change;
  }

  public double getChangePercent() {
    return 10.0 * this.change / this.price;
  }

  public void setSymbol(String symbol) {
    this.symbol = symbol;
  }

  public void setPrice(double price) {
    this.price = price;
  }

  public void setChange(double change) {
    this.change = change;
  }
}

3。生成库存数据

现在，你有一个StockPrice类来封装股票价格数据，可以产生实际的数据。要做到这一点，你将实现refreshWatchList的方法。记住refreshWatchList方法被称为当用户增加了股票的库存表，然后每隔5秒时，计时器触发。

随机生成的数据

代替检索实时的股票价格从在线数据源，您将创建伪随机的价格变化值。要做到这一点，使用GWT的Random类。然后填充这些值StockPrice对象的数组，并通过他们updateTable方法。

随机生成的股票价格。

在StockWatcher类中，用下面的代码代替存根refreshWatchList方法。

/**
   * Generate random stock prices.
   */
  private void refreshWatchList() {
    final double MAX_PRICE = 100.0; // $100.00
    final double MAX_PRICE_CHANGE = 0.02; // +/- 2%

    StockPrice[] prices = new StockPrice[stocks.size()];
    for (int i = 0; i < stocks.size(); i++) {
      double price = Random.nextDouble() * MAX_PRICE;
      double change = price * MAX_PRICE_CHANGE
          * (Random.nextDouble() * 2.0 - 1.0);

      prices[i] = new StockPrice(stocks.get(i), price, change);
    }

    updateTable(prices);
  }

Include the import declaration. import com.google.gwt.user.client.Random;
Create a stub for the updateTable(StockPrice[]) method. private void updateTable(StockPrice[] prices) { // TODO Auto-generated method stub }

4。填充价格变化领域

最后，负载随机生成的价格，改变到StockWatcher表中的数据。对于每个列的股票，格式价格和变化，然后加载数据。要做到这一点，你将实现在StockWatcher类的两种方法。

在价格领域的格式值两个小数位（1,956.00）。

前缀变化领域的一个标志值(+/-).

实现方法updateTable（StockPrices[]）。

替换用下面的代码存根。

/**
   * Update the Price and Change fields all the rows in the stock table.
   *
   * @param prices Stock data for all rows.
   */
  private void updateTable(StockPrice[] prices) {
    for (int i = 0; i < prices.length; i++) {
      updateTable(prices[i]);
    }

  }

Eclipse的标志updateTable。

updateTable（StockPrice）方法创建一个存根。

实现该方法updateTable（StockPrice）。

替换用下面的代码存根。

/**
   * Update a single row in the stock table.
   *
   * @param price Stock data for a single row.
   */
  private void updateTable(StockPrice price) {
    // Make sure the stock is still in the stock table.
    if (!stocks.contains(price.getSymbol())) {
      return;
    }

    int row = stocks.indexOf(price.getSymbol()) + 1;

    // Format the data in the Price and Change fields.
    String priceText = NumberFormat.getFormat("#,##0.00").format(
        price.getPrice());
    NumberFormat changeFormat = NumberFormat.getFormat("+#,##0.00;-#,##0.00");
    String changeText = changeFormat.format(price.getChange());
    String changePercentText = changeFormat.format(price.getChangePercent());

    // Populate the Price and Change fields with new data.
    stocksFlexTable.setText(row, 1, priceText);
    stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText
        + "%)");
  }

Eclipse flags NumberFormat.
Include the import declaration. import com.google.gwt.i18n.client.NumberFormat;

5。测试随机生成的股票价格和变化值

此时，你随机生成的数据与股票价格变化领域应填充。试试看。

在托管模式下运行StockWatcher。

新增股票。

价格变化的领域应该有数据。

每5秒，数据刷新。

3。添加时间戳

您需要实现的功能的最后一块的时间戳。你用一个Label部件，lastUpdatedLabel，创建UI中的时间戳。现在设置Label窗口小部件的文本。将此代码添加到updateTable（StockPrice[]）方法。

实现时间戳。

updateTable（StockPrice[]）方法，复制和粘贴突出显示的代码。

/**
   * Update the Price and Change fields all the rows in the stock table.
   *
   * @param prices Stock data for all rows.
   */
  private void updateTable(StockPrice[] prices) {
    for (int i = 0; i < prices.length; i++) {
      updateTable(prices[i]);
    }

    // Display timestamp showing last refresh.
    lastUpdatedLabel.setText("Last update : "
        + DateTimeFormat.getMediumDateTimeFormat().format(new Date()));

  }

Eclipse的标志DateTimeFormat和日期。

包括进口。

进口com.google.gwt.i18n.client.DateTimeFormat;

进口java.util.Date的;

测试时间戳记。

保存您的更改。在托管模式浏览器，按“刷新”。

时间戳标签应显示下方的库存表。由于价格和变化领域的刷新，时间戳显示最后更新的日期和时间。

实现注意：您可能已经注意到，DateTimeFormat和NumberFormat类生活在一个com.google.gwt.i18n分装，这表明他们以某种方式处理与国际化。事实上，他们做的... ...这两个类会自动使用您的应用程序的区域设置格式化数字和日期时。您将了解更多有关在国际GWT应用程序的教程的本地化和翻译成其他语言GWT应用程序。

下一步是什么

在这一点上，你已经建立了界面组件和编码的所有基本客户端的StockWatcher应用程序的功能。用户可以添加和删除的股票。价格变化领域的更新，每5秒。一个时间戳显示上次刷新时发生。

jbpm5.1介绍（12）_java_08

虽然你没有编译StockWatcher，你可以在这里测试在Web模式下：运行StockWatcher

一个Bug

为了本教程中，我们引入的代码错误。你能发现它吗？

看变化的百分比。不要他们似乎有点小？如果你做数学题，你会发现，他们似乎完全是一个量级小于他们应。有算术错误，躲藏在StockWatcher代码某处。使用GWT和您的Java IDE提供的工具，你的下一个步骤是发现和修正错误。

第6步：调试GWT应用程序

此时，您已经完成了实施StockWatcher UI和所有客户端功能。然而，你已经注意到，有一个变化领域中的错误。变化的百分比是不正确的计算。

在本节中，您将使用Eclipse调试Java代码，同时在托管模式下运行的StockWatcher。

寻找bug。

修正错误。

在托管模式下运行StockWatcher的测试bug修复。

优点

您可以调试Java源代码，然后再编译成JavaScript。这GWT的develpment过程中，帮助您在您的Java IDE的调试工具的优势。您可以：

设置断点。

通过一行行代码的步骤。

钻取的代码。

检查变量的值。

显示挂起线程的堆栈帧。

在JavaScript开发的景点之一是，你可以进行更改，没有浏览器做一个缓慢的编译步骤，他们立即通过刷新。 GWT的托管模式提供完全相同的开发周期。您不必每次进行修改重新编译的托管模式下的整点。只要点击“刷新”看到您更新的Java代码在行动。

1。寻找错误

分析问题

jbpm5.1介绍（12）_应用程序_09

在价格和变化领域的价值观来看，你可以看到，出于某种原因，所有的变化百分比只有1/ 10大小的正确的价值观。

更改字段的值装入updateTable（StockPrice）方法。

/**
   * Update a single row in the stock table.
   *
   * @param price Stock data for a single row.
   */
  private void updateTable(StockPrice price) {
    // Make sure the stock is still in the stock table.
    if (!stocks.contains(price.getSymbol())) {
      return;
    }

    int row = stocks.indexOf(price.getSymbol()) + 1;

    // Format the data in the Price and Change fields.
    String priceText = NumberFormat.getFormat("#,##0.00").format(
        price.getPrice());
    NumberFormat changeFormat = NumberFormat.getFormat("+#,##0.00;-#,##0.00");
    String changeText = changeFormat.format(price.getChange());
    String changePercentText = changeFormat.format(price.getChangePercent());

    // Populate the Price and Change fields with new data.
    stocksFlexTable.setText(row, 1, priceText);
    stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText
        + "%)");
  }

只是瞥了一眼代码，你可以看到的changePercentText变量的值被设置，在price.getChangePercent。因此，首先在该行设置一个断点，然后向下钻取，以确定其中的变化的百分比计算错误。

设置断点

你想步入想要检查变量值的代码行上设置一个断点。

StockWatcher.java，在updateTable（StockPrice价格）的方法，对这两行设置一个断点。

字符串changePercentText= changeFormat.format（price.getChangePercent（））;

stocksFlexTable.setText（行，1，priceText）;

Eclipse交换机Debug透视图。

运行该代码有错误。

要运行的代码在updateTable方法，如果您怀疑错误，在托管模式浏览器，新增股票股票列表。

在第一个断点会停止执行。

检查变量priceText和changeText的值。

在Eclipse Debug透视图，看看变量窗格。

运行该代码到下一个破发点，priceText设置。

在调试窗格中，按“恢复”图标。

检查变量priceText，changeText，changePercentText的值。

在Eclipse Debug透视图，看看变量窗格。如果你喜欢，请仔细检查的数学错误。

jbpm5.1介绍（12）_eclipse_10

环回的第一个破发点，changePercentText设置。

在调试窗格中，按“恢复”图标。

步执行代码

现在，步入代码，看哪里，以及如何changePercentText正在计算。

进入getChangePercent方法步骤，看看它是如何计算changePercentText价值的。

public double getChangePercent() {
    return 10.0 * this.change / this.price;
  }

纵观getChangePercent方法，你可以看到的问题：它的变化的百分比乘以10而不是100。完全对应你看到面前的输出：所有的变化百分比分别只有1 / 10大小的正确的价值观。

2。修复的bug

修复的错误，在计算价格变动的百分比。

在StockPrice.java，编辑getChangePercent的方法。

public double getChangePercent() {
    return 100.0 * this.change / this.price;
  }

提示：在Eclipse中，如果你发现它更容易在Java透视图编辑，而不是Debug透视图，可以来回切换，而在调试模式下运行StockWatcher。

3。在托管模式下测试的bug修复

在这一点上，当你输入一个股票代码，变化领域的计算应准确。试试看。

在Eclipse中，切换所有断点，然后按恢复。

在托管模式浏览器，按“刷新”。

新增股票。

检查变化领域的价值计算。

下一步是什么

在这一点上，你实现了你所有的功能要求。 StockWatcher正在运行，并且你发现并修正了一个错误。

现在，你愿进一步加强StockWatcher的视觉设计。您将应用CSS样式规则的GWT小部件，并添加一个静态元素（徽标）页面。

第7步：应用样式

在这一点上，StockWatcher功能。现在，你想给它一些视觉风格。

jbpm5.1介绍（12）_java_11

对CSS的优点

GWT提供了很少的Java方法直接相关的样式。相反，我们鼓励你定义层叠样式表的样式。

当谈到样式的Web应用程序，CSS是理想选择。除了干净地从应用程序逻辑中分离出来的风格，这种分工有助于应用程序的负载，并提供更迅速，占用更少的内存，甚至使它们更容易在编辑/调试周期的调整，因为没有需要重新编译的风格调整。

1。与项目相关联的样式表

两个样式表已经与StockWatcher项目相关的。

主题样式表，standard.css：GWT的默认样式定义

应用样式表，StockWatcher.css：您定义StockWatcher的具体样式

当您使用webAppCreator创建StockWatcher的，它创建的应用程序样式表（StockWatcher.css）。它还引用GWT模块的主题。

打开GWT模块StockWatcher/ SRC/ COM/谷歌/ GWT/样本/ stockwatcher/ StockWatcher.gwt.xml。请注意，默认使用标准的主题是。

作者：张锋

更多精彩文章可以观注

微信公众号

jbpm5.1介绍（12）_应用程序_12

上一篇：WSO2 ESB（4）

下一篇：jbpm5.1介绍（4）

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

jbpm5.1介绍（12）

jbpm5.1介绍（12）

Update sites

Eclipse 3.7 (Indigo)

​​

Eclipse 3.6 (Helios)

​​

Eclipse 3.5 (Galileo)

​​

51CTO博客