XML 和 WebSphere Studio Application Developer - 第 7 部分: 使用 XSL Editor 和 XSL Debugger 開發 XSL 樣式表

引言
IBM® WebSphere® Studio Application Developer 是一種應用程序開發環境,它支持用 JSP、servlet、HTML、XML、Web 服務、數據庫和 EJB 等不同的技術構建多種應用程序。Application Developer 還特別提供了 XML 和關係數據之間的緊密集成。凡是 WebSphere Application Server 支持的數據庫,Application Developer 都支持,包括 DB2®、Oracle、Sybase 和 Microsoft® SQL Server™。

本文是着重講述 WebSphere Studio Application Developer 附帶的各種 XML 工具的系列文章的第 7 部分。第 7 部分演示如何使用 WebSphere Studio Application Developer 版本 5.0 提供的一些新 XSL 工具來開發 XSL 樣式表。

創建一個簡單的樣式表
我們將從零開始創建一個新的 XSL 樣式表。在開始之前,請下載 下面提供的 xslExample1.zip 文件。切換到 XML 透視圖。創建一個名爲 Simple 的新項目,然後將 videos.xml 文件從 xslExample1.zip 文件導入到 Simple 項目中。按如下步驟啓動 New XSL 文件嚮導:

  1. 選擇 File =>New =>XSL以啓動 New XSL 嚮導。
  2. 在 File name 域中,輸入 videos.xsl 。單擊 Next
  3. 在 Select XML file 頁中,選擇您已經導入的 videos.xml 文件。這會把 videos.xml 文件和 videos.xsl 文件 關聯起來
  4. 單擊 Finish。這樣就創建了 videos.xsl 文件,並且 XSL Editor 自動爲您打開。

創建樣式表
XSL Editor 提供了許多向導來幫助您創建樣式表中的內容。它還提供了一單擊即轉換功能,讓您很快就能看到轉換的結果。在這一部分,我們將向您展示如何用三個簡單的步驟創建一個簡單的 XSL 樣式表並用它把 videos.xml 數據格式化成一張 HTML 表格:

第 1 步:添加一個 HTML 模板頭
爲創建 HTML 文檔,我們將添加一個模板用來生成 HTML 頭信息和定義文檔的輸出方法。

  1. 把光標放到 videos.xsl 文件中 <xsl:stylesheet> 元素後面的空行上。
  2. 從菜單中選擇 XSL =>HTML Template。這將創建一個 <xsl:output> 元素(它將以 HTML 格式輸出結果)和一個模板(它將用 videos.xml 文件中處理所有直接子元素的 <xsl:apply-templates> 規則生成 HTML 頭)。

第 2 步:創建一張 HTML 表格
接下來,我們將創建一個將產生 HTML 表格的模板。

  1. 把光標放到在上面的第 1 步中生成的 </xsl:template> 元素後面的空行上。
  2. 從菜單中選擇 XSL =>HTML Table。這會啓動如下面圖 1 所示的 XSL Table Wizard
  3. 選擇 VIDEO元素作爲用於構建 HTML 表格的上下文節點。這意味着 VIDEO 元素的所有子元素都將作爲表格中的列被添加。
  4. 選擇 Wrap table in a template複選框指出我們想把這個表格包裝到新的模板中。
  5. 選擇 Include Header複選框指出我們想在這個表格中包含一個表頭。
  6. (可選步驟)單擊 Next轉到下一頁,爲該表格添加表格邊框和背景色。
  7. 單擊 Finish。這將在 videos.xsl 文件中創建一個將生成 HTML 表格的新 VIDEOS 模板。

圖 1. XSL Table Wizard
XSL Table Wizard 的抓屏

第 3 步:保存和轉換

  1. 選擇 File =>Save 保存 videos.xsl 文件。將對 videos.xsl 文件運行 XSL 驗證(XSL Validation)。完成後的 videos.xsl 文件包含在 xslExample1.zip 文件中。
  2. 從菜單中選擇 Debug =>Transform。這將調用 Xalan 處理器來轉換與這個 XSL 文件相關聯的 XML 文件( videos.xml )。所得到的 HTML 文件如下面的圖 2 所示。

圖 2. videos.xml 的簡單 HTML 表格
videos.xml 的簡單 HTML 表格的抓屏

把一個樣式表與多個 XML 文檔關聯起來
當我們創建 videos.xsl 文件時,我們把它和 videos.xml 文件關聯了起來。您可以在 Associations 對話框中更改這種關聯。先選擇 videos.xsl文件,然後選擇 Properties。這會啓動 videos.xsl 文件的 Properties 頁。單擊如圖 3 所示的 Associations 選項卡啓動 Associations 對話框。您可以看到 videos.xml 文件目前已被關聯起來了。

圖 3. 把多個 XML 文檔與一個 XSL 樣式表關聯起來
videos.xsl 的 Properties 對話框的抓屏

使用 Associations 對話框,您可以添加或刪除關聯,還可以設置缺省關聯。如果某個 XML 文件被設置爲一個 XSL 文件的缺省關聯,那麼對 XSL 文件的任何需要知道實例文件的處理(例如,轉換、調試或 XPath 嚮導調用)都將自動使用該缺省關聯進行。

將一個 XSL 樣式表應用於許多個結構相同但內容有別的 XML 文檔是很常見的。您可以使用 Associations 對話框來設置所有關聯。當您更改 XSL 樣式表時,您只需單擊一下鼠標就可以選擇 Transform all XMLs 操作來轉換所有已與 XSL 樣式表關聯在一起的 XML 文件。

圖 4. Transform all XMLs
顯示 Transform all XMLs 命令的下拉菜單的抓屏

改善錄像商店的設計
至此,我已經演示瞭如何使用 XSL Editor 中的嚮導來根據 XML 文檔快速創建樣式表。但對於一個真實的錄像商店來說,這個 HTML 表格看起來不是很吸引人。例如,您更願意看到錄像的真實圖像嗎?一種更吸引人的設計可能如下面的圖 5 所示。當您訪問該錄像商店時,會給您顯示一個最受歡迎影片的列表。接着,您可以通過單擊鏈接選擇某部特定的影片;這樣將會顯示一張圖像和詳細的描述,如下面的圖 6 所示。

圖 5. 影片列表
顯示 Most Popular Movies 列表的 Web 瀏覽器的抓屏

圖 6. 一部被選中的影片
顯示一部被選中影片的 Web 瀏覽器的抓屏

這樣一個 Web 站點可以使用與它的數據源相同的 videos.xml 。但是,要使用 XSL 樣式表創建這個 Web 站點,您需要執行以下步驟:

  • 創建能夠處理超鏈接( href )的樣式表。
  • 設計並部署將在運行時把 XSL 轉換成 HTML 的 Web 應用程序。

在本文餘下的幾部分中,我們將着重討論第一項任務。我們將研究可以用來調試 XSL 樣式表的 XSL Debugger。在本系列的下一部分,我們將討論如何構建將把這些樣式表應用於輸入數據以將輸入數據轉換成如上面的圖 5 和圖 6 所示的 HTML 輸出的 Web 應用程序。

調試 XSL 樣式表
創建一個名爲 Scenario 的新項目,然後把 xslExample1.zip 的 Scenario 目錄中的所有文件導入到本項目中。您將注意到,在 xsl 文件夾中有兩個 XSL 樣式表: movieList.xslmovieDetail.xslmovieList.xsl 樣式表用來顯示影片列表。 moveDetail.xsl 樣式表用來顯示一部特定影片的詳細信息。

爲了搞清楚 movieList.xsl 的工作原理,我們將使用 XSL Debugger 來研究它。選擇 movieList.xsl文件和 videos.xml文件。選擇 Apply XSL =>As HTML。這會在 XSL Debug 透視圖中啓動 XSL Debugger,如下面的圖 7 所示:

圖 7. XSL Debugger
XSL Debugger 的抓屏

