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());
	}
}