Monday, June 8, 2015

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,
  • Drop a af:panelGroupLayout and paste the html code inside this as,
  • 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 :)

Monday, June 1, 2015

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
  • 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"

                     Code for SignUp (Insert data in DB):

              Code for Login(Using DB credentials):

  • 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 regionBindCountryBind respectively as,

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

THANK YOU :)

Thursday, April 9, 2015

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:

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

THANK YOU :)

Monday, April 6, 2015

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:

                         Bean method to upload file:


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

                        AMimpl method to insert record in table:

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

  • 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.

THANK YOU :)