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:

  • A placement in the lower right area of the puzzle (below the horizontal and right of the vertical helper lines) implicates a Bottom Right alignment of an object.

 

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