26-06-2024: Final is out, thanks a lot for testing and enjoy !
22-06-2024: Beta 5 is out, with the doc fully finished and some more stuff:
Code: Select all
- Added: Background color selector in CreateApp for Android.
- Updated: Doc with new Mobile libraryCode: Select all
- 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)Code: Select all
- 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 errors30-05-2024: 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 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:
Code: Select all
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.Example with a tabbar and many objects
Code: Select all
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())Code: Select all
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())Code: Select all
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())
