Home User Guide Bilder Download Dokumentation


Diese Seite gliedert sich in folgende Punkte
Allgemeines
Package Explorer
Appearance und Statement Panel
Editor Panel
Kameraeinstellungen

Allgemeines:

Wird im Programm ein Projekt importiert, sieht man CodeVis im folgenden Erscheinungsbild:



Das Programm ist in drei Panels unterteilt:
- Im linken Panel befindet sich oben der Package-Explorer, in der Mitte das Appearance-Panel und darunter das Statements-Panel.
- In dem rechten oberen Panel befindet sich der Canvas in dem der Quelltext visualisiert wird.
- Rechts unten befindet sich das Editor-Panel, in dem ein einfacher Texteditor integriert ist.

Weiters existiert ein Menü mit den Menüpunkten 'File' und 'View'. Im Punkt 'File' befinden sich folgende Unterpunkte:
'Import Project' ermöglicht das Laden eines ganzen Projektes in das Programm, vorrausgesetzt in dem Projektordner befindet sich ein Unterordner mit dem Titel 'src', der den Quellcode enthält.
Mit 'Open File' kann eine einzelne Datei in das Programm geladen werden.
Mithilfe des Menüpunkts 'Save File' können Dateiänderungen, die im Editor gemacht wurden, gespeichert werden. Nach dem Speichern wird die Anzeige der Datei im Canvas aktualisiert.
Mit den Punkten 'Open Statement Look' und 'Save Statement Look' können die vom Benutzer festgelegten Farben für Statements gespeichert und geöffnet werden.
Die Unterpunkte des Menüpunkts 'View' werden im Absatz Kameraeinstellungen erklärt.

Package Explorer:

Lädt der Benutzer ein Projekt in das Programm, so öffnet sich im linken oberen Panel der Package Explorer. Dieser stellt die im Projekt enthaltenen Packages und Java-Dateien in Baumform dar.

Durch einen Klick auf ein Package wird das selektierte Package im Canvas gezeichnet und im Editor-Panel werden die Dateien, die in diesem Package enthalten sind, in Tabform angezeigt. Durch einen einfachen Klick auf eine Java-Datei wird das entsprechende Tab im Editor-Panel aktiviert und der Benutzer sieht den Quellcode der selektierten Datei. Im Canvas wird über jede einzelne Datei der zugehörige Dateiname angezeigt. Der Dateiname einer selektierten Datei wird blau unterlegt.

Durch einen Doppelklick auf eine Datei, wird diese im Canvas ein- bzw. ausgeblendet. Um anzuzeigen, dass eine Datei ausgeblendet ist, wird im Icon der entsprechenden Datei links unten ein kleines X angezeigt (im Bild ist dies beispielsweise bei der Datei CodeRenderer.java der Fall).

Appearance und Statement Panel:


 Diese zwei Panels bieten die grundlegende Funktionalität von CodeVis: Die Visualisierung von syntaktischen Einheiten. Dabei wird der Sourcecode gerendert und farbige Rechtecke, die unter dem Quelltext liegen, repräsentieren syntaktische Konstrukte.

Im Panel Appearance hat der Benutzer die Möglichkeit die Farbe des gerenderten Quellcodes zu verändern in dem er auf das quadratische Panel links neben dem Label 'Text' doppelt klickt. Danach wird ein Fenster geöffnet, in dem er eine neue Textfarbe selektieren kann. Weiters kann er Text mithilfe der Checkbox neben dem Text-Label ein- und ausblenden. Über rechtsliegenden Regler kann die Transparenz des Textes festgelegt werden. Weiters kann die globale Darstellungsart für alle gerenderten Rechtecke geändert werden. Links neben dem Label 'Rectangles können ebenfalls über eine Checkbox alle Rechtecke angezeigt bzw. versteckt werden. Mit dem rechts daneben liegenden Regler kann die Transparenz für alle Rechtecke verändert werden.

Die Darstellungsart für ein einzelnes syntaktisches Konstrukt kann im Panel 'Statements' festgelegt werden. Dies geschieht ähnlich wie beim Quellcode: Über eine Checkbox können die Rechtecke, die eine syntaktische Einheit repräsentieren ein- und ausgeblendet werden. Durch einen Doppelklick auf das quadratische Panel rechts neben dieser Checkbox wird ein Dialog geöffnet, in dem der Benutzer die Farbe der Rechtecke verändern kann.

Editor Panel:


Im Editor Panel werden die einzelnen Dateien des selektierten Packages angezeigt. Für jede Datei existiert ein Tab, dessen Inhalt ein einfacher Texteditor ist. Wird ein Tab angeklickt, so wird die entsprechende Datei im Package Explorer selektiert. Wird die Datei im Package Explorer als sichtbar angezeigt, so wird sie auch im Canvas, wie oben beschrieben, gekennzeichnet. Über den Menüpunkte 'File' und 'Save' kann die gerade geöffnete Datei gespeichert werden.

Weiters besteht die Möglichkeit eine einzelne syntaktische Einheit im Editor auszuwählen und diese im Canvas besonders hervorzuheben:
Dazu muss der User den Cursor innerhalb der syntaktischen Einheit platzieren. D.h. um beispielsweise eine Klasse auswählen zu lassen, muss sich der Cursor zwischen der ersten und der letzten Zeile der Klasse befinden. Dann genügt ein Klick auf den Button 'Show Statement' und das gewählte Rechteck dieses syntaktischen Konstruktes wird im Canvas mit einem weissen Rahmen umrahmt. Weiters wird die Transparenz von allen anderen Rechtecken verringert. Im Unterschied zum Appearance Panel wird bei dieser Funktionalität nur ein konkretes syntaktisches Konstrukt (beispielsweise eine for-Schleife) visualisert und nicht jedes Auftreten dieses Konstruktes. Durch einen Klick auf den Button 'Hide Statement' bzw. durch das Selektieren einer anderen Datei wird der Modus beendet und alle Rechtecke in der vorhergehenden Form dargestellt. Damit der Benutzer auch im Editor erkennen kann, welche Zeilen zu dem selektierten Konstrukt gehören, wird der Hintergrund dieser Zeilen im Editor türkis eingefärbt. Ein Screenshot für diese Funktionalität kann hier angesehen werden.

Kameraeinstellungen:

Nachdem eine Datensatz geladen wurde besteht die Möglichkeit, die Blickrichtung zu verändern. Dies erfolgt interaktiv durch Benutzereingaben über Maus und Tastatur oder über den Menüpunkt 'View'.

Folgend sind die möglichen Veränderungen der Blickrichtung, die Eingabe über Tastatur und Maus, sowie die äquivalenten Punkte im Menüpunkt 'View':
Operation: Maus-/Tastatureingabe: Menüpunkt:
Zoom-In Cursortaste 'Up' / Mausscrollrad nach vorne drehen Zoom-In
Zoom-Out Cursortaste 'Down' / Mausscrollrad nach hinten drehen Zoom-Out
Bewegung in xy-Ebene 'Shift'-Taste gedrückt halten und draggen mit der Maus -
Ansicht auf Defaulteinstellung setzen 'Strg'- und '0'-Taste Reset Canvas
Heranzoomen der aktiven Datei 'Strg'- und '1'-Taste Show File