Creating a native scroller to scroll a field
In this lesson we will see how to set up a native mobile scroller to allow you to scroll the contents of a field.
Create your content
The first step is to add the content you wish to display to the stack. In this case we are using a field to display text. Make the field large enough to show all the text. Lock the size and position of the field
Create a group
Now group your field and set the size of the group to the area you want to be shown in your app. Lock the size and position of the group.
The group will be used to set the size of the scrollable area.
Create the scroller
We will set up the scroller in the preOpenCard handler of the card script. Any messages sent my the scroller are sent to the control that created it so we can also handle the messages in the card script.
Firstly we check the environment as we only want to create the scroller on mobile.
NOTE: mobile controls do not work in the IDE.
if environment() is not "mobile" then exit preOpenCard
We then work out what area the scroller should work over and the area of the content to be scrolled. The scroller should take up the same area as the group and should allow the full area of the field to be scrolled into view.
put the rect of group "scrollArea" into tScrollerRect put the left of field "lorem",the top of field "lorem",the right of field "lorem",the formattedHeight of field "lorem" into tContentRect
If you experience hidden text in your field after a scroll please replace the above script with :
put 0,0,(the formattedWidth of group "scrollArea"),(the formattedHeight of group "scrollArea") into tContentRect -
Now create the scroller and store the ID of the created control in a script local variable
mobileControlCreate "scroller", "loremScroll" put the result into sScrollerID
Set up the properties of the scroller
We need to set the properties of the scroller so it behaves as we want. We set the rect, the content rect, the visibility, whether the scroll indicator shows and the initial scroll.
mobileControlSet "loremScroll", "rect", tScrollerRect mobileControlSet "loremScroll", "contentRect", tContentRect mobileControlSet "loremScroll", "visible", true mobileControlSet "loremScroll", "scrollingEnabled", true mobileControlSet "loremScroll", "vIndicator", true mobileControlSet "loremScroll", "vscroll", 0
Handle the scroll message
The scroller sends messages which you can handle to implement scrolling. In this case we want to set the vScroll of the group to scroll the content into view
on scrollerDidScroll hOffset, vOffset // When the user scrolls move the displayed content set the vScroll of group "scrollArea" to vOffset end scrollerDidScroll