- Sams Teach Yourself XML in 21 Days, Third Edition
- Table of Contents
- About the Author
- Acknowledgments
- We Want to Hear from You!
- Introduction
- Part I: At a Glance
- Day 1. Welcome to XML
- All About Markup Languages
- All About XML
- Looking at XML in a Browser
- Working with XML Data Yourself
- Structuring Your Data
- Creating Well-Formed XML Documents
- Creating Valid XML Documents
- How XML Is Used in the Real World
- Online XML Resources
- Summary
- Q&A
- Workshop
- Day 2. Creating XML Documents
- Choosing an XML Editor
- Using XML Browsers
- Using XML Validators
- Creating XML Documents Piece by Piece
- Creating Prologs
- Creating an XML Declaration
- Creating XML Comments
- Creating Processing Instructions
- Creating Tags and Elements
- Creating CDATA Sections
- Handling Entities
- Summary
- Q&A
- Workshop
- Day 3. Creating Well-Formed XML Documents
- What Makes an XML Document Well-Formed?
- Creating an Example XML Document
- Understanding the Well-Formedness Constraints
- Using XML Namespaces
- Understanding XML Infosets
- Understanding Canonical XML
- Summary
- Q&A
- Workshop
- Day 4. Creating Valid XML Documents: DTDs
- All About DTDs
- Validating a Document by Using a DTD
- Creating Element Content Models
- Commenting a DTD
- Supporting External DTDs
- Handling Namespaces in DTDs
- Summary
- Q&A
- Workshop
- Declaring Attributes in DTDs
- Day 5. Handling Attributes and Entities in DTDs
- Specifying Default Values
- Specifying Attribute Types
- Handling Entities
- Summary
- Q&A
- Workshop
- Day 6. Creating Valid XML Documents: XML Schemas
- Using XML Schema Tools
- Creating XML Schemas
- Dissecting an XML Schema
- The Built-in XML Schema Elements
- Creating Elements and Types
- Specifying a Number of Elements
- Specifying Element Default Values
- Creating Attributes
- Summary
- Q&A
- Workshop
- Day 7. Creating Types in XML Schemas
- Restricting Simple Types by Using XML Schema Facets
- Creating XML Schema Choices
- Using Anonymous Type Definitions
- Declaring Empty Elements
- Declaring Mixed-Content Elements
- Grouping Elements Together
- Grouping Attributes Together
- Declaring all Groups
- Handling Namespaces in Schemas
- Annotating an XML Schema
- Summary
- Q&A
- Workshop
- Part I. In Review
- Well-Formed Documents
- Valid Documents
- Part II: At a Glance
- Day 8. Formatting XML by Using Cascading Style Sheets
- Our Sample XML Document
- Introducing CSS
- Connecting CSS Style Sheets and XML Documents
- Creating Style Sheet Selectors
- Using Inline Styles
- Creating Style Rule Specifications in Style Sheets
- Summary
- Q&A
- Workshop
- Day 9. Formatting XML by Using XSLT
- Introducing XSLT
- Transforming XML by Using XSLT
- Writing XSLT Style Sheets
- Using <xsl:apply-templates>
- Using <xsl:value-of> and <xsl:for-each>
- Matching Nodes by Using the match Attribute
- Working with the select Attribute and XPath
- Using <xsl:copy>
- Using <xsl:if>
- Using <xsl:choose>
- Specifying the Output Document Type
- Summary
- Q&A
- Workshop
- Day 10. Working with XSL Formatting Objects
- Introducing XSL-FO
- Using XSL-FO
- Using XSL Formatting Objects and Properties
- Building an XSL-FO Document
- Handling Inline Formatting
- Formatting Lists
- Formatting Tables
- Summary
- Q&A
- Workshop
- Part II. In Review
- Using CSS
- Using XSLT
- Using XSL-FO
- Part III: At a Glance
- Day 11. Extending HTML with XHTML
- Why XHTML?
- Writing XHTML Documents
- Validating XHTML Documents
- The Basic XHTML Elements
- Organizing Text
- Formatting Text
- Selecting Fonts: <font>
- Comments: <!-->
- Summary
- Q&A
- Workshop
- Day 12. Putting XHTML to Work
- Creating Hyperlinks: <a>
- Linking to Other Documents: <link>
- Handling Images: <img>
- Creating Frame Documents: <frameset>
- Creating Frames: <frame>
- Creating Embedded Style Sheets: <style>
- Formatting Tables: <table>
- Creating Table Rows: <tr>
- Formatting Table Headers: <th>
- Formatting Table Data: <td>
- Extending XHTML
- Summary
- Q&A
- Workshop
- Day 13. Creating Graphics and Multimedia: SVG and SMIL
- Introducing SVG
- Creating an SVG Document
- Creating Rectangles
- Adobe's SVG Viewer
- Using CSS Styles
- Creating Circles
- Creating Ellipses
- Creating Lines
- Creating Polylines
- Creating Polygons
- Creating Text
- Creating Gradients
- Creating Paths
- Creating Text Paths
- Creating Groups and Transformations
- Creating Animation
- Creating Links
- Creating Scripts
- Embedding SVG in HTML
- Introducing SMIL
- Summary
- Q&A
- Workshop
- Day 14. Handling XLinks, XPointers, and XForms
- Introducing XLinks
- Beyond Simple XLinks
- Introducing XPointers
- Introducing XBase
- Introducing XForms
- Summary
- Workshop
- Part III. In Review
- Part IV: At a Glance
- Day 15. Using JavaScript and XML
- Introducing the W3C DOM
- Introducing the DOM Objects
- Working with the XML DOM in JavaScript
- Searching for Elements by Name
- Reading Attribute Values
- Getting All XML Data from a Document
- Validating XML Documents by Using DTDs
- Summary
- Q&A
- Workshop
- Day 16. Using Java and .NET: DOM
- Using Java to Read XML Data
- Finding Elements by Name
- Creating an XML Browser by Using Java
- Navigating Through XML Documents
- Writing XML by Using Java
- Summary
- Q&A
- Workshop
- Day 17. Using Java and .NET: SAX
- An Overview of SAX
- Using SAX
- Using SAX to Find Elements by Name
- Creating an XML Browser by Using Java and SAX
- Navigating Through XML Documents by Using SAX
- Writing XML by Using Java and SAX
- Summary
- Q&A
- Workshop
- Day 18. Working with SOAP and RDF
- Introducing SOAP
- A SOAP Example in .NET
- A SOAP Example in Java
- Introducing RDF
- Summary
- Q&A
- Workshop
- Part IV. In Review
- Part V: At a Glance
- Day 19. Handling XML Data Binding
- Introducing DSOs
- Binding HTML Elements to HTML Data
- Binding HTML Elements to XML Data
- Binding HTML Tables to XML Data
- Accessing Individual Data Fields
- Binding HTML Elements to XML Data by Using the XML DSO
- Binding HTML Tables to XML Data by Using the XML DSO
- Searching XML Data by Using a DSO and JavaScript
- Handling Hierarchical XML Data
- Summary
- Q&A
- Workshop
- Day 20. Working with XML and Databases
- XML, Databases, and ASP
- Storing Databases as XML
- Using XPath with a Database
- Introducing XQuery
- Summary
- Q&A
- Workshop
- Day 21. Handling XML in .NET
- Creating and Editing an XML Document in .NET
- From XML to Databases and Back
- Reading and Writing XML in .NET Code
- Using XML Controls to Display Formatted XML
- Creating XML Web Services
- Summary
- Q&A
- Workshop
- Part V. In Review
- Appendix A. Quiz Answers
- Quiz Answers for Day 1
- Quiz Answers for Day 2
- Quiz Answers for Day 3
- Quiz Answers for Day 4
- Quiz Answers for Day 5
- Quiz Answers for Day 6
- Quiz Answers for Day 7
- Quiz Answers for Day 8
- Quiz Answers for Day 9
- Quiz Answers for Day 10
- Quiz Answers for Day 11
- Quiz Answers for Day 12
- Quiz Answers for Day 13
- Quiz Answers for Day 14
- Quiz Answers for Day 15
- Quiz Answers for Day 16
- Quiz Answers for Day 17
- Quiz Answers for Day 18
- Quiz Answers for Day 19
- Quiz Answers for Day 20
- Quiz Answers for Day 21
Introducing XForms
Like the other elements in today's discussion, XForms come from a parallel construct in HTML—Web forms. A Web form lets us display controls such as buttons or list boxes in an HTML page, and XForms are intended to do the same thing in XML. XForms 1.0 is in candidate recommendation form, and you can find the specification at http://www.w3.org/TR/xforms/. XForms were originally designed to work with XHTML, but they've been extended to any XML document.
XForms not only bring forms to XML, but they're also designed to improve them. As with style sheets, the emphasis is on separating presentation from data. Here's what W3C says about XForms:
- The current design of Web forms doesn't separate the purpose from the presentation of a form. XForms, in contrast, are comprised of separate sections that describe what the form does, and how the form looks. This allows for flexible presentation options, including classic XHTML forms, to be attached to an XML form definition.
Listing 14.5 shows an example to help you see how XForms work.
Example 14.5. Using XForms (ch14_05.xml)
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms/cr"> <head> <xforms:model> <xforms:submission localfile="data.xml"/> <xforms:instance> <data xmlns=""> <input>Hello!</input> <select>1</select> <selectboolean>true</selectboolean> <message>Hello!</message> </data> </xforms:instance> </xforms:model> </head> <body> <h1>Using XForms</h1> <p>Input Control</p> <xforms:input ref="/data/input"></xforms:input> <p>Select Control</p> <xforms:select appearance="full" ref="/data/select"> <xforms:item> <xforms:value>1</xforms:value> <xforms:label>Item 1</xforms:label> </xforms:item> <xforms:item> <xforms:value>2</xforms:value> <xforms:label>Item 2</xforms:label> </xforms:item> <xforms:item> <xforms:value>3</xforms:value> <xforms:label>Item 3</xforms:label> </xforms:item> </xforms:select> <p>Button</p> <xforms:trigger> <xforms:label>Click Me</xforms:label> <xforms:message ev:event="click" level="ephemeral" ref="/data/message"/> </xforms:trigger> <p>Select Boolean</p> <xforms:selectboolean ref="/data/selectboolean"> <xforms:label>Click Me</xforms:label> </xforms:selectboolean> <p>Submit and Reset Buttons</p> <xforms:submit> <xforms:label>Submit</xforms:label> </xforms:submit> <xforms:trigger> <xforms:label>Reset</xforms:label> <xforms:reset ev:event="DOMActivate"/> </xforms:trigger> </body> </html>
A number of software packages support XForms to some extent; here's a sampling:
- X-Smiles (http://www.x-smiles.org)— X-Smiles is a Java-based XML browser from Helsinki University of Technology. X-Smiles has good support for the XForms Candidate Recommendation version, and it uses XForms together with XHTML, SMIL, SVG, and XSL-FO.
- Mozquito XForms (http://www.mozquito.com)— Mozquito XForms is an XForms implementation written in ActionScript for Flash 6.
- FormsPlayer (http://www.FormsPlayer.com)— FormsPlayer is an XForms processor plug-in for Internet Explorer 6, Service Pack 1.
- Novell XForms (http://www.novell.com/xforms)— Novell XForms is a Java application that is designed to provide developers with a hands-on introduction to XForms.
- LiquidOffice (http://www.cardiff.com/LiquidOffice)— LiquidOffice provides support for XForms.
- Chiba project (http://sourceforge.net/projects/chiba)— Chiba is an implementation of the W3C XForms standard that supports generic, XML-based form processing for the Web.
- NMatrix (http://sourceforge.net/projects/dotnetopensrc)— NMatrix provides some support for XForms.
- XMLForm (http://xml.apache.org/cocoon/userdocs/concepts/xmlform.html)— XMLForm is an open-source, server-side implementation of a subset of XForms that is integrated into Apache Cocoon.
- TrustForm System (http://trustform.comsquare.co.kr)— TrustForm System is a client-side implementation that is based on the XForms Working Draft.
- AchieveForms (http://www.achieveforms.com)— AchieveForms is a server-based XForms designer with a Web browser interface that can output forms as XForms and can process completed forms from an XForms browser to email recipients and databases and can forward XML files of completed form data.
- jXForms (http://jxforms.cybernd.at)— jXForms supports working with XForms inside Java-based applications.
- XServerForms (http://sourceforge.net/projects/xserverforms)— XServerForms is an open-source framework for building Web applications that includes support for XForms.
- Xero (http://typeasoft.com/product/xero)— Xero is a client-side XForms processor that works in Internet Explorer 6.0 and later.
- XML Forms Package (http://www.alphaworks.ibm.com/tech/xmlforms)— The IBM XML Forms Package consists of two main components: the data model component and the client component. The data model component supports creating, accessing, and modifying XForms data models. The client component supports an XForms processor control and a Java XForms compiler.
- FormFaces (http://www.formfaces.com)— FormFaces is a server-side translator to HTML and JavaScript.
Today you'll use the XSmiles XML browser, which you can get for free from http://www.x-smiles.org. Figure 14.3 shows ch14_05.xml in the XSmiles browser.
Figure 14.3 An XForms example in the XSmiles browser.
Figure 14.3 shows the various controls you'll work with in this example—an input control (like an HTML text field), a select control (like the HTML select controls), a button, and a select Boolean control (like an HTML check box). When the user makes selections in this XForm and clicks the Submit button at the bottom, a new XML document with the data from those controls is generated, as you can see in Figure 14.4.
Figure 14.4 Data from the XForms example.
Here's what that XML data from the XForm looks like:
<?xml version="1.0" encoding="ISO-8859-1"?> <data xmlns="" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms/cr"> <input>Hello!</input> <select>2</select> <selectboolean>true</selectboolean> <message>Hello!</message> </data>
Note that the <input> element contains the text data from the input control, the <select> element contains the number of the selection the user made in the select control, and the <selectboolean> element contains the setting of the select Boolean control, which is true because it displays a check mark.
An XForm displays controls that you can use, and when you click a Submit button, that data is made accessible to you. Here are the controls you can use in XForms:
- input control— Acts like an HTML text field.
- secret control— Acts like an HTML hidden field.
- textarea control— Acts like an HTML text area control.
- output control— Displays output.
- upload control— Acts like an HTML upload control.
- range control— Allows selection from a sequential range of values.
- trigger control— Acts like an HTML <button> element.
- submit control— Acts like an HTML submit button.
- select control— Acts like an HTML select control.
- select1 control— Acts like an HTML single-selection HTML control.
To see what's going on here, let's take apart the XForms example ch14_05.xml in the following sections.
Writing XForms
XForms are used in XML documents, typically in XHTML, so each one needs to start off with an XML declaration, like this:
<?xml version="1.0" encoding="UTF-8"?>
If the document is written in XHTML, as this example is, you can include an XHTML <!DOCTYPE> element:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> . . .
In this example, however, you're going to omit the XHTML <!DOCTYPE> element for the sake of brevity (so XSmiles won't have to download the entire XHTML 1.0 DTD and check it against the document each time the document is loaded). The next element, the document element, is the <html> element, and you use it to put everything into the XHTML namespace and define two other namespaces—ev for XForms events (such as button clicks) and xforms for XForms elements:
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms/cr"> . . . </html>
Separating Data from a Presentation
A major feature of XForms is the separation of data from presentation; this means that the data for the controls in an XForm is stored separately from the presentation part. You use the <xforms:model> element to specify what data an XForm should hold. For example, you can create an XForms model in the document's <head> element:
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms/cr"> <head> <xforms:model> . . . </xforms:model> </head> </html>
Inside the model, you specify the submission mechanism for the data in an <xforms:submission> element. Although you could have the data from the XForm sent to a general URI, in this case you should have it stored in a local data file, data.xml:
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms/cr"> <head> <xforms:model> <xforms:submission localfile="data.xml"/> . . . </xforms:model> </head> </html>
You store the actual data in an <xforms:instance> element. In this example you'll have an input control whose data will be stored in an <input> element, a select control whose data will be stored in a <select> element, and so on. Here's what that looks like, with the default data for the controls stored:
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms/cr"> <head> <xforms:model> <xforms:submission localfile="data.xml"/> <xforms:instance> <data xmlns=""> <input>Hello!</input> <select>1</select> <selectboolean>true</selectboolean> <message>Hello!</message> </data> </xforms:instance> </xforms:model> </head> . . . </html>
You have now completed the <head> section of the example, where the data is stored. In the <body> section, you'll start creating the controls you'll use, starting with the input control.
Creating Input Controls
You create an input control, much as you do an HTML text field, by using the <input> element. You tie this control to the data you've stored in the <input> element in the <head> element by using the ref attribute, which you'll set to "/data/input" in this example:
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms/cr"> <head> . . . </head> <body> <h1>Using XForms</h1> <p>Input Control</p> <xforms:input ref="/data/input"></xforms:input> . . . </body> </html>
Now when the input control first appears, it will display the initial text in the <data> element, "Hello!", as shown in Figure 14.3. If the user changes that text and clicks the Submit button, the new text will be stored in that <data> element in the resulting XML file that the XForm creates, data.xml.
Creating Select Controls
Besides input controls, you can also display select controls, which look much like HTML select controls. A select control can display either a list of items to choose from or a drop-down list, and you create these controls by using the <select> element or the <select1> element (which creates single-selection select controls). In the case of our example, you need to store the current selection number in the select control in the <data> element's <select> element by assigning the select control's ref attribute to "/data/select", and you should display a list of all items in the control by setting the appearance attribute to "full".
To create the items in the select control, you use the <item> element; to label the item, you use the <label> element; and to assign a value to each item, you use the <value> element. When the user selects an item, that item's value is stored in the <select> element in the head's <data> element. Here's what the select control looks like (refer to Figure 14.3):
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms/cr"> <head> . . . </head> <body> <h1>Using XForms</h1> . . . <p>Select Control</p> <xforms:select appearance="full" ref="/data/select"> <xforms:item> <xforms:value>1</xforms:value> <xforms:label>Item 1</xforms:label> </xforms:item> <xforms:item> <xforms:value>2</xforms:value> <xforms:label>Item 2</xforms:label> </xforms:item> <xforms:item> <xforms:value>3</xforms:value> <xforms:label>Item 3</xforms:label> </xforms:item> </xforms:select> . . . </body> </html>
Creating Buttons
XForms also support buttons; in our example, clicking the Click Me button displays a message box that shows the text stored in the <message> element in the document head's <data> element:
<xforms:instance> <data xmlns=""> <input>Hello!</input> <select>1</select> <selectboolean>true</selectboolean> <message>Hello!</message> </data> </xforms:instance>
To display the text "Hello!" in a message box, you can use the XForms <message> element. To display the Click Me button, you use a <trigger> element and give it a caption by using the <label> element. To display a message box when the button is clicked, you set the <message> element's event attribute to "click"; to display the message, you set the message box's ref attribute to "/data/message". To make the message box disappear automatically after a few seconds, you can set its level attribute to "ephemeral":
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms/cr"> <head> . . . </head> <body> <h1>Using XForms</h1> . . . <p>Button</p> <xforms:trigger> <xforms:label>Click Me</xforms:label> <xforms:message ev:event="click" level="ephemeral" ref="/data/message"/> </xforms:trigger> . . . </body> </html>
You can see the results in Figure 14.5. When the user clicks the button, the message box shown in the figure displays the message for a few seconds and then disappears.
Figure 14.5 Creating XForms buttons.
Creating Select Booleans
XForms select Booleans are much like HTML check boxes. They are easy to use: You just use the <selectboolean> element to create one and a <label> element to give it a label. You can connect the select Boolean to the data in the <data> element's <selectboolean> element by using the ref attribute, like this:
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms/cr"> <head> . . . </head> <body> <h1>Using XForms</h1> . . . <p>Select Boolean</p> <xforms:selectboolean ref="/data/selectboolean"> <xforms:label>Click Me</xforms:label> </xforms:selectboolean> . . . </body> </html>
You can see the results in Figure 14.3, where the select Boolean displays a check box. The setting of this control, true or false, is stored in the <selectboolean> element of the resulting XML document, data.xml.
Creating Submit and Reset Buttons
The final controls for the XForms example are Submit and Reset buttons; the Submit button submits the XForm and stores its data in data.xml, and the Reset button resets the data in the XForm back to its original value. These controls are supported by their own elements: <submit> and <reset>. Here's how to use them:
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms/cr"> <head> . . . </head> <body> <h1>Using XForms</h1> . . . <p>Submit and Reset Buttons</p> <xforms:submit> <xforms:label>Submit</xforms:label> </xforms:submit> <xforms:trigger> <xforms:label>Reset</xforms:label> <xforms:reset ev:event="DOMActivate"/> </xforms:trigger> </body> </html>
Figure 14.3 shows the Submit and Reset buttons, at the bottom. Clicking the Submit button stores the controls' data in the local file data.xml, as you've seen.
That completes your look at XForms and our discussion for today. Tomorrow, you're going to start working with XML and JavaScript.