Erste Schritte zur GUI, die Grundstruktur einer µGL Anwendung
In den bisherigen Abschnitten wurden Basisfunktionen des grafischen Displays besprochen. Eine komplette grafische Benutzeroberfläche (GUI), die aus mehreren Bildschirmen mit passiven und aktiven Steuerelementen besteht, erfordert einen gewissen Aufwand. Diesen betreibt der Anwendungsentwickler eher nicht selbst. Er benutzt vorgefertigte Bausteine aus einer Bibliothek und fügt diese zur Benutzeroberfläche zusammen. Die folgenden Abschnitte beziehen sich auf die GUI-Komponenten des µGL-Framework. Dazu muss eine entsprechende Grundstruktur der Anwendung aufgebaut oder besser aus dem SiSy-LibStore geladen werden.
Vorbereitung
Falls Sie noch das Projekt vom Schnellstart offen haben, können Sie diesen Punkt überspringen.
Erstellen Sie eventuell ein neues Projekt. Wählen Sie das Projekt-Profil ARM-Vorgehensmodell. Das Grafik-Framework, Vorlagen und Beispiele werden aus dem SiSy LibStore online bezogen. Sobald Sie das Projekt erstellt haben, bietet Ihnen SiSy geeignete Vorlagen aus dem LibStore an.
Grenzen Sie die Liste ggf. mit dem Suchbegriff „UGL“ ein.
Wählen Sie die Vorlage microGL Framework. Nach dem Laden der Projektvorlage für das µGL-Framework erhalten Sie eine Darstellung im Diagrammfenster, die folgende Elemente enthält:
Die Pakete enthalten im Wesentlichen zwei Bibliotheken. Das ist das SiSy ARM C++ Framework für den STM32 und das µGL Framework. Des Weiteren erhalten Sie zwei Klassendiagramme mit Grundgerüsten für Grafikanwendungen, als Vorlage. Dabei wird zwischen Anwendungen mit und ohne GUI Komponenten der µGL unterschieden. Schauen Sie sich ruhig ein bisschen in den Paketen um (rechte Maustaste… „nach unten“).
Eine GUI Anwendung anlegen
Nachdem Sie ein neues Klassendiagramm angelegt haben, öffnen Sie dieses. Der SiSy-Libstore bietet Ihnen eine Auswahl an Diagrammvorlagen. Suchen Sie im Libstore mit dem Suchbegriff „GUI“ nach dem Grundgerüst für eine µGL GUI Anwendung. Beachten Sie die Zielhardware, z.B. STM32F407 oder STM32F429.
Die geladene Vorlage sollte der folgenden Darstellung entsprechen:
Erstellen und übertragen
Erstellen und übertragen Sie die Anwendung auf den Mikrocontroller. Testen Sie kurz deren Funktionalität indem Sie die Schaltfläche „Drück mich“ betätigen.
Struktur der GUI Anwendung
Schauen wir uns das Programm etwas näher an. Zuerst fällt auf, dass es doch erheblich komplexer ist, als die einfache Grafikanwendung. Einige Bausteine der Anwendung kennen wir bereits.
- die Klasse Application als Realisierung eines AppKernel mit der Instanz app
- das Display als Realisierung einer konkreten Hardware
- ein Paket, welches eine Sammlung benötigter Pakete enthält
Die benötigten Pakete können Sie gern mit denen der bisherigen Grafikprogrammierung vergleichen. Neben den bekannten Bausteinen werden jetzt auch µGL-GUI-Pakete hinzugezogen.
Neu an dieser Anwendungsstruktur sind:
- das Display ist zusätzlich eine Realisierung des Templates UglTouch
- es gibt eine Klasse GraphicalUserInterface, welche ein UglManager ist
- die GUI-Klasse hat eine Statuszeile und einen Navigator
- es gibt ein zusätzliches Paket MeineBildschirme
Die Anwendung selbst ist offensichtlich unsere übliche Application mit dem Verteilen (Sceduling) der Ereignisse onPower, onStart, onWork, onTimer10ms, onTimer100ms, onTimer1s. Die µGL-GUI wird auf diese Anwendungsstruktur aufgesetzt. Sie besteht aus einem Manager und erfordert, dass das Display Tochereignisse an diesen Manager sendet. Diese Aufgabe übernimmt das Template UglTouch.
Gehen wir der Reihenfolge nach. Die Applikation hat ein Attribut vom Typ GraphicalUserInterface. Dieses wird mit dem Anlegen der Instanz automatisch „hochgefahren“. Beim Anlegen von GUI-Instanzen wird an diese die Nachricht onInit verteilt. In der Operation onStart der Klasse Application wird der erste Bildschirm geladen.
Application::onStart
///// Festlegen der ersten anzuzeigenden Seite StartForm::load();
Das ist der Startbildschirm. In größeren grafischen Betriebssystemen wird die Programmierung des Startbildschirms nicht dem Anwendungsentwickler überlassen. Diese bringen ihren Desktop bereits mit. Bei unserer Anwendung bauen wir den Startbildschirm selber auf. Wir finden diesen in dem Paket MeineBildschirme. Dieses Paket trennt die eigentliche GUI von der internen Logik der Anwendung und hält das Ganze vergleichsweise übersichtlich, indem es die komplexe Gesamtstruktur in kleinere zusammengehörige Bausteine zerlegt.
Der Startbildschirm StartForm im Paket MeineBildschirme ist die Realisierung einer UglForm. Er besitzt die Attribute txtWelcome vom Typ UglText und btnTest1 vom Typ UglButton. Des Weiteren finden wir hier die Operationen onInit und onEvent.
StartForm::onInit
navButtons = "hHome|oOptions|?Help|xExit"; dim_t width = 200; Rect r( 10, 5, width, 0 ); txtWelcome.createControl(this, r, "Willkommen" ); r.top += r.height + Margin; r.height = 0; // default -> PA btnTest1.icon = iconBright_20; btnTest1.createControl(this, r, "Drück mich!" ); btnTest1.clickEvent = 0x55;
Bei der Initialisierung des Bildschirms wird der Navigator für diese Form konfiguriert und die Steuerelemente (Controls) werden konfiguriert und erzeugt. Besonderes Augenmerk sollten wir auf das clickEvent des Buttons legen. Dieser ID wird vom UglManager als Event verteilt, wenn der Anwender die Schaltfläche betätigt hat. Dieses Ereignis können wir in der Operation onEvent auswerten.
StartForm::onEvent
//// Btn MsgBox if( nr == 0x55 ) // Btn { MsgBox* msgbox = new MsgBox; msgbox->text = "Du hast den Button geclickt! Wolltest du das ganz ganz wirklich?"; msgbox->style="yn"; msgbox->closeEvent = 0x56; app.gui.show( msgbox ); }
Die Operation onEvent enthält einen Beispielcode für die Verarbeitung des Klick-Ereignisses des Buttons. Dabei wird eine MessageBox angezeigt.
Das folgende Sequenzdiagramm zeigt den vereinfachten Ablauf im System.
Eine erste kleine Anpassung
Wagen wir uns an eine erste kleine Anpassung unserer GUI. Schauen sie sich kurz die Referenz zur MessageBox an. Es soll ein anderer Text erscheinen und nur eine Schaltfläche OK auf der MessagBox vorhanden sein.
StartForm::OnEvent
//// Btn MsgBox if( nr == 0x55 ) // Btn { MsgBox* msgbox = new MsgBox; msgbox->text = "Du hast mich gedrückt. Danke ;-)"; msgbox->style="o"; msgbox->closeEvent = 0x56; app.gui.show( msgbox ); }