Zebra API Doc

ui Package

Zebra UI. The UI is powerful way to create any imaginable user interface for WEB. The idea is based on developing hierarchy of UI components that sits and renders on HTML5 Canvas element.

Write zebra UI code in safe place where you can be sure all necessary structure, configurations, etc are ready. The safe place is "zebra.ready(...)" method. Development of zebra UI application begins from creation "zebra.ui.zCanvas" class, that is starting point and root element of your UI components hierarchy. "zCanvas" is actually wrapper around HTML5 Canvas element where zebra UI sits on. The typical zebra UI coding template is shown below:

// build UI in safe place  
zebra.ready(function() {
   // create canvas element 
   var c = new zebra.ui.zCanvas(400, 400);

   // start placing UI component on c.root panel
   //set layout manager
   c.root.setLayout(new zebra.layout.BorderLayout());            
   //add label to top
   c.root.add(zebra.layout.TOP,new zebra.ui.Label("Top label")); 
   //add text area to center
   c.root.add(zebra.layout.CENTER,new zebra.ui.TextArea(""));    
   //add button area to bottom
   c.root.add(zebra.layout.BOTTOM,new zebra.ui.Button("Button"));
   ...
});

The latest version of zebra JavaScript is available in repository:

   <script src='http://repo.zebkit.org/latest/zebra.min.js' 
           type='text/javascript'></script>

This package provides the following classes: