ACE Components Mobile Device Support

Table of Contents

Overview

ACE components have specific functional extensions to better support touch-enabled mobile devices, such as tablets. Many desktop UI interactions map consistently to mobile UI interactions. However, some desktop interactions either don't have any correspondence in the mobile environment, or don't have consistent 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

Mobile Device Support

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

There are certain things you have to be aware of 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 an Android device, the touch on a resizable has to be a little more "off" the resize handle than on iOS.

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 Features Supported by Touch Interfaces
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
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2018 ICEsoft Technologies Canada Corp.