Build an Image Slider in ADF

Hello Guys,

In this blog i am going to show you how to use image slider in ADF application.In a portal application it is very common to have an image slider that can slide image automatically or manually from one to another.The image slider transition is implemented by JQuery. I will not focus anything on JQuery as there are many third party JQuery plugin out there for such image sliding effect. The Basic purpose of this post is to use Slider on my ADF application. To implement this, you should have some basic knowledge on ADF skinning, JavaScript and UI development.

Here is the link to download some files(CSS & JQuery) that are used in this application. 

• Firstly create a task flow, as it would be preety easy to wrap all the slider related resources in one task flow.
• Drop a view and create a jsff page.
• Now, drop af:resources in the pages as,

<af:resource type="javascript" source="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"/> <af:resource type="javascript" source="/script/jflow.plus.min.js"/> <af:resource type="javascript" source="/script/jflow.control.js"/>

• Drop a af:panelGroupLayout and paste the html code inside this as,

<div id="sliderContainer"> <div id="mySlides"> <!--<af:forEach begin="0" end="3" var="row"/>--> <div id="slide1" class="slide"> <img src="../images/jflow-sample-slide1.jpg" alt="Slide 1 jFlow Plus" class="sliderImage"/> <div class="slideContent"> <h3> AUDI </h3> <p> Advancement through Technology </p> </div> </div> <div id="slide2" class="slide"> <img src="../images/jflow-sample-slide2.jpg" alt="Slide 2 jFlow Plus" class="sliderImage"/> <div class="slideContent"> <h3> FERRARI</h3> <p> Ultimate Driving Machine</p> </div> </div> <div id="slide3" class="slide"> <img src="../images/jflow-sample-slide3.JPG" class="sliderImage"/> <div class="slideContent"> <h3> JAGUAR</h3> <p> Born To Perform</p> </div> </div> <div id="slide4" class="slide"> <img src="../images/jflow-sample-slide4.jpg" alt="Slide 3 jFlow Plus" class="sliderImage"/> <div class="slideContent"> <h3> TOYOTO</h3> <p> Moving Forward</p> </div> </div> </div> <div id="myController"> <af:forEach begin="0" end="3"> <span class="jFlowControl"></span> </af:forEach> </div> <div class="jFlowPrev"> </div> <div class="jFlowNext"> </div> </div> <!--end: sliderContainer -->

• Now,create a jspx page and drop this af:panelGroppLayout on this and drop task flow in this layout.
• Now run jspx page and you will get the desirable output.

• Here is the link to download the sample application Slider.

THANK YOU :)

Style Facebook Login Page Using Oracle ADF Face Component & implementing CSS

Hello All,

This post is about implementing CSS on ADF application used to change the look and apperence of ADF application by using skin. I have designed a Facebook Page just to show you how to implement this. 

• Firstly,create a Fusion Web Application.
• Now create a CSS File as,

         Right click on ViewController ----> New ----> All Items ----> CSS File.

• Now create a XML file in WEB-INF of the name of trinidad-skin.xml

<?xml version="1.0" encoding="windows-1252" ?> <skins xmlns="http://myfaces.apache.org/trinidad/skin"> <skin> <family>skyros</family> <extends>blafplus-rich.desktop</extends> <style-sheet-name>css/Home.css</style-sheet-name> </skin> </skins>

• Make sure that the skin-family type of trinidad-config.xml & trinidad-skin.xml should be same.
• Now create a jspx page and drop af:resource from the component palette and define type and source of the file as,

• By this way your CSS file will be implemented on the ADF application.
• Here, I have designed Facebook Login Page using ADF face component and implementing CSS and i also have done the functionality in this Application.
• To access this sample application firstly create a table in HR schema by using the following SQL query as,  

                                  CREATE TABLE  "FACEBOOK_SIGNUP"

CREATE TABLE "FACEBOOK_SIGNUP" ("FIRST_NAME" VARCHAR2(200), "LAST_NAME" VARCHAR2(200), "EMAIL" VARCHAR2(200), "MOBILE" VARCHAR2(200), "PASSWORD" VARCHAR2(200), "DIN" VARCHAR2(200),"MONTH" VARCHAR2(200), "YEAR" VARCHAR2(200), "GENDER" VARCHAR2(200), CONSTRAINT "FACEBOOK_SIGNUP_PK" PRIMARY KEY ("EMAIL") ENABLE)

                 Code for SignUp (Insert data in DB):

public void zxcxc(ActionEvent actionEvent) { String m= getMonth().getValue().toString(); String d= getDin().getValue().toString(); String y= getYear().getValue().toString(); String rd= getRadio().getValue().toString(); DCIteratorBinding dc= (DCIteratorBinding)getBindings().get("FacebookSignupVO1Iterator"); ViewObject EmpVO = dc.getViewObject();//used to get VO Row r = dc.getCurrentRow(); r.setAttribute("Din", d); r.setAttribute("Month", m); r.setAttribute("Year", y); r.setAttribute("Gender",rd); BindingContext bindingctx = BindingContext.getCurrent(); BindingContainer bindings = bindingctx.getCurrentBindingsEntry(); OperationBinding operationBinding = bindings.getOperationBinding("Commit"); Object result = operationBinding.execute(); OperationBinding operationBinding1 = bindings.getOperationBinding("CreateInsert"); Object result1 = operationBinding1.execute(); din.setValue(null); month.setValue(null); year.setValue(null); radio.setValue(null); // calljqHelper("$.growl.error({ message: \"Hi this is error message!\" });"); FacesMessage Message = new FacesMessage("Successfully Registered !!"); Message.setSeverity(FacesMessage.SEVERITY_INFO); FacesContext fc = FacesContext.getCurrentInstance(); fc.addMessage(null, Message); }

          Code for Login(Using DB credentials):

public String loginFB() { String emailLogin= getLoginEmail().getValue().toString(); String passwordLogin= getLoginPwd().getValue().toString(); DCBindingContainer b =(DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry(); DCIteratorBinding dcib = b.findIteratorBinding("FacebookSignupVO1Iterator"); ViewObject vo1 = dcib.getViewObject(); vo1.setWhereClause("email = '"+emailLogin+"'"); vo1.executeQuery(); if(vo1.getRowCount()>0) { Row rowSel = vo1.first(); String email=rowSel.getAttribute("Email").toString(); String password=rowSel.getAttribute("Password").toString(); vo1.setWhereClause(null); vo1.executeQuery(); if(email.equalsIgnoreCase(emailLogin) && password.equalsIgnoreCase(passwordLogin)) { return "go"; } else{ return null; } } else{ return "invalid"; } } }
• Now Run jspx file(main.jspx).

• Here, is the link to download the sample application Facebook_Login.

THANK YOU :)

Dependent LOV or Creating Cascading Dropdown in ADF

The purpose of this post is to document, step-by-step, how to create cascading drop-downs in an ADF form's user interface when ADF business components are used.  A cascading drop down frequently occurs in forms and occurs when a selection made in one field's drop-down automatically and dynamically changes the list of valid values in another field's drop-down.

• Create query based view object using Region, Country & Location tables.
• Now, we'll modify the query of the dependent VOs to include a bind variable in their WHERE clause.
• Create bind variables i.e. regionBind & CountryBind for country & location tables respectively, as these variables are used to hold the values from the first selected LOV and will update the value on the next i.e. cascaded LOV as shown in the figures below.

• Now,we have created a new query based VO,lets call it CombinedVO with three attribute i.e. Region_Id, Country_Id & Location_Id(to populate our LOV's) as,

• Here we have modified the where query as: REGIONS.REGION_ID = COUNTRIES.REGION_ID AND COUNTRIES.COUNTRY_ID = LOCATIONS.COUNTRY_ID

• Make sure that all the 3 attributes of CombinedVo are updateable.
• Now set LOV on all these attributes as, like i have set it on Region_Id as,

• Similarly,set LOV on Country_Id & Location_Id too.
• Now set the value at View Accessors of CombinedVO of CountriesView1 and LocationsView1 as regionBind & CountryBind respectively as,

• Now set Partial trigger & Auto submit on the LOV's.
• Finally,run your jspx page.

• Here is the link for sample application Dependent_LOV.

THANK YOU :)

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