Use Google Fonts in ADF Application using custom CSS

We can use google fonts in the ADF application very easily. In this post, I'll describe the steps to implement this using custom CSS.

Go to Google Fonts

Select any font that you want to use and click on the plus (+) icon, I have clicked that that's why the image is showing the minus(-) icon

The next step is to see the font's properties and copy the highlighted link, It'll be used in our CSS

Now create a page in the ADF application and add this CSS using the ADF Resource tag, Here I have added 4 different fonts

1. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Charmonman"/>
2. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Kirang+Haerang"/>
3. <af:resource type="css" source="https://fonts.googleapis.com/css?family=VT323"/>
4. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Philosopher"/>

Added four output text to show different fonts

1. <af:outputText value="Oracle Application Development Framework" id="ot1"
2. inlineStyle="font-family:Charmonman;font-size:35px;color:red;font-weight:bold;"/>
3. <af:spacer width="10" height="10" id="s1"/>
4. <af:outputText value="Oracle Application Development Framework" id="ot2"
5. inlineStyle="font-family:Kirang Haerang;font-size:35px;color:green;font-weight:bold;"/>
6. <af:spacer width="10" height="10" id="s2"/>
7. <af:outputText value="Oracle Application Development Framework" id="ot3"
8. inlineStyle="font-family:VT323; font-size:35px; color:#4289aa; font-weight:bold;"/>
9. <af:spacer width="10" height="10" id="s3"/>
10. <af:outputText value="Oracle Application Development Framework" id="ot4"
11. inlineStyle="font-family:Philosopher; font-size:35px; color:#dc006d; font-weight:bold;"/>

Now run the application and check :)

Sample ADF Application - Download

Cheers  Happy Learning

Skinning ADF Dialog box inside popup component

 In this post, we'll see how to change the look n feel of popup component by skinning the ADF dialog box using CSS code in ADF Application. Skinning plays important role in designing a better user interface, You can read more about ADF Skinning here.

Default ADF dialog component inside popup looks like this

And here I'll show you how to customize the look of dialog box using ADF Skin (CSS Code), I hope you all know about creating ADF Skin file. After creating the Skin file put the CSS script mentioned below in that file.

See ADF Skin code used to customize ADF dialog box.

/**Change background color and border color of dialog**/
af|dialog {
    background-color: White;
    border-color: #4267b2;
}

/**Change dialog header style**/
af|dialog::header, af|dialog::header-end, af|dialog::header-start, af|dialog::title {
    color: #FFFFFF;
    text-align: center;
    background-color: #45619d;
    background-image: none;
    font-family: Arial;
    padding: 3px;
}

/**Change dialog button styler**/
af|dialog af|button {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    width: 60px;
}

af|dialog af|button::link {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    font-family: Arial;
}

/**Set hover event properties for dialog button**/
af|dialog af|button:hover {
    background-color: red;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    width: 60px;
}

af|dialog af|button::link:hover {
    background-color: #528cff;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    font-family: Arial;
}

/**Change default close icon of dialog**/
af|dialog::close-icon-style {
    background: none;
    background-image: url("../../lblue_cross_16.png");
    height: 17px;
}

af|dialog::close-icon-style:hover {
    background: none;
    background-image: url("../../red_cross_16.png");
    height: 17px;
}

And after skinning, ADF dialog box looks like this

Cheers :) Happy Learning

Change Style of ADF TreeTable, Column, Data Cell, Selected Row using ADF Skin

Hello Everyone

In this tutorial, We'll learn to change look n feel of ADF tree table component using Oracle ADF Skin
Here I am using Departments and Employees table HR Schema to prepare the model and created tree Table using view link between Departments and Employees View Object

Increase Icon size of af:panelSpringBoard using ADF Skin

ADF Faces af:panelSpringBoard component shows af:showDetailItem in a fancy view using icons as the notation of showDetailItem

From Oracle Docs

