I would like to emulate Android's native UI style as much as possible. Is it possible to use Onsen UI (or something similar) within SpiderBasic?
https://onsen.io/samples/
https://frandiox.github.io/OnsenUI-Todo-App/
https://medium.com/the-web-tub/style-yo ... fc403a378e
I'm not even sure if my question makes sense.
Onsen UI + SpiderBasic?
Re: Onsen UI + SpiderBasic?
here is something to play with using Materialize:firace wrote:I would like to emulate Android's native UI style as much as possible. Is it possible to use Onsen UI (or something similar) within SpiderBasic?
Code: Select all
; http://next.materializecss.com/
EnableExplicit
DeclareModule Materialize
Declare Init(Callback)
Declare Container()
Declare Button(Text.s)
Declare Collapsible()
Declare Navbar()
EndDeclareModule
Module Materialize
Procedure Container()
! $("<div id='mainContainer' class='container'></div>").appendTo("body");
EndProcedure
Procedure Button(Text.s)
Protected HTML.s
HTML = "<a class='waves-effect waves-light btn'>" + Text + "</a>"
! $(v_html).appendTo("#mainContainer");
EndProcedure
Procedure Collapsible()
Protected HTML.s
HTML = "<ul class='collapsible'>" +
" <li>" +
" <div class='collapsible-header'>" +
" <i class='material-icons'>filter_drama</i>First" +
" </div>" +
" <div class='collapsible-body'>" +
" <span>Lorem ipsum dolor sit amet.</span>" +
" </div>" +
" </li>" +
" <li>" +
" <div class='collapsible-header'>" +
" <i class='material-icons'>place</i>Second" +
" </div>" +
" <div class='collapsible-body'>" +
" <span>Lorem ipsum dolor sit amet.</span>" +
" </div>" +
" </li>" +
" <li>" +
" <div class='collapsible-header'>" +
" <i class='material-icons'>whatshot</i>Third" +
" </div>" +
" <div class='collapsible-body'>" +
" <span>Lorem ipsum dolor sit amet.</span>" +
" </div>" +
" </li> " +
"</ul>"
! $(v_html).appendTo("#mainContainer");
! $('.collapsible').collapsible();
EndProcedure
Procedure Navbar()
Protected HTML.s
HTML = "<nav>" +
" <div class='nav-wrapper'>" +
" <a href='#' class='brand-logo'>Logo</a>" +
" <ul id='nav-mobile' class='right hide-on-med-and-down'>" +
" <li>" +
" <a href='sass.html'>Sass</a>" +
" </li>" +
" <li>" +
" <a href='badges.html'>Components</a>" +
" </li>" +
" <li>" +
" <a href='collapsible.html'>JavaScript</a>" +
" </li>" +
" </ul> " +
" </div>" +
"</nav>"
! $(v_html).appendTo("#mainContainer");
EndProcedure
Procedure Init(Callback)
; Remove SpiderBasic (Dojo) - Styles:
! $('link[rel="stylesheet"], style').remove();
! $('*').removeAttr('style');
CloseDebugOutput()
! $(".spiderwindow").remove();
! $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0"/>');
! $('<link rel="stylesheet" type="text/css">').attr('href','https://fonts.googleapis.com/icon?family=Material+Icons').appendTo('head');
! $('<link rel="stylesheet" type="text/css">').attr('href','https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css').appendTo('head');
! require(["https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js"], function() {
! v_callback();
! });
EndProcedure
EndModule
UseModule Materialize
Procedure Main()
Container()
Navbar()
Collapsible()
Button("Button1")
Button("Button2")
Button("Button3")
EndProcedure
Init(@Main())
UnuseModule Materialize
Re: Onsen UI + SpiderBasic?
Thanks Peter, will give this a go!
I will need to find out how events can be handled as i guess BindEvent will not work in such a scenario.
I will need to find out how events can be handled as i guess BindEvent will not work in such a scenario.
Re: Onsen UI + SpiderBasic?
you're right, Bind(Gadget)Event() will only work for SpiderBasic - Windows / Gadgets.firace wrote:i guess BindEvent will not work in such a scenario.
I try to find a suitable solution.
Greetings ... Peter
Re: Onsen UI + SpiderBasic?
here is another approach using my jQuery-Module (https://github.com/spiderbytes/jQuery):
Greetings ... Peter
Code: Select all
EnableExplicit
IncludeFile "./path/to/your/jQuery.sbi" ; -> download from: https://github.com/spiderbytes/jQuery
Procedure ButtonClick(e)
Protected ClickedElement
! v_clickedelement = $(v_e.currentTarget);
Protected Iam.s = jQuery::GetStringData(ClickedElement, "WhoAmI")
! alert(v_iam);
EndProcedure
Procedure NavBarLinkClick(e)
! alert("NavBarLinkClick");
EndProcedure
Procedure Main()
Protected Body, MainContainer
Body = jQuery::Element("body")
MainContainer = jQuery::Element("<div />") ; Create a div element (the main-container)
jQuery::SetAttribute(MainContainer, "id", "mainContainer")
jQuery::AddClass(MainContainer, "container")
jQuery::Append(Body, MainContainer) ; ... and append it to the body-element
; -----------------
; NavBar
; -----------------
Protected NavBar, NavWrapper, a, ul, li
Protected Counter
NavBar = jQuery::Element("<nav />")
jQuery::Append(MainContainer, NavBar)
NavWrapper = jQuery::Element("<div />")
jQuery::AddClass(NavWrapper, "nav-wrapper")
jQuery::Append(NavBar, NavWrapper)
a = jQuery::Element("<a />")
jQuery::SetAttribute(a, "href", "#")
jQuery::AddClass(a, "brand-logo")
jQuery::SetText(a, "Logo")
jQuery::Append(NavWrapper, a)
ul = jQuery::Element("<ul />")
jQuery::SetAttribute(ul, "id", "nav-mobile")
jQuery::AddClass(ul, "right hide-on-med-and-down")
jQuery::Append(NavWrapper, ul)
; Create 3 Links:
For Counter = 1 To 3
li = jQuery::Element("<li />")
jQuery::Append(ul, li)
a = jQuery::Element("<a />")
jQuery::SetAttribute(a, "href", "#")
jQuery::SetText(a, "Link No." + Str(Counter))
jQuery::Append(li, a)
jQuery::On(a, "click", @NavBarLinkClick())
Next
; -----------------
; Collapsible (Accordion)
; -----------------
Protected Collapsible, CollapsibleHeader, CollapsibleBody, i, span
Collapsible = jQuery::Element("<ul />")
jQuery::AddClass(Collapsible, "collapsible")
jQuery::Append(MainContainer, Collapsible)
For Counter = 1 To 3
li = jQuery::Element("<li />")
jQuery::Append(Collapsible, li)
CollapsibleHeader = jQuery::Element("<div />")
jQuery::AddClass(CollapsibleHeader, "collapsible-header")
jQuery::SetText(CollapsibleHeader, "Collapsible No." + Str(Counter))
jQuery::Append(li, CollapsibleHeader)
i = jQuery::Element("<i />")
jQuery::AddClass(i, "material-icons")
jQuery::SetText(i, "filter_drama")
jQuery::Prepend(CollapsibleHeader, i)
CollapsibleBody = jQuery::Element("<div />")
jQuery::AddClass(CollapsibleBody, "collapsible-body")
jQuery::Append(li, CollapsibleBody)
span = jQuery::Element("<span />")
jQuery::SetText(span, "Lorem ipsum dolor sit amet.")
jQuery::Prepend(CollapsibleBody, span)
Next
; Initialize the corresponding Materialize-JS-Funktion
jQuery::CallByName(Collapsible, "collapsible")
; -------------
Protected Button
For Counter = 1 To 3
Button = jQuery::Element("<a />")
jQuery::AddClass(Button, "waves-effect waves-light btn")
jQuery::SetText(Button, "Button No." + Str(Counter))
jQuery::SetStringData(Button, "WhoAmI", "I'm Button No." + Str(Counter))
jQuery::Append(MainContainer, Button)
jQuery::On(Button, "click", @ButtonClick())
Next
; -------------
EndProcedure
; Remove SpiderBasic (Dojo) - Styles:
! $('link[rel="stylesheet"], style').remove();
! $('*').removeAttr('style');
CloseDebugOutput()
! $(".spiderwindow").remove();
Define Meta, Head, Link
Head = jQuery::Element("head")
Meta = jQuery::Element("<meta />")
jQuery::SetAttribute(Meta, "name", "viewport")
jQuery::SetAttribute(Meta, "content", "width=device-width, initial-scale=1.0")
jQuery::Append(Head, Meta)
Link = jQuery::Element("<link />")
jQuery::SetAttribute(Link, "rel", "stylesheet")
jQuery::SetAttribute(Link, "type", "text/css")
jQuery::SetAttribute(Link, "href", "https://fonts.googleapis.com/icon?family=Material+Icons")
jQuery::Append(Head, Link)
Link = jQuery::Element("<link />")
jQuery::SetAttribute(Link, "rel", "stylesheet")
jQuery::SetAttribute(Link, "type", "text/css")
jQuery::SetAttribute(Link, "href", "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css")
jQuery::Append(Head, Link)
jQuery::LoadScript("https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js", @Main())
Re: Onsen UI + SpiderBasic?
Wow, awesome example Peter. I've got lots to learn from this. Thanks!