How to use the Carousel Component.

There are two things you need to know about using Carousel:

1. Include the images in out JDev project itself instead of storing it in the database because otherwise you need to fetch the image yourself from the database as Carousel component as of now does not do it automatically.
2. Prefix the binding with the ‘item’ variable.

The following image shows how to copy the image to your project:

I used the following table to test the Carousel component:

CREATE TABLE image_table (

  image_id    NUMBER(15,0)  PRIMARY KEY,

  description VARCHAR2(20)  NULL,

  url         VARCHAR2(200) NULL

);

INSERT INTO IMAGE_TABLE VALUES (1, 'Image 1', 'Cloud1.jpg');

INSERT INTO IMAGE_TABLE VALUES (2, 'Image 2', 'Cloud2.jpg');

INSERT INTO IMAGE_TABLE VALUES (3, 'Image 3', 'Cloud3.jpg');

Just stored the name of the images in the database, and copied the images to my UI Project.

Here comes the code of the page that contains the Carousel component, with key points highlighted:

<?xml version='1.0' encoding='UTF-8'?>

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"

          xmlns:f="http://java.sun.com/jsf/core"

          xmlns:h="http://java.sun.com/jsf/html"

          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">

  <jsp:directive.page contentType="text/html;charset=UTF-8"/>

  <f:view>

    <af:document id="d1">

      <af:messages id="m1"/>

      <af:form id="f1">

        <af:carousel currentItemKey="#{bindings.ImageTableVO1.treeModel.rootCurrencyRowKey}"

                     value="#{bindings.ImageTableVO1.treeModel}" var="item"

          <f:facet name="nodeStamp">

            <af:carouselItem id="ci1"

                             text="Description : #{item.bindings.Description.inputValue}">

              <af:outputText value="Image Id: #{item.bindings.ImageId.inputValue}" id="ot1">

                <af:convertNumber groupingUsed="false"

                                  pattern="#{bindings.ImageId.format}"/>

              </af:outputText>

              <af:spacer width="10" height="10" id="s1"/>

              <af:separator id="s2"/>

              <af:image source="/images/#{item.bindings.Url.inputValue}" id="i1"/>

          </f:facet>

        </af:carousel>

      </af:form>

    </af:document>

  </f:view>

</jsp:root>

And here is the page definition content:

<?xml version="1.0" encoding="UTF-8" ?>

<pageDefinition xmlns="http://xmlns.oracle.com/adfm/uimodel"

                version="11.1.1.59.23" id="CarouselPagePageDef"

                Package="view.pageDefs">

  <parameters/>

  <executables>

    <variableIterator id="variables"/>

    <iterator Binds="ImageTableVO1" RangeSize="25"

              DataControl="AppModuleDataControl" id="ImageTableVO1Iterator"/>

  </executables>

  <bindings>

    <tree IterBinding="ImageTableVO1Iterator" id="ImageTableVO1">

      <nodeDefinition DefName="model.ImageTableVO">

        <AttrNames>

          <Item Value="ImageId"/>

          <Item Value="Description"/>

          <Item Value="Url"/>

        </AttrNames>

      </nodeDefinition>

    </tree>

    <attributeValues IterBinding="ImageTableVO1Iterator" id="ImageId">

      <AttrNames>

        <Item Value="Description"/>

      </AttrNames>

    </attributeValues>

  </bindings>

</pageDefinition>

Here is how the component looked in the browser:

That's it.

JDev Release 11.1.1.4