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