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之间有不少类似的类，如下是一些他们之间的对比情况

GXTGWTcom.extjs.gxt.ui.client.widget.Dialogcom.google.gwt.user.client.ui.DialogBoxcom.extjs.gxt.ui.client.widget.Labelcom.google.gwt.user.client.ui.Labelcom.extjs.gxt.ui.client.widget.VerticalPanelcom.google.gwt.user.client.ui.VerticalPanelcom.extjs.gxt.ui.client.widget.button.Buttoncom.google.gwt.user.client.ui.Buttoncom.extjs.gxt.ui.client.widget.form.TextFieldcom.google.gwt.user.client.ui.TextBoxcom.extjs.gxt.ui.client.event.ButtonEventcom.google.gwt.event.dom.client.ClickEventcom.extjs.gxt.ui.client.event.SelectionListenercom.google.gwt.event.dom.client.ClickHandlercom.extjs.gxt.ui.client.event.KeyListenercom.google.gwt.event.dom.client.KeyUpEventcom.extjs.gxt.ui.client.event.ComponentEventcom.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 = newTextField<String>();private final Dialog dialogBox = new Dialog();private final Label textToServerLabel = new Label();private final HTML serverResponseLabel = new HTML();

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

GXTGWTTextField.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 widgetssendButton.addStyleName("sendButton");// Add the nameField and sendButton to the RootPanel// Use RootPanel.get() to get the entire body elementRootPanel.get("nameFieldContainer").add(nameField);RootPanel.get("sendButtonContainer").add(sendButton);RootPanel.get("errorLabelContainer").add(errorLabel);// Focus the cursor on the name field when the app loadsnameField.setFocus(true);nameField.selectAll();// Create the popup dialog boxfinal 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 ElementcloseButton.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 DialogBoxcloseButton.addClickHandler(new ClickHandler() {public void onClick(ClickEvent event) {dialogBox.hide();sendButton.setEnabled(true);sendButton.setFocus(true);}});// Create a handler for the sendButton and nameFieldclass 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 userdialogBox.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 serverMyHandler 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 widgetssendButton.addStyleName("sendButton");// Add the nameField and sendButton to the RootPanel// Use RootPanel.get() to get the entire body elementRootPanel.get("nameFieldContainer").add(nameField);RootPanel.get("sendButtonContainer").add(sendButton);// Focus the cursor on the name field when the app loadsnameField.focus();nameField.selectAll();// Create the popup dialog boxdialogBox.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 DialogBoxcloseButton.addSelectionListener(new SelectionListener<ButtonEvent>() {@Overridepublic void componentSelected(ButtonEvent ce) {dialogBox.hide();sendButton.setEnabled(true);sendButton.focus();}});sendButton.addSelectionListener(new SelectionListener<ButtonEvent>() {/** * Fired when the user clicks on the sendButton. */@Overridepublic void componentSelected(ButtonEvent ce) {sendNameToServer();}});// Add a handler to send the name to the servernameField.addKeyListener(new KeyListener() {/** * Fired when the user types in the nameField. */@Overridepublic 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 userdialogBox.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' />