Views
Hello World
From PicoForms
Contents |
[edit] Hello World in XForms
This tutorial will demonstrate how to make the classic hello world example in XForms. The reader should have some knowledge about html/xhtml and XML.
[edit] A basic xhtml document
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Simple XForms Hello World</title>
</head>
<body>
<!-- Here goes the body -->
</body>
</html>
The document starts with a root element called xhtml which has a namespace declaration. The default namespace is declared with the attribute xmlns and will make all descendent elements without an prefix in that namespace. The namespace is an important property of an element as it determines the functionality and styling of the element.
[edit] A basic xhtml/XForms document
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>A Simple XForms Hello World</title>
<xf:model>
<xf:instance>
<name xmlns="">World</name>
</xf:instance>
</xf:model>
</head>
<body>
</body>
</html>
XForms elements must be in the XForms namespace. Here we declare the prefix xf to the XForms namespace http://www.w3.org/2002/xforms.
XForms works like the model view controller pattern and the first thing we have to do is define the model and the data. The model is here declared in the head of the xhtml document. The data in XForms are XML documents declared in the model under the elements instance. Here we have a very simple instance contaning one element name in the default empty namespace (because xmlns is declared on the element to be the empty string). Now we are ready to connect a view / user interface to the model.
[edit] Connecting Controls to the Model
Controls are connected to the instance documents using XPath which is a small query language for XML documents. In the simplest use XPath looks like the layout of directories. We will connect an output to the name in the instance.
...
<body>
<xf:output ref="/name">
<xf:label>Hello </xf:label>
</xf:output>
</body>
The element output will display the value it is bound to. The ref attribute contains an XPath expression which points to the data element it is bound to. Under the output is an label element which is contains a label for the output. The label will in CSS be display before the value of the output and the result of running the form will display the following on the display.
To see the effect of the model/view architecture of XForms we will now bind an input control to the same element in the instance and see that by inputting a new name will result in the output being updated automaticly. To add input we insert the following element after the output:
<xf:input ref="/name">
<xf:label>What is your name?</xf:label>
</xf:input>
Running the form, typing John in the input and tabbing out will display Hello John in the display.
[edit] Conclusion
In this tutorial we have touched the subjects of namespaces, XPath, the XForms model and the XForms controls output and label.
