Shay Shmeltzer's Oracle Development Tools Tips

ADF Faces Responsive Design - 12.1.3 Update

Shay Shmeltzer
Director of Product Management - Oracle

Update Nov2016 - if you are using ADF 12.2.1 there are new features that make responsive design with JDeveloper even simpler. See Responsive UI in Oracle ADF 12.2.1 with the MatchMediaBehavior Tag and Introducing the Masonry Layout in Oracle ADF 12.2.1

I while back I blogged about a technique for doing responsive design with JDeveloper 12.1.2 using media queries and css, but it is time for a small update for those who are using 12.1.3 - since there are some new capabilities that you can leverage.  (I would still recommend watching the other video as it shows some other things you can do with the same technique like changing the size of icons/fonts).

The major change in 12.1.3 is that you can now include your media query and style classes inside the skin definition. When you combine this with page templates you get very clean pages that don't need to include code for responsiveness.

See the demo below for how it works.

One note - in the houses demo I actually used a region that is replicated on the left side and in the panel drawer. This way you only need to code that part once.

Here is the code for the skin's css file:

.wide {

    display: inline;


.narrow {

    display: none;


@media screen and (max-width:950px) {

            .narrow {

                display: inline;


            .wide {

                display: none;



And here is the code for the page template:

 <?xml version='1.0' encoding='UTF-8'?>

<af:pageTemplateDef xmlns:af="http://xmlns.oracle.com/adf/faces/rich" var="attrs" definition="private"

















    <af:panelGridLayout id="pt_pgl1">

        <af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="pt_gr1">

            <af:gridCell marginStart="5px" width="20%" id="pt_gc1" >

            <af:panelGroupLayout layout="vertical" styleClass="wide">

                <af:facetRef facetName="right"/>



            <af:gridCell marginStart="5px" marginEnd="5px" width="80%" id="pt_gc2">

                <af:facetRef facetName="center"/>


            <af:gridCell  halign="stretch" width="auto" id="pt_gc3" >

            <af:panelGroupLayout layout="vertical" styleClass="narrow">

                <af:panelDrawer  id="pt_pd1" height="500px">

                    <af:showDetailItem id="dr1" shortDesc="Drawer 1">

                        <af:facetRef facetName="drawer"/>








As before you should also be setting the web.xml contextual parameter org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION  =  true

Join the discussion

Comments ( 3 )
  • Sherif Wednesday, September 17, 2014

    hi Shay,

    thanks for your great presentations at the Kscoup14 in seattle, was really helpful.

    i have a question...

    i am using the new jdeveloper 12.1.3 and the responsive design works perfect for me only in the integrated weblogic server.

    when i deploy it to the weblogic server 12 it doesn't work..

    i wonder what to do...

    is it a jdeveloper problem or is it the weblogic server problem...

    let me know what do you think.



  • guest Tuesday, December 23, 2014

    Can you please provide information about how to make a particular component responsive example a pie chart.

  • Shay Tuesday, December 30, 2014

    guest - I'm not sure what you mean by responsive component - how would it change?

    In general in ADF Faces component size can be controlled by their containing layout component so this will control the pie chart size for example.

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