Ed presents JSF 2.2 at a 2013 Gameduell Tech talk

Markup Changes Push Technologies and Resource Library ContractsEdward 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

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.

HTML5Why all the fuss?

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

HTML5Why all the fuss?

PAST AND PRESENT

SERVER

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

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.

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

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

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

Remember all the fuss about Ajax in 2006?– Asynchronous

– JavaScript

– And

– XMLHttpRequest

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

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

What’s in a name?

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

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?

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

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

Putting it in context

JSF 2.2 HTML 5 Friendly Markup

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

JSF is an Open Standard

JCP is an open process

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

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

HTML5 Friendly MarkupDOCTYPE

Just Passing Through

Bullet Through Jack, 1964© Dr Harold Edgerton

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>

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>

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

Non-HTML5 Interlude

Resource Library Contracts

Resource Library ContractsFacelets Review

Resource Library ContractsA Contract is Born

Resource Library ContractsLoading Conventions

Resource Library ContractsLoading Configuration

HTML5 Push Technologies

EventSource and WebSocket

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

EventSource and JSF

Stock Ticker

WebSocket and JSF

CANVAS matrix

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 at a 2013 Gameduell Tech talk

Technology

Success Factors and Pitfalls of Cross-Platform Games Michael Kalkowski Co-Founder & Creative Director GameDuell

JSF & REST

JSF, Facelets, Spring-JSF & Maven

Faces Flow in JSF 2.2 – Part 1: Basics - Core Servletscourses.coreservlets.com/Course-Materials/pdf/jsf/jsf2/JSF-2.2... · Faces Flow in JSF 2.2 ... variable • Configuring flows

JSF 2: View Params, GET Requests, & Bookmarkingcourses.coreservlets.com/Course-Materials/pdf/jsf/jsf2/JSF2-View-P... · JSF 2: View Params, GET Requests, & Bookmarking JSF 2.2 Version

Mastering JSF

Ed presents JSF 2.2 and WebSocket to Gameduell

JavaServer Faces (JSF) Basicsgeneticmail.com/.../jsf/JSFBasics_speakernoted.pdf · (JSF) Basics OK, this session is about JSF basics. As some of you probably know, JSF is an extremely

IV1201, JavaServer Faces, JavaServer Pages...Lecture 11: JavaServer Faces (JSF), JavaServer Pages (JSP) 2 Content • Overview of JSF and JSP • JSF Introduction • JSF tags •

Manual Jsf

JSF DEFINICIONES

Struts y JSF Sesión 4: Funcionamiento de JSF

Jsf tutorial

JSF Fundamentals

JSF vs. GWT? JSF und GWT!

GameDuell Publisher LeitfadenPaypal, ClickandBuy und Paysafecard. Was macht GameDuell für Kunden attraktiv? 2 4 4. Bei uns erhalten Sie für jeden Probe*- und Gewinn-Spieler** eine

CENNIK VESSER 2020 V4 · 2020. 10. 14. · (jsf 513 sjyyt (jsf 513 sjyyt (jsf 513 sjyyt (jsf 513 sjyyt 06 pp gr nj

JSF 2: Introduction and Overview - Custom Training …courses.coreservlets.com/Course-Materials/pdf/jsf/jsf2/JSF2... · JSF 2: Introduction and Overview JSF 2.2 Version Originals

JavaServer Faces, JSF - KTH2 JSF, Content • JSF Introduction • JSF tags • Managed Beans • Expression language • JSP Standard Tag Library (JSTL) 3 A Simple Example The example

Hypermedial JSF Tools Tutorial - Build a JSF 2.0 Application