ADF Spotlight: ADF 12c Deck component overview and progammer examples
1 like4,083 views
This is a short presentation about ADF 12c component. Use Cases, Overview, Programmer example and conclusion.
More Related Content
More from Andreas Koop (9)
Recently uploaded (20)
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: andreas.koop@enpit.de +++ 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: andreas.koop@enpit.de @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