Using EMUGEN

Author: Alfons Brandl

EMUGEN is a generator for Java-Swing user interfaces. It can be used for building prototypes of user interfaces for multi-user systems from a short, formal description of the requirements. You can find information about the general approach (in english) here: http://wwweickel.in.tum.de/forschung/user-interfaces and more details about the underlying concepts (in german) here: http://tumb1.biblio.tu-muenchen.de/publ/diss/in/2002/brandl.html.

A First Example

Let's start with a first example. We want to generate a formular for the following data type (described in more detail here: http://wwweickel.in.tum.de/persons/brandla/HCI2001/paper.pdf):
PracticalCourse::=Student*:Students Participant*:Participants
        Supervisor String:ActualExercise
Supervisor::=String:Name
Participant::=StudentRef Solution*:Solutions
StudentRef::=Name->Student
Solution::=String:Exercise Text:Description Rating
Student::=String:Name Degree
Degree::=NoDegree |PreDegree
PreDegree::=String:Date
Rating::=VeryGood|Good|Satisfactorily|Sufficient|Deficient
Technically we need two things: the generator emugen.jar and the runtime library emu_runtime.jar. Save the generator, the runtime library and the above data type description in a file with name first.emu and than start emugen with the following line (use at least java 1.3):

    java -jar emugen.jar -fo first.emu

With the option -fo EMUGEN generates only a form based user interface to manipulate data objects for the types described above but not a multiple user interface (no multiple user functionality, no graph editor).

EMUGEN generates Java source files which needs the emu_runtime.jar runtime library. Therefore it is necessary to include the library in the classpath for compiling and executing the formular. In order to get a running formular for the data type PracticalCourse you have to start the Java compiler with the following commando (it should work if you have saved emu_runtime.jar in the current directory):

    javac -classpath .:emu_runtime.jar PracticalCoursePanel.java

As you might guess the formular for PracticalCourse is implemented/generated as a Java class with name PracticalCoursePanel saved in a file called PracticalCoursePanel.java. Since PracticalCourse is a data type of meta type tupel the associated panel class extends the runtime class emu_runtime.TupelPanel where the layout of the formular is implemented on the meta level (in the method emu_runtime.TupelPanel.formlayout()).

Now, let's start the formular for PracticalCourse. This can be simple done by the following comando (in each generated form class a test method main is generated):

    java -classpath .:emu_runtime.jar PracticalCoursePanel

In the generated main-method a instance of the data type PracticalCourse (technically: a Java object of the class PracticalCourse) is created and can be manipulated synchronously with two formulars. In order to get a feeling of how the standard interaction of the generated forms works try to add some students to the list of students and, afterwards, try to add some participants of the course. Each participant can be linked to a student with the component StudentRef.

Form Layout Refinements

When you look at the generated form classes as e.g. PracticalCoursePanel you easily find ways to change the layout (implemented on the meta level in the runtime library) by changing the generated file PracticalCoursePanel.java. Of course, this is not very handsome because changing the data type according to new requirements would destroy your refined form layout. Therefore it is possible to include layout refinements in the input file after the data type definition. For instance, in order to use tabbed panes for the two lists in our form we can use the following layout refinement
form layout of PracticalCourse {:
  removeAll();
  JTabbedPane tab = new JTabbedPane();
  tab.addTab("Students",StudentsPanel);
  tab.addTab("Participants",ParticipantsPanel);
  setLayout(new BorderLayout());
  add(tab,BorderLayout.CENTER);
  add(SupervisorPanel,BorderLayout.SOUTH);
:}
Looking at the generated file PracticalCoursePanel.java. you see that now the method emu_runtime.TupelPanel.formlayout() is overwritten by the method PracticalCoursePanel.formlayout() whereby the above lines of Java code are inserted literally. Layout refinements are possible for all data type forms. Additionally you can refine the layout of the list elements:
element layout of Solution {:
  setText(Exercise+Rating.toString());
  setOpaque(true);
  setBackground(
    isSelected?Color.blue
    :(Rating.isVeryGood()|
      Rating.isGood()|
      Rating.isSatisfactorily()?Color.green
      :(Rating.isSatisfactorily()|
        Rating.isSufficient()|
        Rating.isDeficient()?Color.red:Color.white)));
:}
In order to see the effects of the last refinement in an example session you have to add a new participant and some solutions of that participant and set the variant Rating with different alternatives.

New Form Layout Language

Maybe you think that it would be better to have a special layout language for refining the layout in order to be independant of the target language. Such an extension is prepared to an certain extend by the runtime architecture of the generated forms. If you look at the constructor of the generated form classes (e.g. again PracticalCoursePanel) you see that the above mentioned method formlayout() is called indirectly via static methods of the class FormLayout. So, if you want to build a compiler for a layout language you can couple your generated code with the form classes generated by EMUGEN via overwritting the file FormLayout.java. For that task it will be useful to have an opportunity to access on the data model of an emugen input file. This is possible via the static method
emugen.export.DataModel emugen.Main.exportDataModel(File inputFile)
The class emugen.export.DataModel is generated with classgen (http://www.deissenboeck.de/classgen/vcg/index.html) out of the following input file:
package emugen.export;
DataModel::=String:startType Prod*:productions
Prod::=String:left Type:type
Type::= {TupelProd} Component*:components
       |{VarProd} String*:alternatives
       |{ListProd} String:elementType
       |{RefProd} String:selector String:type "emugen.syntax.Formel":expr
Component::=String:type String:selector
Here, you find a graphical description of DataModel: datamodel.jpg.

Actions and Activity Nets

EMUGEN can also be used for building prototypes for multi-user interfaces as described here: http://wwweickel.in.tum.de/persons/brandla/HCI2001/paper.pdf: Because of technical reasons you need the grace graph editor framework for executing multi-user interfaces (see the following section). You can find the input file together with a (very simple) building script of the example in this directory: http://wwweickel.in.tum.de/persons/brandla/emugen/examples/practicalcourse/
 

EMUGEN and Graphical Editors

EMUGEN can include graphical editors built by grace (see  http://www.doclsf.de/grace). If you have installed grace (the generator AND the runtime library) it is possible to generate a prototyp as described here: http://wwweickel.in.tum.de/persons/brandla/IUI2001/abstract.pdf . You can find the input file together with a (very simple) building script of the example in this directory: http://wwweickel.in.tum.de/persons/brandla/emugen/examples/adhocwf. Try to understand the execution by watching this film.avi.