Introduction

This tutorial will show you how to develop a linked data application using Callimachus. You will learn how to navigate the Callimachus user interface . As well, you will learn how to use Callimachus resources to develop an application - how to create them and how they work together. Finally, you will learn how to use three Callamachus templates and the underlying Callimachus template language . This working application can be downloaded as notes.car.

If you have not installed Callimachus yet, please follow the installation instructions in the Getting Started with Callimachus document.

Time Required: About 1 hour

About this tutorial

In this tutorial you will develop an application to help manage meeting notes. Journals are used to store the notes. The notes are identified by the date they were entered combined with the journal they are in.

The notes consist of topics, and topics have a state such as being "open" or "closed" to further discussion.

Part I. Develop the Note class

Overview

In this part you will create a folder to store your application. You will then create a Note class to manage Note resources , and develop three templates to create, view and edit the Notes.

A. Create a root folder for the application

Task

Create a folder for the application.

Instructions

Step Action Notes
1 Using the Callimachus main menu click on the “Home folder” item.
2 Using the create menu click on the folder link. You will be prompted to name the folder.
3 Name the folder. Name it “schema”
4 Press the Create button.

B. Create a Note class

Task

Create a Note class and provide a comment to describe it.

Instructions

Step Action Notes
1 From the folder created previously, such as /schema/ folder.
2 Using the create menu,  click on the Class link. You will be presented with the New Class form.
3 Give the class a Label and Comment.
  • Label: Note   
  • Comment: Used to take notes during or after a meeting.
4 Check the “These resources contain other resources” checkbox. This will allow us to have nested Topics.
5 Press the Create button.

C. Create three templates to manage Notes

Task

Create three initial templates to allow users to create, view and edit Notes.

Instructions

Step Action Notes
1 Navigate to the Note class.
2 Open the Edit tab.
3 Under the Page Templates section, click on each of the three icons and add/save the default template for each. This action does not save the Class resource. Make sure you don't skip Step 4!

Name the corresponding templates as follows:

  • note-create
  • note-view
  • note-edit
4 Click on the Save button to save the class. Result: The Note class will have the three initial templates associated with it.

D.  Modify the Note templates

Task

Modify the three Note templates so that the current date is used as the default title for notes.

Modify the note-create template

Modify the default create template code to specify that Notes are the type of resource being created, and that the current date should be the default title for new notes.

Instructions
Step Action Notes
1 Navigate to the ../schema folder, open the note-create template and then press the Edit tab to edit it.
2 Specify that Notes are the type of resource being created. See code: note-create v1.1
3 Add the namespaces used to identify date values. See code: note-create v1.2
4 Modify the default input field to accept a date value. See code: note-create v1.3
5 Set the value of the date field to the current date. See code: note-create v1.4
6 Save the template to the server.

Modify the note-view template

Modify the default view template code to show the date as the title.

Instructions
Step Action Notes
1 Add the Dublin Core namespace.
2 Modify the default label field to be a date. See code: note-view v1.1
3 Save the template to the server.

Modify the note-edit template

Modify the default edit template code to display the date as the title, and to only allow editing the comment.

Instructions
Step Action Notes
1 Add the Dublin Core namespace. See code: note-edit v1.1
2 Modify the title and h1 elements to display the date of the note. See code: note-edit v1.2
3 Remove the input field since the date should not be displayed. See code: note-edit v1.3
4 Save the template to the server.

Part II. Develop the Journal class

Overview

Here you will develop a Journal class, which is used to contain related Notes.

A. Create the Journal class

Task

Create a Journal class that contains Note resources.

Instructions

Step Action Notes
1 Create a new class in the schema folder.
  • Label: Journal
  • Comment: Collection of meeting notes
2 Check the “These resources contain other resources” checkbox.
3 Save the class.

B. Create the three initial Journal templates

Task

Create three initial templates for managing Journals.

Instructions

Step Action Notes
1 Navigate to the Journal class, then click on the Edit tab.
2 Add each of the three templates for the class.
  • Create template: Change the contents of title and h1 tags to “New Journal”.
  • View and edit templates: No changes required, the default code is okay.
3 Save each template file  Name them journal-create, journal-view and journal-edit.
4 Save the Journal class. Result: The Journal class will be saved with the three required templates associated with it.

C.  Modify the Journal view template

Task

Modify the journal-view template to allow Notes to be created and listed.

Instruction

