GUI design/de: Difference between revisions
No edit summary |
|||
Line 4: | Line 4: | ||
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 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. | ||
==Look and Feel== | |||
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... | |||
Allgemeine Features sind; | |||
* each dialog has a help button (currently disabled) that will show a help page (hint: the Lazarus help system is format independent, so normally it is sufficient to add a unique help path, like 'IDE/CodeExplorer/RefreshButton') | |||
* all modal shown forms are bsSizeToolWin, non-modal shown forms are bsSizable | |||
* to make Lazarus easier for non english speakers it is recommended to use button glyphs whenever you have a good icon. | |||
* all main controls are accessable with access keys ie. "&Cancel". TODO: What about translations? Per language the access keys have to be determined. | |||
[[Image:Todo.png]] [[Image: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. | |||
[[Image:UnitInformation.png]] [[Image: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. | |||
[[Image:FindReplace.png]] [[Image: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. | |||
==Dialoge== | ==Dialoge== |
Revision as of 21:29, 3 January 2006
│
Deutsch (de) │
English (en) │
français (fr) │
日本語 (ja) │
Ü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.
Look and Feel
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...
Allgemeine Features sind;
- each dialog has a help button (currently disabled) that will show a help page (hint: the Lazarus help system is format independent, so normally it is sufficient to add a unique help path, like 'IDE/CodeExplorer/RefreshButton')
- all modal shown forms are bsSizeToolWin, non-modal shown forms are bsSizable
- to make Lazarus easier for non english speakers it is recommended to use button glyphs whenever you have a good icon.
- all main controls are accessable with access keys ie. "&Cancel". TODO: What about translations? Per language the access keys have to be determined.
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.
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.
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.
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:
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
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