iOS Native Scroll field

[robantonelli29GAgYtd]

I am having hard time turning a standard text field into a simple scrolling field that has the native scroller on an iOS device. How do you do this?

[FireWorx]

Hi,
I do this on all my Information screens of my apps. This works if you don't intend to edit the text within IOS and don't mind a white background. It's pretty easy. I use the iphoneControlCreate "multiline" command.

I don't even need to put the name of the control in a local variable and it works like a charm. Just grab an image from the tools palate and set it to the location rect you would like your scrolling text to show up at, open its property inspector and name it "InfoRect" and then make it invisible. Have your field named "info" contain the text content to scroll and make it invisible too. Then the script is short and sweet.

on opencard
if the environment is "mobile" then
if "testinput" is among the lines of iphoneControls() then
iphoneControlDelete "testinput"
end if
iphoneControlCreate "multiline", "testinput"
iphoneControlSet "testinput", "rect", the rect of image "InfoRect"
iphoneControlSet "testinput", "visible", true
iphoneControlSet "testinput", "fontsize", "15"
iphoneControlSet "testinput", "text", field "info"
iphoneControlSet "testinput","editable","false"
end if
end opencard

on closeCard
if the environment is "mobile" then iphoneControlDelete "testinput"
end closeCard

Dave

[Dixie]

Nice one...

Dixie

[robantonelli29GAgYtd]

Hi,
on opencard
if the environment is "mobile" then
if "testinput" is among the lines of iphoneControls() then
iphoneControlDelete "testinput"
end if
iphoneControlCreate "multiline", "testinput"
iphoneControlSet "testinput", "rect", the rect of image "InfoRect"
iphoneControlSet "testinput", "visible", true
iphoneControlSet "testinput", "fontsize", "15"
iphoneControlSet "testinput", "text", field "info"
iphoneControlSet "testinput","editable","false"
end if
end opencard

on closeCard
if the environment is "mobile" then iphoneControlDelete "testinput"
end closeCard

Dave

Dave - thanks it worked like a charm! I can deal with the background being white. However, just for learning purposes, if i wanted to change the color of it to a particular color, or say make it have a transparent fill, how would I do that?

Thanks again
rob

[FireWorx]

Here ya go.
The basics. Create a field and uncheck the focus boxes in the property inspector so the keyboard doesn't pop up in IOS. Paste a bunch of text in the field so it runs off the page. Group the text. You may need to add an object that you can delete later to have two objects to group. (not sure). drag drag drag the group upwards until ou get to the bottom. Now shrink from the bottom up until the group fits on the card. Now set the size and position to fixed in the groups property inspector. See how you have a lot of text hidden now within the group? Yea.. so now the card script sets the content of the scroller to the long list of text but the rect of the scroller to the fixed group size on the card. Walla ! scrolling text. Just remember that if you resize the group move it around on the card etc you will red to lock its size again when your done.

Have fun. Dave

Here is the card script. Seems the file did not want to upload.


local myScroller
on OpenCard
   if the environment is not "mobile" then
      exit OpenCard
   end if
   
   --make sure the object to scroll is the right size to fit the content
   set the height of fld "menu" to the formattedheight of fld "menu"
   set the unboundedHScroll of group "scrollGroup" to true
   set the unboundedVScroll of group "scrollGroup" to true
   iphoneControlCreate "scroller"
   put the result into myScroller
   iphoneControlSet myScroller, "rect", the rect of group "scrollGroup"
   
   --contentRect should match the actual content size of the object
   iphoneControlSet myScroller, "contentRect", (0, 0, the width of fld 1, the formattedHeight of fld 1)
   
   iphoneControlSet myScroller, "visible", "true"
   iphoneControlSet myScroller, "canBounce", "true"
   iphoneControlSet myScroller, "pagingEnabled", "false"
   iphoneControlSet myScroller, "canScrollToTop", "true"
   resizeStack
end OpenCard

on closeCard
   if the environment is not "mobile" then
      exit closeCard
   end if
   iphoneControlDelete myScroller
end closeCard

on resizeStack
   if the environment is not "mobile" then
      exit resizeStack
   end if
   set the hScroll of group "scrollGroup" to 0
   set the vScroll of group "scrollGroup" to 0
   iphoneControlSet myScroller, "rect", the rect of group "scrollGroup"
   iphoneControlSet myScroller, "hscroll", 0
   iphoneControlSet myScroller, "vscroll", 0
end resizeStack

on scrollerDidScroll pOffsetX, pOffsetY
   lock screen
   set the hScroll of group "scrollGroup" to pOffsetX
   set the vScroll of group "scrollGroup" to pOffsetY
   unlock screen
end scrollerDidScroll

[robantonelli29GAgYtd]

Here ya go.
The basics. Create a field and uncheck the focus boxes in the property inspector so the keyboard doesn't pop up in IOS. Paste a bunch of text in the field so it runs off the page. Group the text. You may need to add an object that you can delete later to have two objects to group. (not sure). drag drag drag the group upwards until ou get to the bottom. Now shrink from the bottom up until the group fits on the card. Now set the size and position to fixed in the groups property inspector. See how you have a lot of text hidden now within the group? Yea.. so now the card script sets the content of the scroller to the long list of text but the rect of the scroller to the fixed group size on the card. Walla ! scrolling text. Just remember that if you resize the group move it around on the card etc you will red to lock its size again when your done.

Have fun. Dave

Here is the card script. Seems the file did not want to upload.


local myScroller
on OpenCard
   if the environment is not "mobile" then
      exit OpenCard
   end if
   
   --make sure the object to scroll is the right size to fit the content
   set the height of fld "menu" to the formattedheight of fld "menu"
   set the unboundedHScroll of group "scrollGroup" to true
   set the unboundedVScroll of group "scrollGroup" to true
   iphoneControlCreate "scroller"
   put the result into myScroller
   iphoneControlSet myScroller, "rect", the rect of group "scrollGroup"
   
   --contentRect should match the actual content size of the object
   iphoneControlSet myScroller, "contentRect", (0, 0, the width of fld 1, the formattedHeight of fld 1)
   
   iphoneControlSet myScroller, "visible", "true"
   iphoneControlSet myScroller, "canBounce", "true"
   iphoneControlSet myScroller, "pagingEnabled", "false"
   iphoneControlSet myScroller, "canScrollToTop", "true"
   resizeStack
end OpenCard

on closeCard
   if the environment is not "mobile" then
      exit closeCard
   end if
   iphoneControlDelete myScroller
end closeCard

on resizeStack
   if the environment is not "mobile" then
      exit resizeStack
   end if
   set the hScroll of group "scrollGroup" to 0
   set the vScroll of group "scrollGroup" to 0
   iphoneControlSet myScroller, "rect", the rect of group "scrollGroup"
   iphoneControlSet myScroller, "hscroll", 0
   iphoneControlSet myScroller, "vscroll", 0
end resizeStack

on scrollerDidScroll pOffsetX, pOffsetY
   lock screen
   set the hScroll of group "scrollGroup" to pOffsetX
   set the vScroll of group "scrollGroup" to pOffsetY
   unlock screen
end scrollerDidScroll

Dave, this also worked wonders. I followed the code exactly and now am running into only two small issues. 1. When in simulator, and i scroll all the way to the bottom of the text, there is a handful of blank space. But in the contents of the field (looking through the property inspector) there is no blank space. 2. The text scrolls fine, the problem is that the "Top" of the actual text field isn't the "top" of the group. In essence there is some text hidden up under the top of the group. No clue why either of these two things are happening. Any thoughts? Ill upload the stack. Just a basic test stack.

[FireWorx]

Select the group and enter edit mode. Move the text field down towards the bottom of the group and then test it in the tester again. The top of the field should start to come into view. You may have to play with it to get it perfect. I don't use this much so others may be able to assist if this doesn't work. There is also code to set the scroll to top for every time you return to the card etc. Check this forum there are tons of threads on this stuff.

Seems like the majority of issues people are having is leaving the card and coming back to it and not being able to scroll at that point. The word on the street is it's just text fields that have that problem not graphics or scrolling groups So a possible fix is grouping the text field and let it reside within the scroll group and then set the content height to the text group rather than the text field. (GUESSING)

I personally use a table object from www.tactileMedia.com that is a group and I place it into another My-scroll group and set the scroll content height to the number of lines in the table object group x the line height. Because the text varies the scroll is always right on. I also check the number of lines and if it is less that the height of the scroll group I don't set the scroller at all because its just not necessary. If you have an iPad search the iTunes store for "Map Grid Pro" free download and check it out. If you want to see how I scroll html edited on the fly you can download my calendar app "Cool Cal" in the app store but that will cost ya a cool 99 cents. =]
Dave

[marksmithhfx]

Hi,
I do this on all my Information screens of my apps. This works if you don't intend to edit the text within IOS and don't mind a white background. It's pretty easy. I use the iphoneControlCreate "multiline" command.

Dave, this worked really well. Thanks for posting. Do you know if it's possible to get the border of "InfoRect" to also appear in iOS? I've tried but it just flashes and disappears. Thanks

Mark

[marksmithhfx]

Hi,
I do this on all my Information screens of my apps. This works if you don't intend to edit the text within IOS and don't mind a white background. It's pretty easy. I use the iphoneControlCreate "multiline" command.

Dave, this worked really well. Thanks for posting. Do you know if it's possible to get the border of "InfoRect" to also appear in iOS? I've tried but it just flashes and disappears. Thanks

Mark

Answering my own question, I just put another rectangle image on the card but 2 pixels wider and taller, layered it on top of InfoRect (set Opaque off so InfoRect shows through), and set the show border to be true. Works like a charm. Still find it odd that you can't have show border on the original rect. Obviously something there I don't understand, but as with many things in LC, it's sometimes possible to engineer a workaround... and move on

Cheers,
Mark