Zebkit ?

Zebkit is unique UI platform that renders hierarchy of UI components on HTML5 Canvas. It has minimal dependencies from WEB context and built with zebkit easy JS OOP approach what makes feasible to adapt zebkit UI to other canvas implementations.

Abstract JavaScript API, powerful OOP concept, rich UI components set is good basement for software engineering with reduced impact of typical WEB development mess.
Simple zebkit application to shape and move components


Zebkit is perfect choice for development of mobile, single page applications with no limitations regarding desirable UI components set. Everything can be rendered with zebkit and packaged as a re-usable components.

ScreenShot

Easy OOP JavaScript concept Dart, CoffeeScript, TypeScript and other helping intermediate technologies are not necessary. Zebkit easy JavaScript OOP gives power to keep code under control, increases re-usability and simplifies support. Easy OOP produces classes and interfaces, inheritance and mixing, constructor, static context, method overriding, true access to super context, anonymous classes, packaging, dynamic class extension, etc.

var A = zebkit.Class([  // class A declaration 
    function() { ... }, // constructor
    function a() { return 1; } // declare class method "a"
]);
var B = zebkit.Class(A, [ // declare class B that inherits A 
    function() { this.$super(); }, // call super constructor
    function a() { // overriding method "a"
        return 1+this.$super(); // call method super implementation 
    }
]);

var a = new A(), // class A instantiation
    b = new B([ // customize class B instance on the fly
        function a() { return 0; }, // override method
        function b() { return 3; }  // add new method 
   ]);     
a.a();  // call "a" method => 1
b.a();  // call "a" method => 2
b.b();  // call "b" method => 3


Everything is rendered on canvas Practically any required UI component can be developed with help of zebkit components model and API. Zebkit abstraction makes UI components development easier, UI components layout managers eliminates dealing with CSS/DOM stuff.

  • Example of syntactic highlighting of code
  • Example of very simple implementation of charts
  • Example of text field rendering customization
Customized rendering


HTML elements in zebkit layout Zebkit is able to host HTML elements in zebkit layout. You can add HTML5 Canvas elements, Google map, native HTML input fields and treats them as standard zebkit UI components.

  • Google map is in zebkit border panel
  • Zebkit tool tip is shown every time a mouse is in google map element
  • Zebkit context menu is shown on google map
  • Control google layer with zebkit combo component
DOM elements integrated in zebkit layout


Unification of input events Mouse, touch screen, pen input events in zebkit are handled with one common approach. Keyboard events management produces the same sequence of events and its fields everywhere.

var root = new zebkit.ui.zCanvas(300, 300).root;
root.pointerPressed = function(e) {
    // catch and handle mouse pressed, touch etc events here
    ... 
}  


Customizable UI components shape Zebkit UI components are not restricted with rectangular shape. They can have a custom shape.

Custom shaped UI components


JSON UI descriptive language Zebkit UI can be defined and loaded with a special human readable JSON.

{ "@zebkit.ui.Panel": {
    "layout" : { "@zebkit.layout.BorderLayout" : 4 },
    "padding": 16, 
    "border" : "plain",
    "kids"   : {
        "center": {
            "@zebkit.ui.Tabs" : [],
            "kids" : {
                "TextArea" : { "@zebkit.ui.TextArea": "Text" },
                "Tree"     : { "@zebkit.ui.tree.Tree" : {
                    "value" : "Root Node",
                    "kids"  : [
                        { 
                            "value" : "Node 1",
                            "kids"  : [ 
                                "Sub node of node 1.1", 
                                "Sub node of node 1.2"
                            ] 
                        },"Node 2", "Node 3"
                    ]}
                },
                "Grid" : { "@zebkit.ui.grid.Grid" :  [
                    [  [ "Item 1",  "Item 2",  "Item 3" ],
                       [ "Item 4",  "Item 5",  "Item 6" ],
                       [ "Item 7",  "Item 8",  "Item 9" ],
                       [ "Item 10", "Item 11", "Item 12"],
                       [ "Item 13", "Item 14", "Item 15"]  ]
                ], "topCaption":[ "Head 1", "Head 2", "Head 3"]}
            }
        }
    }
}}

Find below zebkit application that has been created and loaded with the JSON shown above:

UI loaded and built with Zson
zebkit.require("ui","layout",
function(ui, lay) {
    var c = new ui.zCanvas(300,300),
        r = c.root;
    r.setStackLayout();

    zebkit.Zson
          .then("simpleapp.json")
          .then(function(b) {
              root.add(b.root);
          });
});


More than 40 various UI components Zebkit includes set of highly customizable UI components that are ready to use or extend.

Number of zebkit UI components


Fast and responsive UI components that can handle and visualize tons of data. For instance find below grid component that keeps 10.000.000 (10 millions) dynamically generated cells! In this example the grid component size is more than HTML5 Canvas precision can handle. Zebkit has a fix to HTML5 canvas precision problem, but it has to be applied separately.

10.000.000 cells


Layout management Zebkit uses rules to order UI components to avoid manipulation with exact UI components positions and sizes. This approach is more general and adaptable to the world of various devices, screens and resolutions.

Border layout