1 / 27

Xforms

Xforms. Multumiri lui Dan McCreary. 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

gwyn
Download Presentation

Xforms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Xforms Multumiri lui Dan McCreary

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  19. 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"

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

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

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

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

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

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

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

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

More Related