GUI design guidelines

From Lazarus wiki
Jump to navigationJump to search


Dialogs are special forms that need the user to make / change some setting before lazarus can continue.

Dialog Settings

Settings that should be applied in general are;

  • BorderStyle :
    • bsSizeable - if dialog is complex and resizing is really needed.
    • bsDialog - if dialog is simple and resizing is not needed.
  • Position : poScreenCenter.
  • FormStyle : Do not use fsStayOnTop, as this can be pretty annoying under some window managers.

Show the dialog using ShowModal.

General layout

  • On the bottom all required buttons to close / cancel the dialog, or to recieve help should be placed
  • The dialog should work on a screen of 800x600. 640x480 is not needed to support.
  • Close on Escape (if key not used otherwise)
  • Define default button and Return activates it (if key not used)
  • All but the most simple dialogs should be resizable and size is stored

Button panel

The button panel should consist at least of the following elements;

  • OK button (or better: a describing text like 'Save' or 'Rename')
  • Cancel button
  • Next button (optional)
  • Previous button (optional)
  • Help button

An example is shown below:

bottom panel.jpg


To make sure that a dialog after resizing will keep on showing the components in a good way, anchoring is being used. Each components has a property called Anchors. With this property you can determine the way a component is anchored to it's parent.

Hint: Use the anchor editor of the IDE.


Another way to organise components is using alignment. Each component has a property Align. By selecting the appropriate align position several components can be positioned properly.


Especially useful in combination with Align is the BorderSpacing property. (Also found on the Anchors dialog). A typical borderspacing of 6 pixels around a component is used.