添加应用逻辑。

到目前为止，我们已经使用 UiBinders 设计了 UI。

在本节中，我们将学习如何向 UI 添加逻辑。我们将接触到非常基础的数据建模以及如何处理部件事件。

  1. 通过向 Main.ui.xml 文件添加以下标记来创建**添加项目对话框**

    <ui:style>
  ...
  .content {
        padding: 15px;
  }

  .dialog {
        min-width: 40%;
  }
</ui:style>

<g:HTMLPanel>
  ...
  <p:PaperDialog ui:field="addItemDialog"
                 entryAnimation="fade-in-animation"
                 addStyleNames="{style.dialog}" modal="true">
    <h2>Add Item</h2>
    <p:PaperInput ui:field="titleInput" label="Title" required="true"
                  autoValidate="true" errorMessage="required input!"/>
    <div class="textarea-container iron-autogrow-textarea">
      <p:PaperTextarea ui:field="descriptionInput" label="Notes"/>
    </div>
    <div class="buttons">
       <p:PaperButton attributes="dialog-dismiss">Cancel</p:PaperButton>
       <p:PaperButton ui:field="confirmAddButton"
                      attributes="dialog-confirm">OK</p:PaperButton>
    </div>
  </p:PaperDialog>
</g:HTMLPanel>

    提示：您可以使用属性快速定义某些 Polymer 操作，例如entry-animation='fade-in-animation'。

    注意：当组件中存在未映射到 Java 方法的属性时，您可以使用attributes 键，就像我们在Cancel 和OK 按钮中所做的那样。访问paper-dialog 页面，并查看 API 参考部分以了解更多信息

  2. 将Main.ui.xml 文件中定义的所有字段添加到Main.java 类中。

    @UiField PaperDrawerPanel drawerPanel;
@UiField HTMLPanel content;

@UiField PaperDialog addItemDialog;
@UiField PaperInput titleInput;
@UiField PaperTextarea descriptionInput;

  3. 将点击处理程序方法绑定到Main.java 中的浮动操作按钮

    @UiHandler("addButton")
protected void onAddButtonClick(ClickEvent e) {
  addItemDialog.open();
}

  4. 重新加载应用

    现在，您可以通过点击右下角的浮动操作按钮来打开对话框。

  5. 为显示项目创建UiBinder 部件：Item.ui.xml 和Item.java

    • Item.ui.xml
        <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
      xmlns:g='urn:import:com.google.gwt.user.client.ui'
      xmlns:p='urn:import:com.vaadin.polymer.paper.widget'
      xmlns:i='urn:import:com.vaadin.polymer.iron.widget'>
      <ui:style>
        @external .done;
        .item .done {
          text-decoration: line-through;
        }
        .title {
          padding-left: 20px;
          font-size: 150%;
          font-weight: normal;
        }
      </ui:style>
      <g:HTMLPanel
        addStyleNames="vertical center-justified layout {style.item}">
        <style>
        </style>
        <div class="vertical-section">
          <h4>
            <p:PaperCheckbox ui:field="done"></p:PaperCheckbox>
            <span ui:field="title" class='{style.title}'>Go to Google</span>
          </h4>
          <div ui:field="description" class='{style.description}'></div>
        </div>
      </g:HTMLPanel>
    </ui:UiBinder>
    • Item.java：为简单起见，我们将此类用作项目 POJO
        package org.gwtproject.tutorial.client;

    import com.google.gwt.core.shared.GWT;
    import com.google.gwt.dom.client.Element;
    import com.google.gwt.uibinder.client.UiBinder;
    import com.google.gwt.uibinder.client.UiField;
    import com.google.gwt.uibinder.client.UiHandler;
    import com.google.gwt.user.client.ui.Composite;
    import com.google.gwt.user.client.ui.HTMLPanel;
    import com.vaadin.polymer.iron.widget.event.IronChangeEvent;
    import com.vaadin.polymer.paper.widget.PaperCheckbox;

    public class Item extends Composite {

      interface ItemUiBinder extends UiBinder<HTMLPanel, Item> {
      }

      private static ItemUiBinder ourUiBinder = GWT.create(ItemUiBinder.class);

      @UiField Element title;
      @UiField Element description;
      @UiField PaperCheckbox done;

      public Item() {
        initWidget(ourUiBinder.createAndBindUi(this));
      }

      @UiHandler("done")
      protected void change(IronChangeEvent ev) {
        if (done.getActive()) {
          title.addClassName("done");
        } else {
          title.removeClassName("done");
        }
      }
      public String getTitle() {
        return title.getInnerText();
      }
      public void setTitle(String s) {
        title.setInnerText(s);
      }
      public String getDescription() {
        return description.getInnerText();
      }
      public void setDescription(String s) {
        description.setInnerText(s);
      }
      public boolean isDone() {
        return done.getActive();
      }
      public void setDone(boolean b) {
        done.setActive(b);
      }
    }

  1. 添加当我们点击保存按钮时创建项目的逻辑。

    此时，您的Main.java 应该如下所示

    package org.gwtproject.tutorial.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.vaadin.polymer.paper.widget.*;

public class Main extends Composite {
  interface MainUiBinder extends UiBinder<HTMLPanel, Main> {
  }

  private static MainUiBinder ourUiBinder = GWT.create(MainUiBinder.class);

  @UiField HTMLPanel content;

  @UiField PaperDialog addItemDialog;
  @UiField PaperInput titleInput;
  @UiField PaperTextarea descriptionInput;

  public Main() {
    initWidget(ourUiBinder.createAndBindUi(this));
  }

  @UiHandler("addButton")
  protected void onAddButtonClick(ClickEvent e) {
    addItemDialog.open();
  }

  @UiHandler("confirmAddButton")
  protected void onConfirmAddButtonClick(ClickEvent e) {
    if (!titleInput.getValue().isEmpty()) {
      addItem(titleInput.getValue(), descriptionInput.getValue());
      // clear text fields
      titleInput.setValue("");
      descriptionInput.setValue("");
    }
  }

  private void addItem(String title, String description) {
    Item item = new Item();
    item.setTitle(title);
    item.setDescription(description);
    content.add(item);
  }
}

  2. 重新加载应用

    现在，您可以添加待办事项并使用复选框将其标记为已完成。

  3. 添加**清除全部**和**清除已完成**菜单项处理程序

    @UiHandler("menuClearAll")
protected void menuClearAll(ClickEvent e) {
  closeMenu();
  content.clear();
}

@UiHandler("menuClearDone")
protected void menuClearDone(ClickEvent e) {
  closeMenu();
  for (int i = content.getWidgetCount() - 1; i > -1; i--) {
    Item item = (Item)content.getWidget(i);
    if (item.isDone()) {
        content.remove(item);
    }
  }
}

private void closeMenu() {
  if (drawerPanel.getNarrow()) {
    drawerPanel.closeDrawer();
  }
}

    注意：closeMenu() 方法仅在应用在移动设备上查看，或者浏览器窗口足够窄以使侧边菜单折叠时才有用。因此，我们在点击任何菜单项后使用此方法隐藏菜单。

  4. 最终的Main.java 应该如下所示

    package org.gwtproject.tutorial.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.vaadin.polymer.paper.widget.PaperDialog;
import com.vaadin.polymer.paper.widget.PaperDrawerPanel;
import com.vaadin.polymer.paper.widget.PaperInput;
import com.vaadin.polymer.paper.widget.PaperTextarea;

public class Main extends Composite {
  interface MainUiBinder extends UiBinder<HTMLPanel, Main> {
  }

  private static MainUiBinder ourUiBinder = GWT.create(MainUiBinder.class);

  @UiField PaperDrawerPanel drawerPanel;
  @UiField HTMLPanel content;

  @UiField PaperDialog addItemDialog;
  @UiField PaperInput titleInput;
  @UiField PaperTextarea descriptionInput;

  public Main() {
    initWidget(ourUiBinder.createAndBindUi(this));
  }

  @UiHandler("addButton")
  protected void onAddButtonClick(ClickEvent e) {
    addItemDialog.open();
  }

  @UiHandler("confirmAddButton")
  protected void onConfirmAddButtonClick(ClickEvent e) {
    if (!titleInput.getValue().isEmpty()) {
      addItem(titleInput.getValue(), descriptionInput.getValue());
      // clear text fields
      titleInput.setValue("");
      descriptionInput.setValue("");
    }
  }

  private void addItem(String title, String description) {
    Item item = new Item();
    item.setTitle(title);
    item.setDescription(description);
    content.add(item);
  }

  @UiHandler("menuClearAll")
  protected void menuClearAll(ClickEvent e) {
    closeMenu();
    content.clear();
  }

  private void closeMenu() {
    if (drawerPanel.getNarrow()) {
        drawerPanel.closeDrawer();
    }
  }

  @UiHandler("menuClearDone")
  protected void menuClearDone(ClickEvent e) {
    closeMenu();
    for (int i = content.getWidgetCount() - 1; i > -1; i--) {
        Item item = (Item)content.getWidget(i);
        if (item.isDone()) {
            content.remove(item);
        }
    }
  }
}

  5. 重新加载应用

    • 添加几个项目
    • 将其中一些标记为已完成
    • 点击“清除已完成”菜单项
    • 点击“清除全部”菜单项

总结

在本章中，我们学习了如何

  1. 向应用添加更多部件。
  2. 向 UiBinder 组件添加事件处理程序。
  3. 使用像对话框和按钮这样的美观的 Polymer 组件。
  4. 在 GWT 中处理非常基础的数据模型。

免责声明