project: visualization of sorting algorithms

During a class at university, i had to implement a visual demonstration of several sorting algorithms with the Flex 2.0 framework from Adobe. The program called 'Sort-Demo' had to contain at least all functionalities of the predecessor which was written with TCL. It had to contain 12 sorting algorithms, variable array-size, variable, time-delayed execution of the algorithm and, naturally, a graphical user interface.

To summarize, the program displays randomly generated numbers, which are then sorted by the selected sorting algorithm. That way, the user can compare the different sorting algorithms visually.

At the beginning of the project, we made good progress. We gathered different info materials about Flex 2.0 and Actionscript. On this note, the DVD 'total training for Adobe Flex" was very helpful. The first question was how to organize the project in a clear fashion. We decided to integrate all GUI-elements into the main XML file and to roll out all classes and functions into Actionscript classes. At first, we intended to roll out all sorting algorithms into separate Actionscript classes, but that idea proved to be unpractical.

We used google, learning DVDs and books for getting accustomed to the project. The sorting algorithms were already in existence. The challenge was translating the TCL-scripts into Actionscript. TCL contains a security function, which prevents buffer overflow while reading and writing arrays. That function didn't, however, exist for Actionscript. That's why we had to create some additional variables first. Anyway, we decided to break down the program in 5 major classes:

- Sort_Demo

This class is used to initialize all AS-relevant variables. In addition, this class catches all user input and passes it on to the other classes. All other classes are being instantiated by this class. Also, Sort_Demo watches what user input is currently possible and prevents potential wrong input. It gives feedback when the user tries to execute a function which is currently not available.  Furthermore, Sort_Demo contains the Flex 2.0-specific graphical display of the array. Every array is represented by a point, which is an instance of the class 'Sprite'. 'Sprite' is already an existing Actionscript class, it has a x-point, an y-point and several, basic graphical functions like painting a rectangle. All 'Sprites' will then be added to the canvas by the class 'Sort_Demo'. Sprites can not be directly added to the canvas, but have to be wrapped into a wrapper-class. That was a little confusing at first.

- Canvas_Array

This class contains the array, which will be sorted later on. For every point of the array, an object of the type 'Canvas_Punkt' will be instantiated, which contains information like value, position, colour, etc.  The class 'Canvas_Array' also contains important functions like 'scramble' which scrambles the contents of the array and makes a backup-copy, in case the user wants to undo the sorting later on. Also, the class contains functions for painting and erasing, calculation of the pixel position on the canvas and all sorting algorithms. When the sorting function is executed by the user, the sorting function loads a switch statement and loads the according algorithm that the user chose. On that note, the sorting algorithms contains a little hack. Because Actionscript does not contain any threading functionality. we had to implement a little workaround. The problem is that the sorting function does not stop, once the sorting is executed. But we needed a delay, to paint the sorting point by point; so the user can understand the process. To summarize, we had to do the sorting first. The visualization starts after the sorting is already finished. We did that by implementing a stack for the graphical paint procedure. All painting tasks are pushed on that stack. When the sorting algorithms is finished, the program then begins to work on the stack and displays the points in a time-delayed fashion. The solution is not very elegant and rather wasting resources, but in our opinion the only way to implement a time-delayed painting procedure with the current version of Actionscript.

- Canvas_Punkt

The class 'Canvas_Punkt' contains all information about a point. In detail, it contains the according sprite, value, colour and position of the point. In addition, the class contains all functions related to the graphical visualization of the point. It also contains an interface to pass information on to upper classes.

- Timer_Punkt & Timer_Stack

The classes 'Timer_Punkt' and 'Timer_Stack' had to be created to implement the time-delayed painting of the paint stack. Because of the not-existing thread-functionality, all painting procedures had to be pushed onto a stack, which would later be processed by a timer. That's exactly what the class 'Timer-Stack' is there for. The class is instantiated by 'Canvas_Array' and contains an array of 'Timer-Point' elements, which contains information like sprite, value, colour, etc. The class 'Timer-Stack' contains functions about the structure and processing of the stack. Internally, the according function always watches, how many elements are still on the stack and if the stack is already empty. In addition, the class contains an interface to communicate with other classes.

To summarize, we learned the handling of the Flex 2.0 framework and gained a little insight into the script language 'TCL'. Flex is a mighty tool and many tasks can be accomplished with it. To make it even better, the GUI is rather substantial, really simple and fully automated. With a few mouse clicks, the developer is able to construct a GUI which is ready-to-use and very stylish. On the other hand, Flex still has some issues. As already mentioned, the -in our opinion- missing threading functionality. Maybe such a functionality exists, but we couldn't find it after intensive research. Also, there were some problems concerning the enabling / disabling of menu entries. We read a lot on the official Adobe forums, and officially, it is possible to manipulate menu entries via the XML-file which contains the menu. Anyway, we were not able to do that. That's why we had to implement a workaround with 'alert-boxes'. So, when the user tries an action which is not allowed, he will be alerted by an alert-box. From the standpoint of usability, it would have been certainly a lot better to disable the menu entries in the first place

Another clear advantage of Flex 2.0 is the modularity. All GUI-elements are orderly arranged in one XML-file; the programm can be rolled out into Actionscript-classes without much effort. Lots of different files can be directly integrated: databases, textfiles, other Flex documents and lots more! To summarize, Flex 2.0 is a very powerful tool for creating web-based applications.