Over a million developers have joined DZone.

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

· Java Zone

Check out this 8-step guide to see how you can increase your productivity by skipping slow application redeploys and by implementing application profiling, as you code! Brought to you in partnership with ZeroTurnaround.

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 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 text="Cities Graphs" icon="/springimg/dashboard48_ena.png"
  id="sdi3" stretchChildren="first" flex="0">
  <af:region value="#{bindings.Charts1.regionModel}" id="r3"/>
  <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 text="Timeline" icon="/springimg/deployments48_ena.png" id="sdi5"
  stretchChildren="first" flex="0">
  <af:region value="#{bindings.TimeLine1.regionModel}" id="r5"/>
  <af:showDetailItem text="Support" icon="/springimg/team48_ena.png" id="sdi6"
  badge="2" stretchChildren="first" flex="0"/>

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">
  <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 text="showDetailItem 3" id="sdi3" icon="/springimg/network48_ena.png" disclosed="false">
  <af:showDetailItem text="showDetailItem 5" id="sdi5"/>


  <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:image id="ot3" source="#{evt.Picture}" inlineStyle="height:100px; width:150px;"/>
  <dvt:timeAxis id="ta1" scale="weeks"/>
  <dvt:timelineOverview id="ov1">
  <dvt:timeAxis id="ta2" scale="quarters"/>

The Java Zone is brought to you in partnership with ZeroTurnaround. Check out this 8-step guide to see how you can increase your productivity by skipping slow application redeploys and by implementing application profiling, as you code!


Published at DZone with permission of Shay Shmeltzer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}