|C H A P T E R 6|
This chapter shows you how to use the layout managers provided by the Lightweight UI Toolkit library. It also gives an example of writing a custom layout manager. For each layout manager, this chapter supplies sample code demonstrating how to use the layout manager and a general illustration.
When adding a component to a container, specify the component's location (for example, BorderLayout.CENTER) as one of the arguments to the addComponent method. If this component is missing from a container, controlled by a BorderLayout object, make sure that the component's location was specified and that no other component was placed in the same location.
addComponent(BorderLayout.CENTER, component) // preferred
addComponent(“Center”, component) // valid but error prone
The center area gets as much of the available space as possible. The other areas expand only as much as necessary to fit the components that have been added to it. Often a container uses only one or two of the areas of the BorderLayout object — just the center, or the center and the bottom.
BoxLayout boxLayout = new BoxLayout(BoxLayout.X_AXIS);
In this layout, the box layout manager honors the component width of each layout component to fill the width of the container, and the height is determined by the container height. Any extra space appears at the right side of the container, as shown in FIGURE 6-2.
BoxLayout boxLayout = new BoxLayout(BoxLayout.Y_AXIS);
In this layout, the box layout manager honors the component height of each layout component to fill the height of the container, and the width is determined by the container width. Any extra space appears at the bottom of the container, as shown in FIGURE 6-3.
The FlowLayout class puts components in a row, sized at their preferred size. If the horizontal space in the container is too small to put all the components in one row, the FlowLayout class uses multiple rows. To align the row to the left, right, or center, use a FlowLayout constructor that takes an alignment argument.
FlowLayout exampleLayout = new FlowLayout(); ... container.setLayout(exampleLayout); container.addComponent(new Button("Button 1")); container.addComponent(new Button("Button 2")); container.addComponent(new Button("Button 3")); container.addComponent(new Button("Button 4"));
When constructing a FlowLayout manager you can select either the Left, Right, or Center option to set up the component's orientation. The default alignment is Left. The following code snippet applies the Right component orientation to the above exampleLayout.
FlowLayout exampleLayout = new FlowLayout(Component.RIGHT);
GridLayout exampleLayout = new GridLayout(0,2); ... container.setLayout(exampleLayout); container.addComponent(new Button("Button 1")); container.addComponent(new Button("Button 2")); container.addComponent(new Button("Button 3")); container.addComponent(new Button("Button 4"));
GroupLayout is a layout manager that was developed for GUI builders such as Matisse, the Java SE GUI builder delivered with the NetBeans IDE. Although the layout manager was originally designed to suit GUI builder needs, it also works well for manual coding. To get more information you can refer to the GroupLayout API (http://java.sun.com/javase/6/docs/api/javax/swing/GroupLayout.html) or review the Swing GroupLayout tutorial at:
Unlike other layout managers coordinate layout assigns a component an absolute position in relation to the space available within the UI. The coordinate layout allows developers to position components within an X/Y location, however, it doesn't guarantee the position won't change and doesn't determine absolute positions.
Instead coordinate layout accepts positions as "relative" and calculates the actual position based on available space. This is essential since the available size for a container might change at runtime based on font size, screen rotation, etcetera.
For example, a coordinate layout for 200x200 will show a 20x20 component placed in the 90x90 position exactly in the center, regardless of the actual size of the container. If the container is laid out to a larger size, for example, 190x300 the component in the center would still be centered.
Unlike the other standard layouts in LWUIT the coordinate layout allows positioning components on top of one another to achieve z-ordering. The z-ordering is determined by the order in which the components are placed into the parent container.The last component added is the one on top.
Display.init(this); final Form mainForm = new Form("Coordinate Layout"); mainForm.setLayout(new CoordinateLayout(200, 200)); Label centeredLabel = new Label("Center"); centeredLabel.setX(90); centeredLabel.setY(90); centeredLabel.getUnselectedStyle().setBgTransparency(100); centeredLabel.getUnselectedStyle().setBgColor(0xff); Label underCenter = new Label("Under Center"); underCenter.setX(80); underCenter.setY(95); Label top = new Label("Top Left"); top.setAlignment(Component.CENTER); top.setX(0); top.setY(0); top.setPreferredW(200); top.setPreferredH(30); top.getUnselectedStyle().setBgColor(0xff0000); mainForm.addComponent(underCenter); mainForm.addComponent(centeredLabel); mainForm.addComponent(top); mainForm.show();
This code produces FIGURE 6-7:
Unlike the X and Y coordinates that are relative to layout dimensions, the preferred size is absolute in pixels and should be calculated based on content dimensions. This works as expected as long as you don't change the preferred size on your own.
The table layout will automatically size components to the largest preferred size in the row or column until you run out of space. If the table is not horizontally scrollable this will happen when the edge of the parent container is reached (near the edge of the screen), and additional components will be "crammed together". Notice that all cells in the table layout are always sized to fit the entire cell. To change a cell’s alignment or margin, use the Component or Style methods.
In FIGURE 6-8, the "First" cell is spanned vertically while the "Spanning" cell is spanned horizontally. This is immensely useful in creating elaborate UIs.
Constraints can also specify a height/width for a column/row that will override the default. This size is indicated in percentage of the total table layout size. In the code below you can see that the "First" label is sized to 50% width while the "Fourth" label is sized to 20% height.
final Form mainForm = new Form("Table Layout"); TableLayout layout = new TableLayout(4, 3); mainForm.setLayout(layout); TableLayout.Constraint constraint = layout.createConstraint(); constraint.setVerticalSpan(2); constraint.setWidthPercentage(50); mainForm.addComponent(constraint, new Label("First")); mainForm.addComponent(new Label("Second")); mainForm.addComponent(new Label("Third")); constraint = layout.createConstraint(); constraint.setHeightPercentage(20); mainForm.addComponent(constraint, new Label("Fourth")); mainForm.addComponent(new Label("Fifth")); constraint = layout.createConstraint(); constraint.setHorizontalSpan(3); Label span = new Label("Spanning"); span.getStyle().setBorder(Border.createLineBorder(2)); span.setAlignment(Component.CENTER); mainForm.addComponent(constraint, span); mainForm.show();