ADF 12.2.1 is a breakthrough in responsive UI. Never before it was so easy to implement good looking and high performance ADF UI. Masonry layout component allows to develop responsive dashboard made from separate tiles. Tiles can be reordered, resized and even removed. Tiles layout is dynamically constructed based on available screen size.
You should see how it works, check video based on sample application - DashboardApp.zip. Tiles are reordered as I change screen size, and even more - I can reorder them by myself, just with drag and drop:
This is default dashboard layout with four tiles on wide screen:
As resize screen to be more narrow, tiles are recorded to occupy available space:
With even more narrow screen, tiles are reordered to occupy only one column:
User can scroll up/down on narrow screen to see all tiles:
I can move and reorder tiles manually with drag and drop. In this example I reordered tile with employee information to be below employees chart:
If screen width is resized to be even more narrow, ADF 12.2.1 responsive UI template (check my previous post about responsive UI improvements in ADF 12.2.1 - ADF 12.2.1 Responsive UI Improvements) will reorder facets and there will be only one column UI:
Implementation is simple, you should use new ADF Faces component - Masonry Layout. Add any number of UI layout components (tiles) inside. Manual reordering is handled with regular ADF Faces drag and drop functionality:
Each tile must be assigned with masonry layout style class, this will control tile dimensions:
You can watch OTN ArchBeat video, where I'm talking about ADF 12.2.1 and responsive UI:
You should see how it works, check video based on sample application - DashboardApp.zip. Tiles are reordered as I change screen size, and even more - I can reorder them by myself, just with drag and drop:
This is default dashboard layout with four tiles on wide screen:
As resize screen to be more narrow, tiles are recorded to occupy available space:
With even more narrow screen, tiles are reordered to occupy only one column:
User can scroll up/down on narrow screen to see all tiles:
I can move and reorder tiles manually with drag and drop. In this example I reordered tile with employee information to be below employees chart:
If screen width is resized to be even more narrow, ADF 12.2.1 responsive UI template (check my previous post about responsive UI improvements in ADF 12.2.1 - ADF 12.2.1 Responsive UI Improvements) will reorder facets and there will be only one column UI:
Implementation is simple, you should use new ADF Faces component - Masonry Layout. Add any number of UI layout components (tiles) inside. Manual reordering is handled with regular ADF Faces drag and drop functionality:
Each tile must be assigned with masonry layout style class, this will control tile dimensions:
You can watch OTN ArchBeat video, where I'm talking about ADF 12.2.1 and responsive UI:
1 comment:
hi, i added a task flow in the panelgrouplayout and when i try to reorder the tile and then click on submit button, the layout will revert back to original layout. It doesn't save the manual ordering. How do i solve this?
Post a Comment