AJAX functionality has got attention in JSF2 specification. JSF2 made its way into ADF with JDeveloper Release2.
This blog post provides a simple ADF active Chat application, built by using active data service functionality together with ajax tag of JSF2.
Blog readers might find the sample, available to download and run in JDeveloper R2, useful to become familiar with basic functionality of active data service. Various active data configuration options (transport modes, delays) could be evaluated for specific networking environment by modifying adf-config.xml.
Let's have a look at the building blocks of the sample application in JDeveloper first:
Controller: unbounded flow adfc-config.xml with 2 views chat.jsf and login.jsf, one bounded task flow chat-task-flow-definition.xml, embedded into the container page chat.jsf as a region (chatPageDef.xml page definition contains region binding as a result).
Model: 2 java interfaces Chat.java and ChatListener.java, describing our chat model.
Implementation: JSF2 annotated beans ChatBean.java and ChatListenerBean.java.
UI: page login.jsf and page fragment chat.jsff.
Web Content and run time behavior of chat sample application
A default unbounded task-flow, named adfc-config.xml contains two view activities: login and chat:
We start the sample by executing adfc-config.xml (pick a login activity in default run configuration panel) - the page login.jsf gets displayed in a browser:
Chat with one user might be boring, so i start browser Chrome, enter the URL, pick a name Chrome and join the Firefox in ADF active chat.
A snapshot of this (simulated) conversation is displayed in a picture:
Note: this sample application is deployed and (probably) running at this location - give it a try.
Usage of af:activeOutputText and JSF2 f:ajax tag
The sample leverages only one ADF active data element - af:activeOutputText tag - to initiate partial refresh for three "conventional" elements on a page: tables containing chat messages and users and the text Alive:true.
Note: ADF UI Pattern of using af:activeOutputText in combination with af:clientListener, javascript function (and eventualy af:serverListener in case some server side functionality is involved) is well described in various blog posts and presentations by Lucas Jellema - for example the recent one provides a sample of how changes in a database can be "pushed" through all the layers up into UI.
Early description of active data service related techniques used in this sample was provided in a blog posts Flexible ADS – Combining popups with ActiveDataService and ADF’s Active Data Service and scalar data (like activeOutputText) by Matthias Wessendorf.
This pattern leverages propertyChanged event of af:activeOutputText - propertyChanged gets fired when value of activeOutputText changes (by a data push from server) because a background color of the text gets changed to "blue" for a moment to indicate a value change for the user.
Let's have a look at the page fragment chat.jsff (essential parts only - layout tags were stripped) how the tag activeOutputText and its event propertyChanged are used in this sample in conjunction with f:ajax tag (available since JSF2):
The tag activeOutputText with a value bound to the "active" property message from a bean chatListenerBean emmits propertyChange event. ActiveOutputText is wrapped by f:ajax tag, which is "interested" in this event:
event="propertyChange" .
According to description of f:ajax tag , the attribute render allows declaratively specify a list of components (as space delimited string of component identifiers) to be rendered on the client: render="t1 t2 ot1".
The combination of af:activeOutputText and f:ajax allows to refresh all non active components upon data push from a server declarative way. There is no need to write any JavaScript for this particular usage scenario.
Note: well... no need for any specific JavaScript. There are 2 "strange" tags without particular meaning on a page - see the comments like "this tag does nothing" and "anonymous javascript function onevent does nothing".
Actually, they just have to be there - nothing else. I didn't figure out exactly why - otherwise ADS didn't work for me.
Let's go to the model part of the sample.
Defining a model for the chat
Two simple interfaces define a model: Chat and ChatListener.
The idea expressed in Chat interface is to accept a login or logout of ChatListener, to provide a list of current users (getUsers) and messages (getMessages) and one method addMessage(String message) to broadcast a new message to the listeners:
The idea of ChatListener is to be able to identify itself by a user name, receive new messages (as propertyChanged events in this case) and to provide a possibility for the chat to check, if the listener is not gone (isAlive). Note: The readers might advance the model and extend it for their needs in case of interest.
Implementing the model as JSF2 beans
The idea behind the implementation was to leverage a JSF managed beans and their scopes. Our chat is intended to be there for everyone, so ApplicationScope is a natural fit for it.
ChatListener can come and go, so ViewScope was selected for that.
JSF2 annotations were used in a sample to define manage beans and their scopes and inject their property values.
There is also a reasonable amount of comments in the source files describing specific details.
Developer's Guide for Oracle Application Development Framework - 45 Using the Active Data Service provides a comprehensive description about Active Data Service and configuration options of it.
To finish this section I provide a complete source:
Source of ChatListenerBean (imports stripped, active data service part is based on the description in this blog.)
And the Source of ChatBean (imports and header stripped):
Conclusion
Server side data push can be considered a little bit challenging due to the nature of connectionless HTTP protocol.
Oracle ADF provides a built-in implementation for the data push taking care about the challenging aspects of it. By using simple principles described or referenced in this blog post, "non-active" parts of UI could be "activated", like in the sample chat application.
Ongoing efforts in HTML5 address this issue by providing a connection-oriented WebSocket. Once the standards behind HTML5 are widely accepted and implemented - the architecture of web applications will probably shift (back) to the client-server, bringing new(old) possibilities for developers of active applications.
Que Sera, Sera (Whatever Will Be, Will Be) - there is no need to wait for the future - the data push functionality provided by Oracle ADF is ready to use now :)