Forum Stats

  • 3,874,451 Users
  • 2,266,734 Discussions
  • 7,911,852 Comments

Discussions

UT - Mobile scrolling

partlycloudy
partlycloudy Member Posts: 8,176 Silver Trophy
edited Aug 15, 2018 4:04PM in APEX Discussions

When I go to the UT sample app on my iPhone (8 Plus) and click on Components and open up the sidebar navigation menu, I find that I am unable to (vertically) scroll the menu. Pretty sure this worked fine in 5.1.4.

This sounds like another manifestation of the quirk I inquired about here.

Any ideas?

Mahmoud_RabiePierre Yottipartlycloudy

Best Answer

  • ShakeebRahman-Oracle
    ShakeebRahman-Oracle Member Posts: 66 Employee
    edited Jun 25, 2018 4:04PM Answer ✓

    Hi there,

    Here is a workaround you can try while we prepare a proper fix for this behavior.

    This workaround will completely disable TouchProxy (a handler we use to intercept touch events and add touch support for jQuery UI widgets). Please add this code to Function and Global Variable Declaration page attribute:

    apex.widget.util.TouchProxy.addTouchListeners = function() {};apex.widget.util.TouchProxy.removeTouchListeners = function() {};

    It could also go in a JS file that is loaded for the app. It has to run after the standard APEX libraries are loaded but before any of the document ready handlers run.

    I'm also tagging @John Snyders-Oracle in case he has any additional comments.

    Thanks!

    Shakeeb

    partlycloudy

