Zebra API Doc

zebra.layout.Layoutable Class

Layoutable class defines rectangular component that has elementary metrical properties like width, height and location and can be a participant of layout management process. Layoutable component is container that can contains other layoutable component as its children. The children components are ordered by applying a layout manager of its parent component.

Constructor

zebra.layout.Layoutable

()

Methods

add

(
  • constr
  • d
)
zebra.layout.Layoutable

Add the new children component with the given constraints

Parameters:

  • constr Object

    a constraints of a new children component

  • d zebra.layout.Layoutable

    a new children component to be added


Return: zebra.layout.Layoutable

added layoutable component

calcPreferredSize

(
  • target
)
Object private

Internal implementation of the component preferred size calculation.

Parameters:


Return: Object

a preferred size. The method always returns { width:10, height:10 } as the component preferred size

doLayout

() private

By default layoutbable component itself implements layout manager to order its children components. This method implementation does nothing, so children component will placed according locations and sizes they have set.

find

(
  • path
)
zebra.layout.Layoutable

Find a first children component that satisfies the passed path expression.

Parameters:

  • path String

    path expression. Path expression is simplified form of XPath-like expression:

       "/Panel"  - find first children that is an instance of zebra.ui.Panel
       "/Panel[@id='top']" - find first children that is an instance of zebra.ui.Panel with "id" property that equals "top"
       "//Panel"  - find first children that is an instance of zebra.ui.Panel recursively 

    Shortcuts:

           "#id" - find a component by its "id" attribute value. This is equivalent of "//*[@id='a component id property']" path
           "zebra.ui.Button" - find a component by its class.  This is equivalent of "//className" path

Return: zebra.layout.Layoutable

found children component or null if no children component can be found

findAll

(
  • path
  • [callback]
)
Array

Find children components that satisfy the passed path expression.

Parameters:

  • path String

    path expression. Path expression is simplified form of XPath-like expression:

        "/Panel"  - find first children that is an instance of zebra.ui.Panel
        "/Panel[@id='top']" - find first children that is an instance of zebra.ui.Panel with "id" property that equals "top"
        "//Panel"  - find first children that is an instance of zebra.ui.Panel recursively 

    Shortcuts:

           "#id" - find a component by its "id" attribute value. This is equivalent of "//*[@id='a component id property']" path
           "zebra.ui.Button" - find a component by its class.  This is equivalent of "//className" path
  • [callback] Function optional

    function that is called every time a new children component has been found.


Return: Array

return array of found children components if passed function has not been passed

getBottom

() Integer

Get bottom padding.


Return: Integer

bottom padding in pixel

getByConstraints

(
  • c
)
zebra.layout.Layoutable

Get a children layoutable component by the given constraints.

Parameters:


Return: zebra.layout.Layoutable

a children component

getLeft

() Integer

Get left padding.


Return: Integer

left padding in pixel

getPreferredSize

() Object

Get preferred size. The preferred size includes top, left, bottom and right paddings and the size the component wants to have


Return: Object

return size object the component wants to have as the following structure:

    {width:{Integer}, height:{Integer}} object

getRight

() Integer

Get right padding.


Return: Integer

right padding in pixel

getTop

() Integer

Get top padding.


Return: Integer

top padding in pixel

indexOf

(
  • c
)
Integer

Detect index of a children component.

Parameters:

  • c zebra.ui.Layoutbale

    a children component


Return: Integer

insert

(
  • i
  • constr
  • d
)
zebra.layout.Layoutable

Insert the new children component at the given index with the specified layout constraints. The passed constraints can be set via a layoutable component that is inserted. Just set "constraints" property of in inserted component.

Parameters:

  • i Integer

    an index at that the new children component has to be inserted

  • constr Object

    layout constraints of the new children component

  • d zebra.layout.Layoutbale

    a new children layoutable component to be added


Return: zebra.layout.Layoutable

an inserted children layoutable component

invalidate

()

Invalidate component layout and metrics.

invalidateLayout

() protected

Invalidate the component layout. Layout invalidation means the component children components have to be placed with the component layout manager. Layout invalidation causes a parent component layout is also invalidated.

kidAdded

(
  • i
  • constr
  • d
)

The method can be implemented to be informed every time a new component has been inserted into the component

Parameters:

  • i Integer

    an index at that the new children component has been inserted

  • constr Object

    layout constraints of the new children component

  • d zebra.layout.Layoutbale

    a new children layoutable component that has been added

kidRemoved

(
  • i
  • c
)

The method can be implemented to be informed every time a children component has been removed

Parameters:

  • i Integer

    a children component index at which it has been removed

  • c zebra.layout.Layoutable

    a children component that has been removed

laidout

()

The method can be implemented to be informed every time the component has completed to layout its children components

properties

(
  • [path]
  • props
)
zebra.ui.Layoutable chainable

Apply the given set of properties to the given component or a number of children components.

   var c = new zebra.layout.Layoutable();
   c.properties({
       width: [100, 100],
       location: [10,10],
       layout: new zebra.layout.BorderLayout()
   })

   c.add(new zebra.layout.Layoutable()).add(zebra.layout.Layoutable()).add(zebra.layout.Layoutable());
   c.properties("//*", {
       size: [100, 200]
   });

Parameters:

  • [path] String optional

    a path to find children components

  • props Object

    a dictionary of properties to be applied


Return: zebra.ui.Layoutable

a component itself

recalc

() protected

By default there is no any implementation of "recalc" method in the layoutable component. In other words the method doesn't exist. Developer should implement the method if the need a proper and efficient place to calculate component properties that have influence to the component preferred size. The "recalc" method is called only when it is really necessary to compute the component metrics.

relocated

(
  • px
  • py
)

The method can be implemented to be informed every time the component has been moved

Parameters:

  • px Integer

    x previous coordinate of moved children component

  • py Integer

    y previous coordinate of moved children component

remove

(
  • c
)
zebra.layout.Layoutable

Remove the given children component.

Parameters:


Return: zebra.layout.Layoutable

a removed children component

removeAt

(
  • i
)
zebra.layout.Layoutable

Remove a children component at the specified position.

Parameters:

  • i Integer

    a children component index at which it has to be removed


Return: zebra.layout.Layoutable

a removed children component

removeMe

()

Remove the component from its parent if it has a parent

resized

(
  • w
  • h
)

The method can be implemented to be informed every time the component has been resized

Parameters:

  • w Integer

    a previous width of the component

  • h Integer

    a previous height of the component

setAt

(
  • i
  • d
)
zebra.layout.Layoutable

Replace a children component at the specified index with the given new children component

Parameters:


Return: zebra.layout.Layoutable

a previous component that has been re-set with the new one

setBounds

(
  • x
  • y
  • w
  • h
)
chainable

Set the layoutable component bounds. Bounds defines the component location and size.

Parameters:

  • x Integer

    x coordinate relatively to the layoutable component parent

  • y Integer

    y coordinate relatively to the layoutable component parent

  • w Integer

    a width of the component

  • h Integer

    a height of the component

setId

(
  • id
)
chainable

Set the given id for the component

Parameters:

  • id String

    an ID to be set

setLayout

(
  • m
)
chainable

Set the given layout manager that is used to place children component. Layout manager is simple class that defines number of rules concerning the way children components have to be ordered on its parent surface.

Parameters:

  • m zebra.ui.Layout

    a layout manager

setLocation

(
  • xx
  • yy
)

Set the layoutable component location. Location is x, y coordinates relatively to a parent component

Parameters:

  • xx Integer

    x coordinate relatively to the layoutable component parent

  • yy Integer

    y coordinate relatively to the layoutable component parent

setParent

(
  • o
)
protected

Set the parent component.

Parameters:

setPreferredSize

(
  • w
  • h
)

Set the specified preferred size the component has to have. Component preferred size is important thing that is widely used to layout the component. Usually the preferred size is calculated by a concrete component basing on its metrics. For instance, label component calculates its preferred size basing on text size. But if it is required
the component preferred size can be fixed with the desired value.

Parameters:

  • w Integer

    a preferred width. Pass "-1" as the argument value to not set preferred width

  • h Integer

    a preferred height. Pass "-1" as the argument value to not set preferred height

setSize

(
  • w
  • h
)

Set the layoutable component size.

Parameters:

  • w Integer

    a width of the component

  • h Integer

    a height of the component

validate

()

Force validation of the component metrics and layout if it is not valid

validateMetric

() protected

Validate the component metrics. The method is called as a one step of the component validation procedure. The method causes "recalc" method execution if the method has been implemented and the component is in invalid state. It is supposed the "recalc" method has to be implemented by a component as safe place where the component metrics can be calculated. Component metrics is individual for the given component properties that has influence to the component preferred size value. In many cases the properties calculation has to be minimized what can be done by moving the calculation in "recalc" method

Attributes

constraints

Object

The component layout constraints. The constraints is specific to the parent component layout manager value that customizes the children component layouting on the parent component.

Default: null

height

Integer readonly

Height of rectangular area

Default: 0

isValid

Boolean readonly

Indicate a layoutable component validity

Default: false

isVisible

Boolean readonly

Indicate a layoutable component visibility

Default: true

kids

Array readonly

Reference to children components

Default: empty array

layout

zebra.layout.Layout readonly

Layout manager that is used to order children layoutable components

Default: itself

parent

zebra.layout.Layoutable readonly

Reference to a parent layoutable component

Default: null

width

Integer readonly

Width of rectangular area

Default: 0

x

Integer readonly

x coordinate

Default: 0

y

Integer readonly

y coordinate

Default: 0