Start with zebkit

Zebkit is a JavaScript framework that is supposed to be used for UI development. In the same time the framework provides a lot of artifacts and concepts that are abstracted from UI stuff and can be used independently:

Choose zebkit version

All zebkit artifacts are published on web site. They are applicable either for remote usage or can be downloaded and hosted in a local environment. The artifacts are hosted on zebkit web site as follow:

http://www.zebkit.org/ver        # root zebkit versions URL
   |
   +-- latest/                   # latest hot updated stable version
   |     +-- zebkit[.min].js     # zebkit JS code
   |     +-- rs/                 # resources: JSON, images, etc
   |     +-- zebkit.runtime.zip  # packages runtime for local use
   |     .         
   .
   +-- 2017.05/                  # released at May of 2017 version
   |     +-- zebkit[.min].js     # zebkit JS code  
   |     +-- rs/                 # resources: JSON, images, etc
   |     +-- zebkit.runtime.zip  # packages runtime for local use
   .     .
   .
   +-- sandbox/                  # playground version 

What the latest zebkit version is

The latest (http://www.zebkit.org/ver/latest) is the version that is considered as the most stable and bug free snapshot of github version. For developers using the latest means:

What released zebkit versions are

There are also zebkit release versions are published on web site. They are identified with release year and month. The versions are updated only in a case of critical bugs that have not been fixed in subsequent versions. The appropriate artifacts are available by the following pattern: http://zebkit.org/ver/year.month/*

For instance released at May of 2017 version can be fetched with the following URL: http://zebkit.org/ver/2017.05/zebkit.js

Add zebkit to a project

Zebkit can be included into your project (page) one of the following manner:

Add meta (optionally, for mobile devices only) and script to an HTML page as follow:

<!DOCTYPE html>
<html>
<head>
<!-- The following meta is required for mobile devices -->
<meta name="viewport" 
content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
<meta name="msapplication-tap-highlight" content="no">

<!-- Add zebkit JavaScript library  -->
<script type="text/javascript"
        src="http://zebkit.org/ver/latest/zebkit.min.js">
</script>
</head>

<body>
...
</body>
</html>

That is all, your page is ready to start developing with zebkit.

Developing with zebkit

Zebkit stuff is organized as hierarchy of packages. Package is key zebkit structure that unites number of classes, methods, variables and interfaces that are designed for dedicated functional purposes.

Including zebkit into an HTML page adds “zebkit” variable to the global space. This variable points to root - “zebkit” - package to start with:

// request "zebkit.ui","zebkit.layout" and "zebkit.ui.grid" packages  
zebkit.require("ui","layout","ui.grid", function(ui, layout, grid) {
    var button = new ui.Button("My Button");
    ...
});

“zebkit.require(…)” method call illustrated in snippet above does the following:

Callback method is the safe place to start developing zebkit application.

Package re-usable code

Developing a custom zebkit code should be done within zebkit package concept. Re-usable components, classes and other entities should be placed in zebkit package or packages. Creation of a new zebkit package is simple:

// create new package 
zebkit.package("mypackage", function(pkg, Class) {
    // define package class 
    pkg.MyClass = Class([
        function() {  // constructor
            ...
        },

        function method() {
            ...
        }
    ]);
    ...
});

Then you can use the created package as follow:

// create new package 
zebkit.require("mypackage", function(mypkg) {
    // instantiate class declared in your package 
    var myClassInstance = new mypkg.MyClass();
    ...
});

Package configuration

Package entities can be configured with a JSON. The most simple way to initiate the configuration is to pass true as last parameter of “zebkit.package(…)” method:

// create new package configured with JSON configuration
zebkit.require("mypackage", function(mypkg) {
    ...
}, true);

It is suppose JSON file has to be stored alone with the package JavaScript code and the name of the configuration file has to be full package name (without “zebkit prefix”) plus “.json” extension. In example mentioned above the name of configuration file is “mypackage.json”

Standard zebkit packages

Standard packages that are supplied with zebkit (included into “zebkit.[min.]js”) are listed in the table below:

Package nameDescription
zebkit This is the root zebkit package that provides core easy OOP classes and interfaces.
zebkit.util The package provides number of utility classes and methods.
zebkit.data The package provides number of classes and interfaces to represent simple data models like text, array, matrix, tree, etc.
zebkit.layout The package provides number of layout manager that can be easily adapted to layout rectangular UI elements. Zebra UI widely uses the package to layout Rich UI components.
zebkit.io The package contains number of classes, methods that are helpful to communicate to a remote HTTP, XML-RPC or JSON-RPC services.
zebkit.draw The package provides number of elementary renders and views that are able to draw different kind of objects: texts, shapes, images, etc.
zebkit.ui
zebkit.ui.grid
zebkit.ui.tree
zebkit.ui.design
The packages provide huge amount of different UI components that are supposed to be used to build Rich UI WEB application rendered on HTML5 Canvas element. The UI components are implemented the way they are free from WEB specific. It makes possible porting the components to other platforms and environments without the components code update.
zebkit.ui.event The package provides UI events related stuff.
zebkit.web The package provides number of web specific classes and methods.
zebkit.ui.web The package provides implementations of required abstractions for WEB environment specifically.

Extra zebkit packages

There are number add-on packages listed below. These packages are supplied in separate JavaScript files:

Package nameDescription
zebkit.ui.date Calendar component package.
zebkit.ui.vk Virtual keyboard implementation.