One of the focus areas for Oracle ADF 12.2.1 was simplifying the creation of responsive UIs, and one of the new components that supports this is the af:masonryLayout component. It allows you to define areas on your page that act as tiles and automatically re-arrange themselves to match the browser's window size.
This layout is very useful for dashboard type of pages where you are showing all sorts of information.
In the video below I show you the very basic way to use this out of the box.
As mentioned in the video there are built in styleClasses in ADF for the size of masonry tiles.
They are in the format of AFMasonryTileSize1x1 with support for 1x2,1x3,2x1,2x2,3x1,3x2
The Masonry Layout can contain any component you want (not just group layout as shown in the page), as long as you give that component the right AFMasonryTileSize style.
You can further control the sizing and coloring of the tiles using styleClasses that you define in a skin file.
For example in the video I used the following style to make sure you can actually see the panelGroupLayout tiles on the page.
.tileStyle{
background-color:gray;
border: black;
border-width: 2px;
} The actual code in the JSF page is:
<af:masonryLayout id="ml1"><af:panelGroupLayout id="pgl1" styleClass="AFMasonryTileSize2x1 tileStyle"/><af:panelGroupLayout id="pgl2" styleClass="AFMasonryTileSize2x1 tileStyle"/><af:panelGroupLayout id="pgl3" styleClass="AFMasonryTileSize1x1 tileStyle"/><af:panelGroupLayout id="pgl4" styleClass="AFMasonryTileSize3x1 tileStyle"/></af:masonryLayout>