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 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.
Die geladene Vorlage sollte der folgenden Darstellung entsprechen:
Ö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.
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.
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.
Realisierung der Anwendung einfacher Steuerelemente
Um die Übersicht zu behalten, implementieren wir die Beispielanwendung in zwei Schritten.