Various zebra classes, methods and fields are kept in packages, the packages are stored in a namespace. Namespace should be available as JavasScript global┬ávariable. Zebra creates “zebra” global variable that points to zebra namespace where all packages, classes, methods are hosted.

// "zebra" namespace as a global variable

Zebra packages are organized in hierarchy. You can access to any package as a variable that is field of the given namespace or by applying namespace as function that gets package name as a parameter:

// access "util" package

// access "ui.grid" package

// alternative way of accessing "ui.grid" package

Package creation is simple: call name space as function with the package you need to have. If the package already exits an appropriate reference to the package will be returned, otherwise a new package will be created and returned:

// create new package or return exiting
var pkg = zebra("mypackage");

// create few packages
zebra(["mypackage", "mypackage.subpackage"]);

// access just created packages

Classes, interfaces, variables and methods are supposed to be kept in package as number of variables:

// create or get package and put variable there
zebra("mypackage").myvariable = 100;

To get list of all packages that the given namespace hosted call the namespace as function and pass callback function as its argument. The callback function is called for all available in the given namespace packages and gets package name and package reference as its argument:

// get all packages hosted in "zebra" namespace
zebra(function(packageName, package) {

Also, if you need ot create an own namespace do it by calling “namespace” function of zebra namespace:

// create of get existing namespace
var MYNS = zebra.namespace("MYNS");
// create package in MYNS namespace
var pkg  = MYNS("mypackage");

Import package stuff in local space

It is not always convenient to access variables, classes and so on by writing pretty long constructions like “.<pkg_name>[.pkg_name]+.variable”. Of course you can use local variable to store references to most frequently used classes and variables:

// keep reference to widely used "zebra.panel.Panel" class
var Panel = zebra.ui.Panel;
// use it later
var panel = new Panel(); // instead of new zebra.ui.Panel();

Zebra provides shorthands to import all variables, classes, interfaces from the given package or number of packages to your local space. You should use “zebra.Import(…)” method in combination with JavaScript “eval” method:

// create function to avoid global space pollution
(function() {
    // import all variables from "ui" and "layout" packages of
    // "zebra" namespace into current local space
    eval(zebra.Import("ui", "layout"));

    // "Panel" class is accessible directly from your local space
    var p = new Panel();

Zebra packages

Package name Description
zebra.util The package provides number of utility classes and methods. One ot the important class is "zebra.util.Bag" that is very widely used to load and manipulate with JSON configuration. The package contains number of classe, methods that are very helpful to communicate to a remote HTTP, XML-RPC or JSON-RPC service. The package provides number of classes and interfaces to represent simple data models like text, array, matrix, tree, etc.
zebra.layout The package provides number of layout manager that can be easily adapted to layout rectangular UI elements. Zebra UI is widely used to layout Rich UI components.
The package provides huge amount of different UI components, manegers, views etc that are supposed to be used to build Rich UI WEB application that are rendered on HTML Canvas element.