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

Overview

其实对于Portlet来说，他适合作为一个summary的显示效果。先前的章节里面，我们使用过FeedOverviewView来显示一个feed的summary信息。现在我们就要新建一个OverviewPortlet包含FeedOverviewView。

• 新建OverviewPortlet：

package com.danielvaughan.rssreader.client.portlets;

import java.util.List;

import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.danielvaughan.rssreader.client.lists.FeedOverviewView;
import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.dnd.DND;
import com.extjs.gxt.ui.client.dnd.DropTarget;
import com.extjs.gxt.ui.client.event.DNDEvent;
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 OverviewPortlet extends Portlet {
	public OverviewPortlet() {
		setHeading("Overview");
		setLayout(new FitLayout());
		setHeight(250);
		setId(RSSReaderConstants.OVERVIEW_PORTLET);
		final FeedOverviewView feedOverviewView = new FeedOverviewView();
		add(feedOverviewView);
		DropTarget target = new DropTarget(this) {
			@Override
			protected void onDragDrop(DNDEvent event) {
				super.onDragDrop(event);
				List<BeanModel> beanModels = event.getData();
				feedOverviewView.addFeeds(beanModels);
			}
		};
		target.setOperation(DND.Operation.COPY);
		target.setGroup(RSSReaderConstants.FEED_DD_GROUP);
		Dispatcher.forwardEvent(AppEvents.NewPortletCreated, this);
	}
}

• 在RSSReaderConstants类里加入OVERVIEW_PORTLET定义

public static final String OVERVIEW_PORTLET = "overviewPortlet";

• 修改FeedOverviewView，如下：

package com.danielvaughan.rssreader.client.lists;

import java.util.List;

import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.Format;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.ListView;
import com.google.gwt.user.client.Element;

public class FeedOverviewView extends LayoutContainer {

	private final ListStore<BeanModel> feedStore = new ListStore<BeanModel>();
	private ListView<BeanModel> listView = new ListView<BeanModel>();

	public void addFeeds(List<BeanModel> feeds) {
		feedStore.add(feeds);
	}

	private String getTemplate() {
		StringBuilder sb = new StringBuilder();
		sb.append("<tpl for=\".\">");
		sb.append("<div class=\"feed-box\">");
		sb.append("<h1>{title}</h1>");
		sb.append("<tpl if=\"imageUrl!=''\">");
		sb.append("<img class=\"feed-thumbnail\" src=\"{imageUrl}\"title=\"{shortTitle}\">");
		sb.append("</tpl>");
		sb.append("<p>{shortDescription}</p>");
		sb.append("<ul>");
		sb.append("<tpl for=\"items\">");
		sb.append("<tpl if=\"xindex < 3\">");
		sb.append("<li>{title}</li>");
		sb.append("</tpl>");
		sb.append("</tpl>");
		sb.append("</ul>");
		sb.append("</div>");
		sb.append("</tpl>");
		return sb.toString();
	}

	@Override
	protected void onRender(Element parent, int index) {
		super.onRender(parent, index);
		setScrollMode(Scroll.AUTOY);
		listView = new ListView<BeanModel>() {
			@Override
			protected BeanModel prepareData(BeanModel feed) {
				feed.set("shortTitle",
						Format.ellipse((String) feed.get("title"), 50));
				feed.set("shortDescription",
						Format.ellipse((String) feed.get("description"), 100));
				return feed;
			}
		};
		listView.setStore(feedStore);
		listView.setTemplate(getTemplate());
		listView.setItemSelector("div.feed-box");
		listView.getSelectionModel().addListener(Events.SelectionChange,
				new Listener<SelectionChangedEvent<BeanModel>>() {

					@Override
					public void handleEvent(SelectionChangedEvent<BeanModel> be) {
						BeanModel feed = be.getSelection().get(0);
						Info.display("Feed selected",
								(String) feed.get("title"));
					}
				});
		add(listView);
	}
}

• 修改RSSReader

package com.danielvaughan.rssreader.client;

import com.danielvaughan.rssreader.client.mvc.controllers.PortalController;
import com.danielvaughan.rssreader.client.portlets.FeedPortlet;
import com.danielvaughan.rssreader.client.portlets.ItemPortlet;
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();
		new OverviewPortlet();
		new FeedPortlet();
		new ItemPortlet();
	}
}