Successfully reported this slideshow.
That&apos;s Rich! Putting a smile on ADF Faces<br />ODTUG Kaleidoscope 2009<br />Lucas Jellema<br />
A Smile on Whose Face?<br />
Overview<br />What’s ADF 11g all about?<br />Adding richness to ADF Web Applications<br />Organized: Elegant real estate m...
ADF == Dogfood<br />
Key themes for ADF 11g<br />(more) Declarative (4GL style) development<br />Lot of functionality can be Model driven: Comp...
ADF 11g archictecture<br />
Release 11.1.1.1.0<br />Code name Bulldog<br />part of FMW 11gR1 (shipping July 1st)<br />Meta Data Services (MDS)<br />Ac...
Rich Layout –Real Estate Management<br />From static containers and browser popup windows<br />To better looking, much sna...
PanelDashboard<br />‘portal look-a-like’ using PanelBoxcomponents<br />Drag & drop available for reorganizing<br />
Adding in an Accordion<br />Left sidebar should have an Accordion Pane<br />That appears in (almost) every page<br />Drag ...
About popups<br />A popup usually has one of these components as child<br />noteWindow<br />panelWindow<br />dialog<br />M...
Various Popup examples<br />
Configuring a showPopupBehavior tag<br />The showPopupBehavior tag is added as a child to a component that should trigger ...
Example: Adding fancy balloon help<br />Create a popup with a noteWindow child to contain the fancy help content<br />Add ...
Responsive & Interactive Rich Client, AJAX & PPR<br />From PPR based on field change & button click and using clunky IFRAM...
Table fetching data…<br />Table fetches data in asynchronous request<br />And trees, charts, other DVTs, …<br />
Some remarks<br />visible vs rendered<br />Only what is in the client can be PPRed or manipulated; <br />when rendered == ...
Manipulate component state<br />The client side API allows us to manipulate most component properties that we can set serv...
Client Listeners to intercept and act on Client Events<br />The ClientListener component is used to intercept client side ...
Using the Client Side API for quick derivation<br />Enter Fahrenheit value<br />ValueChange event fires<br />ClientListene...
ServerListeners for custom AJAX<br />A serverListener associates a server side method with a client side custom event<br /...
Demo “Auto Suggest”<br />Key Up Event is intercepted by a Client Listener<br />That calls a JavaScript method<br />The Jav...
Set Property Listener<br />setPropertyListener: used to send a value (EL) to a bean when specified type of event occursA v...
Attractive: Skinning & Styling<br />From: quite arbitrary, inconsistent skinnable visual properties – based on simple skin...
Browser<br />Server Push<br />Push: server sends messages to client<br />HTTP does not allow Server to call Client<br />Se...
Active: Server Push (aka Reverse AJAX)<br />From: Server could notify Client when asked (for example in a poll)<br />To: A...
New Tweets coming in …<br />
Personalized: Customization<br />From: One size fits all style of application<br />With possibly custom built customizatio...
Visually Compelling: Alternative Data Visualization<br />From: tables, trees and form-fields as more or less the only repr...
Some components not yet available ….<br />Carousel<br />Auto Suggest<br />(native) Google Maps integration<br />Declarativ...
Demoing Visual stuff<br />Calendar, Pivot Table, Hierarchy Viewer<br />
Creating a Calendar<br />Need a ViewObject that has<br />Start time, End Time, Title, Id<br />And may have<br />Recurring,...
Hierarchy Viewer<br />
Hierarchy Viewer<br />ViewObjects with ViewLinks provide model for tree binding that underlies the Hierarchy DVT<br />At e...
Benefit of Data Binding<br />Implementing the model required by the advanced DVTs can be quite a challenge<br />Fortunatel...
Pivot Table<br />
Pivot Table<br />ViewObject underlies PivotTable<br />Choose Attributes for Rows/Columns and Cells<br />Optionally specify...
Summary<br />ADF 11g brings a lot of productivity through reuse and visual & declarative development<br />It also brings a...
Resources<br />Download all demo applications and source code from http://technology.amis.nl/blog/<br />For further questi...
Upcoming SlideShare
Loading in …5
×

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

5,127 views

Published on

ADF web applications have been hailed as productive to develop and functionally complete. However, ADF 11g RichFaces makes them visually attractive, rich and really Web 2.0 too. This presentation is about enriching ADF Web applications with 11g RichFaces. It discusses features, components, containers, events and behaviors that ADF developers now have at their disposal and how to best use them. Key topics: panelsplitter, accordion, popup, menu, skinning, charts, Server-Push, AJAX-PPR-client-server-interaction, client events API, customization.

