[[Vorlage(Getestet, bionic)]] {{{#!vorlage Wissen [:Pakete installieren: Installation von Programmen] }}} [[Inhaltsverzeichnis()]] [[Bild(qtdesigner-logo.png, 60, align=left)]] [https://doc.qt.io/qt-5/qtdesigner-manual.html Qt Designer] {en} ist ein [wikipedia:Wysiwyg:WYSIWYG]-Editor zur Erstellung von grafischen Benutzeroberflächen (GUIs) mit Hilfe der Bibliothek [:Qt:]. Qt verfolgt das [wikipedia:Model_View_Controller:Model View Controller Konzept]. D.h. die Beschreibung der Oberfläche enthält keine Logik und ist es nicht erforderlich - wenn auch möglich - diese manuell zu programmieren. Hervorzuheben ist, dass eine mit dem Designer erstellte Oberfläche nicht an eine Programmiersprache gebunden ist, sondern ohne Änderung bspw. sowohl in einer C++, als auch einer Python Anwendung verwendet werden kann (siehe [:Qt#Weitere-Programmiersprachen:Qt Anbindungen]). Die Oberflächenbeschreibung wird in einer [wikipedia:Xml:XML]-Datei gespeichert und ist somit auch für den Menschen lesbar und bedingt ohne den Qt Designer veränderbar. Mit dem Qt Designer ist es nicht nur möglich, die Oberfläche zu erstellen, sondern es können den verwendeten Qt Elementen Variablen und Werte zugeordnen werden. Zusätzlich können die [#Signale-und-Slots Signale und Slots] der Elemente miteinander verknüpft werden. Der Quellcode, der zur Oberfläche gehört, wird automatisch während des Buildvorgangs der Qt Anwendung erstellt. Des Weiteren ist Qt Designer in der [:Entwicklungsumgebungen:Entwicklungsumgebung] [:Qt_Creator:Qt Creator] integriert. [[Vorlage(Bildunterschrift, qtdesigner.jpg, 200, "Qt Designer", right)]] = Installation = Qt Designer 5 kann direkt aus den Quellen installiert werden [1]: {{{#!vorlage Paketinstallation qttools5-dev-tools, universe }}} Alternativ kann auch Qt Designer 4 installiert werden: {{{#!vorlage Paketinstallation qt4-designer, ab [:18.04:] in universe }}} Das Programm kann über den Eintrag ''"Qt 5 Designer"'' bzw. ''"Qt 4 Designer"'' oder innerhalb von [:Qt_Creator:Qt Creator] gestartet werden. = Bedienung = Wird Qt Designer als eigenständige Anwendung gestartet, erscheint ein Assistent, über den verschiedene Fenster und Dialoge anhand von Vorlagen erstellt werden können. Der Designer bietet vier verschiedene Bearbeitungs-Modi, die in der Werkzeugleiste ausgewählt werden können: {{{#!vorlage Tabelle <-5 rowclass="titel">Bearbeitungs-Modi +++ <- rowclass="kopf":>Symbol Name <:>Taste Beschreibung <:>Anleitung +++ <:>[[Bild(designer-widget-tool.png)]] ''"Widgets bearbeiten"'' <:>[[Vorlage(Tasten, F3)]] Qt- (und falls vorhanden KDE-) Elemente per [wikipedia:Drag_and_drop:Drag & Drop] auf dem Fenster platzieren. <:>[http://developer.qt.nokia.com/doc/designer-widget-mode.html Doku] {en} +++ [[Bild(designer-connection-tool.png)]] ''"Signale und Slots bearbeiten"'' <:>[[Vorlage(Tasten, F4)]] Widgets per Drag & Drop über [#Signale-und-Slots Signale und Slots] verbinden. <:>[http://developer.qt.nokia.com/doc/designer-connection-mode.html Doku] {en} +++ <:>[[Bild(designer-buddy-tool.png)]] ''"Buddies bearbeiten"'' Für QLabels kann ein Tastenkürzel vergeben werden (vorangestelltes `&`). Bspw.: `&Name` ergibt __`N`__`ame` und ist über [[Vorlage(Tasten, Alt + N)]] zu erreichen. Definiert man für dieses Label per Drag & Drop einen "Buddy" (z.B. QLineEdit), so wird dieses Element automatisch bei Betätigung des Tastenkürzel des Labels markiert. <:>[http://developer.qt.nokia.com/doc/designer-buddy-mode.html Doku] {en} +++ [[Bild(designer-tab-order-tool.png)]] ''"Tabulatorreihenfolge bearbeiten"'' Festlegen in welcher Reihenfolge die Widgets bei Druck auf [[Vorlage(Tasten, Tab)]] markiert werden. <:>[http://developer.qt.nokia.com/doc/designer-tab-order.html Doku] {en} }}} Die ''"Objektanzeige"'' liestet alle auf dem Fenster platzierten Elemente in einer Baumstruktur auf. Durch [[Vorlage(Tasten, rmt)]] können verschiedene Eigenschaften des Elements schnell erreicht und angepasst werden, bspw. Größe oder das Layout. Wurde ein Element markiert, können im Bereich ''"Eigenschaften"'' alle zum Element gehörenden Optionen geändert werden. Unter ''"Ressourcen"'' kann eine Ressourcen-Datei ('''.qrc''') erstellt und bearbeitet werden. Dadurch ist eine einfache Verwaltung der eingebundenen Ressourcen (Bilder, Symboldateien, etc.) möglich. Über den ''"Aktionseditor"'' können [https://doc.qt.io/qt-5/qaction.html QActions] {en} verwaltet und erstellt werden. Aktionen können bspw. Menüeinträge oder Schaltflächen in einer Werkzeugleiste sein. Erstellt man einen Menüeintrag, erscheint diese Aktion automatisch im Aktionseditor. Zusätzlich ist es möglich, eine Aktion im Editor zu erstellen und diese per Drag & Drop in einer Werkzeugleiste oder einem Menü zu platzieren. Des Weiteren können über den Editor Eigenschaften der Aktion (z.B. [wikipedia:Tooltip:], Symbol oder Tastenkürzel) definiert werden. Qt Designer verfügt über unterschiedliche Vorschaumöglichkeiten. Zum einen kann über ''"Formular -> Vorschau..."'' oder [[Vorlage(Tasten, Strg + R)]] die Vorschau der GUI angezeigt werden, zum anderen stehen unter ''"Formular -> Vorschau im"'' von Qt unterstützte Stile für die Vorschau zur Auswahl, bspw. Oxygen, Windows oder GTK+. == Signale und Slots == Das [wikipedia:Signal-Slot-Konzept:] realisiert einen ereignisgesteuerten Programmfluss bzw. eine ereignisgesteuerte Kommunikation zwischen Programmelementen. Elemente (oder Aktionen) müssen hierzu miteinander verknüpft werden. Ein Element sendet nach bestimmten Ereignissen (z.B. nach einem [[Vorlage(Tasten, lmt)]]) ein Signal, woraufhin der verbundene Slot (Funktion) eines anderen Elements aufgerufen wird. Diese Verknüpfungen können teilweise mit Hilfe des Qt Designers vogenommen werden. Teilweise deshalb, da der Designer lediglich die vordefinierten Qt Funktionen der Elemente unterstützt. Benutzerdefinierte Signale und Slots können nicht über die grafische Oberfläche miteinander verbunden werden. Es besteht entweder die Möglichkeit in den [#Bedienung Signale und Slots Modus] zu wechseln und die Elemente per Drag & Drop zu verbinden. Hierbei erscheint ein Dialog, der die elementspezifischen Signale und Slots anzeigt und zur Auswahl stellt. Alternativ kann man den Reiter ''"Signale und Slots"'' rechts unten im Designer verwenden. Zum einen hat man dort eine Übersicht aller definierten Verbindungen, zum anderen kann man über ''"+"'' und ''"-"'' Verbindungen erstellen und entfernen. Bei der Erstellung einer neuen Verknüpfung können über Dropdown-Listen alle zur Verfügung stehenden Elemente (''"Sender"'' und ''"Empfänger"'') gewählt werden, sowie die dazugehörigen ''"Signale"'' und ''"Slots"''. Ausführliche Informationen zu diesem Thema liefert die [https://doc.qt.io/qt-5/signalsandslots.html offizielle Dokumentation] {en}. == Layout == Wird eine Benutzeroberfläche mit Qt erstellt, empfiehlt es sich [https://doc.qt.io/qt-5/layout.html Layouts] {en} zu verwenden. Dies stellt sicher, dass Objekte auch dann korrekt dargestellt werden, sobald ein Fenster vergrößert oder verkleinert wird und die Anwendung auf verschiedenen Platformen ausgeführt wird. Zuerst sollte ein Hauptlayout definiert werden. Hierzu markiert man das Hauptfenster und klickt auf die gewünschte Schaltfläche, um die Objekte anzuordnen. Gleiches kann im Folgenden für einzelne Widgetgruppen getan werden, nachdem man die gewünschten Widgets durch Ziehen eines Rahmens bei gedrückter Maustaste markiert hat. Alle erzeugten Layouts erscheinen ebenfalls in der ''"Objektanzeige"'' und können über das ''"Eigenschaften"''-Fenster weiter angepasst werden. Weiterführende Hinweise sind der [https://doc.qt.io/qt-5/designer-layouts.html offiziellen Anleitung] {en} zu entnehmen. Die folgenden Typen stehen zur Auswahl: [[Vorlage(Bildunterschrift, designer-set-layout.png, 140, "Layout Schaltflächen", right)]] * Waagerecht / senkrecht: Die einfachste Art der Anordnung. Die Widgets werden waagerecht oder senkrecht ausgerichtet. Beide Arten können kombiniert und verschachtelt angewendet werden. * Tabellarisch ("Grid"): Für komplexere Layouts. Hierbei hat der Entwickler sehr viele Freiheiten und das Layout ist übersichtlicher als verschachtelte waagerechte und senkrechte Layouts, jedoch kann u. U. die Flexibilität darunter leiden. * Waagerechter / senkrechter Splitter: Die Widgets werden waagerecht oder senkrecht wie beim ersten Typ ausgerichtet, jedoch besteht zusätzlich die Möglichkeit die Größe des Platzes / Freiraums rund um das Objekt zu definieren. = Links = * [https://doc.qt.io/qt-5/qtdesigner-manual.html Offizielle Anleitung] {en} * [:Qt:] * [:Qt_Creator:Qt Creator] #tag: Editor, Programmierung, Qt