CSCI E-153, Web Development Using XML

November 3, 2009

Harvard University
Division of Continuing Education
Extension School

Course Web Site: http://cscie153.dce.harvard.edu/

Instructor email: david_heitmeyer@harvard.edu
Course staff email: cscie153@dce.harvard.edu

Announcements and Reminders

Community Participation (100 pts maximum)

Lecture Feedback

Lecture Feedback. Please take a couple of minutes to answer three questions about the lecture. The submissions are seen only by the teaching staff and providing your name is optional.

XML In the Real World

XRX: XForms, REST, XQuery

XQuery

From XQuery 1.0: An XML Query Language:

As increasing amounts of information are stored, exchanged, and presented using XML, the ability to intelligently query XML data sources becomes increasingly important. One of the great strengths of XML is its flexibility in representing many different kinds of information from diverse sources. To exploit this flexibility, an XML query language must provide features for retrieving and interpreting information from these diverse sources.

From http://www.w3.org/standards/xml/query:

What is XQuery?

XQuery is a standardized language for combining documents, databases, Web pages and almost anything else. It is very widely implemented. It is powerful and easy to learn.

What is XQuery Used For?

XQuery is replacing proprietary middleware languages and Web Application development languages. XQuery is replacing complex Java or C++ programs with a few lines of code. XQuery is simpler to work with and easier to maintain than many other alternatives.

It is used as a back end for implementing Web sites, integrating corporate data stores in the enterprise, in the XRX architecture (XForms, REST and XQuery), as well as for large publishing projects, for data mining, and for academic research. It can run on large servers and on mobile devices, as part of commercial software and as open source.

XQuery 1.0 and XPath 2.0

xquery and xpath

Uses for XQuery 1.0, XPath 2.0 and XSLT 2.0

xquery xpath and xslt relationship

XQueryXSLT
  • Syntax - non-XML
  • Collections of documents
  • Pull
  • Query
  • Syntax - XML
  • Single or a few documents
  • Push and Pull
  • Transformation
    • xsl:analyze-string
    • xsl:result-document
    • xsl;for-each-group
    • xsl:import
    • xsl:template and mode

XQuery and XSLT

xquery and xslt pipeline

FLWOR Expressions

FLWOR

  • for
  • let
  • where
  • order by
  • return

Flower photo used with permission, http://incompetech.com/gallimaufry/

FLWOR

for $course in /fas_courses/course
let $title := $course/title
let $cat_num := $course/@cat_num
where contains($course, 'molecular')
order by $title
return   <course cat_num="{$cat_num}">{$title}</course>

xquery flwor

FLWOR

for, let, let, where, order by, return

for $course in /fas_courses/course
let $title := $course/title
let $cat_num := $course/@cat_num
where contains($course, 'molecular')
order by $title
return   <course cat_num="{$cat_num}">{$title}</course>

and an equivalent, but different, XQuery:

for $course in /fas_courses/course[contains(.,'molecular')]
order by $course/title
return   <course cat_num="{$course/@cat_num}">{$course/title}</course>

xquery flwor

Native XML Databases (NXD)

Products

eXist: an Open Source native XML database

From the eXist website:

eXist Home

eXist-db is an open source database management system built using XML technology. It stores XML data according to the XML data model and features efficient, index-based XQuery processing.

eXist-db supports many web technology standards making it an excellent platform for developing web based applications:

The 1.4 version adds a new full text index based on Apache Lucene, a lightweight URL rewriting and MVC framework as well as support for XProc. Most important, the XQuery engine has seen a major redesign, resulting in improved performance.

eXist-db is highly compliant with the XQuery standard (current XQTS score is 99.4%). The query engine is extensible and features a large collection of XQuery Function Modules.

eXist-db provides a powerful environment for the development of web applications based on XQuery and related standards. Entire web applications can be written in XQuery, using XSLT, XHTML, CSS and Javascript (for AJAX functionality). XQuery server pages can be executed from the filesystem or stored in the database.

"Courses" Collection in eXist

To demonstrate the ability to search across multiple documents, I split the "courses.xml" file into one file per course, and loaded these into an eXist collection:

courses collection

Count Courses and Department

XQuery to count courses:

for $c in 
  count(distinct-values(collection('/db/courses')/fas_courses/course/@cat_num))
return concat("Number of Courses: ",$c)

XQuery to count departments:

for $d in 
  count(distinct-values(collection('/db/courses')/fas_courses/course/department/@code))
return concat("Number of Departments: ",$d)

Execute this on the "courses" collection in eXist:

xquery results

XQuery Example

Select all courses.

for $course in 
            collection('/db/courses')/fas_courses/course
order by $course/department/dept_short_name, 
         $course/course_number/num_int, 
         $course/course_number/num_char
return $course

xquery

Select Course and return XML

for $course in /fas_courses/course
where contains($course, 'molecular')
order by $course/title
return   <course cat_num="{$course/@cat_num}"/>

xquery

Distinct Departments

for $dept 
    in distinct-values(collection('/db/courses')/fas_courses/course/department/@code)
let $deptnode := collection('/db/courses')/fas_courses/course/department[@code = $dept][1]
order by $deptnode/dept_short_name
return $deptnode

xquery departments

Departments and Number of Courses

<departments>
{
for $dept in 
distinct-values(collection('/db/courses')/fas_courses/course/department/@code)
let $courses := collection('/db/courses')/fas_courses/course[@offered eq 'Y' and department/@code eq $dept]
let $numcourses := count($courses)
order by $numcourses descending
return <dept code="{$dept}" number_of_courses="{$numcourses}"/>
}
</departments>

xquery

XQuery and Multiple Documents

Working with multiple documents.

Course:
image

buildings.xml

buildings

"Joins" in XQuery

Add "buildings.xml" to the courses collection. This is another way to solve the problem of merging the building location data into the courses data.

for $course in collection('/db/courses')/fas_courses/course[course_level/@code eq 'P'][meeting_locations/location/@building]
for $b in collection('/db/courses')/buildings/building
let $cb := $course/meeting_locations/location/@building
where $cb = $b/name/text()
order by $cb[1]
return
<course><title>{$course/title/text()}</title>{$b}</course>

exist and building data

XQuery Update: insert

update insert <item name="chocolate peanut butter">Chocolate Peanut Butter</item>
into collection('/db/testing')/choices/ice_cream

xml  xml

XQuery Update: replace

update replace collection('/db/testing')/choices/colors/item[@value='black']
with <item value="noir">Noir</item>

xml  xml

Query String Parameters and eXist / XQuery

xquery version "1.0";
declare namespace request="http://exist-db.org/xquery/request";
declare namespace util="http://exist-db.org/xquery/util";
<fas_courses> 
  {
    for $c in 
      collection('/db/courses')/fas_courses/course
        [@acad_year = 2009] 
    let $dept := request:get-parameter("department", "any")
    let $cg := request:get-parameter("course_group", "any")
    where   ($c/department/@code = $dept or $dept = 'any')
        and ($c/course_group/@code = $cg or $cg = 'any')
    return $c
  } 
</fas_courses>

Uses for XQuery 1.0, XPath 2.0 and XSLT 2.0

xquery xpath and xslt relationship

XQueryXSLT
  • Syntax - non-XML
  • Collections of documents
  • Pull
  • Query
  • Syntax - XML
  • Single or a few documents
  • Push and Pull
  • Transformation
    • xsl:analyze-string
    • xsl:result-document
    • xsl;for-each-group
    • xsl:import
    • xsl:template and mode

XQuery and XSLT

xquery and xslt pipeline

Forms and XForms

"Traditional Web Forms"

forms

Mixing or Separation

soc

HTML Forms

forms

XForms

xforms

XForms

From XForms 1.1:

XForms is an XML application that represents the next generation of forms for the Web. XForms is not a free-standing document type, but is intended to be integrated into other markup languages, such as XHTML, ODF or SVG. An XForms-based web form gathers and processes XML data using an architecture that separates presentation, purpose and content. The underlying data of a form is organized into instances of data schema (though formal schema definitions are not required). An XForm allows processing of data to occur using three mechanisms:

HTML/XHTML Forms and XForms

FunctionHTML/XHTML FormsXForms
Validation and Calculation Heavy reliance on scripting languages, both client-side (Javascript) and server-side.XPath, W3C XML Schema
User FeedbackScripting languagesXML form model
Initializing DataServer-side process to dynamically generate formXML instance data
Data Representationname=value pairsXML
Host LanguageHTML/XHTMLXHTML, XHTML Mobile Profile, SVG, etc.

XHTML Form Example

XHTML Form Example

example

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Form</title>
  <link href="style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
  <h1>Your Info</h1>
  <form action="http://cscie153.dce.harvard.edu/cgi-bin/echo.cgi" 
    enctype="application/x-www-form-urlencoded" method="get">
    <div>
      <label for="name">Name</label>: <input id="name" name="name" type="text"></input>
    </div>
    <div>
      <p>Favorite Ice Cream:</p>
      <ul>
        <li><input id="chocolate" name="ice_cream" type="radio" value="chocolate"></input>
            <label for="chocolate">Chocolate</label></li>
        <li><input id="vanilla" name="ice_cream" type="radio" value="vanilla"></input>
            <label for="vanilla">Vanilla</label></li>
        <li><input id="strawberry" name="ice_cream" type="radio" value="strawberry"></input> 
            <label for="strawberry">Strawberry</label></li>
      </ul>
    </div>
    <div>
      <p>Favorite Color: <select name="color">
        <option value="red">Red/option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
      </select></p>
    </div>
    <div>
      <p>Pizza Toppings:</p>
      <ul>
        <li><input id="mushroom" name="pizza_topping" type="checkbox" value="mushroom"></input> 
            <label for="mushroom">Mushroom</label></li>
        <li><input id="black_olive" name="pizza_topping" type="checkbox" value="black_olive"></input>
            <label for="black_olive">Black Olive</label></li>
        <li><input id="pepperoni" name="pizza_topping" type="checkbox" value="pepperoni"></input> 
            <label for="pepperoni">Pepperoni</label></li>
        <li><input id="sausage" name="pizza_topping" type="checkbox" value="sausage"></input> 
            <label for="sausage">Sausage</label></li>
        <li><input id="green_pepper" name="pizza_topping" type="checkbox" value="green_pepper"></input> 
            <label for="green_pepper">Green Pepper</label></li>
        <li><input id="spinach" name="pizza_topping" type="checkbox" value="spinach"></input>  
            <label for="spinach">Spinach</label></li>
      </ul>
    </div>
    <div>
      <input type="submit" value="Submit"></input>
    </div>
  </form>
</body>
</html>

XForms Example

xforms example

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
  <head>
    <title>Form</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <xf:model>
      <xf:instance src="example8.xml" />
      <xf:submission action="http://cscie153.dce.harvard.edu/cgi-bin/echo.cgi"
      method="post" id="submit-info" />
      <xf:instance id="choices" src="example8-choices.xml" />
    </xf:model>
  </head>
  <body>
    <h1>Your Info</h1>
    <div>
      <xf:input ref="name">
        <xf:label>Name:</xf:label>
      </xf:input>
    </div>
    <div>
      <xf:select1 ref="ice_cream" appearance="full">
        <xf:label>Favorite Ice Cream:</xf:label>
        <xf:itemset nodeset="instance('choices')/ice_cream/item">
          <xf:label ref="." />
          <xf:value ref="@value" />
        </xf:itemset>
      </xf:select1>
    </div>
    <div>
      <xf:select1 ref="color" appearance="minimal">
        <xf:label>Favorite Color:</xf:label>
        <xf:itemset nodeset="instance('choices')/colors/item">
          <xf:label ref="." />
          <xf:value ref="@value" />
        </xf:itemset>
      </xf:select1>
    </div>
    <div>
      <xf:select ref="pizza" appearance="full">
        <xf:label>Pizza Toppings:</xf:label>
        <xf:itemset nodeset="instance('choices')/pizza/item">
          <xf:label ref="." />
          <xf:value ref="@value" />
        </xf:itemset>
      </xf:select>
    </div>
    <div>
      <xf:submit submission="submit-info">
        <xf:label>Submit Information</xf:label>
      </xf:submit>
    </div>
  </body>
</html>

Choices for form: (example8-choices.xml):

<choices>
  <ice_cream>
    <item value="chocolate">Chocolate</item>
    <item value="vanilla">Vanilla</item>
    <item value="strawberry">Strawberry</item>
    <item value="chocolate_pudding">Chocolate Pudding</item>
  </ice_cream>
  <colors>
    <item value="red">Red</item>
    <item value="blue">Blue</item>
    <item value="green">Green</item>
    <item value="black">Black</item>
    <item value="yellow">Yellow</item>
    <item value="purple">Purple</item>
  </colors>
  <pizza>
    <item value="mushroom">Mushroom</item>
    <item value="black_olive">Black Olive</item>
    <item value="pepperoni">Pepperoni</item>
    <item value="sausage">Sausage</item>
    <item value="green_pepper">Green Pepper</item>
    <item value="spinach">Spinach</item>
    <item value="tomato_basil">Tomato &amp; Basil</item>
    <item value="pineapple">Pineapple</item>
    <item value="canadian_bacon">Canadian Bacon</item>
  </pizza>
</choices>

Instance data:

<data xmlns="">
  <pi>3.14159</pi>
  <name>First and Last Name</name>
  <ice_cream>strawberry</ice_cream>
  <color>blue</color>
  <pizza>pepperoni sausage</pizza>
</data>

Using XForms


Firefox Plugin

You will need an XForms player to view these examples. I have provided screenshots of how these forms render in Mozilla XForms plugin for Firefox.

XSLT

Javascript

Server Side Solutions

Players

XForms

Separation of concerns:

xforms

XForms: Text Input

example2

example2

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
  <head>
    <title>Form</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <xf:model>
      <xf:submission action="http://csci153.dce.harvard.edu/cgi-bin/echo.cgi"
      method="get" id="submit-info" />
    </xf:model>
  </head>
  <body>
    <h1>Your Info</h1>
    <xf:input ref="name">
      <xf:label>Name:</xf:label>
    </xf:input>
    <br />
    <xf:submit submission="submit-info">
      <xf:label>Submit Information</xf:label>
    </xf:submit>
  </body>
</html>

XForms: Data Initialization

Instance Data Provided

      <xf:instance>
        <data xmlns="">
          <name>First and Last Name</name>
          <pi>3.14159</pi>
        </data>
      </xf:instance>

example

example

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
  <head>
    <title>Form</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <xf:model>
      <xf:instance>
        <data xmlns="">
          <name>First and Last Name</name>
          <pi>3.14159</pi>
        </data>
      </xf:instance>
      <xf:submission action="http://cscie153.dce.harvard.edu/cgi-bin/echo.cgi"
      method="get" id="submit-info" />
    </xf:model>
  </head>
  <body>
    <h1>Your Info</h1>
    <xf:input ref="name">
      <xf:label>Name:</xf:label>
    </xf:input>
    <br />
    <xf:submit submission="submit-info">
      <xf:label>Submit Information</xf:label>
    </xf:submit>
  </body>
</html>

XForms: External Initialization Data

Instance Data in separate document.

Reference to instance data in XHTML:

      <xf:instance src="forms/example4.xml" />

Instance data:

<data xmlns="">
  <name>First and Last Name</name>
  <pi>3.14159</pi>
</data>

example

example

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
  <head>
    <title>Form</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <xf:model>
      <xf:instance src="forms/example4.xml" />
      <xf:submission action="http://cscie153.dce.harvard.edu/cgi-bin/echo.cgi"
      method="get" id="submit-info" />
    </xf:model>
  </head>
  <body>
    <h1>Your Info</h1>
    <xf:input ref="name">
      <xf:label>Name:</xf:label>
    </xf:input>
    <br />
    <xf:submit submission="submit-info">
      <xf:label>Submit Information</xf:label>
    </xf:submit>
  </body>
</html>

XForms: Choose One

"radio" or "pulldown" rendering

xf:select1 element, notice the appearance attribute (full|minimal).

example

example

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
  <head>
    <title>Form</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <xf:model>
      <xf:instance src="example5.xml" />
      <xf:submission action="http://cscie153.dce.harvard.edu/cgi-bin/echo.cgi"
      method="get" id="submit-info" />
    </xf:model>
  </head>
  <body>
    <h1>Your Info</h1>
    <div>
      <xf:input ref="name">
        <xf:label>Name:</xf:label>
      </xf:input>
    </div>
    <div>
      <xf:select1 ref="ice_cream" appearance="full">
        <xf:label>Favorite Ice Cream:</xf:label>
        <xf:item>
          <xf:label>Chocolate</xf:label>
          <xf:value>chocolate</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Vanilla</xf:label>
          <xf:value>vanilla</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Strawberry</xf:label>
          <xf:value>strawberry</xf:value>
        </xf:item>
      </xf:select1>
    </div>
    <div>
      <xf:select1 ref="color" appearance="minimal">
        <xf:label>Favorite Color:</xf:label>
        <xf:item>
          <xf:label>Red</xf:label>
          <xf:value>red</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Blue</xf:label>
          <xf:value>blue</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Green</xf:label>
          <xf:value>green</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Yellow</xf:label>
          <xf:value>yellow</xf:value>
        </xf:item>
      </xf:select1>
    </div>
    <div>
      <xf:submit submission="submit-info">
        <xf:label>Submit Information</xf:label>
      </xf:submit>
    </div>
  </body>
</html>

XForms: Choose One or More

xf:select for 'checkbox'

example

example

      <xf:select ref="pizza_topping" appearance="full">
        <xf:label>Pizza Toppings:</xf:label>
        <xf:item>
          <xf:label>Mushroom</xf:label>
          <xf:value>mushroom</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Black Olive</xf:label>
          <xf:value>black_olive</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Pepperoni</xf:label>
          <xf:value>pepperoni</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Sausage</xf:label>
          <xf:value>sausage</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Green Pepper</xf:label>
          <xf:value>green_pepper</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Spinach</xf:label>
          <xf:value>spinach</xf:value>
        </xf:item>
      </xf:select>

XForms: Return XML Document

Post to server as XML document in body of post.

<xf:submission 
    action="http://cscie153.dce.harvard.edu/cgi-bin/echo.cgi"
    method="post" id="submit-info" />

example

example

XForms: Choices in an External Document

Pull in choices from an external document.

model and instances:

    <xf:model>
      <xf:instance src="example8.xml" />
      <xf:submission action="http://cscie153.dce.harvard.edu/cgi-bin/echo.cgi"
      method="post" id="submit-info" />
      <xf:instance id="choices" src="example8-choices.xml" />
    </xf:model>

Refer to 'choices' instance:

      <xf:select ref="pizza" appearance="full">
        <xf:label>Pizza Toppings:</xf:label>
        <xf:itemset nodeset="instance('choices')/pizza/item">
          <xf:label ref="." />
          <xf:value ref="@value" />
        </xf:itemset>
      </xf:select>

choices in XML:

<choices>
  <ice_cream>
    <item value="chocolate">Chocolate</item>
    <item value="vanilla">Vanilla</item>
    <item value="strawberry">Strawberry</item>
    <item value="chocolate_pudding">Chocolate Pudding</item>
  </ice_cream>
  <colors>
    <item value="red">Red</item>
    <item value="blue">Blue</item>
    <item value="green">Green</item>
    <item value="black">Black</item>
    <item value="yellow">Yellow</item>
    <item value="purple">Purple</item>
  </colors>
  <pizza>
    <item value="mushroom">Mushroom</item>
    <item value="black_olive">Black Olive</item>
    <item value="pepperoni">Pepperoni</item>
    <item value="sausage">Sausage</item>
    <item value="green_pepper">Green Pepper</item>
    <item value="spinach">Spinach</item>
    <item value="tomato_basil">Tomato &amp; Basil</item>
    <item value="pineapple">Pineapple</item>
    <item value="canadian_bacon">Canadian Bacon</item>
  </pizza>
</choices>

example

example

XForms: Bind via XPath

Bind values to an attribute via an XPath expression.

example

example

    <div>
      <xf:input ref="phone_number">
        <xf:label>Phone Number:</xf:label>
      </xf:input>
      <xf:select1 ref="phone_number/@type">
        <xf:label>Type:</xf:label>
        <xf:item>
          <xf:label>Work</xf:label>
          <xf:value>W</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Home</xf:label>
          <xf:value>H</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Mobile</xf:label>
          <xf:value>M</xf:value>
        </xf:item>
      </xf:select1>
    </div>

XForms: Binding via IDREF

Bind in the model, then the form simply refers to the bind statement. This keeps the information about the structure of the model in the model, not in the form.

In xf:model:

      <xf:bind nodeset="name/first_name" id="fn" />
      <xf:bind nodeset="name/middle_initial" id="mi" />
      <xf:bind nodeset="name/last_name" id="ln" />

In XHTML:

          <xf:input bind="mi">
            <xf:label>Middle Initial:</xf:label>
          </xf:input>

example 10 binding

example

example

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <head>
    <title>Form</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <xf:model id="model1">
      <xf:instance id="sampledata" src="example10.xml" />
      <xf:submission action="http://cscie153.dce.harvard.edu/cgi-bin/echo.cgi"
      method="post" id="submit-info" />
      <xf:bind nodeset="name/first_name" id="fn" />
      <xf:bind nodeset="name/middle_initial" id="mi" />
      <xf:bind nodeset="name/last_name" id="ln" />
    </xf:model>
  </head>
  <body>
    <h1>Your Info</h1>
    <div>
      <xf:group>
        <p>
          <xf:input bind="fn">
            <xf:label>First:</xf:label>
          </xf:input>
        </p>
        <p>
          <xf:input bind="mi">
            <xf:label>Middle Initial:</xf:label>
          </xf:input>
        </p>
        <p>
          <xf:input bind="ln">
            <xf:label>Last:</xf:label>
          </xf:input>
        </p>
      </xf:group>
    </div>
    <div>
      <xf:submit submission="submit-info">
        <xf:label>Submit Information</xf:label>
      </xf:submit>
    </div>
  </body>
</html>

XForms: Required

Fields can be marked as required.

example

The 'required' and 'type' attributes are used:

<xf:bind nodeset="name/last_name" id="ln"
  required="true()" type="xsd:string" />

In CSS, the required and invalid pseudo-elements are used to style parts of the form that are required:

/* Display a red asterisk after all required form controls */
*:required::after { content: "*"; color: red; }

/* Display a yellow background on all invalid form controls */
*:invalid { background-color: yellow; }

XForms: Schema Types and Constraint

Illustration of different W3C XML Schema types (xsd:date, xsd:integer) and use of XPath expression in "constraint" attribute.

      <xf:bind nodeset="name/first_name" id="fn" />
      <xf:bind nodeset="name/middle_initial" id="mi" />
      <xf:bind nodeset="name/last_name" id="ln"
      required="true( )" type="xsd:string" />
      <xf:bind nodeset="date" id="mydate" required="true( )"
      type="xsd:date" />
      <xf:bind nodeset="integer" id="myint" required="true( )"
      type="xsd:integer" />
      <xf:bind nodeset="integer100" id="myint100"
      required="true( )" type="xsd:integer"
      constraint=". &lt; 100" />

Required fields and invalid fields are marked:
example

Calendar widget appears for a field with xsd:date constraint:
example

As fields become valid, styling changes:
example

Submitted information:
example

XForms: User Messages: Hint

<xf:input bind="myint">
  <xf:label>Integer:</xf:label>
  <xf:hint>An integer is a member of the set of positive and
  negative whole numbers and zero</xf:hint>
</xf:input>

The "hint" appears when the cursor moves over the input box or label:
example

XForms: User Messages: Help

F1 will display any "help" associated with an input.

<xf:input bind="ln">
  <xf:label>Last:</xf:label>
  <xf:help>A name shared in common to identify the members of a
  family, as distinguished from each member's given name. Also
  called family name, last name.</xf:help>
</xf:input>

example

XForms: User Messages: Alert

Alerts can be of different types -- unobtrusive to blocking.

<xf:input bind="fn">
<xf:label>First:</xf:label>
<xf:message level="ephemeral" ev:event="DOMFocusIn">Please
enter your first name.</xf:message>
</xf:input

example

XForms: Switch and Case

Expose different parts of the form.

    <xf:switch>
      <xf:case id="personalinfo">
        <!-- collect personal information here -->
        <p>
          <xf:trigger>
            <xf:label>Move to Food Info</xf:label>
            <xf:toggle ev:event="DOMActivate"
            case="foodinfo" />
          </xf:trigger>
        </p>
      </xf:case>
      <xf:case id="foodinfo">
        <!-- collect food preferences here -->
        <p>
          <xf:trigger>
            <xf:label>Move to Personal
            Info</xf:label>
            <xf:toggle ev:event="DOMActivate"
            case="personalinfo" />
          </xf:trigger>
        </p>
      </xf:case>
    </xf:switch>

example

example

Cascading Choices

xforms

xforms

xforms

xforms

Cascading Choices

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:form="http://www.w3.org/2002/xforms"
  xmlns:ev="http://www.w3.org/2001/xml-events" xml:lang="en">
  <head>
    <title>Choices</title>
    <link rel="stylesheet" type="text/css" href="xforms.css"/>
    <form:model id="model">
      <form:instance id="choices">
        <choices xmlns="">
          <choice>
            <division/>
            <conference/>
            <school/>
          </choice>
        </choices>
      </form:instance>
      
      <form:instance id="schools" src="choices.xml"/>
      <form:bind nodeset="choice/conference" relevant="../division!= ''"/>
      <form:bind nodeset="choice/school" relevant="../conference!= ''"/>
    </form:model>
  </head>
  
  <body>
    <form:repeat nodeset="choice">
      <p>
        <form:select1 ref="division">
          <form:label>Division:</form:label>
          <form:itemset nodeset="instance('schools')/division">
            <form:label ref="@name"/>
            <form:value ref="@name"/>
          </form:itemset>
          <form:action ev:event="xforms-value-changed">
            <form:setvalue ref="../conference"/>
            <form:rebuild model="model"/>
          </form:action>
        </form:select1>
      </p>
      <p>
        
        <form:select1 ref="conference">
          <form:label>Conference:</form:label>
          <form:itemset
            nodeset="instance('schools')/division[@name = current()/../division]/conference">
            <form:label ref="@name"/>
            <form:value ref="@name"/>
          </form:itemset>
          <form:action ev:event="xforms-value-changed">
            <form:setvalue ref="../school"/>
            <form:rebuild model="model"/>
          </form:action>
        </form:select1> 
      </p>
      <p>
        <form:select1 ref="school">
          <form:label>School:</form:label>
          <form:itemset
            nodeset="instance('schools')/division[@name = current()/../division]/conference
                     [@name = current()/../conference]/school">
            <form:label ref="@name"/>
            <form:value ref="@name"/>
          </form:itemset>
        </form:select1> 
      </p>
      <hr/>
    </form:repeat>
    
    <form:trigger>
      <form:label>Add</form:label>
      <form:insert nodeset="choice" position="after" at="last()"
        ev:event="DOMActivate"/>
    </form:trigger>
  </body>
</html>

XForms Resources

Copyright © 2002-2009 David P. Heitmeyer

Bookmark and Share