ADF 12.2.1.1 New Feature - Masonry Layout Custom Size Dashboard

ADF 12.2.1.1 and 12.2.1.2 respectively comes with improvement for Masonry Layout component. Now we can define custom sizes for tiles - 9.4.1 How to Use a masonryLayout Component. This helps to define larger tiles and organize dashboard layout in more accurate way.

I have uploaded working demo app on GitHub, you can download it directly from repository or browse through the code - ADFAltaApp. I will be using this app for ADF Bindings webinar - Live Webinar - Master Class - ADF Bindings Explained.

To access Masonry Layout dashboard with custom tile sizes, go to Employees section and open Profile tab. You should see such dashboard layout (one tile 2x4, one tile 4x2 and two tiles 2x2). All four tiles are defined with custom size:

Masonry Layout is responsive out of the box. On narrow screen tiles will be re-arranged automatically:

Custom tiles for Masonry Layout are defined through CSS. You should create custom style class and set it for Masonry Layout component. I have define custom style class - RedSamuraiDashboard:

Each tile group with custom size must be defined in CSS separately. Width and hight should be proportional. If you define 250px for size 2, this means size for 4 must be 500px:

Masonry Layout tiles are assigned with style class which defines size:

You could have ADF region inside tile, it renders perfectly well:

ADF 12.2.1 Responsive Dashboard with Masonry Layout

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:

PanelGridLayout (JDev 11.1.2.3.0 ) to Simplify Oracle Forms Modernization to ADF

I'm usually bored to death to work with UI layout or CSS. But not today, when we have new af:panelGridLayout ADF Faces component available with JDev 11.1.2.3.0 (it was already available with 11.1.2.2.0). Read more about it from Duncan Mills blog - PanelGridLayout - A Layout Revolution. This will change how we build layout in ADF, but also it will change how we build form blocks layout. I believe it will substitute af:panelFormLayout component, in more complex use cases. This is especially true for Oracle Forms modernization - usually Forms screens are pretty complex and stuffed with af:inputText boxes. Up till now it was hard to adapt af:panelFormLayout to create proper grid UI - this will change with af:panelGridLayout component.

Here is simplified example of such layout, typical to Oracle Forms systems (download sample application - PanelGridLayoutSampleApp.zip). This layout is stretchable:

Input text boxes are rendered using grid structure and spread across different areas of the page. We could achieve similar layout structure with af:panelFormLayout, but this would mean to add lots of af:spacer components into empty areas - not a real grid.

One more reason to move to JDev 11.1.2.3.0 - Panel Grid Layout available directly from Component Palette:

When you drag and drop it to the page - JDev offers configuration wizard, this is very helpful - is much easier to understand different layout properties and apply them correctly:

Here you can see how it looks from the source structure - rows and cells: