Java Web 版 RSS 閱讀器實戰（二）：dTree 實現訂閱分組樹狀加載

系列第二篇，使用輕量級 JavaScript 樹組件 dTree 將 OPML 訂閱數據渲染為可交互的分組樹，奠定左側導航基礎。

dTree 組件介紹

• 純 JS 實現，無依賴，壓縮後 < 20KB
• 支援無限級節點、多樹實例、自定義圖標、展開/折疊狀態持久化
• 官網：destroydrop.com/javascripts/tree/

MVC 架構流程

用戶請求 → RssTeamServlet (Controller)
    → ReadXML (Service) 解析 OPML → List (Model)
    → left.jsp (View) 渲染 dTree 腳本

核心解析邏輯：ReadXML

支援兩種 Foxmail 導出 OPML 格式差異：

• 單分組格式： <body><outline .../> 直接包含訂閱
• 多分組格式： <body><outline title="分組"><outline .../></outline> 巢狀結構

解析策略：判斷 outline 屬性數量 > 2 為葉子訂閱節點，否則為分組節點，遞歸處理。

Servlet 控制器

public class RssTeamServlet extends HttpServlet {
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException {
        String realPath = getServletContext().getRealPath("/");
        ReadXML reader = new ReadXML();
        reader.ReadRssTeam(realPath + "/rss/");  // 讀取 WebRoot/rss/ 下所有 OPML
        req.setAttribute("rssTemBeanList", reader.getRssTeamBeanList());
        req.getRequestDispatcher("/left.jsp").forward(req, resp);
    }
}

left.jsp：dTree 動態生成

<%@ page import="java.util.List, com.tgb.rssreader.bean.*" %>
<link rel="StyleSheet" href="style/dtree.css" />
<script src="js/dtree.js"></script>

<div id="leftMenu" style="overflow:auto;">
<script>
    d = new dTree('d');
    // 根節點
    d.add(0, -1, '博客分組', '', '', '', 'img/blog.png');
    
    <% 
        List teams = (List) request.getAttribute("rssTemBeanList");
        int nodeId = 0;
        for (RssTeamBean team : teams) {
            nodeId++;
            int parentId = nodeId;
    %>
    // 分組節點
    d.add(<%=nodeId%>, 0, '<%=team.getTitle()%>', '', '', '', 
          'img/open.png', 'img/close.png');
    
    <% 
            for (RssBean rss : team.getRssBeanList()) {
                nodeId++;
    %>
    // 訂閱葉子節點
    d.add(<%=nodeId%>, <%=parentId%>, '<%=rss.getTitle()%>', 
          '<%=rss.getXmlUrl()%>', '<%=rss.getText()%>', 'contenthtml');
    <% 
            }
        }
    %>
    document.write(d);
</script>
</div>

dTree 關鍵參數解析

d.add(id, pid, name, url, title, target, icon, iconOpen, open);
// id: 唯一節點ID
// pid: 父節點ID (根節點為 -1 或 0)
// name: 顯示文本
// url: 點擊跳轉地址 (葉子節點為 RSS XML URL)
// title: 鼠標懸停提示
// target: 目標框架名 (此處為中間框架 'contenthtml')
// icon/iconOpen: 關閉/展開狀態圖標
// open: 初始是否展開 (true/false)

頁面佈局：Frameset 三欄式

<frameset cols="220,*,500">
    <frame src="servlet/RssTeamServlet" name="leftFrame" />   <!-- 左側樹 -->
    <frame src="middle.jsp" name="middleFrame" />           <-- 中間列表 -->
    <frame src="content.jsp" name="contenthtml" />         <-- 右側正文 -->
</frameset>

運行效果

避坑指南

• OPML 文件編碼統一 UTF-8，避免中文亂碼
• dTree 圖標路徑相對 left.jsp，確保 img/ 目錄可訪問
• Frameset 邊框拖動可能導致布局亂，建議固定寬度或改用 CSS Flex/Grid
• 大量訂閱時樹渲染慢，可考慮分頁加載或虛擬滾動