3.3. XML Parsing with Style

Klip Developer Guide

3.3. XML Parsing with Style
Prev	Chapter 3. Building Klips that Monitor XML Source	Next

3.3. XML Parsing with Style

To parse an XML document (i.e. a non-RSS document) and display its contents in the Klip, you add a <style> block in your Klip.

Here is a sample Klip with a <style> block.

<?xml version='1.0' ?>
<klip>
   <identity>
      <title>
         My Second Klip
      </title>
   </identity>

   <locations>
      <contentsource>
         http://support.klipfolio.com/files/demo/demo.xml
      </contentsource>
      <icon>
         http://www.klipfolio.com/static/klips/klipfolio/sample_icon.png
      </icon>
      <banner>
         http://www.klipfolio.com/static/klips/klipfolio/sample_banner.png    
      </banner>
   </locations>

   <setup>
      <refresh>
         30
      </refresh>
   </setup>

   <style>
      alert {
         type: item;
      }

      level {
         itemcol: 1;
         type: image;
      }

      sender {
         itemcol: 2;
      }

      summary {
         itemcol: 3;
      }

      date {
         itemcol: 4;
      }
            
      url {
         type: link;
      }
            
      id {
         key: override;
      }
   </style>
</klip>

As in the previous chapter, copy and paste the above code, then save it as filename second.klip in the myklips folder. The Klip should appears as follows.

Figure 3.1. Your Second Klip

The entries in the <style> block are CSS properties that instruct Klipfolio Dashboard on the following:

Specify the tag for repeating blocks of data
Specify the data to extract into the columns of the Klip
Specify the URL to open when user clicks on an item
Specify which XML tag uniquely identifies an item

Let's walk through the <style> block step by step.

3.3.1. Specify the Tag for Repeating Blocks of Data

The first CSS entry in the <style> block always specifies which tag encloses the repeating blocks of data in the XML.

alert {
      type: item;
}

This tells Klipfolio Dashboard's XML the items of data are enclosed <alert> ... </alert> tags.

3.3.2. Specify the Data to Extract into the Columns of the Klip

The next four CSS entries (the ones with the itemcol property) specify which tags to extract and display in columns.

level {
   itemcol: 1;
   type: image;
}

This tells Klipfolio Dashboard to extract the data enclosed in the <level> tag, place it in the first column (itemcol: 1) in the Klip, and treat the data as a URL to an image (type: image).

The next three entries in style instruct Klipfolio Dashboard to map data enclosed in <sender>, <summary>, and <date> to the second, third, and fourth columns of the Klip, respectively:

sender {
   itemcol: 2;
}

summary {
   itemcol: 3;
}

date {
   itemcol: 4;
}

Since there is no type property for these instructions, Klipfolio Dashboard applies the default type, type: text.

3.3.3. Specify the URL to Open When User Clicks on an Item

The next CSS entry specifies which XML tag contains the URL to open when the user clicks an item.

url {
   type: link;
}

This tells Klipfolio Dashboard the URL to open is enclosed in the <url> tag.

At this point, Klipfolio Dashboard has enough information to parse the data, populate the columns of a Klip, and respond to a user's mouse click.

You may be wondering how Klipfolio Dashboard knows whether an item already exists in the Klip. By default, Klipfolio Dashboard concatenates all the data for an item together. This means that, if two incoming items in the XML differ by even a single character, the user will see two items. The difference might be in a non-visible field, such as the URL, which would cause the user to see two items that look like duplicates in the Klip. This is probably NOT what you want. So, what do you do?

3.3.4. Specify Which XML Tag (or Tags) Uniquely Identifies an Item

The last CSS entry in our example tells Klipfolio Dashboard which XML tag to use as the key field:

id {
   key: override;
}

This tells Klipfolio Dashboard to use the contents of <id> tag as the key field. The value is override because it overrides the default definition, which is to concatenate all fields as the key.

This way, if incoming items have the same characters in the key field, the user would see only the last item in the data parsed with that key instead of duplicates.

Prev	Up	Next
3.2. A Common Pattern in XML Data	Home	3.4. Adding a Tooltip to a Klip