Apriso 开发葵花宝典之四 CSS 篇

李英杰同学

发布于 2023-09-02 08:33:15

2900

发布于 2023-09-02 08:33:15

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

本文作者陈捌华，感谢捌老师倾情奉献。

概述

Process builder是Delmia Apriso中主要的业务流程管理工具，也是DELMIA更广泛的Apriso制造运营管理解决方案的核心应用程序，Process Builder允许使用屏幕流管理设计方法和实体（如项目、屏幕、布局、视图和操作（函数））创作用户界面和业务逻辑。该应用程序能够快速方便地管理和修改开发的设计，使您能够根据需要随时更改业务流程。由于增强了对可重用性的支持，以前开发的逻辑可以在新的设计中快速重用。

本文介绍Process builder开发过程中的CSS样式应用。

样式引入和应用

层叠样式表(CSS)是一种样式表语言，用于描述用标记语言编写的文档的表示。CSS是Web的核心语言之一，是HTML文档样式化的标准。在Apriso Process builder开发过程中，在HTML选项卡中，CSS样式应用于每个Operation实例，在CSS选项卡中，同一个操作的所有实例只应用一次CSS样式。

可以有以下几种方式引入CSS：

1、外部样式表（External Style Sheet）写在单独的文件(. CSS)，可以附加到多个网页，这是实现CSS的最好方法

<head>
<link href=”/Apriso/Portal/Styles/Default/header.css” type=”text/css” rel=”stylesheet” />
<link href=”/Apriso/Portal/Styles/Default/screen.framework.css" type="text/css" rel="stylesheet" />
</head>

也可以使用@import来引入一个样式表

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

2、嵌入/内部样式表(Embedded Style Sheet )是嵌入在文档头部的样式。嵌入式样式只影响嵌入它们的页面上的标签。

 <head>
<style type="text/css"> h1{ color:red } p{ color:blue } </style>
</head>

3、内联/行内（ Inline Style Sheet ）样式表是直接写在文档标签中的样式。内联样式只影响它们所应用的标签。

<body>
<h1 style="background-color:yellow"> My First Heading1 </h1>
</body>

Apriso中不同层级的应用方式：

1、Layout样式引入

可以从下拉框中选择样式名称，也可以直接输入样式名称：
- 只有定义在interpreter.css文件中的样式才会出现在下拉列表中
- 在其它样式文件中的名称只需要手工输入即可
- 通过@import规则引入的样式名称也不会出现在下拉列表中
- 不同的Panel设置不同的样式名称
可以设置样式名称，也可以直接设置行内（Inline Style）样式

2、Form样式引入

每个Form Control的Advanced也中可以设置样式
设置自定义的样式名称，使用jQuery进行DOM元素的快速选择

3、Business Control样式-Grid

可以通过CSS Class Name和CSS Style进行样式设置

Apriso中的样式

Process builder中提供了server mode和client mode两种页面运行模式，两种模式页面渲染模式不同，同样调试视图、debug tree等也存在差异(详细差异可能在其他文档中进行介绍)。

1、主题下几个主要的样式表文件：

apriso.css Portal外观样式
interpreter.css Function Interpreter函数解析中使用的样式
apriso_mobile.css 移动版本的apriso.css样式文件
interpreter_mobile.css 移动版本的interpreter.css样式文件
keyboard.css - controls 屏幕键盘keyboard样式文件
screen.framework.css Font Awesome样式文件

2、 interpreter.css ：

Apriso中主要的样式文件；
Process Builder中Class Name下拉框的样式名称来源；
通过@import规则引入其它的CSS样式文件，如：@import url("../../ModernUI/Styles/ModernUI.css");
@import引入的样式名称并不会出现在下拉框中；

3、创建客制化主题：

赋值现有的主题目录，如Default目录
重命名复制后的目录名称，如“PACCAR”
根据需求修改interpreter.css和apriso.css
修改CentralConfiguration.xml文件中Portal 章节下的theme键值，指定到新建目录 重启服务后，新主题才能生效
生效后interpreter.css和apriso.css几个样式文件打包形式出现在页面上

4、Apriso框架决定什么时候以及应该包含哪个css文件。这取决于:

客户端设备类型(移动或PC/笔记本)
在Central Configuration.xml中Theme的设置
界面内容，来自Portal (M&M屏幕)还是函数解释器（FI）

CSS Framework

建议使用已经定义好的CSS类。CSS Framework支持Client Mode客户端模式。样式分类和样式名称整理如下（详见http://[ServerName]/Apriso/Help/en-us/CSS/index.htm）：

Awesome Font字体图标用法

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

1、基本用法

可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀fa,再加上图标名称。Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用<i>,因为它更简洁。但实际上使用<spa>才能更加语义化。

基础用法：<i class="fa fa-camera-retro"></i>
大图标：使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类来放大图标，如

 <i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>

固定宽度：使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。尤其在列表或导航时起到重要作用。如

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

动画：使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog，如

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
 <i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

旋转与翻转：使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转，如

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

2、伪元素 ::before和 ::after用法：

::before 定义元素之前添加内容。::after定义元素之后添加内容，和字体图标结合可以实现在元素之前或者之后添加图标，如

.square-solid:before {
    font-family:"Font Awesome 5 Free";
    font-size: 120px;
    font-weight: 900;
    content: '\\f0c8';
}

font-family：定义字体名称

font-size和font-weight：定义图标大小和样式

content：定义图标编码

最佳实践

1、保持一致性，确保CSS命名约定一致。id和类应该是小写的，应该使用破折号而不是下划线，例如:"label-left"

2、保持可读性，在不同的行中分开选择器和样式。此外，每个样式都应该缩进

3、语句结束后使用分号

4、首先编写html代码，首先编写整个HTML模型可以让您将整个视图可视化，并允许您以更全面，自上而下的方式考虑CSS

5、自上而下的结构组织样式表,按照HTML代码中出现的样式编写样式，从头部到主内容再到页脚

6、如果样式表中的元素共享属性，建议将它们组合在同一个选择器中，如

H1, h2 {
  Color: red;
}

7、最小化选择器，尽量不要超过3个结构伪类、后代或兄弟组合

8、尽量减少id的使用，避免不必要的重要元素样式

9、使用简写属性，如

div {
  padding: 8px 16px 4px 8px;
  margin: 8px 16px;
  border: 1px solid;
}

10、指定0时使用无单位值，例如，如果您指定边框宽度为0，则没有边框，但如果您指定边框为0px，则将创建一个0px的边框，如

div {
  margin: 0;
  padding: 8px 0 0 8px;
}

11、使用名称或十六进制颜色值，如果需要透明度，请使用rgba。否则，始终使用十六进制格式或所需颜色的实际名称

12、使用注释CSS，就像任何其他语言一样，分段注释代码是个好主意。要添加注释，只需在注释后面添加/*，然后添加*/关闭注释

13、使用外部样式表文件统一管理，引入样式表文件统一保存到Portal目录下指定的文件夹中，便于打包发布

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-05-25，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自智能制造社区微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

Apriso 开发葵花宝典之四 CSS 篇

Apriso 开发葵花宝典之四 CSS 篇

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