ADF 11g adds richness to web applications by providing more visually compelling, interactive, and customizable components. Key features include enhanced AJAX and partial page rendering capabilities, a client-side JavaScript API, alternative data visualization components like pivot tables and charts, an expanded skinning framework, and server push technology. These features allow for more declarative development with less code while also making applications more attractive, responsive, and personalized.

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

2. A Smile on Whose Face?

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

4. ADF == Dogfood

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

6. ADF 11g archictecture

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

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

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

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

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

12. Various Popup examples

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

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

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

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

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

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

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

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

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

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

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

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

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

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

27. New Tweets coming in …

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

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

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

31. Demoing Visual stuff Calendar, Pivot Table, Hierarchy Viewer

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

33. Hierarchy Viewer

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

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

36. Pivot Table

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

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

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