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:
Some example to get started (you can also build a mobile app to see how it really behaves on phone):
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 |
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 |
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 |
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:
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:
Source de l'information