gwt的mvp模式

GWT Model-View-Presenter是用于大規(guī)模應(yīng)用程序開發(fā)的設(shè)計(jì)模式。 它源于MVC，它在視圖和邏輯之間進(jìn)行劃分，并有助于創(chuàng)建結(jié)構(gòu)良好，易于測(cè)試的代碼。 為了幫助像我這樣的懶惰開發(fā)人員，我研究了如何減少使用聲明式UI時(shí)要編寫的類和接口的數(shù)量。

經(jīng)典MVP

您知道如何在Facebook中發(fā)布鏈接嗎？ –最近，我不得不為一個(gè)小GWT旅行應(yīng)用程序創(chuàng)建此功能。

因此，您可以輸入一個(gè)URL，然后將其提取并解析。 您可以從頁面中選擇圖像之一，查看文本，最后存儲(chǔ)鏈接。
現(xiàn)在如何在MVP中正確設(shè)置此設(shè)置？ –首先，創(chuàng)建一個(gè)類似于視圖的抽象接口：

interface Display {HasValue<String> getUrl();void showResult();HasValue<String> getName();HasClickHandlers getPrevImage();HasClickHandlers getNextImage();void setImageUrl(String url);HasHTML getText();HasClickHandlers getSave(); }

它利用GWT組件實(shí)現(xiàn)的接口來提供對(duì)其狀態(tài)和功能的某些訪問。 在測(cè)試期間，您無需參考GWT內(nèi)部即可輕松實(shí)現(xiàn)此接口。 同樣，可以在不影響更深層邏輯的情況下更改視圖實(shí)現(xiàn)。
該實(shí)現(xiàn)非常簡(jiǎn)單，此處顯示了聲明的UI字段：

class LinkView implements Display@UiField TextBox url;@UiField Label name;@UiField VerticalPanel result;@UiField Anchor prevImage;@UiField Anchor nextImage;@UiField Image image;@UiField HTML text;@UiField Button save;public HasValue<String> getUrl() {return url;}public void showResult() {result.setVisible(true);}// ... and so on ... }

然后，演示者使用接口訪問視圖，按照慣例，該接口寫在presenter類中：

class LinkPresenterinterface Display {...};public LinkPresenter(final Display display) {display.getUrl().addValueChangeHandler(new ValueChangeHandler<String>() {@Overridepublic void onValueChange(ValueChangeEvent<String> event) {Page page = parseLink(display.getUrl().getValue());display.getName().setValue(page.getTitle());// ...display.showResult();}});}// ... and so on ... }

因此，我們?cè)谶@里：使用MVP，您可以很好地組織代碼并使代碼易于閱讀。

簡(jiǎn)化

收益是： 每個(gè)屏幕或組件三種類型 。 每當(dāng)重新定義UI時(shí)，三個(gè)文件都將更改。 未將ui.xml文件計(jì)為視圖聲明。 對(duì)于像我這樣的懶人來說，這些太多了。 并且，如果您查看視圖實(shí)現(xiàn)，很明顯如何簡(jiǎn)化它：
使用視圖聲明（* .ui.xml）作為視圖，并將ui元素直接注入到presenter中：

class LinkPresenter@UiField HasValue<String> url;@UiField HasValue<String> name;@UiField VerticalPanel result;@UiField HasClickHandlers prevImage;@UiField HasClickHandlers nextImage;@UiField HasUrl image;@UiField HasHTML text;@UiField HasClickHandlers save;public LinkPresenter(final Display display) {url.addValueChangeHandler(new ValueChangeHandler<String>() {@Overridepublic void onValueChange(ValueChangeEvent<String> event) {Page page = parseLink(url.getValue());name.setValue(page.getTitle());// ...result.setVisible(true);}});}// ... and so on ... }

由于可以使用它們的接口聲明注入的元素，因此此演示者具有成熟的MVP演示者的許多優(yōu)點(diǎn)：您可以通過設(shè)置實(shí)現(xiàn)組件來對(duì)其進(jìn)行測(cè)試（請(qǐng)參見下文），并且可以輕松地更改視圖實(shí)現(xiàn)。
但是現(xiàn)在，您將所有這些都放在一個(gè)類和一個(gè)view.ui.xml文件中，并且可以更簡(jiǎn)單地應(yīng)用結(jié)構(gòu)更改。

使UI元素抽象

TextBox實(shí)現(xiàn)HasValue <String>。 這很簡(jiǎn)單。 但是，不能通過接口訪問的ui元素的屬性呢？ 您可能已經(jīng)認(rèn)識(shí)到的示例是上述代碼中的VerticalPanel命名結(jié)果result及其方法setVisible（），不幸的是，該方法在UiObject基類中實(shí)現(xiàn)。 因此，沒有可用的接口，例如。 在測(cè)試時(shí)實(shí)施。 為了能夠切換視圖實(shí)現(xiàn)，最好注入ComplexPanel，但是即使在測(cè)試時(shí)也無法實(shí)例化。

例如，在這種情況下，唯一的出路是創(chuàng)建一個(gè)新接口

interface Visible {void setVisible(boolean visible);boolean isVisible(); }

和子類化有趣的UI組件，實(shí)現(xiàn)相關(guān)的接口：

package de.joergviola.gwt.tools; class VisibleVerticalPanel extends VerticalPanel implements Visible {}

這似乎是乏味和次優(yōu)的。 但是，只能像上述成熟的MVP中那樣，僅針對(duì)每個(gè)組件而不是針對(duì)每個(gè)視圖進(jìn)行操作。
等待-如何在UiBuilder模板中使用自制組件？ –很簡(jiǎn)單：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:t="urn:import:de.joergviola.gwt.tools"><g:VerticalPanel width="100%"><g:TextBox styleName="big" ui:field="url" width="90%"/><t:VisibleVerticalPanel ui:field="result"visible="false" width="100%"></t:VisibleVerticalPanel></g:VerticalPanel> </ui:UiBinder>

聲明處理程序

聲明（click-）處理程序的標(biāo)準(zhǔn)方法非常方便：

@UiHandler("login")public void login(ClickEvent event) {srv.login(username.getValue(), password.getValue());}

在簡(jiǎn)化的MVP方法中，此代碼將駐留在演示者中。 但是ClickEvent參數(shù)是View組件，可以例如。 不能在運(yùn)行時(shí)實(shí)例化。 另一方面，由于UiBuilder需要Event參數(shù)，因此無法從簽名中將其刪除。

因此，不幸的是，您必須堅(jiān)持手動(dòng)注冊(cè)ClickHandlers（因?yàn)闊o論如何都必須執(zhí)行完整的MVP）：

public initWidget() {...login.addClickHandler(new ClickHandler() {@Overridepublic void onClick(ClickEvent event) {login();}});... }public void login(ClickEvent event) {srv.login(username.getValue(), password.getValue()); }

測(cè)試中
引入MVP時(shí)，使您的應(yīng)用程序可測(cè)試是主要目標(biāo)之一。
GwtTestCase能夠在容器環(huán)境中執(zhí)行測(cè)試，但需要一些啟動(dòng)時(shí)間。 在TDD中，希望有一個(gè)運(yùn)行速度非?？斓臏y(cè)試，可以在每次更改后應(yīng)用它而不會(huì)丟失上下文。 因此，MVP旨在能夠在標(biāo)準(zhǔn)JVM中測(cè)試所有代碼。 在標(biāo)準(zhǔn)MVP中，您將創(chuàng)建視圖接口的實(shí)現(xiàn)。 在這種簡(jiǎn)化方法中，只需在組件接口級(jí)別創(chuàng)建實(shí)現(xiàn)即可，如下所示：

class Value<T> implements HasValue<T> {private T value;List<ValueChangeHandler<T>> handlers = new ArrayList<ValueChangeHandler<T>>();@Overridepublic HandlerRegistration addValueChangeHandler(ValueChangeHandler<T> handler) {handlers.add(handler);return null;}@Overridepublic void fireEvent(GwtEvent<?> event) {for (ValueChangeHandler<T> handler : handlers) {handler.onValueChange((ValueChangeEvent) event);}}@Overridepublic T getValue() {return value;}@Overridepublic void setValue(T value) {this.value = value;}@Overridepublic void setValue(T value, boolean fireEvents) {if (fireEvents)ValueChangeEvent.fire(this, value);setValue(value);}}

與往常一樣，您必須將此組件注入到被測(cè)演示者中。 盡管從原則上講，您可以為組件創(chuàng)建一個(gè)設(shè)置器，但我仍然遵循通常的技巧來使組件受包保護(hù)，將測(cè)試與演示者放入同一包中（但當(dāng)然是不同的項(xiàng)目文件夾），然后直接設(shè)置組件。

你贏了什么？

您得到的代碼結(jié)構(gòu)像完整的MVP一樣干凈，只需要少得多的類和樣板代碼。
在某些情況下，組件及其接口需要實(shí)用程序類，但是隨著時(shí)間的流逝，您將構(gòu)建一個(gè)真正易于理解，測(cè)試和擴(kuò)展的環(huán)境。

我很好奇：告訴我您的經(jīng)歷！

參考： JWT合作伙伴 簡(jiǎn)化了GWT MVP ? Joerg Viola在Joerg Viola博客上 。

翻譯自: https://www.javacodegeeks.com/2012/02/gwt-mvp-made-simple.html

gwt的mvp模式

總結(jié)

以上是生活随笔為你收集整理的gwt的mvp模式_GWT MVP变得简单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。