谈笑有鸿儒,往来无白丁

在恰当的时间、地点以恰当的方式表达给恰当的人...  阅读的时候请注意分类,佛曰我日里面是谈笑文章,其他是各个分类的文章,积极的热情投入到写博的队伍中来,支持blogjava做大做强!向dudu站长致敬>> > 我的微博敬请收听

使用 Oracle JDeveloper 构建您的第一个 GWT Web 应用程序

到目前为止,您已经了解了 GWT 的工作方式;现在,让我们编码示例 Web 应用程序。

示例应用程序是一个工作列表管理器。其特性十分简单:创建、编辑、删除工作列表并对其进行优先级排列。我们选择了该示例是因为它很容易理解,然而其实施涵盖了大量 GWT 的特性。

下面是最终应用程序的屏幕快照:

图 1

第 1 步:安装 GWT

从 Google 的 Web 站点 http://code.google.com/webtoolkit/ 下载 GWT。在写本文时,GWT 推出的是 Windows 和 Linux 版本。GWT 是特定于平台的,因为其托管模式在 Firefox 的修改版本中工作,该版本本身依赖于平台。(我们可以在 Apple 计算机上成功地使用 GWT 的 Linux 版本,但是托管模式不起作用。)

GWT 下载形式是一个归档文件,您必须使用 Linux 上的 tar -xvf 命令或者 Windows 上的解压缩工具进行解压缩。这就是您安装该工具包需要做的所有工作。

第 2 步:运行 applicationCreator 脚本

打开命令行,转至 GWT 的安装目录。该目录包含 applicationCreator 脚本,我们将使用该脚本启动我们的应用程序。由于我们希望应用程序存储在 Oracle Technology Network 目录中,因此我们将“-out otn”作为参数添加到脚本中。在 Linux 上,键入:

./applicationCreator -out otn otn.todo.client.TodoApp

图 2

在 Windows 上,使用:

applicationCreator -out otn otn.todo.client.TodoApp
该脚本生成基本的项目结构 — 请求的应用程序类中的示例“Hello word”代码以及两个脚本:TodoApp-shell(用于在托管模式下运行应用程序)和 TodoApp-compile(用于打包应用程序以便在 Web 模式下使用)。

第 3 步:在 JDeveloper 中打开项目

启动 JDeveloper 并创建一个新的 Web 项目:

图 3

单击 Next 按钮。JDeveloper 将询问新项目的位置。使用应用程序的名称作为 Project Name,选择应用程序根目录(如步骤 2 的定义)作为 Directory Name

图 4

单击 Next 按钮,并验证您的应用程序是 J2EE 1.4 应用程序:

图 5

单击 Next 按钮,并选择您的项目 Web 属性:Document Root 是当前项目的 www 目录,J2EE Web Application Name 和 J2EE Context Root 都是项目名称:

图 6

这将创建 JDeveloper 项目,但是将出现某些编译错误,因为 GWT 的库未包含在项目类路径中。在项目属性中,选择左侧端树的 Libraries 节点,并添加 gwt-user.jar 库:

图 7

您的项目现在应该可以编译,看起来与以下内容相似:

图 8

编写客户端代码

上面的 applicationCreator 脚本创建了一个基本的“Hello world”应用程序,可在 otn.todo.client 程序包中使用。下面是其主要方法:

public void onModuleLoad() {
final Button button = new Button("Click me");
final Label label = new Label();

button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
if (label.getText().equals(""))
label.setText("Hello World!");
else
label.setText("");
}
});

RootPanel.get("slot1").add(button);
RootPanel.get("slot2").add(label);
}
}
该方法将创建一个按钮“Click Me”。单击该按钮后,将显示“Hello World”。

该方法分为三部分:

  1. 创建 Button 和 Label 小部件
  2. 创建 ClickListener 对象。该代码与您用 Swing 编写的内容很接近;如果您具有桌面 Java 背景则更容易理解。
  3. 在 HTML 页上显示小部件:slot1 和 slot2 都是该页上的 HTML 元素
用作框架的 HTML 页位于 src/otn/todo/public 目录中。它将两个 HTML 元素(slot1 和 slot2)定义为表单元格。

在托管模式下运行和调试


现在您已经创建了应用程序并且已经看到其生成的内容,结下来让我们来执行它。

