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:
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
Zebkit can be included into your project (page) one of the following manner:
Include the version of zebkit hosted on zebkit web site. The latest stable version is available by fixed URL (or choose other desired version): http://zebkit.org/ver/latest/zebkit.[min.]js
Download required runtime package and unzip it in context of your WEB server. The latest zebkit version bundle can be found with the following URL: http://zebkit.org/ver/latest/zebkit.runtime.zip
Checkout version from github and read the instruction how it can be built and used: https://github.com/barmalei/zebkit
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.
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.
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 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 packages that are supplied with zebkit (included into “zebkit.[min.]js”) are listed in the table below:
Package name | Description |
---|---|
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. |
There are number add-on packages listed below. These packages are supplied in separate JavaScript files:
Package name | Description |
---|---|
zebkit.ui.date | Calendar component package. |
zebkit.ui.vk | Virtual keyboard implementation. |