The panelSpringboard control can be used to display a group of contents that belongs to a showDetailItem. An icon strip with icons representing the showDetailItem children along with the item's contents are displayed when in strip mode, and a grid of icons with no contents shown is displayed in grid mode. When the user selects an icon while the panelSpringboard is in strip mode, the panelSpringboard discloses the associated showDetailItem. When the user selects an icon while the panelSpringboard is in grid mode, this automatically causes the panelSpringboard to display in strip mode. Typically you would put one or more showDetailItem components inside of the panelSpringboard but you may also alternatively place a facetRef, group, iterator, or switcher inside of the panelSpringboard as long as these wrappers provide showDetailItem components as a result of their execution

I have added a panel springboard on the page and by default, it looks like this

Hide values from ADF SelectOneChoice using EL expression on UI

This post is about a specific requirement that is to hide some values from adf based select one choice from UI
Previously I have posted about disabling some items from select one choice and this post uses same steps to hide values from lov

OTN Question: Not able to see last record in af:table when using icons (May be a bug)

Hello All

This post is about a problem that occurs sometimes in af:table when we use icon in any column, I am not sure that it is a bug or not but sometimes table is not fully stretched on first load and last row doesn't appear properly on page but after refreshing page again problem is solved.

Styling Input components inside af:query using ADF Skin

This another post is about af:query skinning, previously I have posted about changing the style of af:query buttons

ADF Skinning : Change color and style of af:query buttons in ADF Faces (Jdev 12.1.3)

Now this post is about styling input components inside af:query, Sometimes we need to change color, width, fonts of inputText, selectOneChoice that are inside af:query and that time simple skin selector doesn't do the job

ADF UI- Show DVT Chart inside af:table and other collection components

Hello All

This post is about showing a chart inside  ADF Faces Collection component like af:table or af:listView

This is a simple task to create normal chart but in case if we have to show table row record as a chart or graph then we have to change chart value and chart item value references so that it doesn't show all record but only values of that row

This post talks about these two requirements

1. Show same viewObject values as chart in af:table or af:listView
2. Show child viewObject values as chart in af:table or af:listView

ADF UI- dvt:bubbleChart component overview, Show data in 3 dimensions

Hello All

In ADF we have many dvt components and dvt:bubbleChart is one of them. This chart uses three measures for X-axis, Y-axis and size of bubble and looks good on UI

A good interface makes it easy for users to use application with interest, Previously I have posted a lot about ADF UI , you can read all posts here- Better UI in Oracle ADF

ADF UI- Using New DVT Component Picto Chart in ADF 12.2.1.1

Hello All

Couple of weeks ago Oracle released new version of ADF & Jdeveloper i.e. 12.2.1.1
This release comes with many new features and data visualization components, one of them is Picto Chart

DVT Component Picto Chart is used to visualize pictorial presentation of Numbers and it uses a count attribute to present chart portion, If you need to show different types of information in picto chart then more than one count attribute can be used

Show chart for every row of ViewObject using af:iterator in ADF Faces

Hello All

This post is about another use of af:iterator component, When we show Employees ViewObject data as a chart then all Employees appears in a single chart but if requirement is to show separate chart for each department ;) See how can we do it

Here I am using Departments and Employees table of HR Schema, Prepare model using both tables, Default view link is created between departments and employees view object (using department Id)

ADF UI- Using New DVT Component Tag Cloud in ADF 12.2.1.1

In new relaese of Jdeveloper and ADF 12.2.1.1 many new data visualization components are introduced

Here I am talking about <dvt:tagCloud> , this component is used to represent textual data in form of tags. You must have seen tag cloud on many websites to show popular tags or patterns

So now with help of this Tag Cloud component we can create and show same type of UI. In this post I am showing how can we use tag cloud component in our ADF Application

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

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

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 Skinning : Change label, content, design and 'Update' button style of af:inputFile

