View Source

h3. Overview

ACE components were originally intended for a desktop environment. Certain desktop UI interactions map consistently to UI interactions on mobile devices. Other desktop interactions either don't have any correspondence in the mobile environment, or don't have agreed-upon corresponding interactions among mobile platforms, OS's, browsers or apps. Below are some examples:
|| Desktop \\ || Mobile \\ ||
| click \\ | tap \\ |
| right click \\ | commonly touch and hold, but context menu usually "hijacked" by some other menu or functionality \\ |
| mouseover & mouseout \\ | no such thing as fingerover or fingerout, but sometimes can be translated to touchstart and touchend \\ |
| ctrl-click & shift-click \\ | generally no such thing; some device or app. may provide extra key to do ctrl/shift-tap \\ |
| drag & drop \\ | mousedown, mousemove, mouseup map consistently to touchstart, touchmove and touchend \\ |

h3. Mobile Device Support

On mobile devices, currently ACE components should support UI interactions that have consistent mapping to UI interactions on a desktop. From the above table, for example, click and drag & drop should be supported.

There are certain things you have to particularly watch out for when interacting on a mobile device:
* Drag should happen ASAP after touch, or event might become a touch and hold.
* When dragging table column headers, touch should be on blank space, not the header text.
* When dragging in slider, make sure focus is on the knob (normally color changes as controlled by CSS), not the whole slider.
* On Samsung device, the touch on a resizable has to be a little more "off" the resize handle than on iPhone and iPad.

h3. Components Having Mobile Device Support

|| Component || Touch Interfaces Supported \\ ||
| accordion[|http://localhost:8080/ace-showcase/showcase.jsf?grp=aceMenu&exp=accordionPanelBean] | tap to expand/collapse a pane\\ |