A very impressive component in JDeveloper11g is the Carousel. It can be used to display multiple form information at the same time and easily navigate through them.

I created a very simple demo presenting the basic functionality of this component. On the top of the page I added a read only table with the Departments and bellow that, a carousel component with the Employees of the selected department.

In the Model we only need a “Departments” and an “Employees” view object, linked with a viewLink “FromDepartmentsToEmployees” . Both VO’s are based on entity objects which are connected with an association 1 to *. Then we add the linked VO to the data model of an application module.

After the Model is ready we just need to create a jspx page and drag & drop the “Departments” and “Employees” from the datasources view. The departments datasource is droped as a readonly table and the employees as a carousel component. For the basic functionality to be complete we need to add a partialTrigger on the carousel component from the departments table.

If  you check the page definition you will find two tree bindings. One for the Departments and one for the Employees. Now we need to add the attributes of the Employee that we want to be displayed in the carousel.

In the attached code you can also see a few layout improvements i made in the demo. I also added an image component in the carousel to display a static pic in each carousel item. If an image field existed in the database the picture of each employee could be displayed.

You can download the full demo code here

You can also check a short video of the demo running here






Comments

This entry was posted on Monday, October 4th, 2010 at 6:53 pm and is filed under ADF. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
2 Comments so far

  1. felix on October 18, 2010 8:41 am

    How to hide the slider(Scrolling bar) in the carousel component in ADF11g

  2. Gabriel on October 18, 2010 10:51 am

    There’s no easy way to do it(via component properties). The only way would be through css but it requires digging.

Name (required)

Email (required)

Website

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Share your wisdom