IBM BPM包括许多可用于教练的充满活力且可配置的控件。 指导是人类服务的用户界面：您使用指导来构建供您的流程参与者与服务进行交互的网页。 有时，您可能需要更改用户界面页面上的样式，无论是更改颜色设计，主题还是控件本身。 本教程介绍了面向初学者的开发人员的可用选项，这些选项可以更改传统人类服务中教练的主题，从而为开发更复杂的控件提供基础知识。 相同的技术也适用于客户端人员服务中的教练，其中包含本教程中讨论的其他选项。
您应该对级联样式表（CSS），IBM BPM和coachs框架有基本的了解。 所描述的技术和工具包也可以用于需要较低开发时间开销的更高级的应用程序中。 这些技术在IBM BPM V8.X环境中起作用。
对IBM BPM应用程序进行主题更改时，重要的是要考虑到输出时间的要求。 业务流程应用程序的主要目的是对业务流程进行建模。 因此，主题更改应该是流程实施的次要条件。 本教程中介绍的某些方法比其他方法更耗时，但是所有方法都专注于快速产生结果。 可以在其他资源中找到其他更复杂，更耗时的方法，这些方法可以产生更高级别的配置，例如在IBM Business Process Manager 8.5.5中设计响应式教练以及在组织中利用IBM BPM教练框架 。 此外，还有其他可用于IBM BPM的样式表技术，例如CSS的LESS和SCSS预处理器语言，您可以在声明中使用逻辑或脚本。 但是，LESS和SCSS实现的复杂性超出了本教程的目标读者的水平。
教练由称为教练视图的用户界面控件组成。 您可以在Process Designer中创建教练视图。 IBM BPM包含Coaches工具包，其中包含许多可用于创建教练的教练视图，如图1和图2所示。
图1. IBM BPM附带的工具包
图2. IBM BPM中包含的教练控制示例
这些组件在业务用户如何与绑定数据进行交互方面具有高度的可配置性，因此您可以根据需要快速创建教练。 IBM BPM教练是根据开源JavaScript Dojo Toolkit中对Claro主题的定制而构建的。 包含的控件使用蓝色方案。 对于某些组织而言，经常需要的是将教练更改为更能反映公司或现有应用程序的颜色和主题。 组织可能希望更改其应用程序中使用的许多颜色和主题。 本教程研究了几种更改颜色和主题的方法。
您可以通过多种方式更改IBM BPM流程应用程序的主题。 有些方法比其他方法更简单，并且对于某些方法而言，将更改扩展到整个应用程序是不可行的。 以下各节研究了一些可用选项，用于配置IBM BPM附带的Coaches工具箱。
使用自定义属性更改用户界面的主题
控件的“ HTML字段”选项卡中有两个选项：自定义属性和自定义类。
配置颜色和主题的最简单方法之一是通过要更改的控件上的自定义属性字段。 单击Add attribute ，如图3所示。
图3.控件上的自定义属性
示例：将红色应用于样式背景色
您可以通过在控件上声明新CSS属性来向控件添加颜色和配色方案更改。 在控件本身上，您可以声明一个样式元素，该元素直接应用于控件HTML。 任何CSS属性都可以通过这种方式进行更改，但是由于类中包含大量的类，因此很难控制它。 如果将CSS属性添加到控件，则可能看不到更改，这是因为影响控件的类比明显的多，或者控件被其他控件包装。 如果您尝试将颜色更改应用于表控件，则该控件没有任何React，因为该类不是教练提供的实际基础类。 从初学者的角度来看，请考虑通过配置自定义属性不能更改某些控件。 以这种方式更改诸如表格之类的组件需要更多的时间和不同的方法。 图4和5显示向表中添加样式以将背景色设置为红色不会影响表的输出。
图4.在表中添加样式以将coach的背景色设置为红色的示例
图5.输出文本示例
即使将样式也添加到所包含的输出控件中，背景色也只有极少的改变，如图6所示。
图6.输出文本示例
发生此现象的原因是Coaches工具包中的几个控件在类中包含类。 图7显示了CSS文件。
图7. CSS示例
两个绿色框显示了表本身附带的样式，该样式不会更改输出。 请注意，您必须深入教练HTML才能找到输出文本的样式声明，该声明在黄色框中标记。 尽管在教练面板上看起来似乎没有太大区别，但是IBM BPM在这两个组件之间附加了所有这些HTML和CSS代码。 因此，很难通过属性覆盖来创建所需的更改。 还考虑可伸缩性。 如果需要更改，则必须返回并更改每个控件，这在企业应用程序中是不切实际的。
使用自定义类更改用户界面的主题
通过控件的“ HTML字段”选项卡的另一种方法是将类添加到控件。 此方法将类添加到最外部控件HTML，而属性样式方法仅添加到控件的样式定义。 向控件中添加类比使用一个样式属性使您更容易引用控件，因为您可以使用该类将样式应用于多个组件。
图8显示了使用自定义类添加红色背景的示例。 点击添加课程。
图8.控件上的自定义类
示例：向教练添加班级替代
添加班级覆盖要求您向教练声明新的班级和属性。 有多种声明方法。 使用定制HTML块，如图9所示，您可以声明redBackgroundClass的属性，并在同一教练的其他组件上使用该类。 也可以使用以下方法在教练视图中访问这些类。
如果在单个控件上使用小的静态更改，则可以使用属性或类。 例如，如果您的更改仅影响一个指导者，不影响全局应用程序，在进行中的开发期间永不改变或仅影响最少的控件集（一个指导者的一个按钮颜色永不改变），则使用属性或类改变）。
但是，类和属性不那么容易扩展，并且在整个应用程序中也不容易更改。 因此，它们通常不能为大规模变更提供理想的解决方案。 使用自定义类需要维护附加的样式表或嵌入式CSS，并且需要将类添加到控件本身。 如果样式在开发过程中发生更改，并且您在控件上使用类或样式，则可能需要大量时间才能实现该更改。
示例：向教练添加自定义HTML块
有几种方法可以创建CSS类和属性，以影响前面讨论的类添加。 这些方法中最简单的方法是向教练添加一个自定义HTML块，如图9所示。
图9.自定义HTML块示例
您可以使用HTML块声明CSS。 因为HTML块已本地化为一个教练，并且需要其他文本才能提供正确的功能，所以这种方法不像其他方法那样具有可伸缩性或可维护性。 如果您想避免使用CSS附件，这对个别教练可能会很有用。 这也可能很有用，因为您可以使用<br>标记，轻松为所需元素提供间距。
示例：向应用程序添加CSS文件
将CSS文件附加到应用程序是另一个提供更高级别的可伸缩性和可配置性的选项，如图10和图11所示。
图10.在Process Designer中将CSS文件作为Web文件附加
图11.选择.css文件
使用辅导员视图更改用户界面的主题
在前面的部分中，您看到了有关CSS和HTML如何根据类，样式和Coach视图覆盖进行更改的示例。 现在，学习如何在页面级别或新的教练视图级别进行更改。
将CSS文件添加到教练的最有效方法是使用Coach视图。 Coach视图可以使用包含的文件行为或内联CSS来保存更改。 使用内联CSS，您无需上传新文件即可进行快速更改。 使用附件文件对于保存处于静态开发阶段的大量类或导入第三方CSS库更有用。 创建教练视图后，该CSS将在面板中对应用程序中的所有教练可用。
示例：使用附带的脚本向教练视图添加内联CSS文件
在教练视图中，添加CSS文件可作为包含在所包含脚本中的Web文件获得。 要将CSS文件添加到应用程序，请创建指导视图并打开“ 行为”选项卡。 单击Included Scripts部分右侧的Add图标，并附加上载CSS文件，如图12所示。
图12. coach视图的Inline CSS选项卡
示例：使用Coach视图的“内联CSS”选项卡
教练视图的“内联CSS”选项卡是您可以在其中将CSS文件附加到用户界面页面的另一个位置。 使用内联CSS的优点是您只需确保教练视图位于所有需要主题的页面上。 重要的是要注意，您可以使用“内联CSS”选项卡直接进入这些类。 将CSS附加到页面上不需要脚本或文件标签。
将CSS直接添加到教练的另一种方法是：在“布局”选项卡上使用自定义HTML块，然后在其中声明CSS。 但是，此方法不是首选方法，因为它需要付出额外的努力才能使其起作用。 通过在“布局”选项卡上使用自定义HTML块并声明CSS，可以直接在教练上进行CSS更改，这对于测试或创建快速概念验证页面非常有用。 它提供了一个可以保存CSS文件的位置，而不是单个控件上的样式更改，并且您可以将CSS文件附加到教练上，而无需创建教练视图。 但是，当在整个流程应用程序中使用时，将自定义HTML块添加到“布局”选项卡可能非常难以维护，并且很难确定哪个CSS正在影响哪些控件。 对于其他开发人员而言，该块包含的内容可能不是立即显而易见的，并且还需要使用样式标签。
最好使用coach视图的Inline CSS选项卡，如图13所示。
图13.使用Inline CSS选项卡添加一个CSS文件
示例：使用Coach视图作为模板
教练视图也可以用作教练的模板。 这使您可以轻松地在整个应用程序中扩展一个包含CSS文件的教练视图。 在应用程序中创建教练时，系统会询问他们是否要从模板开始。 选择包含所需CSS文件的模板后，Coach自动包含在Coach视图中创建CSS。 如果您希望应用程序中有此行为，请转到Overview选项卡，然后选择Use as a Template ，如图14所示。
图14.用作教练视图的用作模板选项
需要一个模板来包含一个内容框，该框允许所有开发人员向教练添加控件。 可以配置一个包含CSS文件的coach视图模板，并选择“用作模板” ，使用包含的脚本附加一个CSS文件以及在“布局”选项卡中的内容框，如图15所示。
图15.教练视图的“布局”选项卡上的内容框
使用社区资产更改用户界面的主题
专为允许初学者IBM BPM开发人员更改教练中用户界面页面的主题而创建的一些社区资产。 重要的是要注意，IBM BPM产品支持先前描述的使用定制类或教练视图更改主题的方法，但是可能不支持社区资产。
Color Toolkit社区资产
Color Toolkit社区资产是可更改组织教练的配色方案的最具可扩展性的解决方案之一，可从IBM Bluemix DevOps Services的Smarter Process社区获得，作为bpm-ui-brandingTK社区资源的一部分。 Color Toolkit是社区资产，这意味着IBM并没有特别支持或认可它，并且不能保证它在所有情况下都可以使用。 在Color Toolkit社区资产中，名为Color CV的coach视图使用Dojo Toolkit中的Claro主题作为策划基础，该主题允许使用任何颜色。 教练视图使用基于JavaScript的算法来计算和覆盖Claro主题的85种颜色。 提供基色可以在使用它的每个教练上快速进行可扩展的更改。 如果配色方案不是您的组织所希望的，则可以对基本颜色进行一些更改，然后页面上每个组件的颜色都会更改。
通过在每个教练的Color CV教练视图中使用“本地资源”或“环境变量”设置，可以在整个应用程序中进行快速更改。 教练视图还允许许多其他配置以及对特定控件的更改。 除了基础颜色调整之外，您还可以定位特定的字体颜色，标题颜色，背景和字体。 使用Color Toolkit可以在几秒钟内完成相对复杂的用户界面更改。 参见图16-19中的示例。
图16.调色板上的Color Toolkit社区资产
图17. Color Toolkit社区资产的配置
图18.使用红色作为基本色的示例
图19.一个更生动的示例
品牌工具套件社区资产
除了更改配色方案外，在某些情况下，您需要在教练上进行完整的品牌宣传，包括反映您的组织的徽标和横幅。 Branding Toolkit社区资产是另一个选项，它使开发人员可以相对轻松快捷地向教练添加业务资产。 它可以从IBM Bluemix DevOps Services的Smarter Process Community中作为bpm-ui-brandingTK社区资源获得。 请记住，社区资产是独立开发的，不能保证在所有系统上都能正常运行。 在IBM Knowledge Center上的IBM BPM文档中的“ 连接到WebDav文件夹以定制Process Portal”中讨论了将徽标放置在Process Portal上的其他解决方案。 但是，本教程将逐步介绍使用Branding Toolkit社区资产向教练添加图像的方法。
第一步是将图像添加到应用程序的文件中，如图20所示。
图20.在Process Designer中将图像添加为新的Web文件
示例：使用品牌工具套件将图像添加为Web文件
通过从文件中选择图像，将图像添加到教练中，然后根据需要将其拖放到教练上。 更高级的开发人员可以使用CSS文件根据需要调整大小和放置图像。 使用品牌工具包可消除此要求。
Branding Toolkit社区资产包含一个模板，该模板可应用于教练，其中包括颜色教练视图以及一些有助于快速更改徽标和横幅的其他配置，如图21和图22所示。
图21.调色板和配置上的品牌指导视图
图22.品牌教练视图示例
示例：在品牌指导视图中使用横幅图像和颜色指导视图
模板配置允许根据配置在页面上应用和定位几种类型的图像。 标语图像应为宽幅和短幅图像，放置在教练上方控件上方。 徽标图像旨在作为一幅小图像放置，然后可以将其放置在与控件内联的页面上。 模板会自动计算并更改图像的位置，否则开发人员将需要这样做。 如果图像可能会更改，或者您想提供快速的用户界面修改，则计算和更改图像的位置可能很耗时且不切实际。
例如，如果您需要为教练的应用程序添加横幅，如果使用了环境变量，则只需将文件名应用于所需的配置类型，并将图像应用于每个页面即可。 使用环境变量或本地化资源可以在整个应用程序中提供快速的更改级别。
结论
本教程研究了更换教练并快速将主题更改部署到所包含组件的各种方法。 您了解了影响应用程序可能需要教练指导的品牌变更的各种方法的利弊。 对于完整的应用程序样式，附加托管的外部CSS文件可能是最具扩展性和可维护性的。 样式附件可用于影响不太可能更改的小而简单的更改。 类附件可用于影响大量控件，但是它们需要额外的工作。 教练视图使您可以轻松地将主题更改扩展到整个应用程序，但是您仍然可能需要花费大量的精力来查找要更改的类。
最后，本教程描述了社区资产工具箱以及如何在IBM BPM环境中使用它们。 社区资产旨在为初学者和寻求快速实施的开发人员带来最大的影响。
致谢
作者要感谢James Carr的评论和对本教程的贡献。
翻译自: https://www.ibm.com/developerworks/bpm/bpmjournal/1506_grant1/1506_grant1-trs.html