gwt - gwt 中 uibinder 的动态值

Question

我是 GWT 的新手，并试图制作一个试图继承复合小部件但复合小部件的值是动态的页面。

我的主页有点像:

         .....
         .....
         <g:Button>Open composite widget</g:button>
         .....
         .....

它正在打开另一个弹出面板，类似于:

         .....
         <table>
            <tr><td>Top: <myCompany:userMeasurementUnit/> </td></tr>
            <tr><td>Bottom: <myCompany:userMeasurementUnit/> </td></tr>
            <tr><td>Left: <myCompany:userMeasurementUnit/> </td></tr>
            <tr><td>Right: <myCompany:userMeasurementUnit/> </td></tr>
        </table>

以上应该向我们展示

         top (cm)
         bottom (cm)
         left (cm)
         right (cm)

但我不知道如何将值从主页传递到自定义小部件，即 usermeasurementunit

          <myCompany:userMeasurementUnit/>

我的 usermeasurementunit 是这样的:

UIBinder:

     <htmlpanel tag="span" ui:field="unit"/>

复合小部件是

      usermeasurementunit extends Composite {

       public usermeasurementunit(){
           initwidget...
       }

       public onload() { 
         ...
       }

       }

现在我想通过单击按钮传递任何测量单位厘米或英寸或米。我尝试使用事件总线但它没有帮助，因为当我单击按钮时弹出面板不在屏幕上并且它没有捕获事件。如果你们中的任何人可以帮助我解决这个问题，我将非常感激，因为我真的在这件事上苦苦挣扎。

亲切的问候

Answer 1

首先，您需要了解 GWT 中的对象实例化流程。

他们称之为“延迟绑定(bind)”，而不是“动态绑定(bind)”。

Uibinder xml 文件是一个布局模板。而它背后的 JAva 源 bean 在一般编程术语中被称为“代码隐藏”。

uibinder 布局模板的作用或目的是减轻布局的负担(在 Internet 上，许多非英语程序员编写“布局”，虽然语法上很有趣，但其实是一样的)，以便代码隐藏可以专注于控制布局的响应。

这类似于MVP的态度。 View 实现与演示控制分离。您甚至可以在不确切知道这些字段的布局位置的情况下编写代码隐藏错误。您甚至可以简单地提供一个模板，其中 ui 元素没有正确布局，以便首先专注于您的代码隐藏。也许在那之后。一个用于移动设备的 uibinder 模板，另一个用于桌面 - 但它们可以共享相同的代码隐藏。

受 uibinder 模板影响的显示值在 uibind 期间一劳永逸地确定。没有将 uibinder 字段动态绑定(bind)到代码隐藏中声明的对象/变量的不断变化的值。

要在 uibind 之后动态更改/传播 uibinder 字段的值，您必须故意在代码隐藏中设置其值或编写监听器来检测其更改。

public class Graceland {

  @UiField
  Label pressure;

  @UiField
  Button reset;

  public void setPressure(int value) {
    pressure.setText(value);
  }

  @UiHandler("reset")
  void nameDoesNotMatter(ClickEvent ev) {
    pressure.setText(default);
  }
}

GWT.create() 在编译期间为模板生成 Java 源代码。 GWT.create 不是运行时函数。

@UiField 和 @UiHandler 在 uibind 期间绑定(bind)到模板中的 uifield。

uibind() 的作用主要不是运行时，而是编译时。虽然它的最终性是在运行时实现的，但所有用于构造对象的 javascript 代码和相应的值都是在编译时生成的，并且在运行时的 uibind 期间执行一次且仅执行一次。

因此，其目的不是要能够完全取代代码隐藏的动态角色，而只是将其从布局的任务中解放出来，这样我们程序员就可以有一 block 干净的代码隐藏被涂抹为尽可能少地使用布局的意大利面条源。

但是，如果您希望在绑定(bind)期间“动态”影响 uibinder 字段的值，那么 Ui:with是你的 friend 。

package z.mambazo;
public class Graceland {
  ....
  String initialPressure(){
    /* "dynamically" obtain the pressure from the
     * pressure gauge in the petroleum distillation stack
     * during uibind
     */
  }
}

Graceland.ui.xml:

<ui:UiBinder blah...blah>
  <ui:with type="z.mambazo" field="zulu"/>
  <g:VerticalPanel>
    <g:Label
      ui:field="pressure"
      text="the temperature is :{zulu.initialPressure}"/>
  </g:VerticalPanel>
</ui:UiBinder>

ui:with bean 不必是模板的代码隐藏。 ui:with bean 有一个无参数构造函数，或者您必须提供 ui:with 标记，其属性对应于构造函数参数。

您必须注意，为了使用 ui:with，init 值必须在 value 属性中声明，而不是在标签文本中。

<g:Label
  ui:field="pressure"
  text="the temperature is : {zulu.initialPressure}"/>

不是

<g:Label ui:field="pressure">
  the temperature is : {zulu.initialPressure}
</g:Label>

第二种方式，将简单地复制文本。

但是，您也可以这样做:

<g:HtmlPanel>
  the temperature is :&nbsp;
  <g:Label ui:field="pressure"
    text="{zulu.initialPressure}"/>
</g:HtmlPanel>

另外，请注意，所有 GWT UI Java 代码，甚至是临时生成的代码，都被翻译成浏览器 Javascript。因此，您使用 ui:with 引用的任何类都必须是 Java 源代码而不是 Java 字节码。并且那些源代码在任何时候都不能在调用链中调用字节码。