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

Here is a past entry about using the Sunburst component that you see in the demo.


Hi Shay,

Very nice your post. I wanted to implement something like you did. I am just starting with this version.

1.- The skinning for the springboard was made by you? By default it dosn't show me any colors.

2.- When I put one taskflow as a region inside the showDetailItem, I can't navigate to the other tabs of the springboard. There is something I am missing?


Posted by Alejandro Tovar Lanz on July 28, 2013 at 01:03 PM PDT #

Alejandro, The coloring of the springboard comes from the containing object a decorative box with a theme on it. - <af:decorativeBox theme="dark">

2 - I'm not sure what is missing in your case assuming you put the taskflow as a region. Try posting more details on the JDeveloper forum on OTN.

Posted by guest on July 29, 2013 at 10:57 AM PDT #

Hi Shay -

Is it possible to have a smaller version of springboard (with reduced height) so that it consumes less space on the page?


Posted by guest on August 20, 2013 at 12:35 PM PDT #

guest, did you try skinning the component?
see: http://jdevadf.oracle.com/adf-richclient-demo/docs/skin-selectors.html#panelSpringboard

Posted by Shay on August 20, 2013 at 04:24 PM PDT #

hey Shay, could you please clarify what these child tags iterator, switcher, showDetailItem, group child tags in short as i am unable to find there descrption, i need to tedst them from internationalisation point-of -view.

Thanks & regards

Posted by guest on August 27, 2013 at 03:03 AM PDT #

Hi Shay,
I was able to create the springBoard and the detail items with icons, but how do I add a page jsf/jsff for each detailItem ?
Could you please post a snippet of code to do that, or please point me to the right documentation.
Also is it possible to download the code for this demo?


Posted by guest on September 09, 2013 at 12:01 PM PDT #

guest - put your JSFF in a bounded taskflow with fragments.
Drag the taskflow into your showDetailItem.

Posted by Shay on September 09, 2013 at 04:12 PM PDT #

Thanks Shay, one quick follow up question:
my page opens in 'grid' display, and after clicking the detailitem it goes to 'strip' mode. How do I reset the page back to 'grid' mode if user needs to? Refreshing the browser still shows the 'strip' mode.


Posted by guest on September 09, 2013 at 07:23 PM PDT #

Shay :

I'm able to configure springboard, but I'm not able to render a taskflow on showDetailItem's click event. This is my code :

<af:panelSpringboard id="ps1" displayMode="grid">
<af:showDetailItem text="Clusters" id="sdi1" icon="/images/png/server.png">
<af:region value="#{bindings.serverstaskflow1.regionModel}" id="r1"/>

I dragged the taskflow to the showDetailItem element and I created it as Region, but when I deploy the sample, the springboard doesn't show the contents of the taskflow page fragment configured within it.

What is missing ?

Thanks for your help.

Posted by Oscar on October 28, 2013 at 02:50 PM PDT #

Is there a way to put a rectangular border around each icon? I couldn't find any property to do that. I tried surrounding each detailItem with panelGroupLayout, so I could enable the border on panelGroup. But, the detailItem disappeared after that. Is there any skinning properties to do this?

Posted by guest on November 26, 2013 at 07:55 AM PST #

guest - how about including the border in the icon image itself.

Posted by Shay on November 26, 2013 at 01:11 PM PST #

I did upgrade adf 11..1.1.7 to ADF 12c .But some of problem I am facing like
1.Task flow state is not changing i.e. template global area go link .
2. How to do ADF 12c integration with oracle web center content management 11g ?
3. ADF view object groovy expression condition is not working i.e. adf.userSession.userData.XX == 'XX1’ ? 'ORGANIZATION' : 'PERSON'

Please help me , if you have any solution or send me any help note or sample examples

Posted by Sanjay Kumar Gouda on March 24, 2014 at 04:08 AM PDT #

Sanjay - post your questions on the ADF Forum on OTN with more details of what exactly is not working and what error messages you get.
For question 2 - you should be able to call content management web services from 12c - there is still no WebCenter extension for 12c

Posted by guest on March 24, 2014 at 06:21 PM PDT #

To reset the page back to grid Mode, Add the following javascript to the page where psbid is the id of your panelspringboard. I got this from the Oracle jdev panel spring board demo
function backToGrid(actionEvent)
var eventSource = actionEvent.getSource();
var object_navigator = eventSource.findComponent("psbId");
object_navigator.setProperty(AdfRichPanelSpringboard.DISPLAY_MODE, "grid", true);

Posted by Laolu on March 04, 2015 at 03:51 AM PST #

Hi Shay,

With regard to the panelDrawer component, is it possible to introduce smooth transitions while the drawer closes and opens. I'm using one and the effect is not very good.

Thanks a lot

Posted by guest on March 17, 2015 at 03:53 AM PDT #


The animation looks smooth to me on this page:

Use the OTN forum to ask your question with more details about what's not working for you.

Posted by Shay on March 17, 2015 at 10:06 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed

I'm a Director of Product Management for Oracle's Cloud Development Tools and Frameworks.
Follow me:

« June 2016