Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Enter XForms: What Will It Look Like?
To describe the above XHTML form in XForms, we would use something similar to the descriptions given below. (Note: The order of the options has been altered to explain the model and its corresponding tags.)
Representing the <FORM> element:
<xform:submitInfo action="ContactScript" method="post" encType="xml"/>
This refers to the server script to be called for submission of the data by the XForms processor (browser). The addition of the attribute encType allows the browser to submit the data as a "urlencoded" stream, as in the current browsers, or as an "xml" stream where the server receives an XML-formatted document that it can further process.
Representing the text field tags to replace all <input type="text">:
<xform:input ref="fname"> <xform:caption>First Name</xform:caption> </xform:input> <xform:input ref="lname"> <xform:caption>Last Name</xform:caption> </xform:input> <xform:input ref="dob"> <xform:caption>Date of Birth</xform:caption> </xform:input> <xform:input ref="address"> <xform:caption>Street Address</xform:caption> </xform:input> <xform:input ref="city"> <xform:caption>City</xform:caption> </xform:input> <xform:input ref="state"> <xform:caption>City</xform:caption> </xform:input> <xform:input ref="zip"> <xform:caption>Zip/Postal Code</xform:caption> </xform:input>
The markup reflects simplification of the input tag.
Representing the options for a select list or radio buttons:
<xform:selectOne ref="adtype"> <xform:caption>Select Address Type</xform:caption> <xform:choices> <xform:item value="Home"><xform:caption>Home</xform:caption> </xform:item> <xform:item value="Work"><xform:caption>Work</xform:caption> </xform:item> </xform:choices> </xform:selectOne> <xform:selectOne ref="country"> <xform:caption>Country</xform:caption> <xform:choices> <xform:item value="US"><xform:caption>United States</xform:caption> </xform:item> <xform:item value="CA"><xform:caption>Canada</xform:caption> </xform:item> <xform:item value="OT"><xform:caption>Other</xform:caption> </xform:item> </xform:choices> </xform:selectOne>
One key thing to note is that we're using neither the select list nor the radio tags, as in XHTML. The only description is that we need to select one of the many choices. Hence the designer has the option to bind the right GUI form control to the XForms element in the presentation layer. Also, different devices can render the options as they deem appropriate. This refers to the server script that is to be called for submission of the data by the XForms processor (browser).
Representing the submit button:
<xform:submit> <xform:caption>Submit</xform:caption> </xform:submit>
The button causes the validation events to be fired; if there are errors, they're reported to the user. The XForms processor keeps the state of partially filled data using the instance data. This provides an outline of the desired XML data, including any namespace information. Initially, it contains the default values for the form. As the user fills the form data, this instance data is filled with the values. Finally, the user uses the submit button. If no errors are found, the data is serialized and submitted per the encryption type defined in the form. In this case, this will be submitted as a serialized XML data tree. Once submitted, the data may be validated at the server against a predefined DTD or XML schema. This is an example of the instance data:
Representing instance data:
<xform:instance> <User:fname/> <User:lname/> <User:dob/> <User:adtype as "Home"/> <User:address/> <User:city/> <User:state/> <User:country as "US"/> <User:zip/> </xform:instance>
All the empty values will be filled as the user fills the data, while the default values for the address type "adtype" element and the "country" are specified. The final format of the data tree may look like the following:
Representing submitted data:
<Envelope> <Body> <fname>Jasmit</fname> <lname>Singh</lname> <dob>01\12\1940</dob> <adtype>Work</adtype> <address>1234 Dr.</address> <city>Pleasant Hill</city> <state>California</state> <country>US</country> <zip>94523</zip> </Body> </Envelope>
How do you define the purpose of each field or the rules? These are represented as follows:
Representing bindings and interaction between fields:
<xform:model href="user.xsd"/>
<xform:bindings>
<xform:bind ref="user:dob"
required="true" type="xsd:date"/>
</xform:bindings>
<xform:bindings>
<xform:bind ref="user:state"
relevant=="user:adtype/@as == 'Work'"
required="true" type="user:state"/>
</xform:bindings>
</xform:model>
The above bindings provide the functionality that would typically be achieved using validation scripts in JavaScript. The model is defined by the user.xsd XML schema. The rules require that the date of birth field "dob" always contain a valid date. If the "adtype" has the value 'Work', a value for the "state" attribute is required for the user.