SpiderBasic 3.0 est disponible, ajout de la bibliothèque MobileUI

**comtois** · 07/06/2024, 21h38

J'ai laissé passer quelques versions, en voici une importante :

The next major version of SpiderBasic is coming and brings a brand new library to easy create mobile UI, with both Android and iOS native look ! As the lib is big, this is a still a work in progress to get your feedback and see what should be added/modified to get good mobile UI support. We use a patched version of OnsenUI 2 to power this (https://onsen.io/)

The idea behind the layout is to have some container (Page, Navigator, TabBar) and then you can add a toolbar, some rows and/or a list. Each row or list item can contain up to 3 objects (on left, center and right). While testing this, resize your navigator to have a mobile look for better experience. Here is the complete commandlist:

FreeMobile, Long (#Mobile) - Frees the mobile object.
IsMobile, Long (#Mobile) - Tests if the given mobile object is initialized.
DisableMobile, Long, Long (#Mobile, State) - Disable or enable the given mobile object.
AlertMobile, String (Text$) - Display an alert.
ContainerMobile, Long, Long, [String], [String], (#Mobile, Type [, Style$ [, Identifier$]]) - Create a new mobile container.
CheckBoxMobile, Long, String, [Long], (#Mobile, Text$ [, Flags]) - Create a new mobile checkbox in the current container.
OptionMobile, Long, String, String, [Long], (#Mobile, Text$, Group$ [, Flags]) - Create a new mobile option in the current container.
ButtonMobile, Long, String, [Long], (#Mobile, Text$ [, Flags]) - Create a new mobile button in the current container.
TextMobile, Long, String, [Long], (#Mobile, Text$ [, Flags]) - Create a new mobile text in the current container.
SwitchMobile, Long, [Long], (#Mobile [, Flags]) - Create a new mobile switch in the current container.
InputMobile, Long, String, [String], [Long], (#Mobile, Text$ [, PlaceHolder$ [, Flags]]) - Create a new mobile input in the current container.
TrackBarMobile, Long, Long, Long, Long, [Long], (#Mobile, Minimun, Maximum, Step [, Flags]) - Create a new mobile trackbar in the current container.
ProgressBarMobile, Long, [Long], (#Mobile [, Flags]) - Create a new mobile progressbar in the current container.
IconMobile, Long, String, [Long], (#Mobile, Name$ [, Flags]) - Create a new mobile icon in the current container.
ToolBarMobile, Long (#Mobile) - Create a new mobile toolbar in the current container.
CloseMobileContainer () - Close the current mobile container.
HtmlMobile, String (Text$) - Append raw HTML in the current container.
ImageMobile, Long, Long, [Long], (#Mobile, ImageID, [, Flags]) - Create a new mobile image in the current container.
GetMobileText, Long (#Mobile) - Return the mobile text.
SetMobileText, Long, String (#Mobile, Text$) - Change the mobile text.
GetMobileAttribute, Long, String, [Long], (#Mobile, Attribute$ [, Item]) - Return the mobile attribute.
SetMobileAttribute, Long, String, String, [Long], (#Mobile, Attribute$, Value$ [, Item]) - Change the mobile attribute.
ListMobile, Long, [Long], (#Mobile [, Flags]) - Create a new mobile list in the current container.
AddListMobileItem, Long, String, [Long], (#Mobile, Text$ [, Flags]) - Add a new item to a mobile list.
TabBarMobile, Long, [Long], (#Mobile [, Flags]) - Create a new mobile tab bar in the current container.
AddTabBarMobileItem, Long, String, String, String, String, [Long], (#Mobile, Text$, Icon$, ActiveIcon$, Page$ [, NbBadges]) - Add a new tab to a mobile tab bar.
NavigatorMobile, Long, String, [Long], (#Mobile, Page$ [, Flags]) - Create a new mobile navigator in the current container.
ChangeNavigatorMobilePage, Long, Long, [String], (#Mobile, Action [, Page$]) - Changet the mobile navigator page.
SplitterMobile, Long, String, String, [Long], (#Mobile, MenuPage$, ContentPage$ [, Flags]) - Create a new mobile splitter.
GetMobileState, Long, (#Mobile) - Get the current mobile state.
SetMobileState, Long, Long, (#Mobile, State) - Change the mobile state.
SetActiveMobile, Long, (#Mobile) - Change the current active mobile.
GetActiveMobile, Long, () - Get the current active mobile.
ShowMobile, Long, Long, [Long], (#Mobile, State [, #TargetMobile]) - Change the mobile visibility.
MobileStyle, Long, (Style) - Change the mobile rendering style.

- Added: AddTimer() and RemoveTimer() to have window independant timers.
- Added: SplashScreenControl() to handle when closing the splashscreen.
- Changed: the compile app window has now an editor gadget instead of a listview, allowing for select/pasting output to ease debugging app creation errors

Some example to get started (you can also build a mobile app to see how it really behaves on phone):

Example with a tabbar and many objects

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
EnableExplicit
 
; Will use iOS style on iOS device and web and Material style on Android device. To force the style, use #PB_Mobile_Android or #PB_Mobile_iOS
;MobileStyle(#PB_Mobile_Android)
 
Enumeration
  #Dialog
  #OpenDialogButton
  #CloseDialogButton
  #AddRowButton
  #InputName
  #List
  #PopOver
  #OpenPopOverButton
  #ClosePopOverButton
  #Option1
  #Option2
  #Option3
  #ListInSet
  #ListInSet2
  #TrackBar
  #CheckBox
  #TrackBarInfo
  #ToolBar
  #ToolBarLeftButton
  #ToolBarRightButton
  #TabBar
  #GoToTab3
EndEnumeration
 
 
If ContainerMobile(#Dialog, #PB_Mobile_Dialog, "padding:8px")
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px")
    TextMobile(#PB_Any, "This is a dynamic dialog box", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
 
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px")
    ButtonMobile(#CloseDialogButton, "Close", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
 
  CloseMobileContainer()
EndIf
 
; The PopOver dialog
;
If ContainerMobile(#PopOver, #PB_Mobile_PopOver)
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px")
    ButtonMobile(#ClosePopOverButton, "Close", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
 
  CloseMobileContainer()
EndIf
 
; Create an image
;
CreateImage(0, 200, 30, 24, RGB(255, 0, 0))
If StartDrawing(ImageOutput(0))
  Box(4, 4, 192, 22, RGB(255, 128, 128))
  StopDrawing()
EndIf
 
; Template page 1 for the TabBar
;
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "tab1")
 
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px")
    ButtonMobile(#OpenDialogButton, "Open Dialog", #PB_Mobile_Left)
    ImageMobile(#PB_Any, ImageID(0), #PB_Mobile_Center)
    ProgressBarMobile(#PB_Any, #PB_Mobile_Indeterminate | #PB_Mobile_Circular | #PB_Mobile_Right)
    CloseMobileContainer()
  EndIf
 
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px")
    ButtonMobile(#AddRowButton, "Add Row", #PB_Mobile_Left)  
    InputMobile(#InputName, "", "Enter your name", #PB_Mobile_Search | #PB_Mobile_Center)
    SwitchMobile(#PB_Any, #PB_Mobile_Right)
    CloseMobileContainer()
  EndIf
 
  ListMobile(#List)
  AddListMobileItem(#List, "Hello", #PB_Mobile_Container)
    TextMobile(#PB_Any, "PopOver", #PB_Mobile_Left)
    ButtonMobile(#OpenPopOverButton, "Open PopOver !", #PB_Mobile_Center)
    SwitchMobile(#PB_Any, #PB_Mobile_Right)
  CloseMobileContainer()
 
  AddListMobileItem(#List, "", #PB_Mobile_Container)
    ButtonMobile(#GoToTab3, "Go Tab 3", #PB_Mobile_Left)
    InputMobile(#PB_Any, "Label", "Enter name", #PB_Mobile_Center | #PB_Mobile_Numeric)
    SwitchMobile(#PB_Any, #PB_Mobile_Right)
  CloseMobileContainer()
 
  AddListMobileItem(#List, "", #PB_Mobile_Container)
    IconMobile(#PB_Any, "md-volume-down", #PB_Mobile_Left)  
    TrackBarMobile(#TrackBar, 0, 200, 10, #PB_Mobile_Center)  
    IconMobile(#PB_Any, "md-volume-up", #PB_Mobile_Right)  
  CloseMobileContainer()
 
  ; Add an expandable item to the list
  ;
  If AddListMobileItem(#List, "Expand me !", #PB_Mobile_Expandable)
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding: 8px;", "")
      TextMobile(#TrackBarInfo, "", #PB_Mobile_Left)
      ImageMobile(#PB_Any, ImageID(0), #PB_Mobile_Center)
      SwitchMobile(#PB_Any, #PB_Mobile_Right)
      CloseMobileContainer()
    EndIf
    CloseMobileContainer()
  EndIf
 
  AddListMobileItem(#List, "", #PB_Mobile_Tappable | #PB_Mobile_Container)
    CheckBoxMobile(#CheckBox, "Click me !", #PB_Mobile_Left)
  CloseMobileContainer()
 
  AddListMobileItem(#List, "Options", #PB_Mobile_Header)
  If AddListMobileItem(#List, "", #PB_Mobile_Tappable | #PB_Mobile_Container)
    OptionMobile(#Option1, "Red", "Colors", #PB_Mobile_Left)
    CloseMobileContainer()
  EndIf
  If AddListMobileItem(#List, "", #PB_Mobile_Tappable | #PB_Mobile_Container)
    OptionMobile(#Option2, "Green", "Colors", #PB_Mobile_Left)
    CloseMobileContainer()
  EndIf
  If AddListMobileItem(#List, "", #PB_Mobile_Tappable | #PB_Mobile_Container)
    OptionMobile(#Option3, "Blue", "Colors", #PB_Mobile_Left)
    CloseMobileContainer()
  EndIf
 
  AddListMobileItem(#List, "Tappable item", #PB_Mobile_Tappable)
  AddListMobileItem(#List, "Chevron item", #PB_Mobile_Chevron | #PB_Mobile_Tappable)
 
 
  AddListMobileItem(#List, "No Divider", #PB_Mobile_Header)
  AddListMobileItem(#List, "Item 1", #PB_Mobile_NoDivider)
  AddListMobileItem(#List, "Item 2", #PB_Mobile_NoDivider)
 
  AddListMobileItem(#List, "Long Divider", #PB_Mobile_Header)
  AddListMobileItem(#List, "Item 3", #PB_Mobile_LongDivider)
  AddListMobileItem(#List, "Item 4", #PB_Mobile_LongDivider)
  AddListMobileItem(#List, "Item 5", #PB_Mobile_LongDivider)
 
  HtmlMobile("<br/>")
  ListMobile(#ListInSet, #PB_Mobile_InSet)
  AddListMobileItem(#ListInSet, "InSet", #PB_Mobile_Header)
  AddListMobileItem(#ListInSet, "Item", #PB_Mobile_NoDivider)
  AddListMobileItem(#ListInSet, "Item 2", #PB_Mobile_NoDivider)
  HtmlMobile("<br/>")
 
  CloseMobileContainer()
EndIf
 
; Template page 2 for the TabBar
;
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "tab2")
  TextMobile(#PB_Any, "Page 2", #PB_Mobile_Center)
  SwitchMobile(#PB_Any, #PB_Mobile_Right)
 
  CloseMobileContainer()
EndIf
 
; Template page 3 for the TabBar
;
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "tab3")
  TextMobile(#PB_Any, "Page 3", #PB_Mobile_Center)
  InputMobile(#PB_Any, "place !", "Initial text", #PB_Mobile_Search)
 
  CloseMobileContainer()
EndIf
 
; Template page 4 for the TabBar
;
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "padding-top:8px", "tab4")
  ListMobile(#ListInSet2, #PB_Mobile_InSet)
  AddListMobileItem(#ListInSet2, "InSet", #PB_Mobile_Header)
  AddListMobileItem(#ListInSet2, "Item 1", #PB_Mobile_NoDivider)
  AddListMobileItem(#ListInSet2, "Item 2", #PB_Mobile_NoDivider)
 
  CloseMobileContainer()
EndIf
 
; This is the main page where all the components are added
;
If ContainerMobile(#PB_Any, #PB_Mobile_Page, "", "")
 
  ; A top toolbar
  ;
  ToolBarMobile(#ToolBar)
    ButtonMobile(#ToolBarRightButton, "Right", #PB_Mobile_Right)
    TextMobile(#PB_Any, "SpiderBasic App", #PB_Mobile_Center)
    ButtonMobile(#ToolBarLeftButton, "Left", #PB_Mobile_Left)
  CloseMobileContainer()
 
  TabBarMobile(#TabBar)
    AddTabBarMobileItem(#TabBar, "", "md-face", "md-face", "tab1")
    AddTabBarMobileItem(#TabBar, "Info", "", "", "tab2")
    AddTabBarMobileItem(#TabBar, "Params", "md-settings", "md-settings", "tab3", 10)
    AddTabBarMobileItem(#TabBar, "List", "md-settings", "md-settings", "tab4")
  CloseMobileContainer()
 
  CloseMobileContainer()
EndIf
 
 
Procedure MobileEvents()
  Debug "#Mobile: "+EventMobile() + " - EventType: " + EventType() + " - EventData: " + EventData()
 
  Select EventMobile()
    Case #OpenDialogButton
      ShowMobile(#Dialog, #True)
 
    Case #CloseDialogButton
      ShowMobile(#Dialog, #False)
 
    Case #OpenPopOverButton
      ShowMobile(#PopOver, #True, #OpenPopOverButton)
 
    Case #ClosePopOverButton
      ShowMobile(#PopOver, #False)
 
    Case #AddRowButton
      AddListMobileItem(#List, "New row (random: "+Random(20000)+")", #PB_Mobile_LongDivider)
 
    Case #TrackBar
      SetMobileText(#TrackBarInfo, Str(GetMobileState(#TrackBar)))
 
    Case #TabBar
      Debug "Tab changed: "+GetMobileState(#TabBar)
 
    Case #GoToTab3
      SetMobileState(#TabBar, 3)
 
    Case #ToolBarLeftButton
      Debug "NbBadges on tab2: " + GetMobileAttribute(#TabBar, "badge", 2)
      SetMobileAttribute(#TabBar, "badge", Str(Random(9)), 2)
 
  EndSelect
 
EndProcedure
 
BindEvent(#PB_Event_Mobile, @MobileEvents())

Splitter example

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
EnableExplicit
 
 
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "page1")
  ToolBarMobile(10)
    ButtonMobile(11, "md-menu", #PB_Mobile_Left | #PB_Mobile_Icon)
    ButtonMobile(12, "Button 2 Right", #PB_Mobile_Right)
    TextMobile(#PB_Any, "Page 1", #PB_Mobile_Center)
  CloseMobileContainer()
 
  TextMobile(#PB_Any, "Page 111111111", #PB_Mobile_Center)
  InputMobile(#PB_Any, "place !", "Initial text", #PB_Mobile_Search)
  CloseMobileContainer()
EndIf
 
 
 
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "page2")
  ToolBarMobile(500)
    ButtonMobile(501, "md-menu", #PB_Mobile_Left | #PB_Mobile_Icon)
    ButtonMobile(502, "Button 2 Right", #PB_Mobile_Right)
 
    TextMobile(#PB_Any, "Page 2", #PB_Mobile_Center)
  CloseMobileContainer()
 
  TextMobile(#PB_Any, "Page2 YEAHHHH", #PB_Mobile_Center)
  InputMobile(#PB_Any, "place !", "Initial text", #PB_Mobile_Search)
  CloseMobileContainer()
EndIf
 
 
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "menu")
  ListMobile(101)
  AddListMobileItem(101, "Hello 6", #PB_Mobile_NoDivider | #PB_Mobile_Tappable)
  AddListMobileItem(101, "Hello 7", #PB_Mobile_NoDivider | #PB_Mobile_Tappable)
  CloseMobileContainer()
EndIf
 
 
SplitterMobile(0, "menu", "page1")
 
Procedure MobileEvents()
  Debug "#Mobile: "+EventMobile() + " - EventType: " + EventType() + " - EventData: " + EventData()
 
  If EventMobile() = 11 Or EventMobile() = 501
 
    SetMobileState(0, 1)
  EndIf
 
  Static a
  If EventMobile() = 101
 
    SetMobileState(0, 0)
    a = 1-a
    If a = 1
      SetMobileText(0, "page2")
    Else
      SetMobileText(0, "page1")
    EndIf
 
  EndIf
EndProcedure
 
BindEvent(#PB_Event_Mobile, @MobileEvents())

Navigator example

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
EnableExplicit
 
Enumeration
  #Navigator
  #Button1
  #Button2
  #Button3
EndEnumeration
 
 
; Create 3 different pages. It needs to be of 'Template' style to be used with the Navigator as they are hidden/shown on demand.
;
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "page1")
  If ToolBarMobile(#PB_Any)
    TextMobile(#PB_Any, "Page 1", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
 
  ButtonMobile(#Button1, "Push page 2", #PB_Mobile_Right)
  CloseMobileContainer()
EndIf
 
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "page2")
  If ToolBarMobile(#PB_Any)
    ButtonMobile(#PB_Any, "Page 1", #PB_Mobile_Left | #PB_Mobile_BackButton) ; Back button flag adds an automatic back arrow on the toolbar
    TextMobile(#PB_Any, "Page 2", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
 
  ButtonMobile(#Button2, "Push page 3", #PB_Mobile_Right)
  CloseMobileContainer()
EndIf
 
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "page3")
  If ToolBarMobile(#PB_Any)
    ButtonMobile(#PB_Any, "Page 2", #PB_Mobile_Left | #PB_Mobile_BackButton)
    TextMobile(#PB_Any, "Page 3", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
 
  TextMobile(#PB_Any, "Page 3", #PB_Mobile_Center)
  ButtonMobile(#Button3, "Back", #PB_Mobile_Right)
  CloseMobileContainer()
EndIf
 
; Create the Navigator, initialized with the first page
;
NavigatorMobile(#Navigator, "page1") 
 
 
Procedure MobileEvents()
  Debug "#Mobile: "+EventMobile() + " - EventType: " + EventType() + " - EventData: " + EventData()
 
  Select EventMobile()
    Case #Button1
      ChangeNavigatorMobilePage(#Navigator, #PB_Mobile_Push, "page2")
 
    Case #Button2
      ChangeNavigatorMobilePage(#Navigator, #PB_Mobile_Push, "page3")
 
    Case #Button3
      ChangeNavigatorMobilePage(#Navigator, #PB_Mobile_Pop)
   EndSelect
 
EndProcedure
 
 
BindEvent(#PB_Event_Mobile, @MobileEvents())

Time to raise the major version to 3.00 as we successfully added a built-in WebView in the IDE and an integrated debugger ! All the libraries have now a debug runtime check and if an error is detected, the correct line/file in the IDE will be highlighted, like in PureBasic. The debugger is still very scarce (no dynamic breakpoint, stop/step/continue) but it is actually working and should ease a lot the development.

The WebView is a tool, so you can either embed it in the right panel or in a separate window. If the WebView tool isn't activated (removed from the panel and not displayed), then the default browser is used as usual. The Debug output window is now also handled by the IDE when the WebView is used. SaveDebugOutput() and CopyDebugOutput() commands have been added.

Here is a screenshot in action:

Nom : spiderbasic_debugger.png
Affichages : 1655
Taille : 347,3 Ko

Source de l'information

**comtois** · 15/06/2024, 19h00

15-06-2024: Beta 4 is out, should really fix the iOS app creation, and comes with some new features:

Added: 'DPI Aware' flag in 'Compiler Options' to have DPI aware applications
Added: --rebuildappdir commandline option to easily rebuild an app (created with --keepappdir)
Added: SpiderBasicCLI.cmd to have an easy to use commandline (Windows)

**comtois** · 22/06/2024, 11h26

22-06-2024: Beta 5 is out, with the doc fully finished and some more stuff:

Added: Background color selector in CreateApp for Android.
Updated: Doc with new Mobile library

**comtois** · 26/06/2024, 22h59

Télécharger

Final is out, thanks a lot for testing and enjoy !

26th June 2024 : Version 3.00

Added: Brand new Mobile UI library to quickly build native looking mobile UI !
Added: Brand new WebView tool for the IDE to display the app result directly inside the IDE !
Added: Runtime debugger support for all libraries, with IDE integration to ease error spotting.
Added: Background color selector in CreateApp for Android.
Added: 'DPI Aware' flag in 'Compiler Options' to have DPI aware applications
Added: --rebuildappdir commandline option to easily rebuild an app (created with --keepappdir)
Added: SpiderBasicCLI.cmd to have an easy to use commandline (Windows)
Added: IsWebSocket().
Added: AddTimer(), RemoveTimer() to have window independant timers.
Added: SplashScreenControl() to handle when closing the splashscreen.
Fixed: Some compiler and librarie bugs

SpiderBasic 3.0 est disponible, ajout de la bibliothèque MobileUI

SpiderBasic

Discussions similaires

Partager

Partager