B4J Library Skeleton (CSS + Library)

While ABMaterial is fantastic, I find it overkill for simple (mostly static) websites. A while back I came across the Skeleton CSS framework;

http://getskeleton.com/

Skeleton is a grid based mobile responsive CSS boiler plate.

It worked fine for a couple of projects but I still had to hand craft HTML. So I decided to create a B4J library to automate the creation of HTML pages using the Skeleton CSS. I've tried to keep it as generic as possible and I have not introduced any direct changes to the Skeleton CSS but have extended it using additional CSS like Fontawesome and a 3rd part notification CSS for Skeleton. I take no credit for any of the CSS libraries.

The B4J library can actually be used to generate generic HTML code as it has a helper class which is used to generate the Skeleton specific markup. The Skeleton CSS can also be replaced by other CSS.

IMPORTANT NOTE: This isnt a replacement for ABMaterial. This is for simply mostly static web pages with a bit of dynamic content being generated by jServer. There is no bi-directional comms and any interaction with the server back-end is through RESTful API's that you have to write. This does involve coding on the client side (JavaScript) and back-end handlers in B4J. If you just need a simple web page then this will probably suit your needs, if not it can be extended however if you need more then you should probably look at ABMaterial.

The examples below show server handlers but as the Render method simply returns a string (of HTML) you can use it to write out HTML files (I use this for a reporting product I wrote).

Quick Start Tutorial

Skeleton uses rows and columns for its grid. These are contained within containers.

The hierarchy for a page goes like this:

Skeleton Page
- Skeleton Container
-- Skeleton Row
---Skeleton Column(s)
-- Skeleton Row
---Skeleton Column(s)

Columns are where content is added.

So a quick example looks like this.

Sub Handle(req As ServletRequest, resp As ServletResponse)
    Dim S As SkeletonPage

    Dim skc1 As SK_Column

    skc1.Initialize(12)
    skc1.AddHeader(1,"Header 1")
    skc1.AddHeader(2,"Header 2")
    skc1.AddHeader(3,"Header 3")
    skc1.AddHeader(4,"Header 4")
    skc1.AddContent("Lorem Ipsum is simply dummy text of the printing and typesetting industry.")

    Dim r As SK_Row
    r.Initialize
    r.Columns.Initialize
    r.Columns.Add(skc1)

    Dim c As SK_Container
    c.Initialize
    c.Rows.Initialize
    c.Rows.Add(r)

    S.Initialize
    S.AddContainer(c)

    resp.Write(S.Render)
End Sub

This gives us a simple page with one container, one row and one column.

Following on from this we can add a second column to the row.

Sub Handle(req As ServletRequest, resp As ServletResponse)
    Dim S As SkeletonPage

    Dim skc1 As SK_Column

    skc1.Initialize(7)
    skc1.AddHeader(1,"Header 1")
    skc1.AddHeader(2,"Header 2")
    skc1.AddHeader(3,"Header 3")
    skc1.AddHeader(4,"Header 4")
    skc1.AddContent("Lorem Ipsum is simply dummy text of the printing and typesetting industry.")

    Dim skc2 As SK_Column

    skc2.Initialize(5)
    skc2.AddHeader(1,"Header 1")
    skc2.AddHeader(2,"Header 2")
    skc2.AddHeader(3,"Header 3")
    skc2.AddHeader(4,"Header 4")
    skc2.AddContent("Lorem Ipsum is simply dummy text of the printing and typesetting industry.")

    Dim r As SK_Row
    r.Initialize
    r.Columns.Initialize
    r.Columns.Add(skc1)
    r.Columns.Add(skc2)

    Dim c As SK_Container
    c.Initialize
    c.Rows.Initialize
    c.Rows.Add(r)

    S.Initialize
    S.AddContainer(c)

    resp.Write(S.Render)
End Sub

The demo app has additional demos including use of images and font awesome icons.

Demo website; https://ope.nz/skeleton/demo

Anyway the library is attached, together with a demo web server.

Source code (B4J) is on GitHub - https://github.com/ope-nz/Skeleton

Library Update 04/08/2017

 

[tchart]

Here are a couple of examples from my own website using the library.

 

[icefairy333]

how can I add Chinese content please?

S.AddMeta($"<meta charset="GBK">"$)
S.AddMeta($"<meta charset="utf-8">"$)
'both of up code cannot work

 

[icefairy333]

how can I add Chinese content please?

S.AddMeta($"<meta charset="GBK">"$)
S.AddMeta($"<meta charset="utf-8">"$)
'both of up code cannot work

done with

resp.CharacterEncoding="UTF-8"

 

[tchart]

done with

resp.CharacterEncoding="UTF-8"

Good job!

 

[micro]

Great tchart
How i can add event and relative sub for button pressed?
The Button have parameter "OnClick" as String but how to use?
Thanks

 

[tchart]

Hi Micro

The on click string accepts JavaScript. So usually I call a javascript function in a script which is added to the page.

I will be posting some more samples soon.

 

[tchart]

Here is how to add a script;

S.AddScript($"<script>
function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous
    xmlHttp.send(null);
}
</script>"$,True)

And add the on click to the button;

skc1.AddButton("Button",True,"httpGetAsync(SomeURL,SomeCallback)")

 

[Don Oso]

Wow thanks !

 

[tchart]

I've started to put together a demo website with code samples; https://ope.nz/skeleton/demo

 

[Mashiane]

Just checked your demo, wow, this is wonderfully easy...!

 

[micro]

skc1.AddButton("Button",True,"httpGetAsync(SomeURL,SomeCallback)")

forgive me tchart
but i can not understand how to create the Sub in b4j to capture the event.
With ABMaterial and ws for me it is much simpler.
Maybe I miss something, I'm not very experienced in javascript.
You can make me a real example?
Thanks

 

[tchart]

@micro Skeleton is not a replacement for ABMaterial.

ABMaterial has way more functionality but that comes with a steep learning curve and overhead.

The Skeleton library + CSS is a way to quickly generate HTML content using B4J web servers. Its not a client/server model using web sockets etc.

Generally if I need to access B4J Sub through code I would use JavaScript to call a REST end point (i.e. a RESTful API). This is how most of the enterprise software I use every day works so is the pattern in which Im used to operating.

Obviously Skeleton is not for everyone just as ABMaterial is not for everyone.

 

[tchart]

You can make me a real example?
Thanks

@micro yes I will make a real example for you.

 

[alwaysbusy]

using B4J web servers. Its not a client/server model using web sockets

You are also using jServer, no? ABMaterial is, just like Skeleton, just using B4J (jetty) web servers.

Usage depends on the project one plans: If e.g. the browser will only make use of REST apis and you do know your HTML, CSS and Javascript, I think using Skeleton is a great idea. If your WebApp needs more bidirectional communication and you do not want to write any HTML, CSS or Javascript then ABMaterial will help you with that.

I'm actually happy someone is taking another approach using another CSS framework! There is no reason for another clone of ABMaterial/Materialize CSS as this brings nothing of value to the community, only confusion. So I applaud, welcome and support the Skeleton CSS project. I'm sure there will be cases even I will use it for some project.

@tchart if you have some ideas with Skeleton CSS you want discuss, feel free to contact me. Maybe some problems you may encounter I already have tackled with ABMaterial and I'm glad to help!

 

[tchart]

Usage depends on the project one plans: If e.g. the browser will only make use of REST apis and you do know your HTML, CSS and Javascript, I think using Skeleton is a great idea. If your WebApp needs more bidirectional communication and you do not want to write any HTML, CSS or Javascript then ABMaterial will help you with that.

Exactly. You hit the bulls eye there. I have a great admiration for ABMaterial and your work @alwaysbusy - I dont know how you do it! Like you say they are two approaches for different purposes. Many of my projects simply need a "front end" for my server projects (yes using jServer/Jetty) and Skeleton+CSS meets my needs for now. I have already run into corners on some projects because I am not using bidirectional comms so I will probably talk to you about some ideas in the future!

 

[micro]

I have a great admiration for ABMaterial and your work @alwaysbusy - I dont know how you do it!

Infact ABMterial is fantastic but also yuor solution is great and for simply and rapid project is ideal.
That is why I want to know better skeleton, especially how to interact with controls (textfield, label, ceckbox, button etc.) and B4j.
I'm waiting for some of your examples.
thank you.

 

[billyrudi]

hi tchart,
do you have some example to interact with controls to share with us ?

 

[tuhatinhvn]

it will be better if easy to use controls with b4j, it is easy to make html site but we need use b4j to control it
please update it to better or give example to control it

 

[billyrudi]

Hi to all,
i have a fast solution to add events to skeleton Button objects.
In short i use a the basic Erel example https://www.b4x.com/android/forum/threads/webapp-hello-world-web-app.39808/
whits some changes in the index.html file

and flushing with jquery the skeleton code

Private text1, text2, btnCalc, Result As JQueryElement

......

Result.SetHtml (s.Render)

then in the addbutton function i use the b4j_raiseEvent javascript function

skc1.AddButton(   "Button",True,"b4j_raiseEvent('paolo_ok',{}); " )

that rise my event

Sub paolo_ok(Params As Map)
    skc1.AddAlert("OK","NOOO","info")
    Result.SetHtml (s.Render)
End Sub

regards Paolo