FixTop

Das FixTop-Layout besitzt eine Kopfzeile, in der alle Schaltflächen zur Navigation und für Einstellungen enthalten sind. 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 die Elemente "MenuRegion" und "AppPageNavigator".

MenuRegion

Die MenuRegion 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".

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.

• Die Schaltflächen zur Navigation sind in einer eigenen View, der "ButtonView.html", definiert. Daher wird hier das Steuerelement Region genutzt, in der die Ansicht hineingeladen wird. Änderungen bezüglich des Navigationsmenüs sind daher in der ButtonView vorzunehmen.

• Die Schaltfläche (Benutzer) öffnet über die unter projektierte "showDialogAction" den Dialog "UserDialog.html", in dem diverse 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:

  1. MACHINE: pages/machinePage.html

  2. RECIPES: pages/RecipesPage.html

  3. DIAGNOSTICS:pages/DiagnosticsPage.html

  4. ALARMS: pages/AlarmsPage.html

• Die Schaltfläche STATISTICS ist als Menü-Schaltfläche (TabMenuButton) mit drei Einträgen (MenuItem) definiert:

  1. Statistik: pages/StatisticsPage.html

  2. Page 1: noch keine Zielseite definiert

  3. Page 2: noch keine Zielseite definiert

• Jedem MenuItem ist im Eigenschaftenfenster unter TextWLocalizableText ein in der Sprache umschaltbarer Text zugeordnet. Die Zielseite für ein MenuItem-Element können Sie im Eigenschaftenfenster für das MenuItem-Element unter NavigationWPageName auswählen.

Verwandte Themen:

• Navigationsschaltfläche hinzufügen

• Absolutes Design