Technische Universität München
Fakultät für Informatik
Prof. Dr. Helmut Seidl
Riitta Höllerer

Praktikum des Übersetzerbaus:

Generierung von Benutzungsoberflächen SS 2004

Aufgabenblatt 2

5. Mai 2004

EMUGEN

Auf diesem Arbeitsblatt befassen wir uns mit dem am Lehrstuhl Eickel von Herrn Brandl entwickelten Generator EMUGEN und generieren unsere Formulare direkt aus der Spezifikation des Datenmodells.

EMUGEN ist ein Generator, mit dem man aus Beschreibung der Daten-, Aufgaben-, Benutzer- und Layoutmodells interaktive Informationssysteme mit Benutzungsoberflächen für mehrere Benutzer generieren kann. EMU bedeutet Extensible Models for Multiple-User Interfaces.

Wir benutzen im Praktikum einen reduzierten Umfang des Generators, wir generieren nur Formulare und keine graphischen Editoren, die man bei der Realisierung von Workflow-Managementsystemen braucht. Die grundliegenden Ideen von EMUGEN sind in der Dissertation von Herrn Brandl beschrieben und es gibt eine Benutzungsanleitung für EMUGEN; beides online, Links sind unten angegeben.

Im Sommersemester 2004 verwenden wir VisualEmugen, das eine Erweiterung von EMUGEN um eine bequeme Oberfläche und um die Visualisierung des Datenmodells ist. VisualEmugen wurde von Herrn Petter als Systementwicklungsprojekt am Lehrstuhl Seidl im Sommer 2003 erstellt. VisualEmugen ist in dem vorgegebenen CompilerConstructionKit enthalten, in dem alle im Praktikum verwendeten Werkzeuge: Ant, JFlex, CUP-TUM, Classgen, Code2Html und VisualEmugen geliefert werden.

Es folgt ein kleines Beispiel für eine Spezifikation des Datenmodells für ein Adressenbuch und das dafür generierte Formular.

Adressenbuch-Beispiel

Aus der Eingabe:

Adressbuch::=Personen
Personen::=  Person*
Person::=    String:Name
             String:Vorname
             String:Telefon

wird folgendes Formular erzeugt.

3. Aufgabe (Generierung des Terminplans mit VisualEmugen)

In dieser Aufgabe soll das Formular zur Erstellung des Terminplans für Studenten mit Hilfe von VisualEmugen erstellt werden. Dafür müssen Sie wie im Adressbuch-Beispiel das Datenmodell in textueller Form als Grammatik angeben. Lesen Sie als Einarbeitung die unten angegebenen Teile der Dissertation von Herrn Brandl und entwerfen Sie dann das Datenmodell.

Ein Teil des Formulars soll eine Liste von Veranstaltungen enthalten, aus der der Student seine Veranstaltungen auswählen kann. Im zweiten Teil des Formulars kann der Student für sich eine Terminliste für die ganze Woche zusammenstellen.

Das Formular besteht also aus zwei Listen, eine Liste von Veranstaltungen mit Angaben wie

Titel (z.B. "Compilerbau", Typ: String),
Dozent (z.B. "Seidl", Typ: String),
Veranstaltungsart (z.B. "Vorlesung", Typ: String),
Liste von Terminen für Vorlesungen (z.B. Hörsaal 2, Mo 12-14; Hörsaal 2, Mi 10-12) und
Liste von Terminen für Übungen (z.B. 02-07-014, Di 10-12, Ziewer; 02-07-014, Di 12-14, Ziewer; 02-07-014, Do 12-14, Ziewer; 02-07-014, Fr 10-12, Berlea).

und eine Liste von Terminen für den Studenten mit Angaben wie

Raum (z.B. 02-07-014),
Tag (z.B. Di),
Uhrzeit (z.B. 10-12),
Titel (z.B. "Compilerbau")
Veranstaltungsart (z.B. "Übung", Typ: String),
Dozent (z.B. "Ziewer", Typ: String, ).

Generieren Sie mit VisualEmugen Ihr Formular (Menü Program: generate, compile, run).

Wie Sie sehen, werden für Listen automatisch die Aktionen: Einfügen, Löschen, Editieren und Verschieben der Listenelemente generiert. Für weitere Aktionen müssen Sie in der EMUGEN-Eingabe Aktionen definieren (im Text hinter der Grammatik).

Ergänzen Sie nun Ihr Formular um Aktionen, mit denen man die in das Formular eingegebenen Daten in eine Datei in XML-Format speichern und aus einer Datei wieder einlesen kann.
Um diese Aktionen zu realisieren, ergänzen Sie die EMUGEN-Eingabe für das Formular um Aktionen. Die Syntax für Aktionen sieht folgendermaßen aus:
actions of Terminplan { token Oeffnen [] () -> {: // hier ergaenzen return 0; :} Ok; // weitere Aktionen von Terminplan }
In den geschweiften Klammern stehen Java-Anweisungen. Aktionsdefinitionen stehen in der Eingabe nach der Grammatik. (Reihenfolge insgesamt: Grammatik, Methoden für einzelne Klassen, Layout, Aktionen). Für obige Oeffnen-Aktion generiert EMUGEN einen JButton Oeffnen und den sonstigen Code, um den JButton mit dem Aktionscode zu verbinden. Sehen sich die generierten Klassen: Terminplan, TerminplanPanel und TerminplanOeffnenAction an. Die generierten Javaklassen stehen in /tmp/emuXXXX.tmp/src, wobei für XXXX irgendeine Zahl steht. Die Javaklassen werden nach der Java-übersetzung (compile) gelöscht, also vorher hinschauen.
Wenn der Oeffnen-Button geklickt wird, wird die Aktion ausgeführt.
Um die Speichern- und Oeffnen- Aktionen zu implementieren müssen Sie nur die von EMUGEN für Terminplan (Startnonterminal der Grammatik) generierten Methoden:
public void writeToFile() public void readFromFile()
aufrufen. Diese Methoden geben die Daten in eine XML-Datei aus bzw. lesen die Daten aus einer XML-Datei in die entsprechenden Formularfelder.
Diese Methoden verwenden wiederum die für alle Klassen des Datenmodells generierten Methoden:
public String toXML() public void loadFromXML(org.w3c.dom.Element e)
Solche Ein/Ausgabeaktionen sollten Sie für alle Formulare, die Sie erstellen, vorsehen.
Definieren Sie nun eine Aktion mit der die erste Liste (Veranstaltungsauswahl) vorbesetzt wird, z.B. mit den Terminen dieses Praktikums. Füllen Sie danach die erste Liste mit einer Auswahl von Veranstaltungen, darunter alle Veranstaltunge, die Sie im Sommersemester 2004 besuchen.
Definieren Sie eine Kopiere-Aktion mit der alle Termine einer selektierten Veranstaltung aus der ersten Liste in die zweite Liste kopiert wird. Kopieren Sie dann Ihre Veranstaltungen mit dieser Aktion in die zweite Liste und ordnen Sie passend, so dass Sie mit dem Sreenshot einen aktuellen Terminplan für sich haben. (Nicht vergessen, durch Speichern-Aktion Ihre Formulardaten zu speichern.)

Geben Sie als Lösung der Aufgabe die erzeugte jar-Datei und eine mit code2html erzeugte html-Datei mit der VisualEmugen-Eingabe und einem Screenshot Ihres Formulars. Den Screenshot erst nach dem code2html-Lauf einfügen (wie hier im Aufgabenblatt 2 "Adressbuch.gif") sonst haben Sie statt dem Bild den Quelltext des Bildes in Ihrem html-Datei.

Hinweise zu EMUGEN:

Um die Konzepte von EMUGEN zu verstehen, sollen Sie von der Dissertation von Herrn Brandl "Generierung interaktiver Informationssysteme und ihrer Benutzungsoberflächen für mehrere Benutzer" die Einführung im Kapitel 1 sowie die Abschnitte 4.1 und 4.2 über das Datenmodell lesen. Im Anhang ist die Syntax des Daten-, Aufgaben- und Benutzermodells angegeben.
Benutzungsanleitung für EMUGEN ist hier: http://wwweickel.informatik.tu-muenchen.de/persons/brandla/emugen/doku.html
CompilerConstructionKit ist hier: http://www2.informatik.tu-muenchen.de/projekte/cck

Hinweise zu Aktionen:

Fügen Sie Aktionen nur zum Startnonterminal der Grammatik (z. B. Adressbuch im Beispiel). Es kann sein, dass Buttons für Formularteile nicht funktionieren.
Reihenfolge der einzelnen Spezifikationsteilen: Grammatik, Methoden für einzelne Klassen, Layout, Aktionen.
Bachten Sie die Schreibweise: Generierte Klassnamen beginnen immer mit einem Großbuchstaben (d.h. für das Startnonterminal beispiel wird Klasse Beispiel.java generiert.)
Wenn Sie Aktionen hinzufügen, arbeiten Sie zunächst mit dem Standard-Layout. Erst wenn die Aktion korrekt funktioniert, ändern Sie gegebenenfalls das Layout.
Bevor Sie die Java-Anweisungen für die Aktionen schreiben, schauen Sie die generierten Java-Klassen für das Datenmodel an (Klassennamen ohne Suffix Panel), um zu sehen wie die Instanzvariablen heißen und welchen Typ sie haben (z.B. String:Name aus der EMUGEN-Eingabe wird zu private emu_runtime.datamodel.IOString Name ).
Um auf die Formulardaten zuzugreifen (z.B. auf Name) müssen Sie die generierten Methoden get...() verwenden. Beim Zugriff auf IOInteger-, oder IOString-Größen muss man getValue() und setValue()verwenden.

Z.B. Zugriffe auf eine Person, evtl. Code in einer Aktion im Addressbuch:
... emu_runtime.datamodel.IOString name; String s ; Person p = new Person(); // Hier werden die Listener und Komponenten initializiert p.getVorname().setValue("Thomas");//Vornamen besetzen Person p1 = ((Person)getPersonen().getLastSelectedElement()); // Selektierte Person p1.getVorname().setValue("Hanna"); //Vornamen besetzen int i= 0; getPersonen().append(p1); getPersonen().append(p); name = ((Person)getPersonen().elementAt(i)).getVorname(); //Indizierter Zugriff s = name.getValue();
Als Basistypen im Datenmodell sind nur Integer, Float, String und Text möglich.
Auf den Sunhalle-Rechnern sind die Werkzeuge in:

/usr/proj/compiler/compilerbau/bin.

installiert. Aufruf von VisualEmugen mit visualemugen.
Dies nur zu Information: VisualEmugen (bzw. EMUGEN) Kommandos:

Sind die Archive:
emu_runtime.jar
VisualEmugen.jar (bzw. emugen.jar)
im aktuellen Verzeichnis, wird aus der obigen Addressbuch-Eingabe mit Hilfe der Kommandos:

java -jar VisualEmugen.jar -f -fo adressbuch.emu
(bzw. java -jar emugen.jar -f -fo adressbuch.emu)
javac -classpath .:emu_runtime.jar AdressbuchPanel.java
java -classpath .:emu_runtime.jar AdressbuchPanel

obiges Formular erzeugt.
Aufgabenblatt 2 ist hier: http://www2.informatik.tu-muenchen.de/lehre/Praktika/SS04/bop-unterlagen/blaetter/blatt2/Blatt02.html