DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Everything You Need to Know About Gantt Chart Timeline
  • Data Table Filtering Using a D3 Timeline

Trending

  • Java Parallel GC Tuning
  • Unleashing the Power of Microservices With Spring Cloud
  • Effective Tips for Debugging Complex Code in Java
  • Exploring Edge Computing: Delving Into Amazon and Facebook Use Cases

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

Shay Shmeltzer user avatar by
Shay Shmeltzer
·
Jul. 22, 13 · Interview
Like (0)
Save
Tweet
Share
3.77K Views

Join the DZone community and get the full member experience.

Join For Free

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> 
Timeline

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

Opinions expressed by DZone contributors are their own.

Related

  • Everything You Need to Know About Gantt Chart Timeline
  • Data Table Filtering Using a D3 Timeline

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: