实际上,Portlet components并不是那么复杂,大多数的工作,我们在上一节都完成了,Portlet其实只是一个包装。
- 新建包:com.danielvaughan.rssreader.client.portlets。在此包下,新建类NavPortlet extends Portlet(负责左侧导航区域)
package com.danielvaughan.rssreader.client.portlets;
import com.extjs.gxt.ui.client.widget.custom.Portlet;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
public class NavPortlet extends Portlet {
public NavPortlet() {
setHeading("Navigation");
setLayout(new FitLayout());
setHeight(610);
}
}
- 在RSSReaderConstants类里,定义一个新的恒量NAV_PORTLET
public static final String NAV_PORTLET = "navPortlet";
- 恒量设置之后,在NavPortlet类构造函数里,用其来设置ID
package com.danielvaughan.rssreader.client.portlets;
import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.extjs.gxt.ui.client.widget.custom.Portlet;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
public class NavPortlet extends Portlet {
public NavPortlet() {
setHeading("Navigation");
setLayout(new FitLayout());
setHeight(610);
setId(RSSReaderConstants.NAV_PORTLET);
}
}
- 继续在此构造函数里,新建NavPanel,加入到NavPortlet里。
public NavPortlet() {
setHeading("Navigation");
setLayout(new FitLayout());
setHeight(610);
setId(RSSReaderConstants.NAV_PORTLET);
NavPanel navPanel = new NavPanel();
navPanel.setHeaderVisible(false);
add(navPanel);
}
- NavPortlet的创建过程已经完毕,接下来需要通知portal,这一过程——通过派发NewPortletCreated事件,实现通知的过程。
package com.danielvaughan.rssreader.client.portlets;
import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.danielvaughan.rssreader.client.components.NavPanel;
import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.extjs.gxt.ui.client.widget.custom.Portlet;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
public class NavPortlet extends Portlet {
public NavPortlet() {
setHeading("Navigation");
setLayout(new FitLayout());
setHeight(610);
setId(RSSReaderConstants.NAV_PORTLET);
NavPanel navPanel = new NavPanel();
navPanel.setHeaderVisible(false);
add(navPanel);
Dispatcher.forwardEvent(AppEvents.NewPortletCreated , this);
}
}
- NewPortletCreated事件派发出来之后,我们就需要在对应的View类里处理该事件——编辑PortalView类,新建onNewPortletCreated()方法,根据RSSReaderConstants.NAV_PORTLET来判断将传入的portlet加入到哪一列上。
@Override
protected void handleEvent(AppEvent event) {
EventType eventType = event.getType();
if (eventType.equals(AppEvents.NewPortletCreated)) {
onNewPortletCreated(event);
}
}
private void onNewPortletCreated(AppEvent event) {
final Portlet portlet = (Portlet) event.getData();
if (portlet.getId() == RSSReaderConstants.NAV_PORTLET) {
portal.add(portlet, 0);
} else {
portal.add(portlet, 1);
}
}
- 目前我们所要做的就是,回到RSSReader.onModuleLoad方法,新建一个NavPortlet实例。剩下的操作,就交给MVC自动处理了~~~
package com.danielvaughan.rssreader.client;
import com.danielvaughan.rssreader.client.mvc.controllers.PortalController;
import com.danielvaughan.rssreader.client.portlets.NavPortlet;
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 PortalController());
new NavPortlet();
}
}
- 最后,让我们来看看效果吧