GXT之旅：第七章：MVC——Navigation，Main和Item区域交互(1)

（刚干了一个多月的flex项目，一时半会还无法转过神来专注于GXT的东东，有好多东西自己都忘的差不多了。。。。

我得好好屡屡

）

使用TabPanel显示feeds

之前，我们已经通过RssMainPanel里的 ItemGrid来显示一个feed数据。现在，我们将要使用TabPanel去管理多个TabItem——其中每一个TabItem包含一个 ItemGrid，一个ItemGrid负责显示一个feed数据的多个Items内容。

• 编辑com.danielvaughan.rssreader.client.components.FeedPanel，新建field——TabPanel

private final TabPanel tabPanel = new TabPanel();

• 新建一个方法——addTab，传入TabItem参数。设置一些属性，如下：

public void addTab(TabItem tabItem) {
    tabItem.setLayout(new FitLayout());
    tabItem.setIcon(Resources.ICONS.rss());
    tabItem.setScrollMode(Scroll.AUTO);
  }

• 因为我们只是想让一个TabItem负责显示一个feed数据内容，所以当一个TabItem已经拥有feed数据显示到TabPanel的时候，就直接跳转到此TabItem，否则就创建一个新的TabItem

public void addTab(TabItem tabItem) {
    tabItem.setLayout(new FitLayout());
    tabItem.setIcon(Resources.ICONS.rss());
    tabItem.setScrollMode(Scroll.AUTO);

    String tabId = tabItem.getId();
    TabItem existingTab = tabPanel.findItem(tabId, false);
    if (existingTab == null) {
      tabPanel.add(tabItem);
      tabPanel.setSelection(tabItem);
    } else {
      tabPanel.setSelection(existingTab);
    }
  }

• 重构FeedPanel构造函数：

public FeedPanel() {
    setHeading("Main");
    setLayout(new FitLayout());
    add(tabPanel);
  }

连接起来

我们现在几乎已经准备好了所有的UI，现在我们需要将它们连接起来——当用户在Main(FeedPanel)区域选择了某条feed，则在Item(ItemPanel)区域显示出具体的内容。

我们可以根据用户的选择事件操作，将其选择的ModelDate在不同的components之间传递。同样的，也可以通过数据的加载事件，将ModelData在不同的components之间传递。

大致思路如下：

• 当用户在FeedList选中了一个Feed（link）的时候，一个FeedSelected AppEvent就会搭载其Feed被派发出去。
• 当FeedSelected AppEvent被派发出来之后，FeedView接收到此事件，然后负责页面跳转到或新建一个ItemGrid来显示Feed
• 
  
• 当用户在ItemGrid选中了一个Item的时候，一个ItemSelected AppEvent就会搭载其Item被派发出去。
• 当ItemSelected AppEvent被派发出来之后，ItemView接收到此事件，然后负责页面使用ItemPanel来显示Item
• 
  
• 当用户在TabPanel选中某个tab的时候，一个TabSelected AppEvent就会搭载其Feed被派发出去。
• 当TabSelectedAppEvent被派发出来之后，FeedList接收到此事件，然后负责联动选中到对应的Feed。

Implements：

• AppEvents类，新定义三个EventType

public static final EventType FeedSelected = new EventType();
  public static final EventType ItemSelected = new EventType();
  public static final EventType TabSelected = new EventType();

• 找到com.danielvaughan.rssreader.client.lists.FeedList类，在其onRender方法里，添加 SelectionChange监听——当用户选择不同的Feed的时候，就会触发SelectionChangedEvent事件，其操作过程，是将传入的selectedItem，派发出去。

package com.danielvaughan.rssreader.client.lists;

import java.util.List;

import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.danielvaughan.rssreader.client.mvc.events.AppEvents;
import com.danielvaughan.rssreader.client.services.FeedServiceAsync;
import com.danielvaughan.rssreader.shared.model.Feed;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.data.BaseListLoader;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.BeanModelReader;
import com.extjs.gxt.ui.client.data.ListLoadResult;
import com.extjs.gxt.ui.client.data.ListLoader;
import com.extjs.gxt.ui.client.data.LoadEvent;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.LoadListener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedListener;
import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.form.ListField;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class FeedList extends LayoutContainer {
  
  final ListField<BeanModel> feedList = new ListField<BeanModel>();
  
  public FeedList() {
    setLayout(new FitLayout());
  }

  private String getTemplate() {
    StringBuilder sb = new StringBuilder();
    sb.append("<tpl for=\".\">");
    sb.append("<div class='x-combo-list-item'><b>{title}</b> -{description}</div>");
    sb.append("</tpl>");
    return sb.toString();
  }

  @Override
  protected void onRender(Element parent, int index) {
    super.onRender(parent, index);
    // 0：从Registry里获得Service
    final FeedServiceAsync feedService = (FeedServiceAsync) Registry
        .get(RSSReaderConstants.FEED_SERVICE);
    // 1：定义proxy在load方法里掉用Serivce里的方法
    RpcProxy<List<Feed>> proxy = new RpcProxy<List<Feed>>() {
      @Override
      protected void load(Object loadConfig,
          AsyncCallback<List<Feed>> callback) {
        feedService.loadFeedList(false, callback);

      }
    };
    // 2：定义Reader
    BeanModelReader reader = new BeanModelReader();
    // 3：将proxy和reader传入，定义loader
    ListLoader<ListLoadResult<BeanModel>> loader = new BaseListLoader<ListLoadResult<BeanModel>>(
        proxy, reader);
    // 4：传入loader，生成store，此时还没有load数据
    final ListStore<BeanModel> feedStore = new ListStore<BeanModel>(loader);
    // 5：将stroe绑定到data-backed component身上
    feedList.setStore(feedStore);
    feedList.setTemplate(getTemplate());
    
    feedList.addSelectionChangedListener(new SelectionChangedListener<BeanModel>() {
      @Override
      public void selectionChanged(SelectionChangedEvent<BeanModel> se) {
        Feed feed = se.getSelectedItem().getBean();
        if (feed != null) {
          Dispatcher.forwardEvent(AppEvents.FeedSelected, feed);//关键在这里～～～
        }
      }
    });
    
    // 6：真正的load数据，load成功之后，data-backed component会自动的显示出来。
    loader.load();

    add(feedList);
  }
}

