{"id":13470174,"url":"https://github.com/barmalei/zebkit","last_synced_at":"2025-03-26T11:30:58.608Z","repository":{"id":3100156,"uuid":"4125610","full_name":"barmalei/zebkit","owner":"barmalei","description":"JavaScript library that follows easy OOP concept, provides HTML5 Canvas based Rich UI and includes Java to JavaScript converter tool","archived":false,"fork":false,"pushed_at":"2019-07-17T21:17:32.000Z","size":44775,"stargazers_count":931,"open_issues_count":51,"forks_count":178,"subscribers_count":90,"default_branch":"master","last_synced_at":"2024-10-30T01:58:13.443Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/barmalei.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-04-24T14:33:03.000Z","updated_at":"2024-09-26T02:17:34.000Z","dependencies_parsed_at":"2022-09-01T20:41:09.814Z","dependency_job_id":null,"html_url":"https://github.com/barmalei/zebkit","commit_stats":null,"previous_names":["barmalei/zebra"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barmalei%2Fzebkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barmalei%2Fzebkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barmalei%2Fzebkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barmalei%2Fzebkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/barmalei","download_url":"https://codeload.github.com/barmalei/zebkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245644239,"owners_count":20649159,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T16:00:24.481Z","updated_at":"2025-03-26T11:30:58.585Z","avatar_url":"https://github.com/barmalei.png","language":"HTML","readme":"\n![ScreenShot](/src/images/readme.png)\n\n# Zebkit - HTML5 Canvas based UI framework \n\n**Zebkit is the next generation of zebra project. It has been heavily re-worked, re-designed and re-organized. The new version is definitely not backward compatible with zebra because of big number of changes it has got. New zebkit grabs the best ideas from previous one and takes many new concepts and features.** \n\nZebkit provides impressive bunch of UI components that works on various devices, supports touch screens and fits single page application development. Implemented with help of easy OOP concept zebkit components are abstracted from WEB/CSS mess what brings support, extendibility and portability on the level of software engineering. With zebkit and its concept any imaginable UI component can be rendered on HTML5 Canvas.      \n\nThe latest version of previous generation of zebkit (zebra) can be found as \"zebra\" release.\n\n# Most significant changes \n\n   * **DOM elements can be hosted in zebkit layout.** They look as natural as native zebkit UI components. For instance: Google map can be added into zebkit layout together with zebkit UI tool tip that will be rendered over the map. You can scroll HTML element in zebkit scroll panel even taking in account the scroll panel exists only as a rendered on HTML5 Canvas UI component:\n\n   ```js\n      ...\n      var c = new zebkit.ui.zCanvas();\n      c.root.setBorderLayout();\n      c.root.add(new zebkit.ui.web.HtmlElement(\"\u003can ID of an HTML element\u003e\"));\n      ...\n   ```\n\n   * **Re-worked OOP and packaging, mixing.** Some aspects of easy OOP concept has been simplified: no method overloading and no single constructor. In the same time it has got possibility to define methods in interfaces and mix the interfaces into classes. Interfaces can be parametrized.\n\n   * **JS code has been reorganized** to decouple zebkit components from WEB environment and have more clear modules dependencies tree. Most of zebkit UI components are free from a specific (WEB) context and potentially can be adapted or ported to other canvas implementations and environments. \n      \n   * **Multiple devices input events unification.** Mouse, touch, pen input events are the one type of events in zebkit. Key event is normalized to have it the same for all platforms and browsers.\n \n   * **New UI black theme and specially developed for zebkit yuidoc theme** with better look and feel and JavaDoc-like features are provided.   \n  \n  ```js\n    // configure zebkit to use light theme\n    zebkit.ui.config(\"theme\", \"light\");  \n\n    zebkit.require(\"ui\", \"layout\", function(ui, layout) {\n        // write zebkit application here\n        ...\n    });\n  ```\n\n   * **Massive changes in components API, new features and new components.**  \n\n   * **\"Zson\" configuration and zebkit \"DoIt\"** as a better variation of configuration and promises. Zson extends JSON with class instantiation, JSON key references, expressions, external JSONs inclusion and so on.\n\n  ```json\n  {   \"a\": 100,\n      \"b\": \"%{a}\",           \n      \"c\": { \"@Date\": [] },\n      \"d\": \"%{../external.json}\"  \n  }   \n  ```\n\n   - \"b\" is a reference to \"a\"\n   - \"c\" value will be an instance of __Date__ class\n   - \"d\" value will be set with the loaded JSON \n\n   YAML can be also used if \"js-yaml.min.js\" will be included into your code:\n\n  ```yaml\n  a: 100,\n  b: \"%{a}\"         \n  c: { class : \"Date\" }\n  d: \"%{../external.json}\"  \n  ```   \n\n# Requirements \n\nZebkit works in MS Internet Explorer 10+, MS Edge, FireFox 3+, Safari 5+, Google Chrome. It should support iOS 7+ and Android 4+ mobile browsers.\n\nZebkit requires nodejs to be installed. If you plan to re-generate zebkit web site you have to install jekyll (https://jekyllrb.com/). If you plan to re-generate an API Doc you have to install \"yuidoc\" as follow:\n\n```bash\n  npm install -g yuidocjs\n```\n\nZebkit uses \"gulp\" as building tools. To install it type the following in a terminal:\n\n```bash\n  npm install gulp-cli -g\n```\n\n\n# Installation \n\nTo install required nodejs packages run the following command from zebkit home folder: \n```bash\n    npm install\n```\n\n# Building zebkit artifacts\n\nTo build major zebkit artifacts (JS code) run the following command:\n```bash\n   gulp\n```\n\nTo build runtime zip package (find it in \"build\" folder): \n```bash\n   gulp runtime\n```\n\nTo generate API doc run the following command (find generated light and dark versions of API doc in \"apidoc/light\" and \"apidoc/dark\" folders correspondingly):\n```bash\n   gulp apidoc\n```\n\nIf you have installed jekyll you can initiate zebkit WEB site re-generation with the following command (find generated light and dark website versions in \"website/light\" and \"website/dark\" folders correspondingly):\n```bash\n   gulp website\n```\n\n\n# Run http server and view web site \n\n```bash\n   gulp http\n```\n\nOpen zebkit WEB site \"http://localhost:8090/index.html\" in a browser.\n\n# Simple example of a zebkit application\n\nTo have an idea what zebkit programming looks like see the example code below:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003cscript src='build/zebkit.min.js'\n                type='text/javascript'\u003e\u003c/script\u003e\n        \u003cscript type='text/javascript'\u003e\n            zebkit.require(\"ui\", \"layout\", function(ui, layout) {\n                // create Canvas using JSON like style\n                var zc = new ui.zCanvas();\n                zc.root.properties({\n                    borderLayout: 4,\n                    padding: 8,\n                    kids  : {\n                        center: new ui.TextArea(\"\", true),\n                        top   : (new ui.BoldLabel(\"Sample application\")).properties({\n                            padding : 8\n                        }),\n                        bottom: new ui.Button(\"Select all\")\n                    }\n                }).on(\"//zebkit.ui.Button\", function(bt) { // reg event handler\n                    // select text in the text area\n                    zc.byPath(\"//zebkit.ui.TextArea\").selectAll();\n                });\n            });\n        \u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou can create, for instance, \"sample.html\" in zebkit home folder. Then fill the file with the content shown above and run it in a browser with the URL below:\n\n\"http://localhost:8090/sample.html\"\n\n# Bundle zebkit stuff in single JS file\n\nZebkit loads multiple configuration files (JSONs) and resources (images) during its initialization. The process costs additional time and makes impossible running of zebkit and its applications without HTTP server because of security restrictions browsers issue. \n\nThe latest version of zebkit allows developers to bundle all required with zebkit stuff in single \"zebkit.js\" or \"zebkit.min.js\" file. This feature improves zebkit bootstrap time significantly and lets building applications that can be run without HTTP server, just by opening its in a browser as HTML file. \n\nTo create bundled version of zebkit use the following command:\n```bash\n    gulp zebkit --bundle true\n```\n\n# UI YAML support\n\nTogether with JSON format developers can use less talkative and more readable YAML format to describe zebkit UI forms:\n```YAML\nkids:\n  -  class: zebkit.ui.Panel\n     borderLayout: [4, 4]\n     padding: 4\n     border: plain\n     kids:\n        top:\n            class: { \"zebkit.ui.BoldLabel\": \"Simple application\" }\n            padding: 4\n            background: lightGray\n\n        center:\n            class: zebkit.ui.TextField\n\n        bottom:\n            class : { \"zebkit.ui.Button\": Clear }\n```\n\nTo support YAML format add open source \"js-yaml\" (https://github.com/nodeca/js-yaml/blob/master/dist/js-yaml.min.js) script into header of your page. Zebkit detects YAML by file extension (yaml).\n\n\n# License\n\nApache License, Version 2.0 http://www.apache.org/licenses/LICENSE-2.0.html\n\n# Contact\n\n   * e-mail  : ask@zebkit.org\n   * linkedin: http://nl.linkedin.com/pub/andrei-vishneuski/14/525/34b/\n\n","funding_links":[],"categories":["HTML","Libraries"],"sub_categories":["JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarmalei%2Fzebkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarmalei%2Fzebkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarmalei%2Fzebkit/lists"}