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

Onsen UI + SpiderBasic?

by firace Thu Jan 04, 2018 7:40 am

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: 552
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1

Re: Onsen UI + SpiderBasic?

by Peter Thu Jan 04, 2018 8:08 am

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: 12
Joined: Tue Jan 02, 2018 6:59 pm

Re: Onsen UI + SpiderBasic?

by firace Thu Jan 04, 2018 10:43 am

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: 552
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1

Re: Onsen UI + SpiderBasic?

by Peter Thu Jan 04, 2018 11:59 am

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: 552
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1

Re: Onsen UI + SpiderBasic?

by Peter Fri Jan 05, 2018 2:06 pm

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: 12
Joined: Tue Jan 02, 2018 6:59 pm

Re: Onsen UI + SpiderBasic?

by firace Fri Jan 05, 2018 6:38 pm

Wow, awesome example Peter. I've got lots to learn from this. Thanks!
Return to General Discussion

Who is online

Users browsing this forum: No registered users and 1 guest