Responsive UI with new Masonry Layout in ADF

Sharing is Caring

What is Responsive UI and Why it is Important-

The 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 the user to use any specific device to view your application. This is a very basic requirement of web development that UI should look good on Mobile, PC, Tablet or any other device

ADF 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 has 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 the 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 the 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 the maximum screen width

Again I resized browser screen and see how it looks 🙂 Now time to develop responsive ADF application with the power of Alta UI

Cheers 🙂 Happy Learning

Related Posts

2 thoughts on “Responsive UI with new Masonry Layout in ADF”

  1. Follow the same procedure.working fine with Desktop Screen When Resizing the Window.Not working Correctly When i open it in mobile browser

  2. I have an issue while accessing fsal. While trying to open it through cmd its showing an error “FRM-92491: Unable to fetch archive file from server.” I have gone through many websites. Still i couldn’t clear the issue. Can you help me on this issue?

Leave a Reply

Your email address will not be published. Required fields are marked *