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.

B4X:
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.

B4X:
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
 

Attachments

  • 2017-07-27 14_51_00-Title.png
    2017-07-27 14_51_00-Title.png
    35.8 KB · Views: 762
  • 2017-07-27 14_50_49-Title.png
    2017-07-27 14_50_49-Title.png
    70.9 KB · Views: 753
  • Skeleton Dist.zip
    142 KB · Views: 667
Last edited:

micro

Well-Known Member
Licensed User
Longtime User
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

Well-Known Member
Licensed User
Longtime User
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

Well-Known Member
Licensed User
Longtime User
Here is how to add a script;

B4X:
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;

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

micro

Well-Known Member
Licensed User
Longtime User
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

Well-Known Member
Licensed User
Longtime User
@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.
 

alwaysbusy

Expert
Licensed User
Longtime User
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

Well-Known Member
Licensed User
Longtime User
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

Well-Known Member
Licensed User
Longtime User
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.
 

tuhatinhvn

Active Member
Licensed User
Longtime User
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

Active Member
Licensed User
Longtime User
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

B4X:
Private text1, text2, btnCalc, Result As JQueryElement

......

Result.SetHtml (s.Render)

then in the addbutton function i use the b4j_raiseEvent javascript function

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


that rise my event

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




regards Paolo
 

Attachments

  • WebAppHelloWorld.zip
    58.2 KB · Views: 463
Last edited:
Top