主题

在线编辑
Draft comment:
This topic is shared by BAW, CP4BA, CP4BASaaS. Last updated on 2025-01-20 10:38
主题由一组可应用于 流程应用程序 或 Toolkit 的主题定义，动态样式表和生成的 CSS 组成。

主题定义由一组主题变量及其值组成。 例如，主题定义可能包含一个 background 变量，其值为 white。 视图可能包含一个动态样式表，而此样式表使用了来自主题定义的变量。 当多个视图使用同一个主题定义时，可能有一组视图使用一致的可视外观。 此外，可以通过更改主题变量值来轻松地对这些视图进行全局可视更改，而不需要更改视图定义。 主题定义和动态样式表都支持 Less 样式表语言，因此，您可以使用其语法和函数来增强自己的定制视图。

视图使用正在运行的上下文的主题定义，即当前正在使用该视图的 流程应用程序 或 Toolkit。 您可以使用此功能将一个 流程应用程序 中的视图以一种方式设置为样式，将另一个 流程应用程序 中的相同视图以另一种方式设置为样式。 虽然这两组视图具有相同的动态样式表，但样式表使用具有不同值的主题定义。
主题示意图由一组主题定义、动态样式表和生成的 CSS 组成，可应用于流程应用程序或工具包

主题定义和动态样式表组合起来以动态生成一组 .CSS 文件。 当 流程应用程序 显示页面时，它会使用这些 CSS 文件来设置页面中包含的视图的样式。 生成 CSS 需要一些时间，因此如果要在设计器中查看 流程应用程序 ，那么您可能会看到页面中的视图使用缺省或旧主题值，直到新的 CSS 可用为止。 在运行时，已为已部署的 流程应用程序 生成 CSS ，并且不会发生延迟。

当设计者显示视图时，它使用当前打开的 流程应用程序 或 Toolkit 的主题来对布局中的视图进行样式设置。 此功能意味着根据您打开的 流程应用程序 或 Toolkit ，同一视图在设计器中的外观可能不同。 "系统数据" Toolkit 中的 Carbon 主题是较新的 流程应用程序的缺省主题，它提供视图的主题定义。 碳主题提供视觉资产（颜色、图标、字体等），使流程应用程序和视图的交互、外观和感觉与 IBM® 设计系统的指导原则保持一致。 更多信息，请参见碳设计系统。 有关示例，请参阅 示例: 应用 Carbon 主题。

您也可以应用定制 Toolkit 中的主题。 例如，可以在定制 Toolkit 中创建某一种类型的按钮视图。 在 Designer 内的 Toolkit 中，应用于 Toolkit 的主题将按钮的样式设置为蓝色。 流程应用程序 将 Toolkit 作为依赖关系。 但是， 流程应用程序 具有将按钮样式设置为橙色的主题。 您查看按钮时的上下文将决定按钮的颜色：
  • 如果在设计器中打开 Toolkit 并将该按钮添加到页面或视图，那么布局会将该按钮显示为蓝色。
  • 如果在设计器中打开 流程应用程序 并将该按钮添加到页面或视图，那么布局会将该按钮显示为橙色。
  • 如果运行 流程应用程序，那么浏览器会将按钮显示为橙色。
除了可以通过主题应用的造型外，还可以在设计师中以其他方式应用造型。 以下列表提供了多个方式，可用于设置视图的样式，从而使列表中较高位置的项覆盖列表中较低位置处设置的值：
  1. 视图布局属性的 HTML 属性页面中添加的类和属性。
  2. 视图行为的内联 CSS 中包含的样式。 为避免发生类名冲突，请使用内联 CSS 来临时开发 CSS 样式。 在开发样式之后，将其放入所包含的脚本中。
  3. 视图行为的包含脚本中的 CSS。
  4. 视图行为的动态样式中设置的样式定义。
  5. 由 流程应用程序 或 Toolkit 的主题设置的 CSS 定义。
您还可以使用层次结构来设置个别视图的样式。 容器中视图的样式值将覆盖容器自身所设置的样式值。 例如， 流程应用程序 具有一个主题，该主题将其所有视图的样式设置为使用主颜色 (蓝色)。 但是，如果您在该 流程应用程序 的页面中对按钮实例进行样式设置以使用 "成功" 颜色 (绿色) ，那么该按钮为绿色。 UI Toolkit 中的控件通过配置选项提供了这种设置实例样式的方式。