Model-View-Presenter被动视图：bootstraping - 谁最初显示视图？ [英] Model-View-Presenter passive view: bootstraping - who displays the view initially?

问题描述

在Passive View Model View Presenter模式中，谁负责显示视图？我找到了其他MVP版本的相关答案，但它们似乎不适用于被动视图版本。

In the Passive View Model View Presenter pattern, who has the responsibility for displaying the view? I have found related answers for other MVP versions, but they don't seem applicable to the passive view version.

我有一个使用Java Swing的具体示例。它非常简单，但基本上我们有一个 SwingCustomersView ，它在内部构建一个带有表（客户列表）的JPanel和一个显示当前所选客户年龄的标签。在表格中选择客户后，演示者将从模型中检索选定的客户年龄。我认为这个例子是MVP被动视图的正确实现，但如果我错了，请纠正我。

I have a concrete example using Java Swing. It's pretty simple, but basically we have a SwingCustomersView which internally builds a JPanel with a table (list of customers) and a label displaying the currently selected customers age. When a customer is selected in the table, the presenter retrieves the selected customer age from the model. I think the example is a correct implementation of MVP Passive View, but correct me if I'm wrong.

问题是我们如何引导这些类？例如，如果我们想在JFrame中显示 SwingCustomersView 。怎么会那样做？我想象的是：

The question is how do we bootstrap these classes? For example, if we wanted to display the SwingCustomersView in a JFrame. How would one do that? I imagine something along the lines of:

void launcher() {
    CustomersModel model = new CustomersModel();
    SwingCustomersView view = new SwingCustomersView();
    CustomersPresenter presenter = new CustomersPresenter(view, model);
}

这是初始接线，但尚未显示任何内容。我们如何实际显示视图？是否负责（1） launcher（），（2） SwingCustomersView 或（3） CustomersPresenter 显示视图？不幸的是，我不相信这些都是非常好的，你可以从下面的想法中看到。也许有另一种方式？

This is the initial wiring, but nothing is displayed yet. How do we actually display the view? Is it the responsibility of (1) launcher() , (2) SwingCustomersView or (3) CustomersPresenter to display the view? Unfortunately I don't believe any of those are very good as you can see from my thoughts below. Perhaps there's another way?

制作 SwingCustomersView 扩展JFrame并将其内部JPanel添加到自身的内容窗格中。然后我们可以这样做：

Make SwingCustomersView extend JFrame and make it add it's internal JPanel to the content pane of itself. Then we can do this:

void launcher() {
    CustomersModel model = new CustomersModel();
    SwingCustomersView view = new SwingCustomersView();
    CustomersPresenter presenter = new CustomersPresenter(view, model);
    view.setVisible(true); // Displays the view
}

但是在这种情况下我们不使用演示者任何事情的实例。这不奇怪吗？它只是用于布线，我们也可以删除变量，只需要新的CustomersPresenter（视图，模型）。

However in this case we don't use the presenter instance for anything. Isn't that strange? It's just there for wiring, we could just as well delete the variable and just do new CustomersPresenter(view, model).

制作 SwingCustomersView 获取容器在构造函数中，它应该添加它的内部JPanel：

Make SwingCustomersView take a Container in the constructor to which it should add it's internal JPanel:

void launcher() {
    CustomersModel model = new CustomersModel();
    JFrame frame = new JFrame("Some title");
    SwingCustomersView view = new SwingCustomersView(frame.getContentPane());
    CustomersPresenter presenter = new CustomersPresenter(view, model);
    frame.pack(); 
    frame.setVisible(true) // Displays the view
}

但是，与（1）相同的问题：演示者实例什么都不做。这看起来很奇怪。此外，使用（1）和（2）两者都可以在演示者连接之前显示视图，我想在某些情况下可能会导致奇怪的结果。

However, same problem as (1): the presenter instance does nothing. It seems strange. Furthermore with both (1) and (2) it is possible to display the view before the presenter is hooked up, which I imagine could cause strange results in some situations.

使 CustomersPresenter 负责显示视图somwhow。然后我们可以这样做：

Make CustomersPresenter responsible for displaying the view somwhow. Then we could do this:

void launcher() {
    CustomersModel model = new CustomersModel();
    SwingCustomersView view = new SwingCustomersView();
    CustomersPresenter presenter = new CustomersPresenter(view, model);
    presenter.show() // Displays the view
}

这会解决了施工后不使用它的问题。但是，如果没有更改 CustomersView 界面或使 CustomersPresenter 过于依赖于底层，我看不出怎么办？ GUI实现。此外，显示视图听起来不像演示逻辑，因此似乎不属于演示者。

