Overview

In this part we will explore patterns for handling the following kinds of user input:

Single Text Input

Intent

To allow the user to input at most one value for a property.

Motivation

Restricting the number of property values the form can be more effective, reduce complexity and reduce user distractions.

Applicability

Use for functional property values.

Implementation

Assign the value a property expression, and include a datatype attribute if needed. The onchange attribute will ensure the RDFa attributes are setup correctly before the form is parsed. The CURIE in the expression must match the CURIE passed to the calli.updateProperty function.

Sample Code


<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
   xmlns:foaf="http://xmlns.com/foaf/0.1/"
   xmlns:dcterms="http://purl.org/dc/terms/"
   xmlns:xsd="http://www.w3.org/2001/XMLSchema#">
  <head><title resource="?this">{foaf:name}</title></head>
  <body resource="?this" onload="comparison=calli.copyResourceData('#form')">
    <div class="container"
      <form id="form" method="POST" action="" enctype="application/sparql-update" resource="?this" typeof="foaf:Person" class="row"
            onsubmit="calli.submitUpdate(comparison,event)">
         <fieldset class="col-sm-4">
            <div class="form-group">
               <label for="name">Name</label>
               <input type="text" id="name" value="{foaf:name}" class="form-control" required="required"
                   onchange="calli.updateProperty(event,'foaf:name')" />
            </div>
            <div class="form-group">
               <label for="date">Date</label>
               <input id="date" type="date" datatype="xsd:date" value="{dcterms:date}" class="form-control"
                   onchange="calli.updateProperty(event,'dcterms:date')" />
            </div>
            <div class="form-group">
               <label for="comment" class="control-label">Comment</label>
               <textarea id="comment" class="form-control"
                   onchange="calli.updateProperty(event,'rdfs:comment')">{rdfs:comment}</textarea>
            </div>
            <div class="form-group">
               <button id="save" type="submit" class="btn btn-primary">Save</button>
               <button id="cancel" type="button" onclick="location.replace('?view')" class="btn btn-default">Cancel</button>
               <button id="delete" type="button" onclick="calli.deleteResource(event)" class="btn btn-danger">Delete</button>
            </div>
         </fieldset>
      </form>
    </div>
  </body>
</html>

Multiple Text Input

Intent

Allow the user to input zero or more values for a property.

Motivation

Callimachus provides JavaScript functions to add multiple property values.

Applicability

Use for non-functional property values, such as keywords or alternate labels.

Implementation

Use the calli.addResource(event) function to add more input boxes with @property.

Sample Code


<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
  xmlns:foaf="http://xmlns.com/foaf/0.1/"
  xmlns:dcterms="http://purl.org/dc/terms/"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
  xmlns:skos="http://www.w3.org/2004/02/skos/core#">
<head><title resource="?this">{skos:prefLabel}</title></head>
<body resource="?this" onload="comparison=calli.copyResourceData('#form')">
  <div class="container">
     <form id="form" method="POST" action="" enctype="application/sparql-update" resource="?this" typeof="skos:Concept" class="row"
          onsubmit="calli.submitUpdate(comparison,event)">
       <fieldset class="col-sm-4">
          <div class="form-group">
             <label for="label">Label</label>
             <input type="text" id="label" value="{skos:prefLabel}" class="form-control" required="required"
                 onchange="calli.updateProperty(event, 'rdfs:label')" />
          </div>

          <div class="form-group">
             <label for="altLabel">Alternate label</label>
             <div>
                <input type="text" id="altLabel" property="skos:altLabel" content="?alt" value="{?alt}" class="form-control"
                    onchange="calli.updateProperty(event, 'skos:altLabel')" />
                <a href="javascript:void(0)" title="More" onclick="calli.addResource(event)" class="glyphicon glyphicon-plus" />
             </div>
          </div>
          <div class="form-group">
             <button id="save" type="submit" class="btn btn-primary">Save</button>
             <button id="cancel" type="button" onclick="location.replace('?view')" class="btn btn-default">Cancel</button>
             <button id="delete" type="button" onclick="calli.deleteResource(event)" class="btn btn-danger">Delete</button>
          </div>
       </fieldset>
    </form>
  </body>
</html>