ADF 12.2.1 Responsive UI Improvements

ADF 12.2.1 provides much better responsive UI support comparing to previous version ADF 12.1.3. Previously we were using CSS media queries to hide/show facets. This worked, but it was not great from performance point of view. Same region was duplicated into different facets, both loaded into memory, but only one displayed. ADF 12.2.1 comes with new tag af:matchMediaBehaviour, this tag is using CSS media query to detect screen size, and it updates layout component property. No need anymore to use different facets, we can update properties directly.

This is how works, check in the video. Two blocks implemented with ADF regions are re-arranged into top-down layout, when screen size becomes too narrow to render left-right layout:

Here is the example of panel splitter layout component with af:matchMediaBehavior tags:

This tag contains three properties - propertyName, matchedPropertyValue, mediaQuery. You can define property of layout component to override through propertyName. New value for the property is defined by matchedPropertyValue. CSS media query is set to define condition, when layout component property value should be changed based on the screen size (if screen size is less than defined):

Two ADF regions are displayed right to left, when screen size is wide enough:

Same two regions are re-arranged to display in top to down layout:

Download sample application - ADFResponsiveUIApp.zip.