SpiderBasic

- a basic to master the web -
https://forums.spiderbasic.com/

Toolbarmobile() and Listmobile() issue

https://forums.spiderbasic.com/viewtopic.php?t=2878

Page 1 of 1

Toolbarmobile() and Listmobile() issue

Posted: Wed Dec 17, 2025 11:51 am
by Madmix
My first steps with Spiderbasic :)

What is wrong with this code?

Code: Select all

If ContainerMobile(#PB_Any, #PB_Mobile_Page, "padding-top:8px", "3lists")

  If ToolBarMobile(0)    
    ButtonMobile(#PB_Any, "LEFT", #PB_Mobile_Left)
    
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "")

      ListMobile(1, #PB_Mobile_InSet)    
      AddListMobileItem(1, "InSet1", #PB_Mobile_Header)
      AddListMobileItem(1, "Item 1")
      AddListMobileItem(1, "Item 2")  
      ListMobile(2, #PB_Mobile_InSet)    
      AddListMobileItem(2, "InSet2", #PB_Mobile_Header)
      AddListMobileItem(2, "Item 1")
      AddListMobileItem(2, "Item 2")  
      ListMobile(3, #PB_Mobile_InSet)    
      AddListMobileItem(3, "InSet3", #PB_Mobile_Header)
      AddListMobileItem(3, "Item 1")
      AddListMobileItem(3, "Item 2")  
      
      CloseMobileContainer()
    EndIf    
    
    ButtonMobile(#PB_Any, "RIGHT", #PB_Mobile_Right)
    
    CloseMobileContainer()
  EndIf
  
  CloseMobileContainer()
EndIf
OUTPUT:
Image

Is it possible to display three columns side by side?

Thank you in advance

Re: Toolbarmobile() and Listmobile() issue

Posted: Wed Dec 17, 2025 12:46 pm
by bembulak
I'm not entirely sure, what you want to achieve.
To me: your code basically looks okay. I just don't think, that a Mobile_List() is supposed to be in a ToolBarMobile().

Or more detailed:
I've done some tests and for me, it's NOT possible to create a ContainerMobile() and successfully put it into a ToolBarMobile(), whatever content the ContainerMobile() has.

What works in a ToolBarMobile():
Every Mobile_Gadget() that supports #PB_Mobile_Left, #PB_Mobile_Center, #PB_Mobile_Right should be fine, though.
Successfully tested so far:
  • TextMobile()
  • ButtonMobile()
  • ImageMobile() - not tested, but according to documentation it can be placed in a 3-Slot container. However, I think possible "image-size" could be an issue
  • ProgressBarMobile()
  • SwitchMobile()
Did you place your list by mistake into the Toolbar_Mobile()?

Re: Toolbarmobile() and Listmobile() issue

Posted: Wed Dec 17, 2025 1:30 pm
by Madmix
Hello. First of all, thank you very much for your detailed comments.
Indeed, I tried several containers and finally settled on the version with ToolBarMobile().

What I really want to achieve are three lists, side by side, like in this example:
Image

Re: Toolbarmobile() and Listmobile() issue

Posted: Wed Dec 17, 2025 4:33 pm
by bembulak
Thank you for the clarification.

I'm currently working with SB 3.20 beta 2 and this seems to have some issues.
The 'mobileUI.sb' example isn't even loading; when tinkering around to resemble your idea (3 lists next to each other), I have strange behaviour. Would be good if anyone else could test & confirm, or tell, where the code is wrong.

Re: Toolbarmobile() and Listmobile() issue

Posted: Wed Dec 17, 2025 6:14 pm
by Madmix
bembulak wrote: Wed Dec 17, 2025 4:33 pm Thank you for the clarification.

I'm currently working with SB 3.20 beta 2 and this seems to have some issues.
The 'mobileUI.sb' example isn't even loading; when tinkering around to resemble your idea (3 lists next to each other), I have strange behaviour. Would be good if anyone else could test & confirm, or tell, where the code is wrong.
Thank you very much... That's unfortunate :( I'm using SB 3.10 and mobileUI.sb runs correctly.
Let's see if someone else can enlighten us :)

Re: Toolbarmobile() and Listmobile() issue

Posted: Wed Dec 17, 2025 7:55 pm
by bembulak
I've installed 3.10 now, just to make sure we're on the same version.
I don't know the internals of OnsenUI (which SB uses for MobileUI to my knowledge), but it does not seem to me, that it's able to display what your example above shows out of the box.
Does not mean, it's impossible at all though. ;)

My first take on this is this:

Code: Select all

Enumeration
  #PAGE
  #LIST
EndEnumeration

Procedure MyAddListItem(theGadget, Left$, Center$, Right$)
  If AddListMobileItem(theGadget, "", #PB_Mobile_Container)
    TextMobile(#PB_Any, Left$, #PB_Mobile_Left)
    TextMobile(#PB_Any, Center$, #PB_Mobile_Center)
    TextMobile(#PB_Any, Right$, #PB_Mobile_Right)
  EndIf
EndProcedure

If ContainerMobile(#PAGE, #PB_Mobile_Page)
    
  ListMobile(#LIST)
  For i = 1 To 10
    MyAddListItem(#LIST, "Left " + Str(i), "Center " + Str(i), "Right " + Str(i))
  Next i
EndIf
But as I've seen, you may want to different amount of items in each list.
You could switch to the normal Gadgets, as they support this easily. ListItem with 3 Columns or 3 Lists.
3 lists do have the advantage of allowing different lines to be selected.

Code: Select all

Enumeration
  #Window
  #ListA
  #ListB
  #ListC
EndEnumeration

OpenWindow(#Window, 0, 0, 10, 10, "Lists", #PB_Window_Background)
ListViewGadget(#ListA, 0, 0, WindowWidth(#Window)/3, WindowHeight(#Window), #PB_ListView_ClickSelect)
ListViewGadget(#ListB,  WindowWidth(#Window)/3, 0, WindowWidth(#Window)/3, WindowHeight(#Window), #PB_ListView_ClickSelect)
ListViewGadget(#ListC, (WindowWidth(#Window)/3)*2, 0, WindowWidth(#Window)/3, WindowHeight(#Window), #PB_ListView_ClickSelect)

; Let's fill List-A
For i = 0 To 30
  AddGadgetItem(#ListA, -1, "Item A."+Str(i))
Next

; Let's fill List-B

For i = 0 To 8
  AddGadgetItem(#ListB, -1, "Item B."+Str(i))
Next

For i = 0 To 50
  AddGadgetItem(#ListC, -1, "Item C."+Str(i))
Next

Re: Toolbarmobile() and Listmobile() issue

Posted: Thu Dec 18, 2025 7:22 am
by Madmix
That code is fantastic! It's great for helping me move forward, I'm really looking forward to SB! And if anyone else can contribute anything else later on, it will be very welcome :)

Thank you very much for your time!

Re: Toolbarmobile() and Listmobile() issue

Posted: Thu Dec 18, 2025 4:36 pm
by munfraid
Madmix wrote: Thu Dec 18, 2025 7:22 am And if anyone else can contribute anything else later on, it will be very welcome :)
Based on your screenshot and bembulak's code I added some coloring and resizing.

Code: Select all

;- meta
EnableExplicit

#AppName = "Lists"
#Title = "3 Lists Example"

Enumeration
  #Window
  #Text_Title
  #Font_Title
  #List_A
  #List_B
  #List_C
  #Font_Lists
EndEnumeration


;- settings
Global vspacer.f = 2.5       ; percentage of vertical space between gadgets
Global hspacer.f = 3         ; percentage of horizontal space between gadgets
Global titleHeight.f = 3     ; percentage of screen height for the title 

; colors
Define bgColor = $333333
Define listAcolor = $CDD939
Define listBcolor = $253FF0
Define listCcolor = $05ACF7


Procedure resize() 
  
  ; calculate spacings of gadgets, change it in the settings
  Protected hspace = WindowWidth(#Window) * hspacer * 0.01
  Protected vspace = WindowHeight(#Window) * vspacer * 0.01
  
  ; title 
  Protected txtHeight = WindowHeight(#Window) * titleHeight * 0.01
  ResizeGadget(#Text_Title, hspace, vspace, WindowWidth(#Window) - 2 * hspace, WindowHeight(#Window) - 3 * vspace)
  LoadFont(#Font_Title, "Arial", txtHeight, #PB_Font_Bold)
  SetGadgetFont(#Text_Title, FontID(#Font_Title))
  
  ; lists
  Protected listWidth = (WindowWidth(#Window) - 4 * hspace) / 3
  Protected listHeight = WindowHeight(#Window) - 3 * vspace - txtHeight
  ResizeGadget(#List_A, hspace, 2 * vspace + txtHeight, listWidth, listHeight)  
  ResizeGadget(#List_B, hspace * 2 + listWidth, 2 * vspace + txtHeight, listWidth, listHeight)  
  ResizeGadget(#List_C, hspace * 3 + 2 * listWidth, 2 * vspace + txtHeight, listWidth, listHeight)  
  LoadFont(#Font_Lists, "Arial", txtHeight * 0.6)
  SetGadgetFont(#List_A, FontID(#Font_Lists))
  SetGadgetFont(#List_B, FontID(#Font_Lists))
  SetGadgetFont(#List_C, FontID(#Font_Lists))
    
EndProcedure


;- ui
OpenWindow(#Window, 0, 0, 10, 10, #AppName, #PB_Window_Background)
SetWindowColor(#Window, bgColor)
TextGadget(#Text_Title, 0, 0, 0, 0, #Title)
SetGadgetColor(#Text_Title, #PB_Gadget_FrontColor, #White)
ListViewGadget(#List_A, 0, 0, 0, 0, #PB_ListView_ClickSelect)
SetGadgetColor(#List_A, #PB_Gadget_BackColor, $39D9CD)
ListViewGadget(#List_B, 0, 0, 0, 0, #PB_ListView_ClickSelect)
SetGadgetColor(#List_B, #PB_Gadget_BackColor, $253FF0)
ListViewGadget(#List_C, 0, 0, 0, 0, #PB_ListView_ClickSelect)
SetGadgetColor(#List_C, #PB_Gadget_BackColor, $05ACF7)
BindEvent(#PB_Event_SizeWindow, @Resize())
resize()


;- sample data
Define i

; Let's fill List-A
For i = 0 To 30
  AddGadgetItem(#List_A, -1, "Item A."+Str(i))
Next

; Let's fill List-B

For i = 0 To 8
  AddGadgetItem(#List_B, -1, "Item B."+Str(i))
Next

For i = 0 To 50
  AddGadgetItem(#List_C, -1, "Item C."+Str(i))
Next

Re: Toolbarmobile() and Listmobile() issue

Posted: Thu Dec 18, 2025 8:34 pm
by Madmix
munfraid wrote: Thu Dec 18, 2025 4:36 pm...
Based on your screenshot and bembulak's code I added some coloring and resizing. ...
Thank you! It works wonderfully :!:
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited