Studiengang: Informatik, Modul BTI7301 Projekt 1
Autor: Roland Bruggmann, brugr9@bfh.ch
Dozent: Prof. Dr. J¨urgen Eckerle, juergen.eckerle@bfh.ch
Datum: 15.02.2014
Berner Fachhochschule | Haute ´ecole sp´ecialis´ee bernoise | Bern University of Applied Sciences
Desktop-Applikation zur Visualisierung von
Graphenalgorithmen
Objekt-orientierte Analyse und Design OOAD und
Objekt-orientierte Programmierung OOP unter
Ber¨ucksichtigung von Designprinzipien und Entwurfsmuster
Semesterarbeit

Inhaltsverzeichnis
1 Einleitung 1
1.1 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Vision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2 Konzept 2
2.1 Problemstellung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.1.1 Graphen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.1.2 Algorithmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.1.3 Traversierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.4 Sonstige Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Erg¨anzende Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.3 Use Cases Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3.1 Actors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3.2 Use Cases Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3.3 Beschreibung in Kurzform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3.4 Ausf¨uhrliche Beschreibung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4 Domain Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.4.1 Domain Model Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.4.2 Domain Model Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3 Design 9
3.1 Paket Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1.1 Paket Util . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.1.2 Paket Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.1.3 Paket Algorithm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.1.4 Paket Traversal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.2 Paket App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.2.1 Paket Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4 Umsetzung 19
4.1 Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.2 Algorithmus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.3 Traversierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Quellenverzeichnis 25
Abbildungsverzeichnis 26
Tabellenverzeichnis 26
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 i

1 Einleitung
1.1 Motivation
Um Algorithmen und Datenstrukturen zu lernen ist ein computergest¨utztes Werkzeug zur Visualisierung eine will-
kommene Hilfe. Im Rahmen dieser Semesterarbeit soll deshalb eine didaktische Applikation implementiert werden.
Dabei bietet dieses Projekt die Gelegenheit, eine L¨osung iterativ und inkrementell mittels agilen Methoden der
Objekt-Orientierten Analyse und Design zu erarbeiten. Die Applikation soll schliesslich unter Ber¨ucksichtigung von
Software Design Principles mit Design Pattern implementiert werden.
Dieses Modul hat zum Lernziel, die Studierenden anhand von konkreten Projektauftr¨agen mit der Praxis der Pro-
jektf¨uhrung vertraut zu machen. Zu diesem Zweck realisieren sie in kleinen Gruppen weitgehend selbst¨andig je ein
vollst¨andiges Informatikprojekt. Am Ende dieses Moduls haben die Studierenden die folgenden F¨ahigkeiten erwor-
ben: Sie verstehen die grunds¨atzlichen Prinzipien des Ablaufs eines Software-Projekts und k¨onnen diese konkret
anwenden. Sie k¨onnen ein Projekt vorbereiten, planen, realisieren, dokumentieren und pr¨asentieren. Dabei werden
Schwerpunkte auf die Arbeitsorganisation mit Systematik, Selbst¨andigkeit und Projektf¨uhrung gesetzt. Die Pro-
bleml¨osung soll kreativ unter Anwendung der passenden Methoden vonstatten gehen. Auch die Beherrschung der
Materie und die Qualit¨at der Ergebnisse sind wichtig. Die Dokumentation soll korrekt sein und eine umfassende
Darstellung beinhalten, die lesbar, vollst¨andig und ansehlich gestaltet ist.
1.2 Vision
Es soll eine Software erstellt werden, welche Graphen darstellen kann, bzw. es erlaubt, Graphen mit einem graphi-
schen Editor zu spezifizieren. Gleichzeitig soll die Software der Visualisierung der Traversierung von Graphen dienen.
Ein Algorithmus, wie etwa derjenige von Dijkstra soll mit diesem Werkzeug so auf einfache Weise visualisierbar wer-
den. Das Werkzeug soll sich als didaktisches Hilfsmittel bzw. als Debugging Tool f¨ur beliebige Graphen-Algorithmen
eignen.
Der vorliegende Bericht ist in vier Kapitel unterteilt: Auf diese Einleitung folgt eine Erl¨auterung des Konzeptes (Ka-
pitel 2). Danach wird das Design vorgestellt (Kapitel 3). Anschliessend wird die Umsetzung pr¨asentiert (Kapitel 4).
F¨ur die Grundlagen in Algorithmen und Datenstrukturen sei auf die Literatur im Quellenverzeichnis verwiesen.
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 1

