IBM Business Process Manager（BPM）V8.5.6中引入的响应用户界面技术使流程参与者可以通过电话，平板电脑，笔记本电脑或大型显示器访问您的应用程序。 在IBM BPM V8.5.7和更高版本中，您可以使用主题和实例样式来更新用户界面的外观。
在本系列的第1部分中，您了解了流程参与者如何处理任务，访问仪表板，更新用户配置文件以及如何使用保存的搜索和自定义任务列表。
现在，在第2部分中，您将学习以下步骤来更新流程参与者从移动设备访问的用户界面的外观：
- 在教练级别设置实例样式。
- 为流程应用程序创建主题。
- 将主题应用于流程应用。
- 将主题移至工具箱。
登录到流程门户
第2部分中的大多数屏幕截图示例均来自运行macOS的MacBook。
- 首先打开Process Portal：
https://your_hostname:9443/ProcessPortal/login.jsp如果要在Cloud上使用IBM BPM，则必须首先登录到Cloud上的IBM BPM：
https://www.bpm.ibmcloud.com/#login:https://www.bpm.ibmcloud.com/#login - 如果您有多个订阅，请选择您的订阅。
- 打开Process Portal开发环境：
https://your_hostname/bpm/dev/ProcessPortal（如果您在Cloud上使用IBM BPM）或https:// your_hostname :9443/ProcessPortal/（如果在内部使用IBM BPM）。
现在，您将看到流程应用程序的所有用户都可以看到的Process Portal用户界面。
更新用户界面的外观
IBM BPM V8.5.7在教练级别引入了实例样式以进行小的更改，以及可以在流程应用程序或工具箱中应用的主题。 主题由主题定义，动态样式表和生成的级联样式表（CSS）组成。
对于较小的更改，例如更改部分或按钮的颜色或更改文本大小，可以使用实例样式对用户界面进行一些基本更改。 在IBM BPM V8.5.7中，主题具有六种默认颜色（类似于Bootstrap，一种开源的前端Web开发框架）的设置，可用于覆盖某些UI元素。 如以下屏幕截图所示，除了默认主题的五种颜色外，主题中还使用了其他“替代颜色”。 默认情况下，替代为白色或灰白色。
本教程的最后一部分显示了如何创建自定义主题以更改默认的色调，颜色和更高级的特征。
了解如何通过在教练级别设置实例样式，创建主题以为流程应用程序设置样式，将主题应用于流程应用程序以及将主题移至工具包来更新用户界面的外观。
在教练级别设置实例样式
在接下来的几个步骤中，在笔记本电脑，MacBook或台式机上，您将设置区域和按钮颜色，并使用六种默认颜色的默认主题设置覆盖按钮的文本大小。 您可以使用默认主题设置来覆盖某些UI元素。
- 打开Web浏览器，然后以管理员身份登录到Process Center。
- 打开“ 招聘样本” 。
- 打开“ 创建职位请求” CSHS 。
- 教练打开后，点击教练 ，然后点击创建职位请求 。
- 点击职位申请 。 然后，在“ 属性”下的“ 公共”部分中，确认标签为Position Request ，如以下屏幕截图所示。
- 单击配置 ，然后展开样式 。 请注意，您可以控制主题颜色类型，节的对齐方式，标题文本大小以及是否显示边框，如以下屏幕截图所示：
- 通过选择“备用”将主题颜色类型从“主要”更改为“备用”，如以下屏幕截图所示：
请注意，标题的背景颜色从蓝色变为白色。 您可以撤消和重做此步骤以查看更改。 编辑器就是您所见即所得（WYSIWYG），因此您可以立即看到对UI所做的更改。
- 将主题颜色类型从“替代”更改为“ 成功” 。 请注意，标题的背景颜色从白色变为浅绿色，如以下屏幕截图所示：
- 在教练列表下方，单击确认职位请求以打开教练。
- 使用前面的步骤，更改以下三个部分的主题颜色类型，如下表所示：
部门名称 主题颜色类型 确认职位要求 成功 索取资料 信息 位置资料 信息 - 将“上一步”按钮的颜色更改为白色（另一种颜色）：在页面底部，单击“上一步” ，然后在“ 配置”下，展开“ 样式” ，然后将“主题”颜色类型设置为“ 备用”，并将“文本大小”设置为“ 大” ，如下屏幕所示捕获：
- 同样，将Submit按钮的颜色更改为Alert ，将Text size更改为Large ，如以下屏幕截图所示：
- 通过单击右上角的中间图标，预览教练在中型设备（例如iPad）上的外观：
- 单击小图标，并注意UI如何调整为较小的屏幕。 但是，请注意按钮如何调整大小以占据小型设备的一半大小，并且立即应用您的部分颜色，如以下屏幕截图所示：
- 通过单击右上角的保存图标来保存教练：
- 运行教练以查看更改：单击运行图标 在右上角。 单击下一步转到第二个教练，确认职位请求。 完成后，单击提交并关闭窗口。
创建主题以对流程应用程序进行样式设置
在本节中，您将为圣帕特里克节假期为您的应用创建自定义主题，该主题在爱尔兰和世界其他地方庆祝。
- 仍在Process Center中的Process App Settings下，通过将光标置于左侧边栏上，单击User Interface旁边的+，然后选择Theme来添加新主题 。
- 在“新主题”窗口中，输入StPatricksDayTheme作为名称，然后单击“ 完成” 。 保留“ 复制现有主题”并选择“ BPM主题（系统数据）” 。
- 主题编辑器将在“设计”模式下打开：您可以在左侧直观地进行一些更改，而在右侧看到这些更改，如以下屏幕截图所示：
- 您可以通过使用左侧的箭头关闭类别来最小化基本设置类别（或其他类别）。
- 如果您希望直接使用“较少动态样式表”语言处理源文件，请单击“ 源”以切换到源编辑器，如以下屏幕截图所示：
- 单击“ 设计” ，然后展开“ 基本设置”，切换回“设计”视图。
- 设置@ bpm-color-primary ：
- 单击@ bpm-color-primary旁边的蓝色色板。
- 选择绿色，如以下屏幕截图所示。 （在Apple和Windows操作系统上，颜色窗口看起来略有不同。）
- 单击确定 。 请注意，此更改还会更改@ bpm-link-color的颜色 。
重复类似的步骤，将@ bpm-color-success设置为与上一步相同的颜色。 通过以下屏幕截图验证您的更改：
- 在@ bpm-color-success下，设置@ bpm-color-warning ，如以下屏幕截图所示：
- 使用以下屏幕截图中的步骤将@ bpm-body-bg设置为绿色：
- 通过以下屏幕截图验证主题：
- 向下滚动到基本设置的底部，然后更改@ bpm-active-bg ，如以下屏幕截图所示：
- 将“主要”按钮的颜色更改为与“成功”按钮不同的颜色（如以下屏幕截图所示）：
- 关闭基本设置 （步骤1）并展开按钮 （步骤2）。
- 点击@ bpm-btn-primary-bg 。
- 选择黄色（步骤4），然后单击确定 （步骤5）。
- 验证更改，如以下屏幕截图所示：
- 更改表行的选定颜色，如以下屏幕截图所示：
- 关闭按钮 （步骤1）并展开表格 （步骤2）。
- 点击@ bpm-table-bg-select 。
- 选择绿色（步骤4），然后单击确定 （步骤5）。
- 更改表的@ bpm-table-bg ：
- 点击@ bpm-table-bg 。
- 在颜色窗口上，选择白色，然后单击确定 。
- 验证更改，如以下屏幕截图所示：
- 更改字体：
- 关闭表
- 展开基本设置
- 点击@ bpm-font-family-sans-serif
- 从字体列表中，选择“ Comic San MS”，草书，san-serif
- @ bpm-font-family-sans-serif上方的两个变量将@ bpm-text-color更改为灰色。
使用以下屏幕截图验证您的更改。 请注意，主按钮的文本无法清晰阅读。
- 要标识与控件关联的设置，可以将光标置于控件上，然后打开设置。 将光标停留在“ 主要按钮”上以标识字体颜色，如以下屏幕截图所示：
- 使用以下屏幕截图中的步骤将@ bpm-btn-primary-color更改为黑色：
- 关闭基本设置 （步骤1）并展开按钮 （步骤2）。
- 单击@ bpm-btn-primary-color （第3步）。
- 选择黑色（步骤4），然后单击确定 （步骤5）。
- 验证您现在可以看到“主按钮”的文本，如以下屏幕截图所示：
- 保存通过点击在S AVE按钮主题。
将主题应用于流程应用
在本节中，您将在上一节中创建的主题应用于流程应用程序。 在应用新主题之前，请打开并运行使用默认主题的现有教练。 稍后，您将新主题应用于教练并运行它以查看更改。
- Process App的主题适用于Process App设置。 在您刚刚创建主题的流程设计器中，通过单击StPatricksDayTheme旁边的箭头并从菜单中选择“ 流程应用程序设置” ，切换到“流程应用程序设置”窗口。
- 您可以在“ Coach设计器设置”部分中验证流程应用程序正在使用默认主题BPM主题 ，如以下屏幕截图所示：
- 如果您关闭了“ 创建职位请求CSHS”指导者，请通过将光标保持在左侧边栏上，选择“ 用户界面” ，然后在“客户端人员服务”下双击“ 创建职位请求CSHS” ，再次将其打开。
- 回想一下，您之前已经在教练级别设置了该教练的样式，如以下屏幕截图所示：
- 切换回“流程应用程序设置”。 然后，在“ Coach设计器设置”下，单击“ 选择”以应用StPatricksDayTheme ，并保存更改，如以下屏幕截图所示：
- 单击“处理应用程序设置”旁边的箭头，然后从菜单中选择“ 创建职位请求CSHS ”，以切换回“创建职位请求CSHS”教练。
- 运行教练并注意已应用了主题，如以下屏幕截图所示。 请注意，主题适用于没有在上一节中进行的教练级覆盖的情况。 单击下一步 。
- 请注意，您在上一节中应用的特定于教练的样式仍然适用，如以下屏幕截图所示。 单击提交以关闭教练。
- 可选步骤：将教练级别的样式更改为适合此新主题的颜色。
- 在Process Designer中关闭主题。
理想情况下，如果要重用主题，请将其放在工具箱中，以便可以由一个或多个需要相同主题的流程应用程序重用。 可以将公司主题放在工具箱中，然后在整个组织中重复使用，您将在下一节中学习如何做。
将主题移至工具箱
如果要重用主题，请将其移至工具箱中。 然后可以在流程应用程序中使用该主题。 请注意，您可以使用wsadmin命令更新流程应用程序的主题，而无需重新部署流程。 要了解更多信息，请参阅BPMUpdateTheme命令文档。
完成以下步骤，将主题移至工具箱。
- 创建一个新的工具包，并将其命名为StPatricksDayToolkit 。
- 开放流程中心
- 转到“ 工具箱”选项卡。
- 单击创建新工具包 ，输入以下信息，然后单击创建 ：
- 工具箱名称： StPatricksDayToolkit
- 缩略语 ： STPATTK
- 文档： 圣帕特里克节工具包的主题
- 将主题移至新工具箱：
- 单击用户界面 。
- 右键单击StPatrickDayTheme 。
- 选择将项目移至 。
- 选择StPatrickDayToolkit 。
- 在有关移动项目的消息上，单击移动 。
- 从流程应用程序的库视图中，您可以验证流程应用程序现在对StPatricksDayToolkit有依赖性。
- 在Web Process Designer中，您可以确认Process App已更新为使用Process Application设置中工具包中的主题，如以下屏幕截图所示。
- 现在，您可以在其他流程应用程序中使用此工具包和主题。
结论
现在，您知道如何通过使用IBM BPM V8.5.7更新流程应用程序用户界面的外观。 您自定义了教练实例的样式，并定义了适用于整个流程应用程序的主题。
如果您想利用这些功能和其他增强功能来使流程参与者从移动设备上工作，请考虑迁移到IBM BPM V8.5.7或更高版本。 凭借在本教程中更改用户界面的动手经验，您可以将所学的知识应用于自己的流程应用程序的用户界面。
您的流程参与者可以使用IBM BPM V8.5.7中的Process Portal来处理流程任务，访问仪表板并使用从移动设备上获取的自拍照来更新用户概要文件。 在第1部分中 ，您了解了流程参与者如何创建，使用和共享保存的搜索，以及他们如何过滤，排序和构建自定义任务列表。 在第2部分中，您学习了如何在教练用户界面级别上设置用户界面的样式以及如何为流程应用程序用户界面创建主题。
致谢
作者要感谢Ricardo Ramos对本教程的审阅。
翻译自: https://www.ibm.com/developerworks/mobile/library/mw-1611-hooker2-trs/1611-hooker2.html