在 GWT 页面上启用和禁用保存按钮答案

【问题标题】：Enabling and Disabling Save button on a GWT page在 GWT 页面上启用和禁用保存按钮
【发布时间】：2010-06-23 03:13:41
【问题描述】：

我正在开发的应用程序有很多页的设置数据和很多文本框；每个页面都有一个保存按钮。我已将大部分页面定义为 *.ui.xml 文件并使用 GWT 2.0 UI 绑定。

我想添加一个保存按钮，该按钮已禁用onload，并且仅在用户将数据修改到其中一个文本框后才启用。

我知道我可以针对页面上的每个元素注册一个事件处理程序来启用按钮，但我想要一个更优雅的解决方案。理想情况下，我想定义一个“侦听”页面上的事件并自行更改的按钮。这在 GWT 中可行吗？

【问题讨论】：

标签： javascript events gwt textbox dom-events

【解决方案1】：

您还可以使用 addDomHandler 将更改事件添加到整个包含小部件中

public class SetupDataPage extends Composite{

  // Binder stuff  

  // Button from the binder
  @UiField Button saveBtn;

  public SetupDataPage(){
        addDomHandler(new ChangeHandler() {

            @Override
            public void onChange(ChangeEvent event) {
                saveBtn.setEnabled(true);
            }
        }, ChangeEvent.getType());
  }
}

注意这将触发 SetupDataPage 中所有文本框的事件。另一方面，它可能不适用于某些特定的小部件。我知道它适用于 GWT 的文本框、复选框、列表框...

【讨论】：

这对我们很有效。使用 domHandler 加载页面时是否存在任何性能问题？
@Tihom 我们没有注意到任何高级性能测试。
这很有效。如果页面有列表框，我们发现的例外是在 IE 中。在 IE 中更改列表框中的值不会触发 dom 上的 ChangeEvent。我必须在列表框上添加一个显式的更改处理程序才能使其工作

【解决方案2】：

查看关于 MVP 的 GWT 文章
http://code.google.com/webtoolkit/articles/mvp-architecture.html
http://code.google.com/webtoolkit/articles/mvp-architecture-2.html

特别是关于事件和事件总线的部分。

也看看这个http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/8b0ae5eaf84d8bc2?hide_quotes=no

【讨论】：

+1 该群组线程中链接的视频是纯金色的。 youtube.com/watch?v=PDuhR18-EdM

【解决方案3】：

你可以想出一个非常简单的解决方案。

将所有可编辑控件放入 HTMLPanel（或任何其他面板，如果您愿意）
在随附的 java 文件中有一个对此 HTMLPanel 的 ui:field 引用。
在您的 java 类中调用 initWidget 后不久，遍历 HTMLPanel 的所有子小部件并在每个输入小部件上注册一个 ChangeHandler。

伪代码：

    for ( int i = 0; i < hTMLPanel.getWidgetCount( ); i++ )
    {
        Widget widget = hTMLPanel.getWidget( i );

        if ( widget instanceof HasChangeHandlers )
            ((HasChangeHandlers)widget).addChangeHandler( <Your Change Handler to enable save>);
    }

如果你有嵌套的小部件，你可以让它递归。

【讨论】：

我想补充一点，您应该在进入循环之前定义ChangeHandler，然后重复使用它 - 无需为每个元素创建/实例化它。
变更处理程序的问题在于它们是在“失去焦点”事件时执行的。所以您需要在文本框中键入一个值，然后使用 TAB 键或单击某处，然后您的处理程序将被执行。此外，此“值更改”事件将阻止“鼠标单击”。例如在文本字段中输入一个值，然后单击某个“更新”按钮。您的“更改”处理程序将被执行，但您的鼠标单击处理程序不会。

【解决方案4】：

DOM 处理程序更好，执行速度更快..

【讨论】：