ADF Skinning: Change Style of ADF Table, Column, Header, Data Cell and pagination bar

After a long vacation I'm back to work :)
This post is about changing look n feel of ADF Faces af:table component

I have seen many questions related to changing table column header style , selected row style, changing row banding styles etc

ADF Basics: Call PL/SQL Function with OUT parameter in ADF Application

Previous post was about calling PL/SQL Procedure with OUT parameters in ADF Application
ADF Basics: Call PL/SQL Procedure with OUT parameter in ADF Application

And this post is about calling PL/SQL Function with OUT parameters. Basic difference between a Function and Procedure is that Function must return a value but procedure may or may not return a value
So there is always one OUT parameter in PL/SQL Function

ADF Basics: Call PL/SQL Procedure with OUT parameter in ADF Application

Previously i have posted about calling pl/sql function in ADF Application

ADF Basics: Call PL/SQL Stored function in ADF Application

This post is about calling stored procedure in ADF Application , a very basic requirement.

Sometimes we need to call a procedure that has OUT parameters , these parameters are used to return value from procedure. There may be n- numbers of OUT parameters in a procedure 

Configure ADF Skin in Jdeveloper 11.1.1.7

In Jdeveloper 11.1.1.7 there is no option to create ADF Skin declaratively
In order to apply skin we have to create a simple CSS file and then configure application to use this CSS file as skin. Jdeveloper doesn't do this for us :( we have to do it manually

So first step is to enable Skin Selectors for ADF Faces, Without enabling this CSS editor doesn't show ADF Faces component tags
CSS files by default supports HTML tags  only

Go to Tools > Preferences > CSS Editor and set CSS level to level 3 and check the box to support ADF Faces Components

ADF Skinning: Increase width, Change color of a tab in af:panelTabbed

We can change appearance of ADF Application by applying CSS and changing style properties of ADF Faces Component
Here i am writing a simple CSS to increase tab width of af:panelTabbed component

I hope you all know how to create a skin for ADF Application , If don't know then look at this post
ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces) 

Drag Drop in same table to reorder rows, Update Attribute value to make it persistent

This post is based on Frank's article on reordering table rows using drag drop functionality of ADF Faces, post uses iterator indexing to change order of rows and it works pretty good

Recently i came across a question on OTN forum asking about making this ordering persistent on base of some attribute value so for that we have to maintain a serial no attribute for each row and when user performs Drag n Drop , serial no. will be swapped and updated ordering of rows will be shown to user and it is persistent as updated attribute's value is saved in database

Show live progress of a long running task using af:progressIndicator in Oracle ADF

This post is about using af:progressIndicator to show live status of a particular task
af:progressIndicator state is tracked and maintained by it's value property that supports org.apache.myfaces.trinidad.model.BoundedRangeModel
This class has two methods

public abstract long getMaximum() { }

returns Maximum value for Model

public abstract long getValue() { }

returns value for Model (current state)

Now to see live progress on page we have to refresh progressIndicator component periodically and this can be achieved using af:poll component , poll component delivers poll events to server periodically and we can ppr (refresh) progress indicator after a particular interval

ADF Basics: Creating Bounded Task Flow Train using af:train component

This post is about using bounded task flow as train
A train presents a whole cycle and it's every stop presents a particular step of cycle
From the docs -

The train component presents a user with a series of stops, each stop representing a step in a multi-step process. The train walks the user through these steps, in a suggested order (the order being dictated by the underlying model). Each step is rendered as a train stop consisting of an image and a textual link indicating if they are in visited, current, unvisited and disabled states. Train can also be rendered in a vertical layout - the default being a horizontal layout. Trains are not rendered on printable pages. 

ADF UI: Using dvt:sunburst to show hierarchical data in ADF

<dvt:sunburst> is one of fancy components to show multi level hierarchical data in form of circular rings in ADF application

It supports drilling up to n-level , consist of dvt:sunburstNode as it's child tag to show level wise detail . Sunburst supports multiple type of animations that makes a better UI
See What docs says -

Sunbursts are used to display hierarchical data across two dimensions, represented by the size and color of the sunburst nodes. The sunburst displays multiple levels of its hierarchy at once, with each ring corresponding to a level of the hierarchy

ADF Basics: Using setActionListener in ADF, Set pageFlowScope parameter without writing code

This post is about using setActionListener tag in ADF, this tag provides a simpler way to set values of other objects and makes use of EL
See What docs says-

The setActionListener tag is a declarative way to allow an action source (<commandButton>, <commandLink>, etc.) to set a value before navigation. It is perhaps most useful in conjunction with the "pageFlowScope" EL scope provided by ADF Faces, as it makes it possible to pass details from one page to another without writing any Java code. This tag can be used both with ADF Faces commands and JSF standard tags. More generally, it can be used with any component at all that implements the standard ActionSource interface.

Add and delete values in POJO based selectOneListbox/selectOneChoice in ADF

Previously i have posted about populating selectOneChoice programmatically using POJO
Programmatically populate values in a af:selectOneChoice component in ADF

In same way we can populate values in selectOneListBox as both ADF Faces components are used for single selection and share same structure

Consuming a SOAP Web Service quickly using Web Service Data Control (WSDL) in ADF

Creating and Consuming Web Servie is an important part development cycle . In earlier posts i have described about creating SOAP/REST Web Service
Create REST Web Service with Application Module declaratively in ADF 12.2.1
Create SOAP Web Service with Application Module quickly in ADF 12.2.1