This would solve the problem of not using it for anything after construction. But I don't see how do to this without either changing the CustomersView interface or making CustomersPresenter too dependent on the underlying GUI implementation. Furthermore, displaying a view doesn't sound like presentation logic and thus doesn't seem to belong in the presenter.

public class CustomersModel {
    private List<Customer> customers;

    public CustomersModel() {
        customers = new ArrayList<Customer>();
        customers.add(new Customer("SomeCustomer", "31"));
        customers.add(new Customer("SomeCustomer", "32"));
    }

    public List<Customer> getCustomers() {
        return customers;
    }
}

public class Customer {
    public String name;
    public String age;

    public Customer(String name, String age) {
        this.name = name;
        this.age = age;
    }
}

public interface CustomersView {
    void addCustomerSelectionChangeListener(ItemListener listener);
    void onNewActiveCustomer(String age);
    void onNewCustomers(List<String> newCustomers);
}

public class SwingCustomersView implements CustomersView {
    // Swing components here all put into a main JPanel

    public void addCustomerSelectionChangeListener(ItemListener listener) {
       // Add event listener to table
    }

    public void onNewActiveCustomer(String age) {
        // Display age in label beneath table
    }

    public void onNewCustomers(List<String> newCustomers) {
        // Display customers in table
    }
}

public class CustomersPresenter {
    private final CustomersView view;
    private final CustomersModel model;

    public CustomersPresenter(CustomersView view, CustomersModel model) {
        this.view = view;
        this.model = model;
        initPresentationLogic();
        populateView();
    }

    private void initPresentationLogic() {
        view.addCustomerSelectionChangeListener(new ItemListener() {
            @Override
            public void itemStateChanged(ItemEvent e) {
                String selectedName = (String)e.getItem();
                List<Customer> customers = model.getCustomers();
                for (Customer c : customers)
                    if (c.name.equals(selectedName))
                        view.onNewActiveCustomer(c.age);
            }
        });
    }

    private void populateView() {
        List<Customer> customers = model.getCustomers();
        List<String> names = new ArrayList<String>();
        for (Customer c : customers)
            names.add(c.name);

        // View will now populate its table, which in turn will call customerSelectionChangeListener
        // so the view 'automagically' updates the selected contact age too
        view.onNewCustomers(names);
    }
}

推荐答案

选项（3）一路走来。这是演示者控制视图的工作，包括使其可见。是的，您需要添加到视图的界面以允许这种情况发生，但这不是什么大问题。请记住，您可以使视图尽可能地被动。没有任何逻辑！

Option (3) all the way. It is the presenter's jobs for "controlling" the view, which includes making it visible. Yes, you'll need to add to the view's interface to allow this to happen, but that's not a big deal. Remember, you can make the view is as passive as possible. No logic whatsoever!

工作示例：

我偶然发现这个示例使用MVC架构的简单Swing游戏。由于我使用MVP而不是MVC编写我的Swing应用程序，所以我不能说具有权威性，如果这个例子是一个真实而纯粹的MVC例子。对我来说看起来没问题，而作者 trashgod 在Swing上已经证明了自己在这方面的作用，所以我会接受这是合理的。

I stumbled upon this example of a simple Swing game using an MVC architecture. Since I write my Swing apps using MVP instead of MVC, I can't say with authority if this example is a true and pure example of MVC. It looks okay to me, and the author trashgod has more than proven himself here on SO using Swing, so I'll accept it as reasonable.

作为练习，我决定使用MVP架构重写它。

As an exercise, I decided to rewrite it using an MVP architecture.

驱动程序：

正如您在下面的代码中看到的，这非常简单。应该突破你的是关注点的分离（通过检查构造函数）：

As you can see in the code below, this is pretty simple. What should jump out at you are the separation of concerns (by inspecting the constructors):

• 模型 class是独立的，不了解Views或Presenters。

• The Model class is standalone and has no knowledge of Views or Presenters.

查看界面由独立的GUI类实现，它们都不具备模型或演示者的知识。

The View interface is implemented by a standalone GUI class, neither of which have any knowledge of Models or Presenters.

Presenter 类了解模型和视图。

The Presenter class knows about both Models and Views.

代码：

import java.awt.*;

/**
 * MVP version of https://stackoverflow.com/q/3066590/230513
 */
public class MVPGame implements Runnable
{
  public static void main(String[] args)
  {
    EventQueue.invokeLater(new MVPGame());
  }

  @Override
  public void run()
  {
    Model model = new Model();
    View view = new Gui();
    Presenter presenter = new Presenter(model, view);
    presenter.start();
  }
}

以及我们将用于制作的GamePiece游戏：

and the GamePiece that we'll be using for the game:

import java.awt.*;

public enum GamePiece
{
  Red(Color.red), Green(Color.green), Blue(Color.blue);
  public Color color;

  private GamePiece(Color color)
  {
    this.color = color;
  }
}

---

模型：主要是，模型的工作是：

---

The Model: Primarily, the job of the Model is to:

• 为UI提供数据（根据要求） ）


• 数据验证（根据要求）


• 长期存储数据（根据要求）

代码：

import java.util.*;

public class Model
{
  private static final Random rnd = new Random();
  private static final GamePiece[] pieces = GamePiece.values();

  private GamePiece selection;

  public Model()
  {
    reset();
  }

  public void reset()
  {
    selection = pieces[randomInt(0, pieces.length)];
  }

  public boolean check(GamePiece guess)
  {
    return selection.equals(guess);
  }

  public List<GamePiece> getAllPieces()
  {
    return Arrays.asList(GamePiece.values());
  }

  private static int randomInt(int min, int max)
  {
    return rnd.nextInt((max - min) + 1) + min;
  }
}

---

观点：这里的想法是尽可能地剥离尽可能多的应用程序逻辑（目标是没有），使其尽可能愚蠢。优点：

---

The View: The idea here is to make it as "dumb" as possible by stripping out as much application logic as you can (the goal is to have none). Advantages:

• 该应用程序现在是100％ JUnit testable，因为没有应用程序逻辑混合使用Swing代码


• 您可以在不启动整个应用程序的情况下启动GUI，这样可以更快地进行原型设计

• The app now be 100% JUnit testable since no application logic is mixed in with Swing code
• You can launch the GUI without launching the entire app, which makes prototyping much faster

代码：

import java.awt.*;
import java.awt.event.*;
import java.util.List;

public interface View
{
  public void addPieceActionListener(GamePiece piece, ActionListener listener);
  public void addResetActionListener(ActionListener listener);
  public void setGamePieces(List<GamePiece> pieces);
  public void setResult(Color color, String message);
}

和GUI：

import java.awt.*;
import java.awt.event.*;
import java.util.List;
import javax.swing.*;

/**
 * View is "dumb". It has no reference to Model or Presenter.
 * No application code - Swing code only!
 */
public class Gui implements View
{
  private JFrame frame;
  private ColorIcon icon;
  private JLabel resultLabel;
  private JButton resetButton;
  private JButton[] pieceButtons;
  private List<GamePiece> pieceChoices;

  public Gui()
  {
    frame = new JFrame();
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    icon = new ColorIcon(80, Color.WHITE);
  }

  public void setGamePieces(List<GamePiece> pieces)
  {
    this.pieceChoices = pieces;

    frame.add(getMainPanel());
    frame.pack();
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
  }

  public void setResult(Color color, String message)
  {
    icon.color = color;
    resultLabel.setText(message);
    resultLabel.repaint();
  }

  private JPanel getMainPanel()
  {
    JPanel panel = new JPanel(new BorderLayout());
    panel.add(getInstructionPanel(), BorderLayout.NORTH);
    panel.add(getGamePanel(), BorderLayout.CENTER);
    panel.add(getResetPanel(), BorderLayout.SOUTH);
    return panel;
  }

  private JPanel getInstructionPanel()
  {
    JPanel panel = new JPanel();
    panel.add(new JLabel("Guess what color!", JLabel.CENTER));
    return panel;
  }

  private JPanel getGamePanel()
  {
    resultLabel = new JLabel("No selection made", icon, JLabel.CENTER);
    resultLabel.setVerticalTextPosition(JLabel.BOTTOM);
    resultLabel.setHorizontalTextPosition(JLabel.CENTER);

    JPanel piecePanel = new JPanel();
    int pieceCount = pieceChoices.size();
    pieceButtons = new JButton[pieceCount];

    for (int i = 0; i < pieceCount; i++)
    {
      pieceButtons[i] = createPiece(pieceChoices.get(i));
      piecePanel.add(pieceButtons[i]);
    }

    JPanel panel = new JPanel(new BorderLayout());
    panel.add(resultLabel, BorderLayout.CENTER);
    panel.add(piecePanel, BorderLayout.SOUTH);

    return panel;
  }

  private JPanel getResetPanel()
  {
    resetButton = new JButton("Reset");

    JPanel panel = new JPanel();
    panel.add(resetButton);
    return panel;
  }

  private JButton createPiece(GamePiece piece)
  {
    JButton btn = new JButton();
    btn.setIcon(new ColorIcon(16, piece.color));
    btn.setActionCommand(piece.name());
    return btn;
  }

  public void addPieceActionListener(GamePiece piece, ActionListener listener)
  {
    for (JButton button : pieceButtons)
    {
      if (button.getActionCommand().equals(piece.name()))
      {
        button.addActionListener(listener);
        break;
      }
    }
  }

  public void addResetActionListener(ActionListener listener)
  {
    resetButton.addActionListener(listener);
  }

  private class ColorIcon implements Icon
  {
    private int size;
    private Color color;

    public ColorIcon(int size, Color color)
    {
      this.size = size;
      this.color = color;
    }

    @Override
    public void paintIcon(Component c, Graphics g, int x, int y)
    {
      Graphics2D g2d = (Graphics2D) g;
      g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
          RenderingHints.VALUE_ANTIALIAS_ON);
      g2d.setColor(color);
      g2d.fillOval(x, y, size, size);
    }

    @Override
    public int getIconWidth()
    {
      return size;
    }

    @Override
    public int getIconHeight()
    {
      return size;
    }
  }
}

可能不那么明显马上就是View界面可以获得的大小。对于GUI上的每个Swing组件，您可能希望：

What might not be so obvious right away is how large the View interface can get. For each Swing component on the GUI, you may want to:

• 添加/删除组件的侦听器，其中有许多类型（ActionListener，FocusListener，MouseListener等）


• 获取/设置组件上的数据


• 设置组件的可用性状态（启用，可见，可编辑，可聚焦等。）

这可能会非常笨拙。作为解决方案（在该示例中未示出），为每个字段创建密钥，并且GUI使用其密钥注册每个组件（使用HashMap）。然后，而不是视图定义方法，如：

This can get unwieldy really fast. As a solution (not shown in this example), a key is created for each field, and the GUI registers each component with it's key (a HashMap is used). Then, instead of the View defining methods such as:

public void addResetActionListener(ActionListener listener);
// and then repeat for every field that needs an ActionListener

你会有一个方法：

public void addActionListener(SomeEnum someField, ActionListener listener);

其中SomeEnum是 enum 定义给定UI上的所有字段。然后，当GUI接收到该调用时，它会查找相应的组件以调用该方法。所有这些繁重的工作都将在一个实现View的抽象超类中完成。

where "SomeEnum" is an enum that defines all fields on a given UI. Then, when the GUI receives that call, it looks up the appropriate component to call that method on. All of this heavy lifting would get done in an abstract super class that implements View.

演示者：责任是：

• 使用初始值初始化视图


• 回复所有人通过附加适当的侦听器在View上进行用户交互


• 在必要时更新视图的状态


• 从视图中获取所有数据并传递给模型保存（如有必要）

• Initialize the View with it's starting values
• Respond to all user interactions on the View by attaching the appropriate listeners
• Update the state of the View whenever necessary
• Fetch all data from the View and pass to Model for saving (if necessary)

代码（注意这里没有Swing）：

Code (note that there's no Swing in here):

import java.awt.*;
import java.awt.event.*;

public class Presenter
{
  private Model model;
  private View view;

  public Presenter()
  {
    System.out.println("ctor");
  }

  public Presenter(Model model, View view)
  {
    this.model = model;
    this.view = view;
  }

  public void start()
  {
    view.setGamePieces(model.getAllPieces());
    reset();

    view.addResetActionListener(new ActionListener()
    {
      public void actionPerformed(ActionEvent e)
      {
        reset();
      }
    });

    for (int i = 0; i < GamePiece.values().length; i++)
    {
      final GamePiece aPiece = GamePiece.values()[i];
      view.addPieceActionListener(aPiece, new ActionListener()
      {
        public void actionPerformed(ActionEvent e)
        {
          pieceSelected(aPiece);
        }
      });
    }
  }

  private void reset()
  {
    model.reset();
    view.setResult(Color.GRAY, "Click a button.");
  }

  private void pieceSelected(GamePiece piece)
  {
    boolean valid = model.check(piece);
    view.setResult(piece.color, valid ? "Win!" : "Keep trying.");
  }
}

---

请记住，MVP体系结构的每个部分都可以/将委派给其他类（隐藏到其他2个部分）以执行其许多任务。 Model，View和Presenter类只是代码库层次结构中的上级。

---

Keep in mind that each portion of the MVP architecture can/will be delegating to other classes (that are hidden to the other 2 portions) to perform many of its tasks. The Model, View, and Presenter classes are just the upper divisions in your code base heirarchy.

这篇关于Model-View-Presenter被动视图：bootstraping - 谁最初显示视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！