XForms The Next Generation Web Form Processing Standard

1. XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006 MN Government IT Symposium

2. BHAG (Big Hairy Audacious Goal) • What if creating web form applications could be 10 times easier than it is today? • What if non-programmers could build fully working web applications? • What programming languages/system would you need to use? • What tools would you need? • How would this change your organization? • What if you had to think in a different way to become 10 times more productive?

3. Terminology • Procedural (How) • Stepwise algorithms, instructions • Written by programmers and software engineers • Examples: • Java, C++, C#, C, Assembly Code • Declarative (What) • Pattern matching languages and graphical tools • Created by Business Analysts (BA) or designers using graphical notation and tools • Examples: • HTML, Cascading Style Sheets (CSS), Apache Ant, XML Schemas, XML Transforms, XML Configuration Files, Workflows and XForms

4. XML Schema Sample • Screen capture of Altova XML Spy • 30 minutes to learn graphical notation

5. Note “mnr” namespace prefix Data Mapping : The “Frontline” of Data Exchange • Left: A sample “flat file dump” of county reported sales from Altova’s FlexText™ • Right: A mapping to a early draft of a ISO-11179 named and defined Statewide XML schema for CRVs. Screen capture from Altova MapForce™

6. Procedural code (Java, JavaScript, VB, C#, C++) Declarative code (HTML, XML, XSLT, XForms) Parker Projection* RelativeCode Base 100% Time * Jason Parker, November 2006

7. Many State Agencies… • Are investigating using electronic forms to replace paper forms to cut down on data entry costs • Would like different organizations (counties) to just supply a standard statewide form and allow customized style sheets to omit some fields and add custom graphics • Wish to replace paper processes used today • Example in property taxation: • Certificates of Real Estate Value, Deeds, Abstracts etc. • Want to leverage existing resources • XML Schemas • Potentially use or create a metadata registry (MDR) • Generate large portions of XForms directly from XML Schema (model-driven architecture) and MDR

8. Technology Goes in Spurts • From 1994 to 2001 there were many miss-starts at trying to add functionality to HTML • XForms did not become a W3C “Recommendation” until 2006 1993: HTML forms 1994–2001: Few non-proprietary extensions 1997 XML Schema and standard data types 2000 CSS 2002: XForms initial drafts 2006: World Wide Web Consortium (W3C) XForms “Recommendation” status

9. XForms Background • HTML Forms were never “designed” by application architects • HTML Forms did not take advantage of XML and CSS standards • Next generation of web forms processing • Reached final “recommended” status in 2006 • Leverage expanded use of CSS • Based on W3C XML standards • XML Schemas • XML Schema datatypes • XPath • Much less procedural JavaScript

10. Model Driven • XForms enables the developer to reuse business rules encapsulated in XML Schemas (xsd) and XML Transforms (xslt) • XForms reduces duplication and ensures that a change in the underlying business logic does not require rewriting in another language XForms Application XML Schema MetaData Registry

11. Strong Typing • Submitted data is strongly typed and can be checked using off-the-shelf XML Schema tools • Strong typing also enables automatic client-side validation • A native XForms browser can use these types of constraints for validating user input • When serving the same XForms document to an non-compliant browser, these constraints can be used to generate client-side Javascript automatically

12. Beyond XML Schema • XForms authors can go beyond the basic set of XML Schema constraints available from the underlying business application and add complex validation rules • XForms provides additional constraints as part of the Model • This enhances the overall manageability of the resulting Web applications

13. Direct XML Submission • XML Forms can send XML data directly from the web client to the server • Data can be validated directly in the client web browser • Complex multi-part forms can be broken down into tabs but do not need re-fetching from the server • There is no need for custom server-side logic to transform the submitted data to the business application if it already uses XML

14. Model-View-Controller • XForms uses a variation of the model-view-controller (MVC) design pattern • The model has no user interface concepts • The control layer moves data to and from the model View (Presentation) Control Model

15. XML Data is a Tree Structure root • Both the model and the view are “trees” of data elements branch branch leaf branch leaf branch leaf leaf branch leaf leaf leaf leaf

16. View and Model are Trees View (Presentation) • The view is a tree of a presentation data element • Models are comprised of one or more trees • XForms supplies the control layer that moves data elements to and from the model • Users don’t have to worry about moving things to and from the screen Control Model

17. <head> </head> Business Model (non-visible) XForms Model <body> </body> Presentation Form controls Separation of Concerns • Model is in the header (non-visual section) • Visual components are in the body (presentation) <html> </html>

18. XHTML Presentation is a Tree HTML • Both the model and the views are trees of data elements body head h1 title style form form p meta … fieldset fieldset label input label input

19. Model is Also A Tree HTML • Both the model and the views are trees of data elements head xf:model Organization title style Person meta … Name Address first last street city state zip

20. Models and View Are Linked with "Bind" HTML • Both the model and the views are trees of data elements head body xf:model Person form Name fieldset label label first last input <bind> input

21. Just Do The Right Thing HTML • Data types from the model just do the right thing • Boolean variables become checkboxes • Dates have date selectors head body xf:model Person form fieldset PersonCurrentOnTaxes type="xs:boolean" label PersonBirthDate type="xs:date" label input input <bind>

22. Example of Automatic UI Generation • All true/false data types (xs:boolean) automatically become a checkbox • All dates (xs:date) have a date selector to the right of the date field • All codes can be selected from lists

23. Structure of a XForms File • XForms tags are just XML tags imbedded in a standard XHTML file with a different namespace • Most HTML form tags are exactly the same but some attributes have been promoted to be full elements Namespaces CSS Imports (View) Model Constraints (Bindings) UI (View) Submit MyForm.xhtml

24. XForms Events presentation device • Users generate events (mouse clicks, keyboard events etc.) • Events each have a type (activation, submit etc) • Events of different types arrive at each user interface element and then are dispatched to event listener scripts Event Listeners UI Elements script #1 script #2 user script #3 events script #4

25. Customizing Appearance • You can decide how much screen area each data element takes by changing the appearance attribute • full • compact • minimal <select1 appearance="full" <label>Property Type:</label> <item>…</item> </select1> appearance="compact" appearance="minimal"

26. Device Independence • Abstract user interface controls lead to intent-based authoring of the user interface • An XForms application can target many different devices • XForms can be deployed to a range of accessing devices

27. Displaying Repeating Data Input • The <repeat> element allows you to iterate through any repeating data • Just indicate in the table the model and nodeset <xf:model id="staffModel"> <xf:instance xmlns=""> <Staff> <Person> <PersonGivenName>John</PersonGivenName> <PersonSurName>Doe</PersonSurName> <Phone>123</Phone> </Person>… XForms Output <xf:repeat model="staffModel"nodeset="/Staff/Person"> <xf:output ref="PersonGivenName"/> <xf:output ref="PersonSurName"/> <xf:output ref="Phone"/> </xf:repeat>

28. Multi-tab Form Layout • Large forms can be subdivided into multiple sections • Each section can be validated before the next section is enabled • Tab formatting is done with standard CSS

29. Dynamic Forms group • Group related controls to ease refactoring • Enable structured navigation • Factor common parts of binding expressions switch/case/toggle • Enable conditional user interfaces • Enable interaction-based switching • Create user interface wizards and multi-page tab dialogs • Progressively reveal complex user interfaces repeat • Iterate over collections • Create user interfaces that grow or shrink as needed • Enable creation and maintenance of hierarchical content

30. Accessibility and Section 508 • User interface controls encapsulate all relevant metadata such as: • Labels • Hints • Help • This enhances accessibility of the application when using different reading devices (modalities) • Example: • a non-visual client can speak relevant information when navigating through an XForms user interface • Voice tone is determined by CSS file See http://en.wikipedia.org/wiki/Section_508

31. Message Level Attribute • level="ephemeral" defines the message to be displayed as a "tool tip" or "hover message" • level="modal" – a message that the user must acknowledge to proceed • level="modeless" – no user response is needed to proceed through a form

32. HTML to XForms Conversions Note: Conversion programs are available if you don’t overuse JavaScripts

33. Hello World in XForms <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xs="http://www.w3.org/2001/XMLSchema" > <head> <title>Hello World XForms</title> <xf:model> <xf:instance xmlns=""> <first-name/> </xf:instance> </xf:model> </head> <body> <p> Please enter your first name: <xf:input ref="/first-name" incremental="true" type="xs:string"/> </p> <p> <xf:output value="concat('Hello ', /first-name, '!')" type="xs:string"/> </p> </body> </html> Model

34. Forms Aligned with CSS • XForms are designed to be “styled” using a CSS file • One CSS file is usually used for many forms to ensure consistent look-and-feel

35. Required Fields In CSS • Style sheet indicates what fields are required • XForm displays the background in red

36. Being Productive with XForms • Many people that are not familiar with HTML, CSS, XML and XPath have a longer learning curve • Declarative programming is a different approach but is much easier to maintain • You can reduce your JavaScript forms validation by over 95% if you use XForms

37. Is XForms Part of the Answer? • Short term • Ideal if you have a controlled deployment environment • Not “built in” to most browsers (specifically IE) • Requires add-on functionality • Few drag-and-drop integrated development tools • Few people already familiar with CSS/XPath and XML Schema • Long term • Depends on adoption rates

38. XForms Books • XForms Essentials by Micah Dubinko, O'Reilly, 2003 • XForms: XML Powered Web Forms by T.V. Raman, Addison-Wesley, 2004

39. Tutorial and Cookbook • Wikibook with over 53 small example programs • Just need FireFox, XForms extension and Notepad http://en.wikibooks.org/wiki/XForms

40. Resources • Wikipedia: XForms • W3C XForms web site: • http://www.w3.org/MarkUp/Forms • Oberon XForms server • http://www.orbeon.com • FormFaces • http://www.fromfaces.com

41. Summary • XForms are truly the “Next Generation” of web forms • XForms work well with existing W3C standards such as CSS, XPath and XSL • XForms require a different approach (declarative vs. procedural programming) which is not currently taught in most computer science programs • XForms enables a broader “developer” community to include B.A.s and other non-programmers

42. Questions?

43. Thank You! Dan McCreary President, Dan McCreary & Associates dan@danmccreary.com www.danmccreary.com