Goodbye Nightmare: Tips and Tricks for Creating Complex Layouts with Oracle ADF Faces - Luc Bors


Published on

One of the most challenging tasks when developing an ADF application is achieving a proper layout. Both
stretching components and the ones that don't stretch can make a developer's life into a nightmare. In this
session you will learn best practices for creating complex layouts with ADF Faces. You will see how to use the
various ADF Layout components and build the layout that you need.

Published in: Technology, Art & Photos
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Goodbye Nightmare: Tips and Tricks for Creating Complex Layouts with Oracle ADF Faces - Luc Bors

  1. 1. Luc Bors, june 2013, ODTUG KScope 2013 New Orleans Tips and Tricks for Creating Complex Layouts with Oracle ADF Faces Goodbye Nightmare
  2. 2. Who Am I • Luc Bors • Principal Consultant • AMIS Nieuwegein Netherlands • Friends of Oracle & Java • 5 Oracle ACE(D) • Oracle Partner
  3. 3. Just a Quote… Let's face it: With ADF Faces rich client, layout …….. once you are a layout master, all bow before you, but it's more of an art than a science, and it is often, in fact, way too difficult to achieve what should (apparently) be a pretty simple.
  4. 4. Back to the drawingboard
  5. 5. Visio Stencils • sample-522118.html
  6. 6. ADF Layout Containers
  7. 7. The PanelFormLayout • Organize (input) components in a form layout – Aligning labels and fields in rows and columns – attribute labelAlignment to display labels above the fields
  8. 8. The PanelFormLayout • Use the ‘Rows’ attribute • Use the ‘MaxColumns’ attribute
  9. 9. The PanelStretchLayout • Stretches its components to fill available space – Top and bottom facet can be set to fixed height (or auto) – Start and end facet can be set to fixed width – Facets with no content do not render
  10. 10. Demo
  11. 11. The PanelSplitter • To create resizable panes – That stretch their content • panelSplitter has two facets: first and second – Content for the panes is provided in the facets • Orientation horizontal or vertical • Can be collapsible • Position can be fixed • Can be nested • Collapse and resize events can be listened to
  12. 12. panelAccordion • The panelAccordion displays one or more collapsible/expandable panes in a vertically layout – Multiple panes can be expanded at once if discloseMany=true • discloseNone=true means that all panes can be collapsed – Overflow icon is shown to scroll to panes that do not fit in the area – Expanding & Collapsing panes is a client side operation – Accordions can be nested
  13. 13. PanelTabbedLayout • The panelTabbed displays one or more tabbed panes – panelTabbed has position attribute (tab can be shown at the top, at the bottom or both) • The content of a tab pane is in a showDetailItem – A tab has attributes for title, icon, disabled, • panelTabbed can be nested • Overflow icon and popup are shown when the tabs do not fit next to each other
  14. 14. Flowing and Stretching • Setting Background color can help you understand what is actually happening. • Makes you recognize the components at runtime
  15. 15. Demo
  16. 16. Be Aware !! Stretchable ? Stretches ? PanelStretchLayout YES YES PanelSplitter YES YES PanelCollection YES YES PanelGroupLayout (scroll, vertital) YES NO PanelGroupLayout (default, horizontal) NO NO PanelFromLayout NO NO PanelBorderLayout NO NO PanelDashBoard YES YES (Inside a grid) PanelTabbed YES YES (StretchChildren = first)
  17. 17. JDeveloper Can Help You
  18. 18. Quick Start Layouts
  19. 19. Predefined Layouts
  20. 20. Even better…
  21. 21. Colors rule !
  22. 22. The ADF Table • Layout and the ADF Table – How – What – When
  23. 23. A Common ADF Layout issue • PanelGroupLayout does not Stretch it’s children
  24. 24. Solution • Remove PGL – This does the trick • Surround with PanelCollection – Very convenient
  25. 25. The (almost) stretched table
  26. 26. Using the column • Consider Column Stretching – none (default): Gives optimal performance – blank: Inserts an empty blank column that is stretched; use this so that the row’s background colors will span the entire width of the table – last: Stretches the last column to fill up any unused space inside the viewport – column:<id>: Stretches a specified column; use the ID of the column that you want to stretch (requires that you explicitly set the column’s ID property—the drop-down list for the property displays all columns whose ID has been set) – multiple When the "multiple" option is used you can set the widths in the columns (non-group) to be percentages.
  27. 27. The stretched table
  28. 28. Demo
  29. 29. Ready ?
  30. 30. ScrollBar ScrollBar Everywhere • Never place a scrolling panelGroupLayout inside of another scrolling panelGroupLayout since users do not like nested scroll bars
  31. 31. And now they are gone …. • I Know what to do: Lets use layout vertical on the outer PGL……… …… and they are all gone….
  32. 32. This works best • You learned earlier that: – PanelGroupLayout does not Stretch it’s children • Remove PGL • Stretch via Styleclass – AfStretchWidth
  33. 33. Now What …..
  34. 34. The PanelformLayout • Can we create a properly aligned form ? • Having alignment of fields on the left ? • Having alignment of fields on the right ? • Having First Name and Last Name in one line ? • Look at the default layout for such a form…….
  35. 35. Step 1 • Bring First Name and Last Name into an aggregate Container – use a panelLabelAndMessage component which is designed specifically for this purpose of allowing several logical components, or components without their own label property to be correctly laid out in a panelFormLayout.
  36. 36. Step 2 • Alignment Components For First Name and Last Name – By default, the panelLabelAndMessage will lay out its children vertically. In this case we want the components side-by-side. So simply use a horizontal panelGroupLayout to align the two fields
  37. 37. Step 3 ? • Remove Labels
  38. 38. Step 3 ! • Remove Labels – The label is defined by the panelLabelAndMessage. – set the simple property to “true” on each of the child components. – also set the for property on the parent panelLabelAndMessage to the relevant child component id. This will endure that error messages are correctly displayed.
  39. 39. Step 4 • Ensure Right Alignment – Components such as the selectOneChoice do not stretch and are controlled by the size of their data – You will have to control the size manually using styles. – The contentStyle property is used to control just the width of the drop down box itself and therefore is the property to use. Unfortunately getting the exact width, is a matter of trial and error. – For precise alignment that can survive zooming by the user, you may have to set explicit sizes in em’s for all the components in the form, or use the fieldWidth and LabelWidth properties of the panelFormLayout.
  40. 40. And Finally……The Result
  41. 41. Separators and Spacers • Default behavior • Spacers and Separators
  42. 42. Now What …..
  43. 43. Forget (almost) all Of the Above….
  44. 44. The PanelGridLayout • The panelGridLayout component is a layout container component that – uses one or more gridRow components to describe the rows of a grid layout structure. – Each row defines a height and margins. – Each gridRow uses one or more gridCell components to describe the cells for columns in that row of the grid layout structure. – Each cell defines width, margins, column span, row span, horizontal alignment, and vertical alignment
  45. 45. How does it work ?
  46. 46. Bye Bye Spacers & Separators
  47. 47. How to make this layout ?
  48. 48. How we Used to do it
  49. 49. This is What we do Now
  50. 50. Creating OTN with ADF
  51. 51. Demo
  52. 52. What about Outlook ?
  53. 53. Demo
  54. 54. Outlook in ADF
  55. 55. Summary tips • Work with colors – Makes it clear what is going on • Use as little layout containers as possible. – The pages is smaller and faster • Reduce the number of components that need to stretch – The pages are faster • Use the quick start layouts – Saves you time
  56. 56. Summary tips • Start with strechtable outer frame – Such as…PSL, PSP, • In there, have the flowing islands. • Never try to stretch something vertically in a flowing island – Inconsistent results accross browsers – Also need to consider the case where you build pagefragments that can be reused in other pages. – Styling only via Styleclass. • Use the Developerguide or create your own Cheat Sheet ! • Benefit from PanelGridLayout !!! – or
  57. 57. And do not …. • Do Not use RAW HTML in the pages • Do Not use inlinestyle use skinning • Do Not specify height with % – Might result in multiple vertical scrollbars • Do not try to stretch a none stretchable component by setting width = 100% – Surround with stretchable componenent that also stretches its children – Or use AFStretchWidth styleClass
  58. 58. Resources •
  59. 59. Resources •
  60. 60. Questions ….. Answers….
  61. 61. Luc Bors, AMIS, The Netherlands Follow me on : @lucb_