Network Monitor Web Interface Guidelines

XML Introduction

The following points explain the purpose of XML:

It is important to understand that XML is not a replacement for HTML. The main purpose of HTML is to format the data that is presented through a browser. For displaying data on handheld devices, WML is used. The purpose of XML is not to format the data to be displayed. It's mostly used to store and transfer data and to describe the data. It is device or language independent and can be used for transmitting data to any device. The parser (or the program which is capable of understanding the tags and returning the text in a valid format) on the corresponding device will help in displaying the data in required format.

You can define your own tags in an XML file. The way these tags will be interpreted will depend on the program that reads this XML file. The data embedded within these tags will be used according to logic implemented in the secondary program which is going to get this XML as feed. This point will be more clear when we start explaining you about how to use the parsers in next few pages.

XML Syntax

One of the most important features of an XML file: it is 'well formed'. This means that all tags should have a closing tag. In a HTML file, for some tags like <br> we don't have to specify a closing tag called </br>. Where as in a XML file, it is compulsory to have a closing tag. So we have to declare <br></br>.

Elements and Attributes

Each tag in a XML file can have Elements and Attributes. Here's how a typical tag looks like:

<email 
  to="contact@activexperts.com" 
  from="support@activexperts.com" 
  subject="Introduction to XML">
  </email>

In this sample, email is called an element. This element has three attributes: to, from and subject.

The following rules need to be followed while declaring the XML elements names:

Any name can be used, no words are reserved, but the idea is to make names descriptive. Names with an underscore separator are nice. Examples: <author_name>, <published_date>.

Avoid "-" and "." in names. It could be a mess if your software tried to subtract name from first (author-name) or think that "name" is a property of the object "author" (author.name).

Element names can be as long as you like, but don't exaggerate. Names should be short and simple, like this: <author_name> not like this: <name_of_the_author>. XML documents often have a parallel database, where fieldnames parallel with element names. A good rule is to use the naming rules of your databases. Non-English letters like are perfectly legal in XML element names, but watch out for problems if your software vendor doesn't support it. The ":" should not be used in element names because it is reserved to be used for something called namespaces.

Empty Tags

In cases where you don't have to provide any sub tags, you can close the tag, by providing a "/" to the closing tag. For example, declaring <Text></Text> is the same as declaring <Text />.

Comments in an XML File

Comments in an XML file are declared the same way as comments in an HTML File.

<text>Welcome To XML Tutorial </text>   
<!-- This is a comment -->
<subject />

The XML Prolog

An XML file always starts with a prolog. The minimal prolog contains a declaration that identifies the document as an XML document, like this:

<?xml version="1.0"?>

The declaration may also contain additional information, like this:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>

The XML declaration may contain the following attributes:

Processing Instructions

An XML file can also contain processing instructions that give commands or information to an application that is processing the XML data. Processing instructions have the following format:

<?target instructions?

where the target is the name of the application that is expected to do the processing, and instructions is a string of characters that embodies the information or commands for the application to process.

XSL Introduction

XSL (XML Stylesheet) programming is the next generation of the CSS (Cascading Style Sheet Programming). In CSS, users can use certain style tags which the browsers can understand and are predefined by W3 consortium. XSL takes this one step ahead and users can define any tags in the XML file. XML sheets can help in showing the same data in different formats. For example the same data can be shown to different users with different colors and different fonts as required, based on login or personal preferences.

In the XML file, reference to the style sheet to be used is given using the following syntax:

<?xml-stylesheet href="doc.xsl" type="text/xsl"?

Here we are referring to a style sheet called doc.xsl. If the style sheet exists in the same directory as the XML file, then no extra parameters are required while defining style sheet. If it exists at a different location, then you can declare it as http://www.<your sitelocation.com/styles/doc.xsl

