Creating a Native Scroller for a Field

Creating a Native Scroller for a Field
A frequent question we are asked is how to set up a native mobile scroller to allow you to scroll the contents of a field - this lesson shows you how

By Elanor Buchanan

You can download the accompanying sample stack for this tutorial here.

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

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

About the Author

Elanor Buchanan is a Senior Software Developer for RunRev Ltd.

	Why Open Source
	Your Questions Answered
	White Slave Auction
	Native Scroller

What's New