运行环境: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
http://maping930883.blogspot.com/2011/08/adf106carousel.html