创建一个主题Creating a theme

<< 点击显示目录 >>

主页  mappView帮助助手 > mapp View帮助信息 > 工程 > 主题和风格 >

创建一个主题Creating a theme

一个定制的主题可以通过两种方式创建。

复制一个现有的主题并手动改变它

创建一个空的主题包

本节描述了创建一个自定义主题的所有必要步骤。

添加一个空的主题包

当在逻辑视图中选择节点 "mapp View / Resources / Themes "时,一个空的主题包会显示在对象目录中。它可以通过拖放或双击来添加。

mappView_ObjectCatalot_EmtpyTheme

主题包被添加后,可以根据需要重新命名。

mappView_ThemeNameChanged

输入主题的名称

添加的主题包包含一个 .theme 文件 ,其中定义了主题的ID(名称)。

<Theme id="myTheme" xmlns="http://www.br-automation.com/iat2015/theme/engineering/v1">

添加包StylesSet

当主题包在逻辑视图中被选中时,一个StylesSet包会从对象目录中被添加。

mappView_ObjectCatalot_StyleSetPackage

添加的StylesSet包包含一个 .stylesset文件 ,其中定义了StylesSet的ID(名称)。

<StylesSet id="myStyleSet" xmlns="http://www.br-automation.com/iat2015/stylesset/engineering/v1">

任何数量的样式集都可以被使用。所有被使用的StylesSets的ID必须被指定为.theme文件中的参考。

<Theme id="myTheme" xmlns="http://www.br-automation.com/iat2015/theme/engineering/v1">

      <StylesSet refId="myStyleSet" />

</Theme>

添加一个样式文件

一个样式文件包含一个或多个用于所有部件类型的样式。该文件是在选择StylesSet包时从对象目录中添加的。

mappView_ObjectCatalot_Styles

.style文件中分配了一个唯一的ID(名称) 。

<Styles id="myStyles1" xmlns="http://www.br-automation.com/iat2015/styles/engineering/v1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" >

这些 .style 文件 中的每一个 有一个单独的ID,在 .stylesset文件被引用

<StylesSet id="myStyleSet" xmlns="http://www.br-automation.com/iat2015/stylesset/engineering/v1">

       <Styles refId="myStyles1" />

</StylesSet>

逻辑视图中主题的文件

mappView_ThemeCompleted

为一个小组件类型配置一个样式

小组件类型的样式在.style文件中被创建和管理。以下规则适用于创建样式。

一个widget类型的样式名称只允许在一个主题中使用一次。

相同的样式名称可以用于不同的部件类型。

样式名称 "default "有一个特殊的作用,当小组件被添加到一个内容中时,它会被默认引用。

样式 "default "可以用来改变一个小组件的默认外观。

小组件 "Label "的样式示例

在.style文件中为Label小组件创建了2个名为 "default "和 "Title1 "的样式。小 件类型是由 xsi:type="widgets.brease.WidgetType "定义的 。 小组件类型的确切名称与 小组一起列出 。

<Style id="default" xsi:type="widgets.brease.Label"

       fontSize="14px"

       textColor="#474747"

       backColor="transparent"

       borderStyle="none"

/>

 

<Style id="Title1" xsi:type="widgets.brease.Label"

       fontSize="18px"

       textColor="#FF8500"

       backColor="transparent"

       borderStyle="none"

       bold="true"

/>