Documentation

Reference
qx:canvas (qx.ui.layout.Canvas)

The Canvas is an extended Basic layout.

It is possible to position a widget relative to the right or bottom edge of the available space. It further supports stretching between left and right or top and bottom e.g. left=20 and right=20 would keep a margin of 20 pixels to both edges. The Canvas layout has support for percent dimensions and locations.

Features

  • Pixel dimensions and locations
  • Percent dimensions and locations
  • Stretching between left+right and top+bottom
  • Minimum and maximum dimensions
  • Children are automatically shrunk to their minimum dimensions if not enough space is available
  • Auto sizing (ignoring percent values)
  • Margins (also negative ones)

Item Properties

  • left (Integer|String): The left coordinate in pixel or as a percent string e.g. 20 or 30%.
  • top (Integer|String): The top coordinate in pixel or as a percent string e.g. 20 or 30%.
  • right (Integer|String): The right coordinate in pixel or as a percent string e.g. 20 or 30%.
  • bottom (Integer|String): The bottom coordinate in pixel or as a percent string e.g. 20 or 30%.
  • width (String): A percent width e.g. 40%.
  • height (String): A percent height e.g. 60%.

Notes

  • Stretching (left->right or top->bottom) has a higher priority than the preferred dimensions
  • Stretching has a lower priority than the min/max dimensions.
  • Percent values have no influence on the size hint of the layout.

Example

Here is a little example of how to use the canvas layout.

var container = new qx.ui.container.Composite(new qx.ui.layout.Canvas());

// simple positioning
container.add(new qx.ui.core.Widget(), {top: 10, left: 10});

// strech vertically with 10 pixel distance to the parent's top
// and bottom border
container.add(new qx.ui.core.Widget(), {top: 10, left: 10, bottom: 10});

// percent positioning and size
container.add(new qx.ui.core.Widget(), {left: "50%", top: "50%", width: "25%", height: "40%"});

External Documentation

Extended documentation and links to demos of this layout in the qooxdoo wiki. 

{   u'add': {   u'*': u'add/defaultWithPosition.mako',
                u'groupBox': u'add/setLayout.mako',
                u'layout': u'add/noParent.mako',
                u'qx:application': u'add/qx/application.mako',
                u'qx:page': u'add/setLayout.mako',
                u'qx:slideBar': u'add/setLayout.mako',
                u'qx:split': u'add/qx/split.mako',
                u'qx:window': u'add/setLayout.mako',
                u'qxt:variant': u'add/noParent.mako'},
    u'attributes': {u'*': u'attr/default.mako', u'id': u'', u'qxt:*': u''},
    u'body': {   u'*': u'body/qx/widget.mako',
                 u'qxt:component': u'body/qxt/component_root.mako'},
    u'data': {u'attr': {}, u'props': {u'class': u'qx.ui.layout.Canvas'}},
    u'extends': [u'qx:canvas', u'layout', u'qx:widget', u'base']}

LGPL, EPL © 2008 QxTransformer | Siarhei Barysiuk & Christian Boulanger.
Site design and illustrations by Siarhei Barysiuk. | Icons by Dry Icons.

qooxdoo