Technologie
Web UI basiert auf den Technologien HTML5, CSS und JavaScript. Für die Anzeige einer Web-App kann jeder moderne Browser genutzt werden wie z. B. Chrome, Firefox, Edge, Opera oder Safari. Hier erfahren Sie, welche Komponenten wie zusammenarbeiten.
Wo kommen die Daten her?
EASY UI Designer Server
Der »EASY UI Designer« Server tauscht über einen Kommunikationskanal Daten mit der SPS aus. An den Server können verschiedene Clientprojekte direkt ankoppeln, die mit der Oberflächentechnik Classic UI oder Modern UI erstellt wurden.
EASY UI Designer Web-Gateway
Das »EASY UI Designer« Web-Gateway ist ein weiterer Client, der an den »EASY UI Designer« Server ankoppeln kann. Allerdings ist er um eine Kommunikationsmöglichkeit mit einer Web-App erweitert worden. Zusätzlich verwaltet er mehrere Web-App-Instanzen, wenn sich verschiedene Benutzer von unterschiedlichen Geräten verbinden.
Das Web-Gateway muss per Hand aktiviert werden, bevor ein Web-App-Projekt gestartet wird (siehe Kapitel Web-Gateway starten).
Webserver
Der Webserver liefert die angeforderte Webseite mit allen zugehörigen Dateien an den Browser aus. Das ist zum einen die HTML-Seite mit der Definition der Steuerelemente. Dazu gehören aber auch CSS-Dateien für das Styling, Schriftartdateien, Grafikdateien, JavaScript-Dateien usw.
Web-App
In der Web-App wird über JavaScript eine WebSocket-Kommunikation mit dem »EASY UI Designer« Web-Gateway aufgebaut. Über diese Kommunikation werden Daten mit dem EASY UI Designer Server ausgetauscht.
Wie werden die Daten angezeigt?
Webbrowser
Der Webbrowser fordert vom Webserver eine HTML-Seite an.
Steuerelemente
Mit den »EASY UI Designer« Steuerelementen wird die grafische Oberfläche erstellt. Die Darstellung der Steuerelemente wird mit Eigenschaften eingestellt und kann zusätzlich über CSS (Cascading Style Sheets) gesteuert werden.
Basiskomponenten
Die »EASY UI Designer« Basiskomponenten stellen wichtige Elemente und Funktionen für das Layout und die Navigation zur Verfügung.