Now this post is about consuming a SOAP Web Service. A very simple way to consume Web Service is to create Web Service Data Control (WSDL) for external Web Service URL
Here i am using a Country-Currency Web Service (http://www.webservicex.net/country.asmx) to create WSDL

Get selected slice of dvt:pieChart using custom selection listener in ADF

First of all wishing a very Happy New Year to all of you, New Year is like a blank page , fill it with happiness and good memories

This post is about a simple requirement - How to get selected slice value of dvt:pieChart ?
So for this we have to create a custom selection Listener in managed bean that will be called whenever user selects any slice of pieChart
If you see documentation of pieChart it tells about two properties -

Create REST Web Service with Application Module declaratively in ADF 12.2.1

REST stands for Representational State Transfer, REST is an architectural style not a protocol as SOAP that's why it can use any other protocol like SOAP, HTTP etc.
REST requires less bandwidth and resources (lighter) than SOAP

New ADF 12.2.1 supports creating RESTful web services directly from Application Module, In previous versions we have to do everything manually
See- Create RESTful services on top of ADF Business Components

Create SOAP Web Service with Application Module quickly in ADF 12.2.1

SOAP stands for Simple Object Access Protocol, a protocol to exchange information in XML format between two applications over HTTP. This protocol is used to create ,access and consume web services.

SOA (Service Oriented Architecture) focuses on re-usability and exposing application module as web service makes it's methods and objects accessible from any device , any platform and these methods and objects can be further used by any other application

Scroll to particular component using af:scrollComponentIntoViewBehavior tag in ADF Faces

You all must have seen HTML Anchor links, this is actually called link within page and used to navigate between page sections
Same as HTML anchor tag ADF Faces has <af:scrollComponentIntoViewBehavior> tag that allows user to jump to a particular component on page

Checkbox ValueChangeListener problem in af:table - ADF 12.1.3

Recently i faced a problem while working on one of my application, it has an editable table having one check box column and a valueChangeListener is defined on that check box.

Problem is that whenever user selects any row of table , valueChangeListener of check box is called every time for all editable rows, this is weird because VCL should execute only when user selects or deselects check box

Responsive UI with new af:matchMediaBehavior in ADF 12.2.1.0

Jdeveloper and ADF 12.2.1 comes with many new features ( see these posts-
New look of dvt:funnelChart for Data Visualization in Jdeveloper 12.2.1.0
New look of dvt:pieChart as donut chart for Data Visualization in Jdeveloper 12.2.1.0  )
and supports responsive UI design.
Masonry Layout and MatchMediaBehaivor tag is introduced to support responsive UI design

af:matchMediaBehavior allows developer to control properties of components according to screen size. It uses CSS media queries to detect screen size and changes value of specified property of component

New look of dvt:pieChart as donut chart for Data Visualization in ADF 12.2.1.0

Oracle Jdeveloper 12C (12.2.1.0) documentation tells about a new enhancement in look of pie chart

We can now design donut chart using dvt:pieChart , innerRadius property allows us to create donut chart look on the base of default pie chart.
Donut chart is nothing just a variation of pie chart that show data in sections of a circle, I believe everyone knows how to design a pie chart in ADF Faces

Responsive UI with new Masonry Layout in ADF 12.2.1.0

What is Responsive UI and Why it is Important-

User interface or view of website or web application changes as the screen size of device changes
This type of UI is called Responsive and it is important to design responsive UI for your application because each device have different screen dimension and you can not restrict user to use any specific device to view your application . This is very basic requirement of web development that UI should look good on Mobile, PC, Tablet or any other device

New look of dvt:funnelChart for Data Visualization in ADF 12.2.1.0

A couple of weeks ago Oracle Jdeveloper and ADF team released new version of Jdevloper 12.2.1 with many cool features
New funnel chart (<dvt:funnelChart>) is introduced instead of funnel graph (<dvt:funnelGraph>)
Old funnel graph looks like this-



Funnel chart is used to show visual distribution of different steps of any cycle
What docs says-

A chart representing data related to steps in a process. The steps appear as vertical slices across a cone-shaped section which represent stages of a procees or target and actual values, showing levels by color.

Here we see how to use this new component to design a better UI, For this I have created a viewObject using this sql

SELECT A.DEPARTMENT_NAME, 
B.FIRST_NAME ||' '|| B.LAST_NAME AS EMPLOYEE_NAME,
B.SALARY,
100000 AS TARGET
FROM DEPARTMENTS A, EMPLOYEES B
WHERE A.DEPARTMENT_ID=B.DEPARTMENT_ID;

Then go to datacontrol and drop this viewObject on page as chart

In dialog select Funnel on left panel and you can select horizontal or vertical layout of funnel at right side

This is the configuration screen for Funnel. Here we can select Actual and Target values and Section Name appears on view port

Click on ok button of this dialog and your Funnel chart is ready
See generated XML-

<dvt:funnelChart id="funnelChart2" var="row" value="#{bindings.DeptEmpView11.collectionModel}">
                        <dvt:funnelDataItem id="di2" targetValue="#{row.Target}" label="#{row.DepartmentName}"
                                            value="#{row.Salary}"/>
                    </dvt:funnelChart>

Now run this application and see how it appears :)

Wow.. it's good :)
If we want to show only Departments Name with salary (No comparison with Target) then just remove this targetValue from xml code and then it looks like this

There are lots of properties to change it's layout , 3D effect , Title , FootNote etc. Try each one and see how it affects Funnel

Cheers :) Happy Learning

ADF Basics: Using f:attribute to pass parameter in ActionEvent

f:attribute tag (JSF Tag supported in ADF Faces) is used to pass some additional attribute value to associated component
Sometimes using f:attribute simplify a complex piece of code, this tag has very simple structure. It has two properties

name- Name of tag attribute
value- Value or an EL reference of value

Here in this post we will see how to use this tag with ADF Faces, I am using Departments table of HR Schema and requirement is to delete departments with attribute DepartmentId  greater than 100

Read data from Google Spreadsheet without authentication using Java

Google Spreadsheets provides a way to create, edit, save spreadsheets online.
The Google Sheets API (formerly called the Google Spreadsheets API) lets you develop client applications that read and modify worksheets and data in Google Sheets.
Read More about Sheets API

