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

Question

我在元素中实现的 MVP 模型是 Passive MVP。演示者有对 View 的引用。此外，演示者有一个 View 必须遵守的显示接口(interface)。

我现在的Display界面如下-

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 的变化脱钩。只有 View 需要担心它。

但是，这种做法最终导致接口(interface)中错误相关的方法过多。

我想到的另一种方法是在界面中公开 ErrorWidget。但是，GWT 没有 HasCss 类型的接口(interface)，我将不得不显式指定小部件类型(比如标签)，或者使用 IsWidget 接口(interface)(这将再次暴露整个小部件，而不仅仅是它的 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));

然后在您的 View 中，您可以添加一个方法来通知演示者哪些小部件出错，我会使用 CSS 选择器(基于 id 或类)，例如:

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

这个方法在 View 中的实现可以是:

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

如您所见，此解决方案在某种意义上不是侵入性的，因为插件不需要了解有关您的小部件实现的任何信息，并且您不必被迫在小部件中实现某些接口(interface)等。