ADF

为 Carousel 控件添加自动播放及播放控制

JDeveloper Ver. 11.1.1.3.0

从11.1.1.2.0版本开始，ADF Faces中添加了 Carousel 这一展示控件。该控件可以方便的用于展示图片和视频，但相比当前网页设计的元素，缺乏了自动滚动的功能。

本文将通过对ADF Faces控件的简单组合，为 Carousel 增加自动滚动及滚动控制功能。效果如下图

Model层使用JavaBeanDataControl，不再赘述。

效果实现目标为：

  1. 实现平滑无刷新的自动滚动
  2. 当鼠标移动至项目上时，停止自动滚动，离开时启动自动滚动
  3. 滚动至结尾时自动返回头部
  4. 提供播放控制panel，提供play, stop, previous, next四种功能

  5. 保留动画效果
    基于以上目标，实现方式为

  6. 使用poll控件定时执行Next动作实现滚动

  7. 使用JavaScript的方式而非PPR以达到平滑滚动、播放控制panel及保留动画效果的目的
  8. 在执行Next动作时同时将当前界置顶项同步至Binding中itemsIterator的CurrentRow
  9. 重写Carousel控件的carouselSpinListener，将当前选择项同步至Binding中itemsIterator的CurrentRow
  10. 为Carousel控件及CarouselItem控件增加clientListener，用于调用自动滚动启动/停止的JavaScript方法
    源代码下载

v1.1 Update
修正该功能在taskflow中使用时由于region嵌套导致component id 改变，找不到component进而js无法执行的错误。

源代码下载