This is a short presentation about ADF 12c component. Use Cases, Overview, Programmer example and conclusion.

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

15. Demo
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