Apriso Modern UI样式系列之一 介绍及启用

1. 概述

Visual Factory是由DELMIA Apriso COE团队交付一组预先定义的系统，从功能和技术角度强调Apriso解决方案的特性和功能，其中ModernUI主题和样式因风格清新大方，在国内项目中被广泛使用。

ModernUI主题由不同的实体组成，如CSS文件、Javascript文件、图像、字体和一些特定的案例专用的Operation在Apriso平台中。所有文件都存储在/Apriso/Website/Portal/ModernUI目录，而用于某些控件的Operation则保存在VF_CORE Process Builder项目。

虽然每个ModernUI控件都有其专用的子文件夹，但大多数样式都保持在单个子文件夹中ModernUI.css文件中。由于该文件保存了每个控件运行所需的基础样式。

值得注意的是，因ModernUI页面布局间隔较大，建议在高分辨率环境下使用（建议在1920*1080以上），如果分辨率太低，则容易造成页面显示内容太少的麻烦。

本系列将介绍如何启用ModernUI及其布局，并介绍一系列特色应用，敬请期待。

2.ModernUI目录结构

Ø Controls:存放ModernUI主题中一些针对Apriso扩展的界面控件

Ø Fonts：提供了一个Font Awesome样式图标的说明文档font-gallery.html，方便选择样式图标，通过访问http://[ServerName]/Apriso/Portal/ModernUI/Fonts/font-gallery.html，可以查看字体。有关Font Awesome样式图标使用可以参照https://fontawesome.com/官方文档。

Ø Plugins：保存DropdownButton和Threejs样式及JavaScript文件

Ø Scripts：保存EMRReports.js文件

Ø Styles：保存ModernUI.css和ReportsUI.css，其中ModernUI.css是ModernUI基础的样式文件，ReportsUI.css为报表的样式文件

Ø SVG：保存vqdt_defect图标文件

Ø Templates:保存ReportFooter.htm和ReportFooter.png文件

打开ModernUI.css文件，可以查看到内部定义的各项样式

3. 启用ModernUI

启用ModernUI样式首先需要引入样式文件，然后再Layout时设置各个Panel的CssClass名称即可。

▶第一步：部署ModernUI CSS样式文件到服务器

C:\Program Files\Dassault Systemes\DELMIA Apriso 2023\WebSite\Portal\ModernUI

▶第二步：修改Interpreter.css文件

1、文件路径：C:\Program Files\Dassault Systemes\DELMIA Apriso 2023WebSite\Portal\Styles\Default\ interpreter.css

2、增加一行并保存：

@import url("../../ModernUI/Styles/ModernUI.css");

▶第三步：Layout设计中启用ModernUI

在Layout设计中选择根节点，在General Tab à Style Section à CSS Classes中输入ModernUI即可启用ModernUI样式

样式对比

1、启用ModernUI样式的界面

2、 Apriso经典样式

4. ModernUI布局模板

1、布局层类型Layer type说明：

Ø Background：页面最底层，通常根节点设置为background

Ø Panel :页面中间层，通常只用于布局而不展示内容的过渡层

Ø Sub-Panel：页面最顶层，用于绑定View并展示页面内容和元素

Ø Transparent(show content only)：透明层，没有背景只展示内容

不同的层颜色不一样：

2、ModernUI样式示例：

如果Panel分隔在不同的容器中，则自动会加上Panel之间的间隔。

系统运行后，界面效果