您可以通过从命令行使用 TodoApp-shell 脚本轻松地运行该项目。虽然这是启动应用程序的很好途径,但是您可能更喜欢直接从 JDeveloper 内启动应用程序。为此,单击 Run 菜单,选择 Choose Active Run Configuration > Manage Run Configurations。编辑默认的运行配置并使用以下命令:

  • 对于 Default Run Target:使用 com.google.gwt.dev.GWTShell,它在特定于平台的 GWT jar 内。在 Linux 上,它类似以下内容:
    path.to.your.gwt.installation.directory/gwt-devlinux.jar!/com/google/gwt/dev/GWTShell.class
    在 Windows 上,它类似以下内容:
    path.to.your.gwt.installation.directory/gwt-dev-windows.jar!/com/google/gwt/dev/GWTShell.class
  • 对于 Program Arguments,使用:
    -out path.to.your.gwt.installation.directory/otn/www otn.todo.TodoApp/TodoApp.html
  • 对于 Run Directory,使用
    path.to.your.gwt.installation.directory/otn
最终结果类似以下内容:

图 9

要运行您的应用程序,您必须向其类路径中再添加两个库:GWT 特定于平台的 jar 和应用程序的 src 目录:

图 10

您现在应能够从 JDeveloper 运行应用程序了。

这是一个很复杂的设置,但是令人欣慰的是,您可以重新使用它对应用程序进行调试。使用 Debug 按钮而不是 Run 按钮。然后,您可以象平常一样使用调试器 — 设置断点、逐步执行代码等:

图 11

关于该特性给人印象很深的是,您可以通过标准的 JDeveloper 调试器调试用 Java 编写的客户端代码。

扩展您的 GWT Web 应用程序

现在您已经创建了一个简单的 GWT Web 应用程序,让我们通过两个最常用的 GWT 特性对其进行扩展:RPC 机制(该机制允许应用程序调用服务器端代码)和 History 对象(通过该对象,用户可精确处理浏览器的 Back 按钮)。

使用 RPC 进行客户端和服务器之间的数据交换

到目前为止,您只创建了应用程序的客户端代码:使用 GWT 编译器,您已经生成了大量 HTML 和 JavaScript 文件,它们将在最终用户的浏览器中运行。但是,如果该应用程序不能与服务器通信就没有什么用处了。

使用 GWT,客户端/服务器通信就是对 servlet 进行编码并使其与应用程序通信。下面是您要做的工作。

创建一个定义您的服务的接口。该接口必须扩展 Google 的 com.google.gwt.user.client.rpc.RemoteService 接口,并可以放到客户端程序包(本例为 otn.todo.client)中。

然后,对接口进行编码以便允许您在服务器上读取和写入工作列表:

package otn.todo.client;
import java.util.List;
import com.google.gwt.user.client.rpc.RemoteService;
public interface TodoListBackupService extends RemoteService {
/**
* Save the to-do list on the server.
*/
void saveTodoList(List todoList);
/**
* Get the to-do list on the server.
*/
List getTodoList();
}
对 Servlet 进行编码。在服务器端,您必须编码出具有以下特征的类:
  1. 扩展 Google 的 com.google.gwt.user.server.rpc.RemoteServiceServlet 类(该类反过来会扩展 Java 的 javax.servlet.http.HttpServlet,有效使其成为 servlet)
  2. 实施步骤 1 中编写的接口
  3. 位于服务器程序包(本例为 otn.todo.server)中
package otn.todo.server;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import otn.todo.client.Todo;
import otn.todo.client.TodoListBackupService;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

public class TodoListBackupServiceImpl extends RemoteServiceServlet implements
TodoListBackupService {

private static final String TODOLIST_KEY = "TODOLIST_KEY";

public void saveTodoList(List todoList) {
HttpServletRequest request = this.getThreadLocalRequest();
HttpSession session = request.getSession();
session.setAttribute(TODOLIST_KEY, todoList);
}

public List getTodoList() {
HttpServletRequest request = this.getThreadLocalRequest();
HttpSession session = request.getSession();
if (session.getAttribute(TODOLIST_KEY) == null) {
List todoList = new ArrayList();
Todo todo = new Todo("Hello from the server");
todoList.add(todo);
return todoList;
} else {
return (List) session.getAttribute(TODOLIST_KEY);
}
}
}
该 servlet 在用户的 HttpSession 中只存储工作列表;这当然是保存数据的基本方法。在一般的应用程序中,您可以使用 JNDI 访问 EJB,或者使用任何经典模式从 servlet 访问业务服务。

最后,您必须在 servlet 容器内配置该 servlet。如果您使用的是 GWT shell,您可以在 *.gwt.xml 配置文件中进行配置,本例中该配置文件为 TodoApp.gwt.xml:

<module>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Specify the app entry point class. -->
<entry-point class='otn.todo.client.TodoApp'/>
<servlet path="/todoListBackupService" class="otn.todo.server.TodoListBackupServiceImpl"/>
</module>
如果您希望在其他应用服务器(如 OC4J)中对其进行配置,只需将平常的 XML 配置添加到 WEB-INF/web.xml 文件中即可:
<servlet>
<servlet-name>TodoListBackupService</servlet-name>
<servlet-class>otn.todo.server.TodoListBackupServiceImpl</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>TodoListBackupService</servlet-name>
<url-pattern>/todoListBackupService</url-pattern>
</servlet-mapping>
添加一些粘合剂。我们需要的粘合剂是 Async 类,它必须遵循几个规则:
  • 位于客户端程序包(otn.todo.client)中。
  • 其名称与步骤 1 中描述的接口的名称相同,最后面添加 Async。
  • 其方法与步骤 1 中描述的接口的方法相同,但是它们都回调一个附加参数 com.google.gwt.user.client.rpc.AsyncCallback。
package otn.todo.client;

import java.util.List;


    import com.google.gwt.user.client.rpc.AsyncCallback;

    public interface TodoListBackupServiceAsync {

    /**
    * Save the to-do list on the server.
    */
    void saveTodoList(List todoList, AsyncCallback callback);

    /**
    * Get the to-do list on the server.
    */
    void getTodoList(AsyncCallback callback);
    }
    在应用程序内使用该类。要从客户端应用程序内访问服务器端代码,使用 com.google.gwt.core.client.GWT 类,该类可以创建一个很特殊的对象:
    TodoListBackupServiceAsync todoListBackupService = (TodoListBackupServiceAsync) GWT.create(TodoListBackupService.class);
    这将在运行时创建一个实施两个接口的类:
    • 我们刚刚在步骤 3 中进行编码的 Async 接口
    • Google 的 com.google.gwt.user.client.rpc.ServiceDefTarget 接口
    第二个接口用于配置类以便它可以指向步骤 2 中定义的 servlet:
    ServiceDefTarget endpoint = (ServiceDefTarget) todoListBackupService; endpoint.setServiceEntryPoint("/todoListBackupService");
    现在您已经将该对象配置为可访问服务器端服务,让我们来访问服务。如您在步骤 3 中所见,Async 接口允许您通过添加 AsyncCallback 回调参数访问在服务中定义的所有方法。该参数用于定义应用程序的行为,具体取决于服务器端调用的成功或失败:
     AsyncCallback callback = new AsyncCallback() {
    public void onSuccess(Object result) {
    printTodoList();
    }

    public void onFailure(Throwable caught) {
    Window.alert("Warning : the to-do list could not be saved on the server. Maybe the server is down.");
    }
    };
    让我们把它们全都放在一起。下面是访问 TodoListBackupService 业务服务的两个客户端方法的完整代码:一个用于在服务器端保存工作列表,另一个用于读取该列表:
     /**
    * Update the to-do list with data from the server.
    */
    private void updateTodoListFromServer() {
    TodoListBackupServiceAsync todoListBackupService =
    (TodoListBackupServiceAsync)GWT.create(TodoListBackupService.class);

    ServiceDefTarget endpoint = (ServiceDefTarget)todoListBackupService;
    endpoint.setServiceEntryPoint("/todoListBackupService");

    AsyncCallback callback = new AsyncCallback() {
    public void onSuccess(Object result) {
    todoList = (List)result;
    saveTodoListInHistory();
    }

    public void onFailure(Throwable caught) {
    Todo todo =
    new Todo("ERROR!! Server could not be reached.");
    todoList.add(todo);
    saveTodoListInHistory();
    }
    };

    todoListBackupService.getTodoList(callback);
    }

    /**
    * Save the to-do list on the server.
    */
    private void saveTodoListOnServer() {
    saveTodoListInHistory();

    TodoListBackupServiceAsync todoListBackupService =
    (TodoListBackupServiceAsync)GWT.create(TodoListBackupService.class);

    ServiceDefTarget endpoint = (ServiceDefTarget)todoListBackupService;
    endpoint.setServiceEntryPoint("/todoListBackupService");

    AsyncCallback callback = new AsyncCallback() {
    public void onSuccess(Object result) {
    printTodoList();
    }

    public void onFailure(Throwable caught) {
    Window.alert("Warning : the to-do list could not be saved on the server. Maybe the server is down.");
    }
    };

    todoListBackupService.saveTodoList(todoList, callback);
    }
    示例应用程序在启动时进行服务器端调用。该调用将返回用户的 HttpSession 中保存的最新工作列表,或者包含“Hello from the server”工作的新工作列表:

    图 12

    管理 Back 按钮

    在高端 Web 应用程序中,浏览器的 Back 按钮经常断开。经典的 Ajax 应用程序不支持返回前一 Web 页的标准 Web 行为。

    另一方面,GWT 允许对 Back 按钮进行编程处理。这是一个功能强大却又很难处理的特性,我们将在示例应用程序中对其进行探究。提议是将 Back 按钮用作 Undo 按钮:单击该按钮将显示最新事件之前的工作列表。同样地,Forward 按钮将用作 Redo 按钮。

    实施 HistoryListener 接口。要以编程方式管理 Back 按钮,GWT 应用程序必须实施 com.google.gwt.user.client.HistoryListener 接口。这将强制编写 onHistoryChanged(String _historyToken) 方法:

    public class TodoApp implements EntryPoint, HistoryListener {

    /**
    * This method is called whenever the application's history changes.
    */
    public void onHistoryChanged(String _historyToken) {
    if (Integer.parseInt(_historyToken) + 1 != historyToken) {
    if (historyMap.get(_historyToken) != null) {
    historyToken = Integer.parseInt(_historyToken);
    todoList = (List) historyMap.get(_historyToken);
    }
    }
    printTodoList();
    }
    该方法意味着当浏览器的历史记录更改时接收事件。您必须将其作为监听器添加到 GWT 的 History 对象中。该操作通常在 onModuleLoad() 方法中完成,以便 History 对象在启动时正确初始化:
     /**
    * This is the entry point method.
    */
    public void onModuleLoad() {

    History.addHistoryListener(this);

    }
    现在,每次浏览器的历史记录更改时都会调用 onHistoryChanged(String _historyToken) 方法。

    该方法可以根据作为参数传递的令牌重新创建应用程序的状态。本例中,您将使用该令牌作为密钥来查找存储在历史地图中的工作列表。

    向历史记录中添加条目。要使 onHistoryChanged(String _historyToken) 方法起作用,您必须预先在历史记录中存储一些条目。

    利用 History 对象很容易实现,可以使用其静态 newItem(String historyToken) 方法:

    private void saveTodoListInHistory() {
    List todoListClone = new ArrayList();
    Iterator it = todoList.iterator();
    while (it.hasNext()) {
    Todo todo = (Todo) it.next();
    todoListClone.add(todo.clone());
    }
    historyMap.put(String.valueOf(historyToken), todoListClone);
    History.newItem(String.valueOf(historyToken));
    historyToken++;
    }
    在本例中,您将应用程序状态存储在了地图中,因此使用历史记录令牌可以找到它。注意,您使用了一个数字作为历史记录令牌,也可以改用任何字符串。

    部署您的 Web 应用程序

    要部署通过 GWT 构建的 Web 应用程序,您需要编译客户端代码,在 Web 应用程序的 .war 文件中打包结果,然后将 .war 文件部署到相应的应用服务器 OC4J 上。

    编译客户端代码

    编译客户端代码的方法有多种。使用 applicationCreator 脚本后,GWT 将创建一个名为 TodoApp-compile 的 shell 脚本。您可以从命令行启动该脚本。与 TodoApp-shell 一样,这是编译应用程序的很好方法;但是,您可能更喜欢直接从 JDeveloper 内部启动该脚本。

    另一种编译代码的方法使以托管模式执行应用程序,以便直接从 JDeveloper 编译代码。您的应用程序的窗口的工具栏包含编译/浏览按钮,与下图类似:

    图 13

    在编译过程结束时,您的默认 Web 浏览器将打开以便您可以测试结果。GWT 开发 shell 的窗口将显示编译是否成功:

    图 14

    无论您使用何种方法编译代码,您都可以在项目的 www/otn.todo.TodoApp 中找到生成的文件。

    最后一种编译代码的方法是使用 Ant。GWT 不提供特定的 Ant 任务,但是您可以通过标准的 Java Ant 任务启动任何 Java 类(例如 GWTCompiler)。首先,定义包含 GWT jar 的路径:


    <path id="project.class.path">
    <pathelement path="${java.class.path}/"/>
    <pathelement location="src"/>
    <pathelement path="/your/path/to/gwt-user.jar"/>
    <pathelement path="/your/path/to/gwt-dev-linux.jar"/>
    <!-- ... -->
    </path>
    现在,定义专用于编译客户端代码的任务:
    <target name="GWTcompile">
    <java classpathref="http://www.oracle.com/technology/pub/articles/project.class.class.path"
    classname="com.google.gwt.dev.GWTCompiler"
    fork="true">
    <arg value="-out"/>
    <arg value="${gwt.output.dir}"/>
    <arg value="${entry.point.class}"/>
    </java>
    </target>

    在属性文件中设置 gwt.output.dir 和 entry.point.class 变量,如下所示:
    gwt.output.dir=www
    entry.point.class=otn.todo.TodoApp
    最后,在 Ant 脚本中声明属性文件(此处为 build.properties),如下所示:
    <property file="build.properties"/>
    您可以通过在任务的 Context 菜单中选择 Run Target GWTCompile 直接启动该新的目标:

    图 15

      Apache Ant Log 窗口将显示以下结果:

    GWTcompile:
    [java] Output will be written into www\otn.todo.TodoApp
    [java] Compilation succeeded

    BUILD SUCCESSFUL

    在 OC4J 中部署

    编译完应用程序之后,在 OC4J 下部署它只需创建一个适当的部署配置文件。如果您按照前面描述的步骤进行操作,您应该已经具有一个默认的部署配置文件。如果没有,只需选择 File > New...> Deployment Profiles > WAR File,创建一个新的配置文件。

    使用您的配置,一切都应该正常工作。但是,如果您遇到任何问题,请查看以下常见的错误:

    • 在 Project Properties 的 Project Content > Web Application 中,HTML Root Directory 应该是应用程序的 www 目录(在该目录中,GWT 将对应用程序进行编译以便在托管模式下运行)。
    • 在部署配置文件的 File Groups > WEB-INF/lib > Contributors 中,应该添加 gwt-user.jar。该 jar 文件包括 J2EE 规范中的 javax.servlet 程序包。这在本例中没有引起任何问题;但是,您通常不应将这些类部署在 Web 应用程序中,因为它们会引起麻烦。如果发生了这种情况,GWT 还提供有一个 gwt-servlet.jar 文件,它是没有 javax.servlet 程序包的 gwt-user.jar。
    • Web 应用程序的上下文根影响 GWT 的 RPC 机制。如果 GWT 客户端应用程序要与服务器通信(如“使用 RPC 进行客户端和服务器之间的数据交换”所述),它必须可以找到服务器。这就是我们已经讨论过的 endpoint.setServiceEntryPoint("") 方法的目的。在本例中,我们将应用程序部署到了服务器的根上,这就是 GWT shell 默认的工作方式。但是,如果您将应用程序部署到 TodoApp Web 上下文(在部署配置文件的一般属性中),请将端点设置为 /TodoApp/todoListBackupService 而不要设置为 /todoListBackupService。不用忘记该 URL 还应正确映射到应用程序的 web.xml 文件中(如前所述)。
    • 假设 OC4J 已在系统上正确安装,将应用程序部署到服务器是很简单的:只需右键单击部署配置文件,并选择 Deploy to OC4J。
    部署的应用程序有两部分:
    • 客户端应用程序是一组先前编译的 HTML 和 JavaScript 文件。(请参见“编译客户端代码”部分。)OC4J 充当经典的 Web 服务器,将这些文件传递给用户。
    • 服务器端应用程序基本上是一个处理 RPC 通信的 servlet。在 OC4J 中部署后,该 servlet 可以访问诸如 EJB 或 JMS 提供商等企业资源。
    性能智能化为静态资源提供了高效服务;应用程序的主要性能瓶颈来源于客户端/服务器通信。但是由于有 OC4J,我们可以访问一些有趣的服务器端性能图形:

    图 16

    如该图形所显示的,在正常负载下(每秒几个请求),应用程序的服务器端部分在平均不到 4 ms 的时间内进行响应,这是很难得的结果。
    posted on 2006-11-24 10:31 坏男孩 阅读(2224) 评论(2)  编辑  收藏 所属分类: 新知识学习

    FeedBack:
    # re: 使用 Oracle JDeveloper 构建您的第一个 GWT Web 应用程序
    2016-08-02 16:44 | 郑州
    67786,,好  回复  更多评论
      
    # re: 使用 Oracle JDeveloper 构建您的第一个 GWT Web 应用程序
    2016-08-02 16:44 | 郑州
    都回家一趟u  回复  更多评论
      

    只有注册用户登录后才能发表评论。


    网站导航: