ibm bpm开发 手册_定制IBM BPM教练的风格

ibm bpm开发 手册

当今的IT项目比以往任何时候都更需要丰富，有吸引力和高效的用户界面。 曾经保留给面向客户的系统的一组要求也越来越多地应用于内部系统。 企业现在希望在组织中所有应用程序的用户界面中使用一致的视觉样式，从而减少了培训新系统的用户，最大化品牌知名度并提高员工满意度的需求。

因此，对IBM®Business Process Manager（BPM）项目的日益普遍的要求是充分考虑教练的风格以及用户与他们的交互方式。 另外，IBM BPM的教练设计器的设计以开发速度为优先，而不是微调用户界面页面样式的能力。 这两个事实使组织在决定如何继续使用IBM BPM教练时面临一些困难的选择。

本文介绍了构建IBM BPM教练的模式，以及用于更改其样式的分层方法。 该模式允许您通过使用分层方法实现的自定义，从一个中央工具包在多个IBM BPM应用程序中推出，因此在应用程序级别需要的更改最少（如果有的话）。 从IBM BPM V8.0.1开始，该模式和分层方法可用于任何版本的IBM BPM。

本文演示了实现自定义和创建可在所有设备上正确显示的响应用户界面的端到端过程。 该方法已在多个组织中成功实施。 该模式可以识别在修改默认指导视图或从头开始创建全新的指导视图时出现的维护挑战。 这两个操作都会增加应用程序的维护开销，或者在更新IBM BPM时可能导致兼容性问题。 为了解决这些潜在问题，该模式仅使用默认控件，不需要复杂的专有工具包，仅在绝对必要时才使用新的Coach视图。 您可以阅读本文并实现该模式，而无需查看示例代码。 但是，GitHub上提供了一个示例.twx文件供参考。

本文重点介绍如何自定义响应式教练，并为您提供一种在整个企业范围内维护自定义设置的模式。 如果您不想对教练的风格进行重大自定义，但仍希望在所有设备上都能正常使用的响应式用户界面，请参阅“ 从任何地方访问IBM BPM”系列。

在IBM BPM V8.5.7中，新功能包括响应控件，网格布局和Process Designer中的主题定制器。 带有Coach框架和其他方法的IBM BPM的交付现代UI IBM Redbooks出版物和IBM BPM产品文档详细描述了这些功能。 如果您正在使用IBM BPM V8.5.7，并且不需要与早期版本兼容，那么您就没有在使用Bootstrap，并且您不需要教练视图定制的粒度，请使用IBM中描述的功能。 BPM V8.5.7文档和IBM Redbooks出版物。 IBM一直与Salient Process合作，发布了SPARK UI工具包和IBM BPM的增量更新，以准备将其完全嵌入到IBM BPM的未来版本中。 确保获取针对IBM BPM V8.5.7的最新累积修订。

您需要使用哪种模式

本文假定您对IBM BPM开发，CSS，HTML和常规Web开发有很好的了解。 了解Bootstrap CSS框架的功能是有帮助的，但不是必需的，因为其中包含指向易于遵循的教程的链接。

如果没有对Coach框架进行重大更改，则此模式可以与IBM BPM V8.0.1到IBM V8.5.7的任何版本一起使用，并且在以后的版本中也可以使用。 两个版本之间的IBM BPM缺省CSS文件可能会有小的更改。 如果您升级到新版本的IBM BPM，请在您的应用程序上运行回归测试。

在本文中，屏幕截图和其他示例都使用示例工具包。 您可以从GitHub的DeanCleaverIBM / CustomisingIBMBPMStylePatternAndMethods下载此示例应用程序并进行试验。

.twx示例文件是在IBM BPM V8.5.6中开发的，只能导入到IBM BPM V8.5.6或更高版本中。 即使您使用的是IBM BPM的早期版本，并且无法使用示例.twx文件，您仍然可以通过阅读本文来遵循该模式。

建筑教练的模式

IBM BPM中构建教练的模式由两部分组成。 第一部分是可重用的模板，您应该在整个应用程序中的每个指导中使用该模板。 该模板包含必需的库文件，字体和CSS文件。 模式的第二部分是Bootstrap和实现Bootstrap所需的教练视图。

模板

Coach Template组件是模式的核心。 它包含库文件，CSS文件和基本商标元素。 该模板实现了定制方法，稍后将对此进行讨论。 因此，实现自定义方法的每个应用程序都必须将此模板用作所有教练的基础。

以下屏幕截图显示了来自GitHub上的示例.twx文件中Coach Template组件的“布局”选项卡。

正如您在上一个屏幕截图的顶部看到的那样，该示例中的Coach模板具有一个IBM徽标，该徽标被配置为显示在屏幕的右上方。 模板中的下一项是一组三个自定义HTML块的集合，其中包含HTML格式和标题块，该标题块由绑定到coach视图的配置选项的变量设置。 内容框是模板中的下一项。 最后，有四个教练视图，每个视图包含一组包含的文件和脚本。

包含在文件和脚本中的教练视图而不是被包括在“ Coach Template行为”选项卡中，而是它们内容的包装器。 使用这种方法，可以更轻松地单独更新，移动和修改内容。 您不需要更新模板。 如果将来有需要，使用该工具包的所有开发人员都可以灵活地独立使用教练视图。 这些教练视图除了包含文件和脚本之外，没有其他用途。 详细信息将在本文的后续部分中进行解释。

Font_Awesome教练视图包括在使用Coach Template的Coach Template上使用Font-Awesome所需的所有文件。 Font-Awesome是一个图标字体包，可用于将轻量级，可自定义，可缩放，基于矢量的图像插入您的网页。 虽然本文不是重点，但随附的示例工具包中的某些教练使用了Font-Awesome。 您不需要本文进一步了解Font-Awesome，但可以在http://fontawesome.io上了解更多信息。

Bootstrap_Files教练视图包含在网页上（或在本例中为教练）实现Bootstrap所需的所有文件。 在下一节中，您将了解有关Bootstrap以及如何使用它的更多信息。

CSS_Overrides教练视图包含对IBM BPM基本样式CSS覆盖，从而在示例工具箱中为教练提供了独特的外观。 在以下各节中了解更多信息。

IBM_CSS_Classes教练视图包含示例工具包中的所有定制CSS类，您可以使用它们来设置特定元素的样式。 在以下各节中了解更多信息。

引导程序

为了实现各种类型的设备都能很好地显示的响应式用户界面，用于定制IBM BPM教练的模式使用Bootstrap，HTML，CSS和JavaScript框架来开发响应式移动项目。

有关Bootstrap的更多信息，请访问www.getbootstrap.com 。 如果您以前从未使用过Bootstrap，请在W3Schools网站上的Bootstrap 3教程中了解其响应功能。

有许多用IBM BPM实现的Bootstrap的示例，但是通常将它们与专有实现联系在一起，或者它们具有难以定制的特定视觉样式。 本文中的方法展示了如何通过两个简单的实现CSS框架的教练视图来实现Bootstrap的响应能力。 以下各节将详细介绍Coach视图，称为Bootstrap Row和Bootstrap Column 。

该模板包括Bootstrap JavaScript库，您可以创建使用Bootstrap的新控件。 一些IBM BPM客户已经使用了这种方法，但是本文没有深入研究那些示例。 您可以在W3Schools网站上的Bootstrap示例中查看示例。

引导行教练视图

该Bootstrap Row教练视图由两个HTML块组成，两个HTML块之间有一个内容框。 第一个HTML块打开<div>标记并应用Bootstrap Row类，第二个HTML块关闭<div>标记，如以下屏幕截图所示。

