Ed presents JSF 2.2 at a 2013 Gameduell Tech talk

1

Copyright © 2013, Oracle and/or its affiliates. All rights reserved.

Markup Changes Push
Technologies and Resource
Library Contracts
Edward Burns
@edburns
http://slideshare.net/edburns/
Consulting Member of Staff, Oracle

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

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

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/

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.

7


HTML5
Why all the fuss?

More cute logos at
http://www.w3.org/html/logo/
8


HTML5
Why all the fuss?

PAST AND PRESENT
SERVER

9


10


Classification
A Web App is a Distributed App
 Why?
– Multiple Computers
– Interconnections Between Them
– Shared State Among Them

 Today's production Web apps are extremely complex distributed

applications.

11


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.

12


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

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

14


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

15


16


HTML5
What’s in a name?
 Remember all the fuss about Ajax in 2006?
– Asynchronous
– JavaScript
– And
– XMLHttpRequest

17


HTML5
What’s in a name?
 Remember all the fuss about Ajax in 2006?
– Asynchronous
– JavaScript
– And
– XMLHttpRequest

 Ajax is a programming technique, not a single technology

18


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

 HTML4 is seen as a single technology

19


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
20


 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/
21


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

22


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

23


HTML5
Putting it in context
 For JSF 2.2, HTML5 means just the markup piece
 For JavaEE7 it means WebSocket and JSON

24


JSF 2.2 HTML 5 Friendly
Markup

25


New to JSF?
This is only a small part of 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.

26


JCP is an open process

JSF is an Open
Standard
27


What we tried to do with HTML5 in JSF 2.2
Same thing we do with every other new thing that comes along
 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

28


HTML5 Friendly Markup
DOCTYPE
 <facelets-processing> element

<faces-config-extension>
<facelets-processing>
<file-extension>.xhtml</file-extension>
<process-as>html5</process-as>
</facelets-processing>
</faces-config-extension>

29


DOCTYPE

30


Just Passing Through

Bullet Through Jack, 1964
© Dr Harold Edgerton
31


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>

32


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

33


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.
34


 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”
35


Pass Through Attributes
 HTML5 users need data-* attributes (and other non-standard

attributes)
 Two styles
– nested attribute
– namespaced attribute

36


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.

37


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

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

component.

38


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>

39


 Attributes type=“email” placeholder=“Enter email” rendered on markup

of enclosing component

40


 DEMO

41


Non-HTML5 Interlude
Resource Library Contracts

42


Facelets Review

T e Facelets Gazet e
<ui:define name="headline">
Today's News
</ui:define>

_template.html
Sit

N avigat on
●

Events

●

D ocs

●

Forums

<ui:define name="story">
Facelets is now a part
of JSF 2.0...
</ui:define>

About Contact Sit M ap

43


template client
greeting.html

Facelets Review

T e Facelets Gazet e

Insertion points

Template File name

Sit

_template.html

N avigat on
●

Events

●

D ocs

●

Forums

About Contact Sit M ap

Resources
css classes, scripts, images

44


A Contract is Born

contractA
• Declared Templates
• Declared Insertion Points
• Declared Resources

45


Loading Conventions

<web-app-root>/contracts
contractA
contractB
contractC

46


Loading Conventions

contractA
contractB
contractC

47


JAR ﬁles in WEB-INF/lib
contractD
contractE
contractF

Loading Conventions

contractA

contractD

contractB
contractC

contractE
contractF

Set of available contracts

48


Loading Conventions



contractA

contractD

contractB
contractC

contractE
contractF


Facelet 1

49


Facelet 2

Facelet 3

Loading Configuration


contractA

contractD

contractB
contractC

contractE
contractF


faces-conﬁg.xml

Facelet 1

50


Facelet 2

Facelet 3

Loading Configuration


contractA

contractD

contractB
contractC

contractE
contractF


faces-conﬁg.xml

Facelet 1
<f:view contracts="contractA">
...

51


Facelet 2

Facelet 3

HTML5 Push Technologies
EventSource and WebSocket

52


EventSource (aka SSE) vs. WebSocket
Keep in touch
 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)

53


EventSource and JSF
Stock Ticker
 DEMO

54


WebSocket and JSF
CANVAS matrix
 DEMO

55


Questions?

Ed Burns
@edburns

56


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.

57


58


Ed presents JSF 2.2 at a 2013 Gameduell Tech talk

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Ed presents JSF 2.2 at a 2013 Gameduell Tech talk

Similar to Ed presents JSF 2.2 at a 2013 Gameduell Tech talk (20)

More from Edward Burns

More from Edward Burns (20)

Recently uploaded

Recently uploaded (20)

Ed presents JSF 2.2 at a 2013 Gameduell Tech talk

Editor's Notes