Published in: Technology
  • Be the first to comment

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

  1. 1. That&apos;s Rich! Putting a smile on ADF Faces<br />ODTUG Kaleidoscope 2009<br />Lucas Jellema<br />
  2. 2. A Smile on Whose Face?<br />
  3. 3. Overview<br />What’s ADF 11g all about?<br />Adding richness to ADF Web Applications<br />Organized: Elegant real estate management<br />Responsive & Interactive: Client Side and AJAX<br />Attractive: Skinning & Styling<br />Active: Server Push (aka Reverse AJAX)<br />Personalized: Customization <br />Visually Compelling: Alternative Data Visualization<br />Summary<br />
  4. 4. ADF == Dogfood<br />
  5. 5. Key themes for ADF 11g<br />(more) Declarative (4GL style) development<br />Lot of functionality can be Model driven: Complex Search Forms, List of Values, Validations<br />95% no-code development (visual, wizard,..)<br />High level of reusability<br />Page templates, Declarative Components, Task Flows & Regions, ADF Libraries, Model based specifications<br />MDS (Meta Data Store) for design-time and run-time customization<br />Skinning for tailor made look & feel<br />Based on (latest) JEE standards<br />Support many highly specialized Fusion Apps features<br />
  6. 6. ADF 11g archictecture<br />
  7. 7. Release 11.1.1.1.0<br />Code name Bulldog<br />part of FMW 11gR1 (shipping July 1st)<br />Meta Data Services (MDS)<br />Active Data Source (Server Push)<br />Desktop Integration (Excel as ADF Client)<br />New components: Calendar, HierarchyViewer, PanelDashboard<br />Team Collaboration<br />WebCenter and SOA Suite integration<br />
  8. 8. Rich Layout –Real Estate Management<br />From static containers and browser popup windows<br />To better looking, much snappier & nestable<br />Dynamically resizable panelSplitter<br />Accordion, Tabbed Panel<br />Dashboard<br />PanelBox, Show Detail, Show Detail Header<br />And virtually limitless real estate: Popup<br />Also Context Menu, List of Values and SelectDate<br />
  9. 9. PanelDashboard<br />‘portal look-a-like’ using PanelBoxcomponents<br />Drag & drop available for reorganizing<br />
  10. 10. Adding in an Accordion<br />Left sidebar should have an Accordion Pane<br />That appears in (almost) every page<br />Drag and Drop pane to the template<br />Move Navigation List to the first Detail Pane<br />Add a second Pane for ‘inspiration’<br />
  11. 11. About popups<br />A popup usually has one of these components as child<br />noteWindow<br />panelWindow<br />dialog<br />Menu<br />Popups are usually associated with a component to align with & action triggering their appearance<br />The showPopupBehavior tag is used for configuring this<br />Content of a popup can be loaded with the page (immediate) or when required (lazy or lazyUncached)<br />
  12. 12. Various Popup examples<br />
  13. 13. Configuring a showPopupBehavior tag<br />The showPopupBehavior tag is added as a child to a component that should trigger display of the popup<br />triggerType attribute is used to specify event on component that launches popup<br />Attribute alignId indicates the component with which the popup should align<br />align specifies relative position of the popup<br />popupId refers to the popup to show<br />
  14. 14. Example: Adding fancy balloon help<br />Create a popup with a noteWindow child to contain the fancy help content<br />Add a showPopupBehavior tag to the inputText we want to add the help to<br />
  15. 15. Responsive & Interactive Rich Client, AJAX & PPR<br />From PPR based on field change & button click and using clunky IFRAMEs<br />To smooth, elegant, light(er)-weight <br />Triggerable by many different types of action<br />AJAX Payload is configurable<br />Can link to Server Side listeners<br />Can run JavaScript after PPR has completed<br />And a rich client side API <br />Round-trip free component manipulation<br />Drag and Drop support<br />
  16. 16. Table fetching data…<br />Table fetches data in asynchronous request<br />And trees, charts, other DVTs, …<br />
  17. 17. Some remarks<br />visible vs rendered<br />Only what is in the client can be PPRed or manipulated; <br />when rendered == false, nothing is sent to client<br />clientComponent =“true” to instruct a manipulatable object to be rendered in client<br />for example for outputText<br />Client API: JavaScript API that allows manipulation of rich components<br />
  18. 18. Manipulate component state<br />The client side API allows us to manipulate most component properties that we can set server side<br />Overriding the values derived server side from EL expressions with ‘later insights’ on the client – without AJAX overhead<br />For example: toggling disclosed state of a ShowDetail<br />
  19. 19. Client Listeners to intercept and act on Client Events<br />The ClientListener component is used to intercept client side events and handle in JavaScript<br />ClientListeners can respond to many different events<br />That may or may not propagate to the server<br />ClientListener specifies theJavaScript method to becalled upon the event<br />This method has an eventinput parameter<br />
  20. 20. Using the Client Side API for quick derivation<br />Enter Fahrenheit value<br />ValueChange event fires<br />ClientListener picks up and calls JS function<br />Function reads value and updates Celsius component<br />
  21. 21. ServerListeners for custom AJAX<br />A serverListener associates a server side method with a client side custom event<br />This allows JavaScript functions to start communications with the server by queuing an event listened for by server<br />A custom event carries a payload<br />
  22. 22. Demo “Auto Suggest”<br />Key Up Event is intercepted by a Client Listener<br />That calls a JavaScript method<br />The JavaScript method queues a custom event<br />With the new value in State<br />ServerListener processes theevent<br />Derives the new list of suggestions<br />PPRs the SelectOneList component<br />
  23. 23. Set Property Listener<br />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 <br />Supported types: action, focus, poll, query, rangeChange, selection, sort, rowDisclosure, valueChange and many more<br />&lt;af:image id=&quot;removeFromSetImage“<br /> source=&quot;/images/removeFromSet.png“<br />shortDesc=&quot;Remove from Shopping Basket&quot;/&gt;<br />&lt;af:setPropertyListener from=&quot;#{item}“<br /> to=&quot;#{shoppingBasket.itemToRemove}&quot;<br /> type=&quot;action&quot;/&gt;<br />&lt;/af:commandLink&gt;<br />
  24. 24. Attractive: Skinning & Styling<br />From: quite arbitrary, inconsistent skinnable visual properties – based on simple skin<br />To: completely reworked skinning framework<br />consistent, well documented and extensive<br />Based on rich BLAFPLUS skin<br />Supported by on line demo (rea.oracle.com)<br />Including skinning of resources<br />And: support for contentStyle and inlineStyle in most components<br />
  25. 25. Browser<br />Server Push<br />Push: server sends messages to client<br />HTTP does not allow Server to call Client<br />Server can only respond to a request<br />A bit like homing pidgeons…<br />So Client calls Server and server reponds…. when it has a message<br />Browser<br />Browser<br />X<br />Server<br />
  26. 26. Active: Server Push (aka Reverse AJAX)<br />From: Server could notify Client when asked (for example in a poll)<br />To: Active Data Service (ADS) that can push events to active components<br />Some components including table, tree, all types of graphs and charts support the ADS<br />If the data model implements the ADS model , events are pushed to the client<br />And: Auto-PPR<br />Any change from a data binding marked as “auto ppr” is pushed (piggybacked on PPR) to client<br />
  27. 27. New Tweets coming in …<br />
  28. 28. Personalized: Customization<br />From: One size fits all style of application<br />With possibly custom built customization<br />To: fully integrated customization service<br />Components (table, tree, panelbox,…) that support user defined configuration<br />Customizations stored in Session or persisted in MDS to be reapplied across sessions<br />And: customizations in non ADF components (or in any other meta data) can go in MDS too<br />
  29. 29. Visually Compelling: Alternative Data Visualization<br />From: tables, trees and form-fields as more or less the only representation of data<br />To: rich visual components displaying and allowing manipulation of data<br />Graphs & Charts<br />Maps, Pivot Table, Hierarchy Viewer<br />Calendar<br />And: rich data controls<br />Slider, color picker, rich text editor, date selector<br />
  30. 30. Some components not yet available ….<br />Carousel<br />Auto Suggest<br />(native) Google Maps integration<br />Declarative support for Easter Eggs<br />
  31. 31. Demoing Visual stuff<br />Calendar, Pivot Table, Hierarchy Viewer<br />
  32. 32. Creating a Calendar<br />Need a ViewObject that has<br />Start time, End Time, Title, Id<br />And may have<br />Recurring, Reminder, Location, Tags<br />And custom attributes<br />Drag and Drop VO as Calendar<br />Map attributes to Calendar properties<br />Implement Listeners for various events<br />
  33. 33. Hierarchy Viewer<br />
  34. 34. Hierarchy Viewer<br />ViewObjects with ViewLinks provide model for tree binding that underlies the Hierarchy DVT<br />At each node level: specify the content of the panel – optionally per zoom-level<br />
  35. 35. Benefit of Data Binding<br />Implementing the model required by the advanced DVTs can be quite a challenge<br />Fortunately, ADF Model does it for us: <br />We can drag Data Controls (collections) to a page<br />And drop them as any DVT we like<br />The Graph DataBinding that gets created implements the model needed for the DVT<br />Both POJO based as well as on (preferred) ADF BC<br />
  36. 36. Pivot Table<br />
  37. 37. Pivot Table<br />ViewObject underlies PivotTable<br />Choose Attributes for Rows/Columns and Cells<br />Optionally specify<br />Custom styling for cells<br />Data editing on cells<br />Aggregation<br />Interaction (event listeners such as click)<br />
  38. 38. Summary<br />ADF 11g brings a lot of productivity through reuse and visual & declarative development<br />It also brings a lot of ‘richness’ that can make web applications make people smile<br />More attractive, productive, functional<br />Important features providing richness<br />AJAX, PPR, Server Push and Client Side (JS) API<br />Rich Components, Layout Containers, MDS, alternative Data Visualization, Skinning & Styling<br />Try out the rich features, give them a spin!<br />
  39. 39. Resources<br />Download all demo applications and source code from http://technology.amis.nl/blog/<br />For further questions:<br />Email: lucas.jellema@amis.nl<br />

×