web forms 2.0 for jsf developers · what a jsf developer should know about html5 / web forms 2.0...

20
Web Forms 2.0 for JSF Developers What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060

Upload: others

Post on 31-Aug-2020

8 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

Web Forms 2.0 for JSF DevelopersWhat a JSF Developer should know about HTML5 / Web Forms 2.0

Olaf Merkert

4060

Page 2: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

2

AGENDA

> Web Forms 2.0 (HTML5/WF2)– current implementation in user agents– input element– repetition model

> WF2 concepts for JSF– design concepts– elements "in place"

> Java Script based cross-browser implementation– considerations for JSF components– input element example– repetition model example

Page 3: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

3

HTML 5 and Web Forms 2.0> HTML 5

– a new version of HTML 4.01 and XHTML 1.0– pioneered in 2004 by the Web Hypertext

Application Technology Working Group– adopted by W3C HTML working group as public

working draft in January 2008> Web Forms 2.0 (according to WHATWG wiki)

– an extension to the forms features found in HTML4's forms chapter

– applies to both HTML and XHTML user agents – provides new strongly-typed input fields, new

attributes for defining constraints and a repeating model for declarative repetition of form sections...

Page 4: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

4

WF2 implementation in HTML engines (03/2008)

Wikipedia / WHATWG / March 2008

Page 5: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

5

WF2 – input element types> @type="number"

– user agent provides "spinner" (up+down) control– simple keyboard entry still possible

> @type="date"– user agent provides date picker– value is displayed and returned as yyyy-MM-dd (ISO 8601)– nasty on Opera/Presto: widget entry only

> @type="time"– user agent provides 4 digits + "spinner" control

> @type="range"– user agent can provide a simpler interface than for number

(e.g. slider) – defaults: min=0, step=1, max=100

Page 6: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

6

WF2 – input/validation attributes> @min, @max, @step

– set the range of values to be allowed and their precision by defining minimal, maximal and increment/decrement value

– applies to: date-related, time-related and numeric (includes "range") input types – min/max on file upload input types

> @required – user must enter a value into the form control before

submitting the form (general error "handling" concept)> @autofocus

– the last focusable form control in document order with the attribute set will receive the focus

> @pattern – defined via regexp– specifies a pattern that the actual input value must match– applies to: text, password, email, url input + textarea

Page 7: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

7

WF2 – repetition model

Page 8: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

8

What WF2 can do for you

> a standard is not only useful when it's implemented> when you build your JSF components, a web

standard provides valuable ideas and vocabulary for your problem domain (web applications)

> so even if there's only one WF2 implementation today, you can already adopt its concepts in your daily JSF development work

> as soon as it's implemented: better HTML UIs without JavaScript

Page 9: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

9

WF2 concepts for JSF components> existing concepts

– JSF: input/@required - not on client side– SEAM: @min, @max, @pattern – but not on client side

> missing concepts– @type attribute on input element – not a new "number"

or even "inputNumber" tag– polymorphism – min, max, step have a high degree of

re-usability + readability (in an "overloading" sense)– @pattern (like @required) directly on h:inputText

> directions– close resemblance to the WF2 structures– rapid switch from JS to "native" WF2 implementation by

simply dropping the Java Script include– no JS coding by the component user

Page 10: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

10

Implementing "simple" concepts> @required for client-side validation> @type - number, date> @min, @max, @pattern> @autofocus> minimum requirements

– server side: converter/validator– client side: autofocus script "onLoad"

> enhanced requirements– number (spinner), date (date picker),

range (slider)– controls are keyboard enabled– no Java Script handling for JSF page

author

Page 11: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

11

What can we use?> Explicit WF2 Java Script

– Weston Ruter – WF2 JS implementation,cross browser – excellent for repetition, but no input widgets

– Dean Edwards - IE specific WF2 implementation (v0.1a – 09/2005)

– Dan Culley – smooth JS integration– Rickert Koppes – IE only

> UI Widgets (Java Script based)– Yahoo UI – not close enough to WF2 specification– jQuery UI

very fancy L&F with matching date picker and slider needs to be adopted to WF2 format automated injection based on @type needed

Page 12: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

12

Considering the JSF lifecycle> apply request values

– consider converter target data types (e.g. java.util.date instead of ISO-date)

– repetition model: mismatch between client/server component state + request parameter names

> process validations– WF2-Spec: "Servers should perform validation on all

submitted data, whether such validation is expected to be performed on the client or not."

– so even with a UA implementing WF2: validate input– consider @pattern attribute

> render response– include Java Script code using weblets for non WF2-

browsers – but use WF2 implementation if available

Page 13: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

13

Implementing the repetition model - concepts> introduce w:dataTable - subclass of UIData

– needs DynamicDataModel (DDM) with “sync” capability– w:inputText needed as well for "clientId" manipulation– each client row contains a hidden “rowSync” input field to communicate

removals, addition and re-sorting (up/down) to server (DDM)> encoding / render response

– existing DataModel entries must be rendered outside of template area– clientId of each element based on row position in DDM (0,1,2,3,...)

> decoding / apply request values– sync DDM with “rowSync” value -> create easily renderable list– use “rowSync” values to determine request parameter name per row

> update model values– map submitted values to list elements from DDM (standard DataModel /

inputText interaction)

Page 14: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

14

Page 15: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

15

Page 16: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

16

Implementing the repetition model - XHTML

Page 17: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

17

Implementing the repetition model - output> first column shows rows

created by existing data + 1 template line (“T”)

> remove line 1+2, add 2 new lines (marked as “T”)

> move first row to end of list and submit input

> server syncs dynamic data model (DDM) with client side modifications and outputs list

> new output contains “clean” parameter names based on DDM row indexes

> based on repeatStart=4, a 4th row is added as a template

Page 18: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

18

Summary> HTML 5 and Web Forms 2.0 are on their way

– Web Forms 2.0 addresses the practitioner's needs– because of its backwards compatibility approach it's easy to pick up– although currently only Opera implements WF2, others will follow– typical web application form requirements are addressed in an efficient way

> WF2 JSF components– should use WF2 vocabulary and concepts– can use current implementations, even if they are Java Script based– on doing so: render HTML that matches the WF2 format and use Java Script

code to attach its behavior to the “marked” HTML elements– don't underestimate the concepts needed to match client side manipulations

on JSF component state on the server side (repetition model)

Page 19: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

19

References> wf2 implementation status in current HTML engines / March 2008:

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28WHATWG%29> W3C Editor's Draft – HTML 5 – 23 March 2008 - http://www.w3.org/html/wg/html5/> W3C Working Draft – Web Forms 2.0 – 21 August 2006 - http://www.w3.org/TR/web-forms-2/> WHATWG Working Draft – HTML 5 – 12 March 2008 - http://www.whatwg.org/specs/web-apps/current-work/> WHATWG Working Draft – Web Forms 2.0 – 12 October 2006 - http://www.w3.org/TR/web-forms-2/> TBL on HTML 5 Working Group - http://dig.csail.mit.edu/breadcrumbs/node/166> Extensive tutorial on WF2 (de only) - http://www.malleus.de/docs/tutorials/web-forms-2-0.html> WF2 implementation in Java Script by Weston Ruter - http://code.google.com/p/webforms2/

Page 20: Web Forms 2.0 for JSF Developers · What a JSF Developer should know about HTML5 / Web Forms 2.0 Olaf Merkert 4060. 2 AGENDA > Web Forms 2.0 (HTML5/WF2) – current implementation

Olaf Merkert http://[email protected]