Over a million developers have joined DZone.

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

Build vs Buy a Data Quality Solution: Which is Best for You? Gain insights on a hybrid approach. Download white paper now!

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"/>

Build vs Buy a Data Quality Solution: Which is Best for You? Maintaining high quality data is essential for operational efficiency, meaningful analytics and good long-term customer relationships. But, when dealing with multiple sources of data, data quality becomes complex, so you need to know when you should build a custom data quality tools effort over canned solutions. Download our whitepaper for more insights into a hybrid approach.


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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}