Answers

  • partlycloudy
    partlycloudy Member Posts: 8,176 Silver Trophy
    edited Jun 24, 2018 11:17AM

    @joelkallman-Oracle Any thoughts on this? It is preventing deployment of one our apps into Production.

  • partlycloudy
    partlycloudy Member Posts: 8,176 Silver Trophy
    edited Jun 24, 2018 12:55PM

    I tried using two fingers to scroll the sidebar but that scrolls the main content page instead! Strange that it works for you. I am using iPhone 8 Plus with iOS 11.4

    Also, what does it mean by "when touch is enabled"?

  • Pierre Yotti
    Pierre Yotti Member Posts: 4,046 Bronze Crown
    edited Jun 24, 2018 1:33PM

    i use iphone 8 ios version 11.3.1

    you can download the mp4 video and show how it works for me

    https://github.com/allipierre/UT---Mobile-scrolling

  • partlycloudy
    partlycloudy Member Posts: 8,176 Silver Trophy
    edited Jun 24, 2018 1:54PM

    Interesting. Turns out that I can also use two finger scrolling but only if I do it really rapidly! In other words, I need to get 2 fingers ready, on your marks,  get set and go, as if I am scrolling through a very very long page. If I slowly touch 2 fingers on the sidebar and start scrolling, the main page body scrolls instead. It is hit-or-miss, literally, so I'm afraid I can't really offer using two finger scrolling as a workaround.

    https://hammerjs.github.io/

    My guess is that the APEX team rushed this integration with the Hammer JS library and somehow the swipe and pan recognizers are getting mixed up.

    Looking forward to the PSE that fixes this.

    Mahmoud_RabiePierre Yotti
  • ShakeebRahman-Oracle
    ShakeebRahman-Oracle Member Posts: 66 Employee
    edited Jun 25, 2018 4:04PM Answer ✓

    Hi there,

    Here is a workaround you can try while we prepare a proper fix for this behavior.

    This workaround will completely disable TouchProxy (a handler we use to intercept touch events and add touch support for jQuery UI widgets). Please add this code to Function and Global Variable Declaration page attribute:

    apex.widget.util.TouchProxy.addTouchListeners = function() {};apex.widget.util.TouchProxy.removeTouchListeners = function() {};

    It could also go in a JS file that is loaded for the app. It has to run after the standard APEX libraries are loaded but before any of the document ready handlers run.

    I'm also tagging @John Snyders-Oracle in case he has any additional comments.

    Thanks!

    Shakeeb

    partlycloudy
  • partlycloudy
    partlycloudy Member Posts: 8,176 Silver Trophy
    edited Jun 25, 2018 4:36PM

    Shakeeb - Thanks for chiming in. Not sure I understand. If you look at my original post, I am unable to scroll the sidebar navigation menu on the UT Sample App on apex.oracle.com. This doesn't use a jQuery UI widget, does it? So why is this affected?

  • John Snyders-Oracle
    John Snyders-Oracle Member Posts: 1,436 Employee
    edited Aug 15, 2018 11:12AM

    Hi,

    The workaround Shakeeb gave should work.

    > "My guess is that the APEX team rushed this integration with the Hammer JS library..."

    This is not an issue with Hammer integration. It is an issue with the integration of a jQuery UI touch punch equivalent we can call TouchProxy. As for rushed; that is arguably true. Would have been great if we found this problem before release.

    Many APEX components are implemented as jQuery UI widgets. This includes the Tree region, the side tree navigation, Interactive Grid, Interactive Report, menus, top navigation menu, most of page designer etc.

    jQuery UI does not have native support for touch events. Simple things like click are not a problem. But various common jQuery UI mouse interactions like drag, drag and drop, sortable, and sliders do not work with touch.APEX components do use the common mouse interactions.  Along came the touch punch library that simulates mouse events that jQuery UI can handle from touch events. If you add touch punch to APEX you would find the same problems. TouchProxy is basically equivalent to touch punch. We added TouchProxy so that all the jQuery UI mouse interactions used by APEX widgets and jQuery UI widgets work with touch.

    Here is where the problem comes from. Consider the treeView widget used in Page Designer. It is in a container that may need to scroll and it supports drag and drop. These two things are in conflict. Preventing default (as touch punch/TouchProxy does) on the touch events breaks scrolling but d&d works fine (you can still scroll with two fingers or one finger on the scrollbar if there is one and you have tiny fingers). Not loading TouchProxy lets scrolling work but now d&d is not possible with touch.

    The fix for this will be to back out use of TouchProxy. This means there will be no touch support for mouse interactions in APEX components. The real solution is to implement specific touch support in each widget and this is a big effort.

    The code above essentially disables TouchProxy.

    Regards,
    -John

    partlycloudy
  • partlycloudy
    partlycloudy Member Posts: 8,176 Silver Trophy
    edited Aug 15, 2018 3:03PM

    John - Thanks for chiming in, appreciate the background context.

    Not loading TouchProxy lets scrolling work but now d&d is not possible with touch.

    Not sure I understand. This bug notwithstanding, I wasn't even aware that d&d was supported or even possible on a mobile device! Are there any packaged or sample apps that showcase this UX pattern or does this TouchProxy issue effectively cripple this functionality?

    The code above essentially disables TouchProxy.

    Shakeeb suggested adding the code to the Function and Global Variable Declaration page attribute but global/shared components like the navigation menu are rendered on all pages so the Global Page comes to mind but that does not have this page attribute.

    So where exactly should we put Shakeeb's JS code snippet so it kicks in for all pages? Application XXX > User Interfaces > User Interface Details > Javascript > File URLs perhaps? What do you recommend?

    Thanks

  • John Snyders-Oracle
    John Snyders-Oracle Member Posts: 1,436 Employee
    edited Aug 15, 2018 3:57PM

    One place to see drag and drop work in the treeView widget is the page designer. For example in the rendering tree you can drag and drop items or regions. It works on desktop and in 18.1 does work on a tablet (if your fingers are small). Once fixed (likely in 18.2) drag and drop will not work with touch in page designer trees but scrolling with 1 finger will work again.

    To have the code run on all pages. It should go in a JavaScript file (e.g. app.js) added to the app (or workspace). Create a file and put those lines of code in them. Then upload to shared components application files. The add reference to the file in UI Details for desktop JavaScript: File URLs attribute. Example:

    #APP_IMAGES#app.js?version=#APP_VERSION#

    Regards,
    -John

    partlycloudypartlycloudy
This discussion has been closed.