GXTの旅:第8章:Portal&Drag-Drop-プロジェクトDrag-drop再構築(3)

5846 ワード

Overview
実はPortletにとって、彼はsummaryの表示効果として適しています.前の章では、FeedOverview Viewを使用してfeedのsummary情報を表示しました.次に、FeedOverview Viewを含むOverviewPortletを新規作成します.
  • 新規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";
  • FeedOverview Viewを以下のように修正
  • 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();
    	}
    }