How do I use a native scroller to scroll a field?
In this lesson we will set up a native mobile scroller to allow you to scroll the contents of a field.
Create your stack
The first step is to create your stack and add a field containing text.
To ensure the scroller is usable the text in the field should be long enough than the field cannot display it all without scrolling.
Creating the mobile scroller
Mobile scrollers are created in code. We want the scroller to be created when the card is opened so open the Card Script and add a preOpenCard handler.
on preOpenCard
// Create the scroller for the field
if the environment is "mobile" then
mobileControlCreate "scroller", "loremScroller"
mobileControlSet "loremScroller","visible",true
mobileControlSet "loremScroller","rect",the rect of field "lorem"
put 0,0,the width of field "lorem",the formattedHeight of field "lorem" into tContentRect
mobileControlSet "loremScroller","contentRect",tContentRect
mobileControlSet "loremScroller","vIndicator",true
end if
end preOpenCard- Check the environment is mobile
- Create a mobile scroller named "loremScroller"
- Set the rect of the scroller to the rect of the field
- Calculate the content rect of the field, this is the rect of all the content
- Set the contentRect of the scroller
- Set the scroller to show a vertical indicator
Responding to scroll messages
The scroller sends messages as it scrolls, we need to respond to these messages to update the vScroll of the field itself to provide the scrolling behavior.
The scrollerDidScroll message
The scrollerDidScroll message is sent when the scroll properties of a scroller control change.
The scrollerDidScroll message is sent to the object containing the script that created the scroller control so we will add the handler to the Card Script.
on scrollerDidScroll pHScroll, pVScroll
set the vScroll of field "lorem" to pVScroll
end scrollerDidScrollDeleting the mobile scroller
Because native controls are not on a card in the same way as LiveCode controls we will delete the scroller when the card is closed. In this example we only have 1 card so it is not so important but it is good to get into the habit of deleting native controls when you are done with them.
Add the closeCard hander to the Card Script.
on closeCard
if the environment is "mobile" then
mobileControlDelete "loremScroller"
end if
end closeCardTesting on a mobile device
Deploy your app to a mobile device or simulator to test the scroller.
Fernando Riccio
If you need more than one scroller in a card, how do you know from which scroller the event is?
Thanks
Elanor Buchanan
Hi Fernando
You can use the mobileControlTarget() function to get the name of the mobile control that sent the message.
I hope that helps.
Elanor