Shay Shmeltzer's Oracle Development Tools Tips

Adaptive Layout for ADF Faces on Tablets

Shay Shmeltzer
Director of Product Management - Oracle

In the 11.1.16 version of Oracle ADF we started adding specific features to the ADF Faces components so they'll work better on iPad tablets.

In this entry I'm going to highlight some new capabilities that we have added to the release. (note if you are still on the 11.1.1.* branch - you'll need to wait for to get the features discussed here).

The two key additions in the version compared to the features for iPad support include: pagination for tables and adaptive flow layout.

The pagination for table is self explanatory, basically since iPad don't support scroll bars, we automatically switch the table component to render with a pagination toolbar that allow you to scroll set of records or directly jump to a specific set. See the image below.

The adaptive flow layout takes a bit more explanation.

On regular desktops the UI that you usually build for ADF Faces screens is going to use stretch layout - meaning that it stretches to fill the whole area of the browser window. If you resize the browser windoe, the ADF Faces page resizes with it. If your browser window is too small, scroll bars will appear to allow you to scroll to areas that are "hidden".

However on an iPad, this is probably not the type of layout you want - you would rather have a flow layout that eliminates scroll bars and instead allows you to scroll down the page. Basically your want the page to be sized based on its content, rather then based on the browser window size.

In ADF Faces terminology this can be done with the dimensionsFrom property set to "children".

And here comes the tricky part, since in the past(and also today) when you create an ADF Faces page and add a stretchable component to it, the dimensionsFrom property is set to parent by default. This will be true to other layout components you'll add as well.

At this point you might be wondering "Does this mean I'll need to go to each of the layout components in my page and modify the dimensionsFrom property value to be children?"

ADF Faces to the rescue...

To eliminate the need to do this tedious manual changes, we introduced a new web.xml parameter "oracle.adf.view.rich.geometry.DEFAULT_DIMENSIONS"

You'll basically add the following to your web.xml

      This parameter controls the default value for component geometry on the page.
      Supported values are:
        legacy - component attributes use the default values as specified for the attributes
                 in the tag documentation (default value)
        auto   - component attributes use the correct default value given the value of their
                 parent component. For example, with this setting, the panelStretchLayout
                 will use "auto" as the default value for its "dimensionsFrom" attribute
                 instead of "parent".

Once you set this parameter, you only need to set the dimensionsFrom attribute for the top level layout component on your page, and the rest of the components will adjust accordingly.

One trick that you can use, and that is used in the demo below, is to have the dimensionsFrom property depend on the type of client that access your application. This way you can switch between stretch or flow layout based on the device accessing your application.

For example I use the following in my page:

<af:panelStretchLayout topHeight="70px" startWidth="0px" endWidth="0px"
                                       dimensionsFrom="#{adfFacesContext.agent.capabilities['touchScreen'] eq 'none'  ? 'parent' : 'children' }">

Which results in a flow layout for iPads and a stretch layout for regular browsers.

Check out the result in the below demo:

For more on Adaptive layout with ADF Faces see: Andrew's entry about conditional layout, Maiko entry with a sample.

Join the discussion

Comments ( 5 )
  • guest Tuesday, October 23, 2012

    Shay, Can we make table pagination feature available in desktop? This is really expected feature for many customers.

  • Shay Tuesday, October 23, 2012

    Guest, We are planning to add a property to the table that will allow pagination display on desktops in a future patch/release

  • Mark Monday, April 29, 2013

    I have been using Faces for a mobile project targeting ipads and smart phones. I was disappointed that skins didn't support media query. What would you suggest for responsive charting? I want to serve 400px wide graphs for cell phone and 800px wide for tablets. I was testing a conditional block with browser agent sniffing but I am trying to find out the best way to serve images/graphs without CSS.

  • Shay Monday, April 29, 2013

    Mark - are you sure you can use this in the skin definition?

    See the section - Script Partitioning Support for Tablets:


    Or you can use the agent in an EL in the width property of the graph component.

  • guest Tuesday, April 30, 2013

    Thanks Shay. It looks like imageFormat="HTML5" will be useful in the future. EL in the width is helpful I can use something like: ${fn:contains(header['user-agent'], 'iPad')}. The issue I am finding is it is difficult to detect specific types of WebKit devices. A lot of the Android tablets only have WebKit in the user agent string but no indication of resolution. So if you have code based on a condition, say, greater than 600px width, to use specific tablet code this is difficult on server side. Folks at stackoverflow suggested setting a resolution cookie in JavaScript that writes screen width and the server can later read it. This is tricky though on the first time a page is run since resolution is unknown.

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