Visual appeal and desktop-like reaction to user input were key elements in Web 2.0, powered by AJAX. The next generation user interface is active - presenting data and events in real time, driven by server push technology. This session demonstrates how ADF Active Data Service (ADS) and the BAM Data Control are leveraged to create an active UI. Messages arriving on JMS, through HTTP, from Complex Event Processing and from email servers are pushed to the browser, updating charts, tables and even causing popups to open. The session demonstrates a Chat implementation integrated in a Fusion Web application. It also shows how Database Query Result Change Notification and ADS allow events to be pushed from database all the way to user interface.

1. Lucas Jellema – AMIS (Nieuwegein, The Netherlands)
PUSH TO THE LIMIT –
RICH AND PRO-ACTIVE USER
INTERFACES WITH ADF
UK Oracle User Group, December 2011, Birmingham

2. OVERVIEW
• Real time architecture
• Push – ADF middle tier to browser
– Active Data Service (Chat)
– Business Activity Monitoring
– Progress Indicator
– Push triggering pull (nudge)
• Client to Client Push
• Push – Database to middle tier
• Push all the way across the tiers
• Push Challenges and Future Developments

3. ASYNCHRONOUS COMMUNICATION
IN THE REAL WORLD
• “I‟ll get back to you”
• “Don‟t call us,…”
• Low fuel warning in car
• “Please let me know”
• “Return to sender – address unknown”
• Newspaper delivery
• Next instruction from car navigation system
• Telephone ringing
• Alarm clock buzzing
• Parking sensors beeping
• Fire alarm screaming

4. ASYNCHRONOUS INTERACTIONS AND PUSH
IN THE IT LANDSCAPE
• More timely information
– Notification as soon as possible
• Proactive offering
– Do not ask and you shall be given
• Lower load on back end – don‟t call us (all the time) …
– Stop hitting the F5 button!
• Multi-channel information manipulation and
dissemination
– Changes and events come in from everywhere
• Decouple system components through generic
infrastructure for handling events and push
– Yet integrate

5. PUSHING IT … INTO THE USER INTERFACE
• Automatically refreshing (part of) a page
– Update table
– Redrawing chart
• Displaying popup to alert user to an event
– Arrival of message (email or chat)
– Signing in or out of contact (presence)
– Lock or release of some resource
– Notification
• Changing status of items on the page
– Highlight change indicator
– Show icon
– Change text to italic
• Play a sound

6. Mobile Mobile
Device Device
Web Browser Web Browser
Non
Complex Event JEE Application JEE Application
Java
Processor Server Server
Server
Email
RDBMS Chat Server
RDBMS Server

7. THE „ONLY TELL WHEN ASKED‟ GAME

8. INTRODUCING ADF ACTIVE DATA SERVICE
• Built in mechanism in ADF to push updates from the
middle tier to the browser
– active UI components that refresh upon reception of
the push (table, image, output text, DVT graphs)
– client side infrastructure to process received push
messages
– a multiplexed (multi-event) channel to push to client –
leveraging WebLogic Server push capabilities
• Long poll today, WebSockets or SPDY tomorrow
– server side infrastructure to manage active beans and
turn events into pushed messages
– Active data control:
• BAM Data Control for push from BAM’s Active Data
Cache all the way to data bound UI components

9. OVERVIEW OF ADS INFRASTRUCTURE

10. USING ADF ACTIVE DATA SERVICE TO
EMBED CHAT CLIENT IN WEB APPLICATION
• Instant Messaging should be instant
– Requirement to push incoming messages to client
• Common IM protocol is XMPP (over TCP)
– Extensible Messaging and Presence Protocol
• XMPP Java Libraries help to connect to and
communicate with XMPP servers
– For example Smack
• To embed chat in in ADF application we need to
– consume messages over XMPP
– and push them to the Web Client
• The ADS approach:
– Use ‘active’ UI Components
– Bind them to bean that
implements ActiveDataModel
– Turning the IM messages
into entries in ActiveDataModel

11. EXAMPLE OF ADS: GOOGLE TALK
Web Browser
JEE Application Server

12. EXAMPLE OF ADS: GOOGLE TALK
Web Browser
JEE Application Server

13. PUSH TROUGH ACTIVE DATA SERVICE
Web Browser
ADS
MessageReceiver

14. PUSH TROUGH ACTIVE DATA SERVICE
Web Browser
ADS
MessageReceiver

15. PROGRAMMATIC CROSS TIER
INTERACTION
Web Browser
JEE Application Server

