Resizing basics - the puzzling functionality

 

 

Applies to:
Working with BrowserBob

Basis for proper resizing of a graphical window are four straight lines named "puzzle helper lines". They subdivide the background into a "puzzle" with nine pieces. When resizing the application, these areas will behave differently.
 

 

The illustration to the right describes the resize behaviour of the puzzle areas concerning the different dimensions of possible resizing.

Only the center-piece will be resized in two dimensions, the corner-pieces will always stay constant in size.

 

 

 

 

 

 

When changing the width of the application, the regions between the vertical puzzle helper lines are stretched.

It does not make any difference if the offset between these lines has been defined 10 or 100 pixels wide. It will be resized as far as the user stretches the dialog.

The region between the vertical lines can't shrink to a value smaller than zero. I.e. when designing the application, its minimum width will be the sum of the non-resizable corner pieces.
 

 

 

 

 

 

 


 

 

 

Changing the height of the browser works analog in the same way: only the region between the horizontal puzzle helper lines are stretched.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

When resizing the application in both directions, the two situations described come together.

This makes it clear that only the center-piece will be resized in two dimensions and the corner-pieces stay constant in size.

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

!

 

For an effective and precise result, the comprehension of this mechanism is crucial. Already during the design phase of the application you should have in mind which parts of your background graphic will correspond to which puzzle pieces.

 

 

 

 

Approach:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Already after a few tries you will develop an understanding how to place the puzzle helper lines the best way to reach good resizing results. As an introduction we suggest the following:

  • Design the background in a way that the offsets between the helper lines can be
    chosen very tiny (very small stretched areas).

    This prevents you from defining huge inner regions which will be graphically distorted during the resizing process. In case of a single color it does not play any role whether the offsets measure ten or one hundred pixels.
  • Make sure not to have graphical details between the helper lines.
    It does not make any sense to include richly detailed regions between the helper lines. Like illustrated above this would result in undesirable graphical distortions.
  • Try to find empty space in richly detailed pictures.
    Like specified above, it is sufficient to use a very small area which should behave some kind of neutral during the resizing process.
  • In your first projects try to arrange the center piece in a manner that the main web overlaps it.
    The puzzle center piece is per definition the area that is most likely distorted. Hide it behind the web area and you have one problem less.
  • Use button and panel objects for graphics
    Sometimes it is not necessary to overload the background picture with all graphical details. Outsource these areas to panels and assign them the style 'relative' to make them move relative the background, or use buttons as graphical elements...
  • Use the corner pieces to place your highly detailed graphics.

 

 

 

Examples:

 

 

 

 

  • Lara Croft Browser
The helper lines have been set in a way not to encircle highly detailed graphical areas.

The inner regions behave graphically neutral concerning their size.

The puzzle center piece is invisible, hiding behind the Main Web.

 

 

 

For pixel-accuracy you also may enter the position of helper lines numerically on the properties dialog.

 

 

 

 

  • The 10-Minutes Browser

    In contradiction to the above suggestions, we propose to choose larger inner regions if your background graphic has a color gradient. This is necessary to conserve the gradient effect during resize and prevent from rough color transitions.

 

 

  • Web TV

    Object alignment is independent from the puzzling helper lines. Even if the correct object alignment does usually follow the puzzle pieces, it can be handy to use a design like shown to the right, where the button is placed partially between the helper lines.

    If button alignment has been correctly set to Top/Right, its offset to the top right corner stays constant while the background graphic is stretched during a resize process.

 

 

 

 

 

 

 

 

 

 

!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

If an application uses resizing, all objects placed on the Main Dialog or on resizable panels need to have proper alignment settings.

 

 

Related topics:
Alignment of objects - for proper resizing behaviour

BrowserBob objects overview