Placeholder text Css in ADF

A browser apply predefined style to the placeholder attribute. Basically for placeholder colors varying in browser to browser.

If we want to apply same colors and different css property's to the placeholder, The below are the css selectors to achieve custom look and feel.

Wee need to add browser specific pseudo elements to the input component.

For Chrome:

The below pseudo element apply for all input components.

input[placeholder]::-webkit-input-placeholder

{

//Our Css propertys

}

The below pseudo element apply for specific input component.

.myCustomStyleClass input[placeholder]::-webkit-input-placeholder

{

//Our Css propertys

}

For Firefox:

The below pseudo element apply for all input components.

input::-moz-placeholder { 

//Our Css propertys

        opacity: 1;

}

Need to give opacity for Firefox because opacity is coming from default predefined styling.

The below pseudo element apply for specific input component.

.myCustomStyleClass input::-moz-placeholder { 

//Our Css propertys

        opacity: 1;

}

For Internet Explorer:

The below pseudo element apply for all input components.

input:-ms-input-placeholder

{

//Our Css propertys

}

The below pseudo element apply for specific input component.

.myCustomStyleClass input:-ms-input-placeholder

{

//Our Css propertys

}

Please make sure that these css won't work on registered css file in ADF appliction so need to write an external css file .

JQuery Id selector in ADF

Some times we have a requirement like have to write some css changes based on id selector.

The ADF components will rendered with some mixed special characters. For this case if you want to find the id, We need do add '\\' before to the special character.

Example:

ADF Actual Rendered ID:pt1:r1:0:pgl13

JQuery ID selector:

 $("#pt1:r1:0:pgl13");----------It doesn't work

$("#pt1\\:r1\\:0\\:pgl13")-------It works.

IE11 Opatch for Jdeveloper and Integrated weblogic server,Supportability on Internet Explorer 11 (IE11) with Oracle ADF

If you run ADF application locally in integrated web logic server on IE11 browser, ADF application can only run in comparability mode in IE11 and we will get below error.

For fixing this issue, Oracle provide Opatch for integrated weblogic server and Jeveloper.

The below are the steps to implement Opatch locally.

First download patch from oracle .The below are the link for patch download.

https://support.oracle.com/rs?type=patch&id=18277370

After download, we will get two folder like below,

The main intention is we need to install opatch in these two paths.

I have installed jdeveloper in E drive, Based on your respective installation drive give that location and install in it.

Open command prompt and do below guidelines.

Step1:

We need to install opatch for integrated weblogic server, for this have to install in oui folder

 Go to your downloaded path folder, In command prompt change to that directory like below,

Set ORACLE_HOME=E:\Oracle\Middleware11.1.7\oracle_common

 Next, we have to install patch in Opatch folder like below,

Synatx:

Downloaded Opatch oui path----> [Oracle common patch folder]\opatch apply -jdk [jdk Path]

E:\Opatch\p18277370_111170_Generic\18277370\oui\18277370>E:\Oracle\Middleware11.1.7\oracle_common\OPatch\opatch apply -jdk E:\Oracle\Middleware11.1.7\jdk160_24

After that command prompt will ask some of options like [1-2] and [y-n]. Give '1' and 'y' you will get installation status messages like success or failure.

Step2:

Same like oui folder need to be install in sa folder.

We need to install opatch for jdeveloper, for this have to install in sa folder

 Go to your downloaded path folder, In command prompt change to that directory like below,

Set ORACLE_HOME=E:\Oracle\Middleware11.1.7\jdeveloper

 Next, we have to install patch in Opatch folder like below,

Synatx:

Downloaded Opatch sa path----> [Oracle common patch folder]\opatch apply -jdk [jdk Path]

E:\Opatch\p18277370_111170_Generic\18277370\sa\18277370>E:\Oracle\Middleware11.1.7\oracle_common\OPatch\opatch apply -jdk E:\Oracle\Middleware11.1.7\jdk160_24

 After apply patch, Clear IE Cache and check browser then will not get browser not support alert.

Reach me if you have any concerns.

ADF Menu | MenuBar | commandMenuItem Skinning

Drop down menus are a common requirement for web applications, In html we can create using elements like ul, li, div e.t.c. In ADF, We can achieve using menuBar and menu components.

The below image is how the dropdown look and feel without applying any custom skinning.

The below image is how the dropdown look and feel after applying skinning.

These are the component structure in an source page.

The below are the skinning selectors for getting above look and feel.

af|menu::bar-item-open-icon-style {

    background-image: url("/images/select-arrow.png");

    height: 16px;

    width: 16px;

    padding-top: 2px;

}

af|menu::bar-item-text {

    color: #666;

    font-size: 14px;

    font-family: openSans-Regular;

}

af|menu::bar-item-text:hover {

    color: #eeaa00;

    font-size: 14px;

    font-family: openSans-Regular;

}

af|menu::bar-item {

    padding: 0px;

    height: 25px;

}

af|menu::bar-item:highlighted {

    background-image: none;

    background: transparent;

    border: none;

    border-bottom: 2px solid #c00;

    padding: 0px;

}

af|menu::bar-item:depressed {

    background-image: none;

    background: transparent;

    border: none;

    border-bottom: 2px solid #c00;

        padding: 0px;

}

af|menu:highlighted af|menu::bar-item-open-icon-style {

    background-image: url("/images/select-arrow.png");

    padding-top: 2px;

}

af|menu:depressed af|menu::bar-item-open-icon-style {

    background-image: url("/images/select-arrow.png");

    padding-top: 2px;

}

af|menuBar

{

    overflow: visible !important;

    background: transparent;

    height: 25px;

}

af|commandMenuItem::menu-item-text {

    font-family: openSans-Regular;

    font-size: 13px;

    padding: 5px;

    font-weight: 400;

    color: #333;

    background-color: #f9f9fa;

}

af|menu::child-container

{

    background-color:#f9f9fa;

    min-width: 180px;

    border-top: none;

}

af|commandMenuItem::menu-item-text:hover {

    background: #fcc200 !important;

}

af|commandMenuItem::menu-item-text:active {

    background: #fcc200 !important;

}

af|commandMenuItem::menu-item-icon-style {

    display: none;

}

af|commandMenuItem::menu-item-open-indicator {

    display: none;

}

af|commandMenuItem::menu-item-accelerator {

    display: none;

}

For reference download below sample application.

  

download

Reach me if you have any doubts.

Custom fonts in ADF applications

These days for developing an ADF applications, UI designers developing the wireframes using custom fonts instead of system fonts for better readability and look and feel. If you want to implement in an adf applications,We need to embed all fonts in to an application.

The below are the steps to implement custom fonts in to an ADF applications,

1. Copy custom fonts in to one location.For avoiding cross browser compatibility font issues, We need to download specific browser based support fonts.

Different browsers support a slightly different set of font format.These are the extensions to support different browsers.

• Web Open Font Format(.woff)-Modern browsers
• Embedded Open Type(.eot)-Internet explorer
• Truetype fonts(.ttf)-Safari,Android,IOS
• Svg(.svg)-Legacy IOS

2. Using @font-face CSS at-rule allows to specify custom fonts in to an application.These are the rules to load custom fonts in to font.css.

3. Load this css file in to the application.If you are using pagetemplate then add below tag to your pagetemplate. There is no need to add every time in each page.

<af:resource type="css" source="/css/fonts.css"/>

4.Use font-family name what we have defined in font.css file like below.

Example:

body

{

font-family: 'robotoregular';

}

.styleClassName

{

font-family: 'robotoregular';

}

If you want sample apllication for reference download below link,

Download:customFontsPoc

ADF commandLink/goLink(Links) Skinning

Now a days, Use interface plays a vital role in applications, whatever technology will be used, Nice user interface should be mandatory. In ADF, Sometimes the requirement like the look and feel of an application same like Html website, Having a header section with some of the links. These all are horizontally aligned with nice background colors.
In adf, we can easily achieve with links.

Expected UI:

The below is the layout in source page to achieve above look and feel.

Here, I have defined navTab styleclass for each individual link.

The below are the css for normal commandlink component i,e without having any hovers,foucus e,t,c.

af|commandLink.navTab {
    font-family: 'openSans-Regular';
    display: inline-block;
    padding: 15px 20px;
    background: #fff;
    cursor: pointer;
    color: #000;
    font-size: 13px;
    text-decoration: none;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

The below are the css for commandlink component having hovers,foucus e,t,c.

af|commandLink.navTab:hover,

 af|commandLink.navTab:active,

 af|commandLink.navTab:active:hover,

 af|commandLink.navTab:focus:hover,

 af|commandLink.navTab:focus:hover:active {

    font-family: 'openSans-Regular';

    display: inline-block;

    padding: 15px 20px;

    background: #565656;

    cursor: pointer;

    color: #fff;

    font-size: 13px;

    text-decoration: none;

    -webkit-transition: all 0.2s;

    -moz-transition: all 0.2s;

    -ms-transition: all 0.2s;

    -o-transition: all 0.2s;

    transition: all 0.2s;

}

Download: linksSkinningPoc

Reach me if you have any doubts.

The ultimate guide for skinning ADF table

In ADF, Most common used component is table. Previously, I searched for so many blogs, I didn't get any skinning related stuff to fulfill my requirement then I realized and explored myself to learnt. Finally i could accomplish skinning for table component.

I hope this post should definitely useful for your requirement.

The below image is how the table look and feel without applying any custom skinning.

The below image is how the table look and feel after skinning.

The below are the steps to achieve above look and feel .

It's not straight forward approach, We need to apply skinning for each section.

af|table {

background: none;

border: 1px solid #A65B1A;

}

1. ColumnHeader:

af|table af|column::column-header-cell 
{   
height:35px;
color:#ffffff; 
text-align: center;
font-size: 12px;
font-family:'OpenSans-Bold';  
font-weight: bold;
background-image: none;
background-color: #A65B1A;
vertical-align: middle;
border-left: 1px solid #BF691E;
}

2. Data row:

af|table::data-table-VH-lines af|column::data-cell
{
background-color:#fff;
color: #7F4614;
font-size:12px;
font-family:'OpenSans-Regular';
height:30px;
vertical-align: middle;
text-align: left;
} 

3.Data row- Altrenative:

For implementing different css for alternative rows,we need to be change table rowBandingIntervel property to 1.

af|table::data-table-VH-lines af|column::banded-data-cell{ 

background-color:#F0E5CC; 

color: #7F4614;

font-size:12px;   

font-family:'OpenSans-Regular';  

height:30px;   

vertical-align: middle;

text-align: left; 

}

4.Table default row selection:

Some of the requirements like want to show row selection color for the default selected row.

At the time of page load,The default row should selected, It depends on row index value.Normally, First row would be selected.

af|table::data-row:selected af|column::data-cell
{  
background-color: #eeaa00;
color: #ffffff;  
}
af|table::data-row:selected af|column::banded-data-cell
{  
background-color: #eeaa00; 
color: #ffffff;  

}

5.Table row selection:

The row color will be changed based in your row selection.These are the following selectors for that.

af|table::data-row:selected:focused af|column::data-cell
{  
background-color: #eeaa00;  
color: #ffffff; 
}
af|table::data-row:selected:focused af|column::banded-data-cell {
background-color: #eeaa00;   
color: #ffffff;    

}

6.Table row hover:

af|table::data-row:hover af|column::data-cell
{ 
background-color: #9bafc8;  
color: #ffffff;  
}
af|table::data-row:hover af|column::banded-data-cell { 
background-color: #9bafc8;
color: #ffffff; 

}

These all are the common requirements for table skinning.And we can also do skinninng for pagination and detail stamp.

Next post i am planning to post how the table support for responsive.This is the open issue for all developers.

Reach me if you have any doubts.

Configuring a custom skin in ADF Application

when we create a ADF application in under Jdev 11.1.1,7 version, Jdeveloper could not create any default css file in our application. If we want to create any custom css file, It should be configured some where in ADF application, otherwise css changes doesn't reflect any where.

When you are creating webcenter application css file configuration comes through default.

For configuring our custom css file in to application,These are the following steps.

1.Create trinidad-skins.xml  file in WEB-INF folder of ViewController project.

2.Create Css folder and put our css file into that.

3.We need to give this css file location path into the trinidad-skin file

4.In trinidad skin file add skin family name,because it should refer in to the trinidad-config.xml.

5.Add skin family name in trinidad-config.xml file like below

Once run the application you will get changes of respective css changes.

 For reference download below link.

download

Css Reuse-Css inheritance in ADF

In most of time we are getting different requirements related look and feel of the components.
For example,In application we have 10 buttons with different background colors, But remaining look and feel is same like width,height and padding e.t.c

If we observe above buttons almost same look and feel only difference background color.
Normally we can achieve this we will create different styleclass and apply skinning for each individual components.

Actual Css:

af|commandButton.greenButton
{

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

background: #3498db;

}

af|commandButton.blueButton

{

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

background: royalblue;

}

In the above css code, Almost all css propertys are same except background, Imagine in application having more than 10 buttons, we will get a chance to increase the css code. It will be affecting the performance of  application. Not only buttons we can use for all components.

One of the way that we can achieve the above functionality by reducing CSS is by applying -tr-rule-ref property.

The below are the steps to implement the -tr-rule-ref property.

1.We need to identify common css in the components.
2.Create one styleclass with alias and put all common css in to that.

.commonButtonCss:alias 

{

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

}

3.-tr-rule-ref synatax.

  -tr-rule-ref: selector("styleclassName:alias ");

af|commandButton.greenButton

{

  -tr-rule-ref: selector("commonButtonCss:alias");

background: #3498db;

}

af|commandButton.blueButton

{

  -tr-rule-ref: selector("commonButtonCss:alias");

background: royalblue;

For reference check in oracle documentation

http://docs.oracle.com/cd/E16162_01/user.1112/e17456/adfsg_selectors.htm#ADFSG544

commandButton Skinning in ADF

These are the skinning selectors for the commandButton.

Normal Button Css:

af|commandButton.myNewButtonClass{

background: #3498db;

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

}

Pseudo-classes css:

The below are the pseudo classes like hover,focus,active e.t.c.

af|commandButton.myNewButtonClass:focus,
af|commandButton.myNewButtonClass:hover,
af|commandButton.myNewButtonClass:active,
af|commandButton.myNewButtonClass:focus:hover, 
af|commandButton.myNewButtonClass:focus:hover:active {

 background: royalblue;

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none;

border: none;

outline:none;

cursor: pointer;

}