Bambookit Home    Bambookit GUI Tutorial


II. GUI Basics

Chapter 5. Working with Widgets

In this chapter you will learn about widget interaction. You will also see how much all widgets have in common, which makes learning of specific widget even easier.

The Bambookit widget universe has only one broad category - widgets. User Interface elements in Bambookit GUI are called widgets. Each of these user interface elements has a list of properties that affect how it appears on screen. At their foundation, all widgets share a large number of properties.

Container and component In most programming languages the concept of containers and components kept separate. The idea behind this concept is that containers can accept children, and components can not. For example, you can have a window that accepts button components, but you can't add components to a button. In Bambookit there is no distinction between a container and a component. You can place a widget container inside a button if you choose so.

Root Widget A Bambookit root widget container is a rectangular-shaped widget that holds one or more other widgets, including widget-containers, and it is a root widget in XML document. Root widget or containers can hold interactive elements, such as buttons and fields, and even other containers (widgets). There is no limit to the amount of container nesting you can deploy.

Widget Layers Each Bambookit child widget occupies its own layer in an arrangement. At the top is a root widget, a parent. No other widget can be placed at the layer above the root widget. Like containers (which are themselves, widgets), all widgets exist in their own layers inside container.

Although deploying widgets to overlap each other is not a common practice, you are free to set locations of your widgets any way you like. If you place overlapping buttons inside the same widget, the first button will be on the topmost layer. You may create as many widgets container as you need and place in them widgets. All layering action is local to the container. Widgets belong to their respective containers, and widget order is determine within the container.

Placing new widgets This containment structure has a big impact on the way you work with a container full of widgets. As you reposition container, all of its contained widgets go along for the ride. Widgets establish their horizontal and vertical(x,y) location relative to the top left corner of their container. The root widget location is relative to the size of the applet it placed in.

The order in which you place the widgets in the container can be set through the Layout Manager. Otherwise you would have to calculate the location (x,y) for each widget in the container. In the next releases you would be using IDE to drag and drop UI elements into the container.

Properties In addition to being able to position and size widgets you have great control over each widgets' properties. They are placed in the widget's XML tags for each widget. Reference guide of this tutorial provide complete list of methods for widgets. The parent-child relationship of containers and their widgets comes into play with many properties, which are inherited. If you make no change for a font settings for a widget, for example, it automatically inherits the font settings of its parent container. This connection can carry along for as many generations nested widgets as you devise. The inherited properties are colors, highlights, and fonts.

Back    Next