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