The next parameter indicates that the page to be shown out is a style sheet. For properly viewing the page, in the MIME types definitions under your application server, you need to map an XSL handler to use text/html. For example in Orion Server (http://www.orionserver.com), the servlet which handles XSL requests is com.evermind.servlet.XSLServlet. In the file global-web-application.xml you need to declare the MIME type for XML to be text/html. Here's the syntax for doing this:

<servlet-chaining servlet-name="xsl" mime-type="text/html" />

XSL Syntax

XSL is there to define how the XML file should be converted so that it can seen in the required format in the browser. For example, say in the XML file we declare a tag called   <showbold>This is the heading text</showbold>, and you want to show the text inside these tags in a different font and color. In your XSL file you would declare it as:

<xsl:template match="showbold">
    <b><font color="#FF0000" face="Arial" size="3">
          <xsl:apply-templates/>
       </font>
    </b>
  </xsl:template>

Here. as soon as the tag showbold is encountered in the XML file, the text is automatically replaced with different font size and color in bold. This is just an example. In real time, some tags, will be creating tables and show the data in a well formatted way. Also, note that tag showbold is not part of the standard HTML (here, you defined a 'custom tag').

XSL and Sequences

Sequences are useful when you want to show the same kind of tags, declared multiple times in the XML file in a more suitable format like, using tables. Let's consider the following sample XML file:

  <?xml version="1.0" encoding="ISO8859-1" ?> 
  <?xml-stylesheet type="text/xsl" href="Library_Catalog.xsl"?>

  <library> 
    <book> 
      <title>MSDA for dummies</title> 
      <author>John Doe</author>
      <publisher>JD Press</publisher>
    </book> 
    .... 
    ....

The above XML file has a parent tag called library, which has lots of sub tags called book. Now while displaying this XML file, let's say we want to display it in the form of a table: Here's how we will be generating a sequence in the XSL file:

<?xml version='1.0'?>
  <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
  <xsl:template match="/">
    <html>
    <body>
      <table border="2" bgcolor="blue">
        <tr>
          <th>Title</th>
          <th>Author</th>
        <th>Publisher</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="publisher"/></td>
        </tr>
        </xsl:for-each>
      </table>
    </body>
    </html>
  </xsl:template>
  </xsl:stylesheet>

As you can see in the above example, we consider each book tag under main tag library, and in the sequence we display the list of all books. The main difference is made by tag "xsl:for-each" which helps in iterating through all the book tags.

Also note that when we say xsl:value-of select="publisher", it retrieves the value given inside the tags publisher within the current tag book.

Sorting the results using XSL File

In the previous example, results were displayed linearly one book after another in the order they were declared in the XML file. Now we want these books to be displayed sorted by the authors name. Here's one of the best advantages that XML and XSL provide. When user wants to view data sorted by a different field, the we don't need to make a request again to the database. The same XML file can be used sorted by a different field.

Here's the syntax for sorting the data, considering the same XML file which has the list of all books declared in the previous page:

<?xml version='1.0'?>
  <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
  <xsl:template match="/">
    <html>
    <body>
      <table border="2" bgcolor="blue">
        <tr>
          <th>Title</th>
          <th>Author</th>
    <th>Publisher</th>
        </tr>
        <xsl:for-each select="library/book" order-by="+ author">
        <tr>
          <td><xsl:value-of select="title"/></td>
          <td><xsl:value-of select="author"/></td>
    <td><xsl:value-of select="publisher"/></td>
        </tr>
        </xsl:for-each>
      </table>
    </body>
    </html>
  </xsl:template>
  </xsl:stylesheet>

Note that we have added a new parameter called order-by="+ author". The "+" symbol indicates order in ascending order. For descending order, use the "-" sign. Here we asked the XSL file to sort the list of books based on authors name. So finally in the output HTML files, all the books will be shown in the table format, with books sorted by authors name.

If the sort parameter is a number, you can also you the <xsl:sort /> tag for specifying the sorting order. Here's the syntax for using the sort tag:

  ...
  <xsl:for-each select="LIBRARY/BOOK">
    <xsl:sort select="price"
             data-type="number"
             order="descending"/> 
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="author"/></td>
      <td><xsl:value-of select="publisher"/></td>
    </tr>
  </xsl:for-each>
  ...

In the above XSL file, the xsl:sort parameter acts a extra parameter to the xsl:for-each tag and helps in sorting the data.

Filtering the results using XSL file

In the above section we have seen how to sort by authors name. Now what if the next request from the user was to view books only by a particular author. Here's another place where XSL helps in avoiding another database request. Considering the same XML file which has the list of books as given in the previous page, here we will declare a XSL file, which will return alist of books written by a particular author.

<?xml version='1.0'?>
  <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
  <xsl:template match="/">
    <html>
    <body>
      <table border="2" bgcolor="blue">
        <tr>
          <th>Title</th>
          <th>Author</th>
        <th>Publisher</th>
        </tr>
        <xsl:for-each select="library/book[author='John Doe']">
        <tr>
        <td><xsl:value-of select="title"/></td>
        <td><xsl:value-of select="author"/></td>
      <td><xsl:value-of select="publisher"/></td>
        </tr>
        </xsl:for-each>
      </table>
    </body>
    </html>
  </xsl:template>
  </xsl:stylesheet>

Other valid filter operators are:

Highlighting the Results

Suppose we want to highlight the title of the book if the price of the book is less than 20 dollars. You can use the following syntax:

  ...
 <xsl:for-each select="library/book[author='John Doe']">
  <tr>

    <td>
      <xsl:if test="price < 20">
        <xsl:attribute name="style">
            <xsl:text>color:green</xsl:text>
        </xsl:attribute>
      </xsl:if> 
      
      <xsl:value-of select="author"/>
     </td>
      <td><xsl:value-of select="title"/></td>

      <td><xsl:value-of select="publisher"/></td>

    </tr>
  </xsl:for-each>
  ....

If the price of the book is less than 20 dollars, we are displaying the title of the book in green. We have introduced a new tag called xsl:if which helps in evaluating the results.

Showing results conditionally

Here's the syntax for writing traditional if-then-else statements using XSL. Here we are using the match command which does string comparison. Here's the example XSL file, which displays the color of the row in the table in a different color if the author name matches with the pre-defined condition:

...
  <xsl:for-each select="library/book">
  <tr>
    <td>
      <xsl:value-of select="title"/>
    </td> 
    <xsl:choose> 
      <xsl:when match=".[artist='John Doe']"> 
      <td bgcolor="#00ffcc">
        <xsl:value-of select="artist"/>
      </td>
    </xsl:when>
    <xsl:otherwise>
      <td>
        <xsl:value-of select="artist"/>
      </td> 
    </xsl:otherwise>
    </xsl:choose>
  </tr>
  </xsl:for-each>
  ...

In the above XSL file, if the author name matches "John Doe" then the row is displayed in a different color. Otherwise it is displayed with the default color.