====== Erste Schritte zur GUI, die Grundstruktur einer µGL Anwendung ====== In den bisherigen Abschnitten wurden Basisfunktionen des grafischen Displays besprochen. Eine komplette grafische Benutzeroberfläche ([[http://de.wikipedia.org/wiki/Grafische_Benutzeroberfl%C3%A4che|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 [[http://sisy.de/index.php?id=6|SiSy-LibStore]] geladen werden. ====== Vorbereitung ====== Falls Sie noch das Projekt vom [[µGL Schnellstart|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. >>>>{{:libstoreugl.png?nolink&600|}} Grenzen Sie die Liste ggf. mit dem Suchbegriff //"UGL"// ein. >>>>{{::ugl-vgm.png?direct&600|}} 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: >>>>>{{::projektvorlageneu.png?nolink&500|}} 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. >>><flashplayer width="600" height="475" position="0">file=http://youtu.be/90PBa7zNTSo</flashplayer> Die geladene Vorlage sollte der folgenden Darstellung entsprechen: >{{::uglgui_gg.png?direct&800|}} ====== 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. >>>{{::uglgg.jpg?direct&300|}} ====== 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. >>>{{::usedpakgui.png?direct&600|}} 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// >{{::uglgui_gg.png?direct&800|}} 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 //[[http://www.myugl.de/_referenz/v005/UglManager.htm|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** >>><code cpp> ///// Festlegen der ersten anzuzeigenden Seite StartForm::load(); </code> 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. >>>{{::myscreens.png?direct&600|}} Der Startbildschirm //StartForm// im Paket //MeineBildschirme// ist die Realisierung einer //UglForm//. Er besitzt die Attribute //txtWelcome// vom Typ //[[http://www.myugl.de/_referenz/v005/UglText.htm|UglText]]// und //btnTest1// vom Typ //[[http://www.myugl.de/_referenz/v005/UglButton.htm|UglButton]]//. Des Weiteren finden wir hier die Operationen //onInit// und //onEvent//. >>>**StartForm::onInit** >>><code cpp> 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; </code> 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** >>><code cpp> //// 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 ); } </code> Die Operation //onEvent// enthält einen Beispielcode für die Verarbeitung des Klick-Ereignisses des Buttons. Dabei wird eine //[[http://www.myugl.de/_referenz/v005/MsgBox.htm|MessageBox]]// angezeigt. Das folgende Sequenzdiagramm zeigt den vereinfachten Ablauf im System. >>>{{::seqgggui.png?direct&750|}} ====== Eine erste kleine Anpassung ====== Wagen wir uns an eine erste kleine Anpassung unserer GUI. Schauen sie sich kurz die Referenz zur //[[http://www.myugl.de/_referenz/v005/MsgBox.htm|MessageBox]]// an. Es soll ein anderer Text erscheinen und nur eine Schaltfläche OK auf der MessagBox vorhanden sein. >>>**StartForm::OnEvent** >>><code cpp> //// 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 ); } </code> ====== Videozusammenfassung ====== >>><flashplayer width="600" height="475" position="0">file=http://youtu.be/diutdSaGiug</flashplayer> >>>[[http://youtu.be/diutdSaGiug|besser auf youTube]] ====== Nächstes Thema ====== * [[hallo_welt_mit_der_ugl|„Hallo Welt“ mit der µGL erstellen]] * [[start|zurück zur Übersicht]]