XSL簡介 XSLT 樣版規則及樣式 範本元素 排序元素

Slides:



Advertisements
Similar presentations
第一單元 建立java 程式.
Advertisements

08 CSS 基本語法 8-1 CSS 的演進 8-2 CSS 樣式規則與選擇器 8-3 連結HTML 文件與CSS 樣式表
通訊科技教育改進計畫 「網路應用與服務組」 行動電子商務課程 XML之簡介.
XML应用体系结构 Application DOM SAX DOM4J XPath XSL XLink XML Namespace
Views ,Stored Procedures, User-defined Function, Triggers
Project 2 JMVC code tracing
Hadoop 單機設定與啟動 step 1. 設定登入免密碼 step 2. 安裝java step 3. 下載安裝Hadoop
DreamWeaver MX (V) 林偉川.
DreamWeaver MX (II) 林偉川.
Chapter14 HTML簡介與簡易網頁製作
EEI-XML 教學.
第 3 章 XML文件的轉換 –XSLT與XPath
第2章 HTML、XML和XHTML實務 2-1 HTML的基礎 2-2 HTML標籤 2-3 XML與XSLT的基礎
經濟部工業局電子化人才培訓課程 清華大學工業工程與工程管理學系 課程名稱:電子商務管理與技術
客戶端的檔案上傳 HtmlInputFile檔案控制項 上傳單一檔案 同時上傳多個檔案.
XSL: Extensible Stylesheet Language
扩展标记语言XML (Extensible Markup Language)
4B冊 認識公倍數和最小公倍數 公倍數和最小公倍數的關係.
SQL Stored Procedure SQL 預存程序.
安裝JDK 安裝Eclipse Eclipse 中文化
網頁切換移轉 JS vs. ASP.NET.
單元5-1:XSL XML的轉換語言 王豐緒 銘傳大學資工系.
檔案與磁碟的基本介紹.
Java 程式設計 講師:FrankLin.
XML基礎課程 5 數位芝麻網路公司 XML講師:蔡斐婷.
網頁切換移轉 JS vs. ASP.NET.
Chap3 Linked List 鏈結串列.
第一單元 建立java 程式.
VS.NET 2003 IDE.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
第 19 章 XML記憶體執行模式.
第一個cordova project Cordova project建立與平台設定,均藉由cli(command line interface來完成 建立project請打開命令提示字元視窗應輸入下列命令 cordova create hello tw.edu.stust.mis.hello HelloWorld.
雲端計算.
第 1 章 簡介XML.
HTML – 超連結與圖片 資訊教育.
第 21 章 Access與XML.
Chime.
如何利用範本來製作網頁.
CH05. 選擇敘述.
挑戰C++程式語言 ──第8章 進一步談字元與字串
經濟部工業局電子化人才培訓課程 清華大學工業工程與工程管理學系 課程名稱:電子商務管理與技術
VS.NET 2003 IDE.
Class & Object 靜宜大學資工系 蔡奇偉副教授 ©2011.
C qsort.
HelloPurr_Extend 靜宜大學資管系 楊子青
MicroSim pspice.
利用 EditorConfig 自訂文字編輯器設定
流程控制:Switch-Case 94學年度第一學期‧資訊教育 東海大學物理系.
MiRanda Java Interface v1.0的使用方法
JQuery 標籤操作 建國科技大學 資管系 饒瑞佶 2013/4 V1.
Dreamweaver 進階網頁製作 B 許天彰.
動畫演示 Node規範了一些基本的方法,像是增加節點、刪除節點、讓節點做一些事、取得第n個節點等等
2018 Operating Systems 作業系統實習 助教:林欣穎 實驗室:720A.
Brief Guide of FrontPage
1757: Secret Chamber at Mount Rushmore
Parasitics Extraction (PEX) 與 postsimulation(posim)
資料表示方法 資料儲存單位.
第一章 直角坐標系 1-3 函數及其圖形.
資料結構與C++程式設計進階 期末考 講師:林業峻 CSIE, NTU 7/ 15, 2010.
清單的CSS樣式.
Cloud Training Material- 事件 Sherman Wang
電腦網絡與教學.
ABAP Basic Concept (2) 運算子 控制式與迴圈 Subroutines Event Block
String類別 在C語言中提供兩種支援字串的方式 可以使用傳統以null結尾的字元陣列 使用string類別
NFC (近場通訊, Near Field Communication) 靜宜大學資管系 楊子青
Unix指令4-文字編輯與程式撰寫.
Develop and Build Drives by Visual C++ IDE
西南科技大学网络教育系列课程 动态网页设计(JSP) 补充 JSP操作XML文件.
第17章 PHP應用實例探討 17-1 PHP應用實例探討 17-2 圖片版的訪客計數 17-3 訪客留言簿 17-4 聊天室
ABAP Basic Concept (2) 運算子 控制式與迴圈 Subroutines Event Block
Presentation transcript:

XSL簡介 XSLT 樣版規則及樣式 範本元素 排序元素 第五章 XML可延伸樣式語言 XSL簡介 XSLT 樣版規則及樣式 範本元素 排序元素

XSL簡介 XSL是一種強大的Script語言,在功能上主要分為兩個部分: 轉換XML文件:將XML文件架構轉換成另一個XML架構的文件或非XML文件,例如HTML文件。 格式化XML文件:格式化元素內容的樣式,以便顯示出XML文件。

XSL簡介(續) XSL的兩個部分分別屬於不同的規格,其中轉換部分的規格稱為XSLT(XSL Transformations),至於格式化部分的規格目前仍屬於草案階段。 目前能支援XML的瀏覽器並不多,所以XSLT的角色就相當重要,只需XSLT就可以XML文件轉換成HTML文件,而XML配合XSLT就可以在支援HTML的瀏覽器顯示文件內容。

XML 文件的輸出方式 Web browser XSL Transformation Spec HTML Document XSL XSL Style Sheet CSS Style Sheet XML Document XSL display Engine XML-enabled Web Browser

XSL 與 CSS 的比較 比較項目 CSS XSL 可用於瀏覽器外的環境否? 不行 可以 可以使用在HTML否? 可使用在XML否? 語法格式 XML

XSLT 使用XSLT,開發者可以描述轉換XML文件結構的樣式表,而由XSLT解譯器來作轉換

XSLT 運作方式

XSLT 輸出 XML XSLT處理器 HTML/XML XSLT

XPath XPath 是一種語言,用來描述XML節點的位置。 例如: /BOOKLIST/BOOK/CODE

XPath的位置路徑 運算子 說明 / 子元素路徑運算子 // 遞迴下層路徑運算子 . 目前的節點 .. 父節點 * 萬用字元 @ 元素的屬性 [ ] 指出節點的索引 | 組合多個位置路徑

子元素的位置路徑 /booklist/book/name /booklist/book/author/name //name //* /booklist/book/@sales /booklist/book[1]

使用XSLT XSLT的語法 <?xml-stylesheet type=“text/xsl” herf=“ch8-3.xsl” ?>

XSLT簡單範例 XML文件 <?xml version="1.0" encoding="Big5"?> <?xml-stylesheet type="text/xsl" href="ch8-3.xsl" ?> <hello>大家好!</hello>

<?xml version="1.0" encoding="Big5"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head><title>測試XSLT</title></head> <body> <h2><center><xsl:value-of select="hello"/></center></h2> </body> </html> </xsl:template> </xsl:stylesheet>

經過轉換 未經過轉換

XSLT基本架構 <?xml version="1.0" encoding="Big5"?> <xsl:stylesheet version="1.0“ xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> ………… </xsl:template> </xsl:stylesheet>

XSLT基本架構(續) 前面曾經說過,XSLT屬於範本驅動的轉換,概標籤下的子元素是由數個xsl:template元素組成,每一個元素的範本對應指定元素轉換後的輸出資料,這些資料就是HTML標籤或不同架構的XML元素。

內容元素 xsl:value-of 在XML文件使用XSLT進行轉換時,我們需要取得XML元素的內容,只需指定select屬性的元去名稱即可,如下所示: <xsl:template match="/"> <h2><xsl:value-of select="hello"/></h2> </xsl:template>

內容元素 xsl:value-of(續) 選擇屬性內容: 如果轉換輸出的為XML元素的屬性,我們需要在屬性前加上「@」符號,如下所示: <xsl:template match=“hello"> <h2><xsl:value-of select=“@good"/></h2> </xsl:template>

範本元素 xsl:template <xsl:template match="/"> …………………… </xsl:template> 上述開始標籤<xsl:template…>和</xsl:template>結尾標籤間的就是範本定義的轉換規則,XSLT處理器會將此範本套用在match屬性指定的元素,這也包括其下的子元素,以此match屬性的模型為「/」,這指的是根節點和其下的所有元素。

範本元素 xsl:template(續) Match屬性: Template最重要的屬性就是match,這個屬性就是Xpath指出元素 的位置路徑,一些常用的屬性內容如下: / 根節點下所有子元素 /glossary/item[position()=1] Glossary元素第一個item元素 /glossary/item[@version=‘AB’] Glossary元素屬性version為AB的title元素 /glossary/item[last()]/definition Glossary元素最後一個item元素的definition子元素

範本元素 xsl:template(續) Match屬性舉例說明: <xsl:template match="/glossary/item[position()=1]"> <p><b><xsl:value-of select="title"/> - <xsl:value-of select="definition"/></b> (<xsl:value-of select="definition/title"/>)</p> </xsl:template>

遞迴範本元素 xsl:apply-templates 如果單純使用前面的範本元素,我們需要替每一個XML元素建立轉換的script碼,遞迴範本元素xsl:apply-template可以使用遞迴的方式顯示所有的子元素。

遞迴範本元素 xsl:apply-templates <xsl:template match=“item"> <b><xsl:value-of select="title" /></b> <xsl:apply-templates select="definition"/> </xsl:template> 上述範本元素的模型為item,擁有兩個子元素title和definition元素,其中definition也擁有同名的子元素 title,如果沒有遞迴範本元素 ,XSLT處理器就到item元素為止。

遞迴範本元素 xsl:apply-templates 如果使用遞回範本元素,處理器會遞迴繼續找尋子節點,此時有兩種情況,如下所示: 沒有select屬性:繼續找尋所有的子節點,也就是title和definition元素,再次找尋是右有符合的範本,繼續執行轉換。 擁有屬性select :select屬性能夠指定開始的元素,以上頁例子,就是由item子元素definition開始,如此就不包括子元素title。

XSLT的迴路元素 xsl:for-each 語法 <xsl:for-each select="booklist/book"> ……… </xsl:for-each> 上述迴路元素的select屬性指定顯示的元素,以此示所有book元素,標籤內容可以使用xsl:value-of元素輸出子元素的內容。

舉例說明: 下例為XML原始檔案

而下列則是XSLT的部分,藉此for-each元素,便可得到下頁的結果。 <xsl:template match="/"> ……… <xsl:for-each select="booklist/book"> <tr><td><xsl:value-of select="code"/></td> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="authorlist/author"/></td> <td><xsl:value-of select="price"/></td> </tr> </xsl:for-each>

由此可見,for-each元素可將所有的元素內容,並且加以修飾顯示方式,如下所示:

過濾XML元素的select屬性 在使用for-each迴路時,如果不想顯示所有的XML元素,我們可以在select屬性上加上過濾條件,只顯示符合條件的元素,如下所示: 上述迴路的條件為book元素屬性sales是Y。 <xsl:for-each select="booklist/book[@sales='Y']">

若我們使用前面的XML文件套用前一頁的select屬性用法,則得到以下的結果:

排序元素 xsl:sort HTML標籤的內容無法進行排序的處理,但是XSLT Script擁有排序元素,能夠指定XML元素進行排序。 <xsl:sort select="title" order="descending"/> descending:從大到小 ascending: 從小到大

由前一頁的XSLT來看,依據title來排序,從大到小,便可由下表可得證:

單一條件元素 xsl:if 目前XSLT Script都是直接輸出轉換的結果,但是在轉換時我們可能需要測試一些情況,以決定是否轉換,這就屬於單一條件元素。 <xsl:if test="@sales = 'Y'"> …….. </xsl:if> <xsl:if test="@sales = 'N'">

所以,我們可以利用單一條件元素來呈現下列的表格:

多條件元素 xsl:choose 如果在條件處理上需要多條件,我們可以使用xsl:choose、xsl:when、xsl:otherwise元素建立多條件元素。 <xsl:choose> <xsl:when test="price > 500"> ……… </xsl:when> <xsl:when test="price = 500"> <xsl:otherwise> </xsl:otherwise> </xsl:choose>

利用多條件元素 choose 便可以達成多項條件的判斷,如下圖所示。

呼叫函數元素 xsl:call-template 建立範本函數 上述範本並不是XML元去的範本,而是使用name屬性建立一個名為showbook的範本函數。 <xsl:template name=“showbook"> …………… </xsl:template>

呼叫函數元素 xsl:call-template(續) 呼叫範本函數元素 上述call-template元素呼叫範本函數,name屬性指定範本函數的名稱。 <xsl:call-template name=“showbook"> …………… </xsl:call-template>

呼叫函數元素 xsl:call-template (續) 範本函數的參數傳遞 <xsl:template name=“showbook"> <xsl:param name=“position” select=“/booklist/book”/>  …………… </xsl:template>

呼叫函數元素 xsl:call-template (續) 如果範本函數需要傳入參數,只需在xsl:template元素為一個參數,name屬性為參數名稱,select屬性為參數的預設值,當呼叫範本函數時沒有傳入參數,就是使用select屬性的預設值。

呼叫函數元素 xsl:call-template (續) 在範本函數傳入參數後,請使用「$」符號加上參數名稱取出參數值,如下所示。 $position 接著回到呼叫範本函數call-template元素,使用with-param元素傳入範本函數所需的參數,如下頁所示。

呼叫函數元素 xsl:call-template (續) <xsl:call-template name="showbook"> <xsl:with-param name="position" select="/booklist/book[price < '500']"/> </xsl:call-template> 上述元素with-param元素對應template子元素param,其中name性為參數名稱,select為參數值。

複製元素xsl:copy 如果XML元素名稱是輸出元素的名稱,我們可以直接使用copy元素輸出XML元素名稱,例如:XML元素title,如下所示: <xsl:template match=“title”> <xsl:copy> <xsl:apply-template/> </xsl:copy> <xsl:template>

複製元素xsl:copy (續) 上頁範本元素直接將title元素輸出成同名的元素,如果需要複製整個子元素,使用萬用字元「*」,如下所示: <xsl:template match=“title”> <xsl:copy select=“*”/> </xsl:template>

刪除元素 如果想刪除指定的XML去,只需建立所需的範本元素,元素 內容為空的,如下所示: <xsl:template match=“code”> </xsl:template> 上述範本元素為空元素,也就是刪除XML元素code。

更改元素名稱 如果需要更改元素名稱,例如:將XML的title元素輸出成HTML的h2標籤,如下所示: <xsl:template match=“title”> <h2> <xsl:apply-template/> </h2> </xsl:template> 上述範本元素只需活用apply-template元素輸出成h2元素。

建立元素xsl:element 如果輸出的XML文件要新增XML元素,只需要使用xsl:element元素的name屬性新增所需的元素,如下所示: <xsl:element name=“catalog”>網頁製作</xsl:element> 上述element元素建立一個XML元素catalog,如下: <catalog>網頁製作</catalog>

建立屬性元素xsl:attribute 如果新建立的元素 擁有屬性,我們可以在element子元素attribute新元素的屬性,如下所示: <xsl:element name=“catalog”> <xsl:attribute name=“code”>A001</xsl:attribute> 網頁製作 </xsl:element>

建立屬性元素xsl:attribute (續) 上頁XSLT元素建立XML元素catalog和屬性code,如下所示: <catalog code=“A001”>網頁製作</catalog> 同樣方式,可以使用comment建立註解文字,如下所示: <xsl:comment>網頁製作研究系列</xsl:comment>