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.

(Mit installiertem Flash kann man an dieser Stelle ein Video in dieser Web-Seite ansehen.)

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.

Videozusammenfassung

(Mit installiertem Flash kann man an dieser Stelle ein Video in dieser Web-Seite ansehen.)

Nächstes Thema

einfache_steuerelemente_mit_der_ugl.txt · Zuletzt geändert: 2014/01/23 15:03 von esche