Monday Jul 22, 2013

Tablet support in ADF Faces with 12c

I blogged before about the support for tablet and touch device rendering with ADF Faces. Release 12c brings together features that were introduced in previous patches (such as into a single line of code and even adds more features in this area.

To show you what ADF Faces does automatically for you, I re-recorded the interaction with the houses demo that I showed here, but this time on an iPad.

Things to note:

  • Switching from stretch to flow layout (eliminates scroll bars and allow swipe scroll)
  • Table pagination instead of scroll bars
  • HTML5 rendering for data visualization components instead of Flash
  • Drag and drop and tap and hold support on device
  • Swipe support on objects such as cards in a hierarchy viewer
  • Maximize area support
  • New tablet style UI components (Springboard and list view for example)

 It's a single application that runs on both the regular and mobile browser.

The only thing I needed to do is use an EL for two properties (maximize and dimensionsFrom) on the top containers in the page that will switch the whole page to do flow layout on touch devices. You would usually use this in your page template for the application.

The code I use is:

    <af:document title="index.jsf" id="d1"
                 maximize="#{adfFacesContext.agent.capabilities['touchScreen'] eq 'none' ? true : false}">
        <af:form id="f1">
            <af:panelStretchLayout id="psl1"
                                   dimensionsFrom="#{adfFacesContext.agent.capabilities['touchScreen'] eq 'none'  ?'parent' : 'children'  }">

Here's the video:

Monday Oct 15, 2012

Adaptive Layout for ADF Faces on Tablets

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.