Ed presents JSF 2.2 at a 2013 Gameduell Tech talk
-
Upload
edward-burns -
Category
Technology
-
view
412 -
download
0
Transcript of Ed presents JSF 2.2 at a 2013 Gameduell Tech talk
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.1
Markup Changes Push Technologies and Resource Library ContractsEdward Burns@edburns http://slideshare.net/edburns/Consulting Member of Staff, Oracle
Markup Changes Push Technologies and Resource Library ContractsEdward Burns@edburns http://slideshare.net/edburns/Consulting Member of Staff, Oracle
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.4
My plan for your time investment
HTML5: Why all the fuss?
What we tried to do with HTML5 in JSF 2.2
Non HTML5 Interlude: Resource Library Contracts
Push Technologies: EventSource and WebSocket
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.5
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
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.6
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
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.7
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.
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.8
HTML5Why all the fuss?
More cute logos at http://www.w3.org/html/logo/
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.9
HTML5Why all the fuss?
PAST AND PRESENT
SERVER
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.10
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.11
Classification
Why?– Multiple Computers
– Interconnections Between Them
– Shared State Among Them
Today's production Web apps are extremely complex distributed applications.
A Web App is a Distributed App
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.12
Yeah, So What?
Why does this classification matter?– Because History Matters
To understand the current state of web applications, we must go back to the history of distributed applications, and of the Internet itself.
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.13
What Makes a Distributed App
Finding the best allocation of processing tasks to processing nodes– User Interface
– Domain Logic
– Application Logic
– Data Persistence
– Communication
– Reliability, Security
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.14
What Makes a Distributed App
Finding the best allocation of processing tasks to processing nodes– User Interface
– Domain Logic
– Application Logic
– Data Persistence
– Communication
– Reliability, Security
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.15
UI Considerations
The UI is the hardest part to get right The technology for building the UI is changing very rapidly, and will
continue to change for the forseeable future The technology for the other aspects of application development is
less volatile, more mature. The major software stack and device vendors are competing on the
basis of their UI technology, as the gateway to the rest of their stack
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.16
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.17
HTML5
Remember all the fuss about Ajax in 2006?– Asynchronous
– JavaScript
– And
– XMLHttpRequest
What’s in a name?
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.18
HTML5
Remember all the fuss about Ajax in 2006?– Asynchronous
– JavaScript
– And
– XMLHttpRequest
Ajax is a programming technique, not a single technology
What’s in a name?
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.19
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
HTML4 is seen as a single technology
What’s in a name?
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.20
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
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.21
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?
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.22
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?
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.23
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
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.24
HTML5
For JSF 2.2, HTML5 means just the markup piece For JavaEE7 it means WebSocket and JSON
Putting it in context
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.25
JSF 2.2 HTML 5 Friendly Markup
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.26
New to JSF?
It’s even just a small part of what’s new in JSF 2.2. If you’re new to JSF, start by looking at JSF 2.0. That’s the most recent big blockbuster release.
This is only a small part of JSF
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.27
JSF is an Open Standard
JCP is an open process
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.28
What we tried to do with HTML5 in JSF 2.2
Integrate the new thing while staying true to our core strengths. Two high level areas of integration
– DOCTYPE: html5 doctype is the default
– Markup changes “get your hands off my markup” Page developer vs. Web Developer
Same thing we do with every other new thing that comes along
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.29
HTML5 Friendly Markup
<facelets-processing> element <faces-config-extension>
<facelets-processing>
<file-extension>.xhtml</file-extension>
<process-as>html5</process-as>
</facelets-processing>
</faces-config-extension>
DOCTYPE
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.30
HTML5 Friendly MarkupDOCTYPE
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.31
HTML5 Friendly Markup
Just Passing Through
Bullet Through Jack, 1964© Dr Harold Edgerton
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.32
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>
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.33
HTML5 Friendly Markup
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
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.34
HTML5 Friendly Markup
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
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.35
HTML5 Friendly Markup
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”
Let the elegance of HTML shine through
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.36
HTML5 Friendly Markup
HTML5 users need data-* attributes (and other non-standard attributes)
Two styles– nested attribute
– namespaced attribute
Pass Through Attributes
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.37
HTML5 Friendly Markup
<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
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.38
HTML5 Friendly Markup
<h:outputText value="Simple outputText">
<f:passThroughAttribute name=“data-required” value=”true" />
</h:outputText>
Attribute data-required=“true” rendered on markup of enclosing component.
Pass Through Attributes: nested attribute
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.39
HTML5 Friendly Markup
<!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
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.40
HTML5 Friendly Markup
Attributes type=“email” placeholder=“Enter email” rendered on markup of enclosing component
Pass Through Attributes: nested attribute
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.41
HTML5 Friendly Markup
DEMO
Let the elegance of HTML shine through
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.42
Non-HTML5 Interlude
Resource Library Contracts
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.43
Resource Library ContractsFacelets Review
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.44
Resource Library ContractsFacelets Review
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.45
Resource Library ContractsA Contract is Born
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.46
Resource Library ContractsLoading Conventions
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.47
Resource Library ContractsLoading Conventions
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.48
Resource Library ContractsLoading Conventions
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.49
Resource Library ContractsLoading Conventions
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.50
Resource Library ContractsLoading Configuration
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.51
Resource Library ContractsLoading Configuration
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.52
HTML5 Push Technologies
EventSource and WebSocket
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.53
EventSource (aka SSE) vs. WebSocket
What’s the difference between SSE and WebSockets?– WebSocket allows full duplex, SSE does not
– WebSocket has an IETF protocol in the middle, SSE does not
– Both interact with JavaScript via a W3C Standard API
– Both allow the server to update the client
– Both run over HTTP(s) proxy really well
– EventSource not supported on IE at all (there is a polyfill)
Keep in touch
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.54
EventSource and JSF
DEMO
Stock Ticker
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.55
WebSocket and JSF
DEMO
CANVAS matrix
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.56
Questions?
Ed Burns@edburns
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.57
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.
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.58