Auch wenn man oft mit einfachen Textaus- und Eingaben in Programmen auskommen könnte, wird heute von modernen Programmen erwartet, dass die Kommunikation mit dem Anwender eines Programms durch eine 'hübsche' Oberfläche geschieht. Der Anwender möchte nicht einfach eine Textnachricht in der Form 'Soll gedruckt werden (J/N) ?' erhalten, sondern er erwartet ein kleines Fenster mit Titel, z.B. 'Ergebnisdruck', einen entsprechenden Hinweistext, z.B. 'Es sollen die Ergebnisse gedruckt werden. Möchten Sie fortfahren ?', und nicht zuletzt die dazu gehörigen Auswahlflächen wie z.B. 'Ok' und 'Abbruch'.

Im BeetleBasic sind solche Elemente zwar nicht direkt vorhanden, aber der Sprachumfang dieses Computersystems ermöglicht es dennoch eine recht leistungsfähige Oberfläche zu erstellen. Vorraussetzung hierfür ist aber leider die Verwendung von TKTerm oder VGATerm als Terminal, da hier die Sonderfunktionen dieser Terminals Verwendung finden.

Bevor wir uns überhaupt Gedanken über Fensteraufbau, Schaltflächendefination und Ähnlichem machen können, müssen wir uns erst einmal damit befassen, wie so eine Oberfläche grundlegend funktioniert.

Um die Oberfläche zu bedienen, werden in der Praxis meist die Tastatur und eine Maus verwendet. Nun besitzt der BasicBeetle von Haus aus keine Maus, also müssen wir uns mit einem Trick bedienen. Die Maus simulieren wir hier mit den Cursortasten und der [Enter]-Taste. Der Mauscursor wird mit dem Terminal-Textcursor emuliert.

Um die Maussteuerung schon einmal zu testen, können wir dieses folgende kleine Programm einmal laufen lassen:

Nun müssen wir das Demo-Programm noch etwas umschreiben, um es später in unserer Oberfläche zu verwenden. Aber dazu später mehr.

Bei diesem Demo kann man mit den Cursortasten die 'Maus' auf dem Bildschirm bewegen. Bei Druck auf [Enter] wird ein Stern auf dem Bildschirm hinterlassen. Was hier gleich auffällt, dass das Hauptprogramm nur aus einer Leerschleife besteht. Dies ist typisch für moderne Oberflächen. Der komplette Programmablauf findet nur über die Bildschirmsteuerung statt. Wie dies genau geschieht, werden wir im Laufe des Lehrgang noch sehen. Daher gibt es auch eine Zeilenlücke zwischen 60170 und 60490. Hier findet später die Auswertung der Bildschirmelemente statt.

Um die Struktur der einzelnen Objekte auf unserer Oberfläche darzustellen, binden wir als Erstes erst einmal einfache Schaltflächen ein. Diese können in unserem Demo-Programm angewählt werden und zeigen in diesem Fall einen kleinen Text in der ersten Bildschirmzeile.

Hierfür muss das Mausprogramm natürlich um die entsprechenden Routinen erweitert werden, wie das folgende Demo-Programm zeigt:

Um entsprechende Objekte in so einer Oberfläche einzubinden, müssen diese erst einmal im System angemeldet werden. Wir verwenden hier 2 Schaltflächen. Diese werden in den beiden folgenden Zeilen angemeldet:

Hier werden die Position, die Beschriftung und die Programmzeile übergeben, die den Code enthält, welches dem Rechner sagt, was er tun soll, wenn die Schaltfläche betätigt wird. Als nächstes muss die Initialisierungsroutine aufgerufen werden. Diese sorgt dafür, dass die Schaltflächen entsprechend überwacht werden und bei Betätigung der entsprechende Code aufgerufen wird.

Schauen wir uns diese Initialisierungsroutine einmal näher an:

Zu Beginn wird die Schaltfläche gezeichnet, welches in der Unterroutine in Zeile 61100 geschieht. Für den Kenner dürfte die Funktion recht leicht zu erkennen sein. Mit COL=&HE4 und dem darauf folgenden GOSUB legen wir türkis als Hintergrund mit blauer Schrift fest. Dann wird die gewünschte Schaltflächenposition angesprungen. X und Y sind ja bereits gesetzt, daher ist eine Zuweisung hier nicht nötig. Dann muss die Schaltfläche nur noch gezeichnet werden, welches der PRINT-Befehl besorgt.

