Web Forms 2.0, REST & AJAXCreating RESTful Web Applications with AJAX and Web Forms 2.0

Lars Trieloff

Day Software

4580

2

AGENDA

> Introduction

> Reminder: what is REST?

> Reminder: what is AJAX?

> Creating Web Applications with Web Forms 2.0

> Wrap-Up

3

Hello, my name is Lars Trieloff

> Product Manager Collaboration and Digital Asset Management

> With Day since November 2007

> Background:

– Open Source Software Development

– Collaboration Software

– Technical Documentation (DocBook)

– Blogging

– IT Systems Engineering

> Day Software AG from Basel, Switzerland

> Products: CRX Content Repository, Communiqué Web Content Management, Digital Asset Management and Collaboration

> Open Source and Standards: JSR-170, JSR-283 (Java Content Repository), Apache Jackrabbit, Apache Sling, and many more

4

and I work for Day Software

REST

5

photo: bblfish

Representational State Transfer

> Architectural Style for Networked Applications

– you cannot download it, you have to understand it

> Most prominent example: the World Wide Web

– but not every web application adheres to the REST principles

> Client-Server-Model

– Web Server and Web Browser

> Application state is enclosed in Resources

– only in Resources: no server-side sessions, no per-client server-side state

> Clients exchange Representations with the Server

– Clients manage their own state, if necessary

> Hypermedia as the engine of application state

– each Resource describes possible state transitions in Hypertext

6

Resources have multiple Representations

7

Resource

URI

Representation Representation

Representation

Four Simple Methods of Interaction

8

ResourceGET DELETE

PUT

POST

Retrieve a Representation

9

GET

GET is a safe method, it cannot have any side effects.

Reality Check: Web Applications exposing operations such as “create item”, “delete item”, “start process” as hyperlinks (and thus as GET requests) violate HTTP principles and cause problems with Caches, Spiders, Robots, etc.

Update or Create a Resource

10

PUT

PUT is an idempotent method, this means repeating the same PUT request multiple times always yields the same

result.

Reality Check: PUT is used infrequently due to lack of understanding and browser support, but it is the ideal mapping for actions such as “create new blog entry” or “update personal profile”

Delete a Resource

11

DELETE

DELETE is an idempotent method, this means repeating the same DELETE

request multiple times always yields the same result.

Reality Check: DELETE is used infrequently due to lack of understanding and browser support, but it is the ideal mapping for actions such as “delete wiki page” or “remove item from shopping list”

Invoke custom actions on a Resource

12

POST

POST is neither safe nor idempotent, and it can have side-effects of any kind.

Reality Check: POST is used for everything on the web, this causes problems, for example when POSTing an “place order” request instead of PUTting it multiple times. For operations with clear semantics, the most constrained method should be used.

13

13

Today’s web applications may have REST APIs, but only a few of them are really

RESTful, using Resources,

Representations, URIs and Methods properly.

Why? Because it is hard to do.

14

14

Good news: We can fix the problem at the client side where they appear. This keeps our server-

side code clear and client-independent.

How? Using AJAX.

How to fix the client with AJAX

> Your client does not support other Representations (XML, JSON) out of the box?

– use XMLHttpRequest and evaluate the result

> Your client does not allow setting of HTTP Headers for accessing resources?

– use XMLHttpRequest

> Your client does not save client-side state

– do not reload the page, use XMLHttpRequest to build a virtual browser

– use Google Gears or HTML5 Storage

– use the Dojo Offline Toolkit

> Your client does cannot draw advanced control widgets

– use the Javascript DOM

– use widget Libraries: Dojo, Ext, YUI

15

16

Javascript DOM and AJAX are medicine for the browser

17

Connecting the Dots with Web Forms 2.0

> What are Web Forms 2.0

> What are the limitations of Web Forms 1.0

> Extensions to Form Elements

> Repetitions in Web Forms

> Extensions to the DOM and Event model

> Using Web Forms 2.0

What are Web Forms 2.0

> An extension of the Forms module of HTML 4.0.1 or XHTML 1.1

– designed to fix some of the shortcomings of HTML Forms

> Specified by WHATWG with WC3

– Web Hypertext Application Technology Working Group

(Apple, Mozilla, Opera and others)

– W3C HTML Working Group

> Specification is “stable” and awaiting implementations

– but we do not have to wait so long

> There is nothing in Web Forms 2.0 that you could not do with Javascript DOM and AJAX, but Web Forms 2.0 are going to be the standard for that. This means less work to do for you.

18

Why do we need Web Forms 2.0

Web Forms 1.0 are lacking some important features:

> They only allow GET and POST as request methods

– limiting the ability to build RESTful forms

> They do not specify how to deal with multiple input fields

> They have no built-in data types

> They have no built-in validation mechanisms

> They have to built-in way with dealing with repeated elements

19

<form method="PUT" action="/meetings/mymeeting"

replace="values">

<label>E-mail address:

<input type="email" name="addr" required="requir

ed">

</label>

<label>Start date:

<input type="date" name="start" autocomplete="on

">

</label>

<label>Meeting time:

<input type="time" min="09:00" max="17:00" name=

"mt">

</label>

</form>

Web Forms 2.0 by Example

20

<form method="PUT" action="/meetings/mymeeting"

replace="values">

<label>E-mail address:

<input type="email" name="addr" required="requir

ed">

</label>

<label>Start date:

<input type="date" name="start" autocomplete="on

">

</label>

<label>Meeting time:

<input type="time" min="09:00" max="17:00" name=

"mt">

</label>

</form>

Web Forms 2.0 by Example

20

<form method="PUT" action="/meetings/mymeeting"

replace="values">

<label>E-mail address:

<input type="email" name="addr" required="requir

ed">

</label>

<label>Start date:

<input type="date" name="start" autocomplete="on

">

</label>

<label>Meeting time:

<input type="time" min="09:00" max="17:00" name=

"mt">

</label>

</form>

Web Forms 2.0 by Example

20

<form method="PUT" action="/meetings/mymeeting"

replace="values">

<label>E-mail address:

<input type="email" name="addr" required="requir

ed">

</label>

<label>Start date:

<input type="date" name="start" autocomplete="on

">

</label>

<label>Meeting time:

<input type="time" min="09:00" max="17:00" name=

"mt">

</label>

</form>

Web Forms 2.0 by Example

20

<form method="PUT" action="/meetings/mymeeting"

replace="values">

<label>E-mail address:

<input type="email" name="addr" required="requir

ed">

</label>

<label>Start date:

<input type="date" name="start" autocomplete="on

">

</label>

<label>Meeting time:

<input type="time" min="09:00" max="17:00" name=

"mt">

</label>

</form>

Web Forms 2.0 by Example

20

<form method="PUT" action="/meetings/mymeeting"

replace="values">

<label>E-mail address:

<input type="email" name="addr" required="requir

ed">

</label>

<label>Start date:

<input type="date" name="start" autocomplete="on

">

</label>

<label>Meeting time:

<input type="time" min="09:00" max="17:00" name=

"mt">

</label>

</form>

Web Forms 2.0 by Example

20

<form method="PUT" action="/meetings/mymeeting"

replace="values">

<label>E-mail address:

<input type="email" name="addr" required="requir

ed">

</label>

<label>Start date:

<input type="date" name="start" autocomplete="on

">

</label>

<label>Meeting time:

<input type="time" min="09:00" max="17:00" name=

"mt">

</label>

</form>

Web Forms 2.0 by Example

20

<form method="PUT" action="/meetings/mymeeting"

replace="values">

<label>E-mail address:

<input type="email" name="addr" required="requir

ed">

</label>

<label>Start date:

<input type="date" name="start" autocomplete="on

">

</label>

<label>Meeting time:

<input type="time" min="09:00" max="17:00" name=

"mt">

</label>

</form>

Web Forms 2.0 by Example

20

<form method="PUT" action="/meetings/mymeeting"

replace="values">

<label>E-mail address:

<input type="email" name="addr" required="requir

ed">

</label>

<label>Start date:

<input type="date" name="start" autocomplete="on

">

</label>

<label>Meeting time:

<input type="time" min="09:00" max="17:00" name=

"mt">

</label>

</form>

Web Forms 2.0 by Example

20

<form method="PUT" action="/meetings/mymeeting"

replace="values">

<label>E-mail address:

<input type="email" name="addr" required="requir

ed">

</label>

<label>Start date:

<input type="date" name="start" autocomplete="on

">

</label>

<label>Meeting time:

<input type="time" min="09:00" max="17:00" name=

"mt">

</label>

</form>

Web Forms 2.0 by Example

20

New Input Types <input type=”...”>

21

submit

reset

hidden

password

checkbox

radio

file

image

button

datetime, date

datetime-local

month

week

time

number

range

email

url

<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>

Built-in Validation

22

<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>

Built-in Validation

22

<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>

Built-in Validation

22

<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>

Built-in Validation

22

<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>

Built-in Validation

22

<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>

Built-in Validation

22

<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>

Built-in Validation

22

<form data="example.xml"> Hello, <output name="hello">!</form>

23

Fetching Data

<form data="example.xml"> Hello, <output name="hello">!</form>

<formdata xmlns="http://n.whatwg.org/formdata">

<field name="hello">World</field>

</formdata>

23

Fetching Data

+

<form data="example.xml"> Hello, <output name="hello">!</form>

<formdata xmlns="http://n.whatwg.org/formdata">

<field name="hello">World</field>

</formdata>

23

Fetching Data

Hello, World!

+=

<form data="example.xml"> Hello, <output name="hello">!</form>

<formdata xmlns="http://n.whatwg.org/formdata">

<field name="hello">World</field>

</formdata>

23

Fetching Data

Hello, World!

+=this w

orks for all

form data,

including selection

list, etc

<form data="example.xml"> Hello, <output name="hello">!</form>

<formdata xmlns="http://n.whatwg.org/formdata">

<field name="hello">World</field>

</formdata>

23

Fetching Data

Hello, World!

+=this w

orks for all

form data,

including selection

list, etc

forms can use this encoding (application/x-

www-form+xml) to submit data

24

Repeater Model

<html>

<head>

<title>Sample Order Form</title>

</head>

<body>

<form>

<table>

<thead>

<tr>

<th>Product</th>

<th>Quantity</th>

</tr>

</thead>

</tbody>

<tr id="order" repeat="template" re

peat-start="3">

<td><input type="text" name="row[o

rder].product" value=""></td>

<td><input type="text" name="row[o

rder].quantity" value="1"></td>

<td><button type="remove">Remove T

his Row</button></td>

</tr>

</tbody>

</table>

<p><button type="add" template="order

">Add Row</button></p>

<p><button type="submit">Submit</butt

on></p>

</form>

</body>

</html>

24

Repeater Model

<html>

<head>

<title>Sample Order Form</title>

</head>

<body>

<form>

<table>

<thead>

<tr>

<th>Product</th>

<th>Quantity</th>

</tr>

</thead>

</tbody>

<tr id="order" repeat="template" re

peat-start="3">

<td><input type="text" name="row[o

rder].product" value=""></td>

<td><input type="text" name="row[o

rder].quantity" value="1"></td>

<td><button type="remove">Remove T

his Row</button></td>

</tr>

</tbody>

</table>

<p><button type="add" template="order

">Add Row</button></p>

<p><button type="submit">Submit</butt

on></p>

</form>

</body>

</html>

24

Repeater Model

<html>

<head>

<title>Sample Order Form</title>

</head>

<body>

<form>

<table>

<thead>

<tr>

<th>Product</th>

<th>Quantity</th>

</tr>

</thead>

</tbody>

<tr id="order" repeat="template" re

peat-start="3">

<td><input type="text" name="row[o

rder].product" value=""></td>

<td><input type="text" name="row[o

rder].quantity" value="1"></td>

<td><button type="remove">Remove T

his Row</button></td>

</tr>

</tbody>

</table>

<p><button type="add" template="order

">Add Row</button></p>

