GUI design guidelines: what changed
Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.
Title: GUI design guidelines
| Old | New | Line | |
|---|---|---|---|
| 1 | + | These guidelines apply to the Lazarus IDE but may be used for other projects as well. | |
| 2 | + | ||
| 3 | + | ## General | |
| 4 | + | ||
| 5 | + | All dialogs and windows must not use fixed sizes. Keep in mind that [[Font|font]] sizes and translated captions can vary. Use splitters and panels. | |
| 6 | + | ||
| 7 | + | All forms and dialogs must work on a screen of 800x600 or higher resolution. | |
| 8 | + | ||
| 9 | + | ## Dialogs (modal forms) | |
| 10 | + | ||
| 11 | + | Dialogs are special forms that need the user to make / change some setting before lazarus can continue. | |
| 12 | + | ||
| 13 | + | - Close on Escape (if the key is not used otherwise) | |
| 14 | + | - Define default button and Return activates it (if the key is not used) | |
| 15 | + | - If it has scrollable content (e.g. contains a TMemo, TListBox, TTreeView) it should be resizable and size is stored | |
| 16 | + | ||
| 17 | + | ### Dialog Settings | |
| 18 | + | ||
| 19 | + | Settings that should be applied in general are: | |
| 20 | + | ||
| 21 | + | - **BorderStyle** : | |
| 22 | + | - `bsSizeable` - if the dialog is complex and resizing is really needed. | |
| 23 | + | - `bsDialog` - if dialog is simple and resizing is not needed (NOTE: all dialogs should remain resizable internally because of localization issues). | |
| 24 | + | - **Position** : `poScreenCenter`. | |
| 25 | + | - **FormStyle** : Do not use `fsStayOnTop`, as this can be pretty annoying under some window managers. | |
| 26 | + | - **BorderIcons**: | |
| 27 | + | - `[biSystemMenu]` - for modal shown dialogs | |
| 28 | + | - `[biSystemMenu,biMinimize,biMaximize]` - for non-modal shown dialogs | |
| 29 | + | ||
| 30 | + | ### General layout | |
| 31 | + | ||
| 32 | + | - On the bottom of the form Button panel should be placed. | |
| 33 | + | - Close on Escape (if key not used otherwise). | |
| 34 | + | - Define default button and Return activates it (if key not used). | |
| 35 | + | - Avoid using long captions on buttons. Use `Hint` property to explain button action in details. | |
| 36 | + | - The size of resizable dialogs should be saved and restored next time the dialog will be opened. | |
| 37 | + | - All hints and captions used on a form should be as resourcestring, so localization can be applied. | |
| 38 | + | ||
| 39 | + | #### Spacings and sizes | |
| 40 | + | ||
| 41 | + | - Dialogs must be designed to work independently of resolution and font height. | |
| 42 | + | - Spacing between elements: 6 pixels. | |
| 43 | + | - Do not set maximum constraints. | |
| 44 | + | - Do not set minimum height of regular buttons. | |
| 45 | + | - You can set a minimum width of 90 for buttons. | |
| 46 | + | - `AutoSize` property need to be set for buttons, labels, ... to properly display localized text if it is longer than expected. | |
| 47 | + | - All buttons in a group (including buttons that contain glyphs) must have the same width and height. Use a TPanel and set the Align and BorderSpacing properties. | |
| 48 | + | ||
| 49 | + | #### Button panel | |
| 50 | + | ||
| 51 | + | The button panel should consist at least of the following elements: | |
| 52 | + | ||
| 53 | + | - OK button. | |
| 54 | + | - Cancel button. | |
| 55 | + | - Next button (optional). | |
| 56 | + | - Previous button (optional). | |
| 57 | + | - Help button. | |
| 58 | + | ||
| 59 | + | ### Anchoring | |
| 60 | + | ||
| 61 | + | 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. | |
| 62 | + | ||
| 63 | + | Hint: Use the anchor editor of the IDE. | |
| 64 | + | ||
| 65 | + | ### Aligning | |
| 66 | + | ||
| 67 | + | 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. | |
| 68 | + | ||
| 69 | + | #### BorderSpacing | |
| 70 | + | ||
| 71 | + | 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. | |
| 72 | + | ||
| 73 | + | ## See also | |
| 74 | + | ||
| 75 | + | - [[High DPI]] | |
| 76 | + | - [[Anchor Sides]] | |
| 77 | + | - [[Autosize / Layout]] | |
| 78 | + | ||
| 79 | + | --- | |
| 80 | + | *From the Free Pascal wiki, page "GUI design guidelines", as it stood on 2020-11-19 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).* |