2 Konzept
Das Konzept wird als objektorientierte Analyse formuliert. In der Vision werden die Problemstellung und sonstige
Anforderungen erfasst. In den erg¨anzenden Anforderungen ist n¨aheres zum Setup aufgelistet. Die darauf folgenden
Anwendungsf¨alle sind in der Kurzform gehalten. Die Dom¨anen werden grafisch modelliert.
2.1 Problemstellung
Es soll eine Software erstellt werden, welche das Traversieren von Graphen mit verschiedenen Algorithmen darstellen
kann. Ein beliebiger Algorithmus, wie etwa derjenige von Dijkstra soll mit diesem Werkzeug auf einfache Weise
visualisiert werden. Das Werkzeug soll sich als didaktisches Hilfsmittel eignen. Neue Algorithmen sollen ohne grossen
Aufwand hinzugef¨ugt werden k¨onnen. Zudem soll die Software Graphen aus einer Datei importieren k¨onnen.
2.1.1 Graphen
Das System soll ungerichtete, gerichtete, ungewichtete und (positiv) gewichtete einfache Graphen mit einfachen
Kanten (simple connected graphs, neither self-loops nor parallel edges) verarbeiten k¨onnen.
Ein Graph wird durch Kreise (Knoten), Geraden (ungerichtete Kanten), Pfeile (gerichtete Kanten) und Beschrif-
tungen (Knotenbezeichnungen, Kantenbezeichnungen und Kantengewichte) dargestellt. Das System kann folgende
Dateioperationen ausf¨uhren:
ˆ Es k¨onnen neue ungerichtete und gerichtete Graphen erstellt werden.
ˆ Es k¨onnen als Datei vorliegende Graphen ge¨offnet werden.
ˆ Graphen k¨onnen bearbeitet werden.
ˆ Die Anordnung der Knoten kann ver¨andert werden: Diese k¨onnen mit der Maus verschoben werden.
ˆ Graphen k¨onnen gespeichert werden.
2.1.2 Algorithmen
Das System soll mindestens folgende implementierte Algorithmen zur Auswahl bereit halten:
ˆ Rekursive Tiefensuche (Depth-First Search, DFS)
ˆ Breitensuche (Breadth-First Search, BFS)
ˆ Dijkstra: Suchen des k¨urzesten Weges ausgehend von einem als Start festgelegten Knoten in einem gewich-
teten Graphen (Shortest Path)
ˆ Kruskal: Minimaler Spannwald berechnen (Spanning Forest)
Es sollen nur diejenigen Algorithmen ausw¨ahlbar sein, die auf den aktuellen Graph-Typ angewendet werden k¨onnen.
F¨ur manche Algorithmen soll ein Start-, z.T. auch ein Endknoten angegeben werden k¨onnen. Ein Entwickler von
Algorithmen soll auf m¨oglichst einfache Weise weitere Algorithmen implementieren und dem System hinzuf¨ugen
k¨onnen.
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 2

2.1.3 Traversierung
ˆ Die Visualisierung der Traversierung soll Schrittweise erfolgen (’Step-by-step’): Dabei soll der Benutzer vor,
zur¨uck, zum Anfang oder zum Ende der Visualisierung gelangen k¨onnen.
ˆ Die Visualisierung der Traversierung soll auch abgespielt werden k¨onnen (Animation). Dabei soll der Benutzer
die Animation starten, pausieren oder stoppen k¨onnen.
ˆ Das Tempo der Animation soll ver¨andert werden k¨onnen.
2.1.4 Sonstige Anforderungen
ˆ Zu ¨offnende Graphen werden validiert.
ˆ Ein Entwickler von Algorithmen muss ein gegebenes Interface implementieren und gibt an, welche Graph-
Typen mit einem Algorithmus traversiert werden kann (ungerichtet, gerichtet).
ˆ Mit jedem Schritt der Visualisierung wird auf einer Protokollpanele eine Statusmeldung ausgegeben, die den
begangenen Traversierungsschritt erl¨autert.
ˆ Die Visualisierung der Traversierung zeigt schrittweise Farb¨anderungen von Knoten und Kanten, evtl. auch
errechnete Zwischenergebnisse gem¨ass Layout-Vorlage in [Anr12] (siehe Abbildung 2.1).
Abbildung 2.1: Vorlage f¨ur das Layout von Knoten und Kanten
2.2 Erg¨anzende Anforderungen
ˆ Das System soll auf verschiedenen Betriebssystemen lauff¨ahig sein, im minimum auf GNU/Linux, Mac OS
und Microsoft Windows. Das System wird deshalb in der Programmiersprache Java implementiert.
ˆ Die Software wird als Java-Projekt mit Eclipse, die grafische Benutzeroberfl¨ache mit dem Java Swing Fra-
mework erstellt.
ˆ Das System soll in den drei Sprachen Deutsch, Franz¨osisch und Englisch bedienbar sein (i18n).
ˆ Es werden das Java Universal Network/Graph Framework JUNG [JUNG], das XML-basierte Format GraphML
(vgl. [GraphML]), die Generic Method Pattern von Tamassia, Goodrich und Zamor [net3] und die Apache
Commons IO Library verwendet.
ˆ In der Woche 45 wurde entschieden, das Projekt mit Maven umzusetzen.
ˆ Die Versionsverwaltung der Arbeiten erfolgt mit der Software git.
ˆ Der Quellcode erh¨alt Kommentare, mit Javadoc wird eine Dokumentation als html-Version erstellt.
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 3

2.3 Use Cases Model
2.3.1 Actors
Actor Typ Beschreibung
User primary Interagiert mit dem System.
Operating System supporting Dient dem System beim Zugriff auf das Dateisystem.
Graph Developer offstage Entwickler von Graphen in GraphML.
Algorithm Developer offstage Entwickler von Algorithmen in Java.
Tabelle 2.1: Actors
2.3.2 Use Cases Diagram
VisTra
Edit Graph
Stop
Resume
Pause
Play
Goto End
Forward
Backward
Goto Beginning
Set Delay
Select Algorithm
Import Graph
User
Abbildung 2.2: Use Cases Diagram
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 4

2.3.3 Beschreibung in Kurzform
Open Graph: Der User kann einen Graphen ¨offnen (ausf¨uhrliche Beschreibung siehe Seite 5).
Edit Graph: Der User kann einen Graphen editieren.
Select Algorithm: Der User kann einen Algorithmus ausw¨ahlen und damit eine Traversierung (Traversal) generie-
ren (ausf¨uhrliche Beschreibung siehe Seite 6).
Set Delay: Der User kann f¨ur die animierte Visualisierung (Animation) das Zeitintervall zwischen zwei Bildern
einstellen.
Goto Beginning: Der User kann in der Step-by-Step-Visualisierung an den Anfang springen.
Forward: Der User kann in der Step-by-Step-Visualisierung einen Schritt vorw¨arts gehen.
Backward: Der User kann in der Step-by-Step-Visualisierung einen Schritt r¨uckw¨arts gehen.
Goto End: Der User kann in der Step-by-Step-Visualisierung an das Ende springen.
Play: Der User kann die animierte Visualisierung starten.
Pause: Der User kann die animierte Visualisierung pausieren.
Resume: Der User kann die pausierte animierte Visualisierung wieder aktivieren.
Stop: Der User kann die animierte Visualisierung anhalten.
2.3.4 Ausf¨uhrliche Beschreibung
Die UC Open Graph und Select Algorithm werden im ausgearbeiteten Format erl¨autert. F¨ur diese UC gilt der Scope:
System-wide, Level: User-goal und als Primary Actor: User.
UC1: Open Graph
Preconditions:
ˆ Die Benutzerschnittstelle zur Befehlswahl ist aktiv.
ˆ Die Dateistruktur des Betriebssystems ist zug¨anglich.
ˆ Auf die zu importierende Datei sind mindestens Leserechte gesetzt.
Postconditions (success guarantee):
ˆ Der Graph steht dem System zur weiteren Verarbeitung zur Verf¨ugung.
ˆ Der zu ¨offnende Graph wurde visualisiert.
Main Success Scenario:
1. Der User w¨ahlt ¨uber die Benutzerschnittstelle den Men¨ueintrag f¨ur das ¨Offnen eines
Graphen (¨offnen).
2. Der User wird dazu aufgefordert, den Pfad und den Dateinamen einer Datei anzuge-
ben (path) oder den Vorgang abzubrechen (abort).
3. Die angegebene Datei wird in die Dateistruktur des Systems kopiert (copy).
4. Die angegebene Datei wird durch das System auf Kompatibilit¨at gepr¨uft (load).
5. Der Graph wird visualisiert.
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 5

UC2: Select Algorithm
Preconditions:
ˆ Die Benutzerschnittstelle zur Wahl eines Algorithmus ist aktiv.
Postconditions (success guarantee):
ˆ Das System hat den gew¨ahlten Algorithmus als Instanz geladen.
ˆ Das System hat den Algorithmus als ausgew¨ahlt markiert (selected).
ˆ Das System hat mit dem gew¨ahlten Algorithmus eine Traversierung generiert.
ˆ Das System ist zur Visualisierung der Traversierung bereit.
Main Success Scenario:
1. Der User w¨ahlt ¨uber die Benutzerschnittstelle einen Algorithmus.
2. Das System l¨adt den gew¨ahlten Algorithmus ins System.
3. Das System markiert in der Parameterliste den gew¨ahlten Algorithmus als ausgew¨ahlt
(selected).
4. Das System aktualisiert die Parameterliste der Benutzerschnittstelle.
5. Das System brechnet mit dem gew¨ahlten Algorithmus die Traversal.
6. Das System informiert den User mit einer Mitteilung, dass die Berechnung der Tra-
versal abgeschlossen ist.
7. Das System aktiviert die Abspielkonsole zur Steuerung der Traversierung.
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 6

2.4 Domain Model
Es folgt das Dom¨anenmodell als Diagramm und eine Beschreibung der Konzeptklassen mit Assoziationen – Multi-
plizit¨aten und Attribute werden in Klammern angegeben.
2.4.1 Domain Model Diagram
Parameter Controller
List of Graphs
List of Algorithms
Graph
Edgetype
Selected
Algorithm
Edgetype
Enabled
Selected
TraversalVisualizerTraversal Controller
Traversal
Steplength
Delay
To Beginning
Backward
Forward
To End
Play
Pause
Resume
Stop
1
1
operate
1 1
control
1
0..n
visualize
Step
1
0..n
manage
1
0..1
visualize1
1
operate
User Interface
1
1
generate
1 0..n
import
1 0..n
delete
1 0..n
enable
1 0..1
select
1 0..n
import
1 0..n
delete
1 0..1
select
Mit der Wahl eines
Graphen als Para-
meter (select)
werden die auf den
Graphen anwend-
baren Algorithmen
aktiv gesetzt
(enable).
Mit der Wahl eines
Algorithmus als
Parameter (select)
wird die Traversal
berechnet
(generate).
Abbildung 2.3: Domain Model Diagram
2.4.2 Domain Model Description
User Interface
ˆ ¨Uber ein User Interface (1) kann ein User einen Parameter Controller (1) bedienen (operate).
ˆ ¨Uber ein User Interface (1) kann ein User einen Traversal Controller (1) bedienen (operate).
Parameter Controller
ˆ Ein Parameter Controller verwaltet die zur Traversal ben¨otigten Parameter Graph und Algorithm (List of
Algorithms).
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 7

ˆ Per Parameter Controller (1) kann ein User einen des Formates *.graphml importieren (import).
ˆ Mit dem Editieren eines Graphen (1) werden die auf den Graphen anwendbaren Algorithmen (0..n) aktiv
gesetzt (enable).
ˆ Ein Parameter Controller h¨alt eine gegebene Anzahl Algorithmen als Vorlagen bereit. Die importierten Algo-
rithmen werden der Liste mit Algorithmen (List of Algorithms) aufgelistet.
ˆ Per Parameter Controller (1) kann ein User einen Algorithmus (0..1) als Parameter ausw¨ahlen (select).
Graph
ˆ Ein Graph hat ungerichtete oder gerichtete Kanten (Edgetype).
ˆ Ein Graph kann ausgew¨ahlt werden (Selected).
Algorithm
ˆ Ein Algorithm kann Graphen mit ungerichteten oder gerichteten Kanten (Edgetype) verarbeiten.
ˆ Ein Algorithm (1) generiert eine Traversal (1) (generate).
ˆ Ein Algorithm kann aktiviert werden (Enabled).
ˆ Ein aktivierter Algorithm (Enabled) kann ausgew¨ahlt werden (Selected).
ˆ Mit der Wahl eines Algorithm (1) als Parameter (Selected) wird eine Traversal (1) erstellt (generate).
Traversal
ˆ Die Traversierung ist ein visualisierbares Objekt.
ˆ Eine Traversal (1) kann einen oder mehrere Steps (0..n) verwalten (manage).
Step
ˆ Ein Step ist ein Schritt der Traversierung.
Traversal Controller
ˆ Ein Traversal Controller (1) steuert einen Visualizer (1) (control).
ˆ Der Traversal Controller h¨alt eine Traversierung (Traversal).
ˆ Per Traversal Controller kann ein User die Anzahl Schritte pro Bild (Steplength) einstellen.
ˆ Per Traversal Controller kann ein User die Zeit zwischen zwei Bildern (Delay) einstellen.
ˆ Per Traversal Controller kann ein User Step-by-Step-Elemente (Forward, Backward, To Beginning, To End)
bedienen.
ˆ Per Traversal Controller kann ein User Animations-Elemente (Play, Pause, Resume, Stop) bedienen.
Visualizer
ˆ Ein Visualizer (1) kann einen Graphen (0..1) visualisieren (visualize).
ˆ Ein Visualizer (1) kann einen oder mehrere Steps (0..n) visualisieren (visualize).
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 8

3 Design
Der Source-Code ist in ein Framework und eine damit erstellte App geteilt. Sowohl das erstellen einer Traversierung
mit dem Framework (siehe Abschnitt 3.1) als auch die Benutzerinteraktion in der App (siehe Abschnitt 3.2)
werden mehrheitlich mit endlichen Zustandsmaschinen realisiert – engl. ’finite state automata’ (FSA) – genauer mit
deterministischen endlichen Zustandsmaschinen, sog. ’deterministic finite state automata’ (DFA) (siehe [Hof11]).
Daher werden u.a. Zust¨ande und Zustands¨uberg¨ange erarbeitet.
Grunds¨atzlich wird das Information Hiding Principle eingehalten, indem konsequent mit Schnittstellen gearbeitet
wird – gem¨ass der Devise
”
Program to an interface, not an implementation“. Zudem wird das Dependency Inversion
Principle (DIP) umgesetzt, indem ¨uber abstrakte Klassen der Detailierungsgrad zunimmt.
3.1 Paket Framework
Das Application-Framework macht Gebrauch von Java AWT, der Apache Commons IO Library, vom JUNG-
Framework (siehe [JUNG]) inklusive dem XML-Dialekt GraphML (siehe [GraphML]) sowie von den net.datastructures
(siehe [net3]). Es ist in die vier Pakete Util, Graph, Algorithm und Traversal unterteilt (siehe Abbildung 3.1).
Abbildung 3.1: Paketdiagramm f¨ur das Application-Framework
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 9

3.1.1 Paket Util
Das Paket Util h¨alt die Schnittstellen f¨ur das State Pattern und das Command Pattern bereit. Zudem sind im
Paket mehrere Objekte vom Typ Enum zu finden, die sozusagen als Paletten zum Zeichnen dienen: Farben (Color-
Palette), Schraffuren (Shape-Palette), Zeichens¨atze (Sigma-Palette), Schriftarten (Font-Palette) und Stricharten
(Stroke-Palette mit Stroke-Width und Stroke-Pattern, vgl. Abbildung 3.2).
Abbildung 3.2: Klassendiagramm der Stroke-Palette
3.1.2 Paket Graph
Das Paket Graph ist relativ umfangreich. Zum einen sind hier die Klassen f¨ur das Lesen und Schreiben von Graphen
im XML-Dialekt GraphML gehalten ([GraphML]). Zum anderen sind aber Klassen f¨ur die deserialisierten Graphen
an sich vorhanden. So Implenentiert eine Klasse GraphFactory das Factory-Pattern, eine Klasse GraphManager
das Manager-Pattern.
F¨ur das Layout gibt es eine Klasse LayoutGraph, welche als Decorator zu einem Graphen aus dem JUNG-Framework
dient (vgl. [JUNG]) und das Java-Observer-Pattern implementiert (siehe Abbildung 3.3).
Abbildung 3.3: Klassendiagramm des Layout-Graphen
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 10

Beim Traversieren des Graphen werden die einzelne Elemente (Item), also Knoten (Vertices) und Kanten (Edges)
besucht. Dabei ver¨andert sich deren Farbe, Strichst¨arke oder ihr Zahlwert, also ihr Zustand (vgl. Abbildung 3.4).
Abbildung 3.4: Mockup f¨ur Zust¨ande und Layout von Knoten und Kanten
Die Item sind deshalb mit einem State Pattern, deren Zustands¨anderungen mit einem Command Pattern imple-
mentiert:
ˆ Jedes Item (Vertex, Edge) ist ein ItemStateHandler. Dieser hat einen Stack zum speichern seiner Zust¨ande.
ˆ Ein Zustand (ItemState) ist ein Objekt und implementiert das State Pattern. Der Zustand wird durch die
doEntry-Methode herbeigef¨uhrt.
ˆ Eine Zustands¨anderung (ItemStateCommand) ist ein Objekt und implementiert das Command Pattern. Die
Zustands¨anderung wird durch die execute-Methode ausgef¨uhrt und kann durch die undo-Methode r¨uckg¨angig
gemacht werden.
Aufgrund der m¨oglichen Zust¨ande (ItemState) wurden die dazugeh¨orenden Klassen f¨ur Zustands¨anderungen (Item-
StateCommand) entworfen (siehe Tabelle 3.1).
Tabelle 3.1: ¨Ubersicht der m¨oglichen Zust¨ande von Knoten und Kanten sowie deren Zustands¨uberg¨ange
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 11

Die folgenden Klassendiagramme zeigen ausf¨uhrlich die Zustandsmaschinen (State Pattern) f¨ur eine Kante am
Beispiel eines VisitedEdgeState (siehe Abbildung 3.5) resp. f¨ur einen Knoten am Beispiel eines VisitedVertexState
(siehe Abbildung 3.6).
Abbildung 3.5: Klassendiagramm der Zustandsmaschine f¨ur Kanten am Beispiel eines VisitedEdgeState
Abbildung 3.6: Klassendiagramm der Zustandsmaschine f¨ur Knoten am Beispiel eines VisitedVertexState
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 12

F¨ur das Traversieren des Graphen wird ein TraversableGraph verwendet. Dieser implementiert eine Schnittstelle,
welche Methoden speziell f¨ur die Traversierung per Algorithm deklariert: Methoden mit Prefix step* (siehe Abbil-
dung 3.7). Diese Methoden erstellen Steps, welche in einer Liste abgelegt werden. Die Klasse TraversableGraph
fungiert zudem als Decorator zu einem Graphen des JUNG-Frameworks (vgl. [JUNG]). Grunds¨atzlich werden dessen
Methoden delegiert, aber die Modifier-Methoden werden immutable gemacht, indem diese einfach leer ¨uberschrie-
ben werden (siehe Abbildung 3.8).
Abbildung 3.7: Klassendiagramm der Schnittstelle f¨ur den traversierbaren Graphen
Abbildung 3.8: Klassendiagramm des traversierbaren Graphen
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 13

3.1.3 Paket Algorithm
Das Paket Algorithm h¨alt die f¨ur die Implementation eines Algorithmus zu verwendende Schnittstelle bereit. Diese
ist f¨ur Algorithmen zu verwenden, auch jene die ein Actor ’Algorithm Developer’ implementiert. Die zu implemen-
tierende traverse-Methode nimmt als Parameter einen TraversableGraph entgegen. Diese Methode verwendet die
step-Methoden des TraversableGraph. Abbildung 3.9 zeigt das Klassendiagramm der Algorithmus-Schnittstelle,
Abbildung 3.10 zeigt das Klassendiagramm eines Algorithmus am Beispiel von BFS – eine vormalige Version, wie die
Namen der Methoden ’getEdgeTypes’ und ’traverse’ erahnen lassen. ¨Uber die abstrakte Klasse ’AbstractAlgorithm’
nimmt der Detailierungsgrad zu.
Abbildung 3.9: Klassendiagramm der Algorithm-Schnittstelle
Abbildung 3.10: Klassendiagramm eines Algorithm am Beispiel von BFS
Das Paket h¨alt auch eine Klasse AlgorithmManager, welche ein Feld f¨ur den ausgew¨alten Algorithmus h¨alt (Stra-
tegy Pattern). Die execute-Methode des Managers l¨asst den gew¨ahlten Algorithm ¨uber den Graphen traversieren,
erstellt so die Steps, ¨ubergibt diese einem bidirektionalen Iterator und diesen schliesslich der Traversierung (siehe
Listing 3.1).
Listing 3.1: execute-Methode der Klasse AlgorithmManager
1 @Override
2 public ITraversal execute( ILayoutGraph graph) throws Exception {
3 try {
4 List <IStep > steps = new ArrayList <IStep >();
5 StringBuilder solution = new StringBuilder ();
6 ITraversableGraph g = new TraversableGraph (graph , steps , solution );
7 this.selected.traverse(g);
8 IBidirectIterator <IStep > stepIterator = new ImmutableBidirectIterator <IStep >( steps );
9 ITraversal traversal = new Traversal( stepIterator );
10 traversal.setSolution (solution.toString ());
11 return traversal;
12 } catch (Exception e) {
13 throw e;
14 }
15 }
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 14

3.1.4 Paket Traversal
Das Paket Traversal enth¨alt die zur Traversierung zugeh¨origen Klassen. Eine Traversierung ist ein Objekt, das in
einem bidirektionalen Iterator mehrere Schritte resp. Steps h¨alt (siehe Abbildung 3.11).
Abbildung 3.11: Klassendiagramm von Traversal
Ein Step ist ein Schritt in der Traversierung und als solches eine Zustands¨anderung:
ˆ Ein Step ist ein Objekt.
ˆ Die Steps implementieren ebenfalls das Command Pattern.
ˆ Ein Step kann eine oder mehrere Zustands¨anderungen beinhalten (Macro Command).
Wie schon zuvor f¨ur die LayoutGraph-Item (vgl. Tabelle 3.1) wurde auch hier aufgrund der m¨oglichen Zustands¨an-
derungen (ItemStateCommand) die Steps als Klassen entworfen – eigentlich als ItemStateMacroCommand – und
in der Tabelle erg¨anzt (siehe Tabelle 3.2).
Tabelle 3.2: ¨Ubersicht der m¨oglichen Zust¨ande von Knoten und Kanten sowie deren Zustands¨uberg¨ange als Steps
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 15

3.2 Paket App
Die Applikation macht Gebrauch von Java AWT, JavaX Swing, dem JUNG-Framework und nat¨urlich dem VisTra-
Framework. Sie implementiert eine Model-View-Control-Architektur (MVC) unter Verwendung des Java-Observer-
Pattern:
ˆ Model: Eine Observable-Klasse mit Attributen und deren getter- und setter-Methoden.
ˆ View: Observer-Klasse und JFrame mit Komponenten wie z.B. Menubar, Kn¨opfe, Regler und Text-Panelen.
ˆ Control: Implenentiert als Zustandsmaschine. Die Klasse h¨alt zudem Listeners mit deren Methoden.
Das Paket App enth¨alt dem entsprechend die weiteren Pakete View und Control (siehe Abbildung 3.12).
Abbildung 3.12: Paketdiagramm f¨ur die Applikation
3.2.1 Paket Control
Das Control ist als Zustandsmaschine implementiert (State Pattern). Konkret vorhanden sind drei Zustandsma-
schinen mit folgenden Zust¨anden:
ˆ Kontext ’Parameter’: Graph edited, Graph saved, Algorithm selected, (Off).
ˆ Kontext ’Animation’: (Off), Stopped, Playing, Paused.
ˆ Kontext ’Step-by-step’: (Off), At Beginning, Inter, At End.
Zur Handhabung von Graph und Algorithmus dient die Zustandsmaschine Parameter (siehe Abbildung 3.13). Ist
diese im Zustand ’Algorithm selected’ kann eine weitere, untergeordnete Zustandsmaschine Animation f¨ur eine
zeitgesteuerte Traversierung des Graphen benutzt werden (siehe Abbildung 3.14). Ist diese im Zustand ’Stopped’
kann eine weitere, untergeordnete Zustandsmaschine Step-by-step (Sbs) benutzt werden, der User klickt sich Schritt-
f¨ur-Schritt durch die Traversierung (siehe Abbildung 3.15). Diese drei Zustandsmaschinen sind somit verschr¨ankt
(siehe Abbildung 3.16).
Abbildung 3.13: Zustandsdiagramm der Zustandsmaschine Parameter
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 16

Abbildung 3.14: Zustandsdiagramm der Zustandsmaschine Animation
Abbildung 3.15: Zustandsdiagramm der Zustandsmaschine Step-by-step
Abbildung 3.16: Mockup der App-Control als verschachteltes Zustandsdiagramm
Die Kontrolle ¨uber diese drei Zustandsmaschinen f¨ur Parameter, Animation und Step-by-step ist mit je einem State-
Handler implementiert. Das folgende Klassendiagramm zeigt das App-Control f¨ur den Zustand AnimationPlaying:
Die dazu ben¨otigte Voraussetzung ParameterAlgorithmSelected ist erf¨ullt, die Animation wurde gem¨ass Zustand
SbsAtBeginning gerade erst gestartet (siehe Abbildung 3.17).
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 17

Abbildung 3.17: Klassendiagramm der Zustandsmaschine App-Control am Beispiel des Zustandes AnimationPlaying
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 18

4 Umsetzung
Die grafische Benutzerschnittstelle der Applikation ist unterhalb der Menu- und Iconleisten in die drei Fensterbe-
reiche Graph, Algorithmus und Traversierung unterteilt (siehe Abbildung 4.1):
ˆ Der linke Fensterbereich zeigt die Visualisierung des Graphen. Hier kann der Graph auch interaktiv editiert
werden.
ˆ Im rechten Fensterbereich befinden sich zwei Panelen. Die obere Panele betrifft den Algorithmums. Sie
enth¨alt ein Dropdown f¨ur die Wahl des Algorithmus sowie einen Bereich f¨ur die Beschreibung eines gew¨ahlten
Algorithmus.
ˆ Die untere Panele betrifft die Traversierung. Sie enth¨alt eine Steuerung f¨ur die Traversierung des Graphen:
Step-by-Step (Vorw¨arts- und R¨uckwarts-Knopf) oder animiert (Play). Unterhalb der Steuereung wird auch
hier in einem Bereich die Traversierung beschrieben.
Abbildung 4.1: Die graphische Benutzerschnittstelle
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 19

4.1 Graph
Abbildung 4.2: Men¨u Datei ¨offnen
Abbildung 4.3: Dialog zum ¨Offnen einer Datei vom Typ *.vistra
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 20

Abbildung 4.4: Popup zum Editieren eines Knotens
Abbildung 4.5: Popup zum Editieren einer Kante
Abbildung 4.6: Popup zu Editieren des Kantengewichtes
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 21

4.2 Algorithmus
Abbildung 4.7: Dropdown zur Wahl eines Algorithmus
4.3 Traversierung
Abbildung 4.8: Minimaler Spannwald als Resultat der Traversierung eines ungerichteten, gewichteten Graphen per
Algorithmus Kruskal
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 22

Abbildung 4.9: Animierte Traversierung eines ungerichteten, gewichteten Graphen per Algorithmums Dijkstra Di-
stance mit Start in Knoten A
Abbildung 4.10: K¨urzeste Wege als Resultat der Traversierung eines ungerichteten, gewichteten Graphen per Algo-
rithmus Dijkstra Distance mit Start in Knoten A
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 23

Abbildung 4.11: Traversierung eines einfachen, ungerichteten Baumes per Algorithmus BFS mit Start in Knoten A
Abbildung 4.12: Traversierung eines einfachen, ungerichteten Baumes per Algorithmus DFS mit Start in Knoten A
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 24

Quellenverzeichnis
[Anr12] Bernhard Anrig.
”
Algorithms and Data Structures – Herbstsemester 2012/13. Slides als Skript im
Modul BTI7083“. 15. Sep. 2012.
[Bru13] Roland Bruggmann. ooaduc.sty - LATEX-Style File for Use Cases in Object-Oriented Analysis and
Design. 2013. URL: https://gist.github.com/brugr9/5178487.
[Gam95] E. Gamma. Design Patterns – Elements of Reusable Object-Oriented Software. Addison-Wesley, 1995.
ISBN: 0-201-63361-2.
[GraphML] GraphML-Team. The GraphML File Format. URL: http://graphml.graphdrawing.org/.
[GT02] Michael Goodrich und Roberto Tamassia. Algorithm Design. John Wiley und Sons, Inc., 2002.
[Hof11] Dirk W. Hoffmann. Theoretische Informatik. Hanser, 2011.
[JUNG] The-JUNG-Framework-Development-Team. Java Universal Network/Graph Framework JUNG. URL:
http://jung.sourceforge.net/.
[Lar04] Craig Larman. Applying UML and Patterns: An Introduction to Object-Oriented Analysis and Design
and the Unified Process. Third. Prentice Hall, 2004. ISBN: 0131489062.
[net3] Roberto Tamassia, Michael Goodrich und Eric Zamor. Generic Method Pattern – net.datastructures.
URL: http://net3.datastructures.net/.
[Sie15] Florian Siebler. Design Patterns mit Java – Eine Einf¨uhrung in Entwurfsmuster. Hanser, 2015.
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 25

Abbildungsverzeichnis
2.1 Vorlage f¨ur das Layout von Knoten und Kanten . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Use Cases Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3 Domain Model Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1 Paketdiagramm f¨ur das Application-Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2 Klassendiagramm der Stroke-Palette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3 Klassendiagramm des Layout-Graphen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.4 Mockup f¨ur Zust¨ande und Layout von Knoten und Kanten . . . . . . . . . . . . . . . . . . . . . . 11
3.5 Klassendiagramm der Zustandsmaschine f¨ur Kanten am Beispiel eines VisitedEdgeState . . . . . . . 12
3.6 Klassendiagramm der Zustandsmaschine f¨ur Knoten am Beispiel eines VisitedVertexState . . . . . . 12
3.7 Klassendiagramm der Schnittstelle f¨ur den traversierbaren Graphen . . . . . . . . . . . . . . . . . . 13
3.8 Klassendiagramm des traversierbaren Graphen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.9 Klassendiagramm der Algorithm-Schnittstelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.10 Klassendiagramm eines Algorithm am Beispiel von BFS . . . . . . . . . . . . . . . . . . . . . . . . 14
3.11 Klassendiagramm von Traversal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.12 Paketdiagramm f¨ur die Applikation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.13 Zustandsdiagramm der Zustandsmaschine Parameter . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.14 Zustandsdiagramm der Zustandsmaschine Animation . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.15 Zustandsdiagramm der Zustandsmaschine Step-by-step . . . . . . . . . . . . . . . . . . . . . . . . 17
3.16 Mockup der App-Control als verschachteltes Zustandsdiagramm . . . . . . . . . . . . . . . . . . . 17
3.17 Klassendiagramm der Zustandsmaschine App-Control am Beispiel des Zustandes AnimationPlaying 18
4.1 Die graphische Benutzerschnittstelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.2 Men¨u Datei ¨offnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.3 Dialog Datei ¨offnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.4 Popup zum Editieren eines Knotens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.5 Popup zum Editieren einer Kante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.6 Popup zu Editieren des Kantengewichtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.7 Dropdown Algorithmus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.8 Resultat Algorithmus Kruskal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.9 Animation Algorithmus Dijkstra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.10 Resultat Algorithmus Dijkstra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.11 Algorithmus BFS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.12 Algorithmus DFS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Tabellenverzeichnis
2.1 Actors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
UC1: Open Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
UC2: Select Algorithm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.1 ¨Ubersicht der m¨oglichen Zust¨ande von Knoten und Kanten sowie deren Zustands¨uberg¨ange . . . . 11
3.2 ¨Ubersicht der m¨oglichen Zust¨ande von Knoten und Kanten sowie deren Zustands¨uberg¨ange als Steps 15
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 26

Selbst¨andigkeitserkl¨arung
Ich best¨atige, dass ich die vorliegende Arbeit selbstst¨andig und ohne Benutzung anderer als der im Literaturver-
zeichnis angegebenen Quellen und Hilfsmittel angefertigt habe. S¨amtliche Textstellen, die nicht von mir stammen,
sind als Zitate gekennzeichnet und mit dem genauen Hinweis auf ihre Herkunft versehen.
Ort, Datum: Biel/Bienne, 15.02.2014
Vorname, Name: Roland Bruggmann
Unterschrift: ......................................
Desktop-Applikation zur Visualisierung von Graphenalgorithmen, Version 2.0, 15.02.2014 27