ADF Faces Carousel Component

The af:carousel is a component used for content, images and text content, in rotating index cards.The af:carousel component is new in Oracle JDeveloper 11g R1 PatchSet 1. In this blog we provide the detailed steps of how to build a master-detail implementation of an ADF bound carousel and also give you a generic implementation of the CarouselSpinListener a hand that works with any ADF bound carousel. 

• Create Business component using Employee & Department Tables.

• Go to view controller and create jspx Page. Here, I used one column quick layout template to build the page layout.
• Now select department table from the data controls & drop it on page as carousel,

• Here, we display the Departments row data in an af:panelFormLayout component using af:outputText components. First, drag and drop an af:panelFormLayout component from the Component Palette onto the carousel item as,

• Then drag and drop 4 instance of the Panel Label and Message component into the af:panelFormLayout component.This is because,we are taking four attributes of Departments View Object i.e. DepartmentId, DepartmentName, ManagerId and LocationId.And also drop af:outputText component into each of the four Panel Label and Message components. 

  

• To access the binding layer from the af:panelLabelAndMessage component, which displays the label, and the af:outputText component, you reference the "item" variable of the af:carousel component using Expression Language. For example, to read the label of the DepartmentId, use EL: #{item.bindings.DepartmentId.hints.label}.

• Similar, to read the DepartmentId value into the af:ouputTextField, add following EL to the output component value property: #{item.bindings.DepartmentId.inputValue}. Then it will appear like this,

• Now,drop Employee table from data controls at the bottom of the page.

• Now that the master and detail views are constructed, its time to implement the master-detail behavior. Using ADF Business Components, the active model automatically synchronizes the detail view to match the selected parent row.  
• Now select Carousel & go to CarouselSpinListener from the property inspector and create managed bean here.

          Code for CarouselSpinListener:

public void carouselAction(CarouselSpinEvent carouselSpinEvent) { List currentSelectedKey = (List) carouselSpinEvent.getNewItemKey(); RichCarousel carousel = (RichCarousel) carouselSpinEvent.getSource(); CollectionModel componentModel = (CollectionModel) carousel.getValue(); JUCtrlHierBinding carouselTreeBinding =(JUCtrlHierBinding) componentModel.getWrappedData(); JUCtrlHierNodeBinding selectedCarouselItemNode = carouselTreeBinding.findNodeByKeyPath(currentSelectedKey); Key currentCarouselItemKey = selectedCarouselItemNode.getRowKey(); DCIteratorBinding dcIterBinding = carouselTreeBinding.getIteratorBinding(); dcIterBinding.setCurrentRowWithKey(currentCarouselItemKey.toStringFormat(true)); }

• Set partial trigger on Employee table and run jspx page.

• Here is the link for sample application CarouselComponent.

THANK YOU :)