GUI Creator
GUI steht für "Graphical User Interface", ein Feature, auf das eine anwenderfreundliche, moderne Software kaum noch verzichten kann: Buttons, Scrollbars, Textfenster, Checkboxen und viele andere Elemente, die es zunächst nur bei Apple-Produkten gab und dann von Microsoft unter dem Begriff "Windows" übernommen wurden. Leider gibt es jedoch auch heute noch Software, die trotz ihrer hohen Leistungsfähigkeit immer noch ohne diese Attribute auskommt. Dazu gehört die Programmiersprache Processing, die an anderen Stellen dieser Webseite bereits beschrieben wurde. Der an ein einfaches Textprogramm erinnernde Editor hat zwar den Vorteil, dass er gut zu bedienen ist und man unkompliziert mit ihm arbeiten kann, aber wenn die Oberfläche eines Processing-Programms die oben erwähnte, grafische Benutzeroberfläche aufweisen soll, muss jeder einzelne Button "zu Fuß" programmiert werden - also durch die Angabe seiner Größe, Position und Farbe als Anweisung im Programmlisting.
Auch die Abfrage, ob ein Button mit der Maus angeklickt wurde oder nicht, muss über eine if-Bedingung mit Angabe der betreffenden Koordinaten erfolgen. Kein Wunder, dass die Programmierung grafischer Oberflächen mit mehreren Buttons und anderen grafischen Elementen in Processing relativ umständlich ist und sehr viele zusätzliche Programmzeilen erfordert. Das ist schade, dann Processing besitzt extrem schnelle Grafik-Funktionen, mit denen sich ungeahnte und interessante Möglichkeiten eröffnen.
Um hier Abhilfe zu schaffen, habe ich einen in Visual-Basic geschriebenen "Grafik-Compiler" entwickelt. Mit diesem Programm lassen sich, wie im VB-Editor selbst, Elemente einer grafischen Benutzeroberfläche per Drag and Drop von einer Toolbar abrufen und auf einer in ihrer Größe variierbaren Fläche ablegen. Diese Fläche wird dann später zur grafischen Oberfläche des geplanten Processing Programms. Das Bild oben zeigt eine auf diese Weise aufgebaute Oberfläche für den an anderer Stelle beschriebenen Processing-Zufallsgenerator. Ist die Oberfläche fertig, wird sie mit "Save Vector Data" gespeichert (in Form von drei gesonderten Dateien mit vorgegebenen Endungen). Mit einem speziellen Processing Programm werden die Daten, die die Position, die Eigenschaften der Objekte und die Beschriftung bestimmter Objekte enthalten, von Processing aus in verschiedene Arrays geladen. Der Processing Code liest diese Arrays und erzeugt in mit dem Auge nicht mehr nachvollziehbaren Sekundenbruchteilen die fertige Oberfläche.
Die zuvor individuell beschrifteten Buttons lassen sich anklicken und erzeugen dabei als Feedback den entsprechenden, optischen Eindruck. In den angeklickten Textfenstern erscheint ein blinkender Cursor, der auf die Eingabe von Text wartet, und die Scrollbarsr lassen sich mit der Maus verschieben und geben dabei entsprechende Werte an das Programm zurück. Die Grafikfenster sind durch die "Second-Applet" Methode so beschaffen, dass die Grafik, wenn sie zu groß wird, automatisch hinter dem Fenster verschindet und nicht auf der Oberfläche weiter gezeichnet wird - ein wichtiges Feature, dass ohne Second-Applet sehr umständlich zu programmieren wäre.
Zu allen Buttons und anderen Objekten kann der Anwender einen einfachen, leeren Funktionsrumpf schreiben, zu dem beim Anklicken eines Objekts gesprungen wird. In diese leeren Funktionen kann der Anwender jeden beliebigen, gültigen Processing Code eingeben, der auch in jedem beliebigen anderen Programm funktioniert.
Durch eine spezielle, programmspezifische Syntax ist es außerdem möglich, durch Code in den Button- oder Scrollbar-Funktionen Zahlen oder Texte in Textfenstern erscheinen zu lassen oder die Farben der vom GUI-Creator erzeugten "Leuchtdioden" zu beeinflussen.
Kurz und gut: Das Programm bietet zwar nicht allzu viele Objekte, doch mit den wenigen vorhandenen Elementen lassen sich auf einfache Weise gut funktionierende, elementare grafische Oberflächen aufbauen.
Programm-Bedienung
Das Programm stellt 6 verschiedene Objekte zur Verfügung:
- Buttons,
- Textfenster,
- horizontale Scrollbars,
- Labels,
- Leuchtdioden,
- Grafikfenster und
- Flächen (rechteckig), um zusammengehörende Elemente optisch hervorzuheben.
Um ein Objekt auf der zukünftigen Benutzeroberfläche abzulegen, wird es angeklickt. Daraufhin erscheint es auf der Oberfläche und kann per Maus an seinen Bestimmungsort verschoben werden.
Angeklickte Objekte werden mit der Align-Funktion rechtsbündig, linksbünding oder auf gleicher Höhe (oben bzw. unten bündig) angeordnet.
Das zuerst angeklickte Objekt dient dabei als Referenz.
Um mehrer Objekte zu aktivieren, muss beim Anklicken die Shift-Taste gedrückt gehalten werden, und zwar bereits beim ersten Klick.
Mit Move können ein oder mehrere Objekte pixelweise oder in einstellbaren Sprungweiten verschoben werden.
Mit Same Size, Same width oder Same height können Objekte in ihrer Größe aneinander angeglichen werden. Auch in diesem Falle ist das zuerst angeklickte Objekt das Referenzobjekt.
Verschiedene, aufeinander abgestimmte Farbpaletten vereinfachen die harmonische Farbgebung der Oberfläche (Palette 1 ...4). Da diese natürlich Geschmacksache ist, lassen sich die Farben aller Objekte auch stufenlos über eine Property-Page individuell mittels des Windows-Color-Editors bestimmen.
Die Farbänderung nach Palettenwechsel gilt erst für die ab dann erstellten Objekte. Um auch zuvor erstelle (angeklickte) Objekte mit der neuen Farbe zu versehen, genügt ein Klick auf:
Pal, Col. to obj. (Palette-Color to object).
Mit Copy Color kann die Farbe eines als erstes angeklickten Objektes auf ein als zweites angeklicktes Objekt (bei gedrückt gehaltener Shift-Taste) übertragen werden.
Nach einem Klick auf Select All werden alle Objekte auf der Oberfläche markiert, um sie zum Beispiel zu löschen oder zu verschieben.
Mit Select Category werden zum Beispiel nur alle vorhandenen Objekte des Typs eines zuvor angeklickten Objektes markiert. Ist z.B. ein Button angeklickt, so werden damit alle Buttons auf der Oberfläche aktiviert.
Bring to rear - Bring to front bringt Objekte in den Hintergrund/Vordergrund, so dass sie von anderen Objekten überdeckt werden oder selbst andere Objekte überdecken.
Delete Objekt löscht ein angeklicktes Objekt. Das Gleiche kann auch mit einem Druck auf die Escape-Taste bewirkt werden.
Property Page
Bei einem Klick auf Property Page erscheint das individuelle
Eigenschaftsfenster des betreffenden Objektes (Property Page), in welchem man unter anderem die Haupt- und die Rahmenfarben eines Objektes ändern, Texte eintragen und Position und Größe von Objekten bestimmen kann. Das Bild zeigt die Property Page eines Buttons, in der sich auch dessen Beschriftung editieren lässt.
Unterer Rand (Bild oben: Linke Hälfte, Bild unten: Rechte Hälfte)
Back Color, Grid Color: Mit einem Klick auf die farbigen Kästchen wählen Sie die Standardfarbe für Gitter und Hintergrund aus. Ein Klick auf die Buttons öffent die
Windows-Standard-Farbeinstellung.
Object Nr.: Beim Anklicken eines Objektes werden die Zahlen 1 bis 7 angezeigt, je nachdem, um welches Objekt es sich handelt. Außer dem Schieberegler können andere Objekte bei anderer Farbgebung verwechselt werden.
Absolute Range: Zeilennummer des Objekts im zu speichernden Objektdaten-Array (siehe: Check Data)
Range in Group: Um das wievielte Objekt der Gruppe Button (Textbox, Label usw.) handelt es sich bei einem angeklickten Objekt.
Check Data: Anzeige der Matrix der Vektordaten der in einer Datei enthaltenen Objekte in gesondertem Pop-Up-Fenster.
Grid: Ein-Ausschalten des Gitters
Processing Data: Das Ziel des Programms soll es einmal sein, einen fertig anzuwendenden Processing Code auszugeben. Dies ist zurzeit nicht möglich. Der Button zeigt lediglich den Quellcode des Rumpfprogramms an.
Open/Save Vector-Data: Öffnen und Speichern einer erstellten Oberfläche in einem Standard-Browserfenster.
Renumber: Nicht aktiviert
Unterer Rand (nicht abgebildet)
Verschiedene Fehlerkorrektur-Buttons und Textfelder am unteren Rand:
Bei Start setzt das Programm die Nummern der Objekte standardmäßig auf 1. Der erste eingesetzte Button erhält also die Nummer 1 usw. So weit, so gut, doch problematisch wird das Ganze, wenn man eine bereits existierende Oberfläche erweitern und z.B. einen zusätzlichen Button hinzufügen möchte. Der neue Button erhält ebenfalls die Nummer 1, was zu Chaos innerhalb der Datei führt: Unter anderem wird der Text des "echten" Buttons 1 mit "Button 1" überschrieben, so dass es plötzlich zwei Buttons mit der Nummer 1 gibt.
Die vorläufige Reparatur des Fehlers besteht darin, dass es für jeden Objekttyp nun ein Kästchen gibt, in das man, wenn man ein neues Objekt hinzufügen möchte, dessen Nummer einträgt und den Button daneben anklickt.
Beispiel: Meine existierende Oberfläche hat schon 7 Buttons und ich will nun einen achten Button hinzufügen.
Ich lade die Datei, trage in das Textfeld "Set Button #" die Zahl 8 ein und klicke auf den betreffenden Button. Wenn ich nur einen neuen Button vor der Toolbar abrufe, hat dieser automatisch die Nummer 8. Das mag unpraktisch erscheinen, aber es funktioniert und erspart mir erst einmal die lange Suche nach einer Möglichkeit zur kompletten Vermeidung des Fehlers.
Bild unten: Rechte Hälfte des unteren Randes der Oberfläche.
Bild oben: Check-Data-Fenster:
Spalte 1: Durchlaufende Nummerierung
Spalte 2: Objekttypen in der Reihenfolge ihrer Erzeugung (8 = Hintergrund, 1 = Button
Es folgen die Koordinaten, Eigenschaften und Farben.
Gesonderte Erklärung folgt.
