Follow by Email

Monday, 14 December 2015

Responsive UI with new af:matchMediaBehavior in ADF

Jdeveloper and ADF 12.2.1 comes with many new features ( see these posts-
New look of dvt:funnelChart for Data Visualization in Jdeveloper
New look of dvt:pieChart as donut chart for Data Visualization in Jdeveloper  )
and supports responsive UI design.
Masonry Layout and MatchMediaBehaivor tag is introduced to support responsive UI design

af:matchMediaBehavior allows developer to control properties of components according to screen size. It uses CSS media queries to detect screen size and changes value of specified property of component

This tag has 3 properties

PropertyName- component property that you want to change
MatchedPropertyValue- value for that property
MediaQuery- to detect screen height, width, resolution etc

I have a table and form (2 rows layout) in my page surrounded by a horizontal panel group layout
It looks like this

Added two media tags in this structure

First one for panel group layout - if screen width is less than 700px then it's layout should be changed to vertical

<af:matchMediaBehavior matchedPropertyValue="vertical" mediaQuery="screen and (max-width: 700px)"

Second for panel form layout- if screen width is less than 900px then no. of rows should be changed to 4, means all input text will be in single column

<af:matchMediaBehavior matchedPropertyValue="4" mediaQuery="screen and (max-width: 900px)"

On running this application when i resized browser window and you can see all input components are arranged in single column as there is no more space (Second media behavior )

again resized browser window to be more narrow and panel group layout is vertical now (First media behavior)

Cheers :) Happy Learning


  1. Hi Ashish,

    Thanks for your post.
    I tried using this tag to change the layouts or other attributes. It is working fine.
    But it is not working for 'visible' attribute.
    Component is visible once the media query is executed. But again it is not disappearing when the window size is changed to normal

    1. Gokul

      There are lots of bug reported about matchMediaBehavior, you are right it is not working for visible property and I am not sure why it is like this , may be this tag doesn't support visible proeprty
      you should post this question in OTN Forum for more clarity