Now we need to actually use all the data that was made with the create template.  We want to turn our boring view template into a cool-looking Web page.  The following table shows the transformation:

initial app finished app
Initial app - person view Finished app - person view

This process isn't nearly as hard as it might look.  You already have the list of RDF terms that you used in the create template, so you just need to fill them into the HTML of the view template.  The rest is all CSS and Callimachus even helps you with that by including helpful libraries such as Bootstrap and Font Awesome.

If you were developing a Callimachus application from scratch, you might want to look at the RDF generated for a Person instance when developing a view template.  This can be done by selecting the "Describe" tab on an instance.  This tutorial comes with a sample Person called Joe Bloggs in the finished app: The Describe tab view is available here. You can use that information to determine which RDF terms are available for your use.

We can get a good idea of what information is exposed in the finished app's view template by looking at the view of the template itself.  In Callimachus, even templates are rendered using templates.

Finished app - person view template

The photo looks like a broken image because the src attribute of the <img> tag has no value yet.  However, you can see at a glance how most of the layout works.  Font Awesome icons are used to decorate several of the items.  Some items are hyperlinked and will need to have their href attributes completed.

The status indication in the upper right displays the skos:prefLabel term of the chosen concept.  More on this in a while.

Let's start with an easy section: The name, country and description located under the photo.  The before and after views are shown in the table below, along with the HTML to create them:

initial app finished app

<div class="container">
  <hgroup class="page-header">
    <h1 property="rdfs:label" />
  </hgroup>
  <pre class="wiki" property="rdfs:comment" />
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3 text-center">
      <h1>{rdfs:label} <small rel="vcard:hasAddress" resource="?addressTitle">{vcard:country-name}</small></h1>
      <p class="lead">{rdfs:comment}</p>
      <hr/>
    </div>
  </div>
...
</div>
Initial app - person view

Finished app - person name view

Impressive difference, right?  The important bit is to see how two items were put into the <h1> element. The rdfs:label containing the person's name was referenced using an RDFa attribute in the initial app version and switched to using the Callimachus template language's curly bracket syntax in the finished app version.  Also, the country name was added to the <h1> element by using the rel/resource pattern.  The rel ("relationship") attribute walks the graph from the person's URI to their address by following the vcard:hasAddress term.  The address URI is put into the variable called ?addressTitle in case you want to use it in a nested HTML tag such as a <span> or <div>.  When the rel/resource pattern is found, the graph context shifts so that any nested elements now refer to the URI of the address.  So, the vcard:country-name is found relative to the address URI, not the URI of the person.  We can "walk the graph" in the Callimachus template language by using nested <span> or <div> tags to refer to one element after another until we reach the items we want.  The following figure illustrates the process graphically:

Walking the graph

Adding the image is as easy as referring to it and using some Bootstrap CSS:


<div class="col-sm-4 col-sm-offset-4 text-center">
  <img src="{foaf:depiction}" class="img-circle" />
</div>

Now that you know how to walk the graph, getting from the person's URI to the concept that is used for their status and then finding the concept's label shouldn't be hard.  If it is confusing, just go look at the RDF in the Describe tab and follow it through.


<div class="col-sm-1">
  <p class="lead">Currently <span id="status" rel="foaf:status" resource="?status" class="label label-info">{skos:prefLabel}</span></p>
</div>

The color of the status indication is changed with a bit of JavaScript at the top of the template that changes CSS classes:


<script>
    // <![CDATA[
        $(document).ready(function() {
            // Change Bootstrap label based on status
            if ($('#status').text() == "Available") {
                $("#status").attr('class', 'label label-success');
            } else if ($('#status').text() == "Busy") {
                $("#status").attr('class', 'label label-danger');
            } else if ($('#status').text() == "Away") {
                $("#status").attr('class', 'label label-warning');
            }
            
            var profile = $("#foaf-profile").text();
            
        });
    // ]]>
</script>

The items that use Font Awesome icons are easy to mark up.  Just look through the Font Awesome icon list until you find an icon you like and then use the matching class name.  The glyphicon-calendar class is used to show an calendar icon.  Be sure to include the generic glyphicon class, too:


<span class="glyphicon glyphicon-calendar" /> <time class="date" property="foaf:birthday" />

You should be able to complete the view template by using the patterns already described.  If you have any trouble, don't forget to look at the finished app view template.