That's Rich! Putting a smile on ADF Faces (ODTUG Kaleidoscope 2009)

That's Rich! Putting a smile on ADF Faces
ODTUG Kaleidoscope 2009
Lucas Jellema

A Smile on Whose Face?

Overview
What’s ADF 11g all about?
Adding richness to ADF Web Applications
Organized: Elegant real estate management
Responsive & Interactive: Client Side and AJAX
Attractive: Skinning & Styling
Active: Server Push (aka Reverse AJAX)
Personalized: Customization
Visually Compelling: Alternative Data Visualization
Summary

ADF == Dogfood

Key themes for ADF 11g
(more) Declarative (4GL style) development
Lot of functionality can be Model driven: Complex Search Forms, List of Values, Validations
95% no-code development (visual, wizard,..)
High level of reusability
Page templates, Declarative Components, Task Flows & Regions, ADF Libraries, Model based specifications
MDS (Meta Data Store) for design-time and run-time customization
Skinning for tailor made look & feel
Based on (latest) JEE standards
Support many highly specialized Fusion Apps features

ADF 11g archictecture

Release 11.1.1.1.0
Code name Bulldog
part of FMW 11gR1 (shipping July 1st)
Meta Data Services (MDS)
Active Data Source (Server Push)
Desktop Integration (Excel as ADF Client)
New components: Calendar, HierarchyViewer, PanelDashboard
Team Collaboration
WebCenter and SOA Suite integration

Rich Layout –Real Estate Management
From static containers and browser popup windows
To better looking, much snappier & nestable
Dynamically resizable panelSplitter
Accordion, Tabbed Panel
Dashboard
PanelBox, Show Detail, Show Detail Header
And virtually limitless real estate: Popup
Also Context Menu, List of Values and SelectDate

PanelDashboard
‘portal look-a-like’ using PanelBoxcomponents
Drag & drop available for reorganizing

Adding in an Accordion
Left sidebar should have an Accordion Pane
That appears in (almost) every page
Drag and Drop pane to the template
Move Navigation List to the first Detail Pane
Add a second Pane for ‘inspiration’

About popups
A popup usually has one of these components as child
noteWindow
panelWindow
dialog
Menu
Popups are usually associated with a component to align with & action triggering their appearance
The showPopupBehavior tag is used for configuring this
Content of a popup can be loaded with the page (immediate) or when required (lazy or lazyUncached)

Various Popup examples

Configuring a showPopupBehavior tag
The showPopupBehavior tag is added as a child to a component that should trigger display of the popup
triggerType attribute is used to specify event on component that launches popup
Attribute alignId indicates the component with which the popup should align
align specifies relative position of the popup
popupId refers to the popup to show

Example: Adding fancy balloon help
Create a popup with a noteWindow child to contain the fancy help content
Add a showPopupBehavior tag to the inputText we want to add the help to

Responsive & Interactive Rich Client, AJAX & PPR
From PPR based on field change & button click and using clunky IFRAMEs
To smooth, elegant, light(er)-weight
Triggerable by many different types of action
AJAX Payload is configurable
Can link to Server Side listeners
Can run JavaScript after PPR has completed
And a rich client side API
Round-trip free component manipulation
Drag and Drop support

Table fetching data…
Table fetches data in asynchronous request
And trees, charts, other DVTs, …

Some remarks
visible vs rendered
Only what is in the client can be PPRed or manipulated;
when rendered == false, nothing is sent to client
clientComponent =“true” to instruct a manipulatable object to be rendered in client
for example for outputText
Client API: JavaScript API that allows manipulation of rich components

Manipulate component state
The client side API allows us to manipulate most component properties that we can set server side
Overriding the values derived server side from EL expressions with ‘later insights’ on the client – without AJAX overhead
For example: toggling disclosed state of a ShowDetail

Client Listeners to intercept and act on Client Events
The ClientListener component is used to intercept client side events and handle in JavaScript
ClientListeners can respond to many different events
That may or may not propagate to the server
ClientListener specifies theJavaScript method to becalled upon the event
This method has an eventinput parameter

Using the Client Side API for quick derivation
Enter Fahrenheit value
ValueChange event fires
ClientListener picks up and calls JS function
Function reads value and updates Celsius component

ServerListeners for custom AJAX
A serverListener associates a server side method with a client side custom event
This allows JavaScript functions to start communications with the server by queuing an event listened for by server
A custom event carries a payload

Demo “Auto Suggest”
Key Up Event is intercepted by a Client Listener
That calls a JavaScript method
The JavaScript method queues a custom event
With the new value in State
ServerListener processes theevent
Derives the new list of suggestions
PPRs the SelectOneList component

Set Property Listener
setPropertyListener: used to send a value (EL) to a bean when specified type of event occursA very simple way to inform the server about an event and associated data
Supported types: action, focus, poll, query, rangeChange, selection, sort, rowDisclosure, valueChange and many more
<af:image id="removeFromSetImage“
source="/images/removeFromSet.png“
shortDesc="Remove from Shopping Basket"/>
<af:setPropertyListener from="#{item}“
to="#{shoppingBasket.itemToRemove}"
type="action"/>
</af:commandLink>

Attractive: Skinning & Styling
From: quite arbitrary, inconsistent skinnable visual properties – based on simple skin
To: completely reworked skinning framework
consistent, well documented and extensive
Based on rich BLAFPLUS skin
Supported by on line demo (rea.oracle.com)
Including skinning of resources
And: support for contentStyle and inlineStyle in most components

Browser
Server Push
Push: server sends messages to client
HTTP does not allow Server to call Client
Server can only respond to a request
A bit like homing pidgeons…
So Client calls Server and server reponds…. when it has a message
Browser
Browser
X
Server

Active: Server Push (aka Reverse AJAX)
From: Server could notify Client when asked (for example in a poll)
To: Active Data Service (ADS) that can push events to active components
Some components including table, tree, all types of graphs and charts support the ADS
If the data model implements the ADS model , events are pushed to the client
And: Auto-PPR
Any change from a data binding marked as “auto ppr” is pushed (piggybacked on PPR) to client

New Tweets coming in …

Personalized: Customization
From: One size fits all style of application
With possibly custom built customization
To: fully integrated customization service
Components (table, tree, panelbox,…) that support user defined configuration
Customizations stored in Session or persisted in MDS to be reapplied across sessions
And: customizations in non ADF components (or in any other meta data) can go in MDS too

Visually Compelling: Alternative Data Visualization
From: tables, trees and form-fields as more or less the only representation of data
To: rich visual components displaying and allowing manipulation of data
Graphs & Charts
Maps, Pivot Table, Hierarchy Viewer
Calendar
And: rich data controls
Slider, color picker, rich text editor, date selector

Some components not yet available ….
Carousel
Auto Suggest
(native) Google Maps integration
Declarative support for Easter Eggs

Demoing Visual stuff
Calendar, Pivot Table, Hierarchy Viewer

Creating a Calendar
Need a ViewObject that has
Start time, End Time, Title, Id
And may have
Recurring, Reminder, Location, Tags
And custom attributes
Drag and Drop VO as Calendar
Map attributes to Calendar properties
Implement Listeners for various events

Hierarchy Viewer

Hierarchy Viewer
ViewObjects with ViewLinks provide model for tree binding that underlies the Hierarchy DVT
At each node level: specify the content of the panel – optionally per zoom-level

Benefit of Data Binding
Implementing the model required by the advanced DVTs can be quite a challenge
Fortunately, ADF Model does it for us:
We can drag Data Controls (collections) to a page
And drop them as any DVT we like
The Graph DataBinding that gets created implements the model needed for the DVT
Both POJO based as well as on (preferred) ADF BC

Pivot Table

Pivot Table
ViewObject underlies PivotTable
Choose Attributes for Rows/Columns and Cells
Optionally specify
Custom styling for cells
Data editing on cells
Aggregation
Interaction (event listeners such as click)

Summary
ADF 11g brings a lot of productivity through reuse and visual & declarative development
It also brings a lot of ‘richness’ that can make web applications make people smile
More attractive, productive, functional
Important features providing richness
AJAX, PPR, Server Push and Client Side (JS) API
Rich Components, Layout Containers, MDS, alternative Data Visualization, Skinning & Styling
Try out the rich features, give them a spin!

Resources
Download all demo applications and source code from http://technology.amis.nl/blog/
For further questions:
Email: lucas.jellema@amis.nl