h3. Overview
ACE components were originally intended for a desktop environment. Certain desktop UI interactions map consistently to mobile UI interactionss. 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 can be preempted 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 mobile UI interactions that have consistent mapping to desktop UI interactions. 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 Supporting Touch Interfaces
As mentioned above, click and drag & drop should be well-supported among mobile devices. Therefore any features requiring them should work also on mobile devices. The following is a sample list of components and features that work on mobile devices.
|| Component || Touch Interfaces Supported \\ ||
| accordion | expand/collapse a pane; hover (to toggle) can sometimes be supported as tap \\ |
| autoCompleteEntry \\ | select item from dropdown list \\ |
| checkboxButton \\ | check/uncheck checkbox \\ |
| confirmationDialog \\ | drag & drop dialog \\ |
| contextMenu \\ | context menu (on devices that support right click as touch and hold) \\ |
| dataTable \\ | drag & drop column reordering; other features using click, e.g. row expansion, sorting \\ |
| dateTimeEntry \\ | date selection by tap, time selection by slider \\ |
| dialog \\ | drag & drop dialog, resize dialog \\ |
| draggable/droppable \\ | drag & drop \\ |
| linkButton \\ | activate link button \\ |
| list \\ | all features using drag & drop or click \\ |
| menu \\ | activate menu item; hover can sometimes be supported as tap \\ |
| menuBar \\ | activate menu item; hover can sometimes be supported as tap |
| menuButton \\ | activate menu item |
| panel \\ | all features using click; (no features requiring drag & drop) \\ |
| pushButton \\ | click on button \\ |
| resizable \\ | drag & drop resize handle to resize \\ |
| sliderEntry \\ | drag & drop slider knob \\ |
| tabSet \\ | change tabs \\ |
| tooltip \\ | hover can sometimes be supported as tap \\ |
| tree \\ | expand/collapse nodes; drag & drop nodes \\ |
ACE components were originally intended for a desktop environment. Certain desktop UI interactions map consistently to mobile UI interactionss. 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 can be preempted 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 mobile UI interactions that have consistent mapping to desktop UI interactions. 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 Supporting Touch Interfaces
As mentioned above, click and drag & drop should be well-supported among mobile devices. Therefore any features requiring them should work also on mobile devices. The following is a sample list of components and features that work on mobile devices.
|| Component || Touch Interfaces Supported \\ ||
| accordion | expand/collapse a pane; hover (to toggle) can sometimes be supported as tap \\ |
| autoCompleteEntry \\ | select item from dropdown list \\ |
| checkboxButton \\ | check/uncheck checkbox \\ |
| confirmationDialog \\ | drag & drop dialog \\ |
| contextMenu \\ | context menu (on devices that support right click as touch and hold) \\ |
| dataTable \\ | drag & drop column reordering; other features using click, e.g. row expansion, sorting \\ |
| dateTimeEntry \\ | date selection by tap, time selection by slider \\ |
| dialog \\ | drag & drop dialog, resize dialog \\ |
| draggable/droppable \\ | drag & drop \\ |
| linkButton \\ | activate link button \\ |
| list \\ | all features using drag & drop or click \\ |
| menu \\ | activate menu item; hover can sometimes be supported as tap \\ |
| menuBar \\ | activate menu item; hover can sometimes be supported as tap |
| menuButton \\ | activate menu item |
| panel \\ | all features using click; (no features requiring drag & drop) \\ |
| pushButton \\ | click on button \\ |
| resizable \\ | drag & drop resize handle to resize \\ |
| sliderEntry \\ | drag & drop slider knob \\ |
| tabSet \\ | change tabs \\ |
| tooltip \\ | hover can sometimes be supported as tap \\ |
| tree \\ | expand/collapse nodes; drag & drop nodes \\ |