java - GWT:使用分离的 mvp 构建小部件

Question

我正在尝试构建一个具有分离模型、 View 和演示器的 gwt 小部件。

到目前为止，我只为所有这些组件使用一个类:

一个紧凑的例子:

public class MyCellSelectableTable extends Composite {

   private WhatEverRepresentation selectedCell;

   public MyCellSelectableTable() {

      Grid myTable = new Grid(2,2);
      /*
       * Some code to realize a table with cell selection
       * ...
       */

     initWidget(myTable);
  }
}

在我看来，信息“selectedCell”(以及在我的项目中的许多其他数据)应该存储在单独的模型中。 我怎样才能在结构上正确地实现这个，所以它仍然是一个小部件，但具有封装的 mvp 架构？

Answer 1

在我的一个项目中，我被要求设计一个旋转项目，该项目在移动网络应用程序上看起来不错。然后我们意识到我们实际上需要我们的旋转器的另一种 View ，它也“更薄”。因此，我尝试将 MVP 方法应用于我的小部件实现，这对我来说效果很好。下面是一个非常简单的示例，不用于生产用途，仅用于演示

按照 MVP 模式定义 Presenter 和 View 接口(interface)。这里的重点是使 View 实现变得愚蠢，以便可以轻松地切换它们。请注意，Spinner 实际上并不是一个 Widget，但它实现了 IsWidget，这意味着它将被视为一个 widget，但实际上我们将传递 View 实现的引用。

public class Spinner implements IsWidget, SpinnerPresenter{
    interface View{
        Widget asWidget();
        void stepUp(int step);
        void stepDown(int step);
        void setValue(int value);
        void setPixelSize(int width,int height);
    }   
    View view;
    int value;  
    public Spinner() {
        view = new SpinnerImpl(this);
        view.setValue(0);
    }   
    public int getValue() {
        return value;
    }   
    public void setValue(int value) {
        if (value == this.value)
            return;
        this.value = value;
        view.setValue(value);
    }
    public void setPixelSize(int width, int height){
        view.setPixelSize(width,height);
    }
    @Override
    public void downButtonClicked() {
        value--;
        view.stepDown(1);
    }
    @Override
    public void upButtonClicked() {
        value++;
        view.stepUp(1);
    }
    @Override
    public Widget asWidget() {
        return view.asWidget();
    }
}

View 实现本身实现了 Spinner 类中定义的 View 接口(interface)。请注意我们如何将用户事件委托(delegate)给 Spinner 类，以便通过 SpinnerPresenter 接口(interface)进行处理。

public class SpinnerImpl extends Composite implements Spinner.View{
    private TextBox txtBox;
    private Button upButton,downButton;
    private HorizontalPanel panel;
    private SpinnerPresenter presenter;
    public SpinnerImpl(SpinnerPresenter presenter){
        this.presenter = presenter;
        upButton = new Button("up");
        downButton = new Button("down");

        txtBox = new TextBox();
        txtBox.setEnabled(false);

        panel = new HorizontalPanel();
        panel.add(upButton);
        panel.add(txtBox);
        panel.add(downButton);

        addHandlers();
        initWidget(panel);      
    }   
    private void addHandlers() {
        upButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                presenter.upButtonClicked();
            }
        });
        downButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                presenter.downButtonClicked();
            }
        });     
    }
    @Override
    public void stepDown(int step) {
        txtBox.setValue(Integer.parseInt(txtBox.getValue())-1+"");
    }
    @Override
    public void stepUp(int step) {
        txtBox.setValue(Integer.parseInt(txtBox.getValue())+1+"");
    }
    @Override
    public void setValue(int value) {
        txtBox.setValue(0+"");
    }
}

SpinnerPresenter 界面:

public interface SpinnerPresenter {
    void upButtonClicked();
    void downButtonClicked();
}

最后将我的小部件添加到根面板。请注意，我可以添加微调器类，就好像它是一个小部件一样

Spinner s = new Spinner();
RootPanel.get().add(s);

现在，如果我想改变我的旋转项目的外观，改变方向，也许添加一个漂亮的旋转动画等，我只需要改变我的 View 实现。最后但并非最不重要的一点是，在测试我的小部件时，这种方法将有所帮助，因为我可以轻松地模拟我的 View 。