Page 1 of 1

Material Design?

Posted: Fri Dec 08, 2017 4:58 pm
by SparrowhawkMMU
Is it possible to develop Android apps with SB that confirm to Google's Material Design? If so, does anyone have any examples of how to bring in the stylesheet, JS etc ?

Just got a new phone which is running Nougat and I thought I'd try my hand at building a mobile app that looks native to see whether it's feasible under SB.

Thanks

Re: Material Design?

Posted: Sat Dec 09, 2017 12:38 am
by Peter
here is a code to start with (using Materialize):

Code: Select all

EnableExplicit

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

; 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.2/css/materialize.min.css').appendTo('head');

! require(["https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"], function() {

Container()

Collapsible()

Button("Button1")
Button("Button2")
Button("Button3")

! });
Good luck! :-)

Greetings ... Peter

Re: Material Design?

Posted: Sun Dec 10, 2017 4:05 pm
by SparrowhawkMMU
Thanks Peter, I'll give that a go. I appreciate your help, as ever :)