Difference between revisions of "GUI design"

From Lazarus wiki
Jump to navigationJump to search
Line 9: Line 9:
 
* [[Lazarus dialogs information]]
 
* [[Lazarus dialogs information]]
 
* [[Lazarus art work]]
 
* [[Lazarus art work]]
 
==Lazarus art work==
 
 
Here prototypes for new Lazarus artwork will be shown.
 
 
  
 
==Comments==
 
==Comments==
Line 20: Line 15:
 
-[http://wiki.lazarus.freepascal.org/index.php/User:Tonymaro Tony Maro]
 
-[http://wiki.lazarus.freepascal.org/index.php/User:Tonymaro Tony Maro]
 
:That's the only way to do it ;). I have patches of the different dialogs and I would encourage people to test them and post screenshots here. - Darius
 
:That's the only way to do it ;). I have patches of the different dialogs and I would encourage people to test them and post screenshots here. - Darius
 
==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''' : 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:
 
 
<center>bottom panel.jpg</center>
 
 
===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.
 
 
==Dialogs to be converted to LFM==
 
'''Bold items''' are being worked on
 
 
* /lazarus/ide/buildlazdialog.pas
 
* /lazarus/ide/cleandirdlg.pas (TShowDeletingFilesDialog, probably needs to be put into its own unit)
 
* /lazarus/ide/clipboardhistory.pas
 
* /lazarus/ide/codetoolsoptions.pas
 
* /lazarus/ide/compileroptionsdlg.pp
 
* /lazarus/ide/exttooleditdlg.pas
 
* '''/lazarus/ide/findreplacedialog.pp''' <D. Blaszijk>
 
* /lazarus/ide/inputfiledialog.pas
 
* '''/lazarus/ide/keymapping.pp''' <D. Blaszijk>
 
* /lazarus/ide/macropromptdlg.pas
 
* /lazarus/ide/mainbar.pas
 
* '''/lazarus/ide/newprojectdlg.pp''' <D. Blaszijk>
 
* /lazarus/ide/patheditordlg.pas
 
* '''/lazarus/ide/sortselectiondlg.pas''' <D. Blaszijk>
 
* /lazarus/debugger/debuggerdlg.pp
 
* /lazarus/designer/designermenu.pp
 
* /lazarus/designer/menueditorform.pas
 
* /lazarus/designer/menupropedit.pp
 
* /lazarus/designer/noncontroldesigner.pas
 
* /lazarus/designer/objinspext.pas
 
* '''/lazarus/packager/addtopackagedlg.pas''' <D. Blaszijk>
 
* /lazarus/packager/brokendependenciesdlg.pas
 
* /lazarus/packager/packagedefs.pas
 
* /lazarus/packager/pkgoptionsdlg.pas
 

Revision as of 16:32, 12 March 2006

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. But first it starts with a number of screenshots that propose the new Look and Feel for Lazarus

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

That's the only way to do it ;). I have patches of the different dialogs and I would encourage people to test them and post screenshots here. - Darius