How to: Make scroll view for my controls in group?

[Cheong]

Dear readers,

I have a project I've been working on and I need to make it scroll-able vertically for the group that contains the controls generated by code.
Here's the example of it:

The link of code examples I explored searching online:
1.) http://lessons.livecode.com/m/4071/l/44 ... chitecture
2.) http://lessons.livecode.com/m/4069/l/94 ... ll-a-field

But these link doesn't exactly helped me in scrolling my group.

Any idea?

[Simon]

Hi Cheong,
Try this lesson;
http://lessons.livecode.com/m/4069/l/94 ... ll-a-field
Now that uses a field to scroll but it's the same idea for buttons. Just group them all together and reduce the size of the group..

Simon

[Cheong]

Hi Simon,

I have tried that and opening the example scroller-example file that the website provided, it doesn't scroll/move... Is it needed to be tested in mobile right away to see the effect? Or it supposed to be scroll-able even in desktop/editor testing?

[Simon]

Hi Cheong,
It's for mobile only, see all those "mobileControlxxx" that a clear sign it mobile only.

Simon

[MaxV]

Hi Simon,

I have tried that and opening the example scroller-example file that the website provided, it doesn't scroll/move... Is it needed to be tested in mobile right away to see the effect? Or it supposed to be scroll-able even in desktop/editor testing?

All native controls are created on the fly by Android/iOS, so you can't test it on PC, but just on Android/iOS emulators or devices.

[Cheong]

Thanks MaxV and Simon,

But I still can't scroll my group. I followed the coding in the link given by Simon here.
I made some modification though.

Instead of using Field as content, I use the group as the content.
Here are the code modified:

Code: Select all

on openCard
 if there is a group "VisibleArea" then 
      delete group "VisibleArea"
      create group "VisibleArea"
      set the width of group "VisibleArea" to 360
      set the height of group "VisibleArea" to 585
      set the location of group "VisibleArea" to 180,0
      set the LockLocation of group "VisibleArea" to true
   else 
      create group "VisibleArea"
      set the width of group "VisibleArea" to 360
      set the height of group "VisibleArea" to 585
      set the location of group "VisibleArea" to 180,0
      set the LockLocation of group "VisibleArea" to true
   end if
   
   if environment() is "mobile" then
      put the rect of group "VisibleArea" into tScrollerRect
      
      // Set the are of the content to be scrolled
      put the left of grp "CCTVList",the top of grp "CCTVList",the right of grp "CCTVList",the formattedHeight of field "CCTVList" into tContentRect
      
      // Create the scroller control
      mobileControlCreate "scroller", "groupScroll"
      put the result into sScrollerID
      
      // Set the properties of the scroller
      mobileControlSet "groupScroll", "rect", tScrollerRect
      mobileControlSet "groupScroll", "contentRect", tContentRect
      mobileControlSet "groupScroll", "visible", true
      mobileControlSet "groupScroll", "scrollingEnabled", true
      mobileControlSet "groupScroll", "vIndicator", true
      mobileControlSet "groupScroll", "vscroll", 0
   end if
end openCard

on closeCard
    if environment() is not "mobile" then exit closeCard
   mobileControlDelete sScrollerID
end closeCard

on scrollerDidScroll hOffset, vOffset
   // When the user scrolls move the displayed content
   set the vScroll of group "VisibleArea" to vOffset
end scrollerDidScroll

Any idea why it can't scroll?

[Simon]

ooops
...
put the left of grp "CCTVList",the top of grp "CCTVList",the right of grp "CCTVList",the formattedHeight of field "CCTVList" into tContentRect
...
Don't know if that will fix it but I don't think you want that.

Simon

[SparkOut]

The group "visibleArea" is not really useful for anything. Set the scrolling area directly, and the scrolling content area using the formatted rect of the group "CCTVList".
Then in the scrollerdidscroll handler, set the vScroll of group " CCTVList". As group "visible area" has no content, it will never scroll.

[Dixie]

hi...

I've attached a stack that will build scrolling groups for you... all the handlers are in the card script..
It will run in the simulator or device, not in the IDE...

[Cheong]

Thanks people...

Ops! Changed from field to group, then changed the last part to this:

Code: Select all

  put the rect of group "CCTVList" into tScrollerRect

and finally it works!

I will look at your example stack and try to understand it, thanks Dixie!

[hrcap]

Hi All

I have been working through this forum today and have found it very useful to improve the scrolling of my layout, the scrolling group that I have now continues to scroll when you swipe your finger up and down and then decelerates to a stop as it does natively on iPhone which is great as it didn't do this before.

