X

Shay Shmeltzer's Oracle Development Tools Tips

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

Shay Shmeltzer
Director of Product Management - Oracle

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>

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


Join the discussion

Comments ( 22 )
  • Alejandro Tovar Lanz Sunday, July 28, 2013

    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?

    Regards


  • guest Monday, July 29, 2013

    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.


  • guest Tuesday, August 20, 2013

    Hi Shay -

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

    Thanks.


  • Shay Tuesday, August 20, 2013
  • guest Tuesday, August 27, 2013

    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

    uk


  • guest Monday, September 9, 2013

    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?

    Thanks.


  • Shay Monday, September 9, 2013

    guest - put your JSFF in a bounded taskflow with fragments.

    Drag the taskflow into your showDetailItem.


  • guest Tuesday, September 10, 2013

    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.

    Thanks.


  • Oscar Monday, October 28, 2013

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

    </af:showDetailItem>

    </af:panelSpringboard>

    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.


  • guest Tuesday, November 26, 2013

    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?


  • Shay Tuesday, November 26, 2013

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


  • Sanjay Kumar Gouda Monday, March 24, 2014

    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


  • guest Tuesday, March 25, 2014

    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


  • Laolu Wednesday, March 4, 2015

    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)

    {

    actionEvent.cancel();

    var eventSource = actionEvent.getSource();

    var object_navigator = eventSource.findComponent("psbId");

    object_navigator.setProperty(AdfRichPanelSpringboard.DISPLAY_MODE, "grid", true);

    }


  • guest Tuesday, March 17, 2015

    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

    Hari


  • Shay Tuesday, March 17, 2015

    Hari,

    The animation looks smooth to me on this page:

    http://jdevadf.oracle.com/adf-richclient-demo/faces/components/panelDrawer.jspx

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


  • Sara Sunday, November 27, 2016

    Hi Shay,

    regarding your issue

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

    </af:showDetailItem>

    </af:panelSpringboard>

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

    i have the same issue did you figure it out

    Thank you


  • guest Wednesday, December 7, 2016

    Hi Shay and Sara ,

    I was also facing same issue. I had created jsf page and drop region which contain jsff with panelSpringboard. And running jsf page. When i clicked on items its regions or showDetailItem's data was not rendering.

    Then i change the code form above to below,

    i directly put panelSpringboard in jsf page and with out doing any other change its coming fine now.

    plz try at your end

    Thanks


  • guest Tuesday, January 10, 2017

    Hi Shay

    Thanks for doing this post.

    We are using the panelDrawer in 11.1.1.9 which is proving very useful. May I ask 2 questions?

    1) One issue we are seeing is that when the drawer is disclosed and you toggle between different showDetailItem (the tabs), the component seems to do a full page submit each time making the component appear very jerky on the page. There does not seem to be an option for partialSubmit on either the panelDrawer or showDetailItem. Is there any way of creating a more smoother transition when you click between the different tabs in the drawer?

    2) Is there anyway of getting the panelDrawer to be pinned to a scrolling region so that when a user scrolls down the page the panelDrawer follows so that it is always visible. If you think of a panelDrawer which shows child information relating to a selected parent in a listView, as the user scrolls down the list we want to ensure the panelDrawer is always visible.

    Many thanks


  • Shay Shmeltzer Wednesday, January 11, 2017

    guest, for 1 - I don't see a full refresh in the 12.2.1 demos here:

    http://jdevadf.oracle.com/adf-richclient-demo/faces/components/panelDrawer.jspx

    for 2 - if you want a pinned drawer - that seems to be a panelTabbed in an area on the screen and not a drawer - the point of a drawer is that it is not pinned.


  • Charles Saturday, August 25, 2018
    Hello, i like the use of the spring board. I would like to know if it is possible to enlarge the icons be it in strip or grid view?
  • Midhun Mungath Sunday, October 21, 2018
    Hello Everyone,

    I have tried to add backToGrid function on client listener for first item in panelspringboard. It works for me but when I click on the item when it is in Grid mode, it causes the page to become unstable. Any help appreciated.


    function backToGrid(actionEvent) {
    actionEvent.cancel();
    var eventSource = actionEvent.getSource();
    var object_navigator = eventSource.findComponent("ps1");
    object_navigator.setProperty(AdfRichPanelSpringboard.DISPLAY_MODE, "grid", true);
    }




Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.