通過Presenter管理View中的錯誤和CSS

我在項目中實現的MVP模型是Passive MVP。主持人提到了這個觀點。此外，演示者有一個視圖必須遵守的顯示界面。通過Presenter管理View中的錯誤和CSS

我當前顯示界面如下 -

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修改。

對我的方法有沒有更好的選擇？或者我正在做的事情夠好嗎？我也喜歡我目前的方法的任何改進。

來源

2013-03-29 Jayesh Bhoot

你使用GWT編輯器框架呢？如果是這樣，請查看'HasEditorError '界面 - 如果每個控件都能夠顯示自己的錯誤，那麼您可以下放到那裏...... –

也許你可以考慮使用這個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選擇器（基於IDS或類），是這樣的：

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

，並認爲，這一方法的實現可能是：

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

正如你所看到的，這個解決方案並不具有侵入性，因爲插件不需要知道任何關於你的小部件實現的知識，而且你也不需要在你的小部件中實現某些接口等。

來源

2013-03-29 23:19:01

通過Presenter管理View中的錯誤和CSS

回答

相關問題