Home

Awesome

ScreenShot

Zebkit - HTML5 Canvas based UI framework

Zebkit is the next generation of zebra project. It has been heavily re-worked, re-designed and re-organized. The new version is definitely not backward compatible with zebra because of big number of changes it has got. New zebkit grabs the best ideas from previous one and takes many new concepts and features.

Zebkit provides impressive bunch of UI components that works on various devices, supports touch screens and fits single page application development. Implemented with help of easy OOP concept zebkit components are abstracted from WEB/CSS mess what brings support, extendibility and portability on the level of software engineering. With zebkit and its concept any imaginable UI component can be rendered on HTML5 Canvas.

The latest version of previous generation of zebkit (zebra) can be found as "zebra" release.

Most significant changes

   ...
   var c = new zebkit.ui.zCanvas();
   c.root.setBorderLayout();
   c.root.add(new zebkit.ui.web.HtmlElement("<an ID of an HTML element>"));
   ...

  // configure zebkit to use light theme
  zebkit.ui.config("theme", "light");  

  zebkit.require("ui", "layout", function(ui, layout) {
      // write zebkit application here
      ...
  });

{   "a": 100,
    "b": "%{a}",           
    "c": { "@Date": [] },
    "d": "%{../external.json}"  
}

YAML can be also used if "js-yaml.min.js" will be included into your code:

a: 100,
b: "%{a}"         
c: { class : "Date" }
d: "%{../external.json}"

Requirements

Zebkit works in MS Internet Explorer 10+, MS Edge, FireFox 3+, Safari 5+, Google Chrome. It should support iOS 7+ and Android 4+ mobile browsers.

Zebkit requires nodejs to be installed. If you plan to re-generate zebkit web site you have to install jekyll (https://jekyllrb.com/). If you plan to re-generate an API Doc you have to install "yuidoc" as follow:

  npm install -g yuidocjs

Zebkit uses "gulp" as building tools. To install it type the following in a terminal:

  npm install gulp-cli -g

Installation

To install required nodejs packages run the following command from zebkit home folder:

    npm install

Building zebkit artifacts

To build major zebkit artifacts (JS code) run the following command:

   gulp

To build runtime zip package (find it in "build" folder):

   gulp runtime

To generate API doc run the following command (find generated light and dark versions of API doc in "apidoc/light" and "apidoc/dark" folders correspondingly):

   gulp apidoc

If you have installed jekyll you can initiate zebkit WEB site re-generation with the following command (find generated light and dark website versions in "website/light" and "website/dark" folders correspondingly):

   gulp website

Run http server and view web site

   gulp http

Open zebkit WEB site "http://localhost:8090/index.html" in a browser.

Simple example of a zebkit application

To have an idea what zebkit programming looks like see the example code below:

<!DOCTYPE html>
<html>
    <head>
        <script src='build/zebkit.min.js'
                type='text/javascript'></script>
        <script type='text/javascript'>
            zebkit.require("ui", "layout", function(ui, layout) {
                // create Canvas using JSON like style
                var zc = new ui.zCanvas();
                zc.root.properties({
                    borderLayout: 4,
                    padding: 8,
                    kids  : {
                        center: new ui.TextArea("", true),
                        top   : (new ui.BoldLabel("Sample application")).properties({
                            padding : 8
                        }),
                        bottom: new ui.Button("Select all")
                    }
                }).on("//zebkit.ui.Button", function(bt) { // reg event handler
                    // select text in the text area
                    zc.byPath("//zebkit.ui.TextArea").selectAll();
                });
            });
        </script>
    </head>
    <body></body>
</html>

You can create, for instance, "sample.html" in zebkit home folder. Then fill the file with the content shown above and run it in a browser with the URL below:

"http://localhost:8090/sample.html"

Bundle zebkit stuff in single JS file

Zebkit loads multiple configuration files (JSONs) and resources (images) during its initialization. The process costs additional time and makes impossible running of zebkit and its applications without HTTP server because of security restrictions browsers issue.

The latest version of zebkit allows developers to bundle all required with zebkit stuff in single "zebkit.js" or "zebkit.min.js" file. This feature improves zebkit bootstrap time significantly and lets building applications that can be run without HTTP server, just by opening its in a browser as HTML file.

To create bundled version of zebkit use the following command:

    gulp zebkit --bundle true

UI YAML support

Together with JSON format developers can use less talkative and more readable YAML format to describe zebkit UI forms:

kids:
  -  class: zebkit.ui.Panel
     borderLayout: [4, 4]
     padding: 4
     border: plain
     kids:
        top:
            class: { "zebkit.ui.BoldLabel": "Simple application" }
            padding: 4
            background: lightGray

        center:
            class: zebkit.ui.TextField

        bottom:
            class : { "zebkit.ui.Button": Clear }

To support YAML format add open source "js-yaml" (https://github.com/nodeca/js-yaml/blob/master/dist/js-yaml.min.js) script into header of your page. Zebkit detects YAML by file extension (yaml).

License

Apache License, Version 2.0 http://www.apache.org/licenses/LICENSE-2.0.html

Contact