GUI design

From Lazarus wiki
Revision as of 16:07, 30 December 2005 by Tonymaro (talk | contribs)
Jump to navigationJump to search

Deutsch (de) English (en) français (fr) 日本語 (ja)

Overview

When working on lazarus, certain design guidelines need to be taken into consideration. To prevent a diversity of styles and ensure the clarity of dialogs. The next article tries to summarize several guidelines to help you designing.

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 : bsSizeToolWin
  • Position : poScreenCenter
  • FormStyle : fsStayOnTop (or 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
  • At least fit a screen of 800x640
  • Close on Escape (if key not used otherwise)
  • Define default button and Return activates it (if key not used)
  • Medium to complex 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:

bottom panel.jpg

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.

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.

Dialogs to be converted to LFM

Striked items are already converted.

Bold items are being worked on

  • /lazarus/ide/addtoprojectdlg.pas <D. Blaszijk>
  • /lazarus/ide/buildlazdialog.pas
  • /lazarus/ide/clipboardhistory.pas
  • /lazarus/ide/codetemplatedialog.pp
  • /lazarus/ide/codetoolsdefines.pas
  • /lazarus/ide/codetoolsoptions.pas
  • /lazarus/ide/compileroptionsdlg.pp
  • /lazarus/ide/diffdialog.pas
  • /lazarus/ide/diskdiffsdialog.pas <D. Blaszijk>
  • /lazarus/ide/editoroptions.pp
  • /lazarus/ide/environmentopts.pp
  • /lazarus/ide/exttooldialog.pas <D. Blaszijk>
  • /lazarus/ide/exttooleditdlg.pas
  • /lazarus/ide/findinfilesdlg.pas
  • /lazarus/ide/findreplacedialog.pp <D. Blaszijk>
  • /lazarus/ide/helpmanager.pas <D. Blaszijk>
  • /lazarus/ide/inputfiledialog.pas
  • /lazarus/ide/keymapping.pp
  • /lazarus/ide/macropromptdlg.pas
  • /lazarus/ide/mainbar.pas
  • /lazarus/ide/makeresstrdlg.pas
  • /lazarus/ide/msgview.pp
  • /lazarus/ide/newdialog.pas
  • /lazarus/ide/newprojectdlg.pp <D. Blaszijk>
  • /lazarus/ide/patheditordlg.pas
  • /lazarus/ide/projectinspector.pas <D.Blaszijk>
  • /lazarus/ide/projectopts.pp
  • /lazarus/ide/runparamsopts.pas
  • /lazarus/ide/searchresultview.pp
  • /lazarus/ide/sortselectiondlg.pas
  • /lazarus/ide/splash.pp
  • /lazarus/ide/sysvaruseroverridedlg.pas
  • /lazarus/ide/todolist.pp <D. Blaszijk>
  • /lazarus/ide/unitdependencies.pas
  • /lazarus/ide/uniteditor.pp
  • /lazarus/ide/unitinfodlg.pp <D.Blaszijk>
  • /lazarus/ide/viewunit_dlg.pp
  • /lazarus/debugger/debuggerdlg.pp
  • /lazarus/debugger/test
  • /lazarus/debugger/watchpropertydlg.pp
  • /lazarus/designer/aligncompsdlg.pp
  • /lazarus/designer/designermenu.pp
  • /lazarus/designer/menueditorform.pas
  • /lazarus/designer/menupropedit.pp
  • /lazarus/designer/noncontrolforms.pas
  • /lazarus/designer/objinspext.pas
  • /lazarus/designer/scalecompsdlg.pp
  • /lazarus/designer/sizecompsdlg.pp
  • /lazarus/ideintf/columndlg.pp
  • /lazarus/ideintf/componenteditors.pas
  • /lazarus/ideintf/graphpropedits.pas
  • /lazarus/ideintf/imagelisteditor.pp
  • /lazarus/ideintf/listviewpropedit.pp
  • /lazarus/ideintf/propedits.pp
  • /lazarus/packager/addtopackagedlg.pas
  • /lazarus/packager/brokendependenciesdlg.pas
  • /lazarus/packager/packagedefs.pas
  • /lazarus/packager/pkggraphexplorer.pas
  • /lazarus/packager/pkgoptionsdlg.pas
  • /lazarus/tools/apiwizz/apiwizard.pp

Look and Feel

This paragraph show several examples of look and feel concepts for Lazarus. On the right side is the current layout shown. Please comment...

General features are;

  • each dialog has a help button (currently disabled) that will show a help file (perhaps chm or html?)
  • all modal shown forms are bsSizeToolWin, non-modal shown forms are bsSizable
  • all main buttons are shown with glyphs to show the function
  • all main controls are accessable with access keys ie. "&Cancel"


Todo.png Todo old.png

The todo form shows a typical form with buttons. Instead of stretching the buttons across the entire clientwidth (code explorer, project inpector, etc.) a toolbar on top is shown with labeled buttons.


UnitInformation.png UnitInfo.png

This form shows a typical information dialog. Notice the notebook that splits the information, so that there is not too much information at the same time visible.


FindReplace.png FindReplace old2.png

This form shows a typical dialog. Captions before controls are right aligned (not well visible in this example though) and the options are grouped under bold labels.


Comments

What you need to keep in mind is the cross-platform nature of Lazarus. If you make all the changes you suggest, the text on the buttons won't be visible in most standard GTK+ themes, or there will be other problems. I fully support the idea of some tweaks like this, but it should be tested in Linux, Win32 and even in MAC (you guys are running it in MAC already, right?) before it's committed. -Tony Maro