X

Shay Shmeltzer's Oracle Development Tools Tips

Responsive UI in Oracle ADF 12.2.1 with the MatchMediaBehavior Tag

Shay Shmeltzer
Director of Product Management - Oracle

Another very powerful addition to the responsive capabilities of ADF Faces in version 12.2.1 is the new af:matchMediaBehavior tag. It allows you to control almost every bit of your UI and change properties in response to changes in the viewport size.

Check out what it can do in this video:

Note that in the mediaQuery you can use other type of CSS media queries

The code for the page in the demo is

       <af:panelSplitter id="ps1" orientation="horizontal" splitterPosition="201">
                <f:facet name="first">
                    <af:panelFormLayout id="pfl1" labelAlignment="start">
                        <af:matchMediaBehavior matchedPropertyValue="top" propertyName="labelAlignment"
                                               mediaQuery="screen and (max-width: 768px)"/>
                        <af:inputText label="Label 1" id="it1"/>
                        <af:inputText label="Label 2" id="it2"/>
                        <f:facet name="footer"/>
                    </af:panelFormLayout>
                </f:facet>
                <f:facet name="second">
                    <af:panelFormLayout id="pfl2" labelAlignment="start" rows="2">
                        <af:matchMediaBehavior matchedPropertyValue="top" propertyName="labelAlignment"
                                               mediaQuery="screen and (max-width: 900px)"/>
                        <af:matchMediaBehavior matchedPropertyValue="4" propertyName="rows"
                                               mediaQuery="screen and (max-width: 800px)"/>
                        <af:inputText label="Label 1" id="it3"/>
                        <af:inputText label="Label 2" id="it4"/>
                        <f:facet name="footer"/>
                        <af:inputListOfValues label="Label 1" popupTitle="Search and Result Dialog" id="ilov1"/>
                        <af:inputFile label="Label 1" id="if1"/>
                    </af:panelFormLayout>
                </f:facet>
                <af:matchMediaBehavior matchedPropertyValue="vertical" propertyName="orientation"
                                       mediaQuery="screen and (max-width: 768px)"/>
                <af:matchMediaBehavior matchedPropertyValue="100" propertyName="splitterPosition"
                                       mediaQuery="screen and (max-width: 768px)"/>
            </af:panelSplitter>
     

Join the discussion

Comments ( 11 )
  • Giovanni Tuesday, October 27, 2015

    In internet explorer 11

    doesn't work, can i fix it ?


  • Shay Thursday, October 29, 2015
  • Kim Gabrielsen Wednesday, November 11, 2015

    I don't quite understand the difference between the new masonry layout and the af:matchMediaBehavior. can you please explain that....don't they basically do the same?


  • Shay Wednesday, November 11, 2015

    Kim - Masonry layout automatically changes the location of the components in it, it only deals with overall layout. Match media component gives you much more granular control over various aspects of your page at the component attribute level. So you can for example change the visible property of a field based on screen size.


  • Kim Gabrielsen Wednesday, November 11, 2015

    Hi Shay,

    thank you for that explanation. I will read the documentation to dig deeper.


  • Luis Wednesday, November 25, 2015

    Does the <af:matchMediaBehavior> only works on Layout components? (panelspliters, panelforms, ect.)

    Witch components are supported for the <af:matchMediaBehavior>?

    Im using the following to hide a input text but does not work on re-size the browser.

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

    propertyName="visible"/>


  • Shay Wednesday, November 25, 2015

    Luis, the tag is not restricted to layout components.

    It works for me on af:inputText as well.

    I would suggest working through the OTN forum or Oracle Support to figure out your issue.


  • guest Friday, December 18, 2015

    Shay, I am trying to build a dynamic page i.e. using af:iterator... where one of the child of af:iterator is af:panelformLayout and inside panelformlayout I am using af:matchmediabehaviour, so at runtime based on query n number of panelformlayouts are created with n fields. But if I use af:matchmediabehavior here, it has no effect, I guess because its designed only for design time and not for runtime! Is there a handle in javascript, which I can use as a clientlistener for window resize evt and then use that to set properties of layout in js?

    --Mukul


  • Edi Wednesday, March 16, 2016

    I've been having the same problem since I'm trying to make a gridcell rendered false with a matchMediaBehavior but having no luck with it.


  • Pandu Thursday, October 6, 2016

    Thanks Shay for sharing such a valuable information.

    But I believe we should have the below piece as a child element under the <af:document>. This will help the page to render correctly, along with delivered components from ADF

    <f:facet name="metaContainer">

    <f:verbatim>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    </f:verbatim>

    </f:facet>


  • Navin Friday, March 10, 2017

    Hi Shay,

    I have a TF and I have added 2 JSFF in that. One of it is my default activity and on some button click I am navigating to second JSFF.

    I have used this af:matchMediaBehavior tags and My first page is completely responsive, however when I move to second page , it is not responsive and then If i refresh the URL it becomes responsive.

    I am not able to figure out what could be the issue. Can you please suggest something.

    Thanks.

    Navin


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.