是否有使用 GWT 在 MVP 中使用观察者模式的推荐方法? [英] Is there a recommended way to use the Observer pattern in MVP using GWT?
问题描述
我正在考虑使用 GWT 根据 MVP 模式实现用户界面，但对如何进行有疑问.
I am thinking about implementing a user interface according to the MVP pattern using GWT, but have doubts about how to proceed.
这些是我的(部分)目标:
These are (some of) my goals:
- 演示者对 UI 技术一无所知(即未使用 com.google.* 中的任何内容)
- 视图对演示者一无所知(尚不确定我是否希望它与模型无关)
- 模型对视图或演示者一无所知(......显然)
我会在视图和演示者之间放置一个接口，并使用观察者模式将两者解耦:视图生成事件并通知演示者.
I would place an interface between the view and the presenter and use the Observer pattern to decouple the two: the view generates events and the presenter gets notified.
令我困惑的是 GWT 不支持 java.util.Observer 和 java.util.Observable.这表明我正在做的不是推荐的方法，就 GWT 而言，这引出了我的问题:使用 GWT 实现 MVP 的推荐方法是什么，特别是考虑到上述目标?你会怎么做?
What confuses me is that java.util.Observer and java.util.Observable are not supported in GWT. This suggests that what I'm doing is not the recommended way to do it, as far as GWT is concerned, which leads me to my questions: what is the recommended way to implement MVP using GWT, specifically with the above goals in mind? How would you do it?
推荐答案
程序结构
我就是这样做的.Eventbus 允许演示者(扩展抽象类 Subscriber)订阅属于我应用程序中不同模块的事件.每个模块对应我系统中的一个组件，每个模块都有一个事件类型、一个展示器、一个处理程序、一个视图和一个模型.
Program Structure
This is how I did it. The Eventbus lets presenters (extending the abstract class Subscriber) subscribe to events belonging to different modules in my app. Each module corresponds to a component in my system, and each module has an event type, a presenter, a handler, a view and a model.
订阅 CONSOLE 类型的所有事件的演示者将接收从该模块触发的所有事件.对于更细粒度的方法，您总是可以让演示者订阅特定事件，例如 NewLineAddedEvent 或类似的东西，但对我来说，我发现在模块级别处理它就足够了.
A presenter subscribing to all the events of type CONSOLE will receive all the events triggered from that module. For a more fine-grained approach you can always let presenters subscribe to specific events, such as NewLineAddedEvent or something like that, but for me I found that dealing with it on a module level was good enough.
如果你愿意，你可以异步调用演示者的救援方法，但到目前为止我发现自己几乎不需要这样做.我想这取决于您的确切需求是什么.这是我的EventBus:
If you want you could make the call to the presenter's rescue methods asynchronous, but so far I've found little need to do so myself. I suppose it depends on what your exact needs are. This is my EventBus:
public class EventBus implements EventHandler
{
private final static EventBus INSTANCE = new EventBus();
private HashMap<Module, ArrayList<Subscriber>> subscribers;
private EventBus()
{
subscribers = new HashMap<Module, ArrayList<Subscriber>>();
}
public static EventBus get() { return INSTANCE; }
public void fire(ScEvent event)
{
if (subscribers.containsKey(event.getKey()))
for (Subscriber s : subscribers.get(event.getKey()))
s.rescue(event);
}
public void subscribe(Subscriber subscriber, Module[] keys)
{
for (Module m : keys)
subscribe(subscriber, m);
}
public void subscribe(Subscriber subscriber, Module key)
{
if (subscribers.containsKey(key))
subscribers.get(key).add(subscriber);
else
{
ArrayList<Subscriber> subs = new ArrayList<Subscriber>();
subs.add(subscriber);
subscribers.put(key, subs);
}
}
public void unsubscribe(Subscriber subscriber, Module key)
{
if (subscribers.containsKey(key))
subscribers.get(key).remove(subscriber);
}
}
处理程序附加到组件上，负责将本机 GWT 事件转换为专门用于我的系统的事件.下面的处理程序通过将 ClickEvents 简单地包装在自定义事件中并在 EventBus 上触发它们以供订阅者处理来处理它们.在某些情况下，处理程序在触发事件之前执行额外检查是有意义的，有时甚至在决定天气或不发送事件之前.当处理程序被添加到图形组件时，处理程序中的动作就会给出.
Handlers are attached to components, and are responsible for transforming native GWT events into events specialised for my system. The handler below deals with ClickEvents simply by wrapping them in a customised event and firing them on the EventBus for the subscribers to deal with. In some cases it makes sense for the handlers to perform extra checks before firing the event, or sometimes even before deciding weather or not to send the event. The action in the handler is given when the handler is added to the graphical component.
public class AppHandler extends ScHandler
{
public AppHandler(Action action) { super(action); }
@Override
public void onClick(ClickEvent event)
{
EventBus.get().fire(new AppEvent(action));
}
Action 是一个枚举，表示在我的系统中可能的数据操作方式.每个事件都用 Action 初始化.演示者使用该操作来确定如何更新他们的视图.带有 ADD 操作的事件可能会使演示者向菜单添加新按钮，或向网格添加新行.
Action is an enumeration expressing possible ways of data manipulation in my system. Each event is initialised with an Action. The action is used by presenters to determine how to update their view. An event with the action ADD might make a presenter add a new button to a menu, or a new row to a grid.
public enum Action
{
ADD,
REMOVE,
OPEN,
CLOSE,
SAVE,
DISPLAY,
UPDATE
}
处理程序触发的事件看起来有点像这样.请注意事件如何为其使用者定义接口，这将确保您不会忘记实现正确的救援方法.
The event that's get fired by the handler looks a bit like this. Notice how the event defines an interface for it's consumers, which will assure that you don't forget to implement the correct rescue methods.
public class AppEvent extends ScEvent {
public interface AppEventConsumer
{
void rescue(AppEvent e);
}
private static final Module KEY = Module.APP;
private Action action;
public AppEvent(Action action) { this.action = action; }
演示者订阅属于不同模块的事件，然后在它们被触发时拯救它们.我还让每个演示者为其视图定义一个接口，这意味着演示者永远不必了解有关实际图形组件的任何信息.
The presenter subscribes to events belonging to diffrent modules, and then rescues them when they're fired. I also let each presenter define an interface for it's view, which means that the presenter won't ever have to know anything about the actual graphcal components.
public class AppPresenter extends Subscriber implements AppEventConsumer,
ConsoleEventConsumer
{
public interface Display
{
public void openDrawer(String text);
public void closeDrawer();
}
private Display display;
public AppPresenter(Display display)
{
this.display = display;
EventBus.get().subscribe(this, new Module[]{Module.APP, Module.CONSOLE});
}
@Override
public void rescue(ScEvent e)
{
if (e instanceof AppEvent)
rescue((AppEvent) e);
else if (e instanceof ConsoleEvent)
rescue((ConsoleEvent) e);
}
}
每个视图都有一个 HandlerFactory 的实例，负责为每个视图创建正确类型的处理程序.每个工厂都用一个 Module 实例化，它用于创建正确类型的处理程序.
Each view is given an instance of a HandlerFactory that is responsible for creating the correct type of handler for each view. Each factory is instantiated with a Module, that it uses to create handlers of the correct type.
public ScHandler create(Action action)
{
switch (module)
{
case CONSOLE :
return new ConsoleHandler(action);
该视图现在可以自由地向其组件添加不同类型的处理程序，而无需了解确切的实现细节.在这个例子中，所有的视图需要知道的是 addButton 按钮应该链接到对应于 ADD 动作的一些行为.这种行为是什么将由捕捉事件的演示者决定.
The view is now free to add handlers of different kind to it's components without having to know about the exact implementation details. In this example, all the view needs to know is that the addButton button should be linked to some behaviour corresponding to the action ADD. What this behaviour is will be decided by the presenters that catch the event.
public class AppView implements Display
public AppView(HandlerFactory factory)
{
ToolStripButton addButton = new ToolStripButton();
addButton.addClickHandler(factory.create(Action.ADD));
/* More interfacy stuff */
}
public void openDrawer(String text) { /*Some implementation*/ }
public void closeDrawer() { /*Some implementation*/ }
示例
考虑一个简化的 Eclipse，其中左侧有一个类层次结构，右侧有一个代码文本区域，顶部有一个菜单栏.这三个将是具有三个不同演示者的三个不同视图，因此它们将组成三个不同的模块.现在，文本区域完全有可能需要根据类层次结构的变化进行更改，因此文本区域演示者不仅订阅从文本区域内触发的事件，而且订阅事件是有意义的从类层次结构中被解雇.我可以想象这样的事情(对于每个模块都会有一组类——一个处理程序、一个事件类型、一个演示者、一个模型和一个视图):
Example
Consider a simplified Eclipse where you have a class hierarchy to the left, a text area for code on the right, and a menu bar on top. These three would be three different views with three different presenters and therefore they'd make up three different modules. Now, it's entirely possible that the text area will need to change in accordance to changes in the class hierarchy, and therefore it makes sense for the text area presenter to subscribe not only to events being fired from within the text area, but also to events being fired from the class hierarchy. I can imagine something like this (for each module there will be a set of classes - one handler, one event type, one presenter, one model and one view):
public enum Module
{
MENU,
TEXT_AREA,
CLASS_HIERARCHY
}
现在考虑我们希望我们的视图在从层次结构视图中删除类文件时正确更新.这应该会导致对 gui 的以下更改:
Now consider we want our views to update properly upon deletion of a class file from the hierarchy view. This should result in the following changes to the gui:
- 应该从类层次结构中删除类文件
- 如果类文件已打开，因此在文本区域中可见，则应将其关闭.
两个演示者，一个控制树视图，另一个控制文本视图，都将订阅从 CLASS_HIERARCHY 模块触发的事件.如果事件的动作是 REMOVE，则两个预演者都可以采取适当的动作，如上所述.控制层次结构的演示者可能还会向服务器发送消息，以确保已删除的文件实际上已被删除.这种设置允许模块简单地通过侦听从事件总线触发的事件来对其他模块中的事件做出反应.几乎没有耦合，交换视图、演示者或处理程序是完全无痛的.
Two presenters, the one controlling the tree view and the one controlling the text view, would both subscribe to events fired from the CLASS_HIERARCHY module. If the action of the event is REMOVE, both preseneters could take the appropriate action, as described above. The presenter controlling the hierarchy would presumably also send a message to the server, making sure that the deleted file was actually deleted. This set-up allows modules to react to events in other modules simply by listening to events fired from the event bus. There is very little coupling going on, and swapping out views, presenters or handlers is completely painless.
这篇关于是否有使用 GWT 在 MVP 中使用观察者模式的推荐方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
