Use of Masonry Layout in Oracle ADF

This blog we will see how to use masonary component in oracle ADF.

This af:masonryLayout component was introduced in Oracle ADF 12.2.1. This component has responsive UI. To view this component in desktop, mobile, tablet or any other device automatically the screen will adjust.
This layout is very useful for dashboard type of pages. To implement the same component I followed the below steps.

1. Created a simple page and added 5 panel group layouts
2. All panel grout layouts surrounded by a af:masonryLayout component.

3. Applied the style class AFMasonryTileSize2x1in all the panel group layout (you can apply the style class as per your requirement). 
Note:-The format of AFMasonryTileSize1x1 with support for 1x2,1x3,2x1,2x2,3x1,3x2 only.
4. To decorate the panel group layout created a style class like the below

.tileStyle{ background-color:#999966; border: black; border-width: 2px; }

Now everything done you can run your application and now resize the browser automatically the screen will display as per the screen size. The below is the browser screen formats 

Desktop View:-

Mobile View:-

Thanks..