FixTop

The FixTop layout has a header containing all buttons for navigation and settings. Elements can only be positioned absolutely, so this layout is only suitable for display sizes with a similar resolution.

The buttons (user) and (settings) in the header refer to the server-side user management and language switching functions.

Document outline

The associated main view "AppShell.html" contains the elements "MenuRegion" and "AppPageNavigator" in the document structure.

MenuRegion

The MenuRegion contains the header. By default, the "HeaderView.html" view is displayed in this region.

AppPageNavigator

The AppPageNavigator displays the various pages with the actual content at runtime. Therefore, do not insert any elements in this area, but create the visualisation on the respective page, for example "MachinePage.html".

All user interfaces of the project are contained in the client folder under Design. Double-click on an entry to open the corresponding file in the Designer workspace.

Header

The "HeaderView.html" view defines the header of the application.

• The image element can be used for a logo, for example. You can select the graphic to be displayed in the properties window for the image element under ImageWImage.

• The buttons for navigation are defined in a separate view, the "ButtonView.html". The Region control element is therefore used here, in which the view is loaded. Changes to the navigation menu must therefore be made in the ButtonView.

• The button (user) opens the dialogue "UserDialog.html" via the "showDialogAction" configured at , in which various settings for user administration are offered. In the action settings in the properties window of the button, DialogWMode can be used to configure whether the dialogue requires an interaction (e.g. close, confirm) (Modal) or whether it disappears by clicking on other elements without further interaction (NonModal).

• The button (settings) is a button element that calls up the dialogue "SettingsDialog.html".

• The time/date display is a clock element.

• The bottom line is an AlarmLine element that displays the corresponding information at runtime if an alarm is triggered.

Navigation buttons

The ButtonView.html view defines the buttons for navigation.

• As can be seen in the document structure, the view contains a TabBar control element, which in turn contains a TabButton element for each navigation button.

• You can select the page that is to be loaded when the visualisation is started in the properties window for the TabBar element under NavigationWStartPageName.

• Each TabButton element is assigned a language-switchable text in the properties window under TextWLocalizableText.

• You can select the target page for a TabButton element in the properties window for the TabButton element under NavigationWPageName.

• By default, the following target pages are defined for the buttons:

  • MACHINE: pages/machinePage.html

  • RECIPES: pages/RecipesPage.html

  • DIAGNOSTICS:pages/DiagnosticsPage.html

  • ALARMS: pages/AlarmsPage.html

• The STATISTICS button is defined as a menu button (TabMenuButton) with three entries (MenuItem):

  • Statistics: pages/StatisticsPage.html

  • Page 1: no target page defined yet

  • Page 2: no target page defined yet

• A language-switchable text is assigned to each MenuItem in the properties window under TextWLocalizableText. You can select the target page for a MenuItem element in the properties window for the MenuItem element under NavigationWPageName.

Related topics:

• Add navigation button

• Absolute design