Updated Jul 09, 2009 by mark.bir...@webBackplane.com
Labels:	Version-0.7, Featured

TutorialIntroduction

A basic introduction to using the Ubiquity RDFa Parser in your web pages

Introduction

Note: The items for sale are no longer on eBay. The code still works, but eBay simply returns an 'item no longer available' message. To experiment, simply substitute values for other eBay items that are for sale.

This tutorial doesn't require a great deal of RDFa knowledge, since much of it is simple cut-and-paste.

We begin with a simple web page into which we'll put some RDFa to indicate an eBay item that is for sale. Then we'll show how to load the RDFa parser so that it can process this information, and use a formatter to act on the data--initially setting a simple CSS class.

Then we'll add more items for sale to the mark-up, before adding a tooltip to the formatter, that will show an eBay icon next to the item for sale, and an eBay widget when the user moves their mouse over the icon.

If you don't want to edit your own copy of the source code as you follow along, there are conveniently placed copies of the full mark-up and working samples, sprinkled through the tutorial.

Preparation

The first thing you'll need is a simple HTML document that contains some RDFa, so create an empty document and paste in the following code (the DOCTYPE entry is for CSS purposes):

<!DOCTYPE XHTML>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>My blog page</title>
  </head>
  <body>
    <p>
      Welcome to my blog. I have lots of things to say, but before I do, let me
      tell you that I have
      <span about="#bike" xmlns:ebay="http://ebay.com/"
        property="ebay:item" content="120245313159"
      >a bike for sale</span>.
    </p>
  </body>
</html>

Loading the Ubiquity RDFa Parser

The next step is to add the script tags that will load the RDFa parser:

<script type="text/javascript" src="http://ubiquity-rdfa.googlecode.com/svn/tags/0.7.2/ubiquity-loader.js" >/**/</script>

Adding a jSPARQL rule

Now we're ready to add a formatting rule. There are many ways to do this, depending on whether the rules are to be shared amongst many pages, and whether the pages and the rules will be in different domains. We're going to start with a simple inline rule that will go in the blog itself.

So paste the following mark-up to the end of your document, just before the closing body tag:

<div
  xmlns:fresnel="http://www.w3.org/2004/09/fresnel#"
  typeof="fresnel:Group"
  style="display: none;"
>
  <div rev="fresnel:group">
    <div typeof="fresnel:Format">
      <div property="fresnel:instanceFormatDomain">
        select: [ "s", "item" ],
        where:
        [
          { pattern: [ "?s", "http://ebay.com/item", "?item" ], setUserData: true }
        ]
      </div>

      <span property="fresnel:resourceStyle" datatype="fresnel:styleClass">ebay-item</span>
    </div>
  </div>
</div>

This rule acts on any data from the document that has a property called http://ebay.com/item. This is the 'long name' of the property that we used earlier when we put in the item value:

<span about="#bike" xmlns:ebay="http://ebay.com/"
 property="ebay:item" content="120245313159"
>a bike for sale</span>.

This rule will therefore match our item for sale, and apply any actions that are specified. In the example we only have one action, which sets the CSS class of the HTML element that contains the match (in this case span) to the value ebay-item.

This means that once our document has finished loading, our item for sale will have a CSS class of ebay-item, so the final step is to add a style element to the head of the document that defines how the ebay-item class should be displayed:

<style type="text/css">
  .ebay-item {
    background-color : yellow;
    color: black;
    border: 1px solid black;
    padding: 2px;
  }
</style>

If you haven't been following along with your own code then you can view the completed code, as well as try the application. (The code has been tested in IE, FF and Safari.)

The display should look something like this:

Adding more items for sale

If all we wanted to do was set the background to yellow on our eBay items, then we probably wouldn't have gone to the trouble of creating a formatter with jSPARQL rules. But formatters give us a lot more power than just setting CSS classes, and also, we can apply them to more complex pieces of mark-up than simple spans with a property.

To really see why formatters are useful, let's add some more eBay items. Paste the following after the text that we have already, but before the formatter, and refresh your browser:

Now I think about it, I've also got
<span about="#boat" xmlns:ebay="http://ebay.com/"
 property="ebay:item" content="170225336431"
>a speedboat</span>
and
<span about="#castle" xmlns:ebay="http://ebay.com/"
 property="ebay:item" content="28022772250"
>a castle for sale</span>.

If you haven't been following along with your own code then you can view the completed code, as well as try the application. (The code has been tested in IE, FF and Safari.)

You should now see that the extra items for sale also have the same ebay-item class as the bike did:

Using templates to add inline text

Now that we've got three eBay items to play with, let's add a little more to our formatter. The first thing we'll do is add a block of mark-up that will get inserted into the document for each matching item. Paste the following mark-up at the end of the format block (the div that has typeof="fresnel:Format"):

<div rel="libxh:tooltip" xmlns:libxh="http://lib-xh.googlecode.com/">
  <div property="libxh:template" datatype="rdf:XMLLiteral">
    <object width="355" height="300">
      <param name="movie" value="http://togo.ebay.com/togo/togo.swf?2008013100" />
      <param name="flashvars" value="base=http://togo.ebay.com/togo/&amp;lang=en-us&amp;mode=normal&amp;itemid=${item.content}&amp;query=track%20bike" />
      <embed src="http://togo.ebay.com/togo/togo.swf?2008013100" type="application/x-shockwave-flash" width="355" height="300"
        flashvars="base=http://togo.ebay.com/togo/&amp;lang=en-us&amp;mode=normal&amp;itemid=${item.content}&amp;query=track%20bike"></embed>
    </object>
  </div>
</div>

The key thing here is that any values marked up like this ${...} will be set from the jSPARQL query. In this example there is only one such value, which is item. To have that value substituted into the template, use ${item.content} .

When you have a number of items this technique will take up a lot of space in the browser, so in the next step we'll turn the widget into a tooltip. In the meantime, if you haven't been following along with your own code then you can view the completed code, as well as try the application. (The code has been tested in IE, FF and Safari.)

The display should look something like this:

Adding a tooltip icon

The final step is to add a reference to an icon to the tooltip template. This is done by modifying the div that has rel="libxh:tooltip"; the change is to insert the following mark-up at the beginning:

<span rel="libxh:icon" resource="http://www.ebay.com/favicon.ico"></span>

When an icon is defined as part of the tooltip, then instead of the template being applied inline as in the previous step, it is used to create a tooltip, which is activated when the user 'hovers' over the icon.

If you haven't been following along with your own code then you can view the completed code, as well as try the application. (The code has been tested in IE, FF and Safari.)

The icons should now be displayed after the name of each item for sale, like this:

When the cursor is moved over any of the icons, the tooltip is displayed, containing the widget: