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