Overview

Here we will explore four patterns that can help visualize data using View templates:

Class Instance View

Intent

This is the simplest kind of view where we wish to display the properties of a resource, an instance of known class. The resource is represented in an RDF structure.

Motivation

To present a customised view of a resource based on a known class. The view template of the class includes properties that we would expect to see in the view page of the resource.

Applicability

Consider using this pattern where the resource is represented as RDF metadata with literal and object properties. The structure may be browsed using the Callimachus triple browser, but it is more convenient to present the user with a customised view based on the class.

Implementation

Create a Callimachus Class that is either linked from the resource through an rdf:type relationship or create the Class as an equivalent of a owl:Class linked from the resource through an rdf:type relationship.

The class instance is the task resource denoted by ?this in both the title and the body with the template. For this example, we assume that the resource has both literal (rdfs:comment) and object properties; object properties may be displayed inline, nested within the current page, or they may translate into links to other view pages. Examples of each are shown below. Additionally, Callimachus provide formatting functions, such as the pre-formatted comment field may contain Creole wiki markup.

Sample Code

The RDFa template my-class.xhtml contains the following XHTML code. We assume the primary class instance has rdfs:label, rdfs:comment, and dcterms:created; it has two object properties dcterms:hasPart and dcterms:relation; the object of each has an rdfs:label.

The function calli.parseCreole is used to formatted the wiki text and calli.parseDateTime is used to parse the datetime into a Date object for formatting.

<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xi="http://www.w3.org/2001/XInclude"
   xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
   xmlns:dcterms="http://purl.org/dc/terms/"
   xmlns:dbpedia-owl="http://dbpedia.org/ontology/">
<head>
   <title resource="?this">{rdfs:label}</title>
</head>
<body resource="?this">
   <div class="container">
     <h1 property="rdfs:label" />

     <pre property="rdfs:comment" />
     <script type="text/javascript">
       $('p[property="rdfs:comment"]').replaceWith(calli.parseCreole);
    </script>

    <p>Created on <time id="created" datetime="{dcterms:created}" />.</p>
    <script type="text/javascript">
      $('#created').text(calli.parseDateTime("{dcterms:created}").toLocaleString());
    </script>

    <ul>
       <!-- inline object relationship -->
       <li rel="dcterms:hasPart" resource="?part">
          <span property="rdfs:label" />
       </li>
    </ul>

     <!-- out-of-line, hyper-linked relationship -->
     <div rel="dcterms:relation" resource="?resource2">
        <a href="?resource2" property="rdfs:label" />
     </div>

     <!-- out-of-line, reverse hyper-linked relationship -->
     <div rev="dcterms:relation" resource="?resource3">
        <a href="?resource3" property="rdfs:label" />
     </div>

     <!-- use of a property in an image tag -->
     <div rel="dbpedia-owl:thumbnail" resource="?thumbnail">
       <img src="?thumbnail" style="border:1px solid black;" align="left" hspace="10" vspace="10" />
     </div>
   </div>
</body>
</html>

Class Membership View

Intent

To list members of a class, rather than a specific instance.

Motivation

In many applications we need to view a set of resources in order to select the specific resource we are interested in.

Applicability

Use this pattern where members of a class are to be displayed. Where membership is conditional it is possible to test for the existence of a property/value, but not for more complex filters.

Implementation

Rather than using a class view template to display a single resource, you must use a query view template to display a set of resources.

Sample Code

# my-class-membership.rq
#
# @view my-class-membership.xhtml
#
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX eg: <http://example.com#>
SELECT ?member {
    ?member a eg:MyClass
}

The Named Query references a view template: my-class-membership.xhtml. The div element has no enclosing context so establishes a new subject of the indicated type. Consequently, the div is repeated for every member of MyClass. The link to my-class-membership.rq?results (the above named query) may be included in a menu or anywhere else a link may appear.

The file my-class-membership.xhtml contains a simple RDFa template that renders all members of MyClass and provides a link to each member.

<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
   xmlns:eg="http://example.com#">
<head><title>Class Membership</title></head>
<body>
   <div class="container">
        <div resource="?member">
          <a href="?member" property="rdfs:label"></a>
        </div>
   </div>
</body>
</html>