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

Using contextual events to refresh Bean Data Control iterator in Oracle ADF

This blog post addresses one particular issue related to ADF Bean Data Control: how to refresh.  The readers which are not yet  familiar with Bean DC might refer for example to the tutorial Using Bean Data Control or this video Working with the ADF Java Bean Data Control by Shay Shmeltzer to get an overview about a usage of it.

Just to remember: Bean Data Controls allow to create data bound pages based on data provided by plain java objects.  ADF Data Controls provide an access to data through binding layer a unified declarative way regardless of implementation details.

One of built-in aspects of binding layer is caching: you might already noticed one property of Iterator (visible in Property panel when Iterator is selected in a page definition): Cache results: <default> true. 

It is an expected behavior in most of the cases which results in performance gains and is provided by ADF framework by default without an additional development efforts.

In case the data behind a Bean Data Control  is modified in java directly an additional development step is needed to refresh an appropriate iterator and get the result of modifications visualized in UI component based on the iterator.  

This blog post provides an example of this issue and shows one simple technique of "how to refresh without side effects" -  not loosing some other functionality of the framework, like current row -  for Bean Data Control. 

The sample application, available to download and run in it JDeveloper R2, is simple in memory implementation of CRUD+ use case for ADF table based on  Bean Data Control and java collection of domain objects (in our case collection of Persons).
The symbol + stands for extension of CRUD with "copy Person" functionality in order a) to create new Person based on selected one in a table and b) to show how to refresh an iterator (personListIterator) after a new Object (Person)  is added to a collection in java.
Lets take a look at the sample application in order to better understand the issue with refresh first.


Short description of CRUD+ sample - using standard functionality of ADF Bean Data Control

There is one Bounded Task Flow, named persons-task-flow-definition, containing one page fragment with one ADF table in it: 

The table is based on iterator personList from flowController and CRUDpersonsTaskFlowDataControl (see previous blog post with a description of  Flow Scoped Data Control  for more details regarding this technique):

The buttons Create and Delete are based on standard ADF Operations (created by Drag&Drop) - nothing exciting, it just works. The button Copy selected person was created by D&D of copyPerson method from data control into a page and providing a currentRow.dataProvider  of personList iterator.

An appropriate java class behind a data control , named CRUDPersonsFlowController , contains a collection personList and implementation of method copyPerson:

To complete a brief description of the sample,  a snippet of domain object used , Person.java, looks like this:

And the page definition at this stage contains bindings created implicitly as a result of our Drag&Drop declarative efforts:

Note:  recent blog post of Depac C S shows an alternative ADF java API based way of how to create table rows based on existing row content.


The issue with "Refresh" related to personListIterator


Our sample behaves almost like expected at this time: one click on create button and new empty row is created, by issuing a click on delete we delete a selected person from a list.

The refresh issue shows up on using a functionality of copyPerson: we click on a button Copy Selected Person,   method copyPerson in flow controller java class  gets executed, we get the person selected as input in a java method, create new instance of domain object Person using copy constructor add the instance created into personList.

Expected result: the table contains one person more - a clone of a selected person.

Actual result:  nothing.  Everything looks the same like before issuing a copyPerson action. 


The table on a page is not refreshed automatically after doing a modification of data behind it in java. It shows old  (cached) data of personList. 

We need to take care about "refresh" by issuing an execute on personList iterator to align the contents of collection represented in java and cached also as peronListIterator previous execution result.

Using contextual events to refresh personList iterator

In order to fix the issue, we go to the page definition of editPersonList.jsff and create a new Execute binding for action on personListIterator first: open editPersonList.jsff, click on a + in a panel bindings , select the item to be created: action, ok and set the properties Select an iterator and Operation like this:

We get an Execute action binding as a result of this effort:

Now we just only have to issue this Execute action after the execution of copyPerson in order to "renew" the content of personListIterator.

We can achieve that by using build-in contextual events of ADF in two simple steps:

1. Issuing a contextual event copyPersonEvent upon execution of copyPerson action and 
2. Subscribing an Execute action of personListItertor as listener of it. 

Creating copyPersonEvent contextual event on copyPerson action binding


Select copyPerson in a Panel Structure of editPersonListPageDef.xml , Right-click - Insert Inside copyPerson -> events:

An element Events is created. Select it and create a new Event by issuing a right-click ->  Insert inside events - events:

Provide a name for the event in a panel:

The Events section in a Structure Panel looks after that like this:

The event copyPersonEvent gets fired once  copyPerson action is executed. There are no subscribers for the event at this stage. 
Lets subscribe an action Execute of personListIterator to listen to the event to renew the iterator content.

Subscribing action binding Execute of personListIterator to contextual event


We go back to Page Data Binding Definition, select a tab Contextual events, then select copyPersonEvent (the event was created in a previous step), and select subscribers tab on a right side:

Click on a + symbol to create a new subscription. In a panel  subscribe to Contextual Event pick or enter the properties Event, Publisher and Handler like this:

A new Element Event Map gets created as a result , containing a list of subscribers to contextual events. 

We can see Event Map in a Structure panel now: 

Bonus - using copyPersonEvent  to select a new row containing the person created by copyPerson action

As a bonus for this blog post -  additional action binding for the built-in operation Last of personListIterator was created and subscribed to the same event. 

It shows that more than one subscriber to the event can be defined and provides one use case of this feature: to position a current row on  a person copied in table on a page. The steps already  described in previous chapters were used.

Behavior of our sample application

We start the sample application and create a new row first by a click on Create button. Lets name the person created Mister Smith:

Click on Submit. New instance of Person object gets added to the collection of persons. 

Now we clone Mr. Smith by a click on Copy selected person 

(Remember The Matrix? There were a lot of them at the end :) 

Our Mister Smith is cloned and displayed at the end of the table (execution result of copyPerson, fire  copyPersonEvent , Execute on personListIterator as subscriber for copyPersonEvent). 

And the bonus -cloned Mister Smith is selected in a table as currentRow ( execution result of Last action  on personListIterator as subscriber to copyPersonEvent):

Conclusion

• The sample application shows simple in memory implementation of CRUD+ functionality by using a built-in standard functionality of ADF Bean Data Control declarative way
• The issue with "refresh" was compensated by using built-in ADF framework functionality of contextual events declarative way
• The plain java code of  flow controller is supposed to facilitate an easy reading , testing out of context (no dependencies to additional APIs) and understanding of it - it is an important aspect of every enterprise system regarding (usually) a long lifecycle of them.

The sources of the sample application are provided at github. 

Check also ADF EMG Samples  page for additional sample applications covering broad range of ADF.