Discuss how XSL can be used to generate XHTML, with examples
XSL (Extensible Style Sheet Language) which was designed specifically for XML defines and the transformation and presentation rules of an XML document. Although it is quite similar to CSS, XSL is superior in manipulating the structure in XML documents.
XSLT, XSL-FO and XPATH all make part of XSL. XSLT is the only components that is supported by modern browsers and allows the transformation of XML documents using style sheet code from language to another.
XSL-FO stands for “Extensible Style sheet Language Formatting Objects” and is primarily a W3C recommendation language for formatting XML data. W3C states that XSL-FO is now formally named XSL. This language is also suitable for formatting XML documents, not only for the screen but also for printing. Notably XSL-FO is also suitable for converting XML documents into a Adobe PDFs (Portable Document Format).
XPath, which is a major element of XSLT is and a W3C recommendation, is an expression language that is used to navigate through parts of an XML document. It basically encompasses syntax that can be used to define parts of an XML document and includes path expressions that are used to navigate through an XML document.
HTML (Hyper Text Markup Language) is not a XML based language therefore does not meet the standards of XML. It is widely used today in web design. To adhere to XML standards, another version of HTML was introduced called XHTML. To work effectively with XML data one must have a means to transform the data into XHTML which is after all the outcome that the browser will parse through and interpret. This transformation can be done through XSLT.
The example below shows how an XSL stylesheet is created for an XML document.
The XML Document :
<?xml version="1.0" encoding="ISO-8859-1"?><library><book><title>Cloud Computing a practical approach</title><author>Author 1</author><country>USA</country></book><book><title>Cloud Computing Data Center</title><author>Author 2</author><country>UK</country></book><book><title>Cloud Computing for dummies</title><author>Author 3</author><country>CANADA</country></book></library>
And here is the XSLT Stylesheet :
<?xml version="1.0" encoding="ISO-8859-1"?><!-- Edited by XMLSpy® --><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/"><html><body><h2>My Cloud Computing Library</h2><table border="1"><tr bgcolor="#9acd32"><th>Title</th><th>Author</th><th>Country</th></tr><xsl:for-each select="library/book"><tr><td><xsl:value-of select="title"/></td><td><xsl:value-of select="author"/></td><td><xsl:value-of select="country"/></td></tr></xsl:for-each></table></body></html></xsl:template></xsl:stylesheet>
In fact, at the example above shows, XSLT is more than just styling in the sense that we usually consider styling for CSS. XSLT is actually building the content from the XML data. It even includes looping through the XML elements which is something which cannot be done through CSS.
How can XML be styled using CSS? What are the strengths and weaknesses of using CSS? Give example to illustrate your answers.
CSS which is widely used in web design to style HTML can also be used to style XML although it is not the preferred way to style. The advantage of CSS over XSLT is its wide acceptance and compatibility with popular browsers. CSS does however had an inherent weakness in that it can be used only to display and style the content and lacks that control features such as looping that are standard in XSLT. CSS does not transform and process the XML data but simply lists it with the style and positioning outlined in the CSS stylesheet.
The CSS styling rules are usually contained in textfiles that have the .css file extension and are stored separately. The CSS file to be used has to be referenced in the XML document just like is done in web design when using CSS with HTML.
The example below shows how XML can be styled using CSS.
The XML file :
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="css.css"?>
<library>
<book>
<title>Cloud Computing a practical approach</title>
<author>Author 1</author>
<country>USA</country>
</book>
<book>
<title>Cloud Computing Data Center</title>
<author>Author 2</author>
<country>UK</country>
</book>
<book>
<title>Cloud Computing for dummies</title>
<author>Author 3</author>
<country>CANADA</country>
</book>
</library>
The CSS Stylesheet :
library{background-color: #ffffff;width: 500px;;border: 1px solid black;}book{display: block;margin-left: 0;border-top: 1px solid gray;background-color: #eee;padding: 10px;}title{color: #FF0000;font-size: 20pt;}author{color: #0000FF;font-size: 20pt;}
And finally the output:
The strengths of CSS
CSS is a very powerful sytling language which is in widespread use today and is supported by most browsers. CSS code is inherently simple to follow and understand and the learning curve is shallow. Perhaps CSS’s biggest advantage is the ability to allow the same code to be used repeatedly throughout a web project. Besides shortening the code considerably, this technique also allows for homogeneity throughout the project.
The Weaknesses of CSS
CSS is primarily weak in the support of printing of documents that are styled with it. This is because of the way how CSS deals with positioning and how it is aimed at mainly positioning things on the screen and not on paper. CSS also lacks any support for mathematical calculations so without the use of other languages such as PHP CSS would have to be taken “as-is” and would only be modifiable through actually typing in the changes and not on the fly.
Another weakness is the ease with which CSS can be overridden by hackers and how this would affect the output of the data being displayed without the developer having any control over the changes.
How can XML be styled using XSLT style sheets? What are the strengths and weaknesses of using XSLT style sheets? Give example to illustrate your answers.
Styling involves the transforming and formatting of the information to produce a readable result that contains the styling rules that the author designed. W3C has two recommendations to make styling of XML possible, namely XSL Transformations or XSLT and XSL. XSLT allows for the reorganization of information while XSL specifies formatting details which are then used in rendering. Using XSL and XSLT together does not only produced a styled document but also a result tree that can be expanded, modified, and rearranged.
The example below shows the transformation of an XML file into styled output :
The XML File :
<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/xsl" href="test.xsl"?><library><book><title>Cloud Computing a practical approach</title><author>Author 1</author><country>USA</country></book><book><title>Cloud Computing Data Center</title><author>Author 2</author><country>UK</country></book><book><title>Cloud Computing for dummies</title><author>Author 3</author><country>CANADA</country></book></library>
Note that in the XML file above, the second line is referencing a style sheet called test.xsl. This is similar to the way that CSS stylesheets can be referenced inside an XML document.
The listing below is for the XSLT file that is going to transform and style the XML above :
<?xml version="1.0" encoding="ISO-8859-1"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/"><html><body><h1>My Cloud computing Books</h1><table border="1"><tr bgcolor="#9acd32"><th>Title</th><th>Author</th><th>Country</th></tr><xsl:for-each select="library/book"><tr><td><xsl:value-of select="title"/></td><td><xsl:value-of select="author"/></td><td><xsl:value-of select="country"/></td></tr></xsl:for-each></table></body></html></xsl:template></xsl:stylesheet>
It is important to note in the example above the use of the “for-each” loop which is transforming the data by reading through the XML tree. This is something that is not possible with other styling languages like CSS for example. The “<xsl:template match="/">” line is included to indicate that the transformation should start at the root node of the XML document. The fact that XSLT not only styles but also transforms the document is perhaps its most notable advantage, however, it does lack the ability for full styling and a combination of XSLT and CSS would have to be used to avoid using deprecated HTML tags.
Finally the output will look like this :
To style the green header the XSLT code is using deprecated styling techniques and for this reason CSS can be used to style the tables in this example. This would involve including a CSS declaration in the XSLT stylesheet so that the browser will know where to get the CSS code from.
The stylesheet now look like :
<?xml version="1.0" encoding="ISO-8859-1"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/"><html><head><link rel="stylesheet" type="text/css" href="css1.css"/></head><body><h1>My Cloud computing Books</h1><table border="1"><tr class="green"><th>Title</th><th>Author</th><th>Country</th></tr><xsl:for-each select="library/book"><tr><td><xsl:value-of select="title"/></td><td><xsl:value-of select="author"/></td><td><xsl:value-of select="country"/></td></tr></xsl:for-each></table></body></html></xsl:template></xsl:stylesheet>
Note that the “bgcolor” has now been replaced with a CSS class. And finally here is the CSS code being used in “css1.css” file :
.green {background-color: #9acd32;}
XSLT or “eXtensible Markup Language Transformation” is used to transform XML documents into HTML based document which is ultimately what all browsers expect, and understand. Once a document is converted to HTML CSS can be used to style it as well as at the same time using XSLT to transform it. Please look at the last paragraphs in the previous entry of this post for an example. It is important to consider that XML is incomprehensible to the browser as-is and must first be transformed to be rendered correctly. This is done through XSLT. Further styling in terms of graphical style and colouring is then done through CSS by incorporating external (or internal) CSS stylesheets.
XSLT allows the developer to perform transformations and processing of the XML data file. Loops are for example supported which will iterate through the XML data and display the contents as specified by the code of the XSLT file. At the same time, XPATH, one of the components of XSLT, is used to create logical paths in the XML document during processing. XPATH effectively assists XSLT to define source documents, which match against templates that are predefined. Transformation will occur when there is matching documents between the defined source document and a template.
In XSLT the <xsl:sort> is used to sort the data in an XML file and return sorted output. The following code snippet shows the code being applied in practice. This is taken from an example at W3C.
<xsl:for-each select="catalog/cd"><xsl:sort select="artist"/><tr><td><xsl:value-of select="title"/></td><td><xsl:value-of select="artist"/></td></tr></xsl:for-each>
Discuss the notion of Xlink. What is its purpose and how do you use it? Give example to illustrate your answers.
XLink is primarily a W3C recommendation XML Linking Language that is used for creating hyperlinks in an XML document in a similar way as they are created in traditional HTML documents. Xlink, however offers several advantages in creating hyperlinks over HTML. Typically, any element in an XML document can be used as and behaves as an XLink element. Xlink also supports using extended links which are used to link multiple documents together. As Xlink can treat any element as if it were a hyperlink, the linked files themselves need not contain the link which adds great flexibility.
The example below taken from a W3C tutorial shows XLink in action in a typical XML file. The second line is declaring the XLink Namespace which means that it is going to be needed to render this document. The “ xlink:type="simple"” is specifying that a simple link like those used in HTML is required. As stated previously, “multidirectional” links are also supported.
The syntax of xlink:href=http://book.com/images/HPotter.gif xlink:show="new"> includes the link where the URL is located and also if it is to open in a new browser window, again, similar to HTML.
<?xml version="1.0" encoding="ISO-8859-1"?>
<bookstore xmlns:xlink="http://www.w3.org/1999/xlink">
<book title="Harry Potter">
<description
xlink:type="simple"
xlink:href="http://book.com/images/HPotter.gif"
xlink:show="new">
As his fifth year at Hogwarts School of Witchcraft and
Wizardry approaches, 15-year-old Harry Potter is.......
</description>
</book>
</bookstore>
