Apriso Modern UI样式系列之一 介绍及启用
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(?developer/article/2396648/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;} |
如果Panel分隔在不同的容器中，则自动会加上Panel之间的间隔。
系统运行后，界面效果
