Ed presents JSF 2.2 and WebSocket to Gameduell.
Upcoming SlideShare
Loading in...5
×
 

Ed presents JSF 2.2 and WebSocket to Gameduell.

on

  • 1,926 views

Ed was asked to create a high level presentation regarding JSF best practices to present to a company that makes heavy use of JSF 2.0.

Ed was asked to create a high level presentation regarding JSF best practices to present to a company that makes heavy use of JSF 2.0.

Statistics

Views

Total Views
1,926
Views on SlideShare
1,926
Embed Views
0

Actions

Likes
1
Downloads
21
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.

Ed presents JSF 2.2 and WebSocket to Gameduell. Ed presents JSF 2.2 and WebSocket to Gameduell. Presentation Transcript

  • 1 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • WebSockets JSF 2.2 HTML5 Edward 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 3 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • HTML5 Friendly Markup Let the elegance of HTML shine through  DEMO 22 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • WebSockets 23 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 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.
  • WebSockets 25 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 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.
  • WebSocket Establish the connection 27 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • WebSocket TCP over HTTP, use the Upgrade: header 28 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • WebSocket TCP over HTTP, use the Upgrade: header 29 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • WebSocket TCP over HTTP, use the Upgrade: header 30 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • WebSocket Browser Support – caniuse.com 31 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 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.
  • JavaScript/Browser Client JavaScript WebSocket Object  [Clamp] if value is out of range, truncate it to closest in-range value for that primitive type. 33 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • JavaScript/Browser Client Examine JavaScript client portion of Roger’s matrix demo  Traverse connection lifecycle 34 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 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.
  • 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.
  • 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.
  • 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.
  • Java Server Annotated Endpoint 39 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • Java Server Annotated Endpoint 40 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 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.
  • 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.
  • Questions? Ed Burns @edburns 43 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  • 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.
  • 45 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.