Projekt: Visualisierung von Sortieralgorithmen

Im Rahmen des Softwarepraktikums an der Fachhochschule Wedel wurde uns die Aufgabe gestellt, eine Demonstration von Sortieralgorithmen unter Verwendung des Flex 2.0-Frameworks zu realisieren. Die 'Sort-Demo' sollte mindestens alle Funktionalitäten der Vorgängerversion (mit TCL geschrieben) enthalten. Also 12 Sortieralgorithmen, variable Array-Größe, variable, zeitversetzte Abarbeitung des Sortieralgorithmus und natürlich eine grafische Darstellung.

Zu Projektbeginn ging es zügig los. Schnell organisierten wir uns erstmal Informationsmaterial zu Thema Flex 2.0 und Actionscript. Dabei war vor Allem die Lern-DVD "Total Training for Adobe Flex" sehr hilfreich. Zuerst bestand die Frage, wie man das Projekt übersichtlich strukturieren kann. Wir beschlossen, alle GUI-Elemente in die Haupt-XML-Datei zu integrieren und alle Klassen und Funktionen in Actionscript-Klassen auszulagern. Dabei wollten wir zu Anfang alle Sortieralgorithmen in eigene Actionscript-Klassen auslagern, was sich im Nachhinein allerdings als unpraktisch herausstellte, weswegen diese Idee später wieder verworfen wurde.

Als Lern-Material benutzten wir natürlich Google, die o.g. Lern-DVD und Bücher. Die Sortieralgorithmen waren ja schon algorithmisch vorgegeben. Die Schwierigkeit bestand nun darin, erst einmal die TCL-Scripte in Actionscript zu übersetzen. Die TCL-integrierte Array-Schreib/Lese-Überwachungsfunktion gab/gibt es in Actionscript nicht, weswegen Variablen dafür angelegt werden mussten. Wir beschlossen, das Programm in 5 Hauptklassen einzuteilen:

Diese Klasse wird dazu verwendet, alle AS-relevanten Initialisierungen vorzunehmen. Weiterhin fängt die Klasse Benutzereingaben ab und leitet die entsprechenden Eingaben an die weiteren Klassen weiter. Alle anderen Klassen werden über Sort_Demo instantiiert. Weiterhin kümmert sich die Klasse darum, welche Benutzereingaben momentan möglich sind und gibt entsprechendes Feedback bei Falscheingaben. Sort_Demo kümmert sich weiterhin um die Flex-spezifische graphische Darstellung des Arrays. Jedes Array wird letztendlich durch Punkte realisiert, die vom Typ 'Sprite' sind. Sprite ist als Klasse schon in AS vorhanden; sie hat einen x-Punkt, einen y-Punkt und verfügt über rudimentäre graphische Funktionen wie das Malen eines Rechtecks. Die einzelnen Sprites werden dann von der Klasse Sort_Demo an das Canvas (der Bereich, in dem gemalt wird) 'angefügt'. Somit werden die Punkte nur auf dem Canvas gezeichnet, und nicht etwas auf der gesamten Fläche. Verwirrend war zu Anfangs die Feststellung, dass an das Canvas nur eine Wrapper-Klasse anfügen kann und die Sprites nicht direkt an das Canvas anfügen kann.

- Canvas_Array

Diese Klasse enthält das zu sortierende Array. Für jeden Punkt des Arrays wird ein Objekt der Unterklasse 'Cancas_Punkt' instantiiert, welches über die Informationen Wert, Stelle, Farbe verfügt. In der Klasse Canvas_Array sind außerdem die wichtigsten Funktionen enthalten. Z.B. 'Scrable', welches das Array durchwürfelt (und dabei eine Kopie macht, um das Zufallsarray später bei Benutzerwunsch wiederherstellen zu können). Ebenfalls sind alle Mal-und Löschfunktionen, Funktionen zur Berechnung der Pixelposition auf dem Canvas sowie alle Sortieralgorithmen in dieser Klasse. Bei Aufruf der Sortierfunktion wird ein Switch-Statement ausgeführt, welches gemäß der Benutzerwahl den zugehörigen Sortieralgorithmus ausführt. Hierbei gibt es wegen fehlender Threading-Funktionalität in Flex eine Besonderheit. Zu Anfang dachten wir, wir könnten die Sortierfunktionen einfach durch ein 'delay' unterbrechen! Das ging aber wegen o.g. fehlender Threading-Funktionalität nicht. Die Aufgabenstellung erforderte es aber, die Sortierung des Arrays zeitversetzt grafisch darzustellen. Also waren wir gezwungen, einen Stack zu bauen, auf dem alle Malfunktionen gepusht werden, Dieser Stack wird zu Anfang auf 0 gesetzt, dann mit einem Mal mit allen Malfunktionen gefüllt und anschließend zeitversetzt abgearbeitet. Eine etwas unelegante und resourcenintensive Möglichkeit, aber nach unserem Verständnis im Moment die einzige Möglichkeit, eine zeitversetzte Darstellung der Sortieralgorithmen zu realisieren.

In der Klasse Canvas_Punkt sind alle Informationen eines Punktes gespeichert. Insbesondere also das Sprite, der Wert, die Farbe und die Position, die der Punkt im Array einnimmt. In dieser Klasse sind alle Funktionen zur Darstellung und zur Übergabe des Punktes an aufrufende Klassen realisiert.

- Timer_Punkt & Timer_Stack

Die Klassen Timer_Punkt & Timer_Stack mussten erstellt werden, da das Verwenden eines Zeichnen-Stacks notwendig wurde. Wegen fehlender Threading-Funktionalität müssen alle Zeichenoperationen auf einen Stack gepusht werden, der anschliessend von einem Timer abgearbeitet wird. Genau dafür ist die Klasse Timer-Stack da. Die Klasse wird von der Klasse Canvas_Array instanziiert. Sie enthält ein Array von Timer_Punkt-Elementen, die wiederum Informationen wie zugehöriges Sprite, Wert, Farbe und die Position des Arrays enthalten. In der Klasse Timer-Stack gibt es Funktionen zum Stack-Aufbau und zur Stack-Abarbeitung. Dabei wird immer geprüft, wieviele Elemente noch auf dem Stack vorhanden sind und ob die Stack-Abarbeitung abgeschlossen ist. Weiterhin enthält die Klasse Schnittstellen-Funktionen zur Kommunikation mit den aufrufenden Klassen.

Insgesamt haben wir also den Umgang mit Flex 2.0 gelernt und nebenbei auch einen kleinen Einblick in die Scriptsprache TCL erhalten. Flex ist ein mächtiges Framework, mit dem sich sehr viele Aufgabenstellungen realisieren lassen. Hinzu kommt auch noch der einfache Einsatz der GUI-Elemente, von denen Flex 2.0 jede Menge bietet. Man kann mit wenigen Mausklicks ein fertiges GUI-Grundgerüst bauen, das zudem auch noch sehr stylisch aussieht. Man muss sich gar nicht mehr um das Design kümmern. Allerdings hat Flex 2.0 auch einige Haken. Angesprochen wurde bereits die - in unseren Augen - fehlende Threading-Funktionalität. Vielleicht ist ja so eine Funktionalität vorhanden; gefunden haben wir sie jedenfalls nicht. Dabei haben wir viel im Internet gesucht und sämtlich Foren zu dem Thema 'durchwühlt'. Außerdem gab es Probleme mit dem Aktivieren / Deaktivieren von Menüelementen. Laut Adobe kann man einzele Menüelemente mit gewissen Operationen auf der XML-Datenstruktur manipulieren; diese Möglichkeit funktionierte bei uns jedoch nicht. Daher mussten wir die Problematik fehlerhafter Benutzereingaben mit AlertBoxen umschiffen. Wenn z.B. der Benutzer eine andere Arraygröße wählt und das Array dann mit dem alten Wert füllen will (welcher ja u.U. mehr oder weniger Array-Elemente enthält), dann wird eine AlertBox aktiv, welche den Benutzer über die Falscheingabe informiert. Software-ergonomisch wäre es sicherlich sinnvoller gewesen, die entsprechenden Menüpunkte von vorhherein zu deaktivieren.

Ein weitere Vorteil von Flex 2.0 ist sicherlich die Modularität. Alle GUI-Elemente werden übersichtlich in einer XML-Struktur gespeichert; das Programm kann problemlos in AS-Klassen ausgelagert werden. Es können Datenbanken, Textdateien und auch andere Flex-Dokumente eingebunden werden. Flex 2.0 ist also insgesamt ein sehr wirkungsvolles Werkzeug für Webanwendungen.