GXT之旅：第七章：MVC——MVC重构项目(2)

最新推荐文章于 2019-09-23 10:43:16 发布
最新推荐文章于 2019-09-23 10:43:16 发布
阅读量2k 收藏 1
点赞数 2
分类专栏： GWT/GXT GXT之旅 文章标签： mvc class components html service ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miqi770/article/details/7349228
版权

使用MVC重构RSSReader项目——Navigation区域

上一节，在程序的入口文件（RSSReader），我们派发了EventType为Init的AppEvent，AppController会处理此事件，将其转发到AppView。依次的，AppView会的处理该事件，去调用onInit方法，完成基础的UI创建。在此过程中负责了程序主体的区域创建。但是，唯一没有处理的，就是没有把组装好的components添加到UI。

那么现在，我们需要再分别创建几组Controller和View，分别去负责RSSReader项目其他的各个区域。首先我们要创建一对Controller-View，去处理Navigation区域。

大致思路如下：

  • 负责navigation区域的controller，能够将Init EventType转发到对应的View里
  • 负责navigation区域的view，会处理Init EventType，在处理的过程中，又会派发一个新的事件（NavPanelReady）——此事件会承载着NavPanel的实例被派发到Dispatcher中。
  • AppController会监听此事件（NavPanelReady），当接收到此事件传入的时候，会将其转发到AppView。
  • AppView会处理会理NavPanelReady的事件——将其传递的NavPanel实例，加入到ViewPort上

此前，onModuleLoad方法里已经派发了UIReady事件。因此，NavPanel应该已经被添加到Viewport里，显示出来。具体实现步骤如下：

  • 在com.danielvaughan.rssreader.client.mvc.events.AppEvents类，加入新的EventType——NavPanelReady

public static final EventType NavPanelReady = new EventType();

  • 新建NavController extends Controller

package com.danielvaughan.rssreader.client.mvc.controllers;

import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;

public class NavController extends Controller {

	@Override
	public void handleEvent(AppEvent event) {
		
		
	}

}


  • 新建NavView extends View

package com.danielvaughan.rssreader.client.mvc.views;

import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;
import com.extjs.gxt.ui.client.mvc.View;

public class NavView extends View {

	public NavView(Controller controller) {
		super(controller);
	}

	@Override
	protected void handleEvent(AppEvent event) {

	}

}

  • 在NavController的构造函数里，注册Init EventType

public NavController() {
registerEventTypes(AppEvents.Init);
}

  • 在NavController，定义NavView类实例，通过其initialize方法实例化NavView——让controller与view关联起来。实现handleEvent方法，将NavController接收的事件转发到NavView里。

package com.danielvaughan.rssreader.client.mvc.controllers;

import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.danielvaughan.rssreader.client.mvc.views.NavView;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;

public class NavController extends Controller {

	private NavView navView;

	public NavController() {
		registerEventTypes(AppEvents.Init);
	}

	@Override
	public void handleEvent(AppEvent event) {
                forwardToView(navView, event);
	}

	@Override
	public void initialize() {
		super.initialize();
		navView = new NavView(this);
	}

}

  • 将com.danielvaughan.rssreader.client.components.RssNavigationPanel类，重命名为NavPanel。然后在NavView类里，加入NavPanel的实例属性

package com.danielvaughan.rssreader.client.mvc.views;

import com.danielvaughan.rssreader.client.components.NavPanel;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;
import com.extjs.gxt.ui.client.mvc.View;

public class NavView extends View {

	private final NavPanel navPanel = new NavPanel();

	public NavView(Controller controller) {
		super(controller);
	}

	@Override
	protected void handleEvent(AppEvent event) {

	}

}

  • 在NavView类里实现handleEvent方法——当Init EventType接收到之后，再派发一个新事件（此过程我习惯称之事件联动）：NavPanelReady ，并且派发的同时，承载navPanel对象

package com.danielvaughan.rssreader.client.mvc.views;

import com.danielvaughan.rssreader.client.components.NavPanel;
import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.extjs.gxt.ui.client.event.EventType;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;
import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.extjs.gxt.ui.client.mvc.View;

public class NavView extends View {

	private final NavPanel navPanel = new NavPanel();

	public NavView(Controller controller) {
		super(controller);
	}

	@Override
	protected void handleEvent(AppEvent event) {
		EventType eventType = event.getType();

		if (eventType.equals(AppEvents.Init)) {
			Dispatcher.forwardEvent(new AppEvent(AppEvents.NavPanelReady,
					navPanel));
		}
	}

}

  • 既然NavView会派发NavPanelReady事件，我们希望交给AppController注册，也就意味着，AppView会接收到此事件，做后续的操作。

	public AppController() {
		registerEventTypes(AppEvents.Init);
		registerEventTypes(AppEvents.Error);
		registerEventTypes(AppEvents.UIReady);
		registerEventTypes(AppEvents.NavPanelReady);
	}

  • 在AppView对NavPanelReady事件的处理实现如下——将NavPanelReady事件传递的navPanel对象，对后续处理，将其添加到viewport上

package com.danielvaughan.rssreader.client.mvc.views;

import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.event.EventType;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;
import com.extjs.gxt.ui.client.mvc.View;
import com.extjs.gxt.ui.client.widget.Component;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

public class AppView extends View {
	private final ContentPanel mainPanel = new ContentPanel();
	private final Viewport viewport = new Viewport();

	public AppView(Controller controller) {
		super(controller);

	}

	@Override
	protected void handleEvent(AppEvent event) {
		EventType eventType = event.getType();
		if (eventType.equals(AppEvents.Init)) {
			onInit(event);
		} else if (eventType.equals(AppEvents.Error)) {
			onError(event);
		} else if (eventType.equals(AppEvents.UIReady)) {
			onUIReady(event);
		}else if (eventType.equals(AppEvents.NavPanelReady)) {
			onNavPanelReady(event);
		}
	}

	private void onInit(AppEvent event) {
		final BorderLayout borderLayout = new BorderLayout();
		viewport.setLayout(borderLayout);
		HTML headerHtml = new HTML();
		headerHtml.setHTML("<h1>RSS Reader</h1>");
		BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
				20);
		northData.setCollapsible(false);
		northData.setSplit(false);
		viewport.add(headerHtml, northData);
		BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
		centerData.setCollapsible(false);
		RowLayout rowLayout = new RowLayout(Orientation.VERTICAL);
		mainPanel.setHeaderVisible(false);
		mainPanel.setLayout(rowLayout);
		viewport.add(mainPanel, centerData);
	}

	private void onUIReady(AppEvent event) {
		RootPanel.get().add(viewport);
	}

	private void onNavPanelReady(AppEvent event) {
		BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST,
				200, 150, 300);
		westData.setCollapsible(true);
		westData.setSplit(true);
		Component component = event.getData();
		viewport.add(component, westData);
	}

	private void onError(AppEvent event) {
	}
}

  • 所有的准备工作做好了，那么一切事件的触发点，我们要回到RSSReader的onModuleLoad方法里。加入NavController

    @Override
    public void onModuleLoad() {
        final FeedServiceAsync feedService = GWT.create(FeedService.class);
        Registry.register(RSSReaderConstants.FEED_SERVICE, feedService);
        Dispatcher dispatcher = Dispatcher.get();

        dispatcher.addController(new AppController());
        dispatcher.addController(new NavController());

        // 注意：dispatcher.dispatch(AppEvents.Init);会派发Init事件，虽然只是执行了一次派发操作，但是会派发到多个controller中去！
        // 原因：因为AppController和NavController都注册了Init ！
        // 顺序：两个controller的接收到event的顺序是根据上面的两行代码（controller的加入顺序）有关！
        dispatcher.dispatch(AppEvents.Init);
        dispatcher.dispatch(AppEvents.UIReady);
    }

  • 程序运行效果如下：

茜茜770
关注
专栏目录
GXT之旅项目源码包
10-30
由于GWT和GXT的jar包太大了，所以就删除了。相信大家会自动添加进来，让项目跑起来的。不会的，看http://blog.csdn.net/miqi770/article/details/7164391
GXT之旅：第三章：表单和窗口(1)——POJO在client和server之间的共享
miqi770的专栏
01-10 4164
第三章：表单和窗口 本章我们要学习GXT的表单功能。了解相关的表单components和如何使用他们。也会涉及到GXT Registry，来学习如何跨越各个components来传递对象的。 本章，我们会涉及到如下GXt功能集 The full range of fields available in GXTFormPanelFormLayoutWindowFitLayoutFi
GXT之旅：第二章：GXT组件(1)——组件层次结构
miqi770的专栏
12-30 6409
第二章：GXT组件 现在我们已经有了开发环境，在本章中，我要详细介绍ExtGWT组件用法，并且通过开发一个demo程序来展示一系列的GXT组件。一开始会介绍一些关键的概念，然后就会着眼于demo项目的实战开发。 本章，我们会涉及到如下GXt功能集： ComponentContainerBoxComponentScrollContainerLayoutContainerFlowLayout
GXT之旅：第六章：Templates(1)——Template(2)
miqi770的专栏
02-09 2510
Template 通过使用Template类，可以定义一组html的字符串去渲染ModelData或者Params。其生成的html 字符串里面可以设置占位符，要来作为变量可以设置参数。 一个占位符参数的定义，需要通过{}给包裹起来。一个使用firstName和lastName定义的Template如下： Template template = new Template("My full
GXT之旅：第一章：初识ExtGWT(1)——简介
miqi770的专栏
12-30 1万+
第一章：初识ExtGWT 在本章中，我要介绍一下什么是ExtGWT， 并且解释说明她是如何和GWT（google）协同工作的。然后会告诉大家如何搭建第一个Ext GWT项目。 概要： 在Eclipse上搭建Ext GWT环境创建一个GWT项目在GWT项目里使用Ext GWT用Ext GWT的组件改写GWT实例程序 到底GWT还缺少啥？ 做为java程序员，去开发富客户端的web程序是
GXT MVC design
03-31
标题 "GXT MVC设计" 指向的是一个关于使用GXT（Google Web Toolkit Extensions）进行Model-View-Controller（MVC）架构设计的主题。GXT是Google Web Toolkit（GWT）的一个扩展库，提供了丰富的用户界面组件和高级UI...
基于GXT的RPC与MVC实现登录和退出功能
04-03
GXT提供了丰富的UI组件和强大的数据绑定机制，而RPC（Remote Procedure Call）和MVC（Model-View-Controller）模式是GXT中常用的设计模式和技术，用于处理客户端与服务器之间的通信以及应用的结构组织。本文将深入...
gwt-boot-starter-mvp4g2:Mvp4g2项目生成器
05-16
MVP4G2项目生成器动机设置Mvp4g2项目可能很困难，尤其是在您不熟悉MVP4G2的情况下。 在可以运行该项目并检查是否正在运行之前，有很多事情要做。 为了改善使用MVP4G2设置GWT项目的过程，我们创建了。 配置并生成项目...
GXT之旅：项目源码下载
miqi770的专栏
10-31 1902
项目源码下载 好久不研究GXT了。。。有很多人私信问我要源码，今天才贴上来，不好意思哦：eclipse导入，配置build path，就可以让项目跑起来了（由于GWT和GXT的jar包太大了，所以就删除了。相信大家会自动添加进来） http://download.csdn.net/detail/miqi770/8100911
android代码重构日记（二）——MVC框架
热门推荐
Mr.An 的专栏
04-11 1万+
1、什么是mvc框架 MVC是当前比较流行的框架，随便Google下，就可以发现几乎所有的应用程序开发中都采用了MVC框架，例如：.NET，Java Spring，Java Struts，PHP 。那么MVC到底是什么，为什么被广泛使用？ 简要说明下，什么是MVC。MVC (Model-View-Controller)：M是指逻辑模型，V是指视图模型，C则是控制器。一个逻辑模型可以对于多种视图
使用Spring MVC重构项目
勇敢的兵
09-23 836
文章目录Spring MVC介绍项目结构依赖配置web.xml配置springmvc.xml配置html完整代码js完整代码自定义响应结构定义学生模板学生列表接口学生详情接口学生信息保存接口学生删除接口文件上传接口参考资料 Spring MVC介绍 Spring MVC框架是一个开源的Java平台，为开发强大的基于Java的Web应用程序提供全面的基础架构支持非常容易和非常快速。 Spring w...
从MVC到MVP,记一次代码重构
井方哥的博客
06-17 2013
前言手底下一直在做一个项目，从交互看起来也没怎么复杂，但由于历史原因，底下有二十多个依赖工程，到目前我也没有把依赖工程具体的东西搞明白。在代码里边偶尔能看到13年的记录，也经过了无数人的手。代码的逻辑结构非常混乱，也许是修修补补太多了吧。本篇不讲MVP的细节，只是简单的说说这次重构的一些体会，鄙人愚钝，不当之处，敬请赐教。
[架构]复杂App MVC重构小结
pouloghost的专栏
11-02 390
在公司做MVP重构，公司蛮大的，App也蛮复杂（显示逻辑上，业务转移上基本是用户操作驱动，而非业务逻辑驱动），所以是个大MVP，三端都非常臃肿。自然会用拆分来解决问题，同时参照了谷歌官方的架构模型。ModelModel是数据层，该层是面向业务数据进行拆分的。安照SOLID思路，将Model拆成两层： 业务Model，这些Model承载着部分数据，以及面向这些数据的原子逻辑。但是，当涉及到持久化（服务
GXT之旅：第一章：初识ExtGWT(5)——用GXT组件替换GWT组件
miqi770的专栏
12-30 8932
旧貌换新颜 现在，我们FirstApp项目已经引入了GXT库，但是我们还没有具体使用他们。现在我们从FirstApp.java拷贝出一份文件，重命名为FirstGxtApp.java。在整个文件里，我们将使用GXT的控件去替换GWT的控件。通过之间的比较，我们会发现他们之间很相似，但是也有不同，下面跟我小妹的脚步吧： 找到FirstApp.java，拷贝出一份文件，重命名为FirstGxt
GXT之旅：第二章：GXT组件(4)——容器的布局
miqi770的专栏
01-04 8571
Viewport Viewport的父类是LayoutContainer，它会自动的填充整个浏览器的窗口，并且会监听窗口的大小变化，随之变化。于此同时，也会负责处理其里面的子components在新改变窗口后的大小。对于去展现一个类似于桌面应用程序来说，Viewport是一个非常有用的component。 我们会使用Viewport，作为整个项目的基础面板。因此，它会被直接的添加到GWT的ro
GXT之旅：第一章：初识ExtGWT(4)——用Eclipse创建空GXT项目
miqi770的专栏
12-30 7455
在GWT项目开始真正的GXT的之旅 之前我们都是开始搭建一个GWT项目，如何编译，运行她，在jetty和tomcat上。以及一些需要注意的问题。现在我们需要把这个项目用GXT做一下修改。 步骤如下： 导入GXT类库： 找到FirstApp项目，右键，进入Java Build Path，引入GXT-2.2.5类库。 并且把gxt-.2.25-gwt22.jar拷贝到FirstApp\W
GXT之旅：第一章：初识ExtGWT(2)——搭建环境
miqi770的专栏
12-30 7165
GXT准备工作 下载好GXTSDK包之后，我们解压缩后，开始配置Eclipse： 打开Eclipse，点击Window |Preferences在左边的列表中，点击Java |Build Path | User Libraries新建一个User Libraries，命名为GXT_2_2_5加入GXT的jar包，选择适合自己当前GWT版本的jar包 创建第一个GWT项目
GXT之旅：第二章：GXT组件(3)——事件和监听
miqi770的专栏
01-03 6870
GXT基础3：Events Events 概念是指：当有事件发生时，通知应用程序作出响应的这一过程。点击button或者控件的状态改变，都可以当作一个事件，然后通过应用程序，使用户和程序之间产生某种互动的效果。用户在控件上的每一个行为，每一个操作，都会导致某些事件的触发，如果这个控件自身监听到了某些事件的发生，那么就会跳转到对应的处理流程中，以此作为事件的响应。 从专业的角度来说，就像总所周知
GXT技术详解：GWT对比与GXT实现原理
"GXT技术路线实现思路、原理讲解、代码结构介绍" 本文将深入探讨GXT技术，这是一种基于Google Web Toolkit (GWT) 的扩展库，用于在Web应用程序中创建丰富的用户界面。GXT源自GWTEXT，是ExtJS的一个GWT版本，旨在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值