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

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>