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;
