6. Visualisierungs- und Lernbeispiele

Im folgenden Abschnitt zeigen und erläutern wir einige Auszüge des Lernprogramms. Die hier abgedruckten Bilder geben von den Visualisierungen und Animationen naturgemäß nur eine sehr unvollkommene Vorstellung. Sie spiegeln z.T. auch lediglich die Situation wider, in denen der Benutzer eine Animation einfrieren kann. Um sich eine bessere Vorstellung von der Funktionsweise und dem Animationslayout zu machen, kann der interessierte Leser die Software kostenlos downloaden [Ker98] bzw. die unten angegebenen AVI-Videosequenzen betrachten.

6.1 Statische Animationen

Zunächst stellen wir den Teil des Lernsystems vor, in dem die Animationen und Visualisierungen auf fest vorgegebenen Beispielen beruhen, die vom Lernenden nicht modifiziert werden können. Dabei stellt das System die Aufgaben der semantischen Analyse vor, erläutert die Problematik an vielen kleinen Animationen und bietet Problemlösungen anhand von Algorithmen an. Diese werden jeweils durch Algorithmenanimationen an einem festen, statischen Beispiel erklärt.

Terminologie
Auf der linken Hälfte der Seite in Abb. 2 sind die in der semantischen Analyse verwendeten Begriffe kurz definiert. Klickt man auf einen blau gefärbten Textteil, so erscheint auf der rechten Hälfte eine detailliertere Erklärung des gewählten Begriffs. Innerhalb dieses Bereichs lassen sich auch ein oder mehrere Beispiele zu dem ausgewählten Begriff anzeigen.

**Abbildung 2:** Terminologie zur semantischen Analyse (AVI-Video, 2.9MB)

Überprüfung der Kontextbedingungen
In unserem zweiten Beispiel (Abb. 3) soll die Funktionsweise eines Deklarationsanalysators zunächst an einer gedachten Übersetzungssituation erläutert werden. Der rot gefärbte Quelltext des Algorithmus kennzeichnet die aktuelle Stelle, die auf der rechten Hälfte der Seite erklärt wird. Mit den Steuerungsknöpfen unten in der Kontrolleiste kann der Algorithmus komplett durchlaufen werden (Textanimation). Zu allen wichtigen Bestandteilen des Algorithmus lassen sich Beispielanimationen aufrufen, die ihrerseits wieder aus mehreren Seiten bestehen können.

**Abbildung 3:** Statische Algorithmenanimation eines Deklarationsanalysators (AVI-Video, 5.2MB)

Die nächste Abbildung 4 zeigt einen Schritt in einer Animationsabfolge, die durch Anklicken des Knopfes Ein Beispiel aus Abb. 3 aufgerufen wird. Rechts oben befindet sich die aktuelle Stelle im Quelltext zum Algorithmus für den Deklarations-Analysator. Man kann die Elemente der Symboltabelle anklicken, um eine kurze Erklärung zu dem ausgewählten Element zu erhalten. Hier hat der Benutzer auf die erste Zelle eines Eintrags geklickt, um sich deren Bedeutung anzeigen zu lassen. Die Symboltabelle ist als verkettete Liste dargestellt, deren Einträge aus Strukturen von je vier Elementen bestehen. Das erste Element ist die Blocknummer, das zweite Element die Adresse der entsprechenden Deklaration im Syntaxbaum, etc. Die Animation zeigt, daß bereits ein Bezeichner a im aktuellen vierten Block neu deklariert wurde. Der Bezeichner c, der schon im ersten Block ein deklarierendes Vorkommen hat, wird nun im aktuellen vierten Block erneut deklariert. Dazu wird in der Symboltabelle ein neuer Eintrag generiert und in die entsprechende Stelle der Symboltabelle eingefügt. Genau dieser Prozess ist in der oben gezeigten Animation zu sehen. In der Quelltextzeile rechts oben ist ein Funktionsaufruf enter_id(id, ^k) enthalten. Diese Funktion ist nun im Feld links oben zu sehen. Der Anwender kann den Quelltext für diese Funktion zeilenweise abarbeiten lassen. Die Animationssteuerung gestattet es, die Animation mit unterschiedlichen, frei einstellbaren Geschwindigkeitsniveaus ablaufen zu lassen, anzuhalten und einzelne Schritte auszuführen. Dabei wird in einer Fortschrittsleiste (links unten) der aktuelle Stand innerhalb der Animation angezeigt.

**Abbildung 4:** Animation zu einer Symboltabellenoperation

Typinferenz
Zu dem zusammengesetzten LaMa-Ausdruck LETREC wird eine Animation der Typkombinationsregel an einem verallgemeinerten Beispiel angezeigt (siehe Abbildung 5). Man sieht einen der letzten Schritte der Animation. Der Typkombinationsregel entsprechend werden die einzelnen polymorphen Typen der Unterbaumwurzeln berechnet, eine Typumgebung erzeugt, neue Typvariablen eingeführt, etc. Die Animation zeigt einen Schritt in dieser Berechnung. Man sieht den Teilbaum des LETREC-Konstrukts, in dessen Wurzelknoten die neue Typumgebung und neue Typvariablen eingetragen werden. Dieser expandierte Wurzelknoten entspricht der intuitiven Speicherung der Typinformationen in den Knoten des realen Syntaxbaumes. Am Ende der Animation wird der neue Ergebnistyp in das Feld links unten eingetragen.

**Abbildung 5:** Animation zur Typkombinationsregel eines *LETREC*-Ausdrucks (AVI-Video, 2.8MB)

6.2 Dynamische Animationen

Nun kommen wir zu den Visualisierungen, in denen der Anwender beliebige Beispielprogramme oder -spezifikationen eingeben kann. Das Layout des resultierenden Syntaxbaumes wird automatisch berechnet und im Anwendungsbereich angezeigt. Der Benutzer hat Einfluß auf das Baumlayout, er kann die Abstände von Geschwisterknoten, benachbarten Knoten und Eltern/Kind-Knoten verändern. Weiterhin besteht die Möglichkeit den Baum in seiner Größe zu verändern und in vier Richtungen zu orientieren. Diese Einflußmöglichkeiten sind notwendig, um den Baum im Fenster optimal zu plazieren oder an die Fenstergröße anzupassen. Dies erhöht die Übersichtlichkeit bei der Animation. Alle anderen zur Visualisierung gehörenden Graphikelemente, wie etwa kleine Informationsfenster an den einzelnen Knoten, zusätzliche Kanten etc., werden unmittelbar an das neue Layout angepaßt. Der Baumlayoutalgorithmus entspricht bis auf die Möglichkeit der Größenveränderung einer Arbeit von J. Walker [Wal90]. Grenzen in der Baumgröße sind nur durch den verfügbaren Speicher und ein über 16 Bit Variablen adressierbares logisches Koordinatensystem gegeben.

Überprüfung der Kontextbedingungen
Der in Abb. 6 angegebene Bildschirmausschnitt zeigt eine Visualisierung der Überprüfung der Kontextbedingungen eines durch den Anwender eingegebenen Beispielprogramms (s.u.). Eine komfortable Eingabemöglichkeit dieser Programme ist der eingebaute Editor, der auch eine Funktion zur Syntaxtprüfung bereithält. Ist das Eingabeprogramm syntaktisch fehlerhaft, so markiert der Editor das Fehlersymptom. Syntaktische Korrektheit ist eine Voraussetzung zur semantischen Analyse und wird daher vom System getestet.

**Abbildung 6:** Visualisierung der Überprüfung der Kontextbedingungen (AVI-Video, 3.5MB)

Der zugehörige abstrakte Syntaxbaum ist in der Abbildung fast vollständig dargestellt. Zu einigen Syntaxbaumknoten sind die Typattribute zu sehen. Grundlage für deren Berechnung sind die in einem Hilfsfenster (links unten) angegebenen Typen für die im Beispielprogramm verwendeten und eingebauten Operatoren. Für ein angewandtes Vorkommen des Bezeichners Fakultaet wurde das nach den Gültigkeits- und Sichtbarkeitsregeln errechnete definierende Vorkommen nach einem Mausklick auf das angewandte Vorkommen rot markiert und der entsprechende Link mit einer roten Kante symbolisiert. Wird kein definierendes Vorkommen gefunden, dann öffnet sich ein Dialogfenster mit einer entsprechenden Fehlermeldung. Der Lernende hat nun die Möglichkeit, das Beispielprogramm abzuändern und die Analyse neu ablaufen zu lassen. Der Pascal-Code des Beispielprogramms ist in Programm 1 angegeben. Die entsprechende Pascal-Grammatik wurde in der Online-Hilfe definiert.

**Programm 1:** Pascal-Code des Eingabebeispiels

Überladung von Operatoren
Unser letztes Beispiel (Abb. 7) demonstriert die Auflösung der Überladung von Operatoren. Rechts unten ist ein Hilfsfenster mit der aktuellen Eingabespezifikation eingeblendet, die zuvor mit Hilfe einer Eingabemaske erstellt und syntaktisch überprüft worden war. Der "+"-Operator ist vierfach und der "/"-Operator dreifach überladen. Im Animationsbereich ist der auf 140% vergrößerte Ausdrucksbaum des Eingabeausdrucks (hier "1/2+3/4") mit den zu jedem Operatorknoten assoziierten Mengen von Definitionsalternativen zu sehen. Alle Mengen sind nach der Berechnung einelementig, wobei die Integerkonstanten nullstellige Operatoren vom Typ int sind. Die Überladung der Operatoren wurde also erfolgreich aufgelöst. Im Falle eines Fehlers wäre mindestens eine Menge mehrelementig und entsprechend markiert.

**Abbildung 7:** Visualisierung der Auflösung der Überladung (AVI-Video, 2.3MB)

Next:7. Evaluation
Up:Visualisierung und Animation der semantischen Analyse von Programmen
Previous:5. Designprinzipien
Andreas Kerren , 2000-04-24

Benutzer: gast • Besitzer: schwill • Zuletzt geändert am: