====== Einfache Steuerelemente mit der µGL ====== Grafische Benutzeroberflächen dienen fast immer der Interaktion mit dem Benutzer. Daraus folgt, dass dieser nicht nur Informationen vom System angezeigt bekommt sondern auch Eingaben tätigt. Das Paket //[[http://www.myugl.de/_referenz/v005/UglControls.htm|UglControl]]// stellt neben dem statischen Text unter anderem folgende Steuerelemente zur Verfügung: * Button * Checkbox * Textfeld * ProgressBar ====== Die Aufgabe ====== Es ist eine Beispielanwendung zu entwickeln, in der die Steuerelemente //Schaltfläche//, //Textfeld//, //Auswahlfeld// und //Fortschrittsbalken// verwendet werden. ====== Vorbereitung ====== Falls Sie nicht in der Vorgehensmodell-Ebene sind, navigieren Sie diese bitte an (nach oben). Wenn das Projekt nicht mehr geöffnet ist, öffnen sie das SiSy UML-Projekt wieder. Legen Sie ein neues Klassendiagramm an und wählen Sie die Sprache //ARM C++//. Öffnen Sie das Klassendiagramm. 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|}} Öffnen Sie das Paket //MeineBildschirme// in einem neuen Fenster, indem Sie das Paket selektieren und im rechte Maustasten-Menü //"im neuen Fenster öffnen"// wählen. Löschen Sie die Attribute und den Inhalt der Operationen aus der Klasse //StartForm//. >>>{{::inneuemfenster.png?direct&300|}} {{::emptystartform.png?direct&300|}} ====== Grundlagen zu aktiven Steuerelementen ======= Die Steuerelemente reagieren aus Anwendersicht auf Berührungen. Tatsächlich ist es ein durchsichtiges Touch-Panel, welches über dem Display angeordnet ist und die Berührungen erfasst. Über das Template //UglTouch// wurde der Displayklasse die Funktionalität des Touch-Panel zugewiesen und an das µGL Ereignissystem angebunden. Der Signalverlauf innerhalb der µGL Komponenten wird durch das folgende Sequenzdiagramm vereinfacht abgebildet. >>{{::seqclickevent.png?direct&700|}} Jedem aktiven Steuerelement kann eine Ereignisnummer, das //clickEvent//, zugewiesen werden. Diese identifiziert beim Verarbeiten der Ereignisse, welches Steuerelement vom Anwender betätigt wurde. ====== Entwurf der Anwendung einfacher Steuerelemente ====== Die folgende Darstellung zeigt die geplante Anwendung mit zwei Schaltflächen, einem Fortschrittsbalken und Auswahlfeldern. >>>{{::entwurfeinfachesteuerelemente.jpg?direct&500|}} ====== Realisierung der Anwendung einfacher Steuerelemente ====== Um die Übersicht zu behalten, implementieren wir die Beispielanwendung in zwei Schritten. * [[Realisierung einfache Steuerelemente, Itteration 1]] * [[Realisierung einfache Steuerelemente, Itteration 2]] ====== Videozusammenfassung ====== >>><flashplayer width="600" height="475" position="0">file=http://youtu.be/m3mvnZDmdHY</flashplayer> >>>[[http://youtu.be/m3mvnZDmdHY|besser auf youTube]] ====== Nächstes Thema ====== * [[neue_bildschirme_mit_der_ugl_erstellen|einen neuen Bildschirm mit der µGL anlegen]] * [[start|zurück zur Übersicht]]