Creating a list with custom controls in group

[charms]

Hi there,

I have written a complete media player with LiveCode in under a week. But I'm really struggling to display items in a list nicely across all platforms (Mac, Windows, Android, IOS).

I don't really know if I do this the right way and there is not much information available.

I created a group and in the group script for each element I copy a group of two buttons inside (an "iconButton" and a "textButton"). Reason I don't only use one button is that it is not possible to align the text left to the icon in a button as the text will be aligned right.

I have following questions:
* Is this the right way to create a list with items? Or am I over-complicating something that is much easier to accomplish?
* On the IOS simulator it seems that the gaps between the group elements haven't the same spacing depending on the position of the scrollbar. What could be the problem there? It works on Mac. (see attached .tiff Screenshot)

I constantly bump in to new issues.

Here the code that is in the group

Code: Select all

on openControl
   removeButtons
   
   put the top of me + 10 into tTop
   put the left of me + 4 into tLeft
   put (the width of me - the scrollbarWidth of me - 10) into tWidth
   
   repeat with a = 1 to 30
      put "test_" & a into tName
      put "Test_" & a into tLabel
      
      copy group "templateBtn2" to me
      set the name of group "templateBtn2" to tName
      set the right of button "textBtn" of group tName to (the right of button "textBtn" of group tName - the scrollbarWidth of me + 8)
      set the label of button "textBtn" of group tName to tLabel
      set the lockLoc of button "iconBtn" of group tName to true
      set the lockLoc of button "textBtn" of group tName to true
      set the lockLoc of group tName to true
      set the top of group tName to tTop
      set the left of group tName to tLeft
      set the btType of group tName to "itemButton"
      put the bottom of group tName - 6 into tTop
   end repeat
end openControl

on removeButtons
   local a
   
   -- Lock the screen so that this is nice and fast
   lock screen
   -- Loop through all the controls in the stack. NOTE: we have to loop downwards to zero as we may be
   -- removing controls while in the loop - not doing this causes Badness.
   repeat with a = the number of controls down to 1
      -- Check the custom property "cPreviewControl" to see if this control is a thumbnail image and delete it.
      if the btType of control a is "itemButton" then delete control a
   end repeat
   unlock screen
end removeButtons

It would be great if anybody could give me a hint.

Thanks,
Chris

[Simon]

Hi Chris,
Ok so this is just to address the 2 button thing... use a field:

Code: Select all

on mouseUp
   set the fixedLineHeight of the templateField to false
   set the height of the templateField to 45 --based on image size
   put "e" into the templateField --anything will do
   create field
   set the imageSource of char 1 of last fld to 1003 ---ooops forgot to test if I could do this before "create", 1003 is the img id
   put space after last field --very important for the textShift to work
   set textShift of char 1 of last field to 10 -- based on your image size
put "Your label" after last field
end mouseUp

Does that help?


Simon

[charms]

Hi Simon,

Thanks for your approach with the imageSource set to a char. That's what I like about LiveCode

I have replaced my group with your solution but still I get inconsistent spaces between the items. So I maybe it is a bug. I will open a bug report for this.

@All: If there are any other options to create a list with nice looking buttons or if somebody knows how to solve the spacing issue on IOS it would be great to know.

Kind regards,
Chris