Last modified on 28 May 2010, at 12:19

XForms/HelloWorld

Background and MotivationEdit

Since K&R wrote the first book on C programming, it has become tradition for programming books to begin with a "Hello World" program. Running this program will indicate if you have XForms installed correctly.

Here is a sample "hello world" program in XForms. It uses one input, one variable in the model, and one output. You should be able to just copy and paste the text into a program such as Notepad and save it to a file such as hello.htm. This will tell you if you have the Firefox or other browser extension installed correctly.

Screen ImageEdit

XForms-hello-world.jpg

(Note that this is only a .jpg and NOT an actual form!)

Link to Working ExampleEdit

Hello World

ProgramEdit

To run this program, just copy the following text into a file "hello.xhtml" and open it with your web browser with the appropriate XForms extension loaded.

<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>

ProblemsEdit

If this program does not work, you may not have the extension or plug-in installed in your browser.

For help see Installing XForms in FireFox.

Note that if you have the NoScript Firefox extension installed, you may need to configure NoScript to allow scripts from the location from which you are loading HelloWorld.

Also note, in Firefox the file has to be saved with a xhtml or xml extension. A file with a .html exension won't show the XForms.

DiscussionEdit

Note that the file looks much like a standard HTML file with a few exceptions.

  1. there is a namespace declaration at the beginning of the file and there are two elements with a xf: prefix in front of them.
  2. there is something called a model inside the HTML <head> element
  3. There are some new elements: input and output.

The two important lines are:

   <xf:input ref="PersonGivenName" incremental="true"/>

and

   <xf:output value="concat('Hello ', PersonGivenName, '. We hope you like XForms!')"/>

As the user types, this line takes the input that the user types in and copies it to the instance variable "PersonGivenName". Each time you type a character this program updates the output and using the XPath concat() function to wrap the string "Hello " in front of the name and the string ". We hope you like XForms!" after it.

You should also note that there is not a single line of JavaScript required to run this program. Getting rid of JavaScript is one of the biggest reasons people are migrating their applications to XForms.

ExperimentEdit

Try changing the input attribute incremental from:

 incremental="true"

to:

 incremental="false"

The output should update only after you enter "Tab" or press the "Enter" (Return) key.

Next Page: Simple Message | Previous Page: Comparison of XForms Products

Home: XForms