Adaptive Layout for ADF Faces on Tablets
- by Shay Shmeltzer
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 11.1.2.3 release. (note if you are still on the 11.1.1.* branch - you'll need to wait for 11.1.1.7 to get the features discussed here).
The two key additions in the 11.1.2.3 version compared to the 11.1.1.6 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
<context-param> <description> 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". </description> <param-name>oracle.adf.view.rich.geometry.DEFAULT_DIMENSIONS</param-name> <param-value>auto</param-value> </context-param>
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:
&lt;span id=&quot;XinhaEditingPostion&quot;&gt;&lt;/span&gt;
