Push to the limit - rich and pro-active user interfaces with ADF  (Oracle Open World 2011)
Upcoming SlideShare
Loading in...5
×
 

Push to the limit - rich and pro-active user interfaces with ADF (Oracle Open World 2011)

on

  • 5,552 views

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

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.

Statistics

Views

Total Views
5,552
Views on SlideShare
3,295
Embed Views
2,257

Actions

Likes
0
Downloads
89
Comments
0

6 Embeds 2,257

http://technology.amis.nl 2240
http://translate.googleusercontent.com 7
http://a0.twimg.com 3
http://a0.twimg.com 3
http://paper.li 3
http://www.javaoracleblog.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

Push to the limit - rich and pro-active user interfaces with ADF  (Oracle Open World 2011) Push to the limit - rich and pro-active user interfaces with ADF (Oracle Open World 2011) Presentation Transcript

  • Push to the limit – rich and pro-active user interfaces with ADF
    Lucas Jellema – AMIS (Nieuwegein, The Netherlands)
    Oracle Open World 2011
  • Overview
    Real time architecture
    Push – ADF middle tier to browser
    Active Data Service
    Custom Push
    Push triggering pull
    Push – Database to middle tier
    Push all the way across the tiers
    Client to Client Push
  • 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
  • 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
  • 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
  • 3rd party
    Mobile Device
    Mobile Device
    Web Browser
    Web Browser
    JEE Application Server
    JEE Application Server
    Complex Event Processor
    Non
    Java
    Server
    RDBMS
    Email Server
    Chat Server
    RDBMS
  • 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
    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
  • Overview of ADS infrastructure
  • 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
  • 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
  • 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
  • Introducing Business Activity Monitoring
    ADF Application
  • Embedding real time displays in ADF based on BAM Data Control
    Configure connection to BAM Server
    Create BAM Data Control
    Based on Data Objects inActive Data Cache
    Drag & Drop Data Control’scollections & attributes toADF Faces pages
    Just like ADF BC Data Control
    However: BAM Data Control is active
  • Live volleyball reporting
    Web Browser
    JMS Queue
    BAM
    Data Object
  • Create BAM Data control
  • Programmatic cross tier interaction
    Web Browser
    JEE Application Server
  • Client
    JavaScript
    Components
    manipulate
    component
    user action
    JavaScript Function
    component
    clientListener
    component
    userorprogrammaticaction
    partialSubmitautoSubmit
    Load JSON, CSS, Image, XML, JS
    property change
    Requestdata orPush message
    poll
    setPropertyListener
    partial triggers, added targets
    Queue Custom Event
    serverListener
    activeOutputText
    ERKS ‘ppr script’
    partial page refresh
    Full pagereload
    push
    add JS toexecute (ERKS)
    Server (middle tier)
    component
    activeOutputText
    component
    add componentsas partial target
    actionListener, valueChangeListener, …Listener
    Bean
    serverListener
    Active DataModel
    Object
    Components
    Beans & Objects
    push (DB QRCN)
    Database
    Client Server interactions vv.
  • The push-to-nudge trick(Matthias Wessendorf)
    Client Listener Function
    • Show popup
    • Update field value
    • Modify style property
    • Call Server (PPR)
    activeOutputText
    clientListener
    type=propertyChange
    Servlet
    Active Bean
    Active data
    register
    Event Handler
    JMS Listener
    Scheduled Job
    &
    Event Listener
  • Simple nudge to client
  • Simple nudge to client
  • Client to client push – slide synchronization
  • Client to client push – slide synchronization
  • activeImageBean
    activeImageBean
  • Cross tier push – architecture pattern
    listener
    listener
    listener
    register
    event handler
    Payload Retriever
    Scheduled Poll Job
    Push Receptor
    ‘Events collector’
  • 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
  • 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
  • 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 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
  • The Hollywood Principle: Query ResultSet Change Notification
    POJO / ADF BC
  • Cache Refresh triggered by DB
    Oracle RDBMS invokes Java Listener with event details
    POJO / ADF BC
    Register DatabaseChangeNotification
    SQL query
    PL/SQL
  • 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
  • Shared Application Module Instance
  • 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
  • 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
  • Set Auto Refresh for ViewObject
    Set Auto Refresh for ViewObject
    Grant Change Notification todatabase user
  • Demo: Database push to View Object in action
    DBQRCN
  • 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!
  • JEE Application Server
    Alternative Database to middle tier push implementation
    Session scope bean
    listener
    listener
    listener
    register
    Application scope bean
    event handler
    servlet
    Payload Retriever
    Scheduled Poll Job
    Push Receptor
    utl_http
    RDBMS
    ‘Events collector’
    trigger
  • Cross Tier Push
    Web Browser
    table
    activeOT
    Cache refresher
    JEE Application Server
    evtlsnr
    servlet
    RDBMS
    job
    trg
  • Initiate ‘normaL’ PPR cycle in which to refresh ui components
    Client Listener Function
    component
    queue event
    activeOutputText
    someComponent
    serverListener
    clientListener
    type=propertyChange
    refresh page
    PPR request
    Bean
    Iterator
    Auto ppr
    retrieve data
    View
    clear cache
    Entity
    RDBMS
  • 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
  • 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
  • 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
  • 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
  • Session Plugging
    Sunday – Gold Nuggets in ADF (S32502)3.15-4.15, Moscone West-2000
    Tuesday – Reaching Out from PL/SQL (S08625 )10.15-11.15, Mariott Marquis, Salon 7
    Tuesday – (JavaOne) Cross Tier Push Architecture (Don’t call us, we’ll push you) (S24722)4.30-5.15 PM, Hotel Nikko, Monterey I/II
    Wednesday – Push to the Limit: Rich and Proactive User Interfaces with Oracle ADF (S08620)5-6 PM, Mariott Marquis, Golden Gate A
    Thursday –Instant Agility in Oracle Fusion Middleware through Design Time @ Run Time (S08623)4-5 PM, Moscone West – 2020