Page 1 of 1

Onsen UI + SpiderBasic?

Posted: Thu Jan 04, 2018 7:40 am
by firace
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. :)

Re: Onsen UI + SpiderBasic?

Posted: Thu Jan 04, 2018 8:08 am
by Peter
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?
here is something to play with using Materialize:

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
Greetings ... Peter

Re: Onsen UI + SpiderBasic?

Posted: Thu Jan 04, 2018 10:43 am
by firace
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.

Re: Onsen UI + SpiderBasic?

Posted: Thu Jan 04, 2018 11:59 am
by Peter
firace wrote:i guess BindEvent will not work in such a scenario.
you're right, Bind(Gadget)Event() will only work for SpiderBasic - Windows / Gadgets.

I try to find a suitable solution.

Greetings ... Peter

Re: Onsen UI + SpiderBasic?

Posted: Fri Jan 05, 2018 2:06 pm
by Peter
here is another approach using my jQuery-Module (https://github.com/spiderbytes/jQuery):

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())
Greetings ... Peter

Re: Onsen UI + SpiderBasic?

Posted: Fri Jan 05, 2018 6:38 pm
by firace
Wow, awesome example Peter. I've got lots to learn from this. Thanks!