XML Tutorials Layout Manager
Version 1.6

This is the archives. For the latest Bambookit GUI 2.0, XML GUI Demos & Tutorials visit: www.bambookit.com/_demo.html


The layout behavior of the component is relative to the panel it sits in. Bamboo Suite provides an intuitive Layout Manager that implements the concept of anchors applied to all controls. A control has 4 anchors, left, top, right and bottom. If a control is ‘anchored’ on all 4 sides then when its parent is resized so is the child control resized accordingly. Dynamically resize your applications with an intuitive internal layout manager handled using the simple concept of anchors. Example: by attaching anchors on the left and right sides (setAnchor="true,false,true,false") of the control, they would grow and shrink whenever the objects expand and contract.

In the syntax: setAnchor="false,false,true,false", first 'false' parameter takes care of the left side of the widget, the second 'false' parameter takes care of the top of the widget, the third one - the right side of the widget, and the fourth parameter - the bottom side.

In the applet example above, two windows are displayed. The one with 'set Anchors for the red button' will display the button during resize:

<Button setShape="324,1,20,18" setFocusTraversable="false" addActionTarget="main,invoke,removeWidget='simple'"
setBorder="none" addImage="images/close.gif,13,13" setImageRollover="images/closerollover.gif" setImageDown="images/closedown.gif" setOpaque="false" setAnchor="false,false,true,false"/>

While the window without Anchors set will not display the button during resize:

<Button setShape="324,1,20,18" setFocusTraversable="false" addActionTarget="main,invoke,removeWidget='simple'"
setBorder="none" addImage="images/close.gif,13,13" setImageRollover="images/closerollover.gif"
setImageDown="images/closedown.gif" setOpaque="false"/>


The anchors should be always set for DragResize controls and the controls inside of the resizing panel. See in XML Source below how Anchors are applied in this case.

Refer to Reference for complete list of Properties.

XML Source for tutorials_layout_manager.xml file. HTML Source:
<html>
<body>
<applet archive="bamboo_1_5.jar" code="Loader.class" width=700 height=500>
<param name="loadgui" value="tutorials_layout_manager.xml">
</applet>
</body>
</html>

tutorials_panel_widget.XML Source:

<Widget setShape="0,0,500,300" setName="main">
<Widget setSize="350,200" setBackground="white" setBorder="roundraised" setName="simple">
<DragResize setLabel="Bamboo Window" setBorder="none" setShape="3,3,350,20" setBackground="2211cc"
setForeground="white" setAlign="left" setFontSize="13" setFontStyle="bold" setInsets="4,4,2,2"
setAnchor="true,false,true,false">
<Button setShape="324,1,20,18" setFocusTraversable="false" addActionTarget="main,invoke,removeWidget='simple'"
setBorder="none" addImage="images/close.gif,13,13" setImageRollover="images/closerollover.gif"
setImageDown="images/closedown.gif" setOpaque="false" setAnchor="false,false,true,false"/>
</DragResize>
<DragResize setBorder="none" setShape="340,190,6,6" setBorder="squareraisedthin" setBackground="lightGray"
setResize="bottomright" setAnchor="false,false,true,true"/>
</Widget>
</Widget>

[Home][Tutorial] [Demo]

Containers
Windows Panels Tabs Resize Layout Manager Splitter View Dragresize Scrollbars