Using Layouts In Qooxdoo – Part 2: VBox Layout

This is the second part of a tutorial series about layout managers, container objects and object hierarchies in Qooxdoo. Read the first part here.

qx.ui.layout.VBox is a basic layout manager that places child widgets on top of each other.

VBox Layout

Let’s see how VBox lays out components on a simple application¹. All the necessary code is below:

   1 /*
   2 #asset(vbox/*)
   3 */
   4 qx.Class.define("vbox.Application",
   5 {
   6     extend: qx.application.Standalone,
   7     members: {
   8         main: function(){
   9             this.base(arguments);
  10 
  11             var main_container = new qx.ui.container.Composite();
  12 
  13             var layout_manager = new qx.ui.layout.VBox();
  14             main_container.setLayout(layout_manager);
  15 
  16             main_container.add(new qx.ui.form.Button("Child Widget 1"));
  17             main_container.add(new qx.ui.form.Button("Child Widget 2"));
  18             main_container.add(new qx.ui.form.Button("Child Widget 3"));
  19 
  20             var application_root = this.getRoot();
  21             application_root.add(main_container);
  22         }
  23     }
  24 });

VBox Example 1

I told you VBox is basic; child widgets are stacked vertically in order they have added. We haven’t set any preferences (constraints), so it’s all defaults. Buttons get an optimal width depending on the length of their label. The container main_container applies this width to itself, it conforms its children’s dimensions.

Try giving one of the buttons a longer label. Now the modified button is wider, that was expected. But the others are widened as well. That is because they have conformed (flexed) their container’s width. We will see how this works in detail.

Let’s set the container’s size same as the viewport’s:

   1 /*
   2 #asset(vbox/*)
   3 */
   4 qx.Class.define("vbox.Application",
   5 {
   6     extend: qx.application.Standalone,
   7     members: {
   8         main: function(){
   9             this.base(arguments);
  10 
  11             var main_container = new qx.ui.container.Composite();
  12             main_container.setWidth(qx.bom.Viewport.getWidth());
  13             main_container.setHeight(qx.bom.Viewport.getHeight());
  14 
  15 
  16             var layout_manager = new qx.ui.layout.VBox();
  17             main_container.setLayout(layout_manager);
  18 
  19             main_container.add(new qx.ui.form.Button("Child Widget 1"));
  20             main_container.add(new qx.ui.form.Button("Child Widget 2"));
  21             main_container.add(new qx.ui.form.Button("Child Widget 3"));
  22 
  23             var application_root = this.getRoot();
  24             application_root.add(main_container);
  25         }
  26     }
  27 });

VBox Example 2

Notice that only width seems to be adjusted, even though we have set both dimensions. Actually, it worked as we intended to; main_container now fills the entire viewport. But by default VBox won’t flex child widgets vertically. We will start overriding this behaviour in a minute.

Try setting alignY property to “center” or “bottom” on the layout manager:

layout_manager.setAlignY("bottom");

So far we have set properties (constraints) on containers (main_container.width & main_container.height) and on layout managers (layout_manager.alignY). In the next example we will set properties on child widgets:

   1 /*
   2 #asset(vbox/*)
   3 */
   4 qx.Class.define("vbox.Application",
   5 {
   6     extend: qx.application.Standalone,
   7     members: {
   8         main: function(){
   9             this.base(arguments);
  10 
  11             var main_container = new qx.ui.container.Composite();
  12             main_container.setWidth(qx.bom.Viewport.getWidth());
  13             main_container.setHeight(qx.bom.Viewport.getHeight());
  14 
  15             var layout_manager = new qx.ui.layout.VBox();
  16             main_container.setLayout(layout_manager);
  17 
  18             main_container.add(new qx.ui.form.Button("Child Widget 1"), {flex: 1});
  19             main_container.add(new qx.ui.form.Button("Child Widget 2"), {flex: 1});
  20             main_container.add(new qx.ui.form.Button("Child Widget 3"), {flex: 1});
  21 
  22             var application_root = this.getRoot();
  23             application_root.add(main_container);
  24         }
  25     }
  26 });

VBox Example 3

We have added a second parameter to the add method of layout manager. This JavaScript object literal is used to set widget specific properties on the layout manager.

Flex property determines how the extra space² is distributed between children. By default it is set to 0, which means that the widget will not grow vertically. Any other (integer) value for flex will cause growing to occupy the extra space. Growing is proportional to flex value. Try different flex values for different widgets and see the changes.

NEXT PART: HBox Layout

1: If you haven’t created a qx application before, it is explained in detail in the tutorial.

2: Remaining space after initial dimensions of children are computed.

No related posts.

Tags: javascript, layout, qooxdoo, ria, vbox, widget

This entry was posted on Wednesday, February 4th, 2009 at 14:00 and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.

muhuk.com

Using Layouts In Qooxdoo – Part 2: VBox Layout