Toolbarmobile() and Listmobile() issue

[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:


Is it possible to display three columns side by side?

Thank you in advance

[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()?

[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:

[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.

[Madmix]

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

[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

[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!

[munfraid]

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

[Madmix]

...
Based on your screenshot and bembulak's code I added some coloring and resizing. ...

Thank you! It works wonderfully