Get started

In general is expected you are dealing with JS code following zebkit easy OOP concept, using and extending zebkit components. No HTML neither CSS manipulation is required. Dealing with WEB specific world should be avoided.

<!DOCTYPE html>
<html>
    <head>
       ...
    </head>
    <body> ... </body>
</html>
...
<meta name="viewport" 
   content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
<meta name="msapplication-tap-highlight" content="no">
...
<html>
    <head>
        <script type="text/javascript"
                src="http://zebkit.org/ver/latest/zebkit.min.js">
        </script>
     ...
// wrap zebkit code with require method to make sure everything
// has been initialized 
zebkit.require("ui", "layout", function(ui, layout) {
    var root = new ui.zCanvas("sample", 300, 300).root;
    root.properties({
        border:  "plain", 
        padding: 8,
        layout:  new layout.BorderLayout(6),
        kids  : {
            "center": new ui.TextArea("A text ... "),
            "bottom": new ui.Button("test") 
        }
    });
});
Get started zebkit application

Add events handling

zebkit.require(function() {
    ...
    // find first component whose class is zebkit.ui.Button
    root.on("//zebkit.ui.Button", function() {
        // find first component whose class is zebkit.ui.TextArea
        // and clear it
        root.byPath("//zebkit.ui.TextArea").setValue("");
    })
});
Get started zebkit application

Load required resources

zebkit.resources("myimage.jpg", "mytext.txt", function(image, text) {
    // here you get completely loaded image and textual data  
    ...
});