Responsive UI with new Masonry Layout in ADF 12.2.1.0

What is Responsive UI and Why it is Important-

User interface or view of website or web application changes as the screen size of device changes
This type of UI is called Responsive and it is important to design responsive UI for your application because each device have different screen dimension and you can not restrict user to use any specific device to view your application . This is very basic requirement of web development that UI should look good on Mobile, PC, Tablet or any other device


ADF 12.2.1.0 comes with many new features, components and layouts
Masonry Layout (af:masonryLayout) is introduced to design responsive UI and believe it is very simple to use

It works like tile controller and arranges tiles of different dimensions to fit in browser maximum width.

That's why it is called Masonry . 

I have created a simple page that have 4 types of chart, 1 listView and 1 table and it looks like this

To use Masonry Layout - Put all components inside this layout and use built in Style Classes (AFMasonryTileSize1x1, AFMasonryTileSize2x2 etc) defined in framework for Masonry layout

Set StyleClass property of each child of masonry layout. Here tileStyle is a class defined in ADF Skin file to change look of tiles (Not necessary if you don't want to change style of tiles)

.tileStyle {
  border: 1px solid darkgreen;
  background-color: #e7e7e7;
}

All Done :) Now check how it works
I have resized my browser window and you can see tiles are arranged according to maximum screen width

Again i resized browser screen and see how it looks :) Now time to develop responsive ADF application with power of Alta UI

Cheers :) Happy Learning