Creating Web Applications for Touch Devices Using ADF Faces

D Creating Web Applications for Touch Devices Using ADF Faces

This appendix describes how to implement web-based applications for touch devices.

This appendix includes the following sections:

About Creating Web Applications for Touch Devices Using ADF Faces

Oracle JDeveloper enables developers to rapidly develop applications that run on multiple touch devices. With the help of the ADF Faces framework, application developers can quickly develop applications for multiple mobile platforms such as iOS, Android, and Windows.

The ADF Faces framework is optimized to run in mobile browsers such as Safari, Chrome, and Microsoft Edge. The framework recognizes when a mobile browser on a touch device is requesting a page, and then delivers only the JavaScript and peer code applicable to a mobile device. However, while a standard ADF Faces web application will run in mobile browsers, because the user interaction is different and because screen size is limited, when your application needs to run in a mobile browser, you should create touch device-specific versions of the pages.

This appendix provides information on how ADF Faces works in mobile browsers on touch devices, along with best practices for implementing web pages specifically for touch devices.

How ADF Faces Behaves in Mobile Browsers on Touch Devices

Oracle ADF provides specific features to enable web applications developed with ADF Faces to run on touch-based devices. These capabilities include support for touch gesture interactions, adaptive rendering to match mobile browsers capabilities, and certification on common mobile browsers.

In touch devices, users touch the screen instead of clicking the mouse. ADF faces now supports touch events too like touchstart, touchend, touchmove, touchcancel. Advanced drag and drop, tap and hold gestures are also supported. Very basic touch gestures like tap are mapped to mouse events but advanced support is provided for iOS and Android platforms. ADF Faces provides peers to handle the conversion in ADF Faces components. To better handle the conversion differences between touch devices and desktop devices, for each component that needs one, ADF Faces provides both a touch device-specific peer and a desktop-specific peer (for information about peers, see About Using ADF Faces Architecture).

These peers allow the component to handle events specific to the device. For example, the desktop peer handles the mouse over and mouse out events, while the touch device peer handles the touch start and touch end events. The base peer handles all common interactions. This separation provides optimized processing on both devices.

The touch device peers provide the logic to simulate the interaction on a desktop using touch-specific gestures. Table D-1 shows how desktop gestures are mapped to touch device gestures.

Table D-1 Supported Mobile Browser User Gestures

