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!