In der Zeile 61040 und 61050 werden als erstes die ganzen Parameter in die Variablenfelder für die Objektverwaltung übernommen. Für die spätere Verwendung müssen wir im Variablenfeld noch eine ID festlegen, damit die Objektverwaltung später weiß, dass es sich hier um Schaltflächen handelt. Der Rest ist im Grunde nur reines kopieren. Schaltflächen sind immer 2 Zeichen länger als der Text, somit wird OL die Textlänge plus 2 zugewiesen. Und da Schaltflächen immer 1 Zeichen hoch sind, ist OH hier auch 1. Anschließend wird noch der Objektzähler erhöht, welcher dem System mitteilt, wie viel Objekte es zur Zeit gibt.

Zum Schluss wird noch die Mauscursor-Position und Farbe wieder hergestellt und zum Hauptprogramm zurück gekehrt.

Nun wurden die Schaltflächen angemeldet und es muss nichts weiter getan werden. Daher auch die Leerschleife in Zeile 1000. Wird nun eine der beiden Schaltflächen bedient, so erkennt dies die Auswerteroutine, welche wir ab Zeile 60200 eingefügt haben. Die Routine wird aufgerufen, sobald die [ENTER]-Taste betätigt wird. Diese Routine betrachten wir natürlich auch einmal etwas näher:

In 60200 überprüfen wir überhaupt erst einmal, ob irgendwelche Objekte zur Überwachung vorhanden sind. Ist dies nicht der Fall (OMAX=0) wird die Auswertung gleich wieder verlassen.

Wir haben aber nun 2 Schaltflächen definiert und so startet eine FOR-NEXT-Schleife welche alle vorhanden Objekte abfragt, ob diese evtl. unter dem Mauscursor liegen. Hierfür werden einfach 2 IF-Anweisungen verwendet. Befindet sich der Mauscursor außerhalb des Objektes, wird die weitere Prüfung unterlassen und das nächste Objekt geprüft. Wurden alle Objekte ergebnislos geprüft, so wird die Routine verlassen.

Befindet sich das Objekt jedoch unterhalb des Mauscursors, so wird die FOR-NEXT-Schleife verlassen damit ein Ereignis ausgelöst werden kann. Das Ereignis lösen wir einfach aus, indem der SUBDIR-Befehl ausgeführt wird, welche unsere vorher definierte Routine aufruft. In unserem Fall ab Zeile 10000 oder 20000. Wurde die Funktion des entsprechenden Objektes mit dem RETURN-Befehl beendet, wird die Standard-Farbe und die alte Maus-Position wieder hergestellt. Letztere sorgt auch gleichzeitig dafür, dass die Auswerte-Routine gleich verlassen wird.

Aus logischen Gründen müssen wir die Objekte vom letzten zum ersten definierten Objekt abfragen. Warum dies so ist, werden wir bei späteren Objekten noch erfahren.

Das Ganze sieht dann schon ganz nett aus:

Klicken für Originalgröße

Neben den Schaltflächen sind noch weitere Bedienelemente notwendig um ein Programm vernünftig führen zu können. Unter anderem werden hier auch noch so genannte Checkboxen verwendet. Diese Elemente ermöglichen es, bestimmte Optionen zu aktivieren oder eben auch zu deaktivieren.

Damit unser System wieder weiß, dass Checkboxen verwendet werden sollen, müssen diese erst einmal angemeldet werden:

Die Anmeldung findet hier in den Zeilen 100 und 105 statt. Neben der Position (X, Y) wird auch die Beschriftung und wieder die Zeilennummer übergeben, welche dem System sagt, wo er die Zeile findet, die angesprungen wird, wenn die Checkbox betätigt wird.

Gegenüber einer Schaltfläche gibt es hier aber schon die erste Neuerung. Es wird der aktuelle Status mit übergeben durch die Zuweisung der Variablen STATE. Dadurch kann eine eventuell schon früher aktivierte Checkbox wieder entsprechend angezeigt werden.

Nach Aufruf der Unterroutine ab Zeile 61200 erscheint dann auf dem Display das neue Element:

In Zeile 110 definieren wir noch eine Schaltfläche, die das Demoprogramm beendet.

Über die Ereignisroutine für die Checkbox und der Schaltfläche muss wohl nicht viel gesagt werden. Wir müssen diese aber dennoch ins Programm einfügen:

Interessant wird es erst wieder ab der Zeile 61200 ab der wir die Checkbox einrichten und darstellen:

Wie auch schon bei der Schaltfläche, werden hier die Parameter in das Variablenfeld übernommen. Die Darstellungsroutine ab Zeile 61300 ist hier aber ein wenig komplizierter. In Zeile 61300 wird die eigentliche Check-Box gezeigt. Dieses muss nur einmal, bei der Darstellung getan werden. Da sich dieses Element aber bei Bedienung ändert, gibt es noch eine weitere Routine ab 61310. Je nach neuem Status, wird hier nun ein 'X' gesetzt bzw. wieder gelöscht.

Das anschließend die Standardfarbe und die alte Maus-Position wieder hergestellt wird, sollte wohl selbstverständlich sein.

Gegenüber der Schaltfläche müssen wir nun auch dafür sorgen, dass sich die Darstellung der Check-Box ändert, wenn diese bedient wird. Hierzu reicht es nun nicht mehr aus, die vorher definierte Ereignisroutine (Zeile 10000 ff.) aufzurufen. Es muss gleichzeitig noch das Aktualisierungs-Unterprogramm ab Zeile 61310 aufgerufen werden. Und hier wird nun das erste mal die Objekt-ID, die wir bei unseren beiden Bedienelementen mit definiert haben, wichtig. Hierdurch kann der Manager erkennen, welche Routine er anspringen muss, um das Bedienelement zu aktualisieren.

Die Erkennung des entsprechenden Elements ist ja nicht sonderlich schwer. Mit Hilfe des Select-Befehls in Zeile 60270 stellen wir die aktuelle ID fest. 60280 erkennt dann, dass es sich um eine Checkbox handelt. Es wird dann erst der Status geändert. Also eine nicht aktive Checkbox wird aktiviert und umgekehrt und dann dafür gesorgt, dass dieser neue Status auch angezeigt wird.

Anschließend folgt, wie schon bereits bekannt, der Aufruf der Ereignisroutine. Das Ganze sieht dann so aus:

Klicken für Originalgröße

Soll ein Benutzer die Möglichkeit haben, einen aus mehreren Optionen auszuwählen, so verwendet man so genannte Radio-Buttons. Diese Bezeichnung stammt von den früheren Radios, bei denen die einzelnen Frequenzbänder mit Schaltern umschaltbar waren. Hierbei sprang ein gedrückter Schalter wieder raus, wenn ein anderes Band gewählt wurde. Ähnlich funktionieren auch die Radio-Buttons hier. Wählt man eine andere Option so wird der bereits gewählte deaktiviert.

Radio-Buttons haben aber einige besondere Eigenschaften gegenüber den bisher vorgestellten Elementen. Zum Einen wurde es ja schon erwähnt, dass sich mehrere Radio-Buttons gegenseitig beeinflussen. Aber um dies zu können, muss man diese zu einer Gruppe zusammen fassen. Dazu wird erst noch ein 'Container' benötigt der den Buttons sagt, dass diese zusammen gehören.

Bevor es zu theoretisch wird, schauen wir uns erst einmal die Definition an:

In Zeile 100 wird zunächst das Container-Element definiert. Alle nachfolgenden Radio-Elemente gehören nun zu diesem Container bis eventuell ein weiterer Container definiert wird.

In 110-130 werden nun mehrere Radio-Buttons gestartet. In diesem Demo verzichten wir auf eine Ereignisauswertung mit Hilfe der ACT-Variable. Wird diese aber benötigt, um zum Beispiel, direkt beim Umschalten eine Aktion auszulösen, kann diese zugewiesen werden.

Zum Schluss wird noch eine einfache Schaltfläche initialisiert um unser Demo beenden zu können.

Der Container tut im Grunde nichts weiter. Es muss nur ein entsprechendes Element auf dem Terminal gezeichnet werden. Ansonston hat der Container keine weitere Funktion. Das Zeichnen übernimmt hier die Routine ab der Zeile 61400:

Auch die Radio's müssen, wie üblich, initialisiert werden, welches die Routine ab der Zeile 61600 übernimmt:

Interessant wird es erst bei der Auswertung:

Als erstes wird hier das Container-Element gesucht (Zeile 61700). Diese wird durch die ID von 3 erkannt. Als Nächstes werden alle die Elemente nach dem Container abgesucht, ob diese Radio-Buttons sind. Und auch gleichzeitig deaktiviert.

Wurden alle, zu dem Container gehörenden, Radio-Elemente gefunden, so wird das Angeklickte wieder aktiviert (Zeile 61720). Anschließend werden sämtliche Radio-Buttons noch auf dem Display aktualisiert.

Zum Schluss noch ein Screenshot der Radio-Buttons:

Klicken für Originalgröße

Fortsetzung folgt ...