JSF2 and Server-Side-Pushjj

<Insert Picture Here>

JavaServer Faces and SSP (server-side-push)Matthias Wessendorf | Oracle Corp.http://matthiaswessendorf.wordpress.comhttp://twitter.com/mwessendorf

Matthias Wessendorf

• Oracle Corporation• Apache Software Foundation• ASF Member• Committer and PMC @Apache MyFaces• Incubator (Mentor for some projects)

• Author• (German) Java- and Eclipse-Magazine• Books on Struts, J2ME & WebServices

• SpeakerAjaxWorld• JAX, W-JAX• Oracle Open World• ApacheCon• JavaOne• Ajax World

Agenda

• Introduction• Comet / Server-Side Push• Comet solutions• Bayeux• Generic • JavaServer Faces

• comet.NEXT• Discussion

Agenda

• (Quick) Introduction• Comet / Server-Side Push• Comet solutions• Bayeux• Generic • JavaServer Faces


Why push ?

Google Wave – comet enabler ?

Introduction

• Polling• annoying..., traffic on the server chatty solution

• Push• Don‘t call us, we call you !

• Use Cases• collaborative tooling

• sharing documents

• chat

• streaming data ( football/soccer, ...)

• trading systems ( auctions)

• live reporting

• monitoring ( server console)

• pushing async data into the client ( credit card verification)

collaborative tooling

Push when you need it

Agenda

• Introduction

• Comet / Server-Side Push• Comet solutions• Bayeux• Generic • JavaServer Faces


Comet / server side push

Comet / server side push

• polling VS long-polling VS streaming

polling long-poll push

latency -* + + +proxyservers

OK OK some issues**

live connection ++ - -

* depends on the interval...** fallback to long-polling

Comet – Some problems...

• Scalability• Java NIO ...• Container specific APIs FIXED with Servlet 3.0

• Hard part: Client side architecture• How to integrate the pushed data ?

pushed data callback:<script> _update_function(“html_id“, JSONpayload);</script>• client side framework

Comet – simpler integration

Agenda

• Introduction• Comet / Server-Side Push

• Comet solutions• Bayeux• Generic • JavaServer Faces


Agenda

Bayeux

Bayeux

• Bayeux Specification• JSON-based protocol for transporting asynchronous msgs• pub/sub „JMS over http“

• Client and Server APIs

• Client:connect("/context/servlet");subscribe("/someChannel", javaScriptCallback);

