Responsive Design for your ADF Faces Web Applications

Note - an update to the technique shown here for those who are using 12.1.3 is documented in this blog entry

Responsive web applications are a common pattern for designing web pages that adjust their UI based on the device that access them. With the increase in the number of ADF applications that are being accessed from mobile phones and tablet we are getting more and more questions around this topic.

Steven Davelaar wrote a comprehensive article covering key concepts in this area that you can find here. The article focuses on what I would refer to as server adaptive application, where the server adapts the UI it generates based on the device that is accessing the server.

However there is one more technique that is not covered in that article and can be used with Oracle ADF - it is CSS manipulation on the client that can achieve responsive design. I'll cover this technique in this blog entry. The main advantage of this technique is that the UI manipulation does not require the server to send over a new UI when a change is needed. This for example allows your page to change immediately when you change the orientation of your device.

(By the way this example was developed for one of the seminars in the upcoming Oracle ADF OTN Virtual Developer Day).

In the demo that you'll see below you'll see a single page that changes the way it is displayed based on the orientation of the device. Here is the page with the tablet in landscape and portrait:

To achieve this I'm using a CSS media query in my page template that changes the display property of a couple of style classes that are used in my page.

The media query has this format:

@media screen and (max-width:700px) {
            .narrow {
                display: inline;
            .wide {
                display: none;
            .adjustFont {
                font-size: small;
            .icon-home {
                font-size: 24px;

This changes the properties of the same styleClasses that are defined in my application's skin.

Here is a quick demo video that shows you the full application and explains how it works.

Update - since running this demo I found out that in 12.1.2 you get better results if everything relating to the style is defined just in your template and not spread in your skin file too (as shown in the video)

So For those looking to replicate this, here are the basic files:


<?xml version='1.0' encoding='UTF-8'?>
<af:pageTemplateDef xmlns:af="" var="attrs" definition="private"
            <afc:description>A template that will work on phones and desktop</afc:description>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <af:resource type="css">

.wide {
    display: inline;

.narrow {
    display: none;

.adjustFont {
    font-size: large;
.icon-home {
        font-family: 'UIShellUGH';
    -webkit-font-smoothing: antialiased;
        font-size: 36px;
        color: #ffa000;
@media screen and (max-width:700px) {
            .narrow {
                display: inline;
            .wide {
                display: none;
            .adjustFont {
                font-size: small;
            .icon-home {
                font-size: 24px;

@font-face {
            font-family: 'UIShellUGH';
            src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AA..removed code here...AzV6b1g==)format('truetype');
            font-weight: normal;
            font-style: normal;

    <af:panelGroupLayout id="pt_pgl4" layout="vertical" styleClass="sizeStyle">
        <af:panelGridLayout id="pt_pgl1">
            <af:gridRow marginTop="5px" height="40px" id="pt_gr1">
                <af:gridCell marginStart="5px" width="100%" marginEnd="5px" id="pt_gc1">
                    <af:panelGroupLayout id="pt_pgl3" halign="center" layout="horizontal">
                        <af:outputText value="h" id="ot2" styleClass="icon-home"/>
                        <af:outputText value="HR System" id="ot3" styleClass="adjustFont"/>
            <af:gridRow marginTop="5px" height="auto" id="pt_gr2">
                <af:gridCell marginStart="5px" width="100%" marginEnd="5px" id="pt_gc2" halign="stretch">
                    <af:panelGroupLayout id="pt_pgl2" layout="scroll">
                        <af:facetRef facetName="main"/>
            <af:gridRow marginTop="5px" height="20px" marginBottom="5px" id="pt_gr3">
                <af:gridCell marginStart="5px" width="100%" marginEnd="5px" id="pt_gc3">
                    <af:panelGroupLayout id="pt_pgl5" layout="vertical" halign="center">
                        <af:separator id="pt_s1"/>
                        <af:outputText value="Copyright Oracle Corp. 2013" id="pt_ot1" styleClass="adjustFont"/>

Example from the page:

                        <af:gridRow id="gr3">
                            <af:gridCell id="gc7" columnSpan="2">
                                <af:panelGroupLayout id="pgl8" styleClass="narrow">
                                    <af:link text="Menu" id="l1">
                                        <af:showPopupBehavior triggerType="action" popupId="p1" align="afterEnd"/>
                                <af:panelGroupLayout id="pgl7" styleClass="wide">
                                    <af:navigationPane id="np1" hint="buttons">
                                        <af:commandNavigationItem text="Departments" id="cni1"/>
                                        <af:commandNavigationItem text="Employees" id="cni2"/>
                                        <af:commandNavigationItem text="Salaries" id="cni3"/>
                                        <af:commandNavigationItem text="Jobs" id="cni4"/>
                                        <af:commandNavigationItem text="Services" id="cni5"/>
                                        <af:commandNavigationItem text="Support" id="cni6"/>
                                        <af:commandNavigationItem text="Help" id="cni7"/>

I placed a workspace with this sample here. Run the sample.jsf page in the viewController project.


thanks for the video. Is there a reason, why the css is split into a skin and into a css resource? Any thoughts about which definition (portrait or landscape) should get into the skin?
As far as I know, some css at-rules are not supported by the skinning framework. Was that the reason?

Posted by Angelo Hannes on November 04, 2013 at 01:41 AM PST #

Angelo - I just discovered that at least in the current 12.1.2 version the better approach is to have everything including both the original style and the @media and @font-face be defined in the page template and not in the skin.
Adding those to the skin file is something we are planning for future versions.

Posted by Shay on November 04, 2013 at 01:38 PM PST #

Hello Shay,

in my personal opinion that is not a good approach for responsive design. Your approach delivers the content twice. One part is hidden, but it is there. A mobile device must download and handle this overload. Media Queries should be used to rearrange the content and not just hiding it. What about different DPI and displays?


Posted by Simon on November 22, 2013 at 02:13 AM PST #

Hello Shay,

First of all, thanks for this post, it's very helpful. I did encounter a problem though. I am using JDeveloper and I added a CSS resource for my file, just like you did, with the same @media syntax. The changes invoked by this structure get applied if I have "DISABLE_CONTENT_COMPRESSION" set to true in the web.xml file, but if that parameter is set to false nothing happens. I know that disabled_content_compression should be set to false when delivering the application because otherwise it affects performance. Any thoughts on how to deal with this?


Posted by Toma Popescu on November 25, 2013 at 12:11 AM PST #

In upcoming versions, when Media queries will be supported in the skin itself, you won't need to change the DISABLE_CONTENT_COMPRESSION property.

Posted by Shay on November 26, 2013 at 01:14 PM PST #

Hello Shay,

Thanks for your answer. Do those upcoming versions you talk about include


Posted by Tom on November 30, 2013 at 09:41 AM PST #

I'm working from ADF - in this version the Media Query doesn't seem to work at all. jDeveloper throws syntax errors when using keywords such as "and". The IDE states that the '{' is expected. Now this happens even though DISABLE_CONTENT_COMPRESSION is set to "true". I wonder if you could speak to this at all.


Posted by Shawn on January 14, 2014 at 12:32 PM PST #

Hi Sir,

Is there any option to implement the same feature using JSF1.2..?

Awaiting for your answer.

Thanks in advance,

Posted by Shivaraj on March 20, 2014 at 04:13 AM PDT #

I am not able to run sample .jsf.I am using version of Jdev.
I have opened the Responsive project.Trying to run the sample.jsf, not getting any "run" option.
If we select sample.jsf as a target on project label,no action for the same.

Posted by guest on April 10, 2014 at 12:35 AM PDT #

guest - this demo was built with JDeveloper 12c - you won't be able to just pick up the project and run it in older JDevs.

Posted by Shay on April 16, 2014 at 02:10 PM PDT #

can we use this approach in jdev

Posted by guest on June 26, 2014 at 09:57 AM PDT #

Shay, the way you mentioned in not exactly adaptive design compare to responsive design?

Posted by vinay on July 02, 2014 at 11:58 AM PDT #

Vinay - Take a look at the distinction between responsive and adaptive as defined here:

Based on this - my solution which uses media queries and changes the page at runtime is responsive.
I didn't build different pages for different resolutions.

Posted by Shay on July 03, 2014 at 04:41 PM PDT #

Hi Shay,

Is there any way to achieve responsive design in ADF without creating the components twice(for hide and show) ? without duplication ?


Posted by guest on November 27, 2014 at 09:09 PM PST #

Manjunath - Check out the link I provide in the blog to Steven D's solution that uses a different approach that doesn't require the component to be created twice.

Posted by Shay on December 02, 2014 at 10:37 AM PST #

Hi shay, we want to implement media query in jdeveloper query working in page level,we need another to implement.can you please tell me ,if adding any extensions or any other way to implement in r1

Posted by guest on December 17, 2014 at 04:35 AM PST #

guest - media query is not supported at the skin level in - one more reason to upgrade to the latest 12.1.3 which does support it.

Posted by Shay on December 17, 2014 at 03:01 PM PST #

Hey guys, first of all, thats not responsive design, its show and hide design. There are no fluid grids. Imagine we have a commersial app that would be used by a variaty of end users. Second of all, If we need to support 99% of the devices using this method, we will need a gigantic mega chunk of code to write for each page only for responsivness of the page. Not a good idea! Hope there is a better solution to the problem.

Posted by guest on March 07, 2016 at 07:56 AM PST #

guest - note that at the top of the entry I point to an updated entry, that in turn points to an even newer entry - all of those show different approaches to responsive UI that have been built into newer versions of JDeveloper.
I would suggest you look into Masonry Layout and the Match Media Behavior tags in 12.2.1

Posted by Shay Shmeltzer on March 07, 2016 at 08:54 AM PST #

Hi Shay Shmeltzer,

We have achieved responsive design on Oracle ADF 11g.

Application is working fine.

With that experience i have written the blog.

Posted by guest on March 25, 2016 at 03:03 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed

I'm a Director of Product Management for Oracle's Cloud Development Tools and Frameworks.
Follow me:

« July 2016