SmartGWT Layout

From the SmartGWT javadoc of Canvas:

Canvas is the base abstraction for cross-browser DHTML drawing.  All DHTML widgets inherit from the Canvas class.

In smartGWT all widgets extend Canvas. A canvas is used to put elements in(addMember), so you can a new Canvas or Widget to a canvas. In a Canvas you can every item can have a position. If you for instance want to get something at the center of a Canvas you can do Widget.centerInPage();. if you want to create an item that fills himself in the canvas you can do Widget.setWidth100() and Widget.setHeigh100(). For 1 element this is a good way to do it. But if you like 2 widgets who each fill 1 half of the screen its not that easy anymore. therefor SmartGWT has some extension for Canvas, the main once are:

• Layout
• HLayout
• VLayout

HLayout and VLayout align the elements against the vertical or horizontal axis. So if you add 2 widgets in a VLayout these 2 elements get under each other in the VLayout (The widget first added on top and the other one under it. If not stated otherwise). In the HLayout the elements are placed from left to right. You can put these layouts into eachother to achieve all kinds of layouts. So if you want a box with under that 2 boxes next to each other you put the box on top in a VLayout and a together with a HLayout that contains the other 2 boxes. you can look at have a look at the showcase to see an example with code: link.

Now for the size of the elements there are also some option. First you can do (as stated before) .setWidth100(); and .setHeight100(); these 2 make the component fill the canvas it is in. You can also make make a component fill a certain % of the total Canvas by doing .setHeight(“70%”);.  You can also give a component a fixed width or height, .setWidth(100); for example gives the element a width of 100px. This size doesn’t change if you re size the Canvas it is in (by resizing the browser screen for example). As last option you can set the width of height to .setWigth(“*”); witch is also the default value. This makes the  component fill the rest of the canvas. Again you can find an example here.

Advertisement