Tree View widget: scrolling on mobile

[trevix]

Hello.
My Tree View widget, when unfolded, can be quite high (several pages) and I noticed that the vertical scroll on mobile (iOS and Android) does not perform very well: you can only use a slim side bar and is a little slow.
I was wondering if it will work creating a mobile scroller (that is, putting the widget inside a group and running a MobileControlCreate) and what kind of problems I may run into.
As a matter of fact, I wonder why the widget creator did not implement a finger scrolling from start.
Regards
Trevix

[trevix]

Still struggling with this.
My Widget is populated with around 100 array keys and subkey. On Desktop is fast but on mobile is REALLY slooooow.
Beside that I find very hard to apply a mobile scroller to it, particularly handling the scroll on formattedHeightChanged.
Beside, how do you deal with the group scroll, the mobile scroll and.. the vscroll of the widget!!??
I find it difficult to reconcile these properties.

Anybody has an example to share of a scrolling Tree view widget, where it works fine both on desktop and on mobile?
Thanks
Trevix

This is my code:
on the widget script:

Code: Select all

on formattedHeightChanged
          UpdateScroller 
end formattedHeightChanged

On the group containing the widget:

Code: Select all

local sScrollerId

on openControl
     set the sOldScroll of me  to 0
end openControl

on CloseControl
     StopScroller
end CloseControl

on StartScroller
     put the sOldScroll of me into tOldScroll
     put the formattedHeight of widget "PrefTree" into tFormattedHeight
     put the width of widget "PrefTree" of me into tWidth
     set the height of widget "PrefTree" of me to tFormattedHeight
     set the top of widget "PrefTree" of me to the top of me
     set the vScroll of me to tOldScroll
     if the environment is not "mobile" then
          exit StartScroller
     end if
     set the vScrollBar of me to false
     set the unboundedVScroll of me  to true
     mobileControlCreate "scroller"
     put the result into sScrollerId
     put the rect of me into tRect
     mobileControlSet sScrollerId, "rect", tRect
     mobileControlSet sScrollerId, "contentRect", (0, 0, tWidth, tFormattedHeight)
     mobileControlSet sScrollerId, "visible", "true"
     mobileControlSet sScrollerId, "canBounce", true
     mobileControlSet sScrollerId, "declerationRate", fast
     mobileControlSet sScrollerId, "scrollingEnabled", true
     mobileControlSet sScrollerId, "canScrollToTop", true 
     mobileControlSet sScrollerId, "delayTouches", false
     mobileControlSet sScrollerId, "canCancelTouches", true
     mobileControlSet sScrollerId, "hIndicator", false
     mobileControlSet sScrollerId, "vIndicator", true
     mobileControlSet sScrollerId, "indicatorInsets",  "0,0,15,0"
     mobileControlSet sScrollerId, "hscroll", 0
     mobileControlSet sScrollerId, "vscroll", tOldScroll
end StartScroller

on StopScroller
     --hide the owner of me
     if the environment is "mobile" then
          mobileControlDelete sScrollerId
     end if
end StopScroller

on UpdateScroller 
     breakpoint
     lock screen
     put the sOldScroll of me into tOldScroll
     put the formattedHeight of widget "PrefTree" of me into tFormattedHeight
     set the height of widget "PrefTree" of me to tFormattedHeight
     --set the top of widget "PrefTree" of me to the top of me
     --set the vScroll of me to tOldScroll
     if the environment is not "mobile" then exit UpdateScroller
     put the width of widget "PrefTree" of me into tWidth
     mobileControlSet sScrollerId, "contentRect", (0, 0, tWidth, tFormattedHeight)
     mobileControlSet sScrollerId, "vscroll", tOldScroll
end UpdateScroller

on scrollerDidScroll pOffsetX, pOffsetY
     lock screen
     set the vScroll of me to pOffsetY
     set the sOldScroll of me  to pOffsetY
     mobileControlSet sScrollerId, "vscroll", pOffsetY   
end scrollerDidScroll

on scrollerScrollToTop
     set the vScroll of me to 0
     set the sOldScroll of me  to 0
     mobileControlSet sScrollerId, "vscroll", 0   
end scrollerScrollToTop

--scrolling in desktop mouse wheel
on rawkeydown pKey
     if pKey = 65309 then
          put the vscroll of me into A
          if A <= 0 then exit rawkeydown
          put A - 15 into B
          set the vscroll of me to B
          if the environment is  "mobile" then 
               mobileControlSet sScrollerId, "vscroll", B  
          end if
     else if pKey = 65308 then
          put the vscroll  of me into A
          put A + 15 into B
          set the vscroll of me to B
          if the environment is  "mobile" then 
               mobileControlSet sScrollerId, "vscroll", B  
          end if
     else
          pass rawkeydown
     end if
end rawkeydown

[bwmilby]

I think I had this pretty much sorted out in SivaSiva. I have not looked at the code in over a year, but the stories module behavior script and the mobile controller behavior script are the two key places. I'll try to provide some more helpful code references this weekend. The key difference is that I did not use a group but used the widget itself to overlay the scroller. This will dramatically improve things on mobile since you are not rendering the whole array but only the visible portion.

[trevix]

Thanks Brian, I would really appreciate some knowhow.
Can't wait.
Beside the scroll problem, can you confirm that the Tree View widget, on folding and unfolding, is quite slow on mobile, by its own nature?

[bwmilby]

It wasn’t slow for me, but the tree was much smaller than 100 keys. You can see it in a live app in the App Store if you download SivaSiva and go to the Stories module. Even though that project is in hiatus the code is all available.

[sotosilva]

Totally get you, dealing with those lengthy Tree View widgets on mobile is a bit of a headache. Giving a custom mobile scroller a shot might ease the pain, but it could bring its own bag of problems. As for why they didn't just throw in finger scrolling from the start, your guess is as good as mine.