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