结果是可以将教练视图拖放到教练设计器中。 然后，放置在该Coach视图中的所有内容都将受到Bootstrap列所需的row类的影响。

Bootstrap Column教练视图

Bootstrap Column教练视图的构建方式与Bootstrap Row教练视图非常相似。 最终结果是一个<div>标记，该CSS类别附加到<div>标记，并且在<div>标记内放置了一个内容框。 但是，在这种情况下，如果您使用columnWidth配置选项，则CSS类是可用于此教练视图的几个类之一。

包含开头<div>标记的自定义HTML块不是具有CSS类的简单<div>标记，就像在Bootstrap Row教练视图上那样。 而是将内容绑定到columnWidth变量的值，如以下屏幕截图所示：

如您所见， columnWidth变量的变量类型为BootstrapColumnSelectionType 。 以下屏幕截图显示了如何在Bootstrap Column coach视图的Variables选项卡上设置columnWidth变量。

BootstrapColumnSelectionType是列表数据类型的业务对象，基本上是一个字符串。 只能将其设置为在业务对象配置页面中设置的列表条目之一的值，如以下屏幕截图所示：

当您将清单数据类型添加到教练视图时，例如Bootstrap Column教练视图的示例，它在教练设计器中显示为下拉列表，如以下屏幕截图所示：

BootstrapColumnSelectionType中可用的每个选项都是Bootstrap CSS类，它们会根据最终用户的设备屏幕大小来影响Bootstrap框架遵循的行为。 Bootstrap提供了更多可能性，但是为了使示例工具包保持简单，仅包括一些常用工具包。 您可以通过W3Schools网站上的Bootstrap 3教程了解更多信息。

在Boots View中使用Bootstrap框架响应功能

本节使用示例应用程序和工具包来演示如何组装Bootstrap Row和Bootstrap Column教练视图以创建响应式用户界面。

以下步骤显示了如何组装一个教练，该教练在您可以从GitHub下载的示例应用程序和工具包中反映了单元测试示例。 本文中的示例使用传统的人工服务，因此您可以将其与从IBM BPM V8.0.1开始的IBM BPM版本一起使用。 有关更多信息，请参阅IBM BPM文档中的主题为人类的服务与客户端的人类服务之间的区别 。

1. 创建一个传统的人文服务，向其添加教练，并将其链接到开始和结束事件。
2. 打开教练设计器。
3. 将Coach Template添加到教练。 现在，模板中的所有内容都可以访问响应功能所需的Bootstrap JavaScript和CSS代码。
4. 单击模板，然后切换到配置选项卡。
5. 在模板配置选项卡中添加标题，如以下屏幕截图所示：
   
6. 添加一个Bootstrap Row教练视图，您应该看到一个Coachs选项卡，其外观类似于以下屏幕截图：
   
7. 添加一些Bootstrap Column教练视图，并在每个教练视图的配置选项卡中将其宽度设置为12/4。 以下屏幕截图显示了“教练”选项卡，其中添加了这些教练视图：
   
8. 将内容添加到每个列，如以下屏幕截图所示：
   
9. 然后运行单元测试教练进行测试。

   以下屏幕截图显示了大屏幕上显示的单元测试指导，类似于流程应用程序的最终用户如何看待它：

   

   以下屏幕截图显示了在小屏幕上显示的单元测试指导，类似于流程应用程序的最终用户如何看待它：

   

教练风格的分层方法

在Web应用程序中创建丰富的用户界面时，可以使用几种不同的方法来创建所需的外观。 IBM BPM也不例外。 但是，每种方法都有其自身的优点和缺点，并且每种方法都适用于不同的场景。

以下各节描述了为IBM BPM流程参与者设置用户界面样式的每种方法，并对它们进行了优先排序。 第一部分涵盖页面的常规样式，第二部分涵盖特定教练视图的样式。

设计方法的这种层次结构，以便使列表顶部的方法最简单，最可重用且最易于维护。

