Please disable your adblock and script blockers to view this page

Search this blog

Monday 14 December 2015

Responsive UI with new af:matchMediaBehavior in ADF 12.2.1.0


Jdeveloper and ADF 12.2.1 comes with many new features ( see these posts-
New look of dvt:funnelChart for Data Visualization in Jdeveloper 12.2.1.0
New look of dvt:pieChart as donut chart for Data Visualization in Jdeveloper 12.2.1.0  )
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)"
                                           propertyName="layout"/>


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)"
                                               propertyName="rows"/>

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

4 comments :

  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

    ReplyDelete
    Replies
    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

      Ashish

      Delete
  2. Responsive web design aims for fluidity and flexibility. One of the techniques used to achieve this is by automatic image adjusting. responsive website designing

    ReplyDelete
  3. Responsive web design goes for smoothness and adaptability. One of the systems used to accomplish this is via programmed picture changing.Web Design Athens

    ReplyDelete