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.
- Take existent or create a new HTML:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body> ... </body>
</html>
- Add meta to HTML head tag for single page / mobile applications
...
<meta name="viewport"
content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
<meta name="msapplication-tap-highlight" content="no">
...
- Include zebkit JS in script section:
<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(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
...
});