GXT之旅：第一章：初识ExtGWT(5)——用GXT组件替换GWT组件

旧貌换新颜

现在，我们FirstApp项目已经引入了GXT库，但是我们还没有具体使用他们。现在我们从FirstApp.java拷贝出一份文件，重命名为FirstGxtApp.java。在整个文件里，我们将使用GXT的控件去替换GWT的控件。通过之间的比较，我们会发现他们之间很相似，但是也有不同，下面跟我小妹的脚步吧：

找到FirstApp.java，拷贝出一份文件，重命名为FirstGxtApp.java
删除一些import

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

导入一些相应的GXT

import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.event.KeyListener;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.Label;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.TextField;

你会发现GXT和GWT之间有不少类似的类，如下是一些他们之间的对比情况

GXT	GWT
com.extjs.gxt.ui.client.widget.Dialog	com.google.gwt.user.client.ui.DialogBox
com.extjs.gxt.ui.client.widget.Label	com.google.gwt.user.client.ui.Label
com.extjs.gxt.ui.client.widget.VerticalPanel	com.google.gwt.user.client.ui.VerticalPanel
com.extjs.gxt.ui.client.widget.button.Button	com.google.gwt.user.client.ui.Button
com.extjs.gxt.ui.client.widget.form.TextField	com.google.gwt.user.client.ui.TextBox
com.extjs.gxt.ui.client.event.ButtonEvent	com.google.gwt.event.dom.client.ClickEvent
com.extjs.gxt.ui.client.event.SelectionListener	com.google.gwt.event.dom.client.ClickHandler
com.extjs.gxt.ui.client.event.KeyListener	com.google.gwt.event.dom.client.KeyUpEvent
com.extjs.gxt.ui.client.event.ComponentEvent	com.google.gwt.event.dom.client.KeyUpHandler

接下来，我们要做的，就是在FirstGXTApp.java中，重新用GXT类库，来定义控件。在GWT例子(FirstApp.java)里面，所有的控件代码集都是定义在onModuleLoad()方法里面，然后使用的内部类去实现Handler(interface)，来处理不同的事件。但是GXT使用listeners(class)去处理事件的，因此在处理方式上，我们需要把GXT的控件提出到onModuleLoad()方法之外，变成属性去处理。

private final Button sendButton = new Button("Send");
private final TextField<String> nameField = new
TextField<String>();
private final Dialog dialogBox = new Dialog();
private final Label textToServerLabel = new Label();
private final HTML serverResponseLabel = new HTML();

GXT和GWT的控件之间，在functions上，存在这一些不同。在开始修改之前，先看看我总结的一些不同点。

GXT	GWT
TextField.setValue()	TextBox.setText()
TextField.focus()	TextBox.setFocus(true)
DialogBox.setHeading()	DialogBox.setText()
DialogBox.setAnimCollapse(true)	DialogBox.setAnimationEnabled(true)
VerticalPanel .setHorizontalAlign(HorizontalAlignment.RIGHT);	VerticalPanel.setHorizontalAlignment(VerticalPanel.ALIGN_RIGHT)

另外一个不同点，就正如我上面提到的，就是事件处理机制不同。GWT使用event handlers，GXT 是使用event listeners(类似于早期版本的GWT)。但是不管怎么样，代码风格上也非常类似。下面我把整个两个文件贴出来，大家看看不同之处

FirstApp.java

package com.danielvaughan.firstapp.client;
import com.danielvaughan.firstapp.shared.FieldVerifier;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;
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;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class FirstApp implements EntryPoint {
/**
* The message displayed to the user when the server cannot be reached or
* returns an error.
*/
private static final String SERVER_ERROR = "An error occurred while "
+ "attempting to contact the server. Please check your network "
+ "connection and try again.";
/**
* Create a remote service proxy to talk to the server-side Greeting service.
*/
private final GreetingServiceAsync greetingService = GWT
.create(GreetingService.class);
/**
* This is the entry point method.
*/
public void onModuleLoad() {
final Button sendButton = new Button("Send");
final TextBox nameField = new TextBox();
nameField.setText("GWT User");
final Label errorLabel = new Label();
// We can add style names to widgets
sendButton.addStyleName("sendButton");
// Add the nameField and sendButton to the RootPanel
// Use RootPanel.get() to get the entire body element
RootPanel.get("nameFieldContainer").add(nameField);
RootPanel.get("sendButtonContainer").add(sendButton);
RootPanel.get("errorLabelContainer").add(errorLabel);
// Focus the cursor on the name field when the app loads
nameField.setFocus(true);
nameField.selectAll();
// Create the popup dialog box
final DialogBox dialogBox = new DialogBox();
dialogBox.setText("Remote Procedure Call");
dialogBox.setAnimationEnabled(true);
final Button closeButton = new Button("Close");
// We can set the id of a widget by accessing its Element
closeButton.getElement().setId("closeButton");
final Label textToServerLabel = new Label();
final HTML serverResponseLabel = new HTML();
VerticalPanel dialogVPanel = new VerticalPanel();
dialogVPanel.addStyleName("dialogVPanel");
dialogVPanel.add(new HTML("<b>Sending name to the server:</b>"));
dialogVPanel.add(textToServerLabel);
dialogVPanel.add(new HTML("<br><b>Server replies:</b>"));
dialogVPanel.add(serverResponseLabel);
dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_RIGHT);
dialogVPanel.add(closeButton);
dialogBox.setWidget(dialogVPanel);
// Add a handler to close the DialogBox
closeButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
dialogBox.hide();
sendButton.setEnabled(true);
sendButton.setFocus(true);
}
});
// Create a handler for the sendButton and nameField
class MyHandler implements ClickHandler, KeyUpHandler {
/**
* Fired when the user clicks on the sendButton.
*/
public void onClick(ClickEvent event) {
sendNameToServer();
}
/**
* Fired when the user types in the nameField.
*/
public void onKeyUp(KeyUpEvent event) {
if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
sendNameToServer();
}
}
/**
* Send the name from the nameField to the server and wait for a response.
*/
private void sendNameToServer() {
// First, we validate the input.
errorLabel.setText("");
String textToServer = nameField.getText();
if (!FieldVerifier.isValidName(textToServer)) {
errorLabel.setText("Please enter at least four characters");
return;
}
// Then, we send the input to the server.
sendButton.setEnabled(false);
textToServerLabel.setText(textToServer);
serverResponseLabel.setText("");
greetingService.greetServer(textToServer,
new AsyncCallback<String>() {
public void onFailure(Throwable caught) {
// Show the RPC error message to the user
dialogBox
.setText("Remote Procedure Call - Failure");
serverResponseLabel
.addStyleName("serverResponseLabelError");
serverResponseLabel.setHTML(SERVER_ERROR);
dialogBox.center();
closeButton.setFocus(true);
}
public void onSuccess(String result) {
dialogBox.setText("Remote Procedure Call");
serverResponseLabel
.removeStyleName("serverResponseLabelError");
serverResponseLabel.setHTML(result);
dialogBox.center();
closeButton.setFocus(true);
}
});
}
}
// Add a handler to send the name to the server
MyHandler handler = new MyHandler();
sendButton.addClickHandler(handler);
nameField.addKeyUpHandler(handler);
}
}

FirstGXTApp.java

package com.danielvaughan.firstapp.client;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.KeyListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.Label;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class FirstGXTApp implements EntryPoint {
/**
* The message displayed to the user when the server cannot be reached or
* returns an error.
*/
private static final String SERVER_ERROR = "An error occurred while "
+ "attempting to contact the server. Please check your network "
+ "connection and try again.";
/**
* Create a remote service proxy to talk to the server-side Greeting
* service.
*/
private final GreetingServiceAsync greetingService = GWT
.create(GreetingService.class);
private final Dialog dialogBox = new Dialog();
private final VerticalPanel dialogVPanel = new VerticalPanel();
private final TextField<String> nameField = new TextField<String>();
private final Button sendButton = new Button("Send");
private final HTML serverResponseLabel = new HTML();
private final Label textToServerLabel = new Label();
/**
* This is the entry point method.
*/
public void onModuleLoad() {
nameField.setValue("GWT User");
// We can add style names to widgets
sendButton.addStyleName("sendButton");
// Add the nameField and sendButton to the RootPanel
// Use RootPanel.get() to get the entire body element
RootPanel.get("nameFieldContainer").add(nameField);
RootPanel.get("sendButtonContainer").add(sendButton);
// Focus the cursor on the name field when the app loads
nameField.focus();
nameField.selectAll();
// Create the popup dialog box
dialogBox.setHeading("Remote Procedure Call");
dialogBox.setAnimCollapse(true);
dialogVPanel.addStyleName("dialogVPanel");
dialogVPanel.add(new HTML("<b>Sending name to the server:</b>"));
dialogVPanel.add(textToServerLabel);
dialogVPanel.add(new HTML("<br><b>Server replies:</b>"));
dialogVPanel.add(serverResponseLabel);
dialogVPanel.setHorizontalAlign(HorizontalAlignment.RIGHT);
dialogBox.setButtons(Dialog.CLOSE);
dialogBox.add(dialogVPanel);
Button closeButton = dialogBox.getButtonById(Dialog.CLOSE);
// Add a handler to close the DialogBox
closeButton.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
dialogBox.hide();
sendButton.setEnabled(true);
sendButton.focus();
}
});
sendButton.addSelectionListener(new SelectionListener<ButtonEvent>() {
/**
* Fired when the user clicks on the sendButton.
*/
@Override
public void componentSelected(ButtonEvent ce) {
sendNameToServer();
}
});
// Add a handler to send the name to the server
nameField.addKeyListener(new KeyListener() {
/**
* Fired when the user types in the nameField.
*/
@Override
public void componentKeyUp(ComponentEvent event) {
if (event.isSpecialKey(KeyCodes.KEY_ENTER)) {
sendNameToServer();
}
}
});
}
/**
* Send the name from the nameField to the server and wait for a response.
*/
private void sendNameToServer() {
sendButton.setEnabled(false);
String textToServer = nameField.getValue();
textToServerLabel.setText(textToServer);
serverResponseLabel.setText("");
greetingService.greetServer(textToServer, new AsyncCallback<String>() {
public void onFailure(Throwable caught) {
// Show the RPC error message to the user
dialogBox.setHeading("Remote Procedure Call - Failure");
serverResponseLabel.addStyleName("serverResponseLabelError");
serverResponseLabel.setHTML(SERVER_ERROR);
dialogBox.show();
dialogBox.center();
Button closeButton = dialogBox.getButtonById(Dialog.CLOSE);
closeButton.focus();
}
public void onSuccess(String result) {
dialogBox.setHeading("Remote Procedure Call");
serverResponseLabel.removeStyleName("serverResponseLabelError");
serverResponseLabel.setHTML(result);
dialogBox.show();
dialogBox.center();
Button closeButton = dialogBox.getButtonById(Dialog.CLOSE);
closeButton.focus();
}
});
}
}

两个文件修改好了之后，我们要修改GWT的module文件。打开FirstApp.gxt.xml，修改entry-point为新的FirstGXTApp。然后我们运行一下吧

<!--entry-point class='com.danielvaughan.firstapp.client.FirstApp' /-->
<entry-point class='com.danielvaughan.firstapp.client.FirstGXTApp' />

GXT之旅：第一章：初识ExtGWT(5)——用GXT组件替换GWT组件相关推荐

第一章初识Mathematica
第一章初识Mathematica 1．Mathematica是什么 Matematica是由美国Wolfram公司研究开发的一个著名的数学软件,它提供了非常强大的功能,能够完成符号运算.数学图 ...
《起跑吧，Opa》 -- 中译本第一章初识Opa
第一章初识opa 本章,你将初识opa.你将学习如何安装Opa,编写opa程序以及熟悉Opa开发周期中的各个步骤. 安装opa 需要你预先从opa网站(http://opalang.org/)下载适 ...
第一章初识EmguCV
第一章初识EmguCV 1.1 EmguCV的基本介绍 1.1.1 计算机视觉.OpenCV和EmguCV 计算机视觉是一门研究如何使机器"看"的科学,更进一步的说,就是是指用摄 ...
第一章初识HTML
第一章初识HTML 学习HTML: 开发网页.微信小程序.跨端界面开发.web游戏 hyper text markup language 超文本标记语言网页的源码,解释和执行 w3c:万维网联盟/ ...
第一章初识OpenHarmony
序言本书以3W1H教学法对每个知识点进行多维度介绍,笔者认为这样写更符合人类对新知识的学习.本书以教学场景续写,一章为半天知识点. 本书读者对象阅读本书您需要具备html.css.js基础知识,所 ...
《HBase 不睡觉》第一章 - 初识 HBase
<HBase 不睡觉书>是一本让人看了不会睡着的HBase技术书籍,写的非常不错,为了加深记忆,决定把书中重要的部分整理成读书笔记,便于后期查阅,同时希望为初学 HBase 的同学带来一些 ...
c生万物【第一章初识c语言】
c生万物---第一章初识c语言前言 1.什么是C语言 2.第一个C语言程序 3.数据类型 4.变量.常量 4.1定义变量的方法 4.2变量的分类 4.3变量的使用 4.4 变量的作用域和生命周期 ...
第一章初识NANO板卡
第一章初识NANO板卡一. 英伟达Jetson Nano 是什么二. 为什么要用NVIDIA DIGITS 三. 我们可以在Jetson Nano上运行什么样的算法? 四.英伟达 NANO板卡配 ...
Cocos2d-x 3.0 红孩儿私家必修 - 第一章初识Cocos2d-x 3.0工程
Cocos2d-x 3.0 红孩儿私家必修前言: 时光飞逝,每每看到博客上的回复和微博上的鼓励,总会觉得亏欠大家点什么.停下来太久,总是觉得不太对劲,哈哈,时习之吧,望以此勉励大家. 红孩儿C ...

GXT之旅：第一章：初识ExtGWT(5)——用GXT组件替换GWT组件

旧貌换新颜

GXT之旅：第一章：初识ExtGWT(5)——用GXT组件替换GWT组件相关推荐

最新文章

热门文章