Mouse Interaction	Touch Gesture	Visual State	Example
Click	Tap	Mouse down	Execute a button
Select	Tap	Selected	Select a table row
Multi select	Tap selects one, tap selects another, tapping a selected object deselects it	Selected	Select multiple graph bars
Drag and drop in a simple interface	Finger down + drag	Mouse down	Drag a slider thumb or a splitter
Drag and drop for use cases requiring both drag and drop as well as data tips	Finger down + short hold + drag	Mouse down	Move a task bar in a Gantt chart
Hover to show data tip	Finger down + hold	Hover (mouseover)	Show graph data tip
Hover to show popup	Finger down + hold	Hover (mouseover)	Show a popup from a calendar
Click to dismiss a popup	Tap outside of the popup	Mouse click	Dismiss a popup by clicking outside of it
Line data cursor on graph	Finger down + hold	Hover	Trace along the x-axis of a graph and at the intersection of the y-axis, the data value is displayed in a tip.
Right-click to launch a context menu	Finger down + hold or finger down + hold + finger up (when gesture conflict exists with another finger down + hold gesture). Finger down + hold + finger up over an area for Thematic Map.		Show graph or calendar activity context menu Context menu on finger up examples: Graph: finger down + hold = data tip; finger up = context menu. Graph (bubble): finger down + hold + move = drag and drop; finger up = context menu. Gantt (task bar): finger down + hold = data tip; finger down + hold + move = drag and drop; finger up = context menu
Pan	One finger swipe (when no conflict with other gestures). Otherwise, two finger swipe	Enabled	Pan map
Zoom in/out	Double tap (browser zoom). When in maximized state, pinch in/out can perform zoom. For Thematic Map, only pinch in/out.	Enabled	Zoom browser screen Zoom graph or map
Double-click Thematic Map component	Double tap	Drilled	Drills into an area in an area data layer.
Hover to show data tip or popup in Thematic Map	Finger down + hold	Hover (mouse-over)	Show area or marker data tip or launch popup.
Double-click to set anchor in the Hierarchy Viewer component	Double tap	When the `setAnchorListener` has a value, causes the node to be the root of the tree. When the value is not set, double tap causes a browser zoom.	Double tap a node within a hierarchy causes it to become the root node.
Click the isolate icon on the Hierarchy Viewer component	Tap node, then tap isolate icon	Panel card is isolated	Tap the top of the card and then the isolate icon to view only that card and any direct reports.
Click the collapse icon on the Hierarchy Viewer component	Swipe up on card	Collapsed panel card	Collapse a panel card
Click the expand icon on the Hierarchy Viewer component	Swipe down on card	Expanded panel card	Expand a collapsed panel card.
Hover to show fly out buttons on Hierarchy Viewer	Tap card	Fly out buttons display	Tap a card to display the fly out buttons
Click right or left arrow buttons on Hierarchy Viewer component	Swipe left or right on card	Switch panel cards	Swipe left to view address, or swipe right to view content.
Click navigation buttons to laterally traverse the hierarchy	Swipe left or right on the lateral navigation line, or tap the arrow, or touch and short hold + finger up to display the navigation buttons	Traverse the hierarchy	View more descendants of the root node.
na	Single tap the Maximize icon	Maximizes the component
na	Double-tap the Maximize icon or double-tab the hierarchy viewer background	Maximizes the component and zooms to fit
Use circle, square, or polygon tool on a map to drag and select a region	Finger down, draw shape	Selected	Use finger to select an area on a map
Use measurement tool on a map to click start point and end point	Tap measurement tool, finger down, draw line	Line drawn and calculated distance displayed	Use finger to select measurement tool, then tap to select point A and draw line to point B.
Use area tool on a map to click start point and end point	Tap area tool, finger down, draw line	Line drawn and calculated area displayed	Use finger to select area tool, then tap to select point A and draw line to point B, and so on.

For further optimization, ADF Faces partitions JavaScript, so that the touch device JavaScript is separated from the desktop JavaScript. Only the needed JavaScript is downloaded when a page is rendered. Also, when a touch device is detected, CSS content specific to touch devices is sent to the page. For example, on a touch device, checkboxes are displayed for items in the shuttle components, so that the user can easily select them. On a desktop device, the checkboxes are not displayed.

Using device-specific peers, JavaScript, and CSS allows components to function differently on desktop and touch devices. Table D-2 shows those differences.

Table D-2 Component Differences in Mobile Browsers

Component	Functionality	Difference from desktop component
`selectManyShuttle` and `selectOrderShuttle`	Selection	Select boxes are displayed that allow users to select the item(s) to shuttle.
`table`	Selection	Users select a row by tapping it and unselect a row by tapping it again. Multi-select is achieved simply by tapping the rows to be selected. That is, selecting a second row does not automatically deselect the first row.
`table`	Scroll	Instead of scroll bars, the table component displays a footer that allows the user to jump to specific pages of rows. The number of rows on a page is determined by the `fetchSize` attribute.
ADF Faces dialog framework	Windows	When a command component used to launch the dialog framework has its `windowEmbedStyle` attribute set to `window` (to launch in a separate window), ADF Faces overrides this value and sets it to `inlineDocument`, so that the dialog is instead launched inline within the parent window.
`menu`	Detachable menus	Detachable menus are not supported. The `detachable` attribute is ignored.
`inlineFrame`	Geometry management	On touch devices, `iFrame` components ignore dimensions, and are always only as tall as their contents. Therefore, if the `inlineFrame` is stretched by its parent, the content may be truncated, because scroll bars are not used on touch devices. When the `inlineFrame` is stretched by its parent, 40 pixels of padding and overflow are added to the inline style.
`panelBox` and`showDetailHeader`	Maximize	On touch devices, when `showMaximize` is set to `auto`, a maximize icon displays, allowing the user to maximize the component to the full browser window. This icon will not display on desktops.
Various components	Icons, buttons, and links	Icons and buttons are larger and spaces between links are larger to accommodate fingers

Because some touch devices do not support Flash, ADF Faces components use HTML5 for animation transitions and the like. This standard ensures that the components will display on all devices.

Best Practices When Using ADF Faces Components in a Mobile Browser

To build the ADF Faces application for the touch device in an adaptive, interactive and gesture friendly way, you must follow some best practices. This will enable a better user experience and functionalities won’t be limited.

When you know that your application will be run on touch devices, the best practice is to create pages specific for that device. You can then use code similar to that of the following example to determine what device the application is being run on, and then deliver the correct page for the device.

public boolean isMobilePlatform()
{
  RequestContext context = RequestContext.getCurrentInstance();
  Agent agent = context.getAgent();
 
  return
  Agent.TYPE_PDA.equals(agent.getType()) ||
  Agent.TYPE_PHONE.equals(agent.getType()) ||
  (
  Agent.AGENT_WEBKIT.equals(agent.getAgentName()) &&
    (
// iPad/iPhone/iPod touch will come in as a desktop type and an iphone platform:
      "iphone".equalsIgnoreCase(agent.getPlatformName())
    )
  );
}

While your touch device application can use most ADF Faces components, certain functionality may be limited, or may be frustrating, on touch devices. Table D-3 provides best practices to follow when developing an application for touch devices.

Table D-3 Best Practices for ADF Faces Components in a Mobile Browser

Component/Functionality	Best Practice
Geometry management	Set the `oracle.adf.view.rich.geometry.DEFAULT_DIMENSIONS` `web.xml` parameter to `auto.` This setting ensures that the page will flow instead of stretch. See Geometry Management for Layout and Table Components.
Partial page navigation	Using partial page navigation means that the JavaScript and other client code will not need to be downloaded from page to page, improving performance. See Using Partial Page Navigation.
Navigation	Provide more direct access to individual pieces of content. A good rule is to have only one task per page, instead of using many regions on a page, separated by splitters. For example, instead of using a `panelSplitter` with a tree in the left pane to provide navigation, provide a list-based navigation model.
ADF task flows	When using ADF Task flows, use page fragments instead of full pages. Page fragments are inserted into a page using regions, which live in the parent document and don't require an `iFrame`. If you must use full pages, then do not use the dialog framework, and instead run them inline with the page. For information about task flows, see "Getting Started with ADF Task Flows" in Developing Fusion Web Applications with Oracle Application Development Framework.
`document` tag	You can configure the `document` tag to reference a large icon (typically 129 pixels by 129 pixels). See How to Configure the document Tag.
Handling touch events on the `richTextEditor` component	When a user clicks the editable area in the `richTextEditor` component, the following happens: Editable area has focus Keyboard is activated On all versions of iOS, any touch event listeners added to the document are disabled When a user clicks outside the editable area, the following happens: Editable area loses focus (blur) Keyboard is closed The cursor position is lost (and will not be retained upon clicking back into the editable area) On iOS, touch event listeners are added back to the document (on blur) If you add any touch event listeners to the document, you must use the `AdfAgent.addBubbleEventListener()` to ensure that the touch event listeners are removed and restored properly.
`richTextEditor` editor window size	Set the `rows` attribute. If this attribute is not specified, when in WYSIWYG mode, the edit window will grow with the content added.
Tables	By default, when rendered on tablet devices, tables display a footer that allows the user to jump to specific pages of rows. However, when you want tables to scroll smoothly using high-water mark scrolling to mimic scrolling on tablets, you should change the default setting for the `scrollPolicy` attribute. High-water mark scrolling closely resembles the way virtualized touch scrolling (scrolling in both horizontal and vertical directions) behaves on tablets. You may use this setting to address performance problems with virtualized scrolling of table data on tablets. For all tables to display on a tablet device with high-water mark scrolling enabled, you should: Set the `scrollPolicy` attribute to `scroll`. For all tables to display on a tablet device with pagination enabled, you should: Set the `scrollPolicy` attribute to `auto` (if the page will only run on a tablet) or set to `page` (if the page may also run on a desktop device). Set the `autoHeightRows` attribute to `0`. Better, is to set the `oracle.adf.view.rich.geometry.DEFAULT_DIMENSIONS` parameter to `auto`, as described for geometry management in the first row of this table. If these pagination conditions are not met, the table will display a scroll bar instead of pages. For information about table attributes, see Formatting Tables. For information about flowing layouts and tables, see Geometry Management for the Table, Tree, and Tree Table Components.