通过演示器管理视图中的错误和CSS

Question

我在项目中实现的MVP模型是被动式MVP。呈现者有对视图的引用。此外，呈现者有一个视图必须遵守的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();
}

这里的难点是用于设置/清除输入错误消息的方法。视图实现的每个setXXXError()将使相应的ErrorWidget可见，并且可能还突出显示相应的InputWidget(通过将其标记为红色或其他东西)。相反，每种clearXXXError()方法都会隐藏相应的ErrorWidget，并从相应的InputWidget中删除高亮部分。这样，演示者就不必显式地处理CSS管理，从而使自己与CSS中的更改分离。只有视图需要担心它。

然而，这种方法最终在接口中产生了太多与错误相关的方法。

我想到的另一种方法是在接口中公开ErrorWidget。但是，GWT没有HasCss类型的接口，我必须显式地指定小部件类型(比如，一个Label)，或者使用IsWidget接口(这将再次公开整个小部件，而不仅仅是它的CSS属性)。而且，在这种方法中，我必须显式地指定演示器中的CSS修改。

有没有比我的方法更好的选择?还是说我做的已经足够好了?

Answer 1

也许你可以考虑使用这个工具提示插件(关注底部的验证示例)。它可以用很少的代码行增强你的小部件。

插件的源代码和示例，以及如何将其添加到您的项目的信息在这个github repo中。在这个链接中，你有一段他们用来增强示例表单的代码。

在您的例子中设置您的表单小部件:

 @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");
 }

正如你所看到的，这个解决方案并不具有侵入性，因为插件不需要知道你的小部件实现的任何信息，你也不需要在你的小部件中强制实现某些接口，等等。