Contenu connexe Similaire à Ed presents JSF 2.2 and WebSocket to Gameduell. (20) Plus de Edward Burns (20) Ed presents JSF 2.2 and WebSocket to Gameduell.3. 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
3
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
4. Speaker Qualifications – Ed Burns
And non-qualifications
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
4
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
5. Speaker Qualifications – Ed Burns
Gaming credentials
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/
5
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
6. 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.
6
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
7. HTML4
What’s in a name?
What do people mean when they say HTML4?
– IE6
– Not very high performance JavaScript
– Lots of browser tricks
– Use of native plugins is common
7
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
8. HTML5
What’s in a name?
What do people mean when they say HTML5?
– “Modern” browsers
– A gigantic collection of related technologies
Canvas
Markup
Input controls
Offline storage
Web components
EventSource
Application Cache
DOM
WebSocket
JavaScript
JSON
CSS3
8
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
Geolocation
XMLHttpRequest Level 2
9. HTML5
Is it really a big deal?
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/
9
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
10. HTML5
Is it really a big deal?
The death of the browser plugin: April 2010
http://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
10
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
11. HTML5
Putting it in context
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
11
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
12. HTML5
Putting it in context
For JSF 2.2, HTML5 means just the markup piece
For JavaEE7 it means WebSocket and JSON
12
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
13. HTML5 Friendly Markup
The best part of Wicket comes to JSF
This is a JSF page
<!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>
13
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
14. HTML5 Friendly Markup
Let’s get back to basics
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
14
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
15. HTML5 Friendly Markup
Let the elegance of HTML shine through
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.
15
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
16. HTML5 Friendly Markup
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”
16
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
17. HTML5 Friendly Markup
Pass Through Attributes
HTML5 users need data-* attributes (and other non-standard
attributes)
Two styles
– nested attribute
– namespaced attribute
17
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
18. HTML5 Friendly Markup
Pass Through Attributes: nested attribute
<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.
18
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
19. HTML5 Friendly Markup
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.
19
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
20. HTML5 Friendly Markup
Pass Through Attributes: namespaced attribute
<!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>
20
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
21. HTML5 Friendly Markup
Pass Through Attributes: nested attribute
Attributes type=“email” placeholder=“Enter email” rendered on markup
of enclosing component
21
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
22. HTML5 Friendly Markup
Let the elegance of HTML shine through
DEMO
22
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
24. WebSockets
What’s In a name?
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
24
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
26. WebSocket
Big Picture
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
26
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
28. WebSocket
TCP over HTTP, use the Upgrade: header
28
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
29. WebSocket
TCP over HTTP, use the Upgrade: header
29
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
30. WebSocket
TCP over HTTP, use the Upgrade: header
30
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
32. JavaScript/Browser Client
JavaScript WebSocket Object
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
32
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
35. Java Server
Java Endpoint
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
35
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
36. Java Server
Java Endpoint
Passing Parameters
example URI “/bookings/JohnSmith”: guestID is “JohnSmith”
Strings and primitives supported
36
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
37. Java Server
Java Endpoint
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
37
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
38. Java Server
Programmatic Endpoint
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
38
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
41. Java Server
Programmatic Endpoint
The ServerEndpointConfig instance
– getEndpointClass() returns
annotated endpoint
class that extends javax.websocket.Endpoint
– getPath() returns the path, may contain url-template content
41
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
42. WebSocket
Flexible Message Processing
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
42
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
44. 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.
44
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
Notes de l'éditeur It's called Web*SOCKET* for a good reason, it's really just a socket that goes over web protocols. 3. server: JCP: Java API for (by the way, you can use the same java API for client as well) I guess they thought that restriction from Applet was too constraining.I don’t like the attack vector this creates. Now if you fall victim to a cross site scripting attack, there is nothing stopping the aggressor code from opening up a socket to another server and sending it whatever data it wants.Maybe you should keep that old copy of NCSA Mosaic 1.0 around for when you make online purchases.Just posted a question on StackOverflow about this last night.