Navigating between panels

Add navigation pages and setup a panel model for your project.
In this module, add four navigation pages. These pages are represented by
panels
, with the same dimensions and the tabs of the navigation panel. First set up a panel model (called
type
 ), then you can derive the three panels.
This is the final result:
  • Pages and panels -Typically, in the context of HMI applications, the different sections of an interface are called
    pages
     or
    panels
    . A panel is a container that can perform the traditional function of a page or a section within a page.
  • Manage similar objects - When several similar objects must be created, for example objects that share the same properties, it is good practice to create a model, called
    type
    , from which to derive the different objects needed (
    instances
     of the type). This facilitates the readability and maintenance of the project: in fact if we change a type, the same change propagates to all its instances.
  • Folders - To facilitate the project readability, it is good practice to organize the objects in folders, for example, organize the
    types
     of graphical objects in a
    MyTypes
     folder.
Step #1: Organize the objects
For a better organization of the project, we will create a folder dedicated to the panels and rename it.
  1. Right-click the
    UI
     folder, then select
    New
     >
    Folder
    : the
    NewFolder1
     folder appears in
    UI
    .
  2. To rename the folder, with the folder selected press F2 and rename it to
    MyPages
    .
Step #2 Create and set the panel model
  1. Right-click
    MyPages
    , then select
    New
     >
    Containers
     >
    Panel1 (type)
     appears in
    MyPages
    .
  2. Rename
    Panel1 (type)
     to
    Page
    .
  3. Double-click the new panel to display it graphically in the editor.
  4. In
    Property
    , set
    Horizontal alignment
     and
    Vertical alignment
     to
    Stretch
    : the panel thus set adapts horizontally and vertically to the dimensions of its container, in our example the navigation panel.
  5. For more design space, it is recommended to enlarge the panel, for example set
    Width
     to 500 pixels and
    Height
     to 400 pixels.
Panels derived from this panel will have the same properties as it.
NOTE:
  • All objects with
    (type)
     suffix can be used to derive other objects with the same characteristics.
  • The dimensions set in step 5 are only used to give more space in the design phase. At runtime the panel stretches to fit its container.
Step #3: Derive the panels
In the
MyPages
 folder, we will derive four panels the same as the model just set:
  1. Right-click
    MyPages
    , then select
    New
     >
    MyPages
     >
    Page (type)
    :
    Page1 (type)
     appears in
    MyPages
    .
  2. Repeat the previous step three times to derive three more panels.
The four derived panels have the same properties as
Page (type)
. The object from which they derive can be displayed in the
Properties
 panel:
Find out more about types: Object types and instances.
Step #4: Organize the navigation
To set the newly created panels as navigation panel tabs, drag
Page1 (type)
,
Page2 (type)
,
Page3 (type)
 and
Page4 (type)
 onto
NavigationPanel1
.
Double-click
NavigationPanell1
 to display it updated.
Step #5: Check the navigation at runtime
The panels are currently empty, so to check the navigation at runtime we will create test contents in the different panels:
  1. In
    Project
    , right-click
    Page1 (type)
    , then select
    New
     >
    Basic controls
     >
    Label1
     appears in
    Page1 (type)
    .
  2. Double-click
    Page1 (type)
     to display the object in the editor, then drag the label in the desired position.
  3. Repeat the two previous steps for
    Page2 (type)
    ,
    Page3 (type)
     and
    Page4 (type)
    .
  4. Click
    Emulator
     and wait for the runtime window to appear.
  5. Click on the different panels to check the operation at runtime, then close the window.
  6. Delete the four newly-created labels. To do it, in
    Project
     or in the graphical editor select the first label and press
    DELETE
    . Repeat the same operation for the other three labels.
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.