Let's see how to use this API to read data from Spreadsheet, here i am going to use Spreadsheet version 3.0 , if this link doesn't work then check on GitHub , from here you will get  client library for all Google APIs

Oracle JDeveloper and Oracle ADF 12c (12.2.1.0.0) out (bug fixed and lots of new features introduced)

Time to check new Jdeveloper 12.2.1 , Wait is over Check out new features :)

Download- Oracle JDeveloper 12g (12.2.1.0.0)

1. Alta UI is now default skin for all ADF Faces components , previously it was Skyros
Read more about Oracle Alta UI Design Patterns

4. In Data Visualization some change done in Pie Chart and Thematic Map. New component NBox and funnel chart is introduced

Get domain information (WHOIS) using Apache Commons Net API- ADF & Java

We can get any domain information using Apache commons net library. It supports various protocols and WHOIS information is one of them

WhoisClient class provides access of domain information
See what docs says -

The WhoisClient class implements the client side of the Internet Whois Protocol defined in RFC 954. To query a host you create a WhoisClient instance, connect to the host, query the host, and finally disconnect from the host. If the whois service you want to query is on a non-standard port, connect to the host at that port.

Download required library or if this link doesn't work then goto API page and download from there

This simple java method will fetch information of domain using Apache library

Blog Completed 3 awesome years

I am happy to tell you that my (Ashish Awasthi's Blog) blog has completed 3 years today.
On 14-October-2012 i have posted my first blog post on ADF Basics: Show inline Message in Oracle ADF and till now blog has more than 180 posts on ADF, Java, JavaScript, jQuery etc.

I started blogging to help Java & ADF developers, to share what i have learnt and still trying to do same
Initially started this blog with blogspot.com - oracleadf-java.blogspot.com & after one year changed it to a custom domain www.awasthiashish.com

It has 1700+ fan following on facebook -Facebook Page
Now i am trying to put some more interesting stuff to learn, Keep an eye on blog

Taking as a whole it was awesome journey of 3 years :) Thanks for your support , Keep reading Keep Learning :)

Now say Happy B'day to Ashish Awasthi's Blog  :)

ADF Basics: Reorder ADF table column using DisplayIndex property

This post is about a very simple use case that is reordering of af:table column at run time. 

Ordering of columns in af:table is controlled by DisplayIndex property of af:column
Check what docs says-

Default Value: -1

The display order index of the column. Columns can be re-arranged and they are displayed in the table based on the displayIndex. Columns are sorted based on the displayIndex property, columns without displayIndex are displayed at the end, in the order in which they appear. The displayIndex attribute is honored only for top level columns, since it is not possible to rearrange a child column outside of the parent column.
Not supported on the following renderkits: org.apache.myfaces.trinidad.core

We can set DisplayIndex property for all columns in a sequence (1,2,3 etc) that we want to see on page

Allow user input in Jdeveloper for Java applications, Using Java Scanner Class to take input from console

Sometimes we have to take input from Keyboard when we use Scanner or BufferedReader class.
and to take input from Jdeveloper we have to change a setting to allow user input in Jdeveloper.

Let's take an example of java.util.Scanner class-

package client;

import java.util.Scanner;

public class UserInput {
    public UserInput() {
        super();
    }

    public static void main(String[] args) {
        System.out.println("Please Enter your Name-");
        Scanner sc = new Scanner(System.in);
        String name = sc.next();
        System.out.println("Your Name is " + name);
    }

}

Using popupFetchListener to execute method on popup launch in Oracle ADF

Everyone must have used ADF Faces popup component , this is one of most used container to show information on top of page
In this post i am talking about popup fetch event suppose we have to perform some operation before opening popup like filtering data inside popup . We can do this by capturing popup fetch event, if you have checked af:popUp documentation then you must have seen concept of popupFetchListener

From Docs-
The PopupFetchEvent is one of two server-side popup events but doesn't have a corresponding client event. The popup fetch event is invoked during content delivery. This means that the event will only queue for popups that have a contentDelivery type of lazy or lazyUncached. Another caveat is that the event will only work when the launch id is set. This is automatically handled by the af:showPopupBehavior but must be provided as a popup hint if programmatically shown.

So here we will see -

How to use popupFetchListener to filter data inside popup ?
How to execute some operation before opening popup ?
How to call AMImpl method before launching popup?

ADF Basics: Call PL/SQL Stored function in ADF Application

This post is about calling stored function in ADF Application , a very basic requirement. Many times we need to call a PL/SQL function in ADF app for any specific requirement.
In this post i am discussing same so for that i have created a PL/SQL function that takes EmployeeId as input parameter and return it's Employees Name (Using Oracle HR Schema)

CREATE OR REPLACE FUNCTION FN_GET_EMPNAME(EMP_NO NUMBER)
RETURN VARCHAR2 IS
   EMP_NAME VARCHAR2(50) := 'N';
BEGIN
   SELECT FIRST_NAME||' '||LAST_NAME into EMP_NAME
   FROM EMPLOYEES WHERE EMPLOYEE_ID=EMP_NO;
   
   RETURN EMP_NAME;
END;

Jdeveloper installation folder size increasing beyond limit , Reason was hprof (Heap Profiling) files

Recently i faced a problem, i was lacking space on my C drive so  checked all directories and found that the size of Jdeveloper 12.1.3 installation folder Oracle-->Middleware  was approx 30 GB . This is not expected as Jdev. takes approx 1.5 to 2 GB space only

Then i found some java_pidXXXX.hprof file that was taking lot of space in this folder

Apply ValueChangeListener to programmatically created ADF Faces components

Again a post in series of  Working with ADF Faces Components programmatically
Previously i have posted about Getting value , Applying Action Listener , Applying Client/Server Listener, Creating and applying client Attributes, Setting value expression , Applying Validation to programmatically created component
Now this post post is about applying Value Change Listener to a component that is created at run time
See how to do this (Jdev 12.1.3)-

• First created a FusionWebApplication and a page in viewController project
• Dropped a button on page , on this button action i will create an inputText programmatically and assign Value Change Listener method reference to it
• To create new inputText i have added following code (described in previous post)

Apply Validator to programmatically created ADF Faces components

Again a post in series of  Working with ADF Faces Components programmatically
Previously i have posted about Getting value , Applying Action Listener , Applying Client/Server Listener, Creating and applying client Attributes, Setting value expression  to programmatically created component
Now this post post is about applying Validator to a component that is created at run time
See how to do this (Jdev 12.1.3)-

• First created a FusionWebApplication and a page in viewController project
• Dropped a button on page , on this button action i will create an inputText programmatically and assign validator method reference to it
• To create new inputText i have added following code (described in previous post)

ADF Basics: Using setPropertyListener to set value in memory scope variables

Soemtimes we need to set a value in memory scope variable on some event
In ADF af:setPropertyListener does this for you declaratively

The setPropertyListener tag provides a declarative syntax for assigning values when an event fires. The setPropertyListener implements the listener interface for a variety of events, to indicate which event type it should listen for set the 'type' attribute.

Read more about <af:setPropertyListener>

Facebook, Twitter, Google - Create large share buttons using JavaScript

This post is not like my other posts (ADF & Java), It is about creating custom large share buttons for Facebook, Twitter and Google+
Actually this share functionality of social networking sites (Facebook, Twitter, Google+ etc) works on a particular url pattern

Let's take example of Facebook , to share any url on Facebook just pass that url as a parameter in this url
http://www.facebook.com/share.php?u=url
See when i open this url on browser (I have passed www.awasthiashish.com in url parameter)
http://www.facebook.com/share.php?u=www.awasthiashish.com , it shows standard Facebook share page

Set EL expression in value (properties) of programmatically created ADF Faces component

When we are working with ADF Faces components programmatically then we  create , set styles,set value of that component from managed bean
This post is about setting an expression as component value that will be resolved at run time and return desired value