Thursday, 24 March 2016

Responsive UI Support in Oracle ADF 11g

To support ADF applications for mobiles and tablets it's a big challenge on Oracle ADF 11g where as in Oracle ADF 12c versions we can easily develop responsive screens based on requirement.

Using responsive and adaptive design we can support ADF applications in tablets as well as in mobiles.

Using CSS3 media queries we can achieve responsive and adaptive design.

Responsive design works on a single fluid website that can look good on any device. Using media queries we can fix the layout based on device resolution.

Adaptive Web Design is different from Responsive Design in that there isn’t one layout that always changes. Instead, there are several distinct layouts for multiple screen sizes, and the layout used depends on the screen size used.

Major difference between Oracle ADF 11g and Oracle ADF 12c:

CSS3 media query won't support inside the skin definition on Oracle ADF 11g but it supports in Oracle ADF 12c releases.

Major guidelines to achieve responsive and adaptive design: 

1. Use panelGroupLayout layout elements: Set panelgroupLayout element as vertical then will rendered like html div element.
2. Fluid Grids:Use percentage(%) sizes instead of pixels and points e.t.c
3.Write Media queries in external css file because it won't support in skin definition i.e registered skin file.
4.Don't use stretch layouts like PanelGridLayout.
5. For input components add simple property as true then it will render like span element otherwise it will render like table.
6.Avoid using PanelBorderLayout, PanelGroupLayOut(as horizontal) because they will render like table element.
7. Add specified meta tag property in the page template or in respective pages.

Wireframe Designs as per Resolutions:

     We need to get clarity about how the screen looks in specific resolutions.

1.Desktop

2.Tablet




3.Mobile



If we observe above designs then components alignments and font sizes are varying.In this case media query plays major role to achieve the requirement.

Below are the steps to implement responsive design in ADF 11g application .

1.First we need to embed external Responsive css file in page like mentioned below,


2.Add Meta tag in page template or in the respective pages.


3.Responsive css changes:
 
   In desktop, label and input content are left to stack each other, In this case label width is 25% and inputText content width is 75%.


The below css classes are for desktop resolution.

    .formLabelText{
     width:25%;
     }
   .formInputText
    {
     width: 75%;
    }

 In tablet, label and input content are vertical to each other, In this case label width is 100% then automatically content will move to down.

The below css classes are for tablet resolution.

     @media screen and (max-width:768px) {
     .formLabelText{
     width: 100%;
     margin-top: 10px;
     }
    .formInputText
    {
    width: 100% !important;
    }
   .mainRootContainer{
     margin: 4% !important;
    }
    }

The below css classes are for mobile resolution

  @media screen and (max-width:420px) {
  .formInputText input
   {
    margin-top: 8px !important;
   }
   .formTitle{
    font-size: 24px;
    }
    }

    @media screen and (max-width:360px) {

     .formTitle{
     font-size: 16px;
      }
    }

 I hope this post will definitely help you to achieve responsive design.

For better understanding download below link.
                                                                                Responsive Sample POC

Wednesday, 2 March 2016

Custom Splash Screen in ADF

At the time of page load we will see loading splash screen, It comes though ADF default with loading animation image like below,


If you want to customize we need to override default splash screen skinning selectors like below,


/*---------Loading Screen Skinning Start---------------------*/
af|document::splash-screen-content{
background-color:white;
}
af|document::splash-screen{
background-color:white;
}
af|document::splash-screen-content{
border:white;
background-color:white;
}
af|document::splash-screen-message{
display: none;
}
af|document::splash-screen-cell{
background-color:white;
}
af|document::splash-screen-icon{
content:url("/images/PageLoading.gif");
}
/*---------Loading Screen Skinning Ended---------------------*/

After that page looks like below,


Reach me if you have any concerns.


Monday, 14 September 2015

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 .

Monday, 29 June 2015

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.

Friday, 5 June 2015

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.


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.

Tuesday, 21 April 2015

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.

Wednesday, 8 April 2015

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