Alignment of objects - for proper resizing
behaviour |

|
Applies
to:
Working with BrowserBob
Each object of a
resizable application needs a specification of it's alignment with respect
to the different corners of the application. This applies to buttons,the
addressbar, edit fields and other objects you place on your application
interface or on panels. The alignment properties define the behaviour
of the object regarding its position when the application changes its
size. Alignment gives an object one or more reference points for its orientation
during and after a change of size. It means that the offset between the
object and the selected reference points (top, bottom, left, right) will
stay constant during and after a resizing process of the application.
An easy way of determining
the correct alignment of an object is to look on its position in the puzzle
of the application interface.
|
- Defining the resizing puzzle areas
Before adding objects to the application, the puzzling helper lines
should be in the correct position, dividing the Main Dialog into 9 regions
(refer to Resizing basics
for more details)
In the example below right, the stretched areas of the browser puzzle
are very small (see red lines). The remaining 4 regions (1 - 4) will remain
constant during the resizing process. They will not be stretched or shrunk
at all.
|
Puzzle
example :
 |
|
|
|
|
Project
Puzzle:
 |
Usually
the alignment of objects will be dependent on these 4 regions, which will
remain constant during resize (areas 1 to 4 in the example pictures).
A correct alignment is important for the placement of objects at their
planned
position after a resize.
|
Usage:
- Add
your object (e.g. a button) to your design area and position it at its
planned position on the background image of the Main Dialog.
- Looking
at the part of the background where you placed it, you'll find it in an
area (upper left corner in our example) that will remain constant during
resize. In relation to the puzzling helper lines this is also the top
left area.
- Should
the button stay in its place regarding the area where you put it also
after resize, it needs to be aligned top left.
- Consequently,
if the object is positioned in the top left puzzle area, it needs to be
aligned top left by checking both buttons (Top and Left) under Alignment
on the properties dialog.
- In the same way you would choose
Alignment Top and Right for a button placed in the top right area of the
puzzle.
|
|
|
|
|
|
|
Alignment
of the resize button:
|
Alignment
of the addressbar:
- For
some objects, for example an edit object, an alignment in three directions
can be useful.
This can cause the following effects, for example for an addressbar.
- The
position of this edit object (of type addressbar in this example) will
stay the same towards the upper rim as well as to the left and right.
The addressbar itself will be stretched horizontally during resize, but
its height will always stay the same.
- You already know this behaviour
from other applications.
|
|
|
Related topics:
Resizing basics - the puzzling functionality
Adding objects to your project |

|
 |
 |
 |
 |
 |
 |
 |
 |