Mein erstes Projekt

Nachdem Sie »EASY UI Designer« erfolgreich installiert haben, können Sie nun mit der Entwicklung Ihrer ersten Applikation beginnen.

In diesem Kapitel lernen Sie:

wie Sie ein neues Projekt im Projektkonfigurator anlegen,
wie Sie ein Projekt starten und beenden,
welche Komponenten die Benutzeroberfläche eines neuen Projekts bereits enthält.

Die wesentlichen Funktionen Ihres Visualisierungsprojekts werden mithilfe des Projektkonfigurators festgelegt.

Starten Sie »EASY UI Designer« aus dem Windows-Startmenü oder dem Lenze »EASY Navigator«.

Nach dem Start öffnet sich der Projektkonfigurator.

Klicken Sie auf Neues Projekt und anschließend auf das +-Symbol. In dem neuen Fenster vergeben Sie mindestens den Projektnamen und setzen Sie optional weitere Einstellungen, wie z. B. den Projektpfad. Im nächsten Schritt wählen Sie die Zielsteuerung. Restriktionen zu den Geräten finden sich rechts neben den Kacheln.

Auf der nächsten Seite haben Sie einen Überblick über die Funktionen, die Bestandteil Ihrer Visualisierung sind:

Benutzerverwaltung	Da die Anzeige der Visualisierung nur mit einem eingeloggten Benutzer möglich ist, empfiehlt es sich an dieser Stelle, einen Benutzer anzulegen. Zu Testzwecken kann ein Gastzugang mithilfe der Option "Möchten Sie einen Gastzugang anlegen?" erstellt werden. Als Default wird dadurch eine Benutzergruppe "Guests" mit einem neuen Nutzer guest definiert, der sich mit dem Passwort guest in der Visualisierung einloggen kann. Sowohl der Benutzername als auch das Passwort können an dieser Stelle angepasst werden. Soll dieser Benutzer automatisch eingeloggt werden, kann dies über Möchtest du eine automatische Anmeldung? aktiviert werden.
Sprachauswahl	In einem neuen Projekt sind standardmäßig die Sprachen Deutsch und Englisch enthalten. Welche Sprache zuerst beim Start der Visualisierung angezeigt werden soll, kann mittels der Checkbox bestimmt werden. Weitere Sprachen können über Sprachen wählen hinzugefügt werden.
Rezeptsystem	Das Rezeptsystem ist über einen Funktionsbaustein (FB) im »PLC Designer« gelöst. Wenn Sie diese Option nutzen möchten, aktivieren Sie sie mittels des Schalters. Daraufhin werden die vorgefertigten Vorlagen in Ihr Visualisierungsprojekt aufgenommen. Zusätzlich ist es notwendig, den entsprechenden FB in ihr SPS-Projekt zu integrieren. Eine detaillierte Beschreibung finden Sie hier.
FAST Framework	Falls Sie die Lenze FAST Services in Ihrem Projekt verwenden möchten, können Sie sie mittels des Schalters aktivieren. Das Lenze FAST Framework stellt folgende Informationen bereit: Das Lenze Fehlermanagement (LEM) beinhaltet die Alarmbeschreibungen der Lenze-Hardware. Die Fehlermeldungen können so auf einfache Weise in Ihrer Visualisierung verwendet werden. Die Topologie Ihrer Maschine ist in der EASY UI-Exportdatei (.easyuilpk) Ihres SPS-Projekts enthalten. In Ihrer Visualisierung können Sie sie mittels der Steuerelemente AssetView und NetworkView anzeigen.
Trendsystem	Wenn Sie Variablenwerte über die Zeit darstellen möchten, aktivieren Sie das Trendsystem mittels des Schalters. Daraufhin wird die vorgefertigte Vorlage in Ihr Visualisierungsprojekt aufgenommen. Weitergehende Informationen finden Sie unter Systemmodule > Trends

Im nächsten Schritt wählen Sie die Kommunikationseinstellungen aus:

SPS-Projekt	Wenn Sie den »PLC Designer« auf Ihrem Computer installiert haben, werden hier alle SPS-Projekte aufgelistet.
EASY-Export	Im PLC Designer kann das SPS-Projekt in einem für den »EASY UI Designer« optimierten Format exportiert werden (.easyuilpk). Dieses Paket enthält zusätzliche Informationen, z. B. die Topologie im Kontext der FAST Services.
Symbolkonfiguration	Im »PLC Designer« werden die Variablen in der XML-basierten Symbolkonfiguration festgehalten. Wie Sie diese anlegen, finden Sie in der Hilfe des »PLC Designer«.

Nun haben Sie alle Server-relevanten Einstellungen getätigt und können Ihr Client-Projekt konfigurieren.

Zu einem Server-Projekt können ein oder mehrere Client-Projekte mittels des +-Symbols angelegt werden.

In dem Dialog sind folgende Optionen auszuwählen:

Name	Sie können den vorgegebenen Projektnamen übernehmen, um die Zugehörigkeit zur Projektkgruppe zu verdeutlichen, oder dem Client-Projekt einen sprechenden Namen geben.
Gerät	Wählen Sie hier das Zielgerät aus, auf dem die Visualisierung angezeigt werden soll. Sie können die Web-Panels des Lenze-Portfolios wählen, aber auch ein eigenes Modell wählen und die Auflösung eingeben.
Layout	Hier stehen ein selbstskalierendes Layout (Responsive Layout) und zwei absolute Layout-Vorlagen zur Auswahl, wobei letztere sind durch die Position des Navigationsmenüs unterscheiden. Ein klassisches Menü mit einer Schaltflächenleiste am unteren Rand der Applikation ist in der Vorlage FixClassical enthalten. Ein Menü mit Einträgen in einer Titelleiste ist durch Selektion von FixTop anzulegen. Zusätzlich lässt sich auch eine Vorlage namens Empty style wählen. Sie enthält das responsive Menü, jedoch keine Standardeinträge und keine entsprechenden Pages im Projekt, so dass Sie sich gut dafür eignet, wenn Sie die Menüstruktur der Visualisierung von Grund auf neu erstellen möchten.
Theme	Es gibt ein helles und ein dunkles Theme, das Sie jederzeit zur Laufzeit umschalten können. An dieser Stelle wird das Start-Theme gewählt.
Stil	Der Stil entscheidet über das grundsätzliche Aussehen der Steuerelemente. Ist diese Entscheidung getroffen, muss gewählt werden, ob auf der Basis ein eigener Stil als Kopie angelegt werden soll oder ob die Lenze-Original-Styles benutzt werden. Das Kontrollkästchen sollte aktiviert werden, wenn Sie einen firmeneigenen Stil umsetzen und pflegen und unabhängig von Style-Änderungen sein möchten. Möchten Sie den Lenze-Style grundsätzlich übernehmen und nur kleine Änderungen vornehmen, deaktivieren Sie das Kontrollkästchen. So profitieren Sie von künftigen Aktualisierungen und Erweiterungen in den Steuerelementen. Eine Vorschau zu den gewählten Einstellungen findet sich auf der rechten Seite, wenn Sie mit der Maus über das rechteckige Symbol am oberen Rand des Bildes fahren.

Das Projekt wird unter Projektpfad im genannten Verzeichnis angelegt und in der Entwicklungsumgebung im Menü Start geöffnet.

Das neu angelegte Projekt enthält bereits eine ausführbare Benutzeroberfläche. Das heißt, dass Sie das Projekt nach dem Anlegen bereits starten und die Applikation selbst ausprobieren können. So starten Sie das Projekt:

Wählen Sie im Menüband Projekt. Hier haben Sie folgende Optionen:

Wenn Sie das Projekt auf eine Steuerung übertragen möchten, wählen Sie im Menü den Eintrag Zielgerätemanager und tragen in der Maske die IP-Adresse ein. Weitere Einstellungen zur sicheren Kommunikation, dem Port oder Timeout können hier ebenfalls vorgenommen werden. Ist die Konfiguration abgeschlossen, können Sie sich mittels Verbinden im Menü mit der Steuerung verbinden. Ist die Verbindung hergestellt, erscheint ein Überblick über die Projekte der Projektmappe. Diese werden mit der Option Übertragen im Menüband auf die Steuerung übertragen. Den Übertragungsstatus sieht man in der linken unteren Ecke. Ist diese abgeschlossen, erscheinen entsprechende Meldungen im Ausgabefenster. Die Applikation ist nun auf dem Zielgerät verfügbar und kann über die grüne Play-Schaltfläche im Menüband oder über F5 gestartet werden.
Haben Sie noch keine Steuerung zur Hand, können Sie das Projekt auch lokal starten. Hierzu wählen Sie im Menü unter Ausführungsziel den Eintrag Lokal und starten das Projekt über die grüne Play-Schaltfläche daneben im Menüband oder über F5.

Das Projekt wird gestartet und der Splashscreen mit Statusinformationen angezeigt. Je nach Konfiguration erscheint eine Anmeldeoberfläche oder die Hauptseite der Applikation, wenn der automatische Login im Projektkonfigurator aktiviert wurde.

Nach dem Login ist das Grundgerüst der Applikation, der Applikationsrahmen (AppShell) zu sehen. Es sind bereits einige Menüeinträge vorhanden, die zu den entsprechenden Seiten im Projekt führen. In der rechten oberen Ecke sind Funktionen zur Benutzerverwaltung, zur Sprache und zum Design integriert. Das Personensymbol öffnet einen Dialog, in dem Optionen zum Anlegen, Editieren, Löschen und Ausloggen von Benutzern verfügbar sind. Ein Klick auf das Zahnrad präsentiert Einstellungsmöglichkeiten zur aktuellen Sprache und zum Stil der Applikation.

Um den Aufbau des Applikationsrahmens zu verstehen, beenden Sie das Projekt und kehren Sie zur Entwicklungsumgebung zurück.

Diese Beschreibung befasst sich mit der Benutzeroberfläche Ihres neu angelegten Projekts.

Im linken Bereich des Hauptfensters sehen Sie das Fenster Projektexplorer. Der Projektexplorer bietet einen Zugriff auf alle Bereiche des Projekts in Form einer Ordnerstruktur. Im Projektexplorer können Sie wie im Dateiexplorer Ordner bzw. Knoten auf- und zuklappen, um deren Inhalte anzuzeigen und zu verbergen.

Für die Benutzeroberfläche ist der Knoten Design zuständig. Dieser Knoten enthält alle Dateien, die die Benutzeroberfläche beschreiben.

Führen Sie die folgenden Schritte aus, um den Aufbau des Applikationsrahmens zu verstehen:

Expandieren Sie im Projektexplorer unter dem Client-Projekt den Knoten Design. Hier finden Sie einen Ordner Views, in dem die AppShell.html enthalten ist. Mit einem Doppelklick öffnet sie sich im Arbeitsbereich (Designer).
Unten links in der Entwicklungsumgebung sehen Sie das Fenster Dokumentgliederung. Dieses Fenster zeigt die Struktur der im Designer geöffneten Datei an. An der Struktur erkennen Sie die verschiedenen Komponenten des Applikationsrahmens. Mehr Informationen zum genauen Aufbau der Projektvorlagen können Sie unter den folgenden Artikeln finden: Responsive Layout, Fix Classical und Fix Top.
Markieren Sie abwechselnd die verschiedenen Elemente im Fenster Dokumentgliederung. Diese erscheinen im Designer dann ebenfalls als markiert. Die Regions unterteilen den Applikationsrahmen in Bereiche, in denen zur Laufzeit die Views (einzelne Bildschirmansichten) angezeigt werden. Dabei ist der AppPageNavigator das Rahmenelement, das die Hauptseiten der Applikation zur Laufzeit lädt. Welche Page hier beim Starten angezeigt wird, wird in den absoluten Layouts (FixClassical und FixTop) in der Eigenschaft Start page name des Steuerelements TabBar festgelegt. Im Responsive-Layout können Sie dies mittels der Eigenschaft Checked projektieren, die unter der Kategorie Control States zu finden ist.

Verwandte Themen:

Projektverwaltung