12c New ADF Faces Components - Springboard, Drawer and Timeline
Join the DZone community and get the full member experience.
Join For FreeThe 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>
Published at DZone with permission of Shay Shmeltzer, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments