Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

12c New ADF Faces Components - Springboard, Drawer and Timeline

DZone's Guide to

12c New ADF Faces Components - Springboard, Drawer and Timeline

· Java Zone ·
Free Resource

Download Microservices for Java Developers: A hands-on introduction to frameworks and containers. Brought to you in partnership with Red Hat.

The new JDeveloper 12c comes with some pretty cool ADF Faces components that can make your applications (or demos) look even better.

For the session I did at the Kscope13 conference I built a small application that showed off some of these components, and now the JDeveloper 12c is available for all to see, I thought I'll share a short video of the application.

It highlights the runtime behavior of the new components and shows you the basic code structure for each.

Check it out:

Here is the code that is uses in the pages:

Springboard (inside the center of a panelStretchLayout):

  <af:panelSpringboard id="ps1" displayMode="grid" childCreation="lazyUncached">
  <af:showDetailItem text="Search" icon="/springimg/home48_ena.png" id="sdi1"
  stretchChildren="first" flex="0">
  <af:region value="#{bindings.kscope1.regionModel}" id="r4"/>
  </af:showDetailItem>
  <af:showDetailItem text="Quick View" icon="/springimg/tasks48_ena.png" id="sdi2"
  stretchChildren="first" flex="0">
  <af:region value="#{bindings.HV_Browsing1.regionModel}" id="r1"/>
  </af:showDetailItem>
  <af:showDetailItem text="Cities Graphs" icon="/springimg/dashboard48_ena.png"
  id="sdi3" stretchChildren="first" flex="0">
  <af:region value="#{bindings.Charts1.regionModel}" id="r3"/>
  </af:showDetailItem>
  <af:showDetailItem text="House Data" icon="/springimg/source48_ena.png" id="sdi4"
  stretchChildren="first" flex="0">
  <af:region value="#{bindings.hotList1.regionModel}" id="r6"/>
  </af:showDetailItem>
  <af:showDetailItem text="Timeline" icon="/springimg/deployments48_ena.png" id="sdi5"
  stretchChildren="first" flex="0">
  <af:region value="#{bindings.TimeLine1.regionModel}" id="r5"/>
  </af:showDetailItem>
  <af:showDetailItem text="Support" icon="/springimg/team48_ena.png" id="sdi6"
  badge="2" stretchChildren="first" flex="0"/>
  </af:panelSpringboard>


Code for the panelDrawer:

  <af:panelDrawer id="pd1" position="end">
  <af:showDetailItem text="showDetailItem 1" id="sdi1" icon="/springimg/home48_ena.png" disclosed="true" flex="0">
  <dvt:pieGraph id="graph1" value="#{bindings.CityStats1.graphModel}" subType="PIE" shortDesc="a">
  </dvt:pieGraph>
  </af:showDetailItem>
  <af:showDetailItem text="City" id="sdi2" icon="/springimg/dashboard48_ena.png">
  <dvt:horizontalBarGraph id="graph2" value="#{bindings.CityStats11.graphModel}"
  subType="BAR_HORIZ_CLUST_SPLIT2Y" shortDesc="a">
  </af:showDetailItem>
  <af:showDetailItem text="showDetailItem 3" id="sdi3" icon="/springimg/network48_ena.png" disclosed="false">
  </af:showDetailItem>
  <af:showDetailItem text="showDetailItem 5" id="sdi5"/>
  </af:panelDrawer>



 TimeLine:

  <dvt:timeline id="tl1" startTime="2012-06-01" endTime="2013-01-13">
  <dvt:timelineSeries id="ts1" var="evt" value="#{bindings.HousesView1.collectionModel}">
  <dvt:timelineItem value="#{evt.FirstOffered}" id="ti1" group="#{evt.City}">
  <af:panelGroupLayout id="pg1" layout="horizontal">
  <af:panelGroupLayout id="pg2" layout="vertical">
  <af:outputText id="ot1" value="#{evt.Street}" noWrap="true"/>
  <af:outputText id="ot2" value="#{evt.Price}" noWrap="true">
  <af:convertNumber groupingUsed="false" pattern="#{bindings.HousesView1.hints.Price.format}"/>
  </af:outputText>
  <af:image id="ot3" source="#{evt.Picture}" inlineStyle="height:100px; width:150px;"/>
  </af:panelGroupLayout>
  </af:panelGroupLayout>
  </dvt:timelineItem>
  </dvt:timelineSeries>
  <dvt:timeAxis id="ta1" scale="weeks"/>
  <dvt:timelineOverview id="ov1">
  <dvt:timeAxis id="ta2" scale="quarters"/>
  </dvt:timelineOverview>
  </dvt:timeline> 

Download Building Reactive Microservices in Java: Asynchronous and Event-Based Application Design. Brought to you in partnership with Red Hat

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}