• 如果想要程序能够对FeedSelected事件作出响应，就必须在关联的Controller注册——FeedController

public FeedController() {
    registerEventTypes(AppEvents.Init);
    
    registerEventTypes(AppEvents.FeedSelected);
  }

• 重构ItemGrid的构造函数，增加一个参数为Feed——用来接收FeedSelected事件传递过来的Feed

private final Feed feed;
public ItemGrid(Feed feed) {
setLayout(new FitLayout());
this.feed = feed;
}

• 继续在ItemGrid类，将onRender方法里面局部变量的grid，提取到方法外面，作为ItemGrid类的属性存在。

private Grid<ModelData> grid;

@Override
protected void onRender(Element parent, int index) {
…
grid = new Grid<ModelData>(itemStore, columnModel);
}

• 继续在ItemGrid类的onRender方法里。删除如下局部变量的定义

final String TEST_DATA_FILE = "http://localhost:8888/rss2sample.xml";

• 取而代之，是使用Feed对象的UUID属性替换之前的TEST_DATA_FILE

RpcProxy<List<Item>> proxy = new RpcProxy<List<Item>>() {
      @Override
      protected void load(Object loadConfig,
          AsyncCallback<List<Item>> callback) {
        feedService.loadItems(feed.getUuid(), callback);
      }
    };

• 继续在ItemGrid类里，定义一个新的方法——resetSelection，用来重设Grid的选中状态。

public void resetSelection() {
grid.getSelectionModel().deselectAll();
}

• 在FeedView类，新建一个方法（onFeedSelected）用来响应，接收到的 FeedSelected事件：通过传入的event获得Feed对象；将Feed对象作为参数创建一个ItemGrid；新建TabItem，并设置一些属性，将先前新建的ItemGrid加入到Tabitem里；最后，将tabItem加入到feedPanel里。

private void onFeedSelected(AppEvent event) {
    Feed feed = event.getData();
    final ItemGrid itemGrid = new ItemGrid(feed);
    TabItem tabItem = new TabItem(feed.getTitle());
    tabItem.setId(feed.getUuid());
    tabItem.setData("feed", feed);
    tabItem.add(itemGrid);
    tabItem.addListener(Events.Select, new Listener<TabPanelEvent>() {//选中之后的tab会清空item selection
      @Override
      public void handleEvent(TabPanelEvent be) {
        itemGrid.resetSelection();
      }
    });
    tabItem.setClosable(true);
    feedPanel.addTab(tabItem);
  }

• 在FeedView类的handleEvent方法里，加入对FeedSelected事件的跳转。到此FeedSelected事件的处理流程完成

@Override
  protected void handleEvent(AppEvent event) {
    EventType eventType = event.getType();
    if (eventType.equals(AppEvents.Init)) {
      onInit(event);
    }else if (eventType.equals(AppEvents.FeedSelected)) {
      onFeedSelected(event);
    }
  }

• 在ItemGrid的onRender方法里，添加一个SelectionChange的监听，当用户选择不同的Item的时候，就会触发SelectionChangedEvent事件，其操作过程，是将传入的selectedItem，派发出去。

grid.getSelectionModel().addListener(Events.SelectionChange,
        new Listener<SelectionChangedEvent<Item>>() {
          @Override
          public void handleEvent(SelectionChangedEvent<Item> be) {
            Item item = be.getSelectedItem();
                                                if(item!=null)
                                                    Dispatcher.forwardEvent(AppEvents.ItemSelected, item);
          }
        });

• 同样的，对于ItemSelected方法，我们要在ItemController里注册

public ItemController() {
    registerEventTypes(AppEvents.Init);

    registerEventTypes(AppEvents.ItemSelected);
  }

• 在ItemView类里，针对ItemSelected AppEvent处理的方法——onItemSelected()

private void onItemSelected(AppEvent event) {
Item item = (Item) event.getData();
itemPanel.displayItem(item);
}

• 在ItemView类里，handleEvent方法里加入针对ItemSelected事件的处理方法跳转。到此ItemSelected事件的处理流程完成

@Override
  protected void handleEvent(AppEvent event) {
    EventType eventType = event.getType();
    if (eventType.equals(AppEvents.Init)) {
      Dispatcher.forwardEvent(new AppEvent(AppEvents.ItemPanelReady,
          itemPanel));
    } else if (eventType.equals(AppEvents.ItemSelected)) {
      onItemSelected(event);
    }
  }

• 现在我们还少一个事件处理流程——TabSelected ，但是我们先来看看程序运行效果哈～～～