horseheadssolidInternet and Web Development

Nov 10, 2013 (4 years and 6 months ago)


Discount for
JAX London


In the world of modern software development, there's no
shortage of web application frameworks for Java, and their
popularity is undeniable. In fact, often the question isn’t ‘is a
framework right for my project?’ but ‘WHICH framework is
right for my project?’
The rise of the application framework is intrinsically lin-
ked to the popularity of graphical user interfaces (GUIs), for
the simple reason that GUIs promote a standard application
structure. In this new world of GUIs, Struts 1 was one of the
! rst Java web application tools. It used and extended the
Java Servlet API, to separate the model from the view and the
controller, and was eventually donated to Apache in 2000
(where it became known as Jakarta Struts.) At the time, the
two options were hand-coding everything, or use Struts 1.
Unsurprisingly, Struts 1 enjoyed huge popularity in the Java
world – even giving rise to the WebWork framework, which
was ultimately merged into Struts 2.
Nowadays, Struts is far from the only MVC framework on
the market, with Spring MVC, Stripes, Play!, JSF, ZK Fra-
mework, Tapestry and others, all providing stiff competition
– not to mention frameworks that move beyond the realms
of MVC, and even the cross-platform Adobe Flex. The list
is endless! Inevitably, there are no shortage of ‘Which Is the
Best Java Framework?’ blog posts, but the fact that there
Java Web Frameworks
are so many developers willing to ! ght their corner for their
favourite Java framework, proves how essential – and prized
- frameworks have become to the modern developer.
In this issue of Java Tech Journal, we look at a range of frame-
works available to the Java developer. We deep dive into JSF,
ZK and Wicket, which are all component-based frameworks,
meaning that artifacts that are rendered on the page are ! rst de-
veloped as individual components. Generally, code is ignorant
of the HTTP request cycle and processing. Struts2 and Stripes
are “action” frameworks, so users can map URLs to activities
and code on the back end. As a general rule, developers interact
with the HTTP request cycle directly.
However, these are only the basic differences! Stripes also
uses Java technologies such as annotations and generics that
were introduced in Java 1.5, to achieve "convention over
con! guration;” and the ZK Ajax web application framework
is a server-centric framework, geared towards the creation of
graphical user interfaces for web applications.
In this issue of Java Tech Journal, we will deep dive into
each of these frameworks, with articles by Oracle’s Principal
Software Engineer, Roger Kitain; ‘Stripes ...and Java Web
Development is Fun Again’ author Fred Daoud; co-author of
Struts in Action Ted Husted – and more!
Jessica Thornsby

How to incorporate HTML5 Server Sent Events into a JSF UI
Roger Kitain
The Fun Web Framework
Jeremy Thomerson
Develop dynamic and robust Java web apps with ZK
Timothy Clare
A lean, mean Java web framework
Fred Daoud
A practical introduction
Ted Husted


by Roger Kitain
HTML5 Server Sent Events (SSE) is a W3C speci!cation that
de!nes a standard API for opening an HTTP connection for re
ceiving push noti!cations (data) from the server. Operationally,
it works the same as Comet. However, Comet attempts to fa
cilitate “server push” over the existing HTTP request/response
protocol through various hacks such as appending scripts to
iframes. The SSE speci!cation introduces a new EventSource
HTML element that can be used with JavaScript to establish a
connection to a server end point. The client also registers event
callback JavaScript functions for handing “pushed” data from
the server. Let’s look at a client example (Listing 1). It shows
a simple page that will establish a connection to a server end-
point when the page is loaded. On line 4, we create a new
EventSource object, feeding it the URL of a server endpoint.
The server endpoint could be a PHP script, NodeJS imple
mentation, or even a Java Servlet. When a new EventSource
instance is created, an initial GET request to the server end-
point is done to establish the initial connection. On line 5,
we register a message callback that will populate the events
div with the event data. We could have also registered a mes-
sage handler on the EventSource instance this way:
addEventListener('message', 'msgCallback', false);
. As data is
pushed from the server, this callback will update the div area
in the page. It is also possible to handle multiple event types
from the server:
source.addEventListener('ticker', 'tickerCallback', false);
source.addEventListener('time', 'clockCallback', false);
The event data for these events would be pushed over the
same EventSource connection. It should be mentioned that
SSE (namely the EventSource API) is not yet available in all
browsers. Google Chrome is one such browser that has SSE
Server requirements
The SSE speci!cation speci!es requirements for the server re-
sponse. The speci!cation states that the response content type
must be
. To send a single line of data (Hello
data: Hello World!\n\n
. To send multiple lines of
data: This is the first line\n
data: This is the second line\n\n
Here, a single string of data concatenated with the newline
character will be sent to the client side event handler function.
It is also possible to send the response as JSON data:
data: {\n
data: "msg":"hello world",\n
data: "id:"12345\n
data: }\n\n
Listing 1: Client page
1. <!DOCTYPE html>
2. <head>
3. <script type='text/javascript'>
4. var source = new EventSource('serverevents');
5. source.onmessage = function(event) {
6. var ev = document.getElementById('events');
7. ev.innerHTML += event.data;
8. };
9. </script>
10. </head>
11. <body>
12. <div id=”events” />
13. </body>
13. </html>
Introducing the world to composite components
JSF 2 and HTML5 server
sent events
The world of HTML5 offers many features to facilitate the creation of exciting and dynamic web sites. There are
web communication speci!cations under the HTML5 “umbrella” that de!ne a standard way to perform real-time
communication between browser clients and servers. One such speci!cation is the Server Sent Events speci!ca-
tion. In this article, we will explore how we can incorporate HTML5 Server Sent Events into a JavaServer Faces
(JSF) User Interface using some of the new component features available since JSF 2.0.


In all cases, notice that two successive newline characters end
the response.
The user interface
We’ll look at a simple stock view application (
!gure 1
) that
will cause the streaming of three event types to the JSF user
interface. This user interface consists of three areas of infor
mation. The !rst area is the “time” bar. The second area is
the stock quote area that consists of an input !eld to enter
stock quotes, buttons to retrieve stock quote information and
reset (clear) the input area, and a table that displays the stock
quote information “real-time” as it
is updated on the server. The quote
numbers are randomly generated
on the server, but real quotes could
be retrieved by tying into a quote
service. The third area consists of a
link to retrieve RSS news feeds for
the stocks, and a scrollable area that
displays the news feed. The news
feed is also pushed from the server
“real-time”. Corresponding to these
three areas are three SSE event types:
time, ticker
. When the user
interface is !rst displayed, the clock
will tick real time. You enter space
delimited stock symbols, press the
Get Quotes
button and a table is dy
namically displayed with streaming
quotes. Pressing the Get Stock News
link causes news feeds to stream
from the server.
The user interface markup
JSF 2.0 introduced three big features that make it easier to
develop dynamic user interfaces.
Facelets becomes the primary view technology
Composite components make it easier to develop complex
Ajax support
Let’s see how these three features are used in this user in
terface. Listing 2 is the markup for the main user interface.
Figure 1: Stock view application
Listing 2: stock.xhtml facelets view
1. <!DOCTYPE html>
2. <html xmlns="http://www.w3.org/1999/xhtml"
3. xmlns:h="http://java.sun.com/jsf/html"
4. xmlns:f="http://java.sun.com/jsf/core"
5. xmlns:ui="http://java.sun.com/jsf/facelets"
6. xmlns:h5="http://java.sun.com/jsf/composite/h5"
7. xmlns:ez="http://java.sun.com/jsf/composite/stockinfo">
8. <h:head>
9. <meta charset="UTF-8" />
10. </h:head>
12. <h:body style="background: #fefeef">
14. <h:form>
15. <h:panelGrid styleClass="title-panel">
16. <h:panelGrid columns="2" cellpadding="20">
17. <h:outputText value="S t o c k V i e w" styleClass="title-panel-text"/>
18. </h:panelGrid>
19. <h:outputText value="Powered By JavaServer Faces 2.1 and Html 5

Server Sent Events "
20. styleClass="title-panel-subtext"/>
21. </h:panelGrid>
23. <h:outputStylesheet name="stylesheet.css" />
25. <h5:sse url="/JSFStock1/sse/stockticker" events="{stock:stockHandler,

27. <br/>
28. <ez:clock/>
29. <br/>
30. <br/>
31. <ez:stock/>
33. <h:messages/>
35. </h:form>
37. <a href="doc.xhtml">Documentation</a>
38. </h:body>
39. </html>


This user interface uses four composite components. We’ll
look at these in more detail later on, but I summarize them
: Server Sent Events component used to establish a con-
nection to a server end point.
: Clock component displays the ticking time bar
: Stock component that produces the input !eld for
entering stock symbols, the two buttons, and a placeholder
for the dynamic table that will display stock ticker infor-
: Component that produces the link
Get Stock News

and a placeholder for the dynamic scrollable area that will
display stock news. This component is actually contained
in the implementation of the stock component which is
why you don’t see it in this view.
The !rst thing you’ll notice is that on line 1 we’re using an
HTML5 document type declaration. That makes this docu
ment an HTML5 polyglot document because it has an HTML5
document type /namespace and well-formed XHTML syntax
– which works great for JSF views. This would allow us to use
other HTML5 features as well. Let’s take a look at the other
relevant sections of this view:
Lines 3 – 7: Here we declare the namespaces used in the
user interface. Lines 3 and 4 are just the standard JSF
namespaces. Line 5 is the Facelets namespace. Line 6
declares the namespace that we’ll use for our SSE compo-
nent. Line 7 declares the namespace that will be used for
clock, stock
Line 25: This is the usage of the SSE component. This com-
ponent uses two attributes:
: The URL of the server endpoint that we are connect-
ing to
: Speci!es
event type : event handler
pairings. The
event handler
is the name of the JavaScript function that
will handle the associated
event type
data coming from
the server.
Line 28: This is the usage of the
Line 31: This is the usage of the
It’s easy for a page author to use well de!ned components in a
view. Now let’s see how these components are de!ned.
The composite components
Recall that JSF composite components consist of two areas:
interface section
implementation section
section is where you de!ne the usage contract
for the component. It is where you de!ne the attributes that
a page author would use with your component. The
section is the code that produces the component.
It may consist of HTML markup, JavaScript and/or other JSF
components. Let’s take a look at the composite components
that are used in this application.
The SSE composite component
The Server Sent Events (SSE) composite component is used
to establish a connection to a server endpoint. As mentioned
earlier, this component has two attributes. Let’s see how this
component is implemented in Listing 3, and let’s take a look
at the relevant sections of this component:
Lines 4 – 7: This is just our namespace declarations. Line
7 is declaring a
namespace that will be used to
de!ne the relevant sections of our composite component.
Lines 16 – 19: This is where we de!ne the
usage contract for our composite component. On line 17
we de!ne a required
attribute whose value will be the
server endpoint. On line 18 we de!ne the
whose value will contain
event type : event handler name

mappings as shown earlier.
Lines 21 – 26: This is the implementation of the compos
ite component. JavaScript and JSF work together nicely to
create dynamic components. On line 22, we are loading
a small JavaScript library that contains functions for per
forming SSE operations for JSF. Notice that we’re using
Listing 3: sse.xhtml – SSE composite com-
1. <!DOCTYPE html>
3. <html xmlns="http://www.w3.org/1999/xhtml"
4. xmlns:h="http://java.sun.com/jsf/html"
5. xmlns:f="http://java.sun.com/jsf/core"
6. xmlns:ui="http://java.sun.com/jsf/facelets"
7. xmlns:composite="http://java.sun.com/jsf/composite">
8. <head>
10. <title>Server Sent Event Composite Component</title>
12. </head>
14. <body>
16. <composite:interface>
17. <composite:attribute name="url" required="true"/>
18. <composite:attribute name="events" required="false"/>
19. </composite:interface>
21. <composite:implementation>
22. <h:outputScript name="js/jsf-sse.js" target="head" />
23. <script type="text/javascript">
24. JSF.sse.connect("#{cc.attrs.url}", #{cc.attrs.events});
25. </script>
26. </composite:implementation>
28. </body>
30. </html>


Listing 4: jsf

the JSF SSE JavaScript
1. if (!JSF) {
4. * The top level global namespace for JavaServer Faces Server Sent Event
5. * functionality.

6. * @name JSF
7. * @namespace
8. */
9. var JSF = {};
12. * The namespace for Server Sent Event functionality.

13. * @name JSF.sse
14. * @namespace
15. * @exec
16. */
17. JSF.sse = function() {
19. var eventSource = null;
21. var getEventSource = function getEventSource(url) {
22. url = 'http://' + document.location.host + url;
23. eventSource = new EventSource(url);
24. };
26. return {
29. * Connect to a server end point.

30. * <p><b>Usage:</b></p>
31. * <pre><code>
32. * JSF.sse.connect(url, {events:

* 's t o c k:s t o c k H a n d l e r t i m e:c l o c k H a n d l e r'} );
3 3. * ...

3 4. * f u n c t i o n s t o c k H a n d l e r ( e v e n t ) {
3 5. * ...

3 6. * }
3 7. * </p r e > </c o d e >
3 8. *
3 9. * @ m e m b e r J S F.s s e
4 0. * @ p a r a m u r l T h e U R L o f a v a l i d s e r v e r e n d p o i n t t h a t w i l l d e l i v e r

* m e s s a g e s.

4 1. * @ p a r a m e v e n t O p t i o n s T h e s e t o f e v e n t s c o n s i s t i n g o f e v e n t

* n a m e:h a n d l e r n a m e p a i r s
4 2. * a s s o c i a t i n g a n e v e n t n a m e f r o m t h e s e r v e r, a n d t h e n a m e o f t h e
4 3. * h a n d l e r t h a t w i l l p r o c e s s t h e e v e n t..

4 4. */
4 5. c o n n e c t: f u n c t i o n c o n n e c t ( u r l, e v e n t O p t i o n s ) {
4 6. i f ( u r l = = = n u l l ) {
4 7. t h r o w n e w E r r o r ("M u s t s p e c i f y U R L");
4 8. }
4 9. g e t E v e n t S o u r c e ( u r l );
5 0. i f ( e v e n t S o u r c e != = n u l l ) {
5 1. i f ( e v e n t O p t i o n s != = n u l l ) {
5 2. f o r ( v a r i i n e v e n t O p t i o n s ) {
5 3. J S F.s s e.a d d O n E v e n t ( i, e v e n t O p t i o n s [ i ] );
5 4. }
5 5. }
5 6. }
5 7.
5 8. },
5 9.
6 0.
/* *
6 1. * R e g i s t e r a c a l l b a c k f o r e r r o r h a n d l i n g.

6 2. * < p > < b > U s a g e:</b > </p >
6 3. * < p r e > < c o d e >
6 4. * J S F.s s e.a d d O n E r r o r ( h a n d l e E r r o r );

6 5. * ...

6 6.
* v a r h a n d l e E r r o r = f u n c t i o n h a n d l e E r r o r ( d a t a ) {
6 7. * ...

6 8. * }
6 9. * </p r e > </c o d e >
7 0. *
7 1. * @ m e m b e r J S F.s s e
7 2. * @ p a r a m c a l l b a c k a r e f e r e n c e t o a f u n c t i o n t o c a l l o n a n e r r o r
7 3. */
7 4. a d d O n E r r o r: f u n c t i o n a d d O n E r r o r ( c a l l b a c k ) {
7 5. i f ( e v e n t S o u r c e != = n u l l ) {
7 6. i f ( t y p e o f c a l l b a c k = = = 'f u n c t i o n') {
7 7. e v e n t S o u r c e.a d d E v e n t L i s t e n e r ('e r r o r', c a l l b a c k, f a l s e );
7 8. }
7 9. }
8 0.
8 1. },
8 2.
8 3.
/* *
8 4. * R e g i s t e r a c a l l b a c k f o r e v e n t h a n d l i n g.

8 5. * < p >