Mobile scrolling?

[ValiantCuriosity]

How do you approach mobile scrolling for iOS and Android? It is such a common thing on all mobile devices to use the finger to scroll up and down a list view. I've found one post from 2013 regarding scrolling, but it doesn't easily answer my questions about scrolling.

I am finding that LC seems to generate a less than pretty UI rendering for both iOS and Android. If I want to use LC for mobile development, I guess there is nothing to do about that except try to create my own UI for both Operating systems.

BTW, @Jacque, the youtube video that you put out regarding Android development was impressive. I enjoyed it. For those of you who are struggling, as I am, with mobile development, here is the link:
https://www.youtube.com/watch?v=QrImvRpP7NU. ("Coding Your App: Android Tips and Tricks" -2017. It is older, but still good)

At this point, I'm beginning to think that LC might be best used for desktop applications. I really like LC. I'm hoping that the gifted programmers will be able to catch up with some of the other Frameworks for mobile. Or, maybe, some genius will be able to incorporate one of excellent open source frameworks into LC. That would give mobile creators the ability to instantly have the UI for both iOS and Android and, yet be able to code in LC.

Regardless, LC has actually has helped me to understand a lot of what is happening in code. It is a great platform for development and for learning. I appreciate all the work that a small team of people are doing to keep it alive and prospering.

Smiles,
-Rachel

[jacque]

At this point, I'm beginning to think that LC might be best used for desktop applications.

While it's true that mobile development takes a bit more work, LC is fine for that and in fact, almost all of my work in the last couple of years has been apps for mobile.

The new widgets help a lot. The Android field widget scrolls by itself. But for general scrolling for any group or field, you'll get more control by using the scripted native scrollers. I use those more often than not. Widgets also offer more native appearance and some of them have themes you can toggle to switch appearance between ios and Android (the header bar is one.)

Glad to hear that the video helped. It's possible to build almost any native control using LC objects but as we get more widgets, we won't have to. The toast I made that you saw in the video has now been replaced with a native one, for example.

[jacque]

I have two basic scroller scripts that I reuse. One is a library, which you can insert with "start using" or you can just paste the handlers into your mainstack somewhere in the message path. The second script is a behavior, which you can paste into a button and then set the scrolling object to use that button as a behavior. Or if you only have one scrolling object you can just put the behavior script in there directly.

This is the library script. It only sets scroller properties that do not match the defaults. If you want to change more of the defaults, then add more settings.

Code: Select all

command createScroller pName -- scrolling fields or groups
  -- pName = any valid fld or group identifier (long or short name, ID, etc)
  if not isMobile() then exit CreateScroller
  deleteMobileControl pName -- delete any existing
  put (the rect of control pName) into tRect
  put the hScrollBar of control pName into tHScroller
  put the vScrollBar of control pName into tVScroller
  set the hScrollBar of control pName to false -- remove fld scrollbars on mobile
  set the vScrollBar of control pName to false
  mobileControlCreate "scroller", pName
  mobileControlSet pName, "rect", tRect
  put  ("0,0," & (the formattedwidth of control pName) & "," & the formattedheight of control pName) into tRect
  mobileControlSet pName, "contentRect", tRect
  mobileControlSet pName, "hScroll", 0
  mobileControlSet pName, "vScroll", 0
  mobileControlSet pName, "hIndicator", the tHScroller of control pName
  mobileControlSet pName, "vIndicator", the tVScroller of control pName
  mobileControlSet pName, "visible", true
end createScroller

on scrollerDidScroll hScrolled, vScrolled
  put mobileControlTarget() into tControlID
  set the hscroll of control tControlID to hscrolled
  set the vscroll of control tControlID to vscrolled
  pass scrollerDidScroll
end scrollerDidScroll

command deleteAllMobileControls -- globally delete all mobile controls of any type
  if not isMobile() then exit deleteAllMobileControls
  repeat for each line l in mobileControls()
    deleteMobileControl l
  end repeat
end deleteAllMobileControls

command deleteMobileControl pName -- delete a single existing mobile control
  -- pName = any valid fld identifier (long or short name, ID, etc)
  -- native controls should be deleted when no longer needed
  if not isMobile() then exit deleteMobileControl -- do nothing on desktop
  repeat while pName is among the lines of mobileControls()
    mobileControlDelete pName
  end repeat
end deleteMobileControl

Below is the script I most often use as a behavior assigned to the scrolling object:

Code: Select all

-- the behavior for any group or field that should be scrollable.
-- The target must have a "doScrollerTap" handler to catch user taps.

local sMouseLoc,sStartLoc

on mouseDown
  put the mouseloc into sMouseLoc
  put sMouseLoc into sStartLoc
end mouseDown

on mouseUp 
  put "" into sMouseLoc
  if abs(the mouseH - item 1 of sStartLoc) <= 10 and abs(the mouseV - item 2 of sStartLoc) <= 10 then
    send "doScrollerTap" to the target
  end if
  -- Horizontal swipe detection will go here. It's coming but for now only taps work on Android.
end  mouseup

on mouseMove x,y -- desktop scrolling; emulates mobile during dev
  if isMobile() or sMouseLoc = "" then pass mouseMove
  put abs(x - item 1 of sMouseLoc) into tHDist
  put abs(y - item 2 of sMouseLoc) into tVDist
  if item 2 of sMouseLoc > y then -- pushing up
    set the vscroll of me to the vscroll of me + tVDist
  else if item 2 of sMouseLoc < y then -- pushing down
    set the vscroll of me to the vscroll of me - tVDist
  end if
  put x,y into sMouseLoc
end mouseMove

on mouseRelease
  put "" into sMouseLoc
  put "" into sStartLoc
end mouseRelease

In the message path, usually the stack script, I put basic utilities. You need this one:

Code: Select all

function isMobile
  return the environment is "mobile"
end isMobile

The behavior script has a desktop emulation mode so that you can push a scrolling object up and down like you can on mobile. All the handlers that require it contain a check for the environment and will exit if it isn't mobile, which means you can leave the handler calls in your script without getting errors on desktop.

So, to create a mobile scroller (usually I do this on preOpenCard or openCard): createScroller "bodytext" -- for a field named "bodytext"

When done, usually on closecard: deleteMobileControl "bodytext"

In the card script, add a "doScrollerTap" handler that will respond to taps if your app needs to catch those. Even if you don't care about taps, you still need a "doScrollerTap" handler that does nothing, or you'll get a "cant find handler" error.

[trevix]

Hello.
I would like to suggest a revival of this subject since, apparently, a unified multiplatform scrolling field hasn't yet appeared.
I develop a standalone for iOS and Android and, having my Mac has a development platform, the same scrolling field should work reasonably also on a desktop computer, in my opinion.

Everytime I have to create a scrolling field, I always have the same kind of problems: scroll a field or scroll a group with a field inside? Selection, change of content, etc . Apparently I am still be very confused on how this should be done.

I wonder where to find a complete and correct example, that works on all platform and that also contains a few needed commands and functions in order to:
- scroll refresh to reflect change of content
- hide or show if something else must appear on top of the card
- scroll to selected line or to top
- mouse wheel scroll, horizz and vert, on desktop
- select or deselect a line

Note that I already do all of the above but, usually, my code is rather confused and leave a degree of uncertainty.
PS. I gave up DG in my development because too often I was getting from customer errors I could not identify or solve. Same thing with some widgets, trowing errors without specifying the precise line of code or type of error.

[FourthWorld]

Dropping a scrolling field onto a card in a multiplatform dev tool should scroll well on all supported platforms, without anything else required.

No matter how it gets officially categorized, it's a bug to have anything else happening.

It hurts adoption to have something this fundamental be a subproject in the user's workflow.

[trevix]

I couldn't agree more... thankfully AI is going to save us

[trevix]

Meanwhile...nothing happened in this regard from LC and I am still struggling/scrolling.

I scroll a field inside a group using MobileControlSet.
Everything finally (pfuii...) works on OSX and iOS and Android:
- on opening the card, the selected line gets hilited and the group scrolls to the correct line, making it visibile
- I can scroll and select by script, even if I modify the content of the field
- the scroll is limited so that if I scroll from script to the last line, this line appears at the bottom of the group
- I can hide or show the mobile scroller, if I need to show something on top of the card

This is my script for scrolling/selecting from another script. Can someone tell me if it is correct (it works but I am not sure how well):

Code: Select all

on ScrollFromOutside pValue --line number sent from other script in order to select and scroll
     put the formattedHeight of  field "FldList" of me into tFormattedHeight
     set the height of  field "FldList" of me to tFormattedHeight
     put the effective textHeight of field "FldList" of me into tTextHeight
     put the number of lines of field "FldList" of me into tNumLines
     put trunc((pValue - 1) * tTextHeight) into tScroll  -- into tNumOfLine --number of visible lines
     put tFormattedHeight - the height of me  into tMaxScroll 
     set the vscroll of me to 0
     set the top of  field "FldList" of me to the top of me
     put max(0,min(tScroll,tMaxScroll)) into tScroll2 
     --set the vscroll of me to tScroll2
     if the environment is  "mobile" then
          mobileControlSet sScrollerId, "contentRect", (0,0,the width of field "FldList" of me,tFormattedHeight)
          wait 100 milliseconds with messages
          mobileControlSet sScrollerId, "vscroll", tScroll2 
     end if
     set the vscroll of me to tScroll2
     set the hilitedline of fld "FldList" of me to pValue
end ScrollFromOutside

[trevix]

Also, I found a different behaviour between iPhone(16.7.6) and iPad(17.4).
It is difficult to explain since there are a lot of lines of code in between my scrolling.
I am asking this just to know if anybody else found different behaviours between the two machine...or it is just a bug on my code.
Thanks