GWT MVP

2025年3月17日 | 阅读 3 分钟

MVP (Model View Presenter) 是一种设计模式，允许在 gwt 中开发应用程序时遵循 MVP 架构。 MVP 为开发应用程序的复杂性问题提供了解决方案。应用程序开发很复杂，因为许多开发人员在同一代码上工作，因此都遵循相同的设计模式。

以下是每个组件的描述

模型: 在此部分中，模型仅包含数据。它包含业务对象，该对象将根据应用程序需要进行操作和计算。
视图: 它仅包含视图，即显示演示者给出的数据。它提供了视图代码的可重用性，因为我们可以非常轻松地交换新视图。它仅处理 HTML 和 CSS，这也使可以进行单独的测试。
演示者: 它包含所有需要在应用程序开发中实现的逻辑。它与模型以及视图进行通信。它在操作中是完全不同的，这提供了单独的 JUnit 测试。

实施

以下是在 MVP 基础上设计的登录应用程序的代码。

LoginView.java

public class LoginView implements HasWidgets{
 HorizontalPanel container;
 Label loginLabel;
 Label passwordLabel;
 TextBox loginField;
 PasswordTextBox passwordField;
 Button loginButton;
 
  
 public LoginView(){
  container = new HorizontalPanel();
  loginField = new TextBox();
  loginButton = new Button("Login");
  passwordField = new PasswordTextBox();
  loginLabel = new Label("Login");
  passwordLabel = new Label("Password");
   
  container.add(loginLabel);
  container.add(loginField);
  container.add(passwordLabel);
  container.add(passwordField);
  container.add(loginButton);
 }
 
 @Override
 public Widget asWidget() {
  return container;
 }
 
 @Override
 public void add(Widget w) {
  container.add(w);
 }
 
 @Override
 public void clear() {
  container.clear();
 }
 
 @Override
 public Iterator<widget> iterator() {
  return container.iterator();
 }
 
 @Override
 public boolean remove(Widget w) {
  return container.remove(w);
 }
 
 
}

MainPageView.java

public class MainPageView implements HasWidgets {
 
 VerticalPanel container;
 HorizontalPanel leftPanel;
 HorizontalPanel rightPanel;
 Button logout;
 
 @Override
 public HasClickHandlers getLogoutButton() {
  return logout;
 }
  
 public MainPageView(){
  leftPanel = new HorizontalPanel();
  rightPanel = new HorizontalPanel();
  container = new VerticalPanel();
  logout = new Button("Logout");
  container.add(logout);
  container.add(leftPanel);
  container.add(rightPanel);
 }
 
 @Override
 public Widget asWidget() {
  return container;
 }
  
 
 @Override
 public void add(Widget w) {
  container.add(w);
 }
 
 @Override
 public void clear() {
  container.clear();
 }
 
 @Override
 public Iterator<widget> iterator() {
  return container.iterator();
 }
 
 @Override
 public boolean remove(Widget w) {
  return container.remove(w);
 }
 
 @Override
 public Button getButton() {
  return logout;
 }
}

现在，我们构建 UI 组件，该组件遵循演示者，该演示者控制视图的行为和交互。

LoginPresenter.java

public class MainPagePresenter {
 public interface Display{
  HasClickHandlers getLogoutButton(); 
  Widget asWidget();
  MainPageView getViewInstance();
  Button getButton();
 }
  
 final Display display;
 final HandlerManager eventBus;
  
 public MainPagePresenter(Display display, HandlerManager eventBus){
  this.display = display;
  this.eventBus = eventBus;
 }
  
 public void init(){
  display.getLogoutButton().addClickHandler(new ClickHandler(){
   @Override
   public void onClick(ClickEvent event) {
    // use the event bus to trigger the event
    eventBus.fireEvent(new LogoutEvent());
   }
  });
 }
  
 public void go(final HasWidgets container){
  init();
  container.clear();
  container.add(display.asWidget());
   
 }
  
  
 public Display getView(){
   
  return display;
 }
  
}

现在，我们设计视图和演示者之间称为显示的接口通信。

对于登录视图

public class LoginView implements HasWidgets, LoginPresenter.Display {
    //...other methods
 @Override
 public HasClickHandlers getLoginButton() {
                //return button to implement its events in the Presenter
  return loginButton;
 }
 
         @Override
 public LoginView getViewInstance() {
  return this;
 }
 
         @Override
 public Widget asWidget() {
  return container;
 }
 
}

对于主页视图

public class MainPageView implements HasWidgets, MainPagePresenter.Display {
        //...other methods
 @Override
 public  MainPageView getViewInstance(){
   
  if(instance == null)
   return new MainPageView();
  else
   return instance;
 }
 
   @Override
 public HasClickHandlers getLogoutButton() {
  return logout;
 }
 
}

最后，我们实现应用程序控制器

public class AppController {
 HandlerManager eventBus;
 LoginPresenter loginPage;
 HasWidgets container;
  
 public AppController(HandlerManager manager){
  this.eventBus = manager;
  loginPage = new LoginPresenter(new LoginView(), eventBus);
  bindEvents();
 }
 public void bindEvents(){
  eventBus.addHandler(LoginEvent.TYPE, new LoginEventHandler(){
   @Override
   public void onLogin(LoginEvent event) {
    // TODO Auto-generated method stub
    //if login successful 
    MainPagePresenter mainpage = new MainPagePresenter(new MainPageView(), eventBus);
    container = mainpage.getView().getViewInstance();
    mainpage.go(RootPanel.get());
   }
  });
   
  eventBus.addHandler(LogoutEvent.TYPE, new LogoutEventHandler(){
   @Override
   public void onLogout(LogoutEvent event) {
    loginPage.go(RootPanel.get());
   }
  });
 }
 public void goTo(HasWidgets page){
  this.container = page;
  loginPage.go(page);
 }
 
}

现在，应用程序结构如下所示