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

  • 4,484 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,484
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • http://www.slideshare.net/mwessendorf/server-side-push-with-adf-faceshttp://jdevadf.oracle.com/adf-richclient-demo/faces/index.jspx
  • Demo of Hierarchy Viewer: http://rea.oracle.com/faces/indexHosted demo of DVT: http://jdevadf.oracle.com/dvtdemo-dvt-faces-demo-context-root/faces/index.jspx
  • Demo of Hierarchy Viewer: http://rea.oracle.com/faces/indexHosted demo of DVT: http://jdevadf.oracle.com/dvtdemo-dvt-faces-demo-context-root/faces/index.jspx

Transcript

  • 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