Convert Images To Base64

The advantage lies in not having to open another connection and make a HTTP request to the server for the image. This benefit is lost very quickly so there's only an advantage for large numbers of very tiny individual images.

https://www.base64-image.de/

Upload image-->Convert to Base64→Use base64 code as css background-image

Example:

.image{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC0AAAAReCAYAAABE27ddfffsdfsdfsd'); }

Dynamically changing the column header text in OJET Table

Requirement:
                     Dynamically change OJET table header text,It will helpful for translations and keep maintaining lables in seperate file.

Syntax for OJET Table in html:

 <oj-table id='table' aria-label='Departments Table'
                      data='[[pagingDatasource]]'
                      on-oj-before-current-row='[[onSelectRow]]'
                      columns-default='{"sortable": "disabled"}'
                      columns='[{"headerText": "Department ID"},
                      {"headerText": "Dapartment Name"},
                      {"headerText": "Department Description"}]'
                      row-renderer='[[oj.KnockoutTemplateUtils.getRenderer("row_tmpl", true)]]'>
         
            </oj-table>

            <script type="text/html" id="row_tmpl">
                <tr>
                    <td data-bind="text: departmentID">
                    </td>
                    <td data-bind="text: departementName">
                    </td>
                    <td data-bind="text: departmentDescription">
                    </td>
                </tr>

                </script>

In the above code, header text we are giving in static format. If you want to add in dynamically,we need to override in respective js file like below,

self.departmentId= ko.observable('Dept ID');
self.departmentName= ko.observable('Dept Name);
self.departmentDesc= ko.observable('Dept Description');

Add below code in one of OJET life cycle method.

  self.handleBindingsApplied = function () {
       
$("#table")[0].columns =  [{"headerText": self.departmentId()},
                      {"headerText": self.departmentName()},
                      {"headerText": self.departmentDesc()}
                   ];
}

Immutable Primitive Values,Mutable Object and Immutable Object in Javascript

Immutable Primitive Values:

In JavaScript there are 5 primitive types: undefined , null , boolean , string and number. 
In javascript the Primitive values are data that are stored on the stack . Primitive value is stored directly in the location that the variable accesses.
Primitive values are immutable because there is no way to change a primitive value.

Example: var str="javascript";
str.concat("is a scriping language");//Just concatinating the string to existing string
console.log(str);//output will be original value only:

If you want to access str variable it always give original value because primitive values are store by value.

Mutable Object:

In Javascript Objects are mutable means that can be changed. Once object is created later will add property's, delete the property's and change the property values.

Example: var subject={ name:"Javascript" } console.log(subject.name)-----Javascript subject.name="Object Oriented Javascript"; console.log(subject.name)------Object Oriented Javascript delete subject.name-----true subject.hasOwnProperty('name');----false

Here the name property deleted so that by default in javascript objects are mutable( can be changed)

Immutable Object:

An immutable object is an object whose state cannot be modified after it is created.
Bydefault in javascript every object is mutable if you want add object as immutable have to use ob.freeze(object) concept.

The object being frozen is immutable.Once object is immutable it prevents new properties from being added to it; prevents existing properties from being removed; and prevents existing properties, or their enumerability, configurability, or writability, from being changed, it also prevents the prototype from being changed.  

'use strict'; var course={ name:"Javascript", getCourseName:function(){ } } Object.freeze(course); course.type="scripting"; once execute the above line will get below error  Uncaught TypeError: Cannot add property type, object is not extensible delete course.name; Cannot delete property 'name' of #<Object>

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.

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

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.