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

李英杰同学

发布于 2024-03-14 15:59:54

2180

发布于 2024-03-14 15:59:54

文章被收录于专栏：智能制造社区

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样式示例：

层	Layout type	CSS Class	说明
Root	Background	ModernUI	根节点使用ModernUI引入样式
HEADER	Background	ModernUIHeader	.ModernUI .ModernUIHeader{background-color:#F1F1F1 !important; border-bottom:1px solid #E2E4E3;}
GROUP_A	Panel	ModernUIMainContent	.ModernUI .ModernUIMainContent{margin:0; border:15px solid transparent !important; border-top-width:15px; border-radius:0; background-color:#F9F9F9 !important;}
SUBHEADER	Transparent	ModernUISubHeader	.ModernUI .ModernUISubHeader h1{font-family:'3dsweb'; font-size:22px; font-weight:normal; margin:-4px 0 0 0; line-height:25px;}
GROUP_B	Transparent	MB	.ModernUI div.MB{margin-bottom:10px;}//底部margin设置为10px
LEFT	Sub-Panel	ModernUIPanel ModernUIContent	ModernUI .ModernUIPanel{width:auto; height:auto; background:#fff !important; border:1px solid #E2E4E3 !important; border-radius:6px !important; margin-left:10px; margin-right:10px; overflow:hidden;}.ModernUI .ModernUIContent{overflow:auto;}.ModernUI .ModernUIPanel:not(.ML):first-child{margin-left:0;}.ModernUI .ModernUIPanel.sf-panel-specific:not(.ML){margin-left:0}.ModernUI .ModernUIPanel.sf-panel-specific:not(.MR){margin-right:0;}
GORUP_C	Sub-Panel	ModernUIPanel ML	ModernUI .ModernUIPanel{width:auto; height:auto; background:#fff !important; border:1px solid #E2E4E3 !important; border-radius:6px !important; margin-left:10px; margin-right:10px; overflow:hidden;}.ModernUI div.ML{margin-left:10px;}//左margin设置为10px
TABS	Transparent	ModernUITabs	.ModernUI .ModernUITabs{overflow:visible;}.ModernUI .ModernUITabs, .ModernUI .ModernUIToolbar{border-bottom:1px solid #E2E4E3 !important; border-radius:0; background:#f5f5f5 !important;}
CONTENT	Transparent	ModernUIContent	.ModernUI .ModernUIContent{overflow:hidden;}
BOTTONS	BOTTONS	ModernUIButtons	.ModernUI .ModernUIButtons div{margin:0;}