How it works...

Let's look at these steps now:

  1. The first button generates the XML representation of the data in our matrix. We've used some car information as sample data.
Note that the prices of the cars are not real.

  1. To create an XML attribute, there are three fundamental TXMLDocument methods:
    • XMLNode := XMLDocument1.CreateNode('node');
    • XMLNode.AddChild('childnode');
    • XMLNode.Attributes['attrname'] := 'attrvalue';

There are other very useful methods, but these are the basics of XML generation.

  1. The btnModifyXML button loads the XML into the memo and appends some other data (another car) to the list. Then, it updates the memo with the new updated XML. These are the most important lines to note:
//Create a node without adding it to the DOM 
Car := XMLDocument1.CreateNode('car'); 
 
//fill Car XMLNode... and finally add it to the DOM 
//as child of the root node 
XMLDocument1.DocumentElement.ChildNodes.Add(Car);
  1. The code under the btnParseXMLClick event handler allows us to read the display as normal text as the XML data navigating through XML tree.
  2. The code under the btnTransformXMLClick event handler uses the XSLT transformation in cars.xslt and the data in cars.xml to generate a brand new HTML page. The XSLT code is as follows:
<?xml version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet version="1.0"   
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    <xsl:output method="html" version="5.0" 
       encoding="UTF-8" indent="yes"/> 
  <xsl:template match="cars"> 
    <html> 
      <head> 
        <link href="https://maxcdn.bootstrapcdn.com/
           bootstrap/3.3.4/css/bootstrap.min.css" 
           rel="stylesheet"/> 
        <title> 
          Sport Cars 
        </title> 
      </head> 
      <body> 
        <div class="container"> 
        <div class="row"> 
        <h1>Sport Cars</h1> 
          <table class="table table-striped table-hover"> 
            <thead> 
              <tr> 
                <th>Model</th> 
                <th>Manufacturer</th> 
                <th class="text-right">Price</th> 
              </tr> 
            </thead> 
            <tbody> 
              <xsl:for-each select="car"> 
              <tr> 
                <td> 
                  <xsl:value-of select="name"/> 
                </td> 
                <td> 
                  <xsl:value-of select="manufacturer"/> 
                </td> 
                <td class="text-right"> 
                  <span class="glyphicon glyphicon-euro"> 
                  </span> 
                  <xsl:value-of select="price"/> 
                </td> 
              </tr> 
            </xsl:for-each> 
          </tbody> 
        </table> 
      </div> 
      </div> 
    </body> 
  </html> 
</xsl:template> 
</xsl:stylesheet>
上一章目录下一章