Ed presents JSF 2.2 and WebSocket to Gameduell.

WebSocketsJSF 2.2HTML5Edward Burns@edburns http://slideshare.net/edburns/Consulting Member of Staff, Oracle


My plan for your time investment

HTML5: Why all the fuss?– What’s in a name?

– Putting it in context

– HTML5 in JSF 2.2

WebSockets– What’s in a name

– Under the covers


Speaker Qualifications – Ed Burns

Involved with JSF since 2002 Spec lead since 2003

– Most fun part of the job: cleanly integrating other people’s great ideas into JSF (and hopefully improving on the in the process)

– Not an expert in applying JSF in practice

Author of four books for McGraw-Hill

And non-qualifications


Speaker Qualifications – Ed Burns

Classic Game Fan Collection

– Atari 2600 VCS, Intellivision, NES, Sega Master System, TI-99/4A

Had David Crane autograph my Pitfall! and Pitfall II manuals Ran into Warren Robinett at SFO airport Maintain fan site for TI-99/4A Game Tunnels of Doom

http://ridingthecrest.com/edburns/classic-gaming/tunnels/

Gaming credentials


The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.


HTML4

What do people mean when they say HTML4?– IE6

– Not very high performance JavaScript

– Lots of browser tricks

– Use of native plugins is common

What’s in a name?


HTML5

What do people mean when they say HTML5?– “Modern” browsers

– A gigantic collection of related technologies Markup Offline storage EventSource DOM JavaScript CSS3

What’s in a name?

Canvas Input controls Web components Application Cache WebSocket JSON

Geolocation XMLHttpRequest Level 2


HTML5

The rise of Chrome and the end of polyfill Standards have finally won

– How good is your standards body? W3C, ECMA, IETF

– HTML5: Microsoft, Google, Apple, what about Mozilla?

Aside: – Is HTML5 a bloated specification?

– Is JavaEE a bloated specification?

– What is bloat? A indicator of how old something is.

– http://mir.aculo.us/2010/10/19/standards-bloat-and-html5/

Is it really a big deal?


HTML5

The death of the browser plugin: April 2010http://www.apple.com/hotnews/thoughts-on-flash/

Where does the tension remain?– Take advantage of the power in the client

– Minimize the complexity of distributing and maintaining the software

Is it really a big deal?


HTML5

HTML5 is a marketing term that describes a way of building the UI for a distributed system.

– UI processing task resides entirely in the browser

Putting it in context


HTML5

For JSF 2.2, HTML5 means just the markup piece For JavaEE7 it means WebSocket and JSON

Putting it in context


HTML5 Friendly Markup

This is a JSF page

The best part of Wicket comes to JSF

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:myNS="http://xmlns.jcp.org/jsf”><form myNS:id="form"> <input name="textField" type="text" myNS:value="#{bean.text1}" /> <input type="submit" myNS:id="submitButton" value="submit" /> <p>submitted text: #{bean.text1}.</p></form></html>



JSF Views are written in a View Declaration Language (VDL). The standard Facelet VDL is an XML application with two kinds of

elements– HTML Markup

– JSF Components

HTML Markup is passed through straight to the browser JSF Components take some action on the server, during the lifecycle

Let’s get back to basics



Before JSF 2.2– JSF tags hide complexity of underlying HTML+script+css+images

– JSF “Renderer”: encode: markup to browser decode: name=value from browser

<html>…<my:colorPicker value=“#{colorBean.color2}” /><my:calendar value=“#{calendarBean.date1}” />

</html>

Context: Missing feature in browser? Write a JSF component.

Let the elegance of HTML shine through



With JSF 2.2– Pure HTML+script+css+images in the JSF page

– JSF Renderer handles decode from browser Leverage the strength of the JSF lifecycle Leverage the expressiveness of HTML5

<html>…<input type=“color” jsf:value=“#{colorBean.color2}”/><input type=“date” jsf:value=“#{calendarBean.date1}” />

</html>

Context: New feature in browser? Use “pass through elements”




HTML5 users need data-* attributes (and other non-standard attributes)

Two styles– nested attribute

– namespaced attribute

Pass Through Attributes



<h:outputText value="Simple outputText">

<f:passThroughAttributes value="#{bean.passThroughAttrs}" />

</h:outputText>

#{bean.passThroughAttrs} is assumed to be a map Each entry in the map is output as a name=“value” pair on the

enclosing element.

Pass Through Attributes: nested attribute



<h:outputText value="Simple outputText">

<f:passThroughAttribute name=“data-required” value=”true" />

</h:outputText>

Attribute data-required=“true” rendered on markup of enclosing component.




<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<h:form>

<h:inputText id="email" value="#{personPage.selectedPerson.email}"

pt:type="email" pt:placeholder="Enter email">

</h:inputText>

</h:form>

</html>

Pass Through Attributes: namespaced attribute



Attributes type=“email” placeholder=“Enter email” rendered on markup of enclosing component




DEMO



WebSockets


WebSockets

Several moving parts, each with its own standard!– Client: W3C JavaScript API http://dev.w3.org/html5/websockets/

– Transport: IETF RFC 6455 http://www.ietf.org/rfc/rfc6455.txt

– Server: JSR-356: http://jcp.org/en/jsr/detail?id=356

Even with all these parts, it’s still very understandable– Client: 17 page downs

– Transport: 86 page downs (about a third of which you can skip)

– Server: 43 pages

What’s In a name?


WebSockets


WebSocket

It really is a Socket for the Web– It just works over proxies

Lets you do TCP easily in a web app– Establish the connection

– Send messages both ways

– Send messages independent of timing

– Close the connection

Two basic types: text and binary

Big Picture


WebSocketEstablish the connection


WebSocketTCP over HTTP, use the Upgrade: header


WebSocketBrowser Support – caniuse.com


JavaScript/Browser Client

Minimal Lifecycle– new WebSocket(url)

– pass in some functions onopen onmessage

– call send()

– call close()

Can connect to arbitrary servers, other than the page origin Server may enforce use of Origin header

JavaScript WebSocket Object


JavaScript/Browser ClientJavaScript WebSocket Object

[Clamp] if value is out of range, truncate it to closest in-range value for that primitive type.


JavaScript/Browser Client

Traverse connection lifecycle

Examine JavaScript client portion of Roger’s matrix demo


Java Server

Minimal Lifecycle– Handshake

– Messaging

– Close

All methods that deal with communication to the other endpoint are passed a javax.websocket.Session.

Has nothing to do with javax.servlet.http.HttpSession. HttpSession can be obtained from HandshakeRequest

Java Endpoint


Java Server

Passing Parameters

example URI “/bookings/JohnSmith”: guestID is “JohnSmith” Strings and primitives supported

Java Endpoint


Java Server

Two Styles Annotated

– The most commonly used

– Very easy to get started

– Throw it in the WAR and you’re done

Programmatic– If you don’t want to bake config into your .class files

– Must use Java inheritance

Java Endpoint


Java Server

Must bootstrap via ServletContextListener– Look up the javax.websocket.server.ServerContainer attribute

– It will be an instance of javax.websocket.server.ServerContainer

– Call addEndpoint(), two variants takes a class that is the annotated endpoint class takes a ServerEndpointConfig instance

Programmatic Endpoint


Java ServerAnnotated Endpoint


Java Server

The ServerEndpointConfig instance– getEndpointClass() returns

annotated endpoint class that extends javax.websocket.Endpoint

– getPath() returns the path, may contain url-template content

Programmatic Endpoint


WebSocket

Send or receive text or binary messages– As complete messages

– As sequence of partial messages

– Using traditional blocking I/O

Send or receive WebSocket messages as pure Java Objects (kinda like Serialization)

– Using encode/decode mechanism

– Encoder/decoder for all primitive types built in

Send and receive messages synchronously or asynchronously

Flexible Message Processing


Questions?

Ed Burns@edburns


The preceding is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract.It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.

Ed presents JSF 2.2 and WebSocket to Gameduell.

Technology

Transcript of Ed presents JSF 2.2 and WebSocket to Gameduell.