© Janaka Dharmasena, 123RF

In grafischen Programmiersprachen klicken Entwickler ihre Software aus fertigen Bausteinen zusammen. Die dabei praktizierten Ansätze und bereitgestellten Werkzeuge unterscheiden sich stark von denen konventioneller Universalsprachen, wie der Test von einigen kostenlosen Entwicklungsumgebungen zeigt.

Die Idee klingt bestechend: Wie in einem Malprogramm zeichnen Programmierer mit der Maus einen Ablaufplan, den die Entwicklungsumgebung in eine fertige Anwendung verwandelt. So müssen sie weder eine kryptische Sprachgrammatik lernen, noch produzieren sie Syntaxfehler oder Pufferüberläufe. Im Idealfall führt die Entwicklungsumgebung das Programm sogar schrittweise aus, hebt die gerade aktive Komponente optisch hervor und erleichtert so die Fehlersuche.

Obwohl erste grafische Entwicklungsumgebungen schon in den 1960er Jahren entstanden, hat sich die visuelle Programmierung bis heute nicht großflächig durchgesetzt. Gebräuchlich sind lediglich GUI-Editoren oder Rapid Development Tools (RAD), in denen Entwickler die Benutzeroberfläche ihrer Anwendungen zusammenklicken, Beispiele sind Glade [1] und Qt Designer [2].

Am Ende erwecken aber doch erst wieder mühsam eingetippte Codebröckchen die GUI-Elemente zum Leben. Ähnlich limitiert sind Werkzeuge für den Entwurf, allen voran Tools für Unified Modeling Language [3]. Auch sie generieren meist nur ein Codegerüst, das der Programmierer über die Tastatur mit Funktionen füllt.

Wer aber gründlich sucht, findet erstaunlich viele grafische Programmiersprachen (Visual Programming Languages, VPL). Meist liefern ihre Erfinder gleich eine passende Entwicklungsumgebung mit, nur selten entsteht eine VPL am Reißbrett. Zwar ist die Sprache dadurch praxiserprobt, doch muss der Programmierer auch zwingend die zugehörige Umgebung benutzen, die ihre Entwickler meist für ein ganz bestimmtes Anwendungsgebiet konzipieren.

Etoys, Scratch & Co.

Die Entwicklungsumgebung Etoys [4] unterliegt zu Teilen der MIT- und Apache-Lizenz und richtet sich vor allem an Kinder. Sie sollen im Unterricht eigene interaktive Geschichten schreiben oder die Umlaufbahnen der Planeten nachprogrammieren. So will Etoys den Schülern nicht nur das Programmieren schmackhaft machen, sondern ihnen spielerisch auch die Mathematik näher bringen, Wissenschaft anschaulich erklären und den Umgang mit Sprache verbessern.

Bereits vor der Jahrtausendwende von Disney entwickelt, arbeitet die Squeakland Foundation derzeit an Etoys weiter. Wer die Entwicklungsumgebung nicht im Repository seiner Distribution findet, lädt von der Homepage eine “To Go”-Fassung herunter, allerdings nur für 32-Bit-Systeme. Es genügt, das entsprechende Zip-Archiv zu entpacken und dann »etoys.sh« aufzurufen.

Startet er ein neues Projekt, zeichnet der Entwickler zunächst mit den eingebauten Malwerkzeugen zweidimensionale Objekte wie Autos, Straßen oder Häuser. Diese arrangiert er dann auf einer weißen Leinwand zu einer kleinen Szene. Klickt er ein Objekt mit der rechten Maustaste an, helfen mehrere kleine Symbole (Abbildung 1) dabei, es unter anderem zu drehen, in der Größe zu verändern oder im so genannten Beobachter zu öffnen. Dahinter verbirgt sich eine Palette mit zum Objekt passenden Funktionen. Diese setzt der Anwender wiederum per Drag & Drop zu einem Skript zusammen.

Abbildung 1: Im Bild lässt das angezeigte Skript das kleine rote Auto über den Bildschirm fahren, über die eingeblendeten Symbole manipulieren Kinder zudem den großen blauen Stern.

Benötigt eine Funktion Parameter, etwa die Gradzahl bei einer Drehung, stellt der Anwender diese über Mausklicks fest ein. Alternativ darf er auch Variablen erstellen. Etoys bietet sogar eine rudimentäre Versionsverwaltung, die Entwicklungsumgebung selbst basiert auf der Smalltalk-Implementierung Squeak. Von diesem objektorientierten Unterbau bekommt der Anwender nichts mit, erst auf expliziten Wunsch blendet Etoys den Smalltalk-Quellcode ein.

Die Entwickler stellen auf der Webseite eine umfangreiche Dokumentation bereit, hinzu kommen Beispiele sowie kostenlose Lehrvideos (Screencasts). Dennoch dauert das Einarbeiten etwas länger und ist die Bedienung wenig intuitiv.

Für kleinere Kinder bieten sich als Alternativen Scratch [5] oder das darauf aufsetzende Snap [6] an. Beide stellen die Funktionen in Form von bonbonbunten Bausteinen bereit. Über deren Nasen und Einbuchtungen stecken sie das korrekte Programm zusammen. Die einzelnen Codebestandteile heben beide farbig hervor. So strahlen beispielsweise Schleifen in einem dunklen Gelb.

Scratch und Snap sind jedoch als Webdienste ausgelegt. Während sich Snap nur über seine Homepage aufrufen lässt, setzt die Offline-Version von Scratch auf die unter Linux kaum noch lauffähige Runtime-Umgebung Adobe Air.

Eher an Schüler richtet sich die Entwicklungsumgebung Alice [7], die ihren Eleven 3-D-Programmierung (Abbildung 2) näherbringen möchte. Der Fokus liegt hier mehr auf der Objektorientierung.

Abbildung 2: Die meist jugendlichen Benutzer des 3-D-Editors Alice können zum Beispiel einen dreidimensionalen Wolf durch eine selbst entworfene Szenerie laufen lassen.

Die aktuelle Version 3.1 basiert auf Java und installiert sich ungewöhnlicherweise über einen Assistenten. Der saugt knapp 1,2 GByte Daten aus dem Internet, darunter 3-D-Objekte wie Personen und Wohnungsgestände aus dem Computerspiel “Die Sims 2”. Verwenden dürfen Alice-Nutzer diese aber nur für nicht kommerzielle oder akademische Zwecke. Alice’ eigene Lizenz [8] erlaubt einen kostenlosen Einsatz.

Wie bei Etoys ähneln die fertigen Ablaufpläne sehr stark den einfachen, imperativen Programmen, in denen jemand einen Kasten um jede Anweisung gemalt hat. Auf Wunsch zeigt Alice Java-Code an, die Funktionen im Ablaufplan erhalten dann unter anderem Klammern um ihre Parameterliste. Diese Darstellung hilft Schülern, die mit Alice Java lernen.

Fertige Animationen nimmt die eingebaute Screencapture-Funktion auf, als Bonus gibt es eine direkte Anbindung an Youtube. Über die Alice-Homepage erreichen Interessierte eine Vielzahl von Tutorials und Beispiele, für Lehrer gibt es sogar passendes Lehrmaterial.

Blockly

Auf den ersten Blick erinnert das unter der Apache-Lizenz stehende und von Google entwickelte Blockly [9] an Snap oder Scratch. Der visuelle Code-Editor lässt sich in eigene Webanwendungen einbinden und hilft den Benutzern dabei, Makros zu erstellen. Blockly ist eher ein Framework und der mitgelieferte Code-Editor zugleich ein Beispiel für eine Blockly-Anwendung.

