Ein einfaches Beispiel

Eine Mini-Anwendung zeigt Ihnen, wie Sie allein über den Visual Designer eine Anwendung erstellen können: Öffnen Sie über „Datei“ -> „Neu“ eine neue Anwendung und fügen Sie aus der Tool-Palette einen Button, eine ListBox und eine EditBox ein. Mit einem Doppelklick auf den Button erzeugen Sie im PHP-Script automatisch einen Eventhandler namens „Button1Click“, der beim Ausführen der Anwendung durch Klicken auf den Button aktiviert wird. Wechseln Sie nun in den Code Editor (durch Auswahl der Karteikarte „Code“) und geben Sie dort folgenden Befehl ein:

Speichern Sie die Anwendung an einem beliebigen Ort und klicken Sie zum Starten auf den grünen Pfeil. Die drei Objekte erscheinen dann auf dem Bildschirm so, wie Sie sie im Visual Designer angeordnet haben. Geben Sie nun als Beispiel das Wort „Delphi“ in die EditBox ein und klicken Sie auf den Button. Der Eventhandler sorgt dafür, dass der Text aus der EditBox dann automatisch in die ListBox übernommen wird – dort sollte nun auch „Delphi“ erscheinen.

Die Tool-Palette für den Visual Designer greift auf einen integrierten Katalog aus Komponenten zurück, die „Visual Components Library (VCL) for PHP“. Diese beinhaltet standardmäßig zum Beispiel Frames, EditBoxes, Checkboxes, Popup-Menüs usw. Der Entwickler kann jedoch weitere visuelle Komponenten zu der Tool-Palette hinzufügen. Die entsprechenden „Packages“ müssen Sie zuvor im Delphi-Ordner im Unterordner „VCL“ ablegen. Anschließend fügen Sie sie über das Menü „Komponenten“, den Menüpunkt „Packages“ und den Button „Hinzufügen“ in die IDE ein und haben dann in der Tool-Palette Zugriff darauf.

Um möglichst schnell den benötigten Baustein für die Webseite in der reichhaltigen Tool-Palette zu finden, lässt sich diese nun filtern. Dafür müssen Sie nur das Filtersymbol in der Titelleiste der Tool-Palette aktivieren und dann den gesuchten Begriff über die Tastatur eingeben. Die Einträge in der Tool-Palette werden dann sofort automatisch gefiltert. Wer beispielsweise „but“ eingibt, bekommt sofort ausschließlich sämtliche „Button“-Tools angezeigt.

Bereits in den Visual Designer eingefügte grafische Elemente können Sie darin direkt verändern. Beispielsweise können Sie ein Objekt bei gedrückter Maustaste durch Ziehen verschieben, vergrößern oder verkleinern. Befinden sich bereits mehrere Elemente auf der Oberfläche, helfen Ihnen farbige Hilfslinien dabei, diese für ein ansprechendes Layout der Webseite gleichmäßig anzuordnen. Bei gedrückter Maustaste erscheinen blaue Linien, sobald die Objekte rechts- bzw. linksbündig sind. Eine grüne Linie erscheint in der Mitte, wenn die Elemente zentriert angeordnet sind.

Zur visuellen Bearbeitung der Webseite dient außerdem der Objektinspektor im kleineren Fenster unten links. Wenn Sie ein Grafik-Objekt anklicken, zeigt der Objektinspektor Ihnen in einer Liste dessen verschiedene Eigenschaften an. Diese können Sie dort dann direkt modifizieren. Beispielsweise kann man eine neue Beschriftung für einen Button eingeben, oder Schriftarten, -größen oder -farben verändern.