GUI design guidelines/de: what changed
Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.
| Old | New | Line | |
|---|---|---|---|
| 1 | - | ||
| 2 | - | ||
| 3 | - | ||
| 4 | - | ||
| 1 | + | Zurück zu den [[Additional information/de|Zusätzlichen Informationen]]. | |
| 2 | + | ||
| 5 | 3 | ||
| 4 | + | ## Contents | |
| 5 | + | ||
| 6 | + | * 1 Dialoge | |
| 7 | + | * 1.1 Dialogeinstellungen | |
| 8 | + | * 1.2 Allgemeines Layout | |
| 9 | + | * 1.2.1 Abstände und Größen | |
| 10 | + | * 1.2.2 Button Panel | |
| 11 | + | * 1.3 Verankerung | |
| 12 | + | * 1.4 Ausrichtung | |
| 13 | + | * 1.4.1 BorderSpacing | |
| 14 | + | ||
| 15 | + | ## Dialoge | |
| 16 | + | ||
| 17 | + | Dialoge sind spezielle Formulare, die vom Benutzer die Erstellung/Änderung von Einstellungen erfordern, bevor Lazarus fortfahren kann. | |
| 18 | + | ||
| 6 | 19 | ### Dialogeinstellungen | |
| 7 | 20 | ||
| 8 | - | ||
| 21 | + | Einstellungen, die üblicherweise verwendet werden sollten, sind: | |
| 9 | 22 | ||
| 10 | - | ||
| 11 | - | ||
| 12 | - | ||
| 13 | - | ||
| 14 | - | ||
| 15 | - | ||
| 16 | - | ||
| 17 | - | ||
| 23 | + | * **BorderStyle** : | |
| 24 | + | * `bsSizeable` \- wenn der Dialog komplex ist und eine Größenanpassung wirklich benötigt wird. | |
| 25 | + | * `bsDialog` \- wenn der Dialog einfach ist und eine Größenanpassung nicht benötigt wird (Notiz: Alle Dialoge sollten intern größenveränderbar sein wegen Lokalisierungsproblemen). | |
| 26 | + | * **Position** : `poScreenCenter`. | |
| 27 | + | * **FormStyle** : Verwenden sie nicht `fsStayOnTop`, weil dies unter einigen Windowmanagern ziemlich unerfreulich sein kann. | |
| 28 | + | * **BorderIcons** : | |
| 29 | + | * `[biSystemMenu]` \- für modal gezeigte Dialoge | |
| 30 | + | * `[biSystemMenu,biMinimize,biMaximize]` \- für nicht-modal gezeigte Dialoge | |
| 18 | 31 | ||
| 19 | 32 | ### Allgemeines Layout | |
| 20 | 33 | ||
| 21 | - | ||
| 22 | - | ||
| 23 | - | ||
| 24 | - | ||
| 25 | - | ||
| 26 | - | ||
| 27 | - | ||
| 34 | + | * Unten auf dem Formular sollte ein Button panel platziert werden. | |
| 35 | + | * Der Dialog sollte auf einem Bildschirm von 800x600 funktionieren. 640x480 muss nicht unterstützt werden. | |
| 36 | + | * Schließen mit Escape (wenn die Taste nicht anders verwendet wird). | |
| 37 | + | * Definieren sie einen Vorgabe-Button und Return aktiviert ihn (wenn die Taste nicht verwendet wird). | |
| 38 | + | * Vermeiden sie lange Beschriftungen auf den Buttons. Verwenden sie die `Hint` Eigenschaft, um die Button-Aktion im Detail zu erklären. | |
| 39 | + | * Die Größe von größenveränderbaren Dialogen wird gespeichert und beim nächsten Öffnen wiederhergestellt. | |
| 40 | + | * Alle Hints und Captions, die auf einem Formular verwendet werden, sollten als Resourcestring vorliegen, damit eine Lokalisierung erfolgen kann. | |
| 28 | 41 | ||
| 29 | 42 | #### Abstände und Größen | |
| 30 | 43 | ||
| 31 | - | ||
| 32 | - | ||
| 33 | - | ||
| 34 | - | ||
| 35 | - | ||
| 36 | - | ||
| 37 | - | ||
| 44 | + | * Dialoge müssen entworfen werden unabhängig von der Auflösung und der Zeichenhöhe. | |
| 45 | + | * Abstand zwischen Elementen: 6 Pixel. | |
| 46 | + | * Stellen Sie keine maximale Größe für Dialogelemente ein. | |
| 47 | + | * Stellen Sie keine Mindesthöhe für normale Buttons ein. | |
| 48 | + | * Sie können eine minimale Breite von 90 für Buttons einstellen. | |
| 49 | + | * Die `AutoSize` Eigenschaft muss gesetzt werden für Buttons, Label, ... um lokalisierten Text richtig anzuzeigen, wenn dieser länger als erwartet ist. | |
| 50 | + | * Alle Buttons in einer Gruppe (inklusive der Buttons, die ein Bild enthalten) müssen die selbe Breite und Höhe haben. Benutzen sie ein TPanel und setzen sie die Eigenschaften Align und BorderSpacing. | |
| 38 | 51 | ||
| 39 | 52 | #### Button Panel | |
| 40 | 53 | ||
| 41 | - | ||
| 54 | + | Der Button-Panel sollte mindestens aus den folgenden Elementen bestehen: | |
| 42 | 55 | ||
| 43 | - | ||
| 44 | - | ||
| 45 | - | ||
| 46 | - | ||
| 47 | - | ||
| 56 | + | * OK Button. | |
| 57 | + | * Abbrechen Button. | |
| 58 | + | * Nächster Button (optional). | |
| 59 | + | * Vorheriger Button (optional). | |
| 60 | + | * Hilfe Button. | |
| 48 | 61 | ||
| 49 | 62 | ### Verankerung | |
| 50 | 63 | ||
| 51 | - | ||
| 64 | + | Um sicherzustellen, dass ein Dialog nach dem größenverändern die Anzeige der Komponenten in einer guten Weise beibehält, wird Verankerung benutzt. Jede Komponente hat eine Eigenschaft mit dem Namen Anchors. Mit dieser Eigenschaft können sie die Art und Weise bestimmen, in der eine Komponente an ihrem Vorgänger verankert wird. | |
| 52 | 65 | ||
| 53 | - | ||
| 66 | + | Hinweis: Benutzen sie den anchor Editor der IDE. | |
| 54 | 67 | ||
| 55 | 68 | ### Ausrichtung | |
| 56 | 69 | ||
| 57 | - | ||
| 70 | + | Ein anderer Weg, um Komponenten zu organisieren, ist die Verwendung der Ausrichtung (alignment). Jede Komponente hat eine Eigenschaft Align. Durch Auswahl der passenden Align Position können verschiedene Komponenten richtig positioniert werden. | |
| 58 | 71 | ||
| 59 | 72 | #### BorderSpacing | |
| 60 | 73 | ||
| 61 | - | ||
| 62 | - | ||
| 74 | + | Besonders hilfreich in Kombination mit Align ist die Eigenschaft BorderSpacing. (Ebenfalls im Dialog Anchors). Typischerweise wird ein borderspacing von 6 Pixeln um eine Komponente herum verwendet. | |
| 63 | 75 | ||
| 64 | 76 | --- | |
| 65 | - | ||
| 66 | - | ||
| 67 | - | ||
| 77 | + | *From the Free Pascal wiki, page "GUI design guidelines/de", as the Internet Archive kept it on 2023-03-22. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).* |