导航

<< 点击显示目录 >>

主页  mappView帮助助手 > mapp View帮助信息 > 工程 > 人机界面应用程序的结构 > 配置视图 >

导航

以下选项可用于在mapp View HMI应用程序中的页面之间进行导航。

a) 自动导航

b) 使用 NavigationButton 部件

c) 使用客户端系统动作 Navigate进行导航

本节只解释自动导航。

Automatic navigation 自动导航

通过自动导航,可能的页面变化被定义在一个导航文件中。导航按钮显示在一个导航小部件中。

Defining page changes 定义页面变化

可能的页面变化是在一个单独的导航文件(.nav)中配置的。这是从一个页面(NavigationPath refId)开始的,并定义了可被导航到的目标页面(Destination refId)。

一个 "导航 "对象被添加到对象目录中配置视图的 "mapp视图 "包中。

每个导航文件必须有一个唯一的ID。

例子:在2个页面之间进行导航

<?xml version="1.0" encoding="utf-8"?>
<ndef:Navigation id="MainNavigation" xmlns:ndef="http://www.br-automation.com/iat2015/navigationDefinition/v2">
    <NavigationPaths>
        <NavigationPath refId="MainPage">
            <Destination refId="MainPage" index="0" />
            <Destination refId="ParameterPage" index="1" />
        </NavigationPath>
        <NavigationPath refId="ParameterPage">
            <Destination refId="MainPage" index="0" />
            <Destination refId="ParameterPage" index="1" />
        </NavigationPath>
    </NavigationPaths>
</ndef:Navigation>

为了使导航文件在人机界面应用程序中得到考虑,导航ID必须在 可视化对象(.vis)被引用

 <Navigations>

       <Navigation refId="MainNavigation" />

 </Navigations>

Displaying navigation options 显示导航选项

为了显示导航,一个 导航 小部件被放置在内容片上。

该小组件在运行时显示导航所需的按钮。

<Widget xsi:type="widgets.brease.Navigation" id="Navigation1" height="200" width="40" left="0" top="0" navRefId="MainNavigation" zIndex="0" />

每一个可以从当前显示的页面进入的页面,都会显示一个按钮。

Displaying a label on the navigation button 在导航按钮上显示一个标签

属性 displayName页面配置 中使用  ,允许在运行时在按钮上显示标签文本。这里可以配置一个静态文本或可本地化的文本。

displayName会显示在指向相应页面的按钮上。

Displaying an image on the navigation button 在导航按钮上显示一个图像

为了在运行时在按钮上显示一个图像, 页面配置 中使用了 图像属性 。

该图像会显示在指向相应页面的按钮上。

Styling navigation buttons 设计导航按钮的样式

用于自动导航的导航按钮不是一个可以被用户在对象目录中看到的部件。可以为部件SystemNavButton创建一个样式,它的可样式属性对应于 NavigationButton属性

<Style id="default" xsi:type="widgets.brease.SystemNavButton" fontSize="16px" bold="true" textColor="#000000" mouseDownTextColor="#000000" cornerRadius="5px" borderWidth="0px" mouseDownBorderWidth="0px" backColor="#F6F6F6" mouseDownBackColor="#EDEDED" checkedBackColor="#EDEDED" />

Navigating with gestures 用手势导航

除了按钮导航外,还可以用手势导航。使用手势切换页面的定义是在导航文件(扩展名为.nav)中定义的。

到mapp View 5.3为止,可用的手势是 双指轻扫手势。在mapp View 5.4或更高版本中,该手势可以  通过 SystemGesture1可视化对象中配置为自动导航

Defining page changes 定义页面变化

一个可能的页面切换是由可选的 "Swipe "元素定义的。元素 "Swipe "可以额外使用或单独使用。

Element "Swipe" 元素“滑动”

属性

描述

数据类型

需要

fromLeft

从左到右滑动时应加载的页面。

Page reference

No

fromRight

从右到左滑动时应加载的页面。

Page reference

No

fromTop

从上往下刷的时候,应该加载的页面。

Page reference

No

fromBottom

从下往上刷的时候,应该加载的页面。

Page reference

No

例子:在3个页面之间进行导航

<?xml version="1.0" encoding="utf-8"?>
<ndef:Navigation id="MainNavigation" xmlns:ndef="http://www.br-automation.com/iat2015/navigationDefinition/v2">
    <NavigationPaths>
        <NavigationPath refId="Page1">
            <Destination refId="Page1" index="0" />
            <Destination refId="Page2" index="1" />
            <Destination refId="Page3" index="2" />
            <Swipe fromLeft="Page3" fromRight="Page2" />
        </NavigationPath>
        <NavigationPath refId="Page2">
            <Swipe fromLeft="Page1" fromRight="Page3" />
        </NavigationPath>
        <NavigationPath refId="Page3">
            <Swipe fromLeft="Page2" fromRight="Page1" />
        </NavigationPath>
    </NavigationPaths>
</ndef:Navigation>