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