Thursday, 15 December 2016

float Label for InputText in ADF

FloatLabel for input components are the common requirement to get good user friendly experience.
To achieve this we need to write jQuery/Javascript. Basically, The concept is just remove the placeholder attribute from input component, Dynamically append the span component then assign placeholder value and place it on input component. Whenever user entered something on it then will move to the top using CSS3 transitions.

The below image is how the form look and feel without applying any placeholder customisation.




The below image is how the form look and feel after applying  placeholder customisation.


Everything has customised with jQuery and CSS3. The below are the implementation code.

JQuery:

function floatLabel(){
    var ua = window.navigator.userAgent
var msie = ua.indexOf("MSIE ")
ieversion = parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));
if ((msie > 0) && (10 > ieversion)) {

} else {
    $('input[type=text],input[type=date],input[type=password],input[type=tel]').each(function(index, value) {
        //$('.userloginInputText input').each(function(index,value){
        var noPlaceHolder = $(value).parent().parent().hasClass('noPlaceHolderNeed');
        if (noPlaceHolder) {

        } else {
            var getPlaceholder = $(this).attr('placeholder');
            if (getPlaceholder != "") {
                var checkParent = $(this).parent().hasClass('placeholder-con');
                if (checkParent) {} else {
                    $(this).wrap("<div class='placeholder-con'>");

                }
                var getParent = $(this).parent();
                spanCheck = $('.getParent').find('placeholder-text').val();
                var checkSpan = $(this).parent().find('.placeholder-text').length;
                if (checkSpan >= 1) {
                    var checkValue = $(this).val();
                    if (checkValue != "") {
                        $(this).parent().find('span').addClass('inputFocused');
                    }
                } else {
                    $("<span class='placeholder-text'>").prependTo(getParent).html(getPlaceholder);
                    var checkValue = $(this).val();
                    if (checkValue != "") {
                        $(this).parent().find('span').addClass('inputFocused');
                    }
                }
                $(this).removeAttr('placeholder');
                var getDisabledAttr = $(this).attr('disabled');
                if (typeof getDisabledAttr !== typeof undefined && getDisabledAttr !== false) {} else {
                    $(this).click(function() {
                        $(this).trigger('focus');
                    });
                    $(this).focus(function() {
                        $(this).addClass('addBorder');
                        $(this).parent().find('span').addClass('inputFocused');
                      $(this).removeClass('addIeBorder');
                    });
                    $(this).parent().find('span').click(function() {
                        $(this).next().find('input').addClass('addBorder');
                        $(this).parent().find('span').addClass('inputFocused');
                        $(this).next().trigger('focus');
                    });
   
                  $(this).blur(function(event) {
                        var checkValue = $(this).val();
                        if (checkValue == "") {
                      $(this).parent().find('span').attr("class", "placeholder-text");
                      $(this).addClass('addIeBorder');
                         
                        } else {
                     $(this).addClass('addIeBorder');
                        }

                    });
                }

            }
        }
    });
}


}

CSS:

.placeholder-con{
    position: relative;
}
.placeholder-text{
    position: absolute;
    top:22px;
    left: 5px;
    color: #888;
    font-size:14px;
    transition: all cubic-bezier(0.25,.8,.25,1) .25s;
}
.inputFocused{
    color: #00B9F5;
    font-size: 12px;
    top: 0px;
}
.addBorder{
    border-bottom:2px solid #00B9F5 !important;
}
.addIeBorder{
     border-bottom:2px solid #b7b7b9 !important;
}

 I am attaching the sample application for reference. Download below link for understanding the implementation.

Download

Let me know if you have any doubts.


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.