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:

D.1 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.

D.2 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 andshowDetailHeader

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.

D.3 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.