16. CLIENT SERVER INTERACTIONS VV.
Client JavaScript Components manipulate
component
JavaScript component
Function clientListener
partialSubmit component user
Load JSON, CSS, autoSubmit or
Request Image, XML, JS programmatic
poll
data or setPropertyListener action
Push
message Queue Custom
serverListener
Event
ERKS activeOutputText
‘ppr script’
partial
page Full page push
refresh reload
add JS to
Server execute component
component activeOutputText
(middle tier) (ERKS) add
components
as partial target actionListener,
valueChangeListener,
Bean …Listener
serverListener
Active Data
Object Model
Beans & Objects Components
push (DB QRCN)
Database

17. THE NUDGE
• Event should have small payload – just an indication
of the type of event and a key-reference to the payload
• Based on the information, the consumer decides to
retrieve the associated payload, using the key
nudge handler UI Component
Payload
Nudgee Retriever
Nudger

18. THE PUSH-TO-NUDGE TRICK
(MATTHIAS WESSENDORF)
Client Listener
Function
•Show popup
activeOutputText
•Update field value
•Modify style property
clientListener
•Call Server (PPR)
type=propertyChange
Servlet
Active data JMS
Listener
Active Bean Event Handler
& Scheduled
Event Listener Job

19. SIMPLE NUDGE TO CLIENT

20. SIMPLE NUDGE TO CLIENT

21. ASYNCHRONOUS JOB
PROGRESS INDICATOR

22. SPIN OFF ANOTHER THREAD TO DO THE
WORK AND INFORM ON PROGRESS
Web Browser
HTML +
JavaScript
Servlet
ServerSide ActiveBean
Perform long running
job & report progress

23. DEMO

24. CLIENT TO CLIENT PUSH
• Usually really a combination of
– Client-to-Server
– and Server-to-the-other-Client push
• Exception: Blue Tooth, Near-Field Communication

25. CLIENT TO CLIENT PUSH –
SLIDE SYNCHRONIZATION

26. CLIENT TO CLIENT PUSH –
SLIDE SYNCHRONIZATION

28. activeImageBean
activeImageBean

29. CROSS GAP PUSH MECHANISMS
• Many channels are available to push messages from
one entity to another,
– across application, technology and location boundaries
• JMS
• (one way) WebService (SOAP or REST)
• “HTTP Channel”
• WebSockets
• Http Call to Servlet
• XMPP

30. SERVER TO MOBILE PUSH:
MULTIPLEXED, SEMI-POLL BASED

31. PUSH FROM DATABASE TO MIDDLE TIER
• Middle tier asks database – through JDBC, ODBC,
SQL*Net, HTTP, …
– The database is reactive only – not pushy at all
• Some mechanisms allow the database to take the
initiative and start to push
– Database Query Result Change Notification
– Http calls from utl_http or JSP
– Table with Multiplexed Poll

32. THE HOLLYWOOD PRINCIPLE:
QUERY RESULTSET CHANGE NOTIFICATION
POJO / ADF BC

33. CACHE REFRESH TRIGGERED BY DB
POJO / ADF BC
SQL query
PL/SQL

34. SHARED APPLICATION MODULES
• Regular Application Module instances are session
level – i.e. not shared across (web) sessions
• Shared Application Module instances are shared
across sessions like an Application Scope Managed
Bean
– Used for Static Data Sets: Look Up Data and Reference
Tables
• Sessions can reuse the data from a shared Application
Module without having to access the database
– And without loading the data in session level memory scope
• View Accessors can be used to access data in the
Shared Application Module‟s VOs
– For example for use in LOVs or Validation Rules

35. SHARED APPLICATION MODULE
INSTANCE

36. AUTO REFRESH FOR VIEW OBJECTS
• ViewObjects in a Shared Application Module can be
registered for auto refresh
– Typically such application wide VOs are near-static
– Whenever the underlying data set changes (in the
database), the VO rowset should be refreshed
• By setting Auto Refresh (to true) for the ViewObject,
the VO will be refreshed whenever the database is
changed
– ADF registers the VO query with the Database (11g)
Result Set Change Notification mechanism through
JDBC
– Note: the VO should not have an Order By clause nor
select a Date column

37. STEPS FOR AUTO REFRESH ENABLING
• Create Shared Application Module
– New application module that is added to list of
Application Level instances in the Project properties
• Create the ViewObject that queries the „static data‟ and
add to Shared Application Module
• Set the Auto Refresh property to true for VO instance
• Database must be 11g (and have parameter compatible
set to 11.1.0 or above)
– database user must have the Change Notification
privilege
• To piggy back changes to page, set
changeEventPolicy to autoPPR on data binding

38. SET AUTO REFRESH FOR VIEWOBJECT
• Set Auto Refresh
for ViewObject
• Grant Change Notification to
database user

39. DEMO: DATABASE PUSH TO VIEW
OBJECT IN ACTION
DBQRCN

40. AUTO-PPR FOR IMMEDIATE REFRESH OF
DATA BOUND COMPONENTS
• To have ADF automatically refresh
data bound components when underlying
value binding has changed its value
• Set changeEventPolicy=ppr on iterator
– Refresh as piggy back on any request cycle
– No partialTriggers attribute required!

41. ALTERNATIVE DATABASE TO MIDDLE TIER
PUSH IMPLEMENTATION
Session scope bean
listener listener listener
register Application scope bean
JEE Application Server
event handler
servlet
Scheduled Payload Push
Poll Job Retriever Receptor
utl_http
‘Events
collector’ trigger
RDBMS

42. CROSS TIER PUSH
Web Browser
table
activeOT
Cache
evt lsnr Applicationrefresher
JEE Server
servlet
job
RDBMS
trg

43. INITIATE „NORMAL‟ PPR CYCLE IN
WHICH TO REFRESH UI COMPONENTS
Client Listener
component Function
activeOutputText someComponent
clientListener
serverListener
type=propertyChange
PPR request
Iterator
Auto ppr Bean
View
Entity
RDBMS

44. INTRODUCING
BUSINESS ACTIVITY MONITORING
• Operational Business Intelligence
• Data fed in from many sources:
– RFID sensors, BPEL, Database Triggers, RSS, ODI
• Real Time insight
• Dashboard
• Live updates
• Looking for threshold crossing, exceptions, trends,
missing events
• Display visually and turn into alerts & notifications

45. INTRODUCING
BUSINESS ACTIVITY MONITORING
ADF
Application

46. EMBEDDING REAL TIME DISPLAYS IN ADF
BASED ON BAM DATA CONTROL
• Configure connection to BAM Server
• Create BAM Data Control
– Based on Data Objects in
Active Data Cache
• Drag & Drop Data Control‟s
collections & attributes to
ADF Faces pages
– Just like ADF BC
Data Control
– However:
BAM Data Control is active

47. LIVE VOLLEYBALL REPORTING
Web Browser
JMS Queue
BAM
Data
Object

48. SERVER PUSH CHALLENGES
• How to push against the „one way direction‟ and
despite limitations
– HTTP and JDBC are request/response – not response
only
– Browser limit of only two channels to one server
• Server side „event handling‟
– Session has to have an active life beyond requests
• Or requests have a life beyond response
– Higher load on the server
– How to handle the (potential) volume of ‘concurrent’
channels and the number of open threads
• NIO, Servlet 3.0, Jetty Continuations, Tomcat Advanced
I/O

49. SERVER PUSH CHALLENGES (2)
• Where do events to push actually come from?
– Who perceives/receives (real-time) events (on the
server side)
– How are they tied in to the appropriate sessions?
• Client (consumer) side: how to asynchronously
receive events and how to process them/turn them
into action and UI updates
• How to correlate an asynchronously received message
with a previously sent request or a subscription
– For example: mobile phone showing SMS or
WhatsApp messages in a conversation thread style

50. FUTURE DEVELOPMENTS
• The real time enterprise
• The event driven enterprise
• Further evolution of push notification at every tier
– Mobile perhaps leading the way
• Infrastructure and frameworks providing push
mechanisms
– Such as Active Data Service
• Servlet 3.0, Java NIO, WebSockets,
SPDY, XMPP and other lighter
weight solutions for bi-directional
communication over TCP
– And broad support in browsers
and application servers
• Project Avatar – cross Java
platform support for HTML 5,
Web Sockets and push

51. SUMMARY
• Push
– Pro active or at least real time user interface
– Real time user to user interaction
– Decrease load on infrastructure (refresh over and over)
• Real push hardly exists
– Smart poll/pull is often underlying implementation
– Piggy backing, Multiplexing, decoupling etc. are
required to scale
• ADS is powerful
– Especially with the ‘nudge now you do a fine grained
fetch or refresh’ pattern
• Database can push too – using DBQRCN, HTTP, ….
• ADF can push to Android or iOS
– Using Google and Apple Push Notification Services
– ADF Mobile should support push notification as well