HTML5 复合组件，第 2 部分 实现拖放-2

look_w

Feeds 应用程序 Feeds 应用程序（如图 1 所示）是一个 RSS 提要阅读器。左边菜单显示一个 RSS 提要列表，允许用户向列表中添加提要。页面中间显示当前提要的链接。当用户单击文章链接时，应用程序在浏览器中加载相关文章，用户随后可以单击 Back 按钮返回应用程序。
图 1.  Feeds 应用程序一些给定 RSS 提要的文章列表定期更新，因此繁忙的用户可以保存链接供以后阅读，将文章链接从应用程序中间拉到右边菜单即可，如图 2 所示：
图 2. Feeds 应用程序中的拖放该应用程序有一个托管的 bean，如清单 1 所示，可以读取一个 RSS 提要并提供随后的 RSS 条目列表：
清单 1. 检索和解析 RSS 提要

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

package com.clarity; import java.io.Serializable; import java.net.URL; import java.util.LinkedList; import org.gnu.stealthp.rsslib.RSSChannel; import org.gnu.stealthp.rsslib.RSSHandler; import org.gnu.stealthp.rsslib.RSSItem; import org.gnu.stealthp.rsslib.RSSParser; import javax.enterprise.context.SessionScoped; import javax.inject.Named; @Named("rssFeed")@SessionScoped public class RSSFeed implements Serializable {    private static final long serialVersionUID = 2L;        private String feed, displayName;    private RSSChannel channel;    private LinkedList<RSSItem> savedItems = new LinkedList<RSSItem>();    public void fetch(String f, String dn) {       assert f != null;       assert dn != null;       feed = f;       displayName = dn;       RSSHandler handler = new RSSHandler();       channel = handler.getRSSChannel();       try {          RSSParser.parseXmlFile(new URL(feed), handler, true);       } catch (Exception e) {          channel = null;          e.printStackTrace();       }    }    public LinkedList<RSSItem> getItems() {       return channel == null ? null : channel.getItems();    }    public LinkedList<RSSItem> getSavedItems() {       return savedItems;       }    public RSSChannel getChannel() { return channel; }    public String getFeed() { return feed; }    public String getDisplayName() { return displayName; } }

RSSFeed 类使用 RSSLib4J，这使得检索和解析一个 RSS 提要较为容易（见 ）。由于有了  中的 @Named 和 @SessionScoped 属性，应用程序有一个会话范围内的托管的 bean，称为 rssFeed，是 RSSFeed 的一个实例。
应用程序左边菜单中的链接都可用于调用 rssFeed.fetch() 。例如，左边菜单中的 Apple 链接这样实现：

1 2 3

<h:commandLink value="Apple"   action="#{rssFeed.fetch('http://rss.news.yahoo.com/rss/applecomputer',                           'Apple Computer')}"/>

当用户点击链接时，JSF 调用 rssFeed 托管的 bean 的 fetch() 方法，随后重新加载应用程序中间部分显示的链接列表：

1 2 3

<ui:repeat value="#{rssFeed.items}" var="item">    <a href="#{item.link}">#{item.title}</a> <ui:repeat>

该应用程序也显示在右边菜单中保存的链接：

1 2 3 4 5

<ui:repeat value="#{rssFeed.savedItems}" var="item">    <a href="#{item.link}">       #{ fn:substring(#{item.title}, 0, 25) } ...    </a> <ui:repeat>

现在您已经明白了 Feeds 应用程序如何从 RSS 提要中检索和显示条目，我会将注意力转移到本文的主要事件中。