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
Click to copy
  • 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
Click to copy

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
Click to copy

Testing on a mobile device

Deploy your app to a mobile device or simulator to test the scroller.

2 Comments

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

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.