Zebra application

Start developing a zebra application from creation an empty HTML with a reference to zebra library code hosted on zebra web site. The latest stable released version of zebra library is always can be found by the the same url: http://repo.zebkit.org/latest/*. A zebra application code has to be written in a place that guarantees zebra is initialized and ready for usage. Do it in “zebra.ready(…)” method context. At last the zebra application should look as follow:

<!DOCTYPE html>
<html>
    <head>
       <!--
           link to zebra library from zebra web site
        -->
        <script src='http://repo.zebkit.org/latest/zebra.min.js'
                type='text/javascript'>
        </script>
        
        <script> 
           zebra.ready(function() {
              // safe place for writing zebra app code  
           });
        </script>
    </head>
   
<body></body>
</html>

The first thing zebra code should start from is a creation of HTML canvas and filling its root panel with an UI content:

    zebra.ready(function() {
        // create canvas 400x700 pixels
        var canvas = new zebra.ui.zCanvas(400, 700);

        // fill canvas root panel with UI components
        canvas.root.setLayout(new zebra.layout.BorderLayout(8));
        canvas.root.add(zebra.layout.CENTER, new zebra.ui.TextArea(""));
        canvas.root.add(zebra.layout.BOTTOM, new zebra.ui.Button("Clean"));
    });

Pay attention zebra UI is hierarchy of various UI components where every parent UI component defines rules its child components are placed by declaring a layout manager. Zebra layout management is powerful and important feature that makes UI adjustable to different screens and its resolutions.

Host zebra locally

If you need to keep zebra library locally download desired runtime package from zebra web site and unzip it in your local environment. The runtime package of the latest stable zebra version is located http://repo.zebkit.org/latest/zebra.runtime.zip

Zebra library requires only three artifacts to be placed next to each other:

  • “zebra.js” and “zebra.min.js” – code
  • “zebra.json” – UI components configuration
  • “zebra.png” – icons set

So, it is easy to copy all necessary files manually.

Zebra on mobiles

Zebra doesn’t have a specific mobile version, zebra code base can work on mobile devices in mobile browsers as is. But you have to do few adjustments:

  • Add two meta tags into head of your HTML to make HTML page properly scaled:
    <!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
            <meta name="msapplication-tap-highlight" content="no" />
            ...
       </head>
    ...
    </html>
    
  • Typical WEB mobile application works in full screen mode. To stretch a zebra application to occupy the whole browser window call canvas “fullScreen(…)” method:
       zebra.ready(function() {
            // create canvas 400x700 pixels
            var canvas = new zebra.ui.zCanvas(400, 700);
            ...
            // force canvas to fill all available page space
            canvas.fullScreen();   
       });
    
  • Zebra UI components default fonts and sizes can be small for mobile devices. You should care about it by setting the properties programmatically or creating/adjusting a configuration file.

UI configuration

Zebra library requires “zebra.json” configuration file. The file defines necessary managers, structures and default properties values different UI components have to have. There are number of ways developers can customize zebra UI with or without the configuration file.

“zebra.json” modification If developers have direct access to “zebra.json” file they can edit it to archive required results.

redefine “zebra.json” Developers can re-define the URL to the zebra configuration file by specifying “zebra.json” environment variable beforehand. Do it as follow:

     // set "zebra.json" variable to re-define default zebra configuration path 
     zebra()["zebra.json"] = "<a custom URL to JSON>";
                
     zebra.ready(
         function() {
             // build application here
         }
     ); 

Add extra configuration file It is not very handy to have a deal with a big zebra configuration file. In this case developers can change UI components properties by loading an extra JSON configuration file or number of files. The extra file is loaded after the main zebra configuration file has been loaded and can overlap, full fill properties values the main configuration file declares. Add an extra configuration as follow:

// add extra configuration file
zebra.ui.configure("<an URL to extra configuration JSON>");
                
zebra.ready(
    function() {
        // build application here
    }
);

Modify default properties values Developers can configure UI components properties directly in their code. The idea is every UI component keeps its default properties values on the component class level (static fields). A new instantiated UI component is initialized with the properties values its class defines. For instance if we want to change default text color of “zebra.ui.Label” component for all instantiated labels we can do it as it is shown below:

zebra.ready(
    function() {
         // set default text color for label component to "red"
         zebra.ui.Label.color = "red";
         ...
         var lab1 = new zebra.ui.Label("Label 1"); // color will be set to red
         var lab2 = new zebra.ui.Label("Label 2"); // color will be set to red
         var lab3 = new zebra.ui.Label("Label 3"); // color will be set to red
         ...
    }
);

Environment variables

It supposed that environment variables are kept in namespace. To get dictionary of all defined variables call namespace as a function with empty arguments list:

// get "zebra" environment variables
var variables = zebra();
// access an environment variable
variables["myvariable"];
// set new zebra environment variable
zebra()["MyVar"] = 100;