ADF Spotlight: ADF 12c Deck component overview and progammer examples
-
Upload
andreas-koop -
Category
Technology
-
view
1.228 -
download
2
Transcript of ADF Spotlight: ADF 12c Deck component overview and progammer examples
- 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
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: [email protected]
@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