Home >Technology >ADF Spotlight: ADF 12c Deck component overview and progammer examples
ADF Spotlight: ADF 12c Deck component overview and progammer examples
Date post:15-Jul-2015
Category:Technology
View:1,204 times
Download:2 times
Share this document with a friend
Transcript:
  • - 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 einzuwhlen. Geben Sie anschlieend dieKonferenz-ID 6528260, Ihren Namen und denSichersheitscode 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

Embed Size (px)
Recommended