XSL

1. XSL November 4, Unit 6

2. <xsl:sort> • Default sorting is based on text • However, we can also sort on numbers, more successfully than last class • <xsl:sort select = “price” data-type = “number”> • We use the data-type attribute to specify if we are sorting on text or numbers • Since text is default only need to add this when we want to sort based on a number • In this case, price.

3. <xsl:sort> on Multiple Tags • What if want to sort by price, then by author? • Or perhaps last name, then by first name? • We can use two <xsl:sort> elements to do this <xsl:sort select =“price” data-type = “number”/> <xsl:sort select = “author”/> • Another example: <xsl:sort select = “last_name”/> <xsl:sort select = “first_name”/> • When using multiple <xsl:sort> elements, the order is important • First sort by last_name, then sort by first_name • First sort by price, then sort by author

4. In-Class Example • Multiple Sorts • Including sorting by numbers

5. If • We can add conditional statements to our XSL file • “If the item is out of stock, display the item in red” • “If the cost is more than 6.95, show me the book details” • “If the book is by C.S. Lewis, show me the books”

6. Using <xsl:if> • <xsl:if> must have the attribute test • Test is the expression we are testing • price &gt; 6.95 • author = “C.S. Lewis” • Inventory &lt; 10 • <xsl:if> must have a closing tag • The contents of the <xsl:if> element should be the rules you want to apply • For instance, turn the color red

7. Using <xsl:if> Example <xsl:for-each select = “products/book”> <xsl:if test = “price &lt; 19”> <h3 style = "color: olive"><xsl:value-of select = "title"/></h3> <p style = "margin-left: 30px"> Author:<xsl:value-of select = "author"/><br/> Price:$<xsl:value-of select = "price/><br/> Inventory:<xsl:value-of select = "inventory/><br/> Date: <xsl:value-of select = "publishDate"/><br/></p> </xsl:if> </xsl:for-each> *Will only display books which have a price less than $19.00

8. Using <xsl:if> Example <xsl:for-each select = “products/book”> <xsl:if test = “inventory = 0”> <h3 style = "color: olive"><xsl:value-of select = "title"/></h3> <p style = "margin-left: 30px"> Author:<xsl:value-of select = "author"/><br/> Price:$<xsl:value-of select = "price/><br/> Inventory:<xsl:value-of select = "inventory/><br/> Date: <xsl:value-of select = "publishDate"/><br/></p> </xsl:if> </xsl:for-each> *Will only display books which are out of stock (inventory = 0)

9. Using <xsl:if> Example <xsl:for-each select = “products/book”> <xsl:if test = “author = ‘C.S. Lewis’”> <h3 style = "color: olive"><xsl:value-of select = "title"/></h3> <p style = "margin-left: 30px"> Author:<xsl:value-of select = "author"/><br/> Price:$<xsl:value-of select = "price/><br/> Inventory:<xsl:value-of select = "inventory/><br/> Date: <xsl:value-of select = "publishDate"/><br/></p> </xsl:if> </xsl:for-each> *Will only display books that have C.S. Lewis for an author

10. Using <xsl:if> Example <xsl:for-each select = “products/book”> <xsl:if test = “author != ‘C.S. Lewis’”> <h3 style = "color: olive"><xsl:value-of select = "title"/></h3> <p style = "margin-left: 30px"> Author:<xsl:value-of select = "author"/><br/> Price:$<xsl:value-of select = "price/><br/> Inventory:<xsl:value-of select = "inventory/><br/> Date: <xsl:value-of select = "publishDate"/><br/></p> </xsl:if> </xsl:for-each> *Will only display books that are NOT written by C.S. Lewis

11. Using <xsl:if> Example <xsl:for-each select = “products/book”> <h3 style = "color: olive"><xsl:value-of select = "title"/></h3> <p style = "margin-left: 30px"> Author:<xsl:value-of select = "author"/><br/> Price:$<xsl:value-of select = "price/><br/> <xsl:if test = “inventory &lt;5”> Inventory: <span style = “color:red”><xsl:value-of select = "inventory/></span><br/> </xsl:if> <xsl:if test = “inventory &gt;= 5”> Inventory: <xsl:value-of select = "inventory/></span><br/> </xsl:if> Date: <xsl:value-of select = "publishDate"/><br/></p> </xsl:for-each> *Will display books that are fewer than 5 in stock in the color red and any books with inventory > 5 in black

12. In Class Example • Using <xsl:if>

13. Operators • +, -. *, div : standard math operators • = equal , can be used with numbers and text • != not equal, used with both numbers and text • < strictly less than, use &lt; • <= less than or equal to, use &lt;= • > strictly greater than, use &gt; • >= greater than or equal to, use &gt;= • or, “price = 9.50 or price = “9.60” • and, “price &gt; 9.00 and price &lt; 10.00” • mod, mathematical operator, provides the remainder after division. • e.g. 12 mod 5 = 2, 24 mod 7 = 3.

