ADF: Responsive UIs using af:matchMediaBehavior by Rubén Rodríguez Santiago

Posted: January 10, 2017 in JDeveloper & ADF
Tags: , , , , , ,

image

This is not a new component as it was released with version 12.2.1 back in November but it deserves a mention as it allows us to easily create responsive user interfaces. Although we were able to define media queries in our css and skin files, this component allows us to change component properties according to the screen size.
This component has 3 properties to look at:

  • propertyName: Name of the property we want to change
  • matchedPropertyValue: New value of the property
  • mediaQuery: Here we can set the condition by defining a CSS media query. You can learn more about it here: CSS Media Queries

In this example I am going to use a simple form based on Employees view object from HR Schema.

We are going to change the number of rows of the panelFormLayout to 7 when the screen with is less than 900px and we will change it to 15 if the with is less than 750px. Read the complete article here.

WebLogic Partner Community

For regular information become a member in the WebLogic Partner Community please visit: http://www.oracle.com/partners/goto/wls-emea ( OPN account required). If you need support with your account please contact the Oracle Partner Business Center.

Blog Twitter LinkedIn Forum Wiki

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s