Zebra project
on
GITHUB

Next generation of Zebra is ready! Distributed under LGPL now. Find source code on GITHUB.

Innovative HTML5 UI

Building and rendering any imaginable UI components on HTML5  Canvas. Pixel by pixel painting control, event handling, focus management, look and feel customization, layout management and so on.

Rich UI components set

More than 30 various UI components: grid, tree, scroll, text field, text area, combo, menu, widow, dialog, popup menu, tooltip, tabs, slider, list, button, video checkbox, radio box, label, border panel, split panel and many others.

Decoupled UI engine

Light weight, fast and compact UI engine. Handy to render a content on canvas, handle events, layouting, layering, clipboard supporting and many other.

JSON UI definition

Follow JSON-like code style. Use JSON format to keep and load UI forms.

RPC, Restful IO

API and classes to communicate to XML-RPC, JSON-RPC, restful remote services and servers.

Look and feel customization

Flexible customization by JSON formatted configuration. Building UI themes by overloading standard JSON stuf.

Art coding

Easy to understand and use Zebra core OOP concept. Extendable hierarchy of Zebra classes. Free from typical DOM + JavaScript + CSS mess.

Zebra

Zebra brings fresh view and possibilities to develop WEB based Rich UI applications. The approach sits on top of HTML5 Canvas element what makes possible to render any imaginable UI. Zebra development is much closer to software engineering where you write well structured, supportable, extendable code basing on easy Zebra OOP concept. You keep distance from the mess of HTML, JavaScript code, CSS and DOM manipulation. Zebra is pure WEB based alternative to Flash or Applet technologies that doesn’t require a plugging on a client side to be installed. In the same time Zebra utilizes power, simplicity and beauty of JavaScript coding.

Depending on your needs any of the demonstrated at the picture below modules can be used separately. Inner module is included in outer. 

test

  • Zebra Rich UI. Full package that includes more than 30 various Rich UI components that are built basing on Zebra UI engine.
  • Zebra UI engine. This is powerful engine for rendering,  events handling, layering, layout and focus management and many other things.
  • Zebra IO. Small package that include XML-RPC, JSON-RPC and other service communication stuff

Below you can find many different live Zebra based samples and small applications. Better to see it once instead of wasting tons of words.

Zebra Rich UI live demo

Take a look and try the most from 30 Zebra UI components collected in one demo

Run the demo
in new window

Zebra UI Engine live samples

UI engine is handy and powerful Zebra package that can be helpful to implement own UI interface, work with canvas events and render graphical content

Charts

Three charts are arranged with border layout manager (using TOP, CENTER, BOTTOM constraints)

Drag-able panels


Drag and move panels on the canvas

Layer to freeze input


Press ALT-D to disable or enable input elements. Enter a character when it is enabled

Drag-able charts


Three charts are placed with stack layout manager. Charts are draggable, drag a chart by mouse.

Mouse cursor control


Mouse cursor is changed according to an area it is moved in

Shaped UI component


UI component can have desirable shape. Find triangle and circle UI components. The components change its background when mouse cursor gets in it.

Layouted components


Hierarchy of standard Zebra UI panels that are arranged by applying various layout managers: border, list, grid layout managers.

Shaped focusable components


Number of shaped UI components that are arranged with border layout manager. Every component can be used to input a character. Focus manager allows a user travel by TAB between the input components.

Mouse event handling


Gradient follows mouse cursor and prints mouse coordinate. Pressing a mouse button changes gradient color.