XSL Debugger 具有下列視圖:

  • Sessions 視圖顯示調試會話列表。您可以從這個視圖使用工具欄按鈕在當前轉換上單步向前 


    XSL Debugger 的 Sessions 視圖中的 Step Forward 圖標

    或單步向後 


    XSL Debugger 的 Sessions 視圖中的 Step Backward 圖標

    ,如果在 XSL 源代碼中設置了斷點的話可以運行到某個斷點 


    XSL Debugger 的 Sessions 視圖中的 Run to a Breakpoint 圖標

    ,或者在結果文檔上打開瀏覽器


    XSL Debugger 的 Sessions 視圖中的 Open the Browser 圖標



  • Current XSL Element 視圖在您一步步執行轉換的過程中顯示 XSL 樣式表中某個元素的詳細信息。Actual Value 列顯示該 XSL 元素被求值時的實際值。

  • Breakpoints 視圖顯示在 XSL 樣式表上所設置的斷點的列表。您可以使用這個視圖除去斷點。

  • Template Call Stack 視圖顯示調用堆棧中的模板的列表。當進入某個模板時,將會有一個條目被添加。當模板完成執行時,該條目就被從堆棧中除去。

XSL Debugger 還在一個平鋪編輯器中打開輸入 XML 和 XSL,以便在您一步步執行轉換時把 XML 和 XSL 並排放在一起,這樣看起來就很方便。不過,如果您的 XSL 樣式表包含其他樣式表,或者如果您的樣式錶轉換多個文檔,那麼平鋪編輯器讀起來就很困難了,您可能會想簡單地把各個編輯器層疊起來。要更改這一點,您可以選擇 Windows =>Preference =>XML =>XSL Debugging,然後取消對“Show all debugging files in a tile editor”複選框的選擇,如下面的圖 8 所示:

圖 8. XSL Debugging 首選項
XSL Debugging 首選項對話框的抓屏

使用 XSL Debugger 研究 movieList.xsl 文件
在 Sessions 視圖中,單擊


XSL Debugger 的 Sessions 視圖的 Step Forward 圖標

按鈕開始一步步執行轉換。正被執行的 XSL 規則在 XSL 源代碼編輯器中被突出顯示。繼續單步向前,直到到達下面定義變量 id 的這一行。
<xsl:variable name="id" select="VID_ID"/>

XSL Debugger 在碰到結束標記時對變量進行求值。在這個簡單的例子中,該變量在同一行中就結束了,但對於更復雜的變量聲明,一個變量的值可能會涉及到調用另一個可能跨越多行的模板。請仔細查看 Current XSL Element 視圖,看看 </xsl:variable> 標記出現時所求得的結果。您將看到求得的上下文節點的值爲 100,它是 VID_ID 元素在當前迭代時的值。

繼續單步向前,直到到達下面定義 href 鏈接的行:

<a href="/VideoWeb/main/detail?videoId={$id}">

這個 href 屬性定義了單擊鏈接時將轉到的頁面的鏈接。那麼,這個 href 中包含什麼內容呢?這個 href 的第一部分定義了一個 URL /VideoWeb/main/detail ,它在 Web 應用程序中運行時有意義。我們將在本系列的下一篇文章中重新探討這一部分。這個 href 的第二部分定義了一個參數 videoId ,它的值是根據 {$id} 變量的值計算出來的。要求出對 videos.xml 文件執行轉換時這個 href 的確切值,請在 Current XSL Element視圖(如下面的圖 9 所示)中查看它。注意,如果實際值很長,您可以使用 ... 按鈕打開一個對話框。

圖 9. 求 href 屬性的值
顯示 href 屬性的詳細信息的抓屏

您可以單步遍歷 <xsl:for-each> 循環在 XSL 元素被執行時查看每一個 XSL 元素,如果您只對查看某些值感興趣的話也可以設置一個斷點。我們來通過雙擊 <a href> 元素所在的行在該元素上設置一個斷點。您將注意到在第 28 行處添加了一個斷點(一個綠色圓點),如圖 7 所示。

現在,單擊


XSL Debugger 的 Sessions 視圖的 Run to a Breakpoint 圖標

按鈕運行到該斷點。注意,每次單擊鼠標時,Current XSL Element 視圖都會顯示一個對應於 videos.xml 文件中的 VID_ID 元素的新 href 屬性值。

使用 XSL Debugger 研究 movieDetail.xsl 文件
接下來,我們將使用 XSL Debugger 仔細研究一下 movieDetail.xsl 文件。先選擇 movieDetail.xsl文件和 videos.xml文件,然後選擇 Apply XSL =>As HTML 啓動一個新的調試會話。

請回想一下, movieDetail.xsl 文件是被用來顯示被選中影片的詳細信息。必須將該影片的標識 videoId 傳遞給這個樣式表。在本系列的下一篇文章中,我們將向您展示當 URL 被請求時,如何從 servlet 動態傳入這樣一個參數。下面您將看到,出於設計這個樣式表的目的,您可以用一個支架(scaffolding)值來代替。

在 XSL 源代碼編輯器中,在下面這一行上設置一個斷點,該行根據變量 $videoId 測試 VID_ID 值。

<xsl:if test="VID_ID=$videoId">

在 Sessions 視圖中,單擊


XSL Debugger 的 Sessions 視圖的 Run to a Breakpoint 圖標

按鈕運行到該斷點。在 Current XSL Element 視圖中,請注意求出的 <xsl:if test> 的值將是 true 。這是因爲這個變量在這一行中被設置爲值 100 ,並且這個值與來自 vidoes.xml 文件的第一個元素值相匹配。
<xsl:variable name="videoId" select="100"/>

如果您再次單擊


XSL Debugger 的 Sessions 視圖的 Run to a Breakpoint 圖標

按鈕,那麼 <xsl:if test> 元素將返回 false ,因爲下一個 VID_ID 值與當前值 100 不匹配。

您可以修改 XSL 或 XML 源代碼,然後重新啓動 XSL Debugger 來立即看到結果。讓我們像下面這樣將 videoId 值改爲 103 ,然後保存文件。

<xsl:variable name="videoId" select="103"></xsl:variable>

在 Sessions 視圖中,選擇當前會話並啓動彈出菜單(參見圖 10)。選擇 Relaunch 開始一次新轉換。單擊


XSL Debugger 的 Sessions 視圖的 Open the Browser 圖標

按鈕在新轉換上打開瀏覽器。您將會看到另一個影片描述。

圖 10. 重新啓動一個新的調試會話
顯示在彈出菜單中選擇了 Relaunch 選項的抓屏

結束語
本文描述瞭如何使用 WebSphere Studio Application Developer 版本 5.0 中的一些新的 XSL 工具。這些工具可以幫助初學者很快就可以開始使用 XSL,並且可以幫助 XSL 程序員中的高手提高工作效率。

WebSphere Studio Application Developer 5.0 中本文未描述的其他與 XSL 有關的工具包括:

  • XSL from XHTML 嚮導。它根據 XHTML 文件生成 XSL 樣式表。如果您想把現有的 HTML 文件遷移到 XSL 和 XML 基礎架構中,它還可以把數據轉換成 XML 格式(可選)。
  • Java bean XML/XSL Web client 嚮導。它接受 Java bean,然後生成一個 DOM、一些可以應用於這個 DOM 的關聯的 XSL 樣式表和一個能夠將這些 XSL 樣式表應用於該 DOM(這樣您便可以使用 XML 和 XSL 快速創建 Web 應用程序的前端)的 servlet。
  • 支持使用 XSLTC的編譯後的 XSL 樣式表。
  • 幫助您構建和測試 XPath表達式的 XPath 嚮導。

在本系列的下一篇文章中,我們將講述如何開發和部署將使用我們在本文中創建的 XSL 樣式表的 Web 應用程序。

下載
NameSizeDownload method
xslExample1.zip46 KBHTTP
發佈了85 篇原創文章 · 獲贊 2 · 訪問量 14萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章