<p><button type="submit">Submit</butt

on></p>

</form>

</body>

</html>

24

Repeater Model

<html>

<head>

<title>Sample Order Form</title>

</head>

<body>

<form>

<table>

<thead>

<tr>

<th>Product</th>

<th>Quantity</th>

</tr>

</thead>

</tbody>

<tr id="order" repeat="template" re

peat-start="3">

<td><input type="text" name="row[o

rder].product" value=""></td>

<td><input type="text" name="row[o

rder].quantity" value="1"></td>

<td><button type="remove">Remove T

his Row</button></td>

</tr>

</tbody>

</table>

<p><button type="add" template="order

">Add Row</button></p>

<p><button type="submit">Submit</butt

on></p>

</form>

</body>

</html>

24

Repeater Model

<html>

<head>

<title>Sample Order Form</title>

</head>

<body>

<form>

<table>

<thead>

<tr>

<th>Product</th>

<th>Quantity</th>

</tr>

</thead>

</tbody>

<tr id="order" repeat="template" re

peat-start="3">

<td><input type="text" name="row[o

rder].product" value=""></td>

<td><input type="text" name="row[o

rder].quantity" value="1"></td>

<td><button type="remove">Remove T

his Row</button></td>

</tr>

</tbody>

</table>

<p><button type="add" template="order

">Add Row</button></p>

<p><button type="submit">Submit</butt

on></p>

</form>

</body>

</html>

24

Repeater Model

<html>

<head>

<title>Sample Order Form</title>

</head>

<body>

<form>

<table>

<thead>

<tr>

<th>Product</th>

<th>Quantity</th>

</tr>

</thead>

</tbody>

<tr id="order" repeat="template" re

peat-start="3">

<td><input type="text" name="row[o

rder].product" value=""></td>

<td><input type="text" name="row[o

rder].quantity" value="1"></td>

<td><button type="remove">Remove T

his Row</button></td>

</tr>

</tbody>

</table>

<p><button type="add" template="order

">Add Row</button></p>

<p><button type="submit">Submit</butt

on></p>

</form>

</body>

</html>

24

Repeater Model

<html>

<head>

<title>Sample Order Form</title>

</head>

<body>

<form>

<table>

<thead>

<tr>

<th>Product</th>

<th>Quantity</th>

</tr>

</thead>

</tbody>

<tr id="order" repeat="template" re

peat-start="3">

<td><input type="text" name="row[o

rder].product" value=""></td>

<td><input type="text" name="row[o

rder].quantity" value="1"></td>

<td><button type="remove">Remove T

his Row</button></td>

</tr>

</tbody>

</table>

<p><button type="add" template="order

">Add Row</button></p>

<p><button type="submit">Submit</butt

on></p>

</form>

</body>

</html>

DOM and Event Model Updates

25

DOM Updates

DOMImplementation. hasFeature( “WebForms”,”2.0”) ==true

All other DOM Interfaces reflect the new elements, attributes and attribute values.

Event Model Updates

<form onformchange=”…”>

<input onformchange=”…”>

<output onformchange=”…”>

<form onforminput=”…”>

<input onforminput=”…”>

<output onforminput=”…”>

<form oninvalid=”…”>

<input oninvalid=”…”>

<select oninvalid=”…”>

<textarea oninvalid=”…”>

Getting Started

26

27

References

> REST: http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm

> HTTP: ftp://ftp.isi.edu/in-notes/rfc2616.txt

> Web Forms 2.0: http://www.whatwg.org/specs/web-forms/current-work/

> Javascript Implementation: http://code.google.com/p/webforms2/

> Dojo Toolkit: http://dojotoolkit.org/

> Ext JS: http://extjs.com/

> YUI: http://developer.yahoo.com/yui/

> Opera: http://www.opera.com/products/desktop/next/

> Apache Sling: http://incubator.apache.org/sling/site/index.html

> FF3 Native File Upload: http://soakedandsoaped.com/articles/read/firefox-3-native-ajax-file-upload

Lars Trieloff http://www.day.com

Day Software lars.trieloff@day.com