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

原创

茜茜770 2022-12-06 10:44:38 博主文章分类：GWT/GXT ©著作权

文章标签 gwt button dialog server html 文章分类 运维

©著作权归作者所有：来自51CTO博客作者茜茜770的原创作品，请联系作者获取转载授权，否则将追究法律责任

旧貌换新颜

现在，我们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' />

上一篇：sqlserver 修改表字段长度

下一篇：GXT之旅：第一章：初识ExtGWT(2)——搭建环境

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

发布评论

相关文章

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

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