X

Shay Shmeltzer's Oracle Development Tools Tips

Tablet support in ADF Faces with 12c

Shay Shmeltzer
Director of Product Management - Oracle

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 11.1.1.7) 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:


Join the discussion

Comments ( 7 )
  • guest Thursday, October 24, 2013

    Hi Shay,

    We have Webcenter portal application that uses the out of the box Blog taskflow (without any customization).

    While trying to access the application in iPad, whenever i try to create a new blog post, it does not show me the content editing area which is essentially the <rte:editor> component in the jsff.

    I have read about incompatibilities between rte and iPad.

    Do we have any solution for this?

    we are using 11.1.1.6


  • Shay Thursday, October 24, 2013

    guest - I'm not sure what the rte editor is, the ADF Faces rich text editor works fine on iPad - see this:

    http://jdevadf.oracle.com/adf-richclient-demo/faces/components/richTextEditor.jspx


  • guest Wednesday, May 7, 2014

    Hi,

    i am working on the Cloud environment of oracle Fusion, i am having issues

    of scroll bars, i want content should fit to the ipad screen.

    any solution to this?


  • Shay Wednesday, May 7, 2014

    guest - you should be using flow layout instead of stretch layout for your pages if you are targeting iPads.

    In addition you should size your pages to the appropriate width/resolution of the device you are targeting.

    See these seminars:

    https://www.youtube.com/watch?v=4iSmKghGOTU&list=PLEn4egIzXHXVrPOqkaS4akOPNlQrxxzW1

    http://download.oracle.com/otn_hosted_doc/jdeveloper/11gdemos/layouts/layouts.html


  • Michael Sunday, April 21, 2019
    Shay, do you mind sharing how you display the "Support" icon with the superimposed number 2 in red, thanks.

    Sorry for responding to an old post - only just discovered this.

    Thanks.
  • Shay Monday, April 22, 2019
    Michael,
    That's the badge attribute of the components inside the springboard:
    Check out the ADF Faces components demo source to see how it is done there in the panleSpringboard
  • sam Wednesday, June 24, 2020
    Shay, do you mind sharing this simple application !

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