To complete the story I would like the group to bounce at the top and bottom to visually display that the max scroll up or scroll down has been reached. The scroll bar on the side of the layout does bounce but the actual group that is scrolling doesn't.

Any help would be brilliant.



CARD SCRIPT

Code: Select all

Created: 2019 04 20
Created By: HP
Modified: 2019 04 25
Modified By: HP
//----------------------------------
//----------------------------------
global g_debug_mode

global g_name_stack

global g_file_path_stack

global g_folder_scripts_location_main
global g_folder_scripts_location_sub

//----------------------------------

on preopencard
   //----------
   set the layerMode of group "group_settings_person" to "scrolling"
   
   set_locs
   
end preopencard





on openCard
   
   if environment() is "mobile" then
      
      put the rect of group "group_settings_person" into tScrollerRect
      
      // Set the area of the content to be scrolled
      put the left of grp "group_settings_person",the top of grp "group_settings_person",the right of grp "group_settings_person",the formattedHeight of grp "group_settings_person" + 100 into tContentRect
      
      // Create the scroller control
      mobileControlCreate "scroller", "groupScroll"
      put the result into sScrollerID
      
      
      // Set the properties of the scroller
      mobileControlSet "groupScroll", "rect", tScrollerRect
      mobileControlSet "groupScroll", "contentRect", tContentRect
      mobileControlSet "groupScroll", "visible", true
      mobileControlSet "groupScroll", "canBounce", "true"
      mobileControlSet "groupScroll", "pagingEnabled", "false"
      mobileControlSet "groupScroll", "scrollingEnabled", true
      mobileControlSet "groupScroll", "vIndicator", true
      mobileControlSet "groupScroll", "vscroll", 0
   end if
   
   
end openCard

on closeCard
   if environment() is not "mobile" then exit closeCard
   mobileControlDelete sScrollerID
end closeCard

on scrollerDidScroll hOffset, vOffset
   // When the user scrolls move the displayed content
   set the vScroll of group "group_settings_person" to vOffset
end scrollerDidScroll

end opencard












on resizeStack cardWidth, cardHeight 

   put the name of this stack into g_name_stack
   
   set_locs //command defined on the card script for setting the location of the objects on the card
   
end resizestack



//----------------------------------
//----------------------------------
//----------------------------------
//Commands
on set_locs
   
   // resets the scrolling of group_settings_person
   set the vScroll of group group_settings_person to 0
   set the hScroll of group group_settings_person to 0
   
   put (the width of stack g_name_stack / 2) into tX
   put (the height of stack g_name_stack / 2) into tY
   
   //------------------
   -- graphic "group_settings_person"
   set the width of group "group_settings_person" to the width of this stack + 6 --this slight add of width stops horizontal scrolling at the stacks min width
   set the left of group "group_settings_person" to - 3 --this ensures it stays central taking into account the slight add of width that stops horizontal scrolling at the stacks min width
   set the height of group "group_settings_person" to the height of this stack
   set the top of group "group_settings_person" to 0
   
   //------------------
   --rectangle_background_card
   set the width of graphic "rectangle_background_card" to the width of this stack - 6 --this slight add of width stops horizontal scrolling at the stacks min width
   set the left of graphic "rectangle_background_card" to 3 --this ensures it stays central taking into account the slight add of width that stops horizontal scrolling at the stacks min width
   set the top of graphic "rectangle_background_card" of me to 0
   
   --rectangle_header
   set the width of graphic "rectangle_header" to the width of this stack - 6 --this slight add of width stops horizontal scrolling at the stacks min width
   set the left of graphic "rectangle_header" of me to 3 --this ensures it stays central taking into account the slight add of width that stops horizontal scrolling at the stacks min width
   set the top of graphic "rectangle_header" of me to 0
   
   //------------------
   --button_done_to_persons_dashboard
   set the right of button "button_done_to_persons_dashboard" of me to the right of me - 5
   set the top of button "button_done_to_persons_dashboard" of me to 17
   
   //------------------
   --frame_profile_persons
   set the location of image "frame_profile_persons" of me to (tx - 132), 96
   
   --holder_picture_profile_person
   set the location of image "holder_picture_profile_person" of me to the location of image "frame_profile_persons" of me
   
   --svg_profile_person
   set the location of widget "svg_profile_person" of me to the location of image "frame_profile_persons" of me
   set the top of widget "svg_profile_person" of me to the top of widget "svg_profile_person" of me + 8
   
   --placeholder_profile_person
   set the location of field "placeholder_profile_person" of me to the location of image "frame_profile_persons" of me
   set the top of field "placeholder_profile_person" to (the top of field "placeholder_profile_person" of me + 33)
   
   
   -- button_delete_profile_picture_person
   set the location of field "button_delete_profile_picture_person" of me to (item 1 of the location of image holder_picture_profile_person - 22), (item 2 of the location of image holder_picture_profile_person + 57)
   
   -- button_save_profile_picture_person
   set the location of field "button_save_profile_picture_person" of me to (item 1 of the location of image holder_picture_profile_person + 22), (item 2 of the location of image holder_picture_profile_person + 57)
   
   //------------------
   -- field name_first
   set the location of field "name_first" of me to (tX + 53), 74
   
   -- graphic line_name_first_below
   set the location of graphic "line_name_first_below" of me to (tX + 61), 92
   
   //------------------
   -- field name_last
   set the location of field "name_last" of me to (tX + 30), 108
   
   -- graphic line_name_last_below
   set the location of graphic "line_name_last_below" of me to (tX + 61), 127
   
   //------------------
   -- field phone_mobile_personal
   set the left of field "phone_mobile_personal" of me to (tX - 67)
   set the top of field "phone_mobile_personal" of me to 166
   
   -- graphic line_phone_mobile_personal_below
   set the location of graphic "line_phone_mobile_personal_below" of me to (tX + 10), 196
   
   -- graphic line_phone_mobile_personal_left
   set the location of graphic "line_phone_mobile_personal_left" of me to (tX - 82), 177
   
   //------------------
   -- field label_phone_mobile_personal
   set the right of field "label_phone_mobile_personal" of me to (tX - 92)
   set the top of field "label_phone_mobile_personal" of me to 166
   
   //------------------
   -- field phone_home_personal
   set the left of field "phone_home_personal" of me to (tX - 67)
   set the top of field "phone_home_personal" of me to 208
   
   -- graphic line_phone_home_personal_below
   set the location of graphic "line_phone_home_personal_below" of me to (tX + 10), 239
   
   -- graphic line_phone_home_personal_left
   set the location of graphic "line_phone_home_personal_left" of me to (tX - 82), 220
   
   //------------------
   -- field label_phone_mhome_personal
   set the right of field "label_phone_home_personal" of me to (tX - 92)
   set the top of field "label_phone_home_personal" of me to 206
   
   //------------------
   -- group_email
   set the location of group "group_email" of me to (tx + 10), 283
   
   
   //------------------
   -- group_address
   set the location of group "group_address" of me to (tx + 10), 435
   
   //------------------
   -- group_country
   set the location of group "group_country" of me to (tx + 10), 586
   
   //------------------
   -- group_gender
   set the location of group "group_gender" of me to (tx + 10), 659
   
   
   //------------------
   -- group_national_identity_number
   set the location of group "group_national_identity_number" of me to (tx + 10), 733
   
   //------------------
   -- group_next_of_kin
   set the location of group "group_next_of_kin" of me to (tx + 10), 884
   
   
   
   
   
   
end set_locs

GROUP SCRIPT

Code: Select all

Created: 2019 04 20
Created By: HP
Modified: 2019 04 25
Modified By: HP
//----------------------------------
//----------------------------------
global g_scrolling
local sInitialMouseX, sInitialMouseY
local sInitialHScroll, sInitialVScroll

//----------------------------------


on mouseDown
select text of field "field_for_putting_focus_on" // ensures that the focus comes out of the field that is currently selected

## Allow the group to scroll
put true into g_scrolling

## Record the initial touch position
put item 1 of the mouseLoc into sInitialMouseX
put item 2 of the mouseLoc into sInitialMouseY

## Record the initial hScroll and vScroll
put the vScroll of me into sInitialVScroll
put the hScroll of me into sInitialHScroll
 end mouseDown


on mouseMove mouseX, mouseY
## If the screen is being touched then
if g_scrolling = "true" then 

## Calculate how far the touch has moved since it started
put mouseY - sInitialMouseY into tVChange
put mouseX- sInitialMouseX into tHChange

## Reset the hScroll and vScroll to follow the touch
lock screen
set the vScroll of me to sInitialVScroll - tVChange
set the hScroll of me to sInitialHScroll - tHChange
unlock screen

end if

end mouseMove


on mouseRelease
mouseUp

end mouseRelease


on mouseUp
put false into g_scrolling
end mouseUp

Many Thanks