An Oracle blog about Data Visualizations

  • February 11, 2016

Customizing Tile Size in Masonry Layout

Guest Author

Masonry Layout is
a new layout that displays its contents in a grid, like a dashboard. It was introduced in ADF 12.2.1, MAF 2.2, and JET 1.1.2.This article focuses on customizing the masonry layout tile sizes in ADF.

In ADF, masonry layout
can take any ADF Faces component as a child, respectively called a
tile. Tiles can span columns and rows. When the UI is provided, users
can insert, delete, reorder and resize the tiles. When the available
display space changes, the masonry layout rearranges the tiles to fit
into the new display size.

masonry layout work better app

In this blog post and video, Shay Shmeltzer shows how to use masonry layout in JDeveloper 12.2.1.

As mentioned in the video, masonry layout uses built in styleClasses for the size of masonry tiles.

The style class names are in the format of AFMasonryTileSize1x1 with support for the following tile sizes: 1x1, 1x2, 1x3, 2x1, 2x2, 2x3, 3x1, and 3x2.

One of the questions frequently asked by the customers of this layout is how do we change the default size of the tiles?

Answer: The application can customize card sizes per instance of the masonryLayout through skinning. 

The application developer can define card sizes to be different based on additional app-defined style classes.  For example, the application developer could define a different set of card sizes when the "AppSmall" style class is applied to the masonryLayout:

 .AppSmall .AFMasonryTileSize1x1 {
   width: 100px;
   height: 100px;
   margin: 5px;
 .AppSmall .AFMasonryTileSize2x1 {
   width: 210px;
   height: 100px;
   margin: 5px;

 ..and so on

Then, in the jspx page, the application developer would use the following code:

 <af:masonryLayout id="ml1" styleClass="AppSmall">
   <af:panelGroupLayout id="pgl1" styleClass="AFMasonryTileSize1x1">

Please note that the app must define a complete set of AFMasonryTileSize*x* style classes for all column and row spans so that all sizes are consistent within the set for each instance of the masonryLayout.  

For more information, please consult the chapter "Displaying Contents in a Dynamic Grid Using a masonryLayout Component" in the "Organizing Content on Web Pages" section of Fusion Middleware Guide to Developing User Interfaces with Oracle ADF Faces.

We also recommend to look at code samples for Masonry Layout and Masonry Layout Behavior in the hosted ADF Faces 12c Component Demo.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.