Oracle Fusion Middleware Tag Reference for Oracle ADF Faces 12c (12.2.1.4.0) E81455-02

<af:matchMediaBehavior>

matchMediaBehavior matchmediabehavior

The matchMediaBehavior tag is a declarative way to define properties for a component for different @media rules. It uses the standard media queries and match them with the rules specified by each of the behavior tag. Once the rule matches, it applies the property defined through the behavior tag on the component and refresh the component to display the intended change. If the media query doesn't match, it fallbacks to a default value. This can be used to create responsive UIs where component aligns itself to the available width and height of the device. This behavior can be added under layout components or components that are capable of realigning on PPR.

Syntax of a media query is:

media_query: [[only | not]? <media_type> [ and <expression> ]*]
| <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print
| projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| aspect-ratio | min-aspect-ratio | max-aspect-ratio
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid

This example will illustrate that the arrangement of bullets changes as the width of screen reduces

<af:outputText value="A panelList that realigns rows and columns to fit into appropriate screen size. The breakpoint is 768px in this case." id="ot2"/> <af:panelList maxColumns="5" id="pl1" shortDesc="Links" rows="1" inlineStyle="text-align:left;"> <af:matchMediaBehavior propertyName="maxColumns" matchedPropertyValue="2" mediaQuery="screen and (max-width: 768px)"/> <af:matchMediaBehavior propertyName="rows" matchedPropertyValue="3" mediaQuery="screen and (max-width: 768px)"/> <af:link id="link_id_1">Item 1</af:link> <af:link id="link_id_2">Item 2</af:link> <af:link id="link_id_3">Item 3</af:link> <af:link id="link_id_4">Item 4</af:link> <af:link id="link_id_5">Item 5</af:link> </af:panelList>

Attributes

Name	Type	Supports EL?	Description

PropertyName String No The property which has to undergo change during a media operation. Usually these properties could be layout, orientation or position. MatchedPropertyValue String Yes The value that should be set in the property name when there is a media match. MediaQuery String Yes The media Query upon which this tag is listening on. If media query is not of proper format, the component containing this behavior will not be rendered. Eg format "screen and (max-width: 1024px)"