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 18.104.22.168 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)
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