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. Increase the width of the column, since it will be opened in a dialogue. Copy suggested label from URL fragment to pre-populate label 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 Topic</title>
    <script type="text/javascript">
        jQuery(function($){
            $('#label').val(decodeURIComponent(window.location.hash.substring(1))).change();
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>New Topic</h1>
        </div>
        <form method="POST" action="" enctype="text/turtle" resource="" typeof="" class="row"
                onsubmit="calli.submitTurtle(event, calli.slugify($('#label').val()))">
            <fieldset class="col-sm-6">
                <div class="form-group">
                    <label for="label">Label</label>
                    <input type="text" id="label" value="{rdfs:label}" class="form-control" 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-primary">Add</button>
                </div>
            </fieldset>
        </form>
    </div>
</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: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:meeting="http://localhost:8080/schema/">
<head>
    <title>New Topic</title>
    <script type="text/javascript">
        jQuery(function($){
            $('#label').val(decodeURIComponent(window.location.hash.substring(1))).change();
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>New Topic</h1>
        </div>
        <form method="POST" action="" enctype="text/turtle" resource="" typeof="" class="row"
                onsubmit="calli.submitTurtle(event, calli.slugify($('#label').val()))">
            <fieldset class="col-sm-6">
                <div class="form-group">
                    <label for="label">Label</label>
                    <input type="text" id="label" value="{rdfs:label}" class="form-control" 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-primary">Add</button>
                </div>
            </fieldset>
        </form>
    </div>
</body>
</html>

topic-create v1.3

Description

The default state for a topic is added using a span with @rel="meeting:state"

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/"
    xmlns:meeting="http://localhost:8080/schema/">
<head>
    <title>New Topic</title>
    <script type="text/javascript">
        jQuery(function($){
            $('#label').val(decodeURIComponent(window.location.hash.substring(1))).change();
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>New Topic</h1>
        </div>
        <form method="POST" action="" enctype="text/turtle" resource="" typeof="" class="row"
                onsubmit="calli.submitTurtle(event, calli.slugify($('#label').val()))">
            <fieldset class="col-sm-6">
                <span rel="meeting:state" resource="topic-state/new" />
                <div class="form-group">
                    <label for="label">Label</label>
                    <input type="text" id="label" value="{rdfs:label}" class="form-control" 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-primary">Add</button>
                </div>
            </fieldset>
        </form>
    </div>
</body>
</html>