Mobile scrolling?
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- Posts: 128
- Joined: Thu Jun 30, 2016 3:08 am
Mobile scrolling?
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
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!
-
- VIP Livecode Opensource Backer
- Posts: 7257
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Mobile scrolling?
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.At this point, I'm beginning to think that LC might be best used for desktop applications.
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
HyperActive Software | http://www.hyperactivesw.com
-
- VIP Livecode Opensource Backer
- Posts: 7257
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Mobile scrolling?
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.
Below is the script I most often use as a behavior assigned to the scrolling object:
In the message path, usually the stack script, I put basic utilities. You need this one:
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.
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
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
Code: Select all
function isMobile
return the environment is "mobile"
end isMobile
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
HyperActive Software | http://www.hyperactivesw.com
Re: Mobile scrolling?
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.
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.
Trevix
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>
-
- VIP Livecode Opensource Backer
- Posts: 9852
- Joined: Sat Apr 08, 2006 7:05 am
- Location: Los Angeles
- Contact:
Re: Mobile scrolling?
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.
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.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
Re: Mobile scrolling?
I couldn't agree more... thankfully AI is going to save us
Trevix
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>
Re: Mobile scrolling?
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):
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
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>
Re: Mobile scrolling?
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
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
Trevix
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>