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  ☺

ADF Skinning : Remove "search" or "more" link from af:inputComboboxListOfValues in ADF Faces (Jdev 12.1.3)

Hello all,

This post is about a small CSS trick that may be useful sometimes

we often use af:inputComboboxListOfValues to show large amount of data as List of Values
From Oracle Docs-
The inputComboboxListOfValues component allows a user to open a choice list and select from a list of values, in order to populate the LOV field (and possibly other fields) on a page.
Users can either select a value from the list in the dropdown panel or click the "Search..." link at the bottom of the panel to launch the "Search and Select" dialog. The dialog enables users to search for specific values and select the desired value that should go into the LOV field on the base page. The choice list when opened could display various items in the following order with separators between each (if applicable).



Have a look at this -

 here you see a link "more" on click this link a search dialog box appears , when you define a search criteria in lov at model level then this link appears as "search"

So to remove this link from combobox use this CSS

af|inputComboboxListOfValues::search{
    display: none;
}

Now look at combo box , we are done

Also Check how to configure ADF Skin in Application - ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces)

Cheers :)
Happy Learning

Better User Interface- Oracle Alta UI for Oracle ADF 12.1.3

Great news for all ADF developers ,
Oracle has launched a design system for better user experience - Oracle Alta UI (much more than skin)

see press release- Oracle Announces New User Interface Design System for a More Engaging Customer Experience
As per documentation -

Oracle Alta UI is a new user interface design system that enables developers to create modern, visually pleasing, consistent, and engaging interfaces that can be easily distributed across all delivery channels.
The Oracle Alta UI design system provides a set of guidelines and best practices. The system is based on years of user experience and usability implementations and analysis by leading UI and design specialists.
Oracle Alta UI-based applications feature a simplified component structure and more open space to keep the focus on data.

See details of Oracle Alta UI- Oracle Alta UI

I have created a simple master detail page using Departments and Employees table of HR Schema using Jdev 12.1.3



by default skyros skin is applied in fusion web application, you can see this in trinidad-config.xml file under WEB-INF node

to apply Oracle Alta UI just change skin-family to alta

Now compare both UI , you will see a big difference

Full page-
Default Skin-

Alta UI-

See difference in af:inputDate and it's calendar
Default Skin-

 Alta UI- (icon is inside date field)

inputListofValues box is very attractive now-
Default Skin-

 Oracle Alta UI-

and magnifier icon is inside field now-

try it yourself and see difference in other components also
refer- Designing & Developing Oracle ALTA UI Apps
Sample ADF Application- Download
Thanks

Customize af:button (font, shape, size, color etc) using skinning -Oracle ADF (12.1.3)

Hello all
this post is about styling af:button component in ADF 12.1.3
how can we customize a button , change it's color, background color, shape ,size, font and many more
In 12.1.3 Jdeveloper, some features are supported like width of button directly from inline style property (this was not supported in 11g)

you can see new features for client side css- http://www.oracle.com/technetwork/developer-tools/jdev/documentation/1213nf-2222743.html

So let's start
I hope everyone know how to create css (skin) file in jdeveloper , if don't then follow this

Right click on viewController project → New from Gallery → Categories → Web Tier → JSF/Facelets → ADF Skin



Dropped 3 buttons on page, third one is disabled

Changing button properties (width, font, color for different client event) -

I think no description needed as tags are self-descriptive

af|button {
    width: 150px;
    text-align: center;
    vertical-align: bottom;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
}

Output-

Now change background color - to do this we have to use af|button::link  selector

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
}

Output-

In same way we can change button behavior for hover, disabled and depressed client event

Hover event-

af|button:hover::link {
    background-color: #c7660b;
    border: skyblue 2.0px solid;
    color: White;
}

af|button:disabled::link {
      background-color: Gray;
    border: skyblue 2.0px solid;
    color: White;
}

Output- (hover on first button)

Depressed event- (Select )
 

af|button:depressed::link {
    background-color: maroon;
    border: skyblue 2.0px solid;
    color: White;
}

Changing shape of button-

1.Rounded corner (oval shape)
just change af|button and af|button::link selectors

af|button {
    width: 150px;
    text-align: center;
    vertical-align: bottom;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

Output-

2.Square Button-

af|button {
    text-align: center;
    vertical-align: middle;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    height: 50px;
    width: 50px;
}

af|button::text {
    padding-top: 12px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    height: 43px;
}

Output-

2.Round(Circle) Button-

changing shape is nothing just some hit and try in css, see the changes css other selectors remain same

af|button {
    text-align: center;
    vertical-align: middle;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    height: 50px;
    width: 50px;
    border-bottom-left-radius: 5em 5em;
    border-bottom-right-radius: 5em 5em;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
}

af|button::text {
    padding-top: 12px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    height: 43px;
    border-bottom-left-radius: 5em 5em;
    border-bottom-right-radius: 5em 5em;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
}

Output-

So purpose of this post is to give overview of skinning and different selectors, you can try it on any component. Jdeveloper provide built in skin editor for all component , there you can see all selector and pseudo element of a component
Thanks , Happy Learning

ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces)

Hello All
This is a basic post about using CSS in ADF applications, how can you change appearance of ADF application using Skins (.css file)
See the steps to create and apply css in your ADF applications

• Create a Fusion Web Application and create a page
• Add Some ADF Faces component (input text,button,panel box, panel collection etc)
• Now to change appearance of default ADF Faces components , create an ADF Skin
•  Right click on ViewController--->New--->Web Tier--->JSF/Facelets--->ADF Skin 





• By default ADF Skin name is like skin1,2 etc




• After creating ADF Faces skin open it and, on left you will see all components as Button, Layouts, Output text and so on. this is ADF Skin Editor





• Now expand the components that you want to change , change it's color(on active, focus , hover etc) and other properties. See in image below





• After creating your ADF Skin ,open trinidad-config.xml file in Jdeveloper editor and your will see like this



<skin-family>skin1</skin-family>

This means that skin1 is applied on Application

• now if you another ADF Skin file- skin2 then in trinidad-config.xml, it will be changed to



<skin-family>skin2</skin-family>



• ADF automatically choose the most recent skin, so here this is done , now create and configure your ADF Skin and customize appearance of application
• For more details see Oracle Docs- http://docs.oracle.com/cd/E16764_01/web.1111/b31973/af_skin.htm

Cheers :-) Happy Learning

Hiding search icon of af:inputListOfValues using CSS & ADF Skin

Hello All,
Hope all are doing good, this post talks about skinning inputListOfValues to hide its search icon (magnifying glass)
we can use the auto-suggest feature in inputListOfValues so if we don't want to display that default search icon then what to do?

• inputListOfValues looks like this in ADF Faces

•  I have created a page and dropped 2 inputListOfValues on page

•  there is 2 types of requirement about hiding search icon
1. Hide icon of all inputListOfValues(LOVs) available on page or application
2. Hide icon of some selected fields
• to do this we have to create a CSS (skin) in application

• give relevant name of CSS file and set this file as default skin of application

• Now to hide icon of the selected inputListOfValues component in an application, go to the source of CSS file and just write this code
   



.TagSearchIconHidden af|inputListOfValues::search-icon-style
{
display: none;
} 



• Now go to the page and paste TagSearchIconHidden in StyleClass property of lov component to hide its icon, run your page and see, I have done this in my first LOV

•  Now to hide icons of all lov component just change CSS file with this script



af|inputListOfValues::search-icon-style
{
  background-image: none; 
}



• Now no need to set StyleClass, it is applicable to all lov components of the application

 Cheers :-)