Tuesday, October 27, 2015

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.


Efrain Longart said...

Hi Andrejus,

I'm using 12.2.1 since the very beginning it was released and I love it. We use lot of responsiveness features such as the Masonry Layout and Match Media Behavior.

However, we're facing a big issue using matchMediaBehavior on iOs. It seems doesn't read properly the viewport width. On Android phone works great! I noticed (using Chrome inspect area) that when using iOs it appends parameters to the url, this doesn't happen on Android.

To replicate the issue I'll paste a sample page where you can replicate the problem. Steps to reproduce the issue:

1) Run the page on Chrome
2) Right Click on the page -> Inspect
3) On Device dropdown, select Apple iPhone (whatever version)
4) Reload the page (Wrong panelGroupLayout orientation - Horizontal)
5) Reload the page again (Right panelGroupLayout orientation - Vertical)
6) Reload the page again (Wrong)
7) Reload the page again (Right)

...and so on...

If you have time, please have a look, I'm gonna try to find a solution and if so, I'll let you know! ;-)

NOTE: Post didn't let me to paste the JSF page, so I encoded it. To see it you have to decode it using a page like: http://meyerweb.com/eric/tools/dencoder/


Mukul Gupta said...

Another headache with this tag is,it makes model validations to trigger even on screen resize which is very odd..!!

Andrejus Baranovskis said...

I will check this.


Efrain Longart said...

I found a workaround, unfortunately we loose the "cool" behavior of responsiveness when you resize the window, but do the responsive magic when using mobile devices at least.

You have to use "max-device-width" instead "max-width" on mediaQuery parameter

Andrejus Baranovskis said...

I will see if better workaround can be made.