GXT之旅:第八章:Portal&Drag-Drop——项目使用Portal重构(1)

抓狂

目前,我们的RSSReader项目里,使用的是ContentPanel容器和BorderLayout布局效果。接下来,我们要做稍微的调整,将ContentPanel替换为Portlet,

然后使用Portal去管理他们。

Portlet是一个非常理想的components,用来构成独立的,不受他人影响的用户接口。不仅仅可以统一的被Portal管理,我们还可以使用MVC,让Portal响应每一个Portlet的新建过程,并保证其独立性。

  • 我们首先要做的是新增一个EventType(NewPortletCreated)到AppEvents类里。我们会用它来触发新建Portlet过程。

public static final EventType NewPortletCreated = new EventType();

  • 新建类:PortalController 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 PortalController extends Controller {

	public PortalController() {

	}

	@Override
	public void handleEvent(AppEvent event) {

	}

}

  • 新建类:PortalView extends View

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

import com.danielvaughan.rssreader.client.mvc.controllers.PortalController;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.View;

public class PortalView extends View {

	public PortalView(PortalController controller) {
		super(controller);
	}

	@Override
	protected void handleEvent(AppEvent event) {
		
	}

}

  • 回到PortalController类,加入PortalView属性到此类里。并且Override initialize()方法

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

import com.danielvaughan.rssreader.client.mvc.views.PortalView;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;

public class PortalController extends Controller {

	private PortalView portalView;

	@Override
	public void initialize() {
		super.initialize();
		portalView = new PortalView(this);
	}

	public PortalController() {

	}

	@Override
	public void handleEvent(AppEvent event) {

	}

}

  • 构造函数里,注册EventType——NewPortletCreated,Error

	public PortalController() {
		registerEventTypes(AppEvents.NewPortletCreated);
		registerEventTypes(AppEvents.Error);
	}

  • 下面处理handleEvent方法——有错误事件的时候,记录日志;其他情况,将事件转发到portalView

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

import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.danielvaughan.rssreader.client.mvc.views.PortalView;
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.google.gwt.core.client.GWT;

public class PortalController extends Controller {

	private PortalView portalView;

	@Override
	public void initialize() {
		super.initialize();
		portalView = new PortalView(this);
	}

	public PortalController() {
		registerEventTypes(AppEvents.NewPortletCreated);
		registerEventTypes(AppEvents.Error);
	}

	@Override
	public void handleEvent(AppEvent event) {
		EventType eventType = event.getType();
		if (eventType.equals(AppEvents.Error)) {
			GWT.log("Error", (Throwable) event.getData());
		} else {
			forwardToView(portalView, event);
		}
	}

}

  • 接下来回到PortalView类里,新建一个属性——portal,并且是一个具有两列的portal

private final Portal portal = new Portal(2);

  • Override initialize()方法:设置两列的各自宽度;并且新建一个Viewport,在Viewport里加入portal

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

import com.danielvaughan.rssreader.client.mvc.controllers.PortalController;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.View;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.custom.Portal;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.ui.RootPanel;

public class PortalView extends View {
	private final Portal portal = new Portal(2);

	public PortalView(PortalController controller) {
		super(controller);
	}

	@Override
	protected void handleEvent(AppEvent event) {

	}

	@Override
	protected void initialize() {
		portal.setColumnWidth(0, 0.3);
		portal.setColumnWidth(1, 0.7);
		final Viewport viewport = new Viewport();
		viewport.setLayout(new FitLayout());
		viewport.add(portal);
		RootPanel.get().add(viewport);
	}
}

  • 当然handleEvent()方法要处理传入的NewPortletCreated事件。但是就现在而言,我们先不做处理。

	@Override
	protected void handleEvent(AppEvent event) {
		EventType eventType = event.getType();
		if (eventType.equals(AppEvents.NewPortletCreated)) {
		}
	}

  • 最后,来到RSSReader类的onModuleLoad方法——去掉之前所有的代码,修改后的内码如下:

package com.danielvaughan.rssreader.client;

import com.danielvaughan.rssreader.client.mvc.controllers.AppController;
import com.danielvaughan.rssreader.client.mvc.controllers.FeedController;
import com.danielvaughan.rssreader.client.mvc.controllers.ItemController;
import com.danielvaughan.rssreader.client.mvc.controllers.NavController;
import com.danielvaughan.rssreader.client.mvc.controllers.PortalController;
import com.danielvaughan.rssreader.client.mvc.controllers.StatusController;
import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.danielvaughan.rssreader.client.services.FeedService;
import com.danielvaughan.rssreader.client.services.FeedServiceAsync;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class RSSReader implements EntryPoint {

	/**
	 * This is the entry point method.
	 */
	@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.addController(new FeedController());
		// dispatcher.addController(new ItemController());
		//
		// dispatcher.addController(new StatusController());
		//
		// dispatcher.dispatch(AppEvents.Init);
		// dispatcher.dispatch(AppEvents.UIReady);

		final FeedServiceAsync feedService = GWT.create(FeedService.class);
		Registry.register(RSSReaderConstants.FEED_SERVICE, feedService);
		Dispatcher dispatcher = Dispatcher.get();
		dispatcher.addController(new PortalController());
	}
}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值