|
|
| (9 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| | {{GUI design}} | | {{GUI design}} |
| | | | |
| − | ==Überblick== | + | == Ü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. | + | Während der Arbeit an Lazarus müssen bestimmte Designrichtlinien berücksichtigt werden, um eine Verschiedenheit der Stile zu vermeiden und die Übersichtlichkeit der Dialoge zu gewährleisten. Dieser Artikel versucht diese Richtlinien zusammenzufassen, um ihnen beim Entwerfen zu helfen. Es ist auch ein Haufen von Screenshots, Vorlagen und Dialoginformationen verfügbar. |
| | | | |
| − | ==Look and Feel==
| + | * [[GUI_design_guidelines/de|GUI design guidelines]] |
| − | Dieser Abschnitt zeigt verschiedene Beispiele des look and feel Konzepts für Lazarus. Auf der rechten Seite wird das gegenwärtige Layout gezeigt. Bitte nehmen sie Stellung...
| + | * [[Screenshots / examples]] |
| | + | * [[Lazarus dialogs information]] |
| | + | * [[Lazarus art work]] |
| | | | |
| − | Allgemeine Features sind;
| + | == Kommentare == |
| − | * Jeder Dialog hat einen Hilfe Button (gegenwärtig deaktiviert), der eine Hilfeseite anzeigt (Hinweis: das Lazarus Hilfesystem ist formatunabhängig, daher ist es normalerweise ausreichend, einen to add a unique help path, wie 'IDE/CodeExplorer/RefreshButton')
| |
| − | * Alle modal gezeigten Formulare sind bsSizeToolWin, nicht-modal gezeigte Formulare sind bsSizable
| |
| − | * Um Lazarus einfacher zu machen für nicht englisch sprechende wird empfohlen, Button Bilder zu verwenden, wann immer sie ein gutes Icon haben.
| |
| − | * Alle Hauptbedienelemente sind erreichbar mit Zugriffsschlüsseln wie "&Cancel". TODO: Was ist mit Übersetzungen? Pro Sprache müssen die Zugriffsschlüssel bestimmt werden.
| |
| | | | |
| | + | Was sie beachten müssen ist die cross-platform Natur von Lazarus. If you make all the changes you suggest, the text on the buttons won't be visible in most standard GTK+ themes, oder es wird andere Probleme geben. Ich unterstütze vollständig die Idee 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. |
| | + | -[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 |
| | + | <br> |
| | + | <br> |
| | | | |
| − | [[Image:Todo.png]] [[Image:Todo_old.png]] | + | [[Category:Lazarus/de]] |
| − | | |
| − | Das todo Formular zeigt ein typisches Formular mit Schaltflächen. Anstatt die Buttons über die ganze Clientbreite zu strecken (Code explorer, Projektinspektor, etc.) wird oben eine toolbar mit beschrifteten Buttons gezeigt.
| |
| − | | |
| − | | |
| − | [[Image:UnitInformation.png]] [[Image:UnitInfo.png]]
| |
| − | | |
| − | Dieses Formular zeigt einen typischen Informationsdialog. Beachten sie das notebook, das die Informationen aufteilt, so daß nicht zu viele Informationen zur selben Zeit sichtbar sind.
| |
| − | | |
| − | | |
| − | [[Image:FindReplace.png]] [[Image:FindReplace_old2.png]]
| |
| − | | |
| − | Dieses Formular zeigt einen typischen Dialog. Captions vor den Bedienelementen sind gerade ausgerichtet (obwohl es in diesem Beispiel nicht gut zu sehen ist) und die Optionen sind gruppiert unter fett gedruckten Labels.
| |
| − | | |
| − | ==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:
| |
| − | | |
| − | <center>bottom panel.jpg</center>
| |
| − | | |
| − | ===Verankerung===
| |
| − | Um sicherzustellen, daß ein Dialog nach einer Größenänderung die Komponenten in einer brauchbaren Weise anzeigt, wird die Verankerung benutzt. Jede Komponente hat eine Eigenschaft Anchors. Mit dieser Eigenschaft können sie die Art und Weise bestimmen, mit der die Komponente an ihrem Vorgänger verankert wird.
| |
| − | | |
| − | ===Ausrichtung===
| |
| − | Ein anderer Weg, um Komponenten zu organisieren, ist die Verwendung der Ausrichtung. Jede Komponente hat eine Eigenschaft Align. Durch Auswahl der gewünschten Ausrichtungsposition können verschiedene Komponenten genau postioniert werden.
| |
| − | | |
| − | ====BorderSpacing====
| |
| − | Besonders hilfreich in Kombination mit Align ist die BorderSpacing Eigenschaft. (Auch im Anchors Dialog zu finden). Typischerweise wird ein borderspacing von 6 Pixeln um eine Komponente herum verwendet.
| |
| − | | |
| − | ==Dialoge, die zu LFM konvertiert werden müssen==
| |
| − | <strike>Durchgestrichene Elemente</strike> 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
| |
| − | * <strike>/lazarus/ide/diffdialog.pas</strike>
| |
| − | * /lazarus/ide/diskdiffsdialog.pas
| |
| − | * <strike>/lazarus/ide/editoroptions.pp</strike>
| |
| − | * <strike>/lazarus/ide/environmentopts.pp</strike>
| |
| − | * /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
| |
| − | * <strike>/lazarus/ide/msgview.pp</strike>
| |
| − | * <strike>/lazarus/ide/newdialog.pas</strike>
| |
| − | * /lazarus/ide/newprojectdlg.pp
| |
| − | * /lazarus/ide/patheditordlg.pas
| |
| − | * '''/lazarus/ide/projectinspector.pas''' <D.Blaszijk>
| |
| − | * /lazarus/ide/projectopts.pp
| |
| − | * <strike>/lazarus/ide/runparamsopts.pas</strike>
| |
| − | * /lazarus/ide/searchresultview.pp
| |
| − | * /lazarus/ide/sortselectiondlg.pas
| |
| − | * <strike>/lazarus/ide/splash.pp</strike>
| |
| − | * /lazarus/ide/sysvaruseroverridedlg.pas
| |
| − | * /lazarus/ide/todolist.pp
| |
| − | * /lazarus/ide/unitdependencies.pas
| |
| − | * <strike>/lazarus/ide/uniteditor.pp</strike>
| |
| − | * '''/lazarus/ide/unitinfodlg.pp''' <D.Blaszijk>
| |
| − | * /lazarus/ide/viewunit_dlg.pp
| |
| − | * /lazarus/debugger/debuggerdlg.pp
| |
| − | * /lazarus/debugger/test
| |
| − | * <strike>/lazarus/debugger/watchpropertydlg.pp</strike>
| |
| − | * /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
| |
