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 scrollerDidScroll
Deleting 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 closeCard
Testing on a mobile device
Deploy your app to a mobile device or simulator to test the scroller.