页面的一般样式

以下是页面一般样式的以下样式技术，按优先级列出：实现第一种方法，但如果不可能，请移至列表中的下一个方法。 以下各节详细讨论了每种方法。

1. 集中式CSS覆盖文件，用于覆盖标准IBM BPM CSS文件
2. 带有其他类的集中式CSS文件
3. HTML属性（内联样式）
4. 自定义HTML块

方法1：集中式CSS覆盖文件，以覆盖标准IBM BPM CSS文件

在IBM BPM中修改用户界面外观的第一个地方是一个集中式CSS文件，该文件会覆盖标准的IBM BPM Claro Theme CSS文件。 可以拖到IBM BPM中的教练上的每个元素都有相关的类。 这意味着您可以引用这些类以覆盖基本样式表并应用其他样式

您可以像在IBM BPM中通常创建的那样创建教练，然后运行该服务。 然后，使用浏览器开发工具浏览各种页面元素，以发现引用了哪些类。 您可以将类放在应用了新样式的集中式文件中，然后将文件附加到用作每个教练基础的模板上。

在GitHub上的示例中，请参阅附加到Coach Template上的CSS Overrides教练视图的附加CSS文件（ bpm&bootstrap-css-overrides.css ）。 以下屏幕截图显示了使用示例工具包构建的教练的样式。

示例应用程序和工具包提供了使用此方法可以完成的变更规模的良好示例。 所得样式与IBM BPM的缺省样式有很大不同。

这种方法在层次结构中首屈一指的原因是，快速且相对简单地快速修改整个应用程序（甚至正确实施的话甚至是多个应用程序）中所有用户界面的外观。

CSS文件集中存储在模板中，更改会在使用该文件的任何地方复制。 如果文件和模板存储在工具箱中，那么所有引用该文件和模板的IBM BPM应用程序（并保持其依赖性）都将随着样式更改而保持最新。 甚至可以将CSS文件存储在HTTP服务器上，并在模板中引用它，这意味着即使在部署所有IBM BPM应用程序之后，您也可以更新用户界面。

确定覆盖哪些CSS类的方法很简单。 在任何常用浏览器中打开IBM BPM教练，然后使用元素检查器单击每个元素，并检查这些元素使用了哪些CSS类。 然后在集中管理CSS文件中覆盖这些类。

在以下屏幕截图中，在Chrome元素检查器中选择了headerContentNode div。

您可以在右侧看到dojoxGridHeader CSS样式已应用于此元素。 应用于此类的所有替代都可以添加到影响页面上元素样式的集中管理CSS文件中。

此模式和关联的示例工具包使用与工具包捆绑在一起的集中式CSS文件。 这种设计意味着每个应用程序内部都有CSS文件，并且可以根据需要独立更新每个应用程序。 但是，使用这种方法，您需要重新部署每个应用程序以更新所有应用程序之间的接口。

如果您的团队不想满足该要求，则另一种方法是将该集中式CSS文件放在HTTP服务器上，并在模板中引用它。 这种方法对每个应用程序的升级方式控制较少，但是更新一个文件可在所有IBM BPM应用程序中复制更改。 CSS文件还可以跨非IBM BPM接口重用。

方法2：集中式CSS文件和其他类

层次结构中的下一个方法是附加到模板的另一个集中式CSS文件，但这一次带有其他类。 如果您需要为与任何当前类无关的元素集合设置样式，或者如果当前类过于广泛，请考虑使用此方法。

与以前的方法一样，您拥有一个集中式CSS文件，但是这些类对于特定组织甚至应用程序是唯一的。 该文件可以是您已在整个组织中使用的文件，也可以是全新的文件。 您可以将此CSS文件与第一种方法中所述的文件结合使用，或将文件分开放置。 无论哪种方式，请记住，必须将类添加到要具有新样式的每个元素中。

要应用于教练视图，请完成以下步骤：

