XSL
advertisement
XSL eXtensible Stylesheet Language What is XSL? • XSL is a language that allows one to describe a browser how to process an XML file. • XSL can convert an XML file into another XML with different format. • XSL can convert an XML file into a non-XML file. XSL • The most common type of XSL processing is to convert XML file into HTML file which can be displayed by browsers. We will focus on this use of XSL. • XSL is the bridge between XML and HTML. • We can use XSL to have different HTML formats for the same data represented in XML. • Separating data (contents) from style tags (display commands). • XML example, class.xml XML Tree (Logical Structure) XSL Example for class.xml (XMLHTML) <?xml version=“1.0” ?> <xsl:stylesheet xmlns:xsl=“http://www.w3.org/TR/WD-xsl”> <xsl:template match=“/”> <HTML> <HEAD><TITLE> Class.xml Stylesheet</TITLE></HEAD> <BODY BGCOLOR=“red”> The homepage of <EM> <xsl:value-of select=‘’class/title”/> </EM> </BODY> </HTML> </xsl:template> </xsl:stylesheet> Try it yourself • Down load class.xml and class.xsl from homepage of the course. • Save it on your machine. • View the XML file with web browser. • Add the line that instructs the browser which stylesheet to use to format the XML (add it to second line). • View the XML file again. XSL • The first line of the XSL file shows that XSL itself is written in XML. (<?xml version=“1.0” ?>). • Line: <xsl:stylesheet xmlns:xsl=“http://www.w3.org/TR/WD-xsl”> tells the browser that this is a XSL stylesheet. • The XSL tags specify the rules to be applied to elements or attributes of the XML. Any other tag, including HTML tags, or piece of text will be kept as it is. XSL paths • Using XSL paths we can display the content of the elements or values of the attributes. • “/” by itself represents the root element. • When “/” is used as separator between two elements it indicates a move one level down the hierarchy. • Example: / , class, class/title or class/students/student/name/first XSL Paths • The browser can also pick out and use attribute values. The syntax is @attributName • Example: class/students/student/major/@decided. XSL template • Each template contains rules to apply when an element is matched with the path specified as value of the match attribute. • Thus, <xsl:template match=“/”> …. </xsl:template> means apply the rules within the start and end tags to the root element. XSL value-of • The <xsl:value-of select=“….”> element is used to extract the value of the element or attribute specified in select attribute. • Examples: <xsl:value-of select=“class/title”> <xsl:value-of select=“class/students/student/name/first ”> <xsl:value-of select=“class/students/student/major/@decided”> Do it yourself 1-Copy this piece of XML and save it as note.xml: <?xml version="1.0" ?> <note> <from>John</from> <to>Merry</to> <message title=“Reminder”>Don’t forget mer</message> </note> 2- View it using an web browser. Do it yourself 3- Write an XSL stylesheet for note which displays note as: There was a message from John to Merry with title Reminder. 4- Note John is written in bold and Merry italic. 5- Name the stylesheet as note.xsl 5- Add the line which instructs the browser to style note.xml with note.xsl. 6- View note.xml with a web browser. Do it yourself 3- Write an XSL stylesheet for note which displays note as: There was a message from John to Merry with title Reminder. 4- Note John is written in bold and Merry italic. 5- Name the stylesheet as note.xsl 5- Add the line which instructs the browser to style note.xml with note.xsl. 6- View note.xml with a web browser. <?xml version="1.0" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <HTML> <HEAD><TITLE> Note Stylesheet</TITLE></HEAD> <BODY> There was a message from <B> <xsl:value-of select="note/from"/> (Sample Solution) </B> to <I> <xsl:value-of select="note/to"/> </I> with title <xsl:value-of select="note/message/@title"/>. </BODY> </HTML> </xsl:template> </xsl:stylesheet> Redo it. • Write an XSL stylesheet which displays the note.xml in the following form (HTML table): <?xml version="1.0" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <HTML> <HEAD><TITLE> Note Stylesheet </TITLE></HEAD> <BODY> <TABLE BORDER="5" CELLPADDING="5"> <TR> <TH>From</TH> <TH>To</TH> <TH>Message Title</TH> </TR> <TR> <TD> <xsl:value-of select="note/from"/> </TD> <TD> <xsl:value-of select="note/to"/> </TD> <TD> <xsl:value-of select="note/message/@title"/> </TD> </TR> </TABLE> </BODY> </HTML> </xsl:template> </xsl:stylesheet> (Sample Solution) HW2 • I posted assignment #2. • Let’s review it together. More XML • Create your own XML file for a Lunch Menu. The root element should be <lunch_menu>. The sub elements of <lunch_menu> are <food> corresponding to each food in the menu. Then each <food> element has a number of attributes or child elements (your choice) such as name, price, calories,…. • Add at least two entries to your XML tree. • View the result using a web browser. (Make sure it is well-formed). <?xml version="1.0" ?> <lunch_menu> <food> <name>Cheese Burger</name> <price>$5.95</price> <calories>650</calories> </food> <food> <name>Macaroni and Cheese</name> <price>$7.95</price> <calories>900</calories> </food> <food> <name>Hot Dog</name> <price>$3.95</price> <calories>500</calories> </food> </lunch_menu> (Sample Solution) Repetition • Using <xsl:value-of select=“…”> we can retrieve the value of element or attribute which matches the XSL path specified by the select attribute. • But what if there are more than one element or attribute which matches with the specified path and we want to apply some formatting rules on all these matched entities? Example • In class.xml we have couple of student elements which match with the XSL path: class/students/student • Assume we want to create an style-sheet which lists the name of all students in class. • We need an XSL instruction to apply a set of rules on each student element. <xsl:for-each> <xsl:for-each select=“…”> … </xsl:for-each> allows us to specify a set of styling rules within the start and end tags to be applied to all elements or attributes which match the specific path in select attribute. Example: Write an XSL stylesheet for class.xml where each student name is in a separate line and with bold face. Example of <xsl:for-each> <?xml version="1.0" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <HTML> <HEAD> <TITLE> Student Names </TITLE> </HEAD> <BODY> <xsl:for-each select="class/students/student"> <B> <xsl:value-of select="name/first"/> <xsl:value-of select="name/last"/> <BR/> </B> </xsl:for-each> </BODY> </HTML> </xsl:template> </xsl:stylesheet> Exercise 1. Download and save class-names.xml into your machines. 2. Download and save XSL-EX-1.xsl into your machines in the same folder. 3. Modify the style-sheet, so instead of name of students you have an unordered list of majors of students of the class. (Remember, the HTML syntax for unordered list: <UL> <LI> … </LI> <LI> … </LI> </UL> ) 4. View the classView.xml with a web browser. Sample Solution <?xml version="1.0" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <HTML> <HEAD> <TITLE> Student Majors </TITLE> </HEAD> <BODY> <UL> <xsl:for-each select="class/students/student"> <LI><xsl:value-of select="major/majorName"/></LI> </xsl:for-each> </UL> </BODY> </HTML> </xsl:template> </xsl:stylesheet> Problem • Some students have not yet decided their majors. For these students the value of decided attribute is “n”. • But the formatting rules inside the <xsl:for-each> will be applied to all students regardless of having a major or not. • We want a way to instruct the XSL to apply the rules when the value of decided attribute is “y” (decided = “y”). Selection: Filtering Data • <xsl:if match=“.[name=‘value’]”> is yet another xsl tag which instructs the XSL to apply the rules within start tag <xsl:if > and end tag </xsl:if> if the value of the specified element or attribute matches with the value specified at the right hand side of “=”. • Put it another way, <xsl:if> conditionally retrieves the value of the specified element or attribute. • This condition is specified as value of match attribute. Specifying the Condition inside match attribute <xsl:if match=“.[ XSL test path =‘value’ ]” > • • Test path : XSL path which specifies the element or attribute we want to perform the test on its value. Value : The conditional value. That is if the value of the specified element or attribute matches this value the rules or instructions within start and end tags will be executed. Examples • <xsl:if match=“ .[ majorName =‘MGT’ ]” > o “.” in XSL is shorthand for “the current node”. o Select the current element IF its sub-element, majorName has value MGT. • <xsl:if match=“.[major/@decided = ‘y’] o Select the current element if the value of “decided” attribute of its sub-element, major is ‘y’.] • <xsl:if match=“.[major/submajor = ‘Finance’]”> o Select the current element IF the value of the child, submajor of its child, major is ‘Finance’. Different Web Browsers • Note that the standard syntax for <xsl:if> suggested by W3C is: <xsl:if test ="major/@decided = 'n'"> With the standard syntax for <xsl:if> , the <xsl:stylesheet> tag should be: <xsl:stylesheet version="1.0“ xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> Instead of: <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> You can use any of them, but the second case works only with Internet Explorer. Example List the name of the majors of all students in the class. Use <xsl:if> to avoid empty items. <?xml version="1.0" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <HTML> <HEAD> <TITLE> Major Names </TITLE> </HEAD> <BODY> <UL> <xsl:for-each select="class/students/student"> <xsl:if match=".[major/@decided='y']"> <LI><xsl:value-of select="major/majorName"/></LI> </xsl:if> </xsl:for-each> </UL> </BODY> </HTML> </xsl:template> </xsl:stylesheet> (Sample Solution 1) Do it yourself I. Download and save the file XSL-EX-3.xsl. II. Change the appropriate line in classnames.xml to be styled with XSL-EX-3.xsl. III. View class.xml with a browser. IV. Change the XSL-EX-3.xsl to present the class.xml as a table with a column for student names and another column for their major. If the student has no major, the phrase N/A should appear in major column. Things to remember • HTML table tags : <TABLE BORDER = “n”> <TR> <TH> header </TH> … </TR> <TR> <TD> data</TD> …. </TR> </TABLE> • You need to use <xsl:for-each> and two <xsl:if> within it.
