Lucas Jellema – AMIS (Nieuwegein, The Netherlands)PUSH TO THE LIMIT –RICH AND PRO-ACTIVE USERINTERFACES WITH ADFUK Oracle ...
OVERVIEW• Real time architecture• Push – ADF middle tier to browser   – Active Data Service (Chat)   – Business Activity M...
ASYNCHRONOUS COMMUNICATIONIN THE REAL WORLD•   “I‟ll get back to you”•   “Don‟t call us,…”•   Low fuel warning in car•   “...
ASYNCHRONOUS INTERACTIONS AND PUSHIN THE IT LANDSCAPE• More timely information   – Notification as soon as possible• Proac...
PUSHING IT … INTO THE USER INTERFACE• Automatically refreshing (part of) a page   – Update table   – Redrawing chart• Disp...
Mobile        Mobile                                   Device        DeviceWeb Browser       Web Browser                  ...
THE „ONLY TELL WHEN ASKED‟ GAME
INTRODUCING ADF ACTIVE DATA SERVICE• Built in mechanism in ADF to push updates from the  middle tier to the browser   – ac...
OVERVIEW OF ADS INFRASTRUCTURE
USING ADF ACTIVE DATA SERVICE TOEMBED CHAT CLIENT IN WEB APPLICATION• Instant Messaging should be instant   – Requirement ...
EXAMPLE OF ADS: GOOGLE TALK                      Web Browser                   JEE Application Server
EXAMPLE OF ADS: GOOGLE TALK                      Web Browser                   JEE Application Server
PUSH TROUGH ACTIVE DATA SERVICE                               Web Browser       ADS             MessageReceiver
PUSH TROUGH ACTIVE DATA SERVICE                               Web Browser       ADS             MessageReceiver
PROGRAMMATIC CROSS TIERINTERACTION            Web Browser         JEE Application Server
CLIENT SERVER INTERACTIONS VV.          Client                    JavaScript Components                 manipulate        ...
THE NUDGE• Event should have small payload – just an indication  of the type of event and a key-reference to the payload• ...
THE PUSH-TO-NUDGE TRICK(MATTHIAS WESSENDORF)                       Client Listener                          Function      ...
SIMPLE NUDGE TO CLIENT
SIMPLE NUDGE TO CLIENT
ASYNCHRONOUS JOBPROGRESS INDICATOR
SPIN OFF ANOTHER THREAD TO DO THE     WORK AND INFORM ON PROGRESS             Web Browser HTML +JavaScript                ...
DEMO
CLIENT TO CLIENT PUSH• Usually really a combination of   – Client-to-Server   – and Server-to-the-other-Client push• Excep...
CLIENT TO CLIENT PUSH –SLIDE SYNCHRONIZATION
CLIENT TO CLIENT PUSH –SLIDE SYNCHRONIZATION
activeImageBeanactiveImageBean
CROSS GAP PUSH MECHANISMS• Many channels are available to push messages from  one entity to another,   – across applicatio...
SERVER TO MOBILE PUSH:MULTIPLEXED, SEMI-POLL BASED
PUSH FROM DATABASE TO MIDDLE TIER• Middle tier asks database – through JDBC, ODBC,  SQL*Net, HTTP, …   – The database is r...
THE HOLLYWOOD PRINCIPLE:QUERY RESULTSET CHANGE NOTIFICATION              POJO / ADF BC
CACHE REFRESH TRIGGERED BY DB             POJO / ADF BCSQL query                             PL/SQL
SHARED APPLICATION MODULES• Regular Application Module instances are session  level – i.e. not shared across (web) session...
SHARED APPLICATION MODULEINSTANCE
AUTO REFRESH FOR VIEW OBJECTS• ViewObjects in a Shared Application Module can be  registered for auto refresh   – Typicall...
STEPS FOR AUTO REFRESH ENABLING• Create Shared Application Module   – New application module that is added to list of     ...
SET AUTO REFRESH FOR VIEWOBJECT• Set Auto Refresh  for ViewObject• Grant Change Notification to  database user
DEMO: DATABASE PUSH TO VIEWOBJECT IN ACTION                              DBQRCN
AUTO-PPR FOR IMMEDIATE REFRESH OFDATA BOUND COMPONENTS• To have ADF automatically refresh  data bound components when unde...
ALTERNATIVE DATABASE TO MIDDLE TIERPUSH IMPLEMENTATION                                                    Session scope be...
CROSS TIER PUSH                            Web Browser                                     table                          ...
INITIATE „NORMAL‟ PPR CYCLE IN      WHICH TO REFRESH UI COMPONENTS                                Client Listener       co...
INTRODUCINGBUSINESS ACTIVITY MONITORING• Operational Business Intelligence• Data fed in from many sources:    – RFID senso...
INTRODUCINGBUSINESS ACTIVITY MONITORING                                  ADF                               Application
EMBEDDING REAL TIME DISPLAYS IN ADFBASED ON BAM DATA CONTROL• Configure connection to BAM Server• Create BAM Data Control ...
LIVE VOLLEYBALL REPORTING                       Web Browser           JMS Queue    BAM           Data          Object
SERVER PUSH CHALLENGES• How to push against the „one way direction‟ and  despite limitations   – HTTP and JDBC are request...
SERVER PUSH CHALLENGES (2)• Where do events to push actually come from?   – Who perceives/receives (real-time) events (on ...
FUTURE DEVELOPMENTS• The real time enterprise• The event driven enterprise• Further evolution of push notification at ever...
SUMMARY• Push   – Pro active or at least real time user interface   – Real time user to user interaction   – Decrease load...
Push to the limit - rich and pro-active user interfaces with ADF - V2 (UKOUG, 2011)
Push to the limit - rich and pro-active user interfaces with ADF - V2 (UKOUG, 2011)
Upcoming SlideShare
Loading in …5
×

Push to the limit - rich and pro-active user interfaces with ADF - V2 (UKOUG, 2011)

2,022 views
1,928 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,022
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Push to the limit - rich and pro-active user interfaces with ADF 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.Demo: http://technology.amis.nl/blog/12353/leveraging-html-5-navigator-api-to-show-the-browsers-current-location-on-an-adf-faces-11gr2-thematic-map-component
  • AsYnchronous communication & cross tier push in enterprise landscape
  • Two participantsOne can ask questionsThe other can reply; a response is ended with ‘end of message’; after that has been said, the responder has to wait for the next question to be asked before saying anything out loudChallenge: the requestor needs to know as fast as possible and with as few questions asked as possible when the responder is tapped on the back
  • http://www.oracle.com/technetwork/articles/jellema-googletalk-094343.html
  • http://www.oracle.com/technetwork/articles/jellema-googletalk-094343.html
  • http://technology.amis.nl/blog/13823/adf-faces-handle-task-in-background-process-and-show-real-time-progress-indicator-for-asynchronous-job-using-server-push-in-adf
  • Push to the limit - rich and pro-active user interfaces with ADF - V2 (UKOUG, 2011)

    1. 1. Lucas Jellema – AMIS (Nieuwegein, The Netherlands)PUSH TO THE LIMIT –RICH AND PRO-ACTIVE USERINTERFACES WITH ADFUK Oracle User Group, December 2011, Birmingham
    2. 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. 3. ASYNCHRONOUS COMMUNICATIONIN 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. 4. ASYNCHRONOUS INTERACTIONS AND PUSHIN 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. 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. 6. Mobile Mobile Device DeviceWeb Browser Web Browser Non Complex Event JEE Application JEE Application Java Processor Server Server Server Email RDBMS Chat Server RDBMS Server
    7. 7. THE „ONLY TELL WHEN ASKED‟ GAME
    8. 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. 9. OVERVIEW OF ADS INFRASTRUCTURE
    10. 10. USING ADF ACTIVE DATA SERVICE TOEMBED 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. 11. EXAMPLE OF ADS: GOOGLE TALK Web Browser JEE Application Server
    12. 12. EXAMPLE OF ADS: GOOGLE TALK Web Browser JEE Application Server
    13. 13. PUSH TROUGH ACTIVE DATA SERVICE Web Browser ADS MessageReceiver
    14. 14. PUSH TROUGH ACTIVE DATA SERVICE Web Browser ADS MessageReceiver
    15. 15. PROGRAMMATIC CROSS TIERINTERACTION Web Browser JEE Application Server
    16. 16. CLIENT SERVER INTERACTIONS VV. Client JavaScript Components manipulate component JavaScript component Function clientListener partialSubmit component user Load JSON, CSS, autoSubmit orRequest Image, XML, JS programmatic polldata or setPropertyListener actionPushmessage 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. 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. 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. 19. SIMPLE NUDGE TO CLIENT
    20. 20. SIMPLE NUDGE TO CLIENT
    21. 21. ASYNCHRONOUS JOBPROGRESS INDICATOR
    22. 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. 23. DEMO
    24. 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. 25. CLIENT TO CLIENT PUSH –SLIDE SYNCHRONIZATION
    26. 26. CLIENT TO CLIENT PUSH –SLIDE SYNCHRONIZATION
    27. 27. activeImageBeanactiveImageBean
    28. 28. 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
    29. 29. SERVER TO MOBILE PUSH:MULTIPLEXED, SEMI-POLL BASED
    30. 30. 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
    31. 31. THE HOLLYWOOD PRINCIPLE:QUERY RESULTSET CHANGE NOTIFICATION POJO / ADF BC
    32. 32. CACHE REFRESH TRIGGERED BY DB POJO / ADF BCSQL query PL/SQL
    33. 33. 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
    34. 34. SHARED APPLICATION MODULEINSTANCE
    35. 35. 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
    36. 36. 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
    37. 37. SET AUTO REFRESH FOR VIEWOBJECT• Set Auto Refresh for ViewObject• Grant Change Notification to database user
    38. 38. DEMO: DATABASE PUSH TO VIEWOBJECT IN ACTION DBQRCN
    39. 39. AUTO-PPR FOR IMMEDIATE REFRESH OFDATA 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!
    40. 40. ALTERNATIVE DATABASE TO MIDDLE TIERPUSH 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
    41. 41. CROSS TIER PUSH Web Browser table activeOT Cache evt lsnr Applicationrefresher JEE Server servlet job RDBMS trg
    42. 42. INITIATE „NORMAL‟ PPR CYCLE IN WHICH TO REFRESH UI COMPONENTS Client Listener component FunctionactiveOutputText someComponent clientListener serverListener type=propertyChange PPR request Iterator Auto ppr Bean View Entity RDBMS
    43. 43. INTRODUCINGBUSINESS 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
    44. 44. INTRODUCINGBUSINESS ACTIVITY MONITORING ADF Application
    45. 45. EMBEDDING REAL TIME DISPLAYS IN ADFBASED 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
    46. 46. LIVE VOLLEYBALL REPORTING Web Browser JMS Queue BAM Data Object
    47. 47. 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
    48. 48. 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
    49. 49. 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
    50. 50. 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

    ×