B4J Library Skeleton (CSS + Library)

Discussion in 'B4J Libraries & Classes' started by tchart, Jul 27, 2017.

  1. tchart

    tchart Active Member Licensed User

    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.

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

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

    Attached Files:

    Last edited: Aug 24, 2017
    jparraga, Molchyn, jmon and 15 others like this.
  2. tchart

    tchart Active Member Licensed User

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

    2017-07-27 15_00_48-Login.png

    2017-07-27 15_00_11-ArcGIS Server Memory Calculator (Basic).png

    2017-07-27 14_59_59-ArcGIS Patches.png

    2017-07-27 15_02_21-Ope.nz - Who is online_.png
     
    Mashiane, souzafo, jmon and 7 others like this.
  3. icefairy333

    icefairy333 Active Member Licensed User

    how can I add Chinese content please?
    Code:
    S.AddMeta($"<meta charset="GBK">"$)
    S.AddMeta(
    $"<meta charset="utf-8">"$)
    'both of up code cannot work
     
    joulongleu likes this.
  4. icefairy333

    icefairy333 Active Member Licensed User

    done with
    Code:
    resp.CharacterEncoding="UTF-8"
     
    jmon and joulongleu like this.
  5. tchart

    tchart Active Member Licensed User

    Good job!
     
    joulongleu and icefairy333 like this.
  6. micro

    micro Well-Known Member Licensed 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
     
    joulongleu likes this.
  7. tchart

    tchart Active Member Licensed 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.
     
    joulongleu likes this.
  8. tchart

    tchart Active Member Licensed User

    Here is how to add a script;

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

    Code:
    skc1.AddButton("Button",True,"httpGetAsync(SomeURL,SomeCallback)")
     
    Erel and joulongleu like this.
  9. Don Oso

    Don Oso Active Member Licensed User

    Wow thanks !
     
    joulongleu and tchart like this.
  10. tchart

    tchart Active Member Licensed User

  11. Mashiane

    Mashiane Expert Licensed User

    Just checked your demo, wow, this is wonderfully easy...!
     
    joulongleu and tchart like this.
  12. micro

    micro Well-Known Member Licensed User

    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
     
  13. tchart

    tchart Active Member Licensed 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.
     
  14. tchart

    tchart Active Member Licensed User

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

    alwaysbusy Expert Licensed User

    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!
     
    stevel05, tchart and mindful like this.
  16. tchart

    tchart Active Member Licensed User

    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!
     
    alwaysbusy likes this.
  17. micro

    micro Well-Known Member Licensed User

    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.
     
    Don Oso likes this.
  18. billyrudi

    billyrudi Active Member Licensed User

    hi tchart,
    do you have some example to interact with controls to share with us ?
     
    tuhatinhvn likes this.
  19. tuhatinhvn

    tuhatinhvn Active Member Licensed 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
     
  20. billyrudi

    billyrudi Active Member Licensed 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

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

    ......

    Result.SetHtml (s.Render)
    then in the addbutton function i use the b4j_raiseEvent javascript function

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

    that rise my event

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



    regards Paolo
     

    Attached Files:

    Last edited: Aug 29, 2017
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice