Question

我在项目中实施的MVP模型是Passive MVP。演示者可以参考该视图。此外，演示者还有一个视图必须遵守的显示界面。

我当前的显示界面如下 -

public interface Display {
    Widget asWidget();

    <Control extends HasValue<String> & HasBlurHandlers> Control code();
    <Control extends HasValue<String> & HasBlurHandlers> Control name();
    <Control extends HasValue<String> & HasBlurHandlers> Control address();
    <Control extends HasValue<String> & HasBlurHandlers> Control contactNumber1();
    <Control extends HasValue<String> & HasBlurHandlers> Control contactNumber2();
    <Control extends HasValue<String> & HasBlurHandlers> Control email();
    <Control extends HasValue<String> & HasBlurHandlers> Control registrationNumber();
    <Control extends HasValue<String> & HasBlurHandlers & HasEnabled> Control registrationYear();

    HasClickHandlers saveControl();
    HasClickHandlers cancelControl();

    void setCodeError(String message);
    void setNameError(String message);
    void setAddressError(String message);
    void setContactNumber1Error(String message);
    void setEmailError(String message);
    void setRegistrationNumberError(String message);

    void clearCodeError();
    void clearNameError();
    void clearAddressError();
    void clearContactNumber1Error();
    void clearEmailError();
    void clearRegistrationNumberError();
}

这里的痛苦是用于设置/清除输入错误消息的方法。由View实现的每个setXXXError()都会使相应的ErrorWidget可见，并且可能还会突出显示相应的InputWidget（通过将其标记为红色或其他内容）。相反，每个clearXXXError()方法都会隐藏相应的ErrorWidget，并从相应的InputWidget中删除突出显示。这样，演示者不必明确处理CSS管理，从而将自己与CSS的变化分离。只有视图必须担心它。

然而，这种方法最终导致界面中有太多与错误相关的方法。

我想到的另一种方法是在界面中公开ErrorWidget。但是，GWT没有HasCss - 类型接口，我必须要么明确指定窗口小部件类型（比如一个Label），要么使用IsWidget接口（这将再次暴露整个窗口小部件而不仅仅是它的CSS属性）。此外，在这种方法中，我必须在演示者中明确指定CSS修改。

我的方法有更好的替代方案吗？或者我在做什么就足够了？我也很喜欢目前方法的任何改进。

Answer 1

也许你可以考虑使用这个tooltip插件（专注于底部的验证示例）。它只需很少的代码就可以增强你的小部件。

插件和示例的源代码以及有关如何将其添加到项目的信息位于this github repo。 In this link你有他们用来增强他们的示例形式的代码片段。

在您的情况下，使用以下命令设置表单小部件：

 @UiField TextBox myTextBoxWidget;

 $(myTextBoxWidget).id("textbox1").as(Tooltip).tooltip(new TooltipOptions()
            .withContent("Password cannot be empty")
            .withTrigger(TooltipTrigger.MANUAL)
            .withPlacement(TooltipPlacement.RIGHT)
            .withResources(ValidationTooltipResources.INSTANCE));

然后在你的视图中你可以添加一个方法来通知演示者哪些小部件有错误，我会使用CSS选择器（基于id或类），如：

 myView.setError("#texbox1, #texbox2");

并且视图中此方法的实现可以是：

 public void setError(cssSelector) {
   $(*, this).removeClass("invalid");
   $(cssSelector, this).addClass("invalid");
 }

正如您所看到的那样，这个解决方案并不具有侵入性，因为插件不需要了解您的小部件实现，也不必强迫您在小部件中实现某些接口等。

通过Presenter在View中管理错误和CSS

1 个答案: