ADF_106：Carousel组件使用指南之一：使用程序局部刷新

本文最后一次修改日期：2012-6-20。
运行环境：JDeveloper 11.1.2.2.0 + Oracle Database 10g Express Edition 10.2.0.1。

本实验基础资料（代码、图片）取自于《开发用户界面（基于AJAX）》。

重点步骤说明：

1. 使用Java类作为Model层实现，并为StoreProducts.java生成Data Control


2. 创建页面
（1）拖放products，生成Read-Only Table。
（2）拖放products，生成Carousel。
（3）拖放image组件到Carousel中心区域，并设置相关属性。
最终的Carousel页面代码如下：

<af:carousel currentItemKey="#{bindings.products1.treeModel.rootCurrencyRowKey}"
             value="#{bindings.products1.treeModel}" var="item" id="c8"
             binding="#{myBackingBean.carousel}">
    <f:facet name="nodeStamp">
        <af:carouselItem id="ci1">
            <af:image source="#{item.image}" id="i1" partialTriggers="::pc1:t1"/>
        </af:carouselItem>
    </f:facet>
</af:carousel>

3. 运行

点击Table的不同行，发现Carousel并没有翻到对应的图片，这是为什么呢？
即使在页面代码中，将Carousel组件的PPR指向了Table组件，也不行。
最终发现这是一个BUG，于是只好使用程序刷新。

4. 定制Table的SelectionListener
（1）把Carousel的Binding属性指向到Managed Bean中一个属性。
（2）定制Table的SelectionListener，完整的代码如下：

package view;

import oracle.adf.model.binding.DCIteratorBinding;
import oracle.adf.view.rich.component.rich.data.RichCarousel;
import oracle.adf.view.rich.component.rich.data.RichTable;

import oracle.adf.view.rich.context.AdfFacesContext;

import oracle.jbo.Key;
import oracle.jbo.Row;
import oracle.jbo.uicli.binding.JUCtrlHierBinding;

import oracle.jbo.uicli.binding.JUCtrlHierNodeBinding;

import org.apache.myfaces.trinidad.event.SelectionEvent;
import org.apache.myfaces.trinidad.model.CollectionModel;

public class MyBackingBean {
    private RichCarousel carousel;

    public MyBackingBean() {
    }

    public void tableSelectionListener(SelectionEvent selectionEvent) {
        makeCurrentRow(selectionEvent);
      
        AdfFacesContext adfFacesContext = AdfFacesContext.getCurrentInstance();
        adfFacesContext.addPartialTarget(this.carousel);
    }

    private static void makeCurrentRow(SelectionEvent selectionEvent) {
        RichTable rt = (RichTable)selectionEvent.getSource();
        CollectionModel cm = (CollectionModel)rt.getValue();
        JUCtrlHierBinding tableBinding = (JUCtrlHierBinding)cm.getWrappedData();
        DCIteratorBinding iter = tableBinding.getDCIteratorBinding();

        JUCtrlHierNodeBinding selectedRowData = (JUCtrlHierNodeBinding)rt.getSelectedRowData();
        Key rowKey = selectedRowData.getRowKey();
        iter.setCurrentRowWithKey(rowKey.toStringFormat(true));
        Row row = selectedRowData.getRow();
        System.out.println("%%%%%%%%%%%%%%% The Selected Row Data: " + row.getAttribute("name") + " " +
                           row.getAttribute("category"));
    }

    public void setCarousel(RichCarousel carousel) {
        this.carousel = carousel;
    }

    public RichCarousel getCarousel() {
        return carousel;
    }
}

原理请参考《定制SelectionListener》，这里不再赘述。

5. 运行


6. 如果你不喜欢Carousel下面的bar，可以通过定制CSS，将其去掉
新建一个皮肤文件：mySkin.css，内容如下：
/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "http://xmlns.oracle.com/adf/faces/rich";

@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

af|carousel::spin-bar {
visibility: hidden;
}

af|carousel::spin-h-previous-icon-style {
visibility: hidden;
}

af|carousel::spin-h-next-icon-style {
visibility: hidden;
}

af|carousel::spin-info {
visibility: hidden;
}

7. 运行


Project 下载：ADF_Carousel.7z

参考文献：
1. http://technology.amis.nl/2009/11/23/jdeveloper-11112-carousel-component-as-master-and-detail/
2. http://www.oracle.com/technetwork/developer-tools/adf/learnmore/oct2010-otn-harvest-183714.pdf