Navigation through screens

Introduction

Hello and welcome to a new guide on how to best use Movicon.NExT™.

In this technote, an example will be constructed with the purpose of showing how to create navigation between screens.

Example

This example is very simple: three screens will be used in the application. Two screens, Screen1 and Screen2, will be used as the main screens while the third will be a _Layout_Bottom screen and used to host the navigation buttons.
When you click on the navigation buttons at runtime, the respective screen associated to the buttons will open.

Screen1 and Screen2 creation

After having opened Movicon.NExT in design mode and created, or loaded, a project, create the three screens needed for this example.
To do this:

• Find and select the Screens Module on the Project Explorer window’s project tree.
• Right-click it to open its contextual menu and select the New option.
• Configure the screen’s main properties by using the popup that shows as follows:
• • Width: 1920
  • Height: 980
  • Background color: Red
  • Name: Screen1
• Click OK to confirm.

Repeat this procedure to create the Screen2 screen with the same sizes but using Blue as its Background Color.

Creating the bottom bar

To create the Bottom Bar:

• Find and select the Screens Module on the Project Explorer window’s project tree.
• Right-click it to open its contextual menu and select the New option.
• Configure the screen’s main properties by using the popup that shows as follows:
• • Width: 1920
  • Height: 100
  • Name: _Layout_Bottom selected by opening the combobox corresponding to the Name property.
• Click Ok to confirm.

Startup page configuration

Now that the screens have been created, you will need to change the project’s properties by entering the Screen1 screen as the project’s startup window. To do this:

• Select the name of the project on the application’s tree.
• Open its properties window.
• Change these properties as below:
• • Startup Page Type: Main Screen
  • Startup Screen Name: Screen1

Once you have finished, click the Save All button on the top toolbar of the Movicon.NExT editor to save the project.

Creating navigation buttons

Open the _Layout_Bottom screen and click on the Toolbox tab located on the editor’s right, next to the properties window, to open the Toolbox library offered by the Movicon.NExT software.
Go to the Buttons/Standard subfolder, select and drag the Standard Metro Style button onto the screen.
Repeat this procedure to insert another button on the _Layout_Bottom screen.
Go to the Screens folder on the project tree and drag the Screen1 screen onto a button and the Screen2 onto the other button to automatically associate the open screen command.

Click the Save All button on the top toolbar of the Movicon.NExT editor to save the project again.

Test Runtime

You can now test everything you have created by simply clicking on the Start Runtime icon to run the project.
You should be able to navigate between the Screen1 and Screen2 screen at runtime by clicking on the buttons.