Package zebkit.ui

Zebkit UI package contains a lot of various components. Zebkit UI idea is rendering hierarchy of UI components on a canvas (HTML5 Canvas). Typical zebkit application looks as following:

 zebkit.require("ui", "layout", function(ui) {
     // create canvas and save reference to root layer
     // where zebkit UI components should live.
     var root = new ui.zCanvas(400, 400).root;

     // build UI layout{
         layout : new layout.BorderLayout(4),
         padding: 8,
         kids   : {
             "center" : new ui.TextArea("A text"),
             "top"    : new ui.ToolbarPan().properties({
                 kids : [
                     new ui.ImagePan("icon1.png"),
                     new ui.ImagePan("icon2.png"),
                     new ui.ImagePan("icon3.png")
             "bottom" : new ui.Button("Apply")

UI components are ordered with help of layout managers. You should not use absolute location or size your component. It is up to layout manager to decide which size and location the given component has to have. In the example above we add number of UI components to "root" (UI Panel). The root panel uses "BorderLayout" [to order the added components. The layout manager split root area to number of areas: "center", "top", "left", "right", "bottom" where children components can be placed.


zebkit.ui.ButtonRepeatMix   zebkit.ui.DecorationViews   zebkit.ui.FocusableComposite   zebkit.ui.PopupLayerMix   zebkit.ui.RootLayer   zebkit.ui.RulerPan.NumLabels   zebkit.ui.RulerPan.PercentageLabels  

protected <zebkit.ui.Panel> $component (desc)

Shortcut to create a UI component by the given description. Depending on the description type the following components are created:

  • String zebkit.ui.Label
  • Array zebkit.ui.Combobox
  • 2D Array zebkit.ui.grid.Grid

Returns: <zebkit.ui.Panel>

a created UI component

private void $cvp (c, r)

Calculate visible area of the given components taking in account intersections with parent hierarchy.

  • c <zebkit.ui.Panel>

    a component

  • r <Object>

    a variable to store visible area

           { x: {Integer}, y: {Integer}, width: {Integer}, height: {Integer} }
protected void $doPaint ( )

Trigger painting for all collected paint tasks

private <Object> $getPS (l)

Get preferred size shortcut. Null can be passed as the method argument

  • l <zebkit.ui.Layoutable>

    a layoutable component

Returns: <Object>

a preferred size: { width : {Integer}, height: {Integer} }

public void activateWindow (win)

Activate the given window or a window the specified component belongs

public void makeFullyVisible ([d], c)

Relocate the given component to make them fully visible.

  • [d] <zebkit.ui.Panel>

    a parent component where the given component has to be re-located

  • c <zebkit.ui.Panel>

    a component to re-locate to make it fully visible in the parent component

public void showModalWindow (context, win)

Show the given UI component as a modal window

public void showPopupMenu (context, menu)

Show the given popup menu.

public void showWindow (context, [type], win)

Show the given UI component as a window

  • context <zebkit.ui.Panel>

    an UI component of zebkit hierarchy

  • [type] <String>

    a type of the window: "modal", "mdi", "info". The default value is "info"

  • win <zebkit.ui.Panel>

    a component to be shown as the window