Einen neuen Bildschirm anlegen

Für komplexere Systeme reicht meist ein einzelner Bildschirm nicht aus, um die gewünschten Informationen und Interaktionen abzubilden. Des Weiteren ermöglicht das Anzeigen verschiedener Bildschirme, Informationen kontextbezogen und nicht überfrachtet anzuzeigen.

Die Aufgabe

Es ist eine Anwendung zu entwickeln, bei der folgende Bildschirme (Synonym auch Seite, Screen, Form) angezeigt und gewechselt werden können:

Startbildschirm
Beispielseite
Einstellungen
Hilfe

Der Seitenwechsel soll zum einen über benutzerdefinierte Schaltflächen, zum anderen über die Navigator-Fußzeile erfolgen.

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.

Grundlagen zur Bildschirmsteuerung

Neue Bildschirme werden in der Regel mit der Nachricht load aufgerufen. Diese Nachricht ist eine statische Member der zu ladenden Form und erzeugt selbst deren Instanz. Die neu geladene Form sorgt jetzt dafür, dass die alte Form zerstört wird. Soll zum alten Bildschirm zurückgekehrt werden wird eine neue Instanz von der gewünschten Form geladen.

Das bedeutet für den Anwendungsentwickler, dass im Normalfall immer nur ein Bildschirm im Speicher geladen ist. Das spart wertvollen Hauptspeicher, bedeutet aber auch, dass die Form keine Daten vorhält. Mit dem Laden einer neuen Form muss dafür gesorgt werden, dass zu verarbeitende oder zu speichernde Werte auch entsprechend behandelt werden, bevor die neue Form geladen wird.

Entwurf der neuen Bildschirme

Es sind entsprechend der Anforderung vier Bildschirme zu programmieren:

Startbildschirm
Beispielbildschirm
Hilfebildschirm
Einstellungsbildschirm

Die Bildschirme Start, Hilfe und Einstellungen sollen von allen Bildschirmen aus über die Navigator-Fußzeile erreichbar sein. Der Beispielbildschirm wird vom Startbildschirm aus geladen.

Realisierung der neuen Bildschirme

Die Realisierung des Programms soll wieder in zwei Schritten erfolgen:

Eine Geste auswerten

Als Sahnehäubchen auf die Seitenwechselfunktionen soll der Navigator noch die Aufgabe erhalten eine mögliche Touch-Geste zu verarbeiten. Die Auswertung der Touchereignisse erfolgt über eine Zustandsmaschine in der Displayklasse. Nur mal so für Interessierte, SiSy generiert den Code der Zustandsmaschine aus dem Modell automatisch in die entsprechende Klasse

Die Zustandsmaschine generiert beim Erkennen von Gesten folgende Ereignisse vom Typ UglEvent.

enum Gesture{
	NoGesture       = 0 , 
	ToLeft          ='l', 
	ToRight         ='r', 
	GestureToTop    ='t', 
	GestureToBottom ='b'
};

Diese, eigentlich GUI internen UglEvents, werden an alle Formen weitergeleitet. Wenn eine Form UglEvents verarbeiten möchte, muss diese die Operation onUglEvent der Basisklasse überschreiben. Wurde ein UglEvent verarbeitet, muss dies quitiert werden damit es nicht an weitere Empfänger gesendet wird.

Erstellen und übertragen Sie das Programm auf den Mikrocontroller. Wenn Sie das Paket MeineBildschirme als neues Fenster geöffnet haben, können Sie jetzt zwischen den Fenstern umschalten, um die Anwendung zu erstellen. Oder sie betätigen auf dem Titel-Tabulator der Anwendung die rechte Maustaste und erhalten dort das Aktionsmenü des entsprechenden Diagramms. So können Sie die Anwendung auch ohne Umschalten der Fenster erstellen.

Testen Sie die Funktion der Schaltflächen und vergleichen Sie das Ergebnis mit dem Quelltext.

Videozusammenfassung

besser auf youTube