GUI design guidelines
Dialogs
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.
- Cancel button.
- Next button (optional).
- Previous button (optional).
- Help button.
An example is shown below:
Anchoring
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.
Aligning
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.
BorderSpacing
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.