• Server:Channel channel = bayeux.getChannel("/someChannel“);Message msg = bayeux.newMessage(client);

msg.put(„city", "Poznan");msg.put("event", "GeeCon 2010");

channel.publish(message);

What the Bayeux ???

• Bayeux Implementations• Server:• Jetty• Tomcat (smaller and cleaner API)• Glassfish / Grizzly• Weblogic (HTTP Publish-Subscribe Server)

Perl, Pyhton,...• Client:• dojo toolkit• jQuery-based (two are there)

• Issues• not a real Java standard (e.g. JSF / Servlet)• different APIs for all implementations...

Bayeux with JSF ?

• Not yet there• Steps for a possible JSF-Bayeux integration:• pick a server-side API• doing it again ? *

• pick a client-side API• resue jQuery ?• reuse dojo ?

• Avoid users from writing JavaScript• Offer a (behavioral) tag:

<mylib:bayeux channel="/someChannel" callback="myCallbackJavaScriptFunction"

.../>

* Servlet 3.0 will help here...

Agenda

Generic solution

Atmosphere

• An Ajax Push (Comet) Framework• „Comet for the masses“ It is simple!

• Solves the problem of different container APIs• Servlet 3.0 will help, but ...• Atmosphere provides a generic API for different

containers• No need to port your application to a specific server• Runs on any Servlet 2.5 container ( Apache Tomcat 6)

• Uses Java 5 @nnotations• Supports REST (JSR 311) • Jersey implementation

• Open Source Framework (CDDL)

Atmosphere

* URL https://atmosphere.dev.java.net/

DEMO

...later

Agenda

JavaServer Faces

JavaServer FacesWhat is it really ?

• Lightweight and extensible Web-Framework• POJO, replace the bits (navigation, view-technology,...)

• API for UI Component Development• Several 3rd party component suites available

• Goals• Make Java-Web-Development simple• Tooling (JDeveloper, Netbeans, Eclipse, ...)

• Implementations• Mojarra RI, hosted on java.net• Apache MyFaces

JavaServer Faces

Page Template Server Side

<f:view>

<h:form> <h:inputText value=“#{b.value}” /> <h:inputText … /> <h:inputText …. /> … <h:commandButton … /></h:form>

</f:view>

Servlet

JSF Lifecycle

In Memory Tree

View Root

Form

UI Component

Renderer

JavaServer Faces and Comet

• Integration into JSF...• Polling:• JSF lifecycle

• Push and long-polling:• extra „channel“ for comet (long-living connections)• client architecture ...• „client side rendering“

JavaServer Faces and Comet

Comet solutions for JSF

• Good news!• There are some JSF/Comet solutions already today!• more to come ?

• IceSoft IceFaces• PrimeFaces (OpenSource community)

• Do it yourself (with Atmosphere)

• Oracle ADF Faces Rich Client

JSF2 and Atmosphere

DEMO

ADF Faces

• ADF Faces Rich Client• Rich Widgets, Web 2.0 components

• more than 90 JSF components• No InputSuggest ...

• more than 30 helpers• printable view, validators, excel export, ...

• Ajax• Ajax integration, API for server AND client

• Requirements• JavaServer Faces 1.2• Apache MyFaces Trinidad 1.2.x

RIA – Rich Internet Applications

http://tinyurl.com/adf-faces-live

ADF Faces

• ADF Faces Rich Client• Rich Widgets, Web 2.0 components

• more than 90 JSF components• No (yet) InputSuggest ...

• more than 30 helpers• printable view, validators, excel export, ...

• Ajax• Ajax integration, API for server AND client

• Requirements• JavaServer Faces 1.2_x• Apache MyFaces Trinidad 1.2.x

ADF Faces - ArchitectureClient Side Server Side

Label1

Label2

Label3

OK

DOM

Peer Objects

Document

Form

Element

Servlet

JSF Lifecycle

In Memory Tree

View Root

Form

UI Component

Renderer

ADF Faces - Architecture

client-side components

Label1

Label2

OK

<af:panelLabelAndMessage labelAndAccessKey="Label 2"> <af:inputText autoTab="true" simple="true" id="id1" maximumLength="3" columns="3" label="first"/> <af:inputText autoTab="true" simple="true" id="id2" maximumLength="3" columns="3" label="second"/> <af:inputText autoTab="true" simple="true" id="id3" maximumLength="3" columns="3" label="third"/></af:panelLabelAndMessage>

<af:inputText id="idInputText" label="Label 1" value="#{myBean.value}"/>

id1

id2

Id3

ADF Faces – server-side Push

• Doing „comet“ is hard• JavaScript guy...• Server-side guy...• Tomcat vs. Jetty vs. WLS vs. Glashfish vs. WhatNot

• Active Data Support is integrated into ADF• important interface(s):• ActiveDataModel• ActiveDataListener

• custom implementation possible ...• based on JSF‘s declarative model• no special handling in the view

ADF Faces – server-side Push

DEMO

Agenda



comet.NEXT – Servlet 3.0

•Part of Java EE 6•ServletRequest interface• startAsync() : AsyncContext• startAsync(request, response) : AsyncContext• isAsyncSupported() : boolean

•AsyncListener interface• onComplete(asyncEvent) : void• onTimeout(asyncEvent) : void

comet.NEXT – Servlet 3.0

• Async example:

service(Request req, Response res) {

AsyncContext actx = req.startAsync();

Runnable runnable = new Runnable() {

public void run() {

Message m = jmsTemplate.receive();

res.write(m);

req.complete();

}

};

executor.submit(runnable);

}

Defensive programming:request.isAsyncSupported();request.isAsyncStarted();request.getAsyncContext();

comet.NEXT – HTML 5

• WebSocketsvar socket = new WebSocket("ws://myserver.com");

socket.onopen = function(evt) {...};socket.onmessage = function(evt) {

alert( "Received Message: " + evt.data);};socket.onclose = function(evt) {...};

• Usagesocket.postMsg(„Hallo Server“);socket.disconnect();


• Server-Send-Events• standardizes the format of (continuous) data stream• native in the browser; cross-browser ...

• new HTML element „eventsource“:

<eventsource src="http://my.server.com" onmessage="alert(event.data)" />• Data property, contains JSON:

data: {'conference' : {'city': 'Poznan', 'event': 'GeeCon-2010'},'id' : '12345679'}


• Today• Lift Framework• Kaazing Gateway• Opera / Safari 4* / WebKit / Firefox Minefield*• Jetty 7.x.y / 8• Atmosphere (trunk)• Glassfish 3.x (trunk/branch)

• Future–More servers...– IE 11 ?? :-)

* https://bugzilla.mozilla.org/show_bug.cgi?id=472529

Agenda


• comet.NEXT

• Discussion

Discussion

• Where are we today?• Improving the UI experience

• Are you using “push”? Today ?

• Simulating FAT clients (WebSockets)

XMPP ??

The browser == Application Platform

Questions

• and (maybe) answers

Links and Resources

• ADF• http://www.oracle.com/technology/products/adf/

adffaces/index.html• http://tinyurl.com/adf-faces-live

• Bayeux / Cometd• http://cometdproject.dojotoolkit.org/

• HTML 5 WebSockets• http://dev.w3.org/html5/spec/Overview.html#comms

• Slides:• http://www.slideshare.net/mwessendorf

Thank you!

[email protected]

BLOG:matthiaswessendorf.wordpress.com

JSF2 and Server-Side-Pushjj

Documents

Transcript of JSF2 and Server-Side-Pushjj