1. 准备CSS类。
2. 转到教练HTML属性部分，然后单击添加课程 。
3. 键入与您在模板的样式表中定义的其他类匹配的名称。 然后将样式单独应用于该元素。
4. 由于IBM BPM的结构，某些元素在应用类时不具有样式。 如果看不到预期的更改，请再次查看浏览器开发人员工具中的元素结构。 如果需要，请修改CSS以在任何子元素上引用样式。

如果要将CSS类应用于自定义HTML，请按照与将类应用于任何其他类型的网页相同的过程进行操作。

以下三个屏幕截图显示了来自模板中用于设置页面标题样式的集中管理文件中的自定义CSS类的示例。

以下屏幕截图显示了pageTitle CSS类：

以下屏幕截图显示了示例工具包中应用于Coach Template标题<div>的pageTitle类：

以下屏幕截图显示了教练模板的用户界面在运行时的外观，内容以及将页面标题配置选项设置为Unit Test的情况 。

方法3：HTML属性（内联样式）

如果您要进行非常具体的修改，或者您不希望在更新全局样式时更改元素外观，则前面介绍的前两种方法将不起作用。 下一种方法是通过使用HTML属性选项卡中的内联样式将其直接应用于元素。

例如，此方法适合于向元素添加几个像素的左边界。 应谨慎使用该方法，因为该应用程序非常具体。 从Process Designer中，很难看到是否使用了此方法，因此很难维护。 以下屏幕截图显示了使用HTML属性方法更改文本字段的文本颜色的示例：

以下屏幕截图显示了应用内联样式的结果，例如教练的用户看到的内容：

方法4：自定义HTML块

如果以前的所有方法都不满足您的要求，或者您需要对页面进行非常具体的“一次性”更改（例如添加<div>标记或在特定位置插入空白），则您可以直接在教练上放置自定义HTML块。

以下三个屏幕截图显示了如何使用Coach Template上的自定义HTML块向页面添加自定义标题的示例。

以下屏幕截图显示了选择的第一个示例自定义HTML块，并在其中打开<div>并pageTitle分配了pageTitle CSS类：

以下屏幕截图显示了绑定到titleText配置变量的内容的第二个示例自定义HTML块：

以下屏幕截图显示了在上一个示例自定义HTML块的第三个部分中打开的<div>现在已关闭。

特定组件的样式

有时为了获得特定组件的特定样式，需要更改实际的教练视图。 如果您希望某个特定组件具有与其他组件不同的样式，则仅更改CSS文件可能不会提供您想要的结果。

按照实现的顺序列出了针对特定于组件的样式的以下样式技术。 以下层次结构按优先级顺序列出，用于设置特定教练视图组件样式的方法。 以下各节详细讨论了每种方法。

1. 包装在可重用的自定义教练视图中的默认教练视图组件
2. 使用默认IBM BPM组件作为基本模板的可重用定制教练视图
3. 从头开始构建可重用的Coach视图
4. 一次性教练视图

方法1：包装在可重用的自定义教练视图中的默认教练视图组件

第一种尝试的方法是保持默认的Coach视图不变，但将其嵌入另一个实现所需样式更改的Coach视图中。 例如，这适用于需要在其周围放置特定样式的自定义文本字段。

由于此方法不会修改基础默认教练视图（或多个视图，如果使用了多个视图），因此保留了基础教练视图的所有功能。 此外，IBM BPM更新仍支持实际的默认组件。 IBM BPM更新后，需要对自定义教练视图进行最少的更改或不需要更改。

以下三个屏幕截图显示了一个文本字段，其后放置了一段HTML代码。 HTML代码将cm （代表厘米）添加为出现在文本字段后面的文本。 此示例自定义教练视图背后的想法是以厘米为单位显示度量。

以下屏幕截图显示了教练设计器中的教练视图。 label字段绑定到名为label的配置选项。 然后，可以通过顶级教练视图设置标签。

以下屏幕截图再次显示了相同的Coach视图，但是重点放在了显示分页符的自定义HTML块上（添加以确保文本显示在正确的位置），然后是cm 。

以下屏幕截图显示了自定义教练用户界面在运行时对流程应用程序用户的外观：

方法2：使用默认IBM BPM组件作为基本模板的可重用的定制教练视图

当包装默认组件不足以获取所需的用户界面样式和功能时，请在层次结构中使用第二种方法。 对于此方法，在开发新组件时将默认组件用作起点。 复制原始方法，将其移至相关工具箱，然后进行必要的更改。

这种方法的优势在于，它保留了您熟悉的缺省IBM BPM功能。 但是，如果采用这种方法，则会失去对组件的IBM BPM支持。 如果应用了对IBM BPM的更新，那么对默认组件的任何更新都需要手动应用于定制组件。

有关此方法的示例，请参见示例工具包。 一个自定义按钮示例扩展了默认按钮，以在按钮上显示的文本字符串中包括来自“真棒字体”图标字体包的图标。 以下示例使用fa-check图标。 以下屏幕截图显示了示例工具包中的Font Awesome Button教练视图，以及用户从浏览器中查看的视图：

方法3：从头开始构建可重用的Coach视图

当您无法使用IBM BPM中的任何缺省教练视图组件时，请考虑层次结构中的第三种方法。 这种方法从头开始构建一个新的Coach视图，但是以易于重用的方式构建它。

示例工具包包含这些教练视图类型的几个示例，用于实现以前的使用Bootstrap的方法。 Bootstrap Row和Bootstrap Column教练视图都是完全可重用的自定义视图。 另一个示例是“ Notification Container教练视图，如以下屏幕截图所示：

方法4：一次性教练视图

在个别情况下，您可能需要在项目中使用“一次性使用”教练视图。 导致这类教练意见的要求很少是由风格引起的，但这种情况值得一提。

创建一次性教练视图的通常动机是诸如在页面上实现复杂的客户端逻辑之类的要求。 仅当使用Coach View框架而不是Coach设计器时，才可能实现这些要求。

如果您创建的Coach视图已被很好地记录并构建为易于维护，则可以使用此方法。

在与使用IBM BPM的组织合作的经验中，我们看到了很多因一次性使用教练的观点而面临问题的项目示例。 如果项目中使用了许多一次性视图，那么代码将变得非常难以遵循。 没有文档，维护任务将变得非常困难。

结论

本文介绍了在Bootstrap CSS框架和默认CSS文件的多个替代项中自定义IBM BPM V8和更高版本中教练样式的方法。 现在，您可以在自己的环境中应用这些方法，以满足组织的特定需求。

设置样式的分层方法已在使用IBM BPM的多个组织中成功实现。 成功的关键是从一开始就采用本文概述的方法，并构建结构良好且可维护的UI工具包。 在整个项目中，开发人员都尽可能遵循该方法，并付出了特殊的努力以确保工具包中不包含特定于项目的内容。 客户随后在整个企业中复制了这种方法，从而在多个IBM BPM项目中提供了一致的样式。

例如，一个组织现在将这种方法用于六个以上的项目。 因为UI工具箱仅包含实现该方法所需的内容，所以对该工具箱所做的任何更改都不会对使用它的项目产生很大的影响。 整个IBM BPM环境的样式都是从一个中心点维护的。 现在，当开发人员想要更改用户界面的样式时，他们只需在工具箱中进行更改并拍摄快照即可。 然后，当其他项目准备升级时，它们将采用最新的工具包快照。 如果遵循分层方法，则不需要其他工作。

致谢

作者要感谢Gerry McLaughlin，Scott Glenn和Dennis Parrott对本文的审阅。

---

翻译自: https://www.ibm.com/developerworks/library/mw-1702-carr/1702-carr.html

ibm bpm开发 手册