By default Carousel uses absolute positioning of components, with each component having explicitly specified size and location. Frequently it is more convenient to use some of the additional layout facilities found in Carousel and in Java to both improve the overall appearance and simplify development.
Carousel even provides its own layout manager to support interactive visual layout above and beyond what is possible with explicit layout while providing the runtime resize and position behavior that are frequently hard to achieve with other layout managers.
Default layout
As mentioned in the introduction Carousel assumes that each component's coordinates are specified explicitly. Simply speaking this means that each component must have a specified X, Y location and a width and size dimension. The dimensions are all in pixels and do not vary with the size of the application window or the page container.
Limitations of explicit layout
Perhaps the greatest limitation of explicit layout is that the pages do not resize with changes to the application window and therefore if the application is made full screen it does not make good use of the available screen space.
Another significant limitation of the explicit layout is that it is not always possible to know the size needed for a component or a component's content in advance. Dynamic sizing of components can alleviate such problems.
Later in this chapter we will see how Java's Layout Manager facility has been adapted to help address some of the issues.
Carousel provides a number of tools to support interactive positioning of controls. The tools include grids and guides. These tools can be used with several of the supported layout managers but work best with Carousel's own layout managers; the GuideLayout and the ScaleLayout.
Alignment tools
Carousel provides several tools for aligning components within a container and even spanning containers. These tools are located on the toolbar within the page designer and perform the following functions:
Table 13-1 - Alignment and Justification Tools
Title
Usage
Align Bottom - aligns the bottom edges of all the selected components. The components are moved and retain their current height.
Align Centre - aligns the centres of all the selected components. The components are moved and retain their current width.
Align Left - aligns the left edges of all the selected components. The components are moved and retain their current width.
Align Right - aligns the right edges of all the selected components. The components are moved and retain their current width.
Align Top - aligns the top edges of all the selected components. The components are moved and retain their current height.
Justify Horizontal - aligns the left and right edges of all the selected components. The components sized according to the minimum left and maximum right hand coordinates.
Justify Vertical - aligns the top and bottom edges of all the selected components. The components sized according to the minimum top and maximum bottom coordinates
The alignment and justification tools are primarily designed to work with explicit layouts and will adjust the coordinates of the selected components. Use of the alignment tools with pages controlled by layout managers can lead to results that vary according to the specific layout manager and its current settings.
Grids and Guides
In the page designer the page being edited can be shown within a grid and with layout guides. The designer shows rulers to the top and left of the page, set out in pixel units.
The designer allows components to optionally snap to the grid. The selection of this option and the granularity of the grid can be configured within the page designer. In the top left hand corner or the designer is a button, that when pressed toggles the display mode. When in the configuration mode the rulers are shown with a red tint.
Once in the configuration mode you may right click anywhere on the page to get a context menu giving some options to control the layout. Once configuration has been completed just click the button in the top left to return to the page editing mode.
The options that can be configured in this way include:
Table 13-2 -
Option
Role
Show Guides
Shows the alignment guides
Show Grid
Show the grid (with a minimum display spacing of 10 pixels).
Snap to grid
Turns on or off the snap to grid facility where by components that are moved align themselves to a grid point.
Snap to guides
Turns on or off the facility whereby components snap to the nearest guide.
Set Grid Spacing
The separation of grid points in pixels.
Guide sensitivity
Specifies the distance in pixels within which a component must be for it to be affected by a guide line.
Setup Columns
Displays a dialog that allows the addition or guides to support rows and columns for layout purposes
Guides
Drawing on the techniques used in desktop publishing and document layout, Carousel includes a facility to use guides. Guides are vertical or horizontal lines on the page to which components snap or gravitate while being positioned during page layout.
Guides are configured on a page by page basis rather than at the level of individual panels. Guides therefore support layout across panels so it is easy to align components on a page wide basis rather than solely within an individual container as is the case with most layout managers. Guides are also visually intuitive so little effort is required to learn how guides function and indeed there should be few surprises when using guide layouts unlike layouts such as the GridBagLayout which is notoriously difficult to use.
Adding guides
Guides can be configured on a page by page basis or on an application wide basis (as master guides) to help enforce layout rules across pages.
Within the page designer adding guides is carried out by
1. Clicking the button in the top left intersection of the rulers.
2. Click and drag from either of the rulers onto the page
3. Release the mouse at the location for the new guide
4. Drag an existing guide to adjust its position
5. Click the button in the top left to exit the guide editing mode.
To remove a guide simply enter the guide editing mode and drag a guide back to the ruler.
Individual guides can then be configured by right clicking on them and choosing the Guide Options... menu option. This option allows control over how the guide is positioned at runtime.
Guides can be positioned relative to one another or relative to the size at which the page is displayed so as to give a controlled final layout. The coordinates system used for the guide can also be expressed in relative terms of the page size instead of the absolute pixel size used at design time. The guide ID shown in the dialog is used to reference the guide by the constraint specified for each component on the panel controlled by the guide layout manager.
Table 13-3 - Guide options
Parameter
Usage
ID
An ID used by the component constraint to identify the guide. This option is read-only and is automatically configured by the editor. Guides are renumbered as they are repositions so that the leftmost or topmost guide is always zero.
Orientation
A read-only property identifying the guide as vertical or horizontal
Position
The guide position. Absolute positioning means the guide is position relative to the top left of the page. Relative positioning means the guide is position relative to the previous guide (to the left or above).
Coordinate
The coordinates express the position of the guide either in absolute terms of pixels or in terms of the page size (scaled). For a scaled coordinate system the location is expressed as a percentage of the page size.
Location
The guide location is its position. For a relative position the location value is the offset from the previous guide, whereas for an absolute location the value is the distance from the top left of the page.
Minimum
Not yet implemented
Maximum
Not yet implemented
Several more options are available for configuration of the guides:
The area of guide sensitivity, that is the area within which a component will snap to the guide when moved can be highlighted (as illustrated above) by choosing the Show snap zone context menu option. The context menu is displayed by right clicking on a guide in edit mode. To enter the guide's edit mode, toggle the button to the top left of the page at the vertex of the two rulers. In this mode the rulers are shown with a red background. Some of the guide options are context sensitive and depend on the guide on which the mouse is clicked. The options are described below:
Table 13-4 - Guide configuration options
Menu option
Function
Snap to guides
Toggles snapping of components to the guides
Snap to grid
Toggles snapping of components to the grid.
Snap to hints
Snap the component to the hints. Matches one component to the edges of another.
Show guides
Toggle display of the guides
Show snap zone
Toggle display of the zone within which components snap to the guides.
Show grid
Toggles display of the grid. The grid is shown as a set of dotted lines. Note that at lower grid spacings not every grid line is shown as doing so would obscure the display.
Set grid spacing
Set the grid spacing in pixels
Setup columns...
Setup a set of column and/or row guides
Guide options...
Configure an individual guides. This option depends on the guide closest to the point where the mouse was clicked.
Snapping to guides
As a component or set of components is dragged about within the page designer the edges of the components will automatically snap to the guide whenever within range.
Guides will tend to cause a component to resize as a component is dragged but once a component goes out of range it will snap back to its original size.
Snapping to hints
In addition to the snapping of components to the guides the editor will show layout hints. These hints correspond to the edges of other components on the form. The hints therefore act as a form of automatic alignment of components. Later we plan to enhance this mechanism to support the alignment of baselines and the preferred platform component spacings (both features of the forthcoming JDK 6) .
Setting up Columns
While in the configuration mode you can choose to setup columns and rows to assist layout. The GuideChooser dialog appears when this option is chosen.
You can use this dialog to quickly setup regularly spaced columns and rows. Once the guides have been added you may reposition the guides to best suit your layout needs.
A form will typically require a number of different guide types with some absolute position and some relative or scaled positioning.
Using guides
While it is possible to use guides purely for design time layout assistance the guides are of added benefit at runtime when a page is resized. To actually use the guides for this purpose it is necessary to use the GuideLayout manager. To use this Layout manager select the panel or container for which you wish to apply this option and set the layout property in the component's property sheet (normally to the bottom right of the page designer) .
You may not see any immediate effect of choosing this layout manager but if you view the page's XML you will see that additional constraint attributes are added to the components belonging to the affected panel. The constraints refer to the guide ID which you may have noticed while setting up the guides. The guides are numbered from zero, up from left to right and from top to bottom. The constraint is thus just the list of guides to which the left, top, right and bottom edges of the component are bound (a -1 value indicates an unbound edge) .
An example guide layout
To illustrate the use of the guide layout let's look at a sample form. The form is made up of two columns of labels and edits. Therefore a four column guide layout is created so that we can specify the spacing between the labels and edits and also the spacing between the columns, just as is shown above.
The leftmost guide in each column and the last guide (vertical guides 0, 3 and 7) are scaled guides so that each holds its position relative to the page. The next guide is a relative guide specifying a fixed width for the label. Following this another relative guide with a fixed width of 10 pixels is used to specify the spacing between label and edit. The edit field is then left to use the remaining space between the fixed guides and the scaled guides.
The XML code for the complete form layout is shown below.
Table 13-5 - Guide layout
The constraints for each component specify the guide ID for the left, top, right and bottom edges. If the component is not bound to a guide then the ID can be specified as -1 and the x, y, w or h dimensions will be used to size and position the component as needed.
To see the guide layout in action we then resize the form. In the resized form each column still occupies half of the page although the relative size of the edit fields has increased.
Reusing guides
Sometimes, to promote consistency across forms you may wish to reuse a set of guides. So far we have no explicit support for such a process with Carousel, however you can achieve the same effect by manually cutting and pasting the guide setup from one form to another.
The entire guide declaration is contained in the Guides element at the start of each page, with a Guide entry for each vertical and horizontal guide.
Layout managers
Java introduced the concept of layout managers as a way of managing cross platform layout issues. There are a wide variety of layout managers available within the core Java libraries and from third parties. However for reasons of simplicity only a core set of layout managers is supported within Carousel.
Table 13-6 -
LayoutManager
Description
NULL
This really isn't a layout manager and instead components are positioned according to their absolute coordinates, specified at design time. This layout will not cause components to be repositioned as the container is resized.
Border
A built-in Java AWT and Swing layout manager dividing the container into five predefined areas. See the Java documentation for more details.
Flow
A built-in Java AWT and Swing layout manager. Components are arranged in the order in which they are added either as a row or column and depending on their preferred size. See the Java documentation for more details.
Card
A built-in Java AWT and Swing layout manager. Arranges the component in a stack and displays only the selected component so that it completely fills the container. The first component added to a CardLayout object is the visible component when the container is first displayed. See the Java documentation for more details.
Box
A built-in Java Swing layout manager. Similar to a FlowLayout, it arranges components along the X or Y axis. Provides slightly more control over the layout than the FlowLayout. See the Java documentation for more details.
Grid
A built-in Java AWT and Swing layout manager. Arranges components in a grid or table like structure. See the Java documentation for more details.
GridBag
A built-in Java AWT and Swing layout manager. Horribly complex to arrange and use. The GridBagLayout class is a flexible layout manager that aligns components vertically and horizontally, without requiring that the components be of the same size. Each GridBagLayout object maintains a dynamic, rectangular grid of cells, with each component occupying one or more cells, called its display area. See the Java documentation for more details.
Spring
A built-in Java AWT and Swing layout manager. See the Java documentation for more details.
Scale
A XUI layout manager that uses the absolute positions of the components and scales them in proportion to the container's runtime size. Optionally allows fonts to be scaled.
Guide
An extension of the ScaleLayout but using the Guides to add extra control over the scaling. The constraints for this layout are set automatically
Component hierarchies
It is often a good idea to subdivide an application and its pages into different areas.
At the highest level and application may use the notion of a frameset to subdivide the screen or page. Typically a frameset is used where there are persistent elements to an application such as headers, footers or sidebars. Framesets are often used for navigation controls like toolbars, progress meters, structural views (tree views) and so on.
Within an individual page further nesting of content may be used with various types of panels, scrollpanes, splitters and tab controls.
Generally the more an application can subdivide the hierarchy of components the easier it is to control the layout of those controls.
The coordinates of child panels and of the components nested in a child panel are always relative to the parent or owner of the component or panel. The coordinates are also always measured from the top left of the panel that owns the component.
Using a layout manager
In using a layout manager in Carousel there are two steps to consider. First the parent container for a component must specify the type of layout manager it employs and secondly each component should specify the constraints that the layout manager should use to lay it out.
Using XML the layout is added to the page or parent component as in the example below:
Table 13-7 - Sample Page using Layout Managers
vertical_scrollbar="always"/>
In the example the page is given a border layout and its children, the scroll pane and the panel are given constraints that apply to the border layout. The panel in turn is given a flow layout, but in the case of a flow layout the only constraint is the order in which items are added to the container.
Framesets
In earlier chapters ( "Frames setup" on page 102 ) we saw how framesets could be added and configured. The frameset is an important layout device for applications in that different frame elements can have different lifecycles. Frequently the top, left and bottom elements in a frameset are unchanging within an application, and this long running context provides a space for common features such as toolbars, navigation bars, banners and feedback information.
The frameset is control by a border layout (see "Layout managers" on page 82 ) and you can update each named area of the frameset independently of one another. The frames or named areas within the frameset are termed targets within Carousel. Using the targets is straightforward.
We have seen how a page can be displayed by calling the showPage(...) method:
Table 13-8 - Showing a single page
// Via the page manager member variable of the page
pageMgr.showPage( "DetailsPage" );
A second version of the showPage method takes an additional argument that specifies the target area:
Table 13-9 - Showing a single page in the content target area
// The manager objects
pageMgr.showPage( "DetailsPage", "content" );
pageMgr.showPage( "StatusPage", "footer" );
The name of the target area matches what was specified in the frames file. After this what you do with the frames is really up to you. The framesets are just a way of dividing up the screen real estate and after that the pages they contain are treated as though a single page was being used with all the same lifecycle methods being called.
Editing framesets
Framesets when displayed comprise multiple pages and for a visual editor such as Carousel this represents a number of issues and some of these issues impinge upon the operation of the page designer. The page designer can display a page within its frameset and this is normal behavior (in fact you are given a choice of using the frameset or not when opening a page).
You need to be aware that when editing a page within a frameset you are also editing the other pages referenced by the frameset. Normally the designer works with one page, one XML file and one Java source file for the page's response methods but in the case of a frameset other pages are also open. This is evident if you manipulate components on other pages within the frameset, you will see a small red icon appear next to the page files in the files view indicating that the file is modified.
The page you opened in the designer continues to be the one being edited and if you switch to XML it is this page's XML that you will see. However if the other pages are open in different instances of the page editor you can see their XML too.
Importantly the same instance of a frameset page is used in all instances of the designer. Therefore if you edit a page in one designer and switch to another that also shows the page in a frameset you should see your changes appear in the second designer.
References
For more information on layout managers see the Sun's Java documentation.
;)
;)
;)
;)
;)
;)
;)