Saturday, July 28, 2012

Building a Simple Chat Application with Active Data Service and JSF2 AJAX in Oracle ADF

Data push with Active Data Services (ADS) in Oracle ADF has been available for some years.

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:
In my case, the default browser is Firefox, so I pick a username Firefox first and press the button Go to Chat -  Action chat behind the button gets executed - a control flow case chat leads us to the page chat.jsf.
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:
I leave the browsers to wait for IE to show up and continue with description of the sample.

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

13 comments:

  1. very nice :) something that i really need now

    ReplyDelete
  2. Hi Yernar,

    thanks for finding the post useful.

    Regarding eclipse project: the sample project is also a maven project - a command mvn eclipse:eclipse issued in a project directory should create project artifacts for eclipse.

    Notice, that ADF version bundled with a current Oracle Enterprise Pack for Eclipse is not JSF2 based - some efforts are needed to replace annotation based bean configuration (JSF2) with xml based one (JSF1.2 + eventually ADF specific scopes, like a ViewScope).

    Regards, Donatas

    ReplyDelete
  3. Hi Donatas,

    Thanks a lot for your post...I am trying to implement this..However I am getting the following error
    Error: http://java.sun.com/jsf/core:ajax is not registered tag in the specified namesapace.

    Please share idea regarding this

    ReplyDelete
  4. Hi Raj,

    https://forums.oracle.com/forums/thread.jspa?messageID=10573273
    - just to have all information in one place:)

    I would try to run original sample project (without UI modifications) in your JDeveloper version 11.1.2.0 first. If it runs - try to introduce UI changes step by step.

    The sample was created using the latest patchset version of JDeveloper R2 currently available - 11.1.2.2.0 I quess you faced some issue with the older one - it might be neccesary to move to the latest version.

    Regards, Donatas

    ReplyDelete
  5. Thanx for your valuable post, but i am trying to do this in JSP XML fragments having .jspx container page, but f:ajax tag is not supported in JSPXML , so please tell me that how to implement this using JSP XML fragments

    ReplyDelete
  6. Hi in the console the property changes are printed the pings values, etc.
    but are not shown in the page, when I run the demo everything works fine but not in my custom app, what could be the problem?

    ReplyDelete
  7. Hey Donatas,
    This post was very nice but i want to make some modification.I want to create private chat that means one to one only not a chat room .
    I am using jdeveloper 11gR2

    can u please help me with this??

    regards
    papun

    ReplyDelete
  8. Hi Ashish,

    >Thanx for your valuable post, but i am trying to do this in JSP XML >fragments having .jspx container page, but f:ajax tag is not supported in >JSPXML , so please tell me that how to implement this using JSP XML >fragments

    In order to implement ADS push functionality without f.ajax refer for example to the Blog of Lucas Jellema, like stated it this Note:

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

    Regards, Donatas

    ReplyDelete
  9. Hi Diego Rafael Flores,

    >Hi in the console the property changes are >printed the pings values, etc.
    >but are not shown in the page, when I run the >demo everything works fine but not in my custom >app, what could be the problem?

    in case the demo works in your environment try to introduce custom modifications step by step to find a reason for the problem.. The technique described in this blog is "sensible" to layout changes - so try to follow ADF and JSF layout structure of the sample jsff page as close as possible at the beginning..

    Regards, Donatas

    ReplyDelete
    Replies
    1. the problem was that I called the page with a partialSubmit=true, I changed it to false and It works, now I have to execute the finalizer when I click on my logout button, this button calls a dialog and if the OK button is pressed well the user logsout in that moment I want to execute the finalizer, how?

      Delete
  10. >Hey Donatas,
    >This post was very nice but i want to make some >modification.I want to create private chat that >means one to one only not a chat room .
    >I am using jdeveloper 11gR2

    One way to sent private messages might be to advance the sample a little bit for example like this:

    Model -> Interface chat - introduce a new attribute String toUsername:
    public void addMessage(String message,String username);
    public List getMessages(String forUsername);
    public void addMessage(String message,String toUsername);

    So, the messages could be targeted to some user..

    Implementation to support new functionality:

    ChatBean - introduce for example a map structure and put a list of private messages for the user into it, using username as a key.


    Modify the implementation of those two methods addMessage and getMessages to support model changes and new functionality..

    UI: implement a possibility to select a chat user in a list, and provide the user selected as a parameter (toUsername) of a method addMessage.

    It is a little bit beyond this blog post but should give a basic initial idea how to extend a functionality to introduce a private messaging between logged in users.

    Regards, Donatas

    Regards, Donatas

    ReplyDelete
  11. Oups, some copy paste errors in my previous reply - here is a fix for it:

    ...
    Model -> Interface chat - introduce a new attribute String username like this:

    public List getMessages(String forUsername);
    public void addMessage(String message,String toUsername);

    ...

    ReplyDelete