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
     root.properties({
         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.




Interfaces:

zebkit.ui.DrawFocusMarker   zebkit.ui.FireEventRepeatedly   zebkit.ui.HostDecorativeViews   zebkit.ui.PopupLayerMix   zebkit.ui.RootLayer   zebkit.ui.RulerPan.NumLabels   zebkit.ui.RulerPan.PercentageLabels  

Classes:
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
    • String encoded as "[x] Text" or "[] Text" will considered as checkbox component
    • String encoded as "@(image_path:WxH) Text" will considered as image or image label component
    • All other strings will be considered as label component
  • Array zebkit.ui.Combobox
  • 2D Array zebkit.ui.grid.Grid
  • Image will be embedded with zebkit.ui.ImagePan component
  • zebkit.ui.View instance will be embedded with zebkit.ui.ViewPan component
  • zebkit.ui.Panel instance will be returned as is

Parameters:
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.


Parameters:
  • 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


Parameters:
  • 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


Parameters:
public void makeFullyVisible ([d], c)

Relocate the given component to make them fully visible.


Parameters:
  • [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


Parameters:
public void showPopupMenu (context, menu)

Show the given popup menu.


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

Show the given UI component as a window


Parameters:
  • 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