Step Action Notes
1 Navigate to and edit the journal-view template.
2 Add the dc:terms namespace. See code: journal-view v1.1
3 Create an unordered list to add a link to create a new Note in a Journal. See code: journal-view v1.2
4 Use the dcterms:isPartOf to list links to notes from this Journal. See code: journal-view v1.3
5 Save the template.

D.  Modify the Note create template

Task

Modify the note-create template to make Notes part-of a Journal.

Instructions

Step Action Notes
1 Navigate to and edit the journal-create template.
2 Add a jQuery function to define the isPartOf relationship. See code: note-create v1.5
3 Add the dc:is-part-of relationship to the note-create form. See code: note-create v1.6
4 Save the template.

E. Test the Journal class

Task

Test the Journal class by adding a Note to it.

Instructions

Step Action Notes
1 Create a folder named “resources” in the home folder. The application data is stored in the “resources” folder, separate from the schema folder that stores the application itself.
2 Use the create menu to select the Journal entry
3 Create a new Journal using the create form provided.
  • Label: R&D Journal
  • Save it in the /resources folder.
4 Navigate to the “R&D Journal” you just created in the /resources folder and create a Note in it.
5 Save the note. Notice that you were not prompted to specify a folder to save it in.
6 View the Describe tab. Notice that dcterms:isPartOf relationship is added to the resource.

When creating the Journal resource, be sure to use the create menu "Journal" and not the journal create template link. 


Part III. Develop the Topic class

Overview

In this part you will modify the Note class to make it into a container for Topics.

A. Create a Topic class with its templates

Task

Create a Topic class along with its create, view and edit templates.

Instruction

Step Action Notes
1 Create a Topic class in the /schema/ folder.
  • Label: Topic
  • Comment: Topics discussed in a meeting.
2 Add/save the default templates for creating, viewing and editing Topics. The default templates are fine.
3 Save the Topic class.

B.  Edit the note-edit template to contain Topics

Task

Edit the note-edit template to include Topics as a composite resource.

Instruction

Step Action Notes
1 Navigate to and edit the note-edit template.
2 Create a field for topics. see code: note-edit v1.4
3 Create the URL to create a new topic. see code: note-edit v1.5
4 Save the template.

Part IV. Record the state of a Topic

Overview

In this part you will create Concepts to populate a drop down field and record the state of a Topic.

A. Create concepts to record the state of a Topic

Task

Create three concepts that record the states a Topic may be in.

Instruction

Step Action Notes
1 Create a folder to store the concepts in. Use the folder name /schema/topic-state
2 Create a concept named “new”. Definition: The topic has not yet been discussed.
3 Create a concept named “open”. Definition: The topic is under discussion.
4 Create a concept named “closed”. Definition: The topic requires no further discussion.

B.  Modify the topic-edit template

Task

Modify the topic-edit template to include a relationship to its state, and then test it by changing the state of a Topic.

Instruction

Step Action Notes
1 Open the topic-edit template.
2 Create a new relationship. See code: topic-edit v1.1
3 Add a dropdown field. See code: topic-edit v1.2
4 Save the template.

Test

Test the topic-edit template by changing the state of a Topic.

Step Action Notes
1 Navigate from a Journal to a Note to a Topic.
2 Edit the Topic to set its State.
3 Save the Topic. Result: The Describe tab will now show the relationship from the Topic to the State concept.

C.  Modify the topic-create template

Task

Modify the topic-create template to include a relationship to its state, and then test it by changing the state of a Topic.

Instruction

Step Action Notes
1 Open the topic-create template.
2 Include the namespace for the relationship. See code: topic-create v1.2
3 Add the RDFa markup for the relationship. See code: topic-create v1.3
4 Save the template.

Test

Test the topic-create template by changing the state of a topic.

Step Action Notes
1 Navigate from a Journal to a Note to a Topic.
2 Edit the Topic to set its State.
3 Save the Topic. Result: The Describe tab will now show the relationship from the Topic to the State concept.

D.  Modify the note-view template

Task

In this task you will modify the note-view template to list the topic state.

Instruction

Step Action Notes
1 Open the note-view template.
2 Include the namespace for the relationship. See code: note-view v1.2
3 Include the relationship state in the Topic list. See code: note-view v1.3
4 Display the name of the concept rather than its URL. See code: note-view v1.4
5 Save the template. Congratulations! You have completed your first Callimachus application.

Part V. Conclusion and appendices

Conclusion

Summary of what was learned and concluding remarks go here.

A. Templates by task

The following table contains tasks that involve changes to the templates.

Part Task Related Template Code
A Modify the note-create template
Modify the note-view template
Modify the note-edit template
B Modify the journal-view template
Modify the note-create template
C Edit the note-edit template to contain Topics
D Modify the topic-edit template
Modify the topic-create template
Modify the note-view template

Note: Your file names should not include a version number.


B. Journal-view template code

Overview

Here is the development of the journal-view template from journal-view v1.1 - v1.3.

journal-view v1.1

Description

The dcterms namespace is added.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title resource="?this">{rdfs:label}</title>
    <link rel="edit-form" href="?edit" />
    <link rel="comments" href="?discussion" />
    <link rel="describedby" href="?describe" />
    <link rel="version-history" href="?history" />
</head>
<body resource="?this">
    <h1 property="rdfs:label" />
    <pre class="wiki" property="rdfs:comment" />
</body>
</html>

journal-view v1.2

Description

A link is added to create a new Note in a Journal.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title resource="?this">{rdfs:label}</title>
    <link rel="edit-form" href="?edit" />
    <link rel="comments" href="?discussion" />
    <link rel="describedby" href="?describe" />
    <link rel="version-history" href="?history" />
</head>
<body resource="?this">
    <h1 property="rdfs:label" />
    <ul class="aside">
        <li><a href="?create=/schema/Note">Create a new Note</a></li>
    </ul>
    <pre class="wiki" property="rdfs:comment" />
</body>
</html>

journal-view v1.3

Description

An unordered list is added in order to create new Notes in a Journal.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title resource="?this">{rdfs:label}</title>
    <link rel="edit-form" href="?edit" />
    <link rel="comments" href="?discussion" />
    <link rel="describedby" href="?describe" />
    <link rel="version-history" href="?history" />
</head>
<body resource="?this">
    <h1 property="rdfs:label" />
    <div id="sidebar">
        <aside>
            <p><a href="?create=/schema/Note">Create a new Note</a></p>
        </aside>
    </div>
    <ul rev="dcterms:isPartOf">
        <li about="?note">
            <a href="?note" property="dcterms:date"/>
        </li>
    </ul>
    <pre class="wiki" property="rdfs:comment" />
</body>
</html>

C. Note-create template code

Overview

This shows the development of the note-create template from v1.1 to v1.6.

note-create v1.1

Description

The contents of the <title> and <h1> elements is updated to specify that the resource is a Note.

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>New Note</title>
</head>
<body>
    <h1>New Note</h1>
    <form method="POST" action="" enctype="application/rdf+xml" typeof=""
            onsubmit="return calli.saveResourceAs(event,calli.slugify($('#label').val()))">
        <fieldset>
            <div class="control-group">
                <label for="label" class="control-label">Label</label>
                <div class="controls">
                    <input type="text" id="label" value="{rdfs:label}" class="auto-expand" required="required" autofocus="autofocus" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success">Create</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

note-create v1.2

Description

A namespace is added to identify what a date is (xmlns:dcterms=...).

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title>New Note</title>
</head>
<body>
    <h1>New Note</h1>
    <form method="POST" action="" enctype="application/rdf+xml" typeof=""
            onsubmit="return calli.saveResourceAs(event,calli.slugify($('#label').val()))">
        <fieldset>
            <div class="control-group">
                <label for="label" class="control-label">Label</label>
                <div class="controls">
                    <input type="text" id="label" value="{rdfs:label}" class="auto-expand" required="required" autofocus="autofocus" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success">Create</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

note-create v1.3

Description

The default <input> field is updated to accept a date value.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title>New Note</title>
</head>
<body>
    <h1>New Note</h1>
    <form method="POST" action="" enctype="application/rdf+xml" typeof=""
            onsubmit="return calli.saveResourceAs(event,calli.slugify($('#label').val()))">
        <fieldset>
            <div class="control-group">
                <label for="date" class="control-label">Date</label>
                <div class="controls">
                    <input id="date" type="date" datatype="xsd:date" value="{dcterms:date}" required="required" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success">Create</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

note-create v1.4

Description

The value of the date variable is set to the current date by using a Javascript jQuery function.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title>New Note</title>
    <script type="text/javascript">
    // <![CDATA[
    jQuery(function($){
        $('#date').val(new Date().toISOString().substring(0,10)).change();
    });
    // ]]>
    </script>
</head>
<body>
    <h1>New Note</h1>
    <form method="POST" action="" enctype="application/rdf+xml" typeof=""
            onsubmit="return calli.saveResourceAs(event,calli.slugify($('#label').val()))">
        <fieldset>
            <div class="control-group">
                <label for="date" class="control-label">Date</label>
                <div class="controls">
                    <input id="date" type="date" datatype="xsd:date" value="{dcterms:date}" required="required" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success">Create</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

note-create v1.5

Description

A second jQuery function is added to declare that a Note is in a isPartOf relationship.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title>New Note</title>
    <script type="text/javascript">
    // <![CDATA[
    jQuery(function($){
        $('#date').val(new Date().toISOString().substring(0,10)).change();
        $('#isPartOf').append('<span about="' + location.pathname +'"/>');
    });
    // ]]>
    </script>
</head>
<body>
    <h1>New Note</h1>
    <form method="POST" action="" enctype="application/rdf+xml" typeof=""
            onsubmit="return calli.saveResourceAs(event,calli.slugify($('#label').val()))">
        <fieldset>
            <div class="control-group">
                <label for="date" class="control-label">Date</label>
                <div class="controls">
                    <input id="date" type="date" datatype="xsd:date" value="{dcterms:date}" required="required" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success">Create</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

note-create v1.6

Description

To make a new Note resource part of a Journal resource, the dc:is-part-of relationship is added to the note-create form.

Code
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="/callimachus/manifest?template"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    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:xsd="http://www.w3.org/2001/XMLSchema#">
<head>
    <title>New Note</title>
    <script type="text/javascript">
    // <![CDATA[
    jQuery(function($){
        $('#date').val(new Date().toISOString().substring(0,10)).change();
        $('#isPartOf').append('<span about="' + location.pathname +'"/>');
    });
    // ]]>
    </script>
</head>
<body>
    <h1>New Note</h1>
    <form method="POST" action="" enctype="application/rdf+xml" typeof=""
            onsubmit="return calli.saveResourceAs(event,calli.slugify($('#label').val()))">
        <span id="isPartOf" rel="dcterms:isPartOf">
            <span about="?journal" />
        </span>
        <fieldset>
            <div class="control-group">
                <label for="date" class="control-label">Date</label>
                <div class="controls">
                    <input id="date" type="date" datatype="xsd:date" value="{dcterms:date}" required="required" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success">Create</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

D. Note-edit template code

Overview

This shows the progression of the note-edit template from v1.1 - v1.5.

note-edit v1.1

Description

The Dublin Core namespace is added to identify dates.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title resource="?this">{rdfs:label}</title>
</head>
<body resource="?this">
    <h1 property="rdfs:label" />
    <form method="POST" action="" enctype="application/sparql-update" resource="?this">
        <fieldset>
            <div class="control-group">
                <label for="label" class="control-label">Label</label>
                <div class="controls">
                    <input type="text" id="label" value="{rdfs:label}" class="auto-expand" required="required" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" onclick="window.location.replace('?view')" class="btn">Cancel</button>
                <button type="button" onclick="calli.deleteResource(event)" class="btn btn-danger">Delete</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

note-edit v1.2

Description

The title and h1 elements are modified to display the date of the note.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title resource="?this">{dcterms:date}</title>
</head>
<body resource="?this">
    <h1 property="dcterms:date" />
    <form method="POST" action="" enctype="application/sparql-update" resource="?this">
        <fieldset>
            <div class="control-group">
                <label for="label" class="control-label">Label</label>
                <div class="controls">
                    <input type="text" id="label" value="{rdfs:label}" class="auto-expand" required="required" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" onclick="window.location.replace('?view')" class="btn">Cancel</button>
                <button type="button" onclick="calli.deleteResource(event)" class="btn btn-danger">Delete</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

note-edit v1.3

Description

The input field is removed since the date should not be changed.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title resource="?this">{dcterms:date}</title>
</head>
<body about="?this">
    <h1 property="dcterms:date" />
    <form method="POST" action="" enctype="application/sparql-update" resource="?this">
        <fieldset>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" onclick="window.location.replace('?view')" class="btn">Cancel</button>
                <button type="button" onclick="calli.deleteResource(event)" class="btn btn-danger">Delete</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

note-edit v1.4

Description

A field is created for topics.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title resource="?this">{dcterms:date}</title>
</head>
<body resource="?this">
    <h1 property="dcterms:date" />
    <form method="POST" action="" enctype="application/sparql-update" resource="?this">
        <fieldset>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div dropzone="link string:text/uri-list" class="control-group"
                    ondrop="return calli.insertResource(event)">
                <label for="topic" class="control-label">Topics
                    <a href="Topic" class="ui-icon ui-icon-newwin"
                        onclick="return calli.createResource(this, '?create=' + encodeURIComponent(this.href))" />
                </label>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" onclick="window.location.replace('?view')" class="btn">Cancel</button>
                <button type="button" onclick="calli.deleteResource(event)" class="btn btn-danger">Delete</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

note-edit v1.5

Description

Create the URL to create a new topic.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title resource="?this">{dcterms:date}</title>
</head>
<body resource="?this">
    <h1><time property="dcterms:date" /></h1>
    <form method="POST" action="" enctype="application/sparql-update" resource="?this">
        <fieldset>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div dropzone="link string:text/uri-list" class="control-group"
                    ondrop="return calli.insertResource(event)">
                <label for="topic" class="control-label">Topics
                    <a href="Topic" class="ui-icon ui-icon-newwin"
                        onclick="return calli.createResource(this, '?create=' + encodeURIComponent(this.href))" />
                </label>
                <div id="topic" rel="dcterms:hasPart" class="vbox controls">
                    <span about="?topic" rel="rdf:type" resource="Topic"
                        property="rdfs:label" class="ui-state-highlight" />
                </div>
            </div>
            <div class="form-action">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn" onclick="location.replace('?view')">Cancel</button>
                <button type="button" class="btn-danger" onclick="calli.deleteResource(event)">Delete</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

E. Note-view template code

Overview

This shows the development of the note-view template from v1.1 to v1.4.

note-view v1.1

Description

The Dublin Core namespace is added and the date the note was created is shown in the title and h1 tags.

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:dcterms="http://purl.org/dc/terms/">
<head>
    <title resource="?this">{dcterms:date}</title>
    <link rel="edit-form" href="?edit" />
    <link rel="comments" href="?discussion" />
    <link rel="describedby" href="?describe" />
    <link rel="version-history" href="?history" />
</head>
<body resource="?this">
    <h1 property="dcterms:date" />
    <pre class="wiki" property="rdfs:comment" />
</body>
</html>

note-view v1.2

Description

The skos and meeting namespaces are added.

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:dcterms="http://purl.org/dc/terms/"
    xmlns:skos="http://www.w3.org/2004/02/skos/core#"
    xmlns:meeting="http://localhost:8080/schema/">
<head>
    <title resource="?this">{dcterms:date}</title>
    <link rel="edit-form" href="?edit" />
    <link rel="comments" href="?discussion" />
    <link rel="describedby" href="?describe" />
    <link rel="version-history" href="?history" />
</head>
<body resource="?this">
    <h1 property="dcterms:date" />
    <pre class="wiki" property="rdfs:comment" />
</body>
</html>

note-view v1.3

Description

The relationship state is included in the topic list.

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:dcterms="http://purl.org/dc/terms/"
    xmlns:skos="http://www.w3.org/2004/02/skos/core#"
    xmlns:meeting="http://localhost:8080/schema/">
<head>
    <title resource="?this">{dcterms:date}</title>
    <link rel="edit-form" href="?edit" />
    <link rel="comments" href="?discussion" />
    <link rel="describedby" href="?describe" />
    <link rel="version-history" href="?history" />
</head>
<body resource="?this">
    <h1 property="dcterms:date" />
    <pre class="wiki" property="rdfs:comment" />
    <ul rel="dcterms:hasPart">
        <li about="?topic">
            <a href="?topic">{rdfs:label}</a>
            <span rel="meeting:state">
            </span>
        </li>
    </ul>
</body>
</html>

note-view v1.4

Description

The SKOS definition is used to display the name of the Concept.

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:dcterms="http://purl.org/dc/terms/"
    xmlns:skos="http://www.w3.org/2004/02/skos/core#"
    xmlns:meeting="http://localhost:8080/schema/">
<head>
    <title resource="?this">{dcterms:date}</title>
    <link rel="edit-form" href="?edit" />
    <link rel="comments" href="?discussion" />
    <link rel="describedby" href="?describe" />
    <link rel="version-history" href="?history" />
</head>
<body resource="?this">
    <h1><time property="dcterms:date" /></h1>
    <pre class="wiki" property="rdfs:comment" />
    <ul>
        <li rel="dcterms:hasPart" resource="?topic">
            <a href="?topic">{rdfs:label}</a>
            <span rel="meeting:state" resource="?state">
                [<span title="{skos:definition}">
                    {skos:prefLabel}
                </span>]
            </span>
        </li>
    </ul>
</body>
</html>

F. Topic-create template code

Overview

This shows the development of the topic-create template from v1.1 to v1.3.

topic-create v1.1

Description

The title and h1 tags are updated to name the resource being created - a topic.

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>New Topic</title>
</head>
<body>
    <h1>New Topic</h1>
    <form method="POST" action="" enctype="application/rdf+xml" typeof=""
            onsubmit="return calli.saveResourceAs(event, calli.slugify($('#label').val()))">
        <fieldset>
            <span rel="meeting:state" resource="topic-state/new" />
            <div class="control-group">
                <label for="label" class="control-label">Label</label>
                <div class="controls">
                    <input type="text" id="label" value="{rdfs:label}" class="auto-expand" required="required" autofocus="autofocus" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Create</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

topic-create v1.2

Description

The namespace for the meeting application is added.

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:meeting="http://localhost:8080/schema/">
<head>
    <title>New Topic</title>
</head>
<body>
    <h1>New Topic</h1>
    <form method="POST" action="" enctype="application/rdf+xml" typeof=""
            onsubmit="return calli.saveResourceAs(event, calli.slugify($('#label').val()))">
        <fieldset>
            <div class="control-group">
                <label for="label" class="control-label">Label</label>
                <div class="controls">
                    <input type="text" id="label" value="{rdfs:label}" class="auto-expand" required="required" autofocus="autofocus" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Create</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

topic-create v1.3

Description

The default state for a topic is added.

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:meeting="http://localhost:8080/schema/">
<head>
    <title>New Topic</title>
</head>
<body>
    <h1>New Topic</h1>
    <form method="POST" action="" enctype="application/rdf+xml" typeof=""
            onsubmit="return calli.saveResourceAs(event, calli.slugify($('#label').val()))">
        <fieldset>
            <span rel="meeting:state" resource="topic-state/new" />
            <div class="control-group">
                <label for="label" class="control-label">Label</label>
                <div class="controls">
                    <input type="text" id="label" value="{rdfs:label}" class="auto-expand" required="required" autofocus="autofocus" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Create</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

G. Topic-edit template code

Overview

This shows the development of the topic-edit template from v1.1 to v1.2.

topic-edit v1.1

Description

Use your own relationship namespace term, such as xmlns:meeting.

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">
    <h1 property="rdfs:label" />
    <form method="POST" action="" enctype="application/sparql-update" resource="?this">
        <fieldset>
            <div class="control-group">
                <label for="label" class="control-label">Label</label>
                <div class="controls">
                    <input type="text" id="label" value="{rdfs:label}" class="auto-expand" required="required" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" onclick="window.location.replace('?view')" class="btn">Cancel</button>
                <button type="button" onclick="calli.deleteResource(event)" class="btn btn-danger">Delete</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

topic-edit v1.2

Description

Add a dropdown field to select the state of a topic. It will display the available states by listing all the concepts in the folder created earlier. The relationship for a folder to its members is cali.hasComponent.

Use the reverse relationship cali.hasComponent. Concepts should be displayed using the skos:prefLabel property.

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#"
    xmlns:calli="http://callimachusproject.org/rdf/2009/framework#"
    xmlns:meeting="http://localhost:8080/schema/">
<head>
    <title resource="?this">{rdfs:label}</title>
</head>
<body resource="?this">
    <h1 property="rdfs:label" />
    <form method="POST" action="" enctype="application/sparql-update" resource="?this">
        <fieldset>
            <div class="control-group">
                <label for="label" class="control-label">Label</label>
                <div class="controls">
                    <input type="text" id="label" value="{rdfs:label}" class="auto-expand" required="required" />
                </div>
            </div>
            <div class="control-group">
                <label for="comment" class="control-label">Comment</label>
                <div class="controls">
                    <textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
                </div>
            </div>
            <div class="control-group">
                <label for="state" class="control-label">State</label>
                <div class="controls">
                    <select id="state" rel="meeting:state">
                        <option selected="selected"
                            about="?state" typeof="skos:Concept"
                            rev="calli:hasComponent"
                            resource="topic-state/"
                            property="skos:prefLabel" />
                    </select>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn" onclick="location.replace('?view')">Cancel</button>
                <button type="button" class="btn-danger" onclick="calli.deleteResource(event)">Delete</button>
            </div>
        </fieldset>
    </form>
</body>
</html>

H. Callimachus Support

3 Round Stones offers commercial support and private virtual cloud hosting for enterprises running Callimachus.

Commuity support may be access through our mailing list.