Download presentation
Presentation is loading. Please wait.
1
Xforms Multumiri lui Dan McCreary
2
Terminology Procedural (How) Declarative (What)
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 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 Application 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 XML Schema Meta Data 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 branch branch leaf branch leaf branch leaf leaf branch leaf leaf leaf leaf Both the model and the view are “trees” of data elements
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
Separation of Concerns
<head> </head> XForms Model Business Model (non-visible) <html> </html> <body> </body> Presentation Form controls Model is in the header (non-visual section) Visual components are in the body (presentation)
12
XHTML Presentation is a Tree
body head h1 title style p form form meta … fieldset fieldset label input label input Both the model and the views are trees of data elements
13
Model is Also A Tree HTML head xf:model Organization title style Person meta … Name Address first last street city state zip Both the model and the views are trees of data elements
14
Models and View Are Linked with "Bind"
HTML head body xf:model Person form Name fieldset label label first last input <bind> input Both the model and the views are trees of data elements
15
PersonCurrentOnTaxes type="xs:boolean" PersonBirthDate type="xs:date"
Just Do The Right Thing HTML head body xf:model Person form fieldset PersonCurrentOnTaxes type="xs:boolean" label PersonBirthDate type="xs:date" label input input <bind> Data types from the model just do the right thing Boolean variables become checkboxes Dates have date selectors
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 Event Listeners UI Elements
script #1 script #2 user script #3 events script #4 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
19
Customizing Appearance
<select1 appearance="full" <label>Property Type:</label> <item>…</item> </select1> appearance="compact" appearance="minimal" You can decide how much screen area each data element takes by changing the appearance attribute full compact 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 <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> The <repeat> element allows you to iterate through any repeating data Just indicate in the table the model and nodeset
22
HTML to XForms Conversions
HTML Form XForms Note <input type="text"> <input> <input type="password"> <secret> <input type="textarea"> <textarea> <input type="hidden"> default – values displayed only when controls are bound <input type="checkbox"> bound to xs:boolean <input type="radio"> <select1> <select> <input type="submit"> <submit> <input type="reset"> <trigger> with handler <reset> <input type="file"> <upload> <input type="image"> with image <label> <input type="button"> Note: Conversion programs are available if you don’t overuse JavaScripts
23
Hello World in XForms Model
<?xml version="1.0" encoding="UTF-8"?> <html xmlns=" xmlns:xf=" xmlns:xs=" > <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> <xf:output value="concat('Hello ', /first-name, '!')" type="xs:string"/> </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: Oberon XForms server
Oberon XForms server FormFaces
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
Similar presentations
