ADF Faces Responsive Design - 12.1.3 Update

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"

                    xmlns:afc="http://xmlns.oracle.com/adf/faces/rich/component">

    <af:xmlContent>

        <afc:component>

            <afc:description/>

            <afc:display-name>collapseTemplate</afc:display-name>

            <afc:facet>

                <afc:facet-name>right</afc:facet-name>

            </afc:facet>

            <afc:facet>

                <afc:facet-name>drawer</afc:facet-name>

            </afc:facet>

            <afc:facet>

                <afc:facet-name>center</afc:facet-name>

            </afc:facet>

        </afc:component>

    </af:xmlContent>

    <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:panelGroupLayout>

            </af:gridCell>

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

                <af:facetRef facetName="center"/>

            </af:gridCell>

            <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"/>

                    </af:showDetailItem>

                </af:panelDrawer>

                </af:panelGroupLayout>

            </af:gridCell>

        </af:gridRow>

    </af:panelGridLayout>

</af:pageTemplateDef>