ADF Faces Responsive Design - 12.1.3 Update
Join the DZone community and get the full member experience.
Join For FreeA 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>
Published at DZone with permission of Shay Shmeltzer, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments