FixClassical

Das FixClassical-Layout besitzt eine Kopfzeile und eine Reihe von Navigationsschaltflächen am unteren Bildschirmrand, über die die verschiedenen Seiten der Maschinenvisualisierung aufgerufen werden können. Elemente lassen sich nur absolut positionieren, daher ist dieses Layout nur für Displaygrößen mit einer ähnlichen Auflösung geeignet.

Die Schaltflächen (Benutzer) und (Einstellungen) in der Kopfzeile beziehen sich auf die Server-seitigen Funktionen Benutzerverwaltung und Sprachumschaltung.

Dokumentgliederung

Die zugehörige Hauptansicht "AppShell.html" enthält in der Dokumentgliederung folgende Elemente.

HeaderRegion

Die HeaderRegion enthält die Kopfzeile. In der Voreinstellung wird in dieser Region die Ansicht "HeaderView.html" angezeigt.

AppPageNavigator

Der AppPageNavigator zeigt zur Laufzeit die verschiedenen Seiten mit den eigentlichen Inhalten an. Fügen Sie daher in diesem Bereich keine Elemente ein, sondern erstellen Sie die Visualisierung auf der jeweiligen Seite, beispielsweise "MachinePage.html".

ButtonRegion

Die ButtonRegion enthält die Schaltflächen zur Navigation. In der Voreinstellung wird in dieser Region die Ansicht "ButtonView.html" angezeigt.

Alle Benutzeroberflächen des Projekts sind im Client-Ordner unter "Design" enthalten. Doppelklicken Sie auf einen Eintrag, um die entsprechende Datei im Designer-Arbeitsbereich zu öffnen.

Kopfzeile

Die Ansicht "HeaderView.html" definiert die Kopfzeile der Applikation.

• Das Image-Element kann beispielsweise für ein Logo verwendet werden. Die anzuzeigende Grafik können Sie im Eigenschaftenfenster für das Image-Element unter ImageWImage auswählen.

• Durch das Label-Element wird der aktuell eingeloggte Nutzer angezeigt. Es wird im Hintergrund über die Eigenschaft "DataContext" aktualisiert.

• Die Schaltfläche (Benutzer) öffnet über die unter projektierte "showDialogAction" den Dialog "UserDialog.html", in dem verschiedene Einstellungen zur Benutzerverwaltung angeboten werden. In den Einstellungen der Action im Eigenschaftenfenster der Schaltfläche kann über DialogWMode projektiert werden, ob der Dialog eine Interaktion (z. B. schließen, bestätigen) erfordert (Modal) oder ob er durch Klick auf andere Elemente ohne weitere Interaktion verschwindet (NonModal).

• Die Schaltfläche (Einstellungen) ist ein Button-Element, das den Dialog "SettingsDialog.html" aufruft.

• Die Zeit-/Datumsanzeige ist ein Clock-Element.

• Die untere Zeile ist ein AlarmLine-Element, das im Falle eines ausgelösten Alarms zur Laufzeit die entsprechenden Informationen anzeigt.

Navigationsschaltflächen

Die Ansicht ButtonView.html definiert die Schaltflächen zur Navigation.

• Wie in der Dokumentgliederung zu sehen, enthält die View ein TabBar-Steuerelement, das wiederum für jede Navigationsschaltfläche ein TabButton-Element enthält.

• Die Seite, die beim Start der Visualisierung geladen werden soll, können Sie im Eigenschaftenfenster für das TabBar-Element unter NavigationWStartPageName auswählen.

• Jedem TabButton-Element ist im Eigenschaftenfenster unter TextWLocalizableText ein in der Sprache umschaltbarer Text zugeordnet.

• Die Zielseite für ein TabButton-Element können Sie im Eigenschaftenfenster für das TabButton-Element unter NavigationWPageName auswählen.

• In der Voreinstellung sind folgende Zielseiten für die Schaltflächen definiert:

  • MACHINE: pages/machinePage.html

  • RECIPES: pages/RecipesPage.html

  • STATISTICS: pages/StatisticsPage.html

  • SETTINGS: pages/SettingsPage.html

  • DIAGNOSTICS: pages/DiagnosticsPage.html

  • ALARMS: pages/AlarmsPage.html

Verwandte Themen:

• Navigationsschaltfläche hinzufügen

• Absolutes Design