myPeopleSoft

PeopleSoft Community Network

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>