This post is about skinning af:inputFile, see how default inputFile looks on page

See how ADF Skin changes it's appearance :)
Change basic inline style of af:inputFile (background color and design) :

/**Skin Selector to change inline style of af:inputFile**/

af|inputFile {
    background-color: Green;
    border-radius: 20px 20px 20px 20px;
    padding: 5px;
}

Output on page-

Change label style of af:inputFile :

/**Skin Selector to change label style of af:inputFile**/
af|inputFile::label {
  font-weight:bold;
  color:white;
  font-family: cursive;
}

Output on page-

Change content style of af:inputFile (background color, design of content only) :

/**Skin Selector to change content style of af:inputFile**/
af|inputFile::content {
    color: #ff6363;
    font-weight: bold;
    border-color: #79bc79;
    border-style: solid;
    border-width: thin;
    border-radius: 15px 15px 15px 15px;
    padding: 5px;
    background-color: #d6ffd6;
    font-family: cursive;
}

Output on page-

After selecting a file, update button appears -

On click of update button a popup with af:inputFile appears-

Change update button style of af:inputFile:

/**Skin Selector to change style of update button of af:inputFile**/
af|inputFile af|commandButton {
    color: white;
    font-weight: bold;
    background: #00b55a;
    border-radius: 15px 15px 15px 15px;
    font-family: cursive;
}

/**Skin Selector to change style of update button of af:inputFile in case of hover**/
af|inputFile af|commandButton:hover {
    color: white;
    font-weight: bold;
    background: #940000;
    border-radius: 15px 15px 15px 15px;
    font-family: cursive;
}

Output on page-

On hover-

Cheers :) Happy Learning
o

ADF Skinning : Change color and style of af:query buttons in ADF Faces (Jdev 12.1.3)

Hello All,

This is another post about ADF Skinning , in this post i am going to show you that how can we change button's style in af:query component
Actually this is very easy , if we define some styles for af:button component in our css file then it will be applicable on af:query's buttons (Search, Reset, Advanced, Save etc) too

Suppose i have defined this in css file

af|button{
    color:navy;
    font-weight:bold;
}

Now it will change color of all buttons of application including af:query
See this snap after applying this skin

But if you have a requirement to use different style in af:query buttons or you don't want to change color of all buttons
Then it is not that much easy as it seems ☺

There is a selector to style buttons of af:query - af|query::button 
But this works only if buttons are af:commandButton not af:button
See from docs-

af|query::button Styles the buttons of the query component. Note that this skin selector is only present when the skin selector -tr-button-type is set to 'old', and the query buttons are rendered as af:commandButtons. When the -tr-button-type is set to 'unified', the query buttons are rendered as af:buttons and have the default stylings for af:button applied, so that query buttons have the same look and feel as all other buttons. Tip: If you skin this selector's background-image, you may also want to skin it for :hover, :active, :focus. The :disabled state is currently not supported. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.

So for this first i have to change -tr-button-type selector to old so that i can use af|query::button
Now see the css

af|query {
    -tr-button-type: old;
}
 af|query::button {
    color: red;
    font-weight:bold;
}

 af|query::button:hover {
    color: Orange;
    font-weight:bold;
}

 af|query::button:focus {
    color: maroon;
    font-weight:bold;
}

af|button{
    color:navy;
    font-weight:bold;
}

Check the output-

To use specific style for af:query you can create styleClass in css file and put this in styleClass property of af:query
Suppose i have two af:query components on page and i want to use different style for both
For this i have define two different styleClass in css file like this-

af|query {
    -tr-button-type: old;
}
 .mystyle1 af|query::button {
    color: red;
    font-weight:bold;
}

.mystyle2 af|query::button {
    color: darkgreen;
    font-weight:bold;
}

and on page put myStyle1 in styleClass property of first af:query component and myStyle2 in second af:query
See how it looks now -

Cheers, Happy Learning  ☺