定义 Coach 视图行为
通过添加 JavaScript 和样式以及通过在 Coach 视图的事件处理程序中定义函数,可定义该 Coach 视图的行为和外观。
过程
在 Coach 视图的行为页面中定义其功能和外观:
- 添加动态样式以控制 Coach 视图的外观。 动态样式将 Less 样式表与父代(通常是流程应用程序)中设置的样式定义相结合。有关 Less 语言的信息,请参阅http://lesscss.org/。将 Less 样式表与样式定义相结合会生成运行时 CSS 文件。这些运行时 CSS 文件用于显示流程应用程序中的 Coach 视图实例。通过在容器级别设置定义值,该容器中的 Coach 视图实例可以具有一致的样式。另外,可以从一个位置对该样式进行全局更改。
- 使用随附的脚本添加库中现有脚本和样式表文件。 通常,这些文件是可复用的 .js 和 .css 文件。
您可以将这些文件作为单个 Web 文件添加到库,或者在 .zip 文件中打包它们然后将此文件添加为 Web 文件。在 .zip 文件中打包文件意味着保留其相对关系。例如,如果打包 .css 文件并包含使用相对链接引用的图像,那么系统可以找到这些图像。
然而,如果将 .css 文件打包到一个 .zip 文件中,而在另一个 .zip 文件中打包所引用的图像,那么系统将找不到图像。
如果添加 .css 文件作为单独的 Web 文件,那么可以在 Process Designer 中进行编辑。您不能编辑 Process Designer 中打包在 .zip 文件内的 .css 文件。 相反,必须在外部进行编辑,重新打包,然后将 .zip Web 文件替换为更新的 .zip 文件。
- 创建 CSS 的原型,在使用内联 CSS 设定 Coach 视图样式时需要该原型。在开发 CSS 之后,将其复制到 .css 文件并将此文件作为包含脚本导入。 由于内联 CSS 类名称是全局的,因此可能会存在名称冲突,导致仅最后的样式定义被应用。
对此,请将内联 CSS 作为开发 Coach 视图的 CSS 样式的临时平台。
如果指向 .zip 文件中的图像文件,请对 URL 使用以下格式:file.zip!path/file.extension。注: 仅在内联 CSS 行为中才支持用于引用归档内文件的“!”表示法。在 Designer 中工作时,在 .css 文件和内联 CSS 中指定的 Coach 视图样式可通过布局选项卡应用于 Coach 视图,这允许您查看 Coach 视图在运行时的外观,而无需运行或测试您的 Coach 视图。 对该设计时样式支持有以下几个限制:
- 如果在 CSS 中使用介质查询语句,将只解析介质类型为 screen 的介质查询,并仅在设计时应用 max-width 和 min-width 规范。此设计时样式仅支持简单语法,例如,将在设计时处理以下介质类型语句:
但是,将不会在设计时处理以下语句:@media screen …. @media all @media (min-width: 520 px )@media not screen @media not print @media not (tty and screen) - 如果使用 Internet Explorer 9(不推荐),那么设计时样式仅适用于打开的前 25 个 Coach 视图或人员服务。 将不会对后续的 Coach 视图或人员服务内的 Coach 应用设计时样式。
- 仅会将所包含脚本和内联 CSS 内的导入处理至一级嵌入。例如,如果有包含语句 @import url('File1.css') 的内联 CSS,那么将在设计时反映 File1 内的 CSS,但是不会在设计时反映 File1 内的任何导入语句。
如果有较大或复杂的 Coach 和 Coach 视图,那么样式的设计时应用程序可能引起某些性能问题。要禁用当前会话的设计时样式,请转至布局选项卡,右键单击画布上的任意位置,然后选择禁用设计时样式。 对于其他会话,将不会应用指定的 Coach 视图样式。要对会话重新开启设计样式,请在画布上右键单击,然后选择启用设计时样式。
- 如果在 CSS 中使用介质查询语句,将只解析介质类型为 screen 的介质查询,并仅在设计时应用 max-width 和 min-width 规范。此设计时样式仅支持简单语法,例如,将在设计时处理以下介质类型语句:
- 添加条件样式,以处理浏览器和介质类型之间的差异。 当应用条件时,条件样式将覆盖缺省样式。 例如,可以对 Microsoft Internet
Explorer 应用一个 .css 文件,对其他浏览器应用另一个 .css 文件。使用条件样式来应用相应的文件。 要添加条件样式,请执行以下操作:
- 向 .css 文件添加特定于屏幕大小的样式或特定于浏览器的样式。 例如,可以添加针对平板电脑的样式,以对标签使用较小的字体并减少填充。
- 添加 .css 文件作为包含的脚本。
- 在 IE 条件或介质字段中,添加应用 .css 文件中的样式的条件。 例如,如果 .css 文件包含针对平板电脑演示的样式,那么将向介质字段添加诸如 screen and (max-width: 600px) 之类的条件。 如果用户的屏幕宽度为 600 像素或更低,那么 Coach 视图将使用 .css 文件中的样式,而不是缺省值。
注: 在运行时将仅处理在 IE 条件和介质 字段中输入的任何内联 JavaScript 样式和样式条件,并且不会反映在设计时。 - 添加定制 Dojo 构建层以提高 Coach 视图的性能。 有关信息,请参阅使用 Dojo 构件层来优化 coach 视图的性能。
- 使用内联 JavaScript 为 Coach 视图的事件处理程序定义公共变量和函数。 有关访问 DOM 部分的信息,请参阅使用控件标识访问子 Coach 视图。编辑器包含代码片段。编辑器不会显示代码片段的验证消息。
- 定义用于标识用户定义事件处理程序的变量。有关更多信息,请参阅主题用户定义的事件。
- 如果 Coach 视图需要用 AMD 样式编写的模块,那么请使用 AMD 依赖关系为从属模块注册别名。 然后,脚本函数可使用这些别名来引用模块。有关注册 AMD 模块的信息,请参阅添加定制 AMD 模块。有关使用从属模块的示例,请参阅示例:使用定制 HTML 创建控件。
- 要将类似于 <meta> 标记的代码插入 Coach 视图的头,请使用头 HTML。
- 如果需要,请定义 Coach 视图在相应的事件处理程序中所使用的函数。 有关更多信息,请参阅事件处理程序以了解视图对象,以及示例:创建 jQuery 按钮控件中的装入事件处理程序代码。如果已在概述页面中选择可以触发边界事件,请添加用于触发边界事件的代码。要触发事件,请编写 JavaScript 代码以在适当的时候调用 this.context.trigger(callback)。
- 提高 Coach 视图性能
要提高 Coach 视图的性能,您可以向其添加定制 Dojo 构建层。 - 添加定制 AMD 模块
您可以在 Coach 视图中使用定制 AMD(异步模块定义)模块。 - 访问子 coach 视图
控件标识是父视图内控件的唯一标识。您可以使用控件标识在运行时访问子视图实例。 - 配置 Coach 视图的设计时外观
您可以配置 Coach 视图以增强其他复用您的 Coach 视图的界面开发者的设计时体验。通过包含选用板和预览图像或者(对于更高级的配置)定制的 HTML 和 JavaScript,您可以定制视图外观以帮助界面开发者直观了解 Coach 视图如何在运行时显示。
父主题: 开发可复用的 Coach 视图