Onsen UI + SpiderBasic?

Everything else that doesn't fall into one of the other categories.
firace
Posts: 28
Joined: Tue Jan 02, 2018 6:59 pm

Onsen UI + SpiderBasic?

Post 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. :)
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Onsen UI + SpiderBasic?

Post 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
firace
Posts: 28
Joined: Tue Jan 02, 2018 6:59 pm

Re: Onsen UI + SpiderBasic?

Post 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.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Onsen UI + SpiderBasic?

Post 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
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Onsen UI + SpiderBasic?

Post 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
firace
Posts: 28
Joined: Tue Jan 02, 2018 6:59 pm

Re: Onsen UI + SpiderBasic?

Post by firace »

Wow, awesome example Peter. I've got lots to learn from this. Thanks!
Post Reply