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.

7 comments:

Unknown 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/

%3C%3Fxml%20version%3D%271.0%27%20encoding%3D%27UTF-8%27%3F%3E%0A%3C!DOCTYPE%20html%3E%0A%3Cf%3Aview%20xmlns%3Af%3D%22http%3A%2F%2Fjava.sun.com%2Fjsf%2Fcore%22%0A%20%20%20%20%20%20%20%20xmlns%3Aaf%3D%22http%3A%2F%2Fxmlns.oracle.com%2Fadf%2Ffaces%2Frich%22%3E%0A%20%20%3Caf%3Adocument%20title%3D%22matchMediaBehavior%20sample%22%20id%3D%22d1%22%3E%0A%20%20%20%20%3Cf%3Afacet%20name%3D%22metaContainer%22%3E%0A%20%20%20%20%20%20%3Cf%3Averbatim%3E%0A%20%20%20%20%20%20%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%2F%3E%0A%20%20%20%20%20%20%3C%2Ff%3Averbatim%3E%0A%20%20%20%20%3C%2Ff%3Afacet%3E%0A%20%20%20%20%3Caf%3Aform%20id%3D%22f1%22%3E%0A%20%20%20%20%20%20%3Caf%3ApanelGroupLayout%20id%3D%22pgl1%22%20layout%3D%22horizontal%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20styleClass%3D%22AFStretchWidth%22%3E%0A%20%20%20%20%20%20%20%20%3Caf%3AmatchMediaBehavior%20propertyName%3D%22layout%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20matchedPropertyValue%3D%22vertical%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mediaQuery%3D%22screen%20and%20(max-width%3A%20600px)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Caf%3AinputText%20label%3D%22Label%201%22%20id%3D%22it1%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Caf%3AinputText%20label%3D%22Label%202%22%20id%3D%22it2%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cf%3Afacet%20name%3D%22separator%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Caf%3Aspacer%20width%3D%2210%22%20height%3D%2210%22%20id%3D%22s1%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Ff%3Afacet%3E%0A%20%20%20%20%20%20%3C%2Faf%3ApanelGroupLayout%3E%0A%20%20%20%20%3C%2Faf%3Aform%3E%0A%20%20%3C%2Faf%3Adocument%3E%0A%3C%2Ff%3Aview%3E%0A%0ADecember%2011%2C%202015%20at%203%3A35%20PM

Mukul Gupta said...

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

Andrej Baranovskij said...

I will check this.

Andrejus

Unknown 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

Andrej Baranovskij said...

I will see if better workaround can be made.

Andrejus

Marco said...

Hi Andrejus,
is it normal that my jDeveloper (12.2.1.1.0 and 12.2.1.2.0 too) refuses to render the page in design window as soon as I add a matchMediaBehavior tag to the page?
The final result on the running application is ok, but jDev design window shows "Loading complete" message in a blank white page in lieu of the page preview.

And, in addition, since I have to develop applications in both 11g and 12c, do you know if any workaround (java script or anything else) exists in order to have a responsive behavior similar to this tag or to masonry layout in 11g (11.1.1.7.0)?

Unknown said...


Hi Andrejus,
matchMediaBehaviour is no doubt a very powerful tool when it comes to make adf application responsive.
But I am getting one issue with this component.
1. I have 2 page fragment with panel group layout at root position.

2. Let say I have used 2 matchMediaBehavior in both fragment which make change in panel group layout orientation property based on resolution.(320x478 and 480x768)

3. When I check single fragment in different resolution in browser it works fine but when I move from one fragment to another in same resolution the changes are not coming in 2nd fragment.

4. Once I refresh in 2nd fragment changes get reflected.

Kindly suggest some way in which matchMediaBehavior component detect correct view port and changes reflect properly without any refresh.

Thanks