Mit Delphi kann man auch moderne Web Applikationen erstellen. Zum Einsatz kommt das komponentenbasierte Framework TMS Web Core, welches sich nahtlos in die Entwicklungsumgebung integriert. Statt mit HTML, CSS und JavaScript zu kämpfen, stehen ein integrierter Designer und alle Vorzüge der integrierten Entwicklungsumgebung zur Verfügung.
Web Anwendungen sind zunehmend ein Standard – gerade für Geschäftsanwendungen. Sie bieten gegenüber einer klassischen Desktop Applikation in ausgewählten Anwendungssituationen einige Vorteile:
- Installation auf dem Server: Die Installation findet auf dem Server statt. Der Client greift über das Netzwerk mit Hilfe eines Browsers auf die Anwendung zu. Lokal auf dem Client sind – mit Ausnahme von ggf. Plug-Ins – keine Installationen notwendig.
- Stets aktuell: Um eine Aktualisierung muss sich der Benutzer nicht kümmern. Updates werden zentral durch den Administrator auf dem Server installiert und es bedarf keiner Eingriffe auf Seiten des Clients.
- Mehrbenutzerbetrieb: Über Benutzerkonten wird für eine korrekte Zuordnung bei der Datenverarbeitung gesorgt.
- Geringere Hardwareanforderungen: Die Applikation läuft auf dem Server, d.h. die Daten- oder Internetverbindung ist für eine performante Ausführung wichtiger als die lokale Hardware.
Technisch basiert eine Web Applikation auf HTML (Struktur), CSS (Layout, Design) und JavaScript (Logik). Meist wird eine Reihe von Bibliotheken und/oder Frameworks eingesetzt, um wiederkehrende Aufgaben zu beschleunigen und den Arbeitsaufwand zu vereinfachen. Für Entwickler aus einem anderen Bereich kann es sehr aufwändig und mühsam sein, sich in diese Technologien einzuarbeiten. Oft wird auch das Fehlen einer umfassenden integrierten Entwicklungsumgebung, inklusive eines Designers zur Gestaltung des User Interfaces beklagt. In diese Lücke stoßen Ansätze, welche alternative Technologien zur Entwicklung von Web Anwendungen benutzen.
Ein solches Vorgehen ist der komponentenbasierte Ansatz TMS WEB Core [1]. Aktuell ist die Version 1.7.0 vom April 2021. Mit Hilfe von TMS WEB Core kann man eine moderne Single Page Web Applikation (SPA) erstellen, welche technisch nur auf HTML, CSS und JavaScript beruht. Es werden also keine Plugins benötigt, um damit ist eine maximal mögliche Kompatibilität mit vielen modernen Browsern (Firefox, Chrome, Safari, Edge) gegeben. Die Programmierung findet jedoch vollständig in Delphi statt, der Compiler generiert daraus die notwendigen HTML-, CSS- und JavaScript-Dateien. Für eine Beschleunigung der Entwicklung – insbesondere die Gestaltung der Oberfläche – wird die integrierte Entwicklungsumgebung genutzt. Auch der komponentenbasierte Ansatz wird hier eingesetzt, d.h. man gestaltet das User Interface durch Auswahl von Komponenten, deren Platzierung auf dem Formular und dem Anpassen der Eigenschaften.
TMS Web Core Anwendung sind offen für die Arbeit mit verschiedenen Servertechnologien, u.a. Embarcadero RAD Server, node.js und ASP.NET Core-Mikroservices. Die Technologie basiert auf der Kommunikation über HTTP REST APIs (Bild 1).
Bild 1: Architektur einer TMS Web Core Applikation [1]
Entwicklermaschine klar machen
Installieren Sie die aktuelle Version von RAD Studio. Die kostenfreie Community Edition genügt. Diese finden Sie unter [2]. Laden Sie von [1] die Trial Version von TMS Web Core herunter und installieren Sie diese Komponente in Delphi. Nach der Installation gibt es auch neue Vorlagen. Das war es schon. Unsere erste Web App mit Delphi wartet.
Hello World fürs Web
Starten Sie Delphi und erstellen Sie ein neues Projekt mit Hilfe der Vorlage TMS Web Anwendung (Bild 2).
Bild 2: Anwendungsvorlagen für TMS Web Core.
Danach können Sie im grafischen Designer auf gewohnte Art und Weise die Oberfläche, in diesem Fall die Seiten der Web Applikation gestalten. Dazu wählen Sie aus der Komponentenpalette die passende Komponente aus und ziehen diese via Drag & Drop auf das Formular. Zur Verfügung stehen eine Vielzahl von Standardkomponenten (Labels, Texteingabefelder, Buttons), aber auch speziellere Komponenten, wie zum Beispiel für die Nutzung der Kamera (Bild 3).
Bild 3: Komponentenpalette von TMS Web Core.
In einem Experiment erstellen wir eine kleine Web App. Wählen Sie aus der Komponentenpalette zwei Labels (TWebLabel), zwei Texteingabefelder (TWebEdit), zwei Radiobuttons (TWebRadioButton) und einen Button (TWebButon) aus. Beschriften Sie diese wie im Beispiel gezeigt.
Bild 4: Gestaltung der Webseiten im Designer von Delphi.
Die Programmlogik wird – wie bei einer Desktop Anwendung – eventbasiert programmiert. Erstellen Sie das OnClick-Ereignis des Buttons und Delphi generiert wie gewohnt den Rumpf des Quellcodes. Schreiben Sie beispielsweise den folgenden minimalen Quellcode im OnClick-Ereignis:
[crayon-676de59436cf3855236847/]
Danach kann die Web Applikation direkt aus RAD Studio ausgeführt werden. Dazu wird der integrierte Entwicklungsserver gestartet, welcher mit der TMS Web Core Installation auf dem Rechner eingerichtet wurde. Der aktive Web Browser des Rechners wird aufgerufen und über die lokale Adresse localhost und dem Port 8000 wird die Web Applikation ausgeführt (Bild 5).
Danach kann die Web Applikation direkt aus RAD Studio ausgeführt werden. Dazu wird der integrierte Entwicklungsserver gestartet, welcher mit der TMS Web Core Installation auf dem Rechner eingerichtet wurde. Der aktive Web Browser des Rechners wird aufgerufen und über die lokale Adresse localhost und dem Port 8000 wird die Web Applikation ausgeführt (Bild 5).
Bild 5: Die Web Applikation wird auf dem lokalen Server ausgeführt und im Browser angezeigt.
Hinter den Kulissen
Neben den üblichen Dateien eines Delphi-Projektes gibt es zusätzlich eine Projekt-HTML-Datei (Bild 6).
Bild 6: Projektstruktur einer TMS Web Core Applikation.
Diese HTML-Datei (Project1.html) enthält den grundlegenden HTML-Code für die Anwendung und kann Verweise auf CSS und/ oder JavaScript-Dateien enthalten. Für jedes Formular gibt es eine *.pas-Datei, eine *.dfm-Datei und eine *.html-Datei. Die pas-Datei enthält die Benutzeroberflächenlogik für das Formular und seine Steuerelemente. Die dfm-Datei dient zum Kompilieren der Anwendung in RAD Studio und die HTML-Datei dient als Container für das Hosten der Steuerelemente der Web App. Intern werden den HTML-Elementen Delphi-Steuerelemente zugeordnet. Das ermöglicht den Einsatz des Designers in der Entwicklungsumgebung. Technisch gesehen ist eine TMS WEB Core-Anwendung zur Entwurfszeit in Delphi eine VCL-Windows Anwendung. Das TMS Web Core Plugin sorgt für die Kompilierung der Formulardateien mit dem pas2js-Transpiler zu einer JavaScript (*.js)-Datei. Damit man die Web App direkt aus RAD Studio starten kann, wurde über das Plugin TMS Web Core ein Webserver installiert und die Web App wird auf diesen lokal ausgeführt. Die Dateien für die finale Web App werden in den Ordnern Debug bzw. Release gespeichert und müssen dann auf den Webserver kopiert werden.
Fazit und Ausblick
Die Kombination von RAD Studio und TMS Web Core ermöglicht das Erstellen von leistungsfähigen clientseitigen Web Applikationen. Diese werden komplett vollständig in Delphi erstellt. HTML, CSS und JavaScript werden dazu nicht benötigt. Vorhandener Delphi-Quellcode kann für die Programmlogik wiederverwendet werden. Ebenso kann man aus der Applikation durch den Einsatz von Komponenten eine offlinefähige Progressive Web App (PWA) machen oder mittels des Frameworks Elektron die Web App wiederum auf allen gängigen Systemen als Desktop Anwendung verpacken. Das Beispiel finden Sie hier zum Download.
Links