Mobile scrolling?

Getting into LiveCode for iOS? Ask your questions here.

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

Post Reply
ValiantCuriosity
Posts: 128
Joined: Thu Jun 30, 2016 3:08 am

Mobile scrolling?

Post by ValiantCuriosity » Fri Apr 12, 2019 9:18 pm

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
May I never be cured of my curiosity! :D

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4916
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Mobile scrolling?

Post by jacque » Sat Apr 13, 2019 6:19 pm

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.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4916
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Mobile scrolling?

Post by jacque » Sat Apr 13, 2019 9:19 pm

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.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Post Reply

Return to “iOS Deployment”