Difference between revisions of "GUI design/de"

From Lazarus wiki
Jump to navigationJump to search
Line 14: Line 14:
  
 
===Allgemeines Layout===
 
===Allgemeines Layout===
* On the bottom all required buttons to close / cancel the dialog, or to recieve help should be placed
+
* Unten sollten alle benötigten Schaltflächen zum Schließen / Abbrechen des Dialogs oder um Hilfe zu erhalten platziert werden.
* At least fit a screen of 800x640
+
* Es sollte wenigstens für einen Bildschirm von 800x600 geeignet sein.
* Close on Escape (if key not used otherwise)
+
* Schließen mit Escape (wenn die Taste nicht anderweitig genutzt wird)
* Define default button and Return activates it (if key not used)
+
* Definieren einer Vorgabe Schaltfläche, die mit Return aktiviert wird (wenn die Taste nicht genutzt wird)
* Medium to complex dialogs should be resizable and size is stored
+
* Mittlere bis komplexere Dialoge sollten größenveränderbar sein und die Größe wird gespeichert.
  
 
====Schaltflächen Panel====
 
====Schaltflächen Panel====
The button panel should consist at least of the following elements;
+
Das Schaltflächen Panel sollte wenigstens aus den folgenden Elementen bestehen:
  
* OK button
+
* OK Schaltfläche
* Cancel button
+
* Abbrechen Schaltfläche
* Next button (optional)
+
* Weiter Schaltfläche (optional)
* Previous button (optional)
+
* Zurück Schaltfläche (optional)
* Help button
+
* Hilfe Schaltfläche
  
An example is shown below:
+
Ein Beispiel wird unten gezeigt:
  
 
<center>bottom panel.jpg</center>
 
<center>bottom panel.jpg</center>

Revision as of 16:04, 17 December 2005

Überblick

Während der Arbeit an Lazarus müssen verschiedene Designrichtlinien berücksichtigt werden, um eine Vielfalt an Stilen zu vermeiden und die Übersichtlichkeit der Dialoge zu gewährleisten. Der nächste Artikel versucht, verschiedene Richtlinien zusammenzufassen, um ihnen bei der Gestaltung zu helfen.

Dialoge

Dialoge sind spezielle Formulare, die den Benutzer auffordern, einige Einstellungen zu erstellen bzw. zu ändern, bevor Lazarus fortfahren kann.

Dialog Einstellungen

Einstellungen, die im Allgemeinen gesetzt werden sollten, sind:

  • BorderStyle : bsSizeToolWin
  • Position : poScreenCenter
  • FormStyle : fsStayOnTop (oder zeigen den Dialog unter Verwendung von ShowModal)

Allgemeines Layout

  • Unten sollten alle benötigten Schaltflächen zum Schließen / Abbrechen des Dialogs oder um Hilfe zu erhalten platziert werden.
  • Es sollte wenigstens für einen Bildschirm von 800x600 geeignet sein.
  • Schließen mit Escape (wenn die Taste nicht anderweitig genutzt wird)
  • Definieren einer Vorgabe Schaltfläche, die mit Return aktiviert wird (wenn die Taste nicht genutzt wird)
  • Mittlere bis komplexere Dialoge sollten größenveränderbar sein und die Größe wird gespeichert.

Schaltflächen Panel

Das Schaltflächen Panel sollte wenigstens aus den folgenden Elementen bestehen:

  • OK Schaltfläche
  • Abbrechen Schaltfläche
  • Weiter Schaltfläche (optional)
  • Zurück Schaltfläche (optional)
  • Hilfe Schaltfläche

Ein Beispiel wird unten gezeigt:

bottom panel.jpg

Verankerung

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.

Ausrichtung

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.

Dialoge, die zu LFM konvertiert werden müssen

Durchgestrichene Elemente sind bereits konvertiert.

An fettgeschriebenen Elementen wird gerade gearbeitet.

  • /lazarus/ide/addtoprojectdlg.pas
  • /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
  • /lazarus/ide/editoroptions.pp
  • /lazarus/ide/environmentopts.pp
  • /lazarus/ide/exttooldialog.pas
  • /lazarus/ide/exttooleditdlg.pas
  • /lazarus/ide/findinfilesdlg.pas
  • /lazarus/ide/findreplacedialog.pp
  • /lazarus/ide/helpmanager.pas
  • /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
  • /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
  • /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