Getting started

Release 2.0 - ...

Hello World

Since Kernighan & Ritchie wrote their C Programming book, every tutorial on programming starts with a Hello World example. So here is our XForms Hello Word.

  Hello World example

XML CopyCode image Copy Code
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>Hello World in XForms</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <PersonGivenName/>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <p>Type your first name in the input box. <br/>
        If you are running XForms, the output should be displayed in the output area.</p>   
         <xf:input ref="PersonGivenName" incremental="true">
            <xf:label>Please enter your first name: </xf:label>
         </xf:input>
         <br />
         <xf:output value="concat('Hello ', PersonGivenName, '. We hope you like XForms!')">
            <xf:label>Output: </xf:label>
         </xf:output>
   </body>
</html>

In this piece of code we see:

  • A namespace declaration: xmlns:xf="http://www.w3.org/2002/xforms
  • Within the <head> section we see the model element <xf:model>
  • Input and output elements <xf:input> and <xf:output> in the <body> section
  • Instance
  • Bindings

In the namespace declaration we see that XHTML is the deault namespace (no namespace identifier) and xf is the namespace identifier (prefix) for XForms XML.

The XForms structure consists of two parts: a specification of what the form must do, the so-called XForms Model and a specification of how it must look, the XForms User Interface. As we can see, the Model part resides in the <head> section and the User Interface resides in the <body> section. This is in fact the Model View Control or MVC pattern on which the XForms architecture is based. 

Looking at the User Interface part we see two elements:

XML CopyCode image Copy Code
<xf:input ref="PersonGivenName" incremental="true">

and

XML CopyCode image Copy Code
<xf:output value="concat('Hello ', PersonGivenName, '. We hope you like XForms!')">


The first line reads your input and copies it in the instance variable PersonGivenName. The second line produces the output by using the XPath function concat() to glue the string "Hello" , the value of PersoneGivenName and the string "We. hope you like XForms!".
So far so good. But we also see an attribute: incremental. You can change it into "false" and watch the result.
By changing the value from 'true' into 'false', the output should update only after you enter "Tab" or press the "Enter" (Return) key.