Overview

This shows the development of the note-create template.

note-create v1.1

Description

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

Code

<?xml version="1.0" encoding="UTF-8" ?>
<html version="XHTML+RDFa 1.0" 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/">
<head>
    <title>New Note</title>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>New Note</h1>
        </div>
        <form role="form" method="POST" action="" enctype="text/turtle" resource="" typeof="" class="row"
                onsubmit="calli.submitTurtle(event,calli.slugify($('#label').val()))">
            <fieldset class="col-sm-4">
                <div class="form-group">
                    <label for="label">Label</label>
                    <input type="text" class="form-control" id="label" value="{rdfs:label}" required="required" autofocus="autofocus"
                                onchange="calli.updateProperty(event, 'rdfs:label')" />
                </div>
                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea id="comment" class="form-control"
                        onchange="calli.updateProperty(event, 'rdfs:comment')">{rdfs:comment}</textarea>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-success">Create</button>
                </div>
            </fieldset>
        </form>
    </div>
</body>
</html>

note-create v1.2

Description

The default <input> field is updated to accept a date value and update the onsubmit handler with the new @id of the field.

Code

<?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:dcterms="http://purl.org/dc/terms/">
<head>
    <title>New Note</title>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>New Note</h1>
        </div>
        <form method="POST" action="" enctype="text/turtle" resource="" typeof="" class="row"
                onsubmit="calli.submitTurtle(event, $('#datetime').val().replace(/\W/g,''))">
            <fieldset class="col-sm-4">
                <div class="form-group">
                    <label for="datetime">Date</label>
                    <input id="datetime" type="datetime" datatype="xsd:dateTime" value="{dcterms:date}" required="required" class="form-control"
                        onchange="calli.updateProperty(event, 'dcterms:date')" />
                </div>
                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea id="comment" class="form-control" autofocus="autofocus"
                        onchange="calli.updateProperty(event, 'rdfs:comment')">{rdfs:comment}</textarea>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-success">Create</button>
                </div>
            </fieldset>
        </form>
    </div>
</body>
</html>

note-create v1.3

Description

The value of the date variable is set to the current date by using a Javascript jQuery function and autofocus on the comment field.

Code

<?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:dcterms="http://purl.org/dc/terms/">
<head>
    <title>New Note</title>
    <script type="text/javascript">
    jQuery(function($){
        $('#datetime').val(new Date().toISOString()).change();
    });
    </script>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>New Note</h1>
        </div>
        <form method="POST" action="" enctype="text/turtle" typeof="" resource="" class="row"
                onsubmit="calli.submitTurtle(event, $('#datetime').val().replace(/\W/g,''))">
            <fieldset class="col-sm-4">
                <div class="form-group">
                    <label for="datetime">Date</label>
                    <input id="datetime" type="datetime" datatype="xsd:dateTime" value="{dcterms:date}" required="required" class="form-control"
                        onchange="calli.updateProperty(event, 'dcterms:date')" />
                </div>
                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea id="comment" class="form-control" autofocus="autofocus"
                        onchange="calli.updateProperty(event, 'rdfs:comment')">{rdfs:comment}</textarea>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-success">Create</button>
                </div>
            </fieldset>
        </form>
    </div>
</body>
</html>

note-create v1.4

Description

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

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: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/">
<head>
    <title>New Note</title>
    <script type="text/javascript">
    jQuery(function($){
        $('#datetime').val(new Date().toISOString()).change();
        $('#isPartOf').append($('<span/>').attr('resource', location.pathname));
    });
    </script>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>New Note</h1>
        </div>
        <form method="POST" action="" enctype="text/turtle" resource="" typeof="" class="row"
                onsubmit="calli.submitTurtle(event, $('#datetime').val().replace(/\W/g,''))">
            <fieldset class="col-sm-4">
                <span id="isPartOf" rel="dcterms:isPartOf">
                    <span resource="?journal" />
                </span>
                <div class="form-group">
                    <label for="datetime">Date</label>
                    <input id="datetime" type="datetime" datatype="xsd:dateTime" value="{dcterms:date}" required="required" class="form-control"
                        onchange="calli.updateProperty(event, 'dcterms:date')" />
                </div>
                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea id="comment" class="form-control" autofocus="autofocus"
                        onchange="calli.updateProperty(event, 'rdfs:comment')">{rdfs:comment}</textarea>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-success">Create</button>
                </div>
            </fieldset>
        </form>
    </div>
</body>
</html>