创建和更新主题

传统:
您可以创建主题以向一组视图提供公共样式。 您可以更新正在运行的流程应用程序的主题,而无需重新部署该流程应用程序。

关于本任务

创建主题涉及到为一组主题变量分配值。 缺省情况下,新的流程应用程序使用“Carbon”主题,因为该主题包含一组完整的变量以供 UI Toolkit 中的视图使用。 如果您要创建自己的主题,然后在自己的流程应用程序中使用其中任何 UI 视图,请使用“Carbon”主题作为您的起点。 随后,您可以通过添加定制变量和修改变量来扩展自己的主题。 变量以 bpm 前缀开头。

BPMUpdateCommand 将使用源项目的主题定义来更新目标流程应用程序或 Toolkit Snapshot。 您可通过多种方式使用该命令,但以下过程中的步骤提供了有关如何高效使用该命令的建议。

过程

要创建主题,请执行下列操作:

  1. 单击 用户界面 旁边的加号,然后选择 主题
  2. 指定新主题的名称。
  3. 选择要从当前项目或从属 Toolkit 中复制现有主题还是导入主题。
    重要信息: 如果要导入主题,请确保它包含所有变量以及注释和元数据。 如果该主题不包含这些变量,并且您使用 UI 视图,那么系统为流程应用程序生成 CSS 时会发生错误。 为此,请将您的主题基于“Carbon”主题或者您已知包含所有变量的其他主题。 变量以 bpm 开头,并且均为保留定义。
    单击完成后,编辑器会打开新主题。
  4. 在主题编辑器中,向主题变量分配值。
    value 可以是具体的值、一个公式、另一个变量或上述类型的组合。 例如,@bpm-neutral: #586464 会将值定义为特定颜色,而 @bpm-link-color: @bpm-color-primary; 会使用另一个变量的值来定义该值。
    • 在“设计”页面中,更改一个或多个变量的值。 许多变量都有一个图样,您可以单击该图样,然后从选择器中选择值。 样本视图会更新以显示新的值。 如果将鼠标悬停在视图上,您可以看到影响该视图的特定变量及其当前值。
    • 在“”页面上,向要更改的每个主题变量分配值。 如果您有要在其中添加动态样式的定制视图,请添加该样式的变量。 这些变量采用 Less 格式:
      @variableName: value;
      如果您想要在“设计”页面中显示定制主题变量,请添加类似以下示例的元数据:
                                      //|EM|{"group":"PREVIEW_GROUP_BASE_SETTINGS","order":"010020","type":"color"}|DE|
      @bpm-neutral-darker:  #2d3737;  //|EEM|
      该组是包含变量的类别的名称。 在此示例中,PREVIEW_GROUP_BASE_Settings 是本地化资源(基本设置)中值的键,但可以是普通字符串。
    " 设计 " 页面和 " " 页面会对另一个页面中所作的更改作出反应。 例如,您将以下变量添加到“”页面
                                        //|EM|{"group":"My Group","type":"color"}|DE|
    @my-color:            #0d1122;      //|EEM|
    如果转至“设计”页面,那么会看到包含 my-color 变量的“我的组”类别。
  5. 单击 保存完成编辑

要在不重新部署流程应用程序的情况下最大限度地提升因更新其外观而获得的优势,请执行下列操作:

  1. 创建一个 Toolkit 以包含流程应用程序或 Toolkit 将要使用的所有主题。
  2. 创建一个依赖于主题 Toolkit 的虚拟或空的流程应用程序。
  3. 对于每个流程应用程序或 Toolkit,在主题 Toolkit 上创建一个依赖关系。
  4. 部署流程应用程序以及虚拟流程应用程序。
    部署虚拟流程应用程序也将部署主题 Toolkit。
  5. 当您要更新所有流程应用程序的主题时:
    1. 更新主题 Toolkit 并部署虚拟应用程序的新 Snapshot。
    2. 使用新的哑元应用程序快照作为新定义的源来运行 BPMUpdateTheme 命令。
      您可能会使用该命令来编写脚本,以更新所有正在运行的流程应用程序。
      有关该命令的信息,请参阅 BPMUpdateTheme 命令

结果

根据主题定义中的更新值来生成 CSS 代码时可能需要一些时间。 因此,在 Process Designer 使用主题定义中的新值来显示使用该主题的 Coach 和视图之前,可能会发生延迟。 在运行时,已生成 CSS 代码,因此不会发生延迟。