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 | tap to expand/collapse a pane \\ |
| autoCompleteEntry\\ | tap to select item from dropdown list\\ |
| checkboxButton\\ | tap to check/uncheck checkbox\\ |
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 | tap to expand/collapse a pane \\ |
| autoCompleteEntry\\ | tap to select item from dropdown list\\ |
| checkboxButton\\ | tap to check/uncheck checkbox\\ |