This describes four ways of formatting data in View templates:

Property List

Intent

Display multivalued property values in a meaningful way.

Motivation

Non-functional datatype property have unordered set of values that need to be shown in a organized view.

Applicability

This pattern applies when a property may have zero or more values and is non-functional.

Implementation

Properties can be shown in a view template vertically, in a list, or horizontally.

Sample Code

To list property values vertically use a div.


<?xml version="1.0" encoding="UTF-8" ?>
<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:skos="http://www.w3.org/2004/02/skos/core#">
<head>
   <title resource="?this">{rdfs:label}</title>
</head>
<body resource="?this">
   <div class="container">
     <h1 property="rdfs:label" />

     <div property="skos:altLabel" />
   </div>
</body>
</html>

To list property values in an unordered list use ul/li tags.


<?xml version="1.0" encoding="UTF-8" ?>
<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:skos="http://www.w3.org/2004/02/skos/core#">
<head>
   <title resource="?this">{rdfs:label}</title>
</head>
<body resource="?this">
   <div class="container">
     <h1 property="rdfs:label" />

     <ul>
       <li property="skos:altLabel" />
     </ul>
   </div>
</body>
</html>

To list all property values horizontally use span tags.


<?xml version="1.0" encoding="UTF-8" ?>
<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:skos="http://www.w3.org/2004/02/skos/core#">
<head>
   <title resource="?this">{rdfs:label}</title>
</head>
<body resource="?this">
   <div class="container">
     <h1 property="rdfs:label" />

     <span property="skos:altLabel" />
   </div>
</body>
</html>

Relationship List

Intent

Display multivalued object relationships in a meaningful way.

Motivation

Non-functional object relationships have unordered set of objects that need to be shown in a organized view.

Applicability

When a relationship may have zero or more values and is non-functional.

Implementation

Object links can be shown in a view template vertically, in a list, or horizontally. A link with an href attribute can be used to link the object in an HTML view page.

Sample Code

Relationships can also be listed vertically using divs.


<?xml version="1.0" encoding="UTF-8" ?>
<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:skos="http://www.w3.org/2004/02/skos/core#">
<head>
   <title resource="?this">{rdfs:label}</title>
</head>
<body resource="?this">
   <div class="container">
      <h1 property="rdfs:label" />

      <div rel="skos:topConcept" resource="?concept">
         <a href="?concept" property="skos:prefLabel" />
      </div>
   </div>
</body>
</html>

To list relationship objects in an unordered list use ul/li tags.


<?xml version="1.0" encoding="UTF-8" ?>
<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:skos="http://www.w3.org/2004/02/skos/core#">
<head>
   <title resource="?this">{rdfs:label}</title>
</head>
<body resource="?this">
   <div class="container">
     <h1 property="rdfs:label" />

     <ul>
       <li rel="skos:topConcept" resource="?concept">
         <a href="?concept" property="skos:prefLabel" />
       </li>
     </ul>
   </div>
</body>
</html>

Relationships can be listed horizontally (like properties above) using a span tag.


<?xml version="1.0" encoding="UTF-8" ?>
<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:skos="http://www.w3.org/2004/02/skos/core#">
<head>
    <title resource="?this">{rdfs:label}</title>
</head>
<body resource="?this">
   <div class="container">
       <h1 property="rdfs:label" />

       <span rel="skos:topConcept" resource="?concept">
           <a href="?concept" property="skos:altLabel" />
       </span>
   </div>
</body>
</html>

Sorted View

Intent

To display resources sorted by one or more properties

Motivation

Many resources need to be presented in a specific order:- Alphabetic order; date order; or in order of priority.

Applicability

Use this pattern where resources contain one or more properties that may be used to determine the order of presentation.

Implementation

This implementation uses the skos:member property to define the relationship between the subject, ?this, and it's ?members. The members are sorted in ascending order of their labels. The calli.compareElementsBy is used to sort the rows by their label in the a element.

Sample Code


<?xml version="1.0" encoding="UTF-8" ?>
<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:skos="http://www.w3.org/2004/02/skos/core#">
<head><title>Sorted View</title></head>
<body resource="?this">
   <div class="container">
      <table id="table" class="table">
         <tbody>
            <tr rel="skos:member" resource="?member">
               <td><a href="?member" property="rdfs:label" /></td>
            </tr>
         </tbody>
      </table>
      <script type="text/javascript">
          $('#table tbody tr').sort(calli.compareElementsBy('a')).appendTo('#table tbody');
      </script>
   </div>
</body>
</html>

Wiki Text

Intent

To display text property values using simple markup.

Motivation

Provide simple markup for text that can be easily read without prior knowledge of the markup syntax.

Applicability

Used for properties that may benefit from markup, but the markup will only be used in some of the property values.

Implementation

Display the property value in a pre tag with a CSS class of wiki. Callimachus will format the element using the Creole syntax on page load.

Sample Code


<?xml version="1.0" encoding="UTF-8" ?>
<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#">
<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">
       $('pre[property="rdfs:comment"]').replaceWith(calli.parseCreole);
     </script>

   </div>
</body>
</html>