ICEfaces
  1. ICEfaces
  2. ICE-7867

Add touch-screen interface support to ACE components

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 3.2
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ICEfaces 3, ACE Component Environment, touch-screen devices such as iPad.
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      The majority of the ACE components work just fine on mobile devices with webkit-based browsers (iPhone, iPad, Androids devices, etc.). However, the lack of support for touch-screen interfaces limits the utility of some component features.

      Specifically:

      ace:contextMenu
      - no way to trigger this component, no right/alt-click

      ace:dataTable
      - no modifier key for multi-col sorting
      - no drag & drop support for column reordering

      ace:draggable / ace:droppable / ace:resizable
      - no drag & drop support for resizable or draggable, etc.

      ace:sliderEntry
      - no way to drag slider

        Activity

        Hide
        Ken Fyten added a comment -

        It seems that if we can enhance the base-level drag and drop functions being used in ACE to detect and support HTML5 touch events, then all these features would "just work" without needing to modify the components themselves.

        Show
        Ken Fyten added a comment - It seems that if we can enhance the base-level drag and drop functions being used in ACE to detect and support HTML5 touch events, then all these features would "just work" without needing to modify the components themselves.
        Hide
        yip.ng added a comment - - edited

        right-click:
        Seems no standard mechanism. The most common suggestion is tap and hold. Windows tablets are the only ones that match tap-hold to right-click 100% automatically. Some people say depending on OS and app, you may have to use double tap or two-finger tap. (jQuery Mobile has a simulated taphold event.)
        control-click:
        Seems no such thing in the tablet world. Some say in iPad there is a dot key or edit key or control key on screen or on popup keyboard. You press it before or with tap. Others swear that there is not such thing or if there is it never works. Still others say you better use a checkbox-like UI.

        Show
        yip.ng added a comment - - edited right-click: Seems no standard mechanism. The most common suggestion is tap and hold. Windows tablets are the only ones that match tap-hold to right-click 100% automatically. Some people say depending on OS and app, you may have to use double tap or two-finger tap. (jQuery Mobile has a simulated taphold event.) control-click: Seems no such thing in the tablet world. Some say in iPad there is a dot key or edit key or control key on screen or on popup keyboard. You press it before or with tap. Others swear that there is not such thing or if there is it never works. Still others say you better use a checkbox-like UI.
        Hide
        Ken Fyten added a comment - - edited

        Right-Click: Only used by ace:contextMenu.
        Control-Click: Used for enhanced multiple selection mode (ace:dataTable). I believe that there is still a multiple selection mode that simply uses clicks, so this is not essential as the app. can use the single-click mode for multiple selection if targeting touch-screen devices.
        Drag-and-Drop: This is essential and we should prioritize this, trying to find a small set of changes to the core Drag and Drop code to achieve general support.

        Show
        Ken Fyten added a comment - - edited Right-Click: Only used by ace:contextMenu. Control-Click: Used for enhanced multiple selection mode (ace:dataTable). I believe that there is still a multiple selection mode that simply uses clicks, so this is not essential as the app. can use the single-click mode for multiple selection if targeting touch-screen devices. Drag-and-Drop: This is essential and we should prioritize this, trying to find a small set of changes to the core Drag and Drop code to achieve general support.
        Hide
        yip.ng added a comment - - edited

        Tested plugin with Carmen's iPhone (with her help), Ted's Samsung Galaxy phone, and Ken's iPad. All worked fine with drag and drop operations mentioned in description.
        Note that tap and drag should be done quickly, or it might become a tap and hold event. (Like the taphold event in jQuery Mobile. Result of taphold event varies according to platform, browser and app.)
        When dragging table column headers, tap should be on blank space, not the header text. (Same in desktop showcase.)
        When dragging the slider, make sure the knob is focused first (changes color in showcase), not the whole slider. (Same in desktop showcase.)
        On Samsung, the tap on a resizable has to be a little more "off" the resize handle than on iPhone and iPad.
        Plugin JS file first checked in is the original pristine untouched version. (So we can always trace changes back to original version.)
        Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\build.xml
        Adding: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\jquery\ui\jquery.ui.touch-punch.js
        Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\jquery\ui\readme.txt
        Completed: At revision: 31227

        Show
        yip.ng added a comment - - edited Tested plugin with Carmen's iPhone (with her help), Ted's Samsung Galaxy phone, and Ken's iPad. All worked fine with drag and drop operations mentioned in description. Note that tap and drag should be done quickly, or it might become a tap and hold event. (Like the taphold event in jQuery Mobile. Result of taphold event varies according to platform, browser and app.) When dragging table column headers, tap should be on blank space, not the header text. (Same in desktop showcase.) When dragging the slider, make sure the knob is focused first (changes color in showcase), not the whole slider. (Same in desktop showcase.) On Samsung, the tap on a resizable has to be a little more "off" the resize handle than on iPhone and iPad. Plugin JS file first checked in is the original pristine untouched version. (So we can always trace changes back to original version.) Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\build.xml Adding: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\jquery\ui\jquery.ui.touch-punch.js Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\jquery\ui\readme.txt Completed: At revision: 31227
        Hide
        Ken Fyten added a comment - - edited

        Need to add documentation in terms of what features are supported (and not) on touch interfaces on mobile devices to this Wiki page:
        http://wiki.icesoft.org/display/ICE/ACE+Components+Mobile+Device+Support
        Usage tips as noted in the comment above could also be included. It would be nice to have a complete list of each component that has touch interfaces support, and what that is.
        (Restricted to icesoft-internal-developers group)

        Show
        Ken Fyten added a comment - - edited Need to add documentation in terms of what features are supported (and not) on touch interfaces on mobile devices to this Wiki page: http://wiki.icesoft.org/display/ICE/ACE+Components+Mobile+Device+Support Usage tips as noted in the comment above could also be included. It would be nice to have a complete list of each component that has touch interfaces support, and what that is. (Restricted to icesoft-internal-developers group)

          People

          • Assignee:
            yip.ng
            Reporter:
            Ken Fyten
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: