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. Use  class="auto-expand" to cause the textarea to grow as the content grows.

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>
      <form id="form" method="POST" action="" enctype="application/sparql-update" resource="?this" typeof="foaf:Person" >
         <fieldset>
            <div class="control-group">
               <label for="name" class="control-label">Name</label>
               <div class="controls">
                  <input type="text" id="name" value="{foaf:name}" class="auto-expand" required="required" size="24" />
               </div>
            </div>
            <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}" />
               </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 id="save" type="submit" class="btn btn-primary">Save</button>
               <button id="cancel" type="button" onclick="location.replace('?view')" class="btn">Cancel</button>
               <button id="delete" type="button" onclick="calli.deleteResource(event)" class="btn btn-danger">Delete</button>
            </div>
         </fieldset>
      </form>
   </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>
     <form id="form" method="POST" action="" enctype="application/sparql-update" resource="?this" typeof="skos:Concept" >
       <fieldset>
          <div class="control-group">
             <label for="label" class="control-label">Label</label>
             <div class = "controls">
                <input type="text" id="label" value="{skos:prefLabel}" class="auto-expand" required="required" autofocus="autofocus" />
             </div>
          </div>

          <div class="control-group">
             <label for="altLabel" class="control-label">Alternate label</label>
             <div class="controls">
                <input type="text" id="altLabel" property="skos:altLabel" content="?alt" value="{?alt}" class="auto-expand" />
                <a href="javascript:void(0)" title="More" onclick="return calli.addResource(event)" class="ui-icon ui-icon-plus" />
             </div>
          </div>
          <div class="form-actions">
             <button id="save" type="submit">Save</button>
             <button id="cancel" type="button" onclick="location.replace('?view')">Cancel</button>
             <button id="delete" type="button" onclick="calli.deleteResource(event)">Delete</button>
          </div>
       </fieldset>
    </form>
  </body>
</html>