14. Choose • We could use several if statements to cover every possibility • If inventory is greater than or equal to 100, show in black • If inventory is greater than or equal to 50 and less than 100, show in blue • If inventory is greater than or equal to 5 and less than 50, show in green • If inventory is less than 5 show in red • Or we could use “xsl: choose”

15. <xsl:choose> • <xsl:choose> is combined with <xsl:when> and <xsl:otherwise> • Provides “if, else if, else” • Basic format: <xsl:choose> <xsl:when test = “expression”> ……….. </xsl:when> <xsl:otherwise> ………. </xsl:otherwise> </xsl:choose>

16. Using Choose <xsl:for-each select ="products/book"> <h3 style = "color: olive"><xsl:value-of select = "title"/></h3> <p style = "margin-left: 30px"> Author:<span style = "color: navy"><xsl:value-of select = "author"/></span><br/> <xsl:choose> <xsl:when test="price &gt; 6.95"> Price:<span style ="color:red">$<xsl:value-of select = "price"/></span><br/> </xsl:when> <xsl:otherwise> Price:$<xsl:value-of select = "price"/><br/> </xsl:otherwise> </xsl:choose> <span style = "color: navy; font-weight: bold">Inventory:<xsl:value-of select = "inventory"/></span><br/> Date: <xsl:value-of select = "publishDate"/><br/></p> </xsl:for-each> *If the price is greater than $6.95, display the price in red. Otherwise, display the price normally (in black)

17. Using Choose, cont. <xsl:choose> <xsl:when test = "inventory &gt;=100"> <span style = "color: navy; font-weight: bold">Inventory:<xsl:value-of select = "inventory"/></span><br/> </xsl:when> <xsl:when test = "inventory &gt;=50"> <span style = "color: blue; font-weight: bold">Inventory:<xsl:value-of select = "inventory"/></span><br/> </xsl:when> <xsl:when test = "inventory &gt;=5"> <span style = "color:green; font-weight: bold">Inventory:<xsl:value-of select = "inventory"/></span><br/> </xsl:when> <xsl:otherwise> <span style = "color: red; font-weight: bold">Inventory:<xsl:value-of select = "inventory"/></span><br/> </xsl:otherwise> </xsl:choose> *If inventory is >= 100, display in navy. If 50<=inventory<100, display in blue. If 5<=inventory<50, display in green. If inventory<5, display in red.

18. In Class Example of Choose

19. Back to Templates • So far, we’ve only used a single template in our XSL files <xsl:template match = “/”> • But it is possible to have multiple templates, and can make the XSL easier to read • We will still have the <xsl:template match = “/”> element but now we can add additional template elements

20. Making a New Template • Let’s add a new template which handles the information about the flowers in our bouquet <xsl:template match =“flower”> • Again, we use the <xsl:template> element • This time, though, we use match = “flower” to apply a template to the “flower” tag

21. Using Additional Templates • If we have multiple templates how do we use them? • We have to use the <xsl:apply-templates> • We can specify which templates to apply by using the select attribute • <xsl:apply-templates select = “flowerList”/>

22. In Class Example • Adding a template for “flower” • Adding a template for “price”

23. Validating XML • Can’t really validate XML like we can validate XHTML • We don’t have any rules stating what a <student> element can contain, or what it must contain • We have no way of knowing whether or not the tags were used properly • But, we can easily check for well-formedness

24. Well-Formedness • XML follows very strict rules • e.g. All tags must be closed • Tags must be properly nested • So we can check to be sure that our XML is “well-formed” • The basic syntax rules for XML can be verified for our document • There are well-formedness checkers online • Your browser will usually also tell you when you’ve got an error

25. Validating other XML Documents • If we have the rules for each tag and its attributes, we can completely validate our XML document • We can validate XHTML because the schema is online • We’ve had to specify where the “rules” for XHTML are in our doctype declaration at the top of the page • If we have a schema for our document, we should be able to validate it. • We can validate SVG and MathML

26. XHTML and HTML • XHTML is an XML schema • Set of XML tags, attributes, and rules • Browsers know how to read this XML schema • Older versions of HTML were not based on XML • Similar to XHTML but less strict • XHTML is identical to HTML 4.01 • HTML 4.01 was last non-XML-based HTML standard developed • Only change between HTML 4.01 and XHTML 1.0 was that the tags and attributes had to conform to XML rules • All tags and attributes are identical

27. XHTML 1.1 • This course covers XHTM 1.0 • But, there is a newer version, XHTML 1.1 • Needs the MIME type application/xhtml+xml • Proper MIME type for XHTML documents • But, some browsers don’t recognize this type (IE especially) • This is why we use .html and not .xhtml for our file extensions • There is no transitional version of XHTML 1.1 • No deprecated tags or attributes • XHTML 1.1 requires the use of the xml:lang attribute instead of the lang attribute we covered earlier • Most browsers again do not support this yet • XHTML 2.0 will be the next standard

28. Questions?