- 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

Agenda

• Who am I • Motivation / Use Cases • Component overview • Programmer examples • Live-Demo • Conclusion

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.

Motivation

• Simplified UI

• Glance Scan Committo 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

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

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 insideaf:panelGroupLayout layout=„scroll“

• af:iterator inside af:deck not supported (because of stamping)

Andreas Koop, enpit 23.01.2015

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

ADF Deck Usecase: Slideshow

• control elements are af:link inside an af:panelGroup

• af:deck componentcontains • af:image s • af:transition triggerType="forwardNavigate" • af:transition triggerType="backNavigate"

Andreas Koop, enpit 23.01.2015

ADF Deck JSF Code Usecase: Slideshow

Andreas Koop, enpit 23.01.2015

ADF Deck Backing Bean Code Usecase: Slideshow

Andreas Koop, enpit 23.01.2015

ADF Deck Usecase: Person -> Detail

• control elements are af:commandLink s insideaf:deck

• af:deck componentcontains • 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

ADF Deck JSF Code Usecase: Person -> Detail

Andreas Koop, enpit 23.01.2015

ADF Deck Usecase: Master -> Detail inside a grid

• control elements are af:commandLink s insideaf:deck

• af:deck inside af:listItemand display:inline-block

• af:deck componentcontains • 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

ADF Deck Usecase: Master -> Detail (Workbetter App)

Andreas Koop, enpit 23.01.2015

DemoAndreas Koop, enpit 23.01.2015

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