XForms Notes

Introduction

XForms are the next generations of Web Forms.

XForms are richer and more flexible than HTML forms.

XForms are designed to handle interactive transactions.

XForms are designed for integration with XHTML.

XForms are platform and device independent.

XForms separate user interface from data and logic.

XForms use a data model with defined data types and data logic.

XForms use a user interface with defined data bound controls.

XForms use XML and Unicode to exchange data.

XForms in XHTML

An HTML Form Example

              <html>
              <body>
              <form action="payment.asp" method="post">

              <p><b>Select Payment Method</b></p>

              <p>
              Cash
              <input type="radio" name="as" value="cash" />
              Credit Card
              <input type="radio" name="as" value="credit" checked />
              </p>

              <p>Card Number:<br />
              <input type="text" id="cc" /></p>

              <p>Expiration Date:<br />
              <input type="text" name="exp" /></p>

              <p><input type="submit" /></p>

              </form>
              </body>
              </html>

Same Thing in XForms (simplified XForms)

              <html xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:xform="http://www.w3.org/2001/08/xforms">
                <head>
                  <xform:xform id="payment">
                    <xform:submitInfo action="submit.asp" method="post"/>
                  </xform:xform>
                  <xform:instance>.....</xform:instance>
                  <xform:model>........</xform:model>
                  <xform:bindings>.....</xform:bindings>
                </head>
                <body>
                  <xform:selectOne xform="payment" ref="as" >
                    <xform:caption>Select Payment Method</xform:caption>
                    <xform:choices>
                      <xform:item value="cash">
                      <xform:caption>Cash</xform:caption></xform:item>
                      <xform:item value="credit">
                      <xform:caption>Credit</xform:caption></xform:item>
                    </xform:choices>
                  </xform:selectOne>

                  <xform:input xform="payment" ref="cc">
                    <xform:caption>Credit Card Number</xform:caption>
                  </xform:input>

                  <xform:input xform="payment" ref="exp">
                    <xform:caption>Expiration Date</xform:caption>
                  </xform:input>

                  <xform:submit xform="payment">
                    <xform:caption>Submit</xform:caption>
                  </xform:submit>
                </body>
              </html>

Form Controls

XForms uses XForms Controls to control its user interface.

The form controls are located in the body section of the XHTML document.

In the example above there are 4 XForms controls:

* One <xform:selectOne> control.

* Two <xform:input> controls.

* One <xform:submit> control.

The XForms controls are not child elements of a <form> element.

Instead, the xform="payment" attribute identifies which form the form control binds to.

Each XForms control has a caption element directly associated with them as a child element: <xform:caption>, and the user interface is not hard coded.

Different browsers can render and display the <xform:selectOne> element to use radio buttons or not.
XForms Element in the Head Section
An <xform:xform> element in the <head> section of the XHTML document defines the submit information for the XForms controls.

The example above is very simplified.

Normally the <head> element of the XHTML document will also contain information about:

* Instance Data <xform:instance>

* Data Model <xform:model>

* Data Bindings <xform:bindings>

Example data model elements
```
                <money name="price" currency="usd" />
                <string name="country" default="Norway" />
                <string name="phone" pattern="\d*-\d*-\d*" />
                number name="age" min="16" />
              
```

The XForms Processor

An XForms Processor built into the browser will be responible for submitting the XForms data to a target, (like a Web page).

The data will be submitted as XML and will look something like this.

                <envelope>
                  <body>
                    <as>Credit</as>
                    <cc>123547789012345</cc>
                    <exp>2001-08</exp>
                  </body>
                </envelope>

XForms Datatypes Attributes and Structures

Datatypes

Type	Example	Input Result
binary	<binary name="image" />	<image>photo.jpg</image>
boolean	<boolean name="member" />	<member>false</member>
date	<date name="orderdate" />	<orderdate>2000-04-18</orderdate>
duration	<duration name="duration" />	<duration>2</duration>
group	<group name="order"> <string name="item" /> <number name="quantity" /> </group>	<order> <item>milk</item> <quantity>10</quantity> </order>
money	<money name="price" />	<price>99.95</price>
number	<number name="quantity" />	<quantity>40</quantity>
string	<string name="country" />	<country>Norway</country>
time	<time name="ordertime" />	<ordertime>18:10:30</ordertime>
uri	<uri name="site" />	<site>http://www.w3schools.com</site>

Data Attributes

Attribute	Purpose	Example
currency	Defines the currency	<money name="price currency="usd" />
decimal	Defines the number of decimals	<number name="price" decimal="2" />
integer	Defines the value as integer	<number name="age" integer="true" />
maxOccurs	Defines the max number of values for the same data	<string name="orderline" maxOccurs="1" />
minOccurs	Defines the min number of values for the same data	<string name="orderline" minOccurs="1" />
name	Defines the name of the data	<string name="country" />
precision	Defines the precision of the value	<date name="yearborn" precisiion="year" />

Validation Attributes

Attribute	Purpose	Example
calc	The value is calculated	<money name="total" calc="sum(total,price*quantity)" />
default	The value has a default	<string name="country" default="Norway" />
fixed	The value is fixed	<string name="country" fixed="Norway" />
min	The minimum value	<number name="age" min="16" />
max	The maximum value	<number name="age" max="65" />
pattern	Pattern validation	<string name="phone" pattern="\d-\d-\d*" />
range	The value is in a range	<string name="sex" range="closed"> <value>male</value> <value>female</value> </string>
required	The value is required	<string name="age" required="true" />
validate	The value should be validated	<number name="zip" validate="valzip(this.value)" />

Data Structures

Type	Example	Input Result
enum	Values must be from a predefined enumeration	<string name="sex" range="closed"> <value>male</value> <value>female</value> </string>
union	Values must be from one of two different sets	<union name="sex"> <string name="sex" range="closed"> <value>male</value> <value>female</value> </string> <string name="sex" range="closed"> <value>male</value> <value>female</value> </string> </union>

Functions

XForms are supposed to have predefined functions.

But you can also call functions defined in scripts.

String Functions

Function	Description	Example	Result
substring(string,n,m)	Returns a substring of string from position n to m	substring("Hello",0,2)	"He"
strlen(string)	Length of a string	strlen("Hello World")	11

General Functions

Function	Description	Example
sum(element,expression)	Computes the expression and assigns it to the element	sum(total,price*quantity)

Finance Functions

Function	Description	Example
apr	Returns the annual percentage rate for a loan n1 = the loan n2 = monthly payment n3 = # of payment months	annualP=apr(50000,500,120)

Hosted by www.Geocities.ws