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 :)

File Uploading and Downloading in Oracle ADF

In this post we are going to learn very basic requirement of File Handling i.e. Uploading & Downloading in ADF it need very often to store files in absolute server path and download from there.Here are some steps that we have to follow:

• Here, create a simple table in Data base to store uploaded file name,path and content type.

CREATE TABLE "UPLOAD_DOWNLOAD" ( "FILE_NAME" VARCHAR2(500), "PATH" VARCHAR2(500), "CONTENT_TYPE" VARCHAR2(500), CONSTRAINT "UPLOAD_DOWNLOAD_PK" PRIMARY KEY ("FILE_NAME") ENABLE )

• Now create entity object and view object using Upload_Download table.
• Go to view controller and create a jspx page.
• Now drop  af:inputFile from the component palette as.

• Then create a valueChangeListener on af:inputFile component to upload file to an actual path on server, and after upload a row is inserted in table to keep record of uploaded files.

• Create a bean class "UploadBean" on valueChangeListener and then create a method "uploadAction" with in the bean class.

• Now, from Data controls drop Upload_Download table on jspx as

•  Write down this code under valueChangeListener method.

                            ValueChangeListener to exicute all method:

public void uploadAction(ValueChangeEvent vce)  { if (vce.getNewValue() != null) { UploadedFile fileVal = (UploadedFile) vce.getNewValue(); String path = uploadFile(fileVal); System.out.println(fileVal.getContentType()); OperationBinding ob = executeOperation("setFileData"); ob.getParamsMap().put("name", fileVal.getFilename()); ob.getParamsMap().put("path", path); ob.getParamsMap().put("contTyp", fileVal.getContentType()); ob.execute(); ResetUtils.reset(vce.getComponent()); } } public BindingContainer getBindingsCont() { return BindingContext.getCurrent().getCurrentBindingsEntry(); } public OperationBinding executeOperation(String operation) { OperationBinding createParam = getBindingsCont().getOperationBinding(operation); return createParam; }

                     Bean method to upload file:

private String uploadFile(UploadedFile file) { UploadedFile myfile = file; String path = null; if (myfile == null) { } else { path = "D://FileStore//" + myfile.getFilename(); InputStream inputStream = null; try { FileOutputStream out = new FileOutputStream(path); inputStream = myfile.getInputStream(); byte[] buffer = new byte[8192]; int bytesRead = 0; while ((bytesRead = inputStream.read(buffer, 0, 8192)) != -1) { out.write(buffer, 0, bytesRead); } out.flush(); out.close(); } catch (Exception ex) { // handle exception ex.printStackTrace(); } finally { try { inputStream.close(); } catch (Exception e) {} } } //Returns the path where file is stored return path; }

• Now,create impl class of Application Module to insert record in the table for uploaded file.

                    AMimpl method to insert record in table:

public void setFileData(String name, String path,String contTyp) { ViewObject fileVo = this.getFileUpdDwnView1(); Row newRow = fileVo.createRow(); newRow.setAttribute("FileName", name); newRow.setAttribute("Path", path); newRow.setAttribute("ContentType", contTyp); fileVo.insertRow(newRow); this.getDBTransaction().commit(); fileVo.executeQuery(); }

• Now,go to Client interface of AM and shuttle the method to right side as,     

• And also add the binding of this method in jspx page as,

• Set partial trigger on Table & auto submit on af:inputfile.
• Now Upload part is complete here , for download functionality added a link in table column and dropped an af:fileDownloadActionListener inside link and set properties for DownloadActionListener.

                            Code for Download Listener:

public void downloadAction(FacesContext fc, OutputStream os)throws Exception { File filed = new File(pathBind.getValue().toString()); FileInputStream fis; byte[] b; try { fis = new FileInputStream(filed); int n; while ((n = fis.available()) > 0) { b = new byte[n]; int result = fis.read(b); os.write(b, 0, b.length); if (result == -1) break; } } catch (Exception e) { e.printStackTrace(); } os.flush(); }

• Here, pathBind is a binding variable which is used to get the path of the file which we will download.so create its binding as,

• save & run jspx page.

• Here is the link to download a sample application Upload_Download.

THANK YOU :)