ADF Spotlight: ADF 12c Deck component overview and progammer examples
1 like4,085 views
The document provides an overview of the ADF 12c Deck component, highlighting its function as a container for displaying one child component at a time with optional animated transitions. It outlines various use cases such as slideshows, detail displays, and memory games, along with programming examples in JSF code for implementation. The conclusion emphasizes the component's utility in creating simplified user interfaces while noting limitations like deprecated commands.
ADF Spotlight: ADF 12c Deck component overview and progammer examples
- 1. - Component Overview & Programmer Examle - „ADF 12c deck component“ Andreas Koop Consultant & Managing Director, enpit consulting OHG E-Mail: [email protected] +++ Bitte nutzen Sie die bevorzugte Telefonnummer +49 89 1430 2323 oder alternativ +49 69 2222161, um sich in Telefonkonferenz einzuwählen. Geben Sie anschließend die Konferenz-ID 6528260, Ihren Namen und den Sichersheitscode 121212 jeweils gefolgt mit der Raute Taste # ein. +++ ADFSpotlight
- 2. Agenda • Who am I • Motivation / Use Cases • Component overview • Programmer examples • Live-Demo • Conclusion
- 3. Who am I • Andreas Koop (enpit) • Architect /Consultant / Managing Director • ADF since 2006 (10.1.3) Kontakt: [email protected] @andreaskoop G+, XING, LinkedIn, etc.
- 4. Motivation • Simplified UI • Glance Scan Commit to see if anything needs action for more details or take a first action to working on a particular task Andreas Koop, enpit 23.01.2015
- 5. Component overview „ADF 12c Deck“ (1/2) • „The Deck component is a container that shows one child component at a time“ • „When changing which child is displayed, the transition can be animated“ • „This component does not provide any built-in controls for choosing which child is displayed“ Andreas Koop, enpit 23.01.2015
- 6. Component overview „ADF 12c Deck“ (2/2) • Geometry Management • af:deck can be stretched by parent that stretches it children (z.B. panelStretchLayout) • af:deck will stretch its child if itself is beeing stretched. To avoid: wrap child inside af:panelGroupLayout layout=„scroll“ • af:iterator inside af:deck not supported (because of stamping) Andreas Koop, enpit 23.01.2015
- 7. Use Cases for af:deck • Slideshow • Person -> Details Card (HR App) • Product -> Details Card (Webshop App) • Memory Card Game ;) Andreas Koop, enpit 23.01.2015
- 8. ADF Deck Usecase: Slideshow • control elements are af:link inside an af:panelGroup • af:deck component contains • af:image s • af:transition triggerType="forwardNavigate" • af:transition triggerType="backNavigate" Andreas Koop, enpit 23.01.2015
- 9. ADF Deck JSF Code Usecase: Slideshow Andreas Koop, enpit 23.01.2015
- 10. ADF Deck Backing Bean Code Usecase: Slideshow Andreas Koop, enpit 23.01.2015
- 11. ADF Deck Usecase: Person -> Detail • control elements are af:commandLink s inside af:deck • af:deck component contains • 1 af:commandLink wrapping an af:image • 1 af:commandLink wrapping af af:panelHeader • af:transition triggerType="forwardNavigate" • af:transition triggerType="backNavigate" Front Back Flip on Click Andreas Koop, enpit 23.01.2015
- 12. ADF Deck JSF Code Usecase: Person -> Detail Andreas Koop, enpit 23.01.2015
- 13. ADF Deck Usecase: Master -> Detail inside a grid • control elements are af:commandLink s inside af:deck • af:deck inside af:listItem and display:inline-block • af:deck component contains • 2 af:panelBox wrapping n Elements • af:transition triggerType="forwardNavigate" • af:transition triggerType="backNavigate" Front Back Flip on Click Andreas Koop, enpit 23.01.2015
- 14. ADF Deck Usecase: Master -> Detail (Workbetter App) Andreas Koop, enpit 23.01.2015
- 16. Conclusion + Useful UI component, in order to implement „Simplified UI“ paradigm. Easy usage + Several UI Patterns possible: Slideshow, Master- Detail + Support for accessibility inkluded: landmark - No wizard, no code generation support - af:link no allowed insinde af:deck. Forced to use deprecated af:commandLink Andreas Koop, enpit 23.01.2015