Responsive UI with new af:matchMediaBehavior in ADF

Sharing is Caring

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 are introduced to support responsive UI design

af:matchMediaBehavior allows the developer to control the properties of components according to screen size. It uses CSS media queries to detect screen size and changes the value of the specified property of a 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 a single column

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

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


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

Cheers 🙂 Happy Learning

Related Posts

0 thoughts on “Responsive UI with new af:matchMediaBehavior in ADF”

  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

  2. 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


Leave a Reply

Your email address will not be published. Required fields are marked *