Wie in allen anderen Blockly-Anwendungen klickt sich der Entwickler aus den angebotenen Bausteinen der linken Palette das passende Programm zusammen (Abbildung 3). Die unterschiedlichen Kontrollstrukturen tragen verschiedene Farben, Schleifen sind zum Beispiel grün. Mehrere Anweisungen fasst der Benutzer zu Funktionen zusammen, außerdem kann er Variablen erstellen. Blockly setzt aber nur imperative Programme um.

Abbildung 3: Dieses Beispiel aus Blockly zeigt die auf der rechten Seite zusammengeklickte Funktion als Graph an.

Mit Hilfe der visuellen Programmiersprache führt der Entwickler die zusammengeklickten Programme nicht nur aus, sondern übersetzt sie im Hintergrund automatisch in Python-, Dart- und Javascript-Code oder überführt sie in ein XML-Format. Der Editor zeigt den so generierten Code direkt auf den entsprechenden Registern an.

Im Auslieferungszustand kennt Blockly nur wenige Bausteine mit den wichtigsten Grundfunktionen. Eigene Bausteine erzeugt der Coder in einem Editor, der Block-Factory. Links legt der Entwickler das Aussehen des Blocks fest, rechts schreibt er die Logik in den Editor – allerdings in normalem Javascript.

Die Dokumentation von Blocky beschränkt sich auf ein Wiki. Weitere Hilfe liefern die mitgelieferten Beispiele. Sie zeigen, wie man Blockly in die eigene Webanwendung integriert. Nach dem Auschecken des aktuellen Blockly-Quellcodes aus dem Subversion-Repository liegen die Beispiele in den Unterverzeichnissen unter »blockly/apps/« .

Drakon

In Drakon zeichnet der Entwickler den Ablauf seiner Anwendung als Programmablaufplan (Flowchart) auf. Der fertige Plan lässt sich dann direkt als Quellcode in Java, C, C++, Python und viele andere Sprachen exportieren – diesen Eindruck erweckt zumindest die Homepage [10].

Drakon ist jedoch lediglich eine visuelle Spezifikationssprache, mit der Entwickler den Ablauf ihrer Programme skizzieren. Entwickelt haben sie Mitarbeiter des russischen Raumfahrtprogramms, wo sie beim Entwurf von Raketensteuerungen helfen sollte.

Zum Zeichnen der Diagramme stellen die Entwickler den Drakon-Editor bereit, der auch den Quellcode generiert. Letzteres funktioniert nur dann, wenn der Editor in den Elementen des Diagramms die entsprechenden Anweisungen in der gewünschten Programmiersprache vorfindet. Das Ergebnis sieht dann aus wie in Abbildung 4.

Abbildung 4: Der Drakon-Editor erzeugt nur dann Quellcode, wenn der Entwickler in den Elementen des Diagramms die entsprechenden Anweisungen hinterlegt hat.

Drakon ist somit streng genommen keine grafische Programmiersprache, zudem lässt sich der Editor nur extrem umständlich bedienen. Das in Tcl/Tk entwickelte Tool kennt keine Einrastpunkte: Wer ein Element verschiebt, muss folglich auch alle Verbindungslinien per Hand nachziehen. Eine Dokumentation gibt es nur für Drakon selbst, den Editor müssen Anwender auf eigene Faust erkunden, er steht jedoch unter Public Domain.

Tersus

In den bislang vorgestellten Werkzeugen klickt der Entwickler einen Ablaufplan aus einzelnen Befehlen zusammen, wobei selbst beim objektorientierten Alice eine imperative Programmierung im Vordergrund steht. Tersus [11] stellt hingegen den Datenfluss in den Mittelpunkt: In der auf Eclipse basierenden Entwicklungsumgebung bietet eine Palette am rechten Rand Funktionen an, um die Zahlen, Texte oder Listen zu manipulieren. Platziert der Entwickler eine von ihnen auf der Zeichenfläche, erscheint sie dort als Kästchen mit Ein- und Ausgängen.

Das Kästchen für die Multiplikation besitzt beispielsweise zwei Eingänge für die beiden zu multiplizierenden Zahlen und einen Ausgang für das Ergebnis. Verbindet der Tersus-Nutzer die Ein- und Ausgänge dann mit den Ein- und Ausgängen anderer Funktionen, entsteht ein Datenflussdiagramm, wie es Abbildung 5 zeigt. Diese Diagramme kann der Entwickler noch ineinander verschachteln, um aus kleineren komplexe Berechnungen zusammenzusetzen.

Abbildung 5: Tersus arbeitet mit Datenflussdiagrammen und stellt den Datenfluss in den Mittelpunkt. Das hier angezeigte Diagramm berechnet die Fakultät der links hereingeschobenen Zahl.

Das fertige Programm wandelt Tersus in eine Webanwendung um und liefert diese wiederum mit seinem eigenen Tersus-Server aus. Die in der Palette angebotenen Funktionen und Operationen decken in erster Linie die Bedürfnisse von Webentwicklern ab. So gibt es unter anderem eine Anbindung an Datenbanken oder Funktionen zur Authentifizierung und Schlüsselerzeugung.

Die Ein- und Ausgaben erfolgen über Formulare (Views), deren Bestandteile der Entwickler ebenfalls zusammenklickt, wobei wieder die Verschachtelung greift: Zwei nebeneinander liegende Eingabefelder muss der Entwickler in einem Element für eine Zeile unterbringen. Tersus zeichnet die Eingabefelder ebenfalls als einfache Rechtecke. Wer das Endergebnis begutachten will, muss das Programm komplett erstellen und dann starten.

Tersus steht unter der GPLv2, zusätzlich bietet Hersteller Tersus Software auch eine kommerzielle Fassung an. Diese bindet Tersus an kommerzielle Datenbanken wie Oracle an und unterstützt MS-Office-Dateien besser.

GRC, Pd & Co.

Neben Tersus nutzen vor allem Werkzeuge zur Signalverarbeitung sowie Musik- und Multimediaprogramme Datenflussdiagramme. So zieht etwa der Anwender des GNU Radio Companion [12] aus einer Palette einen Sinusgenerator auf die Zeichenfläche und verbindet dessen Ausgang mit dem Eingang eines ebenfalls in der Palette vorrätigen Audio-Ausgangs. Über weitere Bausteine kann er dann Signale verändern und umwandeln (Abbildung 6).

Abbildung 6: Dieser Aufbau simuliert in GNU Radio Companion einen Wählton.

Mit Hilfe des Werkzeugs Pure Data ([13], kurz Pd) schleift der Anwender nicht nur Töne auf die genannte Weise durch mehrere Verarbeitungsstufen, sondern modifiziert auch Video- und Multimediadaten. Im 3-D-Programm Blender nutzen Grafiker Datenflussdiagramme [14], um die fertig gerenderten Bilder nachzubearbeiten. Dabei schalten sie so genannte Compositing Nodes zusammen.

Lava

Die grafische Programmiersprache Lava [15] entstand bereits 2001 am Fraunhofer Institut für Sichere Informationstechnologie, mittlerweile machen andere Entwickler mit dem Projekt weiter. Ähnlich wie bei Drakon heißt die eigentliche Programmiersprache Lava, während die Entwicklungsumgebung auf den Namen Lava Programming Environment, kurz Lava PE, hört. Ihr kompletter Quellcode steht unter der GPLv2.

Das objektorientierte Lava nutzt einen etwas anderen Ansatz als die bisher vorgestellten grafischen Programmiersprachen: Im nächsten Schritt erzeugt der Entwickler mit Hilfe seines Assistenten die in seinem Programm benötigten Klassen. Diese präsentiert die Lava PE in einer Hierarchie (wie in Abbildung 7). Zusammengehörende Klassen lassen sich ähnlich wie unter Java noch einmal zu Packages zusammenfassen.

Abbildung 7: Lava PE stellt die Klassen, Methoden und Eigenschaften in einer Hierarchie dar.

Um die Methoden der Klassen zu implementieren, wechselt der Programmierer in einen Texteditor. In ihm darf er den Quellcode aber nicht per Hand eintippen, sondern klickt sich die Anweisungen mit der Maus aus entsprechenden Paletten zusammen. Die Lava PE achtet automatisch darauf, dass nur syntaktisch korrekte Anweisungen entstehen.

Fügt der Entwickler dem Code beispielsweise über die Palette mit den Kontrollstrukturen eine Foreach-Schleife hinzu, erscheinen Platzhalter an der Stelle der Abbruchbedingung und des Schleifenrumpfs. Diese ersetzt der Entwickler dann mit weiteren Mausklicks. Abhängig vom gerade markierten Platzhalter bieten ihm die Paletten und Ausklapplisten immer nur jene Anweisungen, Variablen und Objekte an, die er in der aktuellen Situation auch einsetzen kann.

Die Entwicklungsumgebung ist allerdings nur sehr umständlich zu bedienen und erschlägt den Entwickler mit unzähligen nichtssagenden Symbolen, was wiederum seine Arbeit verkompliziert und in die Länge zieht. Auf der Haben-Seite steht dem lernwilligen Entwickler mit Lava eine komplette, objektorientierte Programmiersprache bereit. Mit ihr kann er nicht nur Klassen ableiten, es existiert auch ein Signal-Slot-Konzept ähnlich dem von Qt. Darüber hinaus bietet die Lava PE von Hause aus Funktionen zum Refactoring.

Das fertige Programm führt schließlich ein Interpreter namens Lava aus. Zum Entwanzen bietet die Lava PE einen eigenen Debugger auf, in dem sich Breakpoints setzen lassen. Die zum Redaktionsschluss aktuelle Version 0.9.4 lag allerdings nur im Quellcode vor und benötigte zwingend Qt in Version 5.1.1, das jedoch nur neuen Linux-Distributionen beiliegt. Die Dokumentation stützt sich auf die mitgelieferten Beispiele, ist noch lückenhaft und außerdem viel zu gut auf der Homepage versteckt [16].

Fazit

Grafische Programmiersprachen besitzen bislang nur eine eingeschränkte Ausdruckskraft. Wie in einem Lego-Baukasten gibt es feste, vorgegebene Teile, mit denen sich beispielsweise nur eine 3-D-Animation, aber keine Webanwendung basteln lässt. Folglich eignen sich die Werkzeuge und ihre Sprachen nur für ganz bestimmte Einsatzgebiete.

Etoys und Alice erleichtern etwa Schülern den Einstieg in die (3-D-)Programmierung, Blockly dient sich als Makrosprache in eigenen Webanwendungen an. Die Datenflussdiagramme aus Tersus helfen vor allem dann, wenn die erzeugte Webanwendung primär Daten verarbeitet – wie etwa in einer Adressenverwaltung. Darüber hinaus haben sich Datenflussdiagramme in der Signal- und Bildverarbeitung bewährt.

Die Grenzen grafischer Programmiersprachen zeigt Lava auf: So ist die Sprache zwar ähnlich flexibel und mächtig wie Java, der Entwickler muss aber jede Anweisung mühsam zusammenklicken. Drakon beweist wiederum, dass nicht jede als visuell beworbene Programmiersprache tatsächlich eine sein muss.

Es gibt noch einen weiteren Schönheitsfehler: Sieht man von Drakon und dem interpretierten Lava ab, produzieren die Entwicklungsumgebungen keine fertigen Programme. Wer etwa ein in Alice programmiertes Spiel starten möchte, muss sich dazu erst die Entwicklungsumgebung selbst herunterladen. Derzeit besetzen visuelle Programmiersprachen zwar recht erfolgreich Nischen, auf ihren großen Durchbruch müssen Entwickler jedoch weiter warten.