XML + XSL(T) + CSS3 = HTML
Today’s web applications are data driven. The two most common formats for sharing data are JSON and XML. In this article, I will be covering how to convert raw XML into HTML (and CSS) that can be consumed by any browser.
First we need to understand what XML is. Per the Wikipedia page for XML: “Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable.” To translate, XML is way of coding documents that allow the computer to process them, but also makes sense to humans.
While our project will use a custom XML list of fields, there are lots of standardized schemas for different uses. In the library realm that I come from there are many including Dublin Core (simple general object metadata), MODS (bibliographic data), EAD (finding aids), and METS (organizing other metadata records). There are general tech industry standards that use XML including RSS, Atom, SOAP, SVG, and XHTML.
As we will see more later, XML and HTML can look like similar. There are important differences between HTML and XML which are summed up in the picture below.
If you look in the bibliography you will find our project in a Github repository entitled XSLT_Project. The project has 4 files. A readme.md that gives information about the project. An index.html file that is only used to public the project using Github Pages. cdcatalog.xml is our list of xml records. cdcatalog.xsl our stylesheet that transforms the xml and contains our CSS for styling. The CSS could be placed in a different file and linked but I kept it simple for this project.
Here is an example of an XML record that we will be working with during this article.
As you can see XML looks alot like html with the tag structure. To be clear, it is not html and the tag pairs, and they need to come in open and closing pairs, themselves do not have any specific means unlike html tags. The tags are just labels for the data between the tags.
So how do we actually do the conversion? First we need to have an XML file with valid XML. You also need to declare that the file is xml and provide a link to the stylesheet that will transform the XML. We can tell that the data is XML via line 1 in the xml document below:
The stylesheet that is necessary to view XML is referenced on line 2, in the code sample above. Similar to linking in CSS stylesheets you link to the style sheet with href. That’s pretty much it for the XML. Now on to the XSL(T) stylesheet where the magic happens.
The first thing your need to do is create an XSL file. It needs to be the same path/name you used in the href in the XML file above. In our case we will use cdcatalog.xsl. At the top of the file you need three things:
On line 1 we have the XML declaration that all XML documents need. Line 3 has the declaration that this is a stylesheet. You can also use xsl:transform at the beginning of line 3. Line 5 tells the computer where to start processing the XML file. In our case we are starting at root which is the tag pair <catalog> </catalog> which we are using to wrap our list of cd’s as we will see mor of later.
Now we start seeing where the XSL file is creating our actual web page as we have html, head, and style tags. Notice that the id ‘customers’ on the table is what connects the html to the styles. I am not going to go into detail on the CSS here but it is available in the Github repo. You can also put the CSS in a separate file and link it in via the head tag as you normally would.
Now lets run through the body of XSL file. On line 55 you can see that our data is going to be placed in a table. In lines 56–63 we are creating the table column labels.
On line 64 we are doing on first actual calculation/transformation on our data. for-each is going to “loop” over each record at the location of catalog/cd and search each record for an artist field. If that record’s article field equals Bob Dylan it will be blocked. Otherwise the record will be included.
Line 65 and 66 are sorting the results first by country and then by artist.
Line 67 checks the price field in each record and only allow records that have a price less than 10 to be included in the table.
Lines 68–75 represent the rows of data to be included in the table. xsl:value-of select=”fieldName” grabs the text between the fieldName tags in each record and puts in the table to be processed by the rules we set above.
Lines 76–80 close the necessary tags for if, for-each, table, body, and html.
The last part of the XSL file is to close the stylesheet and template tags.
Now that all of this is done, all you need to do is point your web browser to the location of the cdcatalog.xml file and you should have something like the image below in your browser.
We have 20 out of the original 26 records printing due to the remove of artist Bob Dylan and any price over 10.
Congratulations! You have done you first XSL Transform.
Thanks for reading. I hope you found it helpful.
Please check out my LinkedIn if you would like to know more about me.