ibm风控体系_在IBM Business Process Manager中品牌化和定制教练控件

最新推荐文章于 2020-07-09 00:52:22 发布

cuxiong8996

最新推荐文章于 2020-07-09 00:52:22 发布

阅读量343

点赞数

文章标签： python javascript java js vue ViewUI

原文链接：https://www.ibm.com/developerworks/bpm/bpmjournal/1506_grant2/1506_grant2-trs.html

版权

ibm风控体系

IBM®Business Process Manager（BPM）包括针对教练的生动且可配置的控件，您可以使用这些控件来构建以构建流程参与者用来与服务进行交互的用户界面（UI）。有时，开发人员可能需要创建其他组件来扩展功能。本教程针对初学者到新手级别的开发人员介绍了可用的选项，这些选项可用于构建新控件并将高级功能集成到控件中。讨论了更高级的主题，这些主题需要了解暴露的过程变量和IBM BPM级联样式表（CSS）样式。相同的技术适用于既具有传统人类服务又具有客户端人类服务的教练。客户端人员服务的教练还包含其他选项，如IBM Business Process Manager开发人员中心上的IBM BPM 8.5.5响应教练视频和IBM Business Process Manager 8.5.5博客条目中的设计响应教练中所述。

本教程中的技术在IBM BPM V8.X环境中有效。您应该对HTML，JavaScript，IBM BPM和coaches框架有基本的了解。

在为IBM BPM应用程序创建控件时，重要的是要考虑到输出时间的要求。业务应用程序的主要目的是对业务流程进行建模。因此，控制添加应该是流程实施的次要条件。 IBM Bluemix DevOps Services的Smarter Process Community中还有其他工具箱，它们提供了附加的控件集，例如bpm-CoachViewExamples 。请注意，由于它们是社区资产，因此某些控件可能会意外地起作用或不适用于某些版本的IBM BPM。

IBM BPM带有不同的UI组件，允许开发人员根据组织的需求创建教练。这些库存组件基于Dojo UI框架构建，Dojo UI框架是JavaScript驱动的控件的库。有关操纵库存控制方案（例如颜色）的信息，请参阅IBM Redbooks出版物中的“在组织中利用IBM BPM Coach框架” 。但是，在某些情况下，IBM BPM教练框架中的控制功能可能无法满足组织的需求。

那些需要以移动设备为中心的控件或对于较小屏幕尺寸的用户（例如平板电脑）更适合使用控件的组织，创建自定义控件可能是答案。如果组织需要现有库存控件中未包含的UI控件，则自定义控件也可能是答案。 IBM BPM产品中可以创建大量现有的库。根据产品版本的不同，Dojo库本身包含许多未内置在IBM BPM中但开发人员可以在IBM BPM中创建的控件。

评估UI框架

查看UI库时，重要的是要了解所需组件的广度。您的组织仅需要一个组件还是几个组件？从一个完整的库中可能更容易开发几个组件。建议的库是否包括开发人员以后可能需要使用的多种控件类型？导入整个库可能会使此过程更容易。使用IBM BPM之外的第三方用户界面的另一个重要考虑因素是您可能需要的支持。 IBM是否与第三方生产商有任何从属关系，以便您可以在需要时从IBM获得支持？该库是否正在积极开发中，或者已不再使用？

一个主要的考虑因素，尤其是随着移动设备的广泛使用，是移动设备上库的可用性。图书馆可在移动设备上使用吗？它可以缩放屏幕尺寸吗？需要考虑的常见库是jQuery，它需要在IBM BPM之上加载其他文件。这会影响您的组织使用IBM BPM的方式吗？

使用现有库扩展IBM BPM教练

将新的UI控件引入应用程序的最简单方法之一就是通过Dojo库。 IBM BPM产品随Dojo一起提供，并且现有控件是使用此库构建的，这意味着您不需要包括其他文件或附件。另一个重要的考虑因素是Dojo上文档的广泛可用性。使用搜索引擎，找到所需的源代码并在IBM BPM中构建组件相对简单。

在IBM BPM教练中创建定制控件

以下示例查看在IBM BPM中构建Dojo滑块的要求。请参阅dijit / form / HorizontalSlider上的Dojo库文档，以轻松地在IBM BPM中重新创建代码。

例如，完成以下步骤以在IBM BPM教练中创建定制滑块控件：

通过单击用户界面的添加按钮并选择“教练视图”，在流程应用程序或工具箱中创建教练视图 。分配与控件类型相关的名称。例如，为滑块控件Slider命名教练视图。 Layout选项卡将自动打开，如图1的Slider coach视图示例所示。
图1.示例Slider教练视图
在Coach视图的Behavior选项卡上，将滑块JavaScript（根据Dojo文档）放置在Load事件处理程序的代码窗口中，如图2所示。
图2.加载事件处理程序的代码窗口
在coach视图上打开调色板，然后在图上放置一个Custom HTML块。从Dojo滑块文档中复制HTML并将其粘贴到HTML块中，如图3所示。
图3. Custom HTML块
打开新的人工服务，并在面板上创建教练。将滑块教练视图拖动到教练上，然后运行人工服务。现在，您已经创建了一个自定义滑块控件，如图4所示。数字字段包含在输入标签中。
图4.示例定制滑块控件

将教练视图绑定到人员服务中的数据

创建滑块之后，请查看如何将教练视图绑定到人员服务中的数据，从而可以与其进行交互。将Coach视图绑定到人员服务数据需要对使用JavaScript进行一些调整，并且需要将变量绑定到Coach视图。首先考虑什么是配置变量以及绑定变量是什么。对于以下示例，绑定变量是一个整数，显示为十进制，并且有多种配置（最小，最大和步长），每个配置都是整数。对于其他自定义教练视图，请适当地创建变量和配置。

例如，完成以下步骤以将Coach视图绑定到人员服务中的数据：

打开滑块教练视图，并使用要绑定到的最终值的integer类型为绑定创建业务变量。为整数类型的min，max和step创建配置变量，如图5所示。
图5.示例业务变量
打开“行为”选项卡，然后为负载添加配置和绑定变量到滑块。调用变量并使用默认值。在以下示例中，每个变量的最后一个值是默认值。这很重要，因为如果未将变量提供给教练视图，则滑块会在没有默认set. var boundValue = this.context.binding && this.context.binding.get("value") ? this.context.binding.get(的情况下失败set. var boundValue = this.context.binding && this.context.binding.get("value") ? this.context.binding.get( set. var boundValue = this.context.binding && this.context.binding.get("value") ? this.context.binding.get( set. var boundValue = this.context.binding && this.context.binding.get("value") ? this.context.binding.get( "value") : 0;

要根据最终用户在运行时所做的更改来更新绑定变量，请像下面的示例一样，再添加一行代码。注意句柄的副本，它允许不断更新值。

onChange: function(value){
            //dom.byId("sliderValue").value = value;
            boundValue = value;
            console.log("change")
            _this.context.binding.set("value",boundValue);
        }

使用滑块打开您的人工服务，并创建一个integer类型的私有变量。将变量绑定到图上的整数控件，然后将其绑定到滑块控件。随时向滑块提供配置输入。
运行人员服务并移动滑块。整数框应更新为正确的值。请注意，滑块不允许输入数字，因为该框仅是输出。

有关完整的代码，请参见以下示例：

//console.log("1");
var boundValue = this.context.binding && this.context.binding.get("value") ? this.context.binding.get("value") : 0;
//console.log("2");
var min = this.context.options && this.context.options.min ? this.context.options.min.get("value") : 0;
//console.log("3");
var max = this.context.options && this.context.options.max ? this.context.options.max.get("value") : 10;
var step = this.context.options && this.context.options.step ? this.context.options.step.get("value") : 1;
var style = this.context.options && this.context.options.style ? this.context.options.style.get("value") : "width:300px;";
var id = this.context.viewid;
//console.log(id)
var slideDiv = document.getElementById("start");
slideDiv.setAttribute("id", id);
//console.log(slideDiv);
var _this = this
//console.log("2");
require([
    "dojo/dom", // for inserting value in TextBox example
    "dojo/parser", // parser because of TextBox decoration
    "dijit/form/HorizontalSlider",
    "dijit/form/TextBox" // this we only include to make an example with TextBox
], function(dom, parser, HorizontalSlider, TextBox){
	//console.log(id);
    parser.parse();
    //console.log("inside"+_slideDiv);
    //var _new = _bound
    var slider = new HorizontalSlider({
        name: "slider",
        value: boundValue,
        minimum: min,
        maximum: max,
        intermediateChanges: true,
        style: style,
        discreteValues: step,
        onChange: function(value){
            //dom.byId("sliderValue").value = value;
            boundValue = value;
            console.log("change")
            _this.context.binding.set("value",boundValue);
        }
    }, id).startup();
});

控制编号

最后要考虑的是控件ID。浏览滑块代码，请注意对视图ID的引用。此参考提供了必需的唯一窗口小部件ID。要查看此问题的实际效果，请将另一个滑块拖动到人工服务上并运行该服务，如前面的示例所示。

如果没有唯一的ID，您将看到空白的浏览器窗口，并在浏览器控制台中收到有关ID错误的错误消息，该错误可通过Firebug或类似的浏览器工具进行访问。该错误是因为HTML ID必须是唯一的，这意味着在执行程序上不能存在带有实现的两个滑块。为了解决此问题，IBM BPM具有内置的行为，该行为提供了视图ID（可作为教练视图属性来访问），这使开发人员可以轻松地从视图ID中创建唯一的ID。

在教练视图加载行为中使用以下代码将控件的ID设置为唯一值：

var id = this.context.viewid;

使用异步模块定义（AMD）模块扩展IBM BPM教练

AMD模块是开发人员可以快速加载库小部件并在教练视图中引用它的一种方式。现在，本教程中的示例将切换为使用Dojo对话框控件。在本示例中，您将为Dojo对话框控件加载AMD模块。

使用Dojo文档中的代码结构，您可以在coach视图的加载行为中复制和调整它。另外，对于此示例，您想要一个可以提交到下一个任务的按钮。对于此按钮，该示例使用事件触发行为。

完成以下步骤，将AMD添加到教练视图中，从而可以实现更好的负载。

从Process Designer中的Coachs工具包中打开Button教练视图，然后将Button教练视图复制到您的应用程序中。重命名教练视图Dialog Button 。
添加AMD依赖关系，如图6所示。
图6.添加AMD依赖关系的示例
打开教练视图面板上HTML块，并使用以下代码定义按钮和对话框HTML。
<!-- This div was added to allow the dialog box to open >→ <div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog"> </div> <button> type="button" class>="BPMButton BPMButtonBorder" ></button>
提供配置选项，如图7所示。
图7.示例配置选项
将Dialog Button教练视图放在教练上，您就完成了。与使用dojo.require编码相比，AMD更快地加载了所需的Dojo组件。
提供配置选项的值，并将coach视图放在coach上，如图8所示。
图8.教练视图示例
运行教练，然后单击按钮。应打开一个对话框。
对于IBM BPM开发人员而言，Dojo具有许多优势。最重要的是，Dojo包含在IBM BPM中，这意味着开发人员可以使用它而不必下载其他文件。

有关完整的代码，请参见以下代码示例：

var baseTextDirection = this.context.options._metadata.baseTextDirection && this.context.options._metadata.baseTextDirection.get("value") ? this.context.options._metadata.baseTextDirection.get("value") : utilities.BiDi.BASE_TEXT_DIRECTION._default;
var generalPrefTextDirection = this.context.bpm.system.baseTextDirection;
 
           //Gets the value input for the text content and labels          
var innerText = this.context.options.innerText && this.context.options.innerText.get("value") ? this.context.options.innerText.get("value") : "";
var title = this.context.options.title && this.context.options.title.get("value") ? this.context.options.title.get("value") : "";
var confirmLabel = this.context.options.confirmLabel && this.context.options.confirmLabel.get("value") ? this.context.options.confirmLabel.get("value") : "Submit";
var cancelLabel = this.context.options.cancelLabel && this.context.options.cancelLabel.get("value") ? this.context.options.cancelLabel.get("value") : "Cancel";
var button = this.context.element.getElementsByTagName("button")[0];

                //Adds the buttons to the dialog needs corrected spacing and labels
innerText = innerText + "<div class='dijitDialogPaneActionBar'><div style='display:inline-block;padding:5px'><button id='ok' class='BPMButton BPMBorder' type='button'>" +confirmLabel+ "</button>"
	 +"</div><div style='display:inline-block;padding:5px'><button id='cancel' class='BPMButton BPMBorder' type='button'>" +cancelLabel+ "</button></div></div>";
var visibility = utilities.handleVisibility(this.context, null, null, [button]);
if (visibility != "NONE") {
   if (this.context.options._metadata.label && this.context.options._metadata.label.get("value") != "") {
   button.innerHTML = this.context.htmlEscape(this.context.options._metadata.label.get("value"));
   utilities.BiDi.applyTextDir(button, button.innerHTML, baseTextDirection, generalPrefTextDirection);
   } else {
	 button.innerHTML = "&nbsp;";
 }
 if (this.context.options._metadata.helpText && this.context.options._metadata.helpText.get("value") != "") {
 button.title = this.context.options._metadata.helpText.get("value");
 }
 button.onmousedown = function() {
 domClass.add(this, "BPMButton-down");
 };
 button.onmouseout = button.onmouseup = function() {
	 domClass.remove(this, "BPMButton-down");
     };
   var _this = this;
     button.onclick = function() {
	if (this.disabled == false) {
	 var context = _this.context;
	 if (context.binding) {
	         context.binding.set("value", true);
	 }
	 var _button = this;
	 //Sets the inner content and title
	 myDialog.set("content",innerText);
	 myDialog.set("title",title);

	 //Starts the dialog when the button is clicked
	 myDialog.show();
	 
	 //Corrects the styling on the title bar
	 if(document.getElementsByClassName("dijitDialogTitleBar")[0]){
	 document.getElementsByClassName("dijitDialogTitleBar")[0].className = "BPMSectionHeader box blue"}
	 
	 //Finds the submit button
	 var submit = document.getElementById("ok");
	 //Trigger for completing task is placed on the dialog button instead of the triggering button
	 submit.onclick = function() {
	 context.trigger(function() {_button.disabled = false; domClass.remove(_button, "BPMButton-disabled");});
	 }
	 //This finds the cancel button and triggers the dialog to close when clicked
	 var cancel = document.getElementById("cancel");
	  cancel.onclick = function() {
           myDialog.hide();           
	 }
 }
 }
 this.updateStyle();
            };

使用第三方库扩展IBM BPM教练

尽管库存的IBM BPM库包含大量元素，但在某些情况下可能需要其他组件。 UI可以满足此需求的著名图书馆是Foundation。 Foundation库包含许多不同的控件，这些控件未包含在IBM BPM中，并且与移动设备特别相关。 Foundation是基于jQuery构建的，它还为开发人员打开了其他功能。但是，无论该库是Foundation，Bootstrap，jQuery还是其他库，步骤都相对相似。

导入文件

首先要考虑的因素之一是IBM BPM加载附加到教练视图的文件的复杂方式。查看Foundation库，教练需要按特定顺序加载所需JavaScript文件，以确保组件正常运行。在UI库的下载中，Coach必须加载的文件包含在单独JavaScript文件中。有关更多信息，请参见Foundation网站。

您必须进行的重要更改是，按照Foundation规定的加载顺序，将单个JavaScript文件与所有必需JavaScript文件组装在一起。这意味着以正确的顺序将所有必需JavaScript复制并粘贴到一个文件中。如果所需的库使用jQuery，则jQuery也将包含在文件中。这一步绝对至关重要。如果不正确，您可能会发现结果不一致，或者教练可能根本无法工作。编译文件后，可以将文件作为Web文件添加到Process Designer中，然后根据需要将其附加到教练视图。在图9中，所有三个JavaScript文件均以正确的顺序位于foundation.min.js文件中。

图9. foundation.min.js文件中JavaScript文件

配置系统

面向移动设备的库的另一个重要考虑因素是需要设置viewport以便页面可以相应缩放。 IBM BPM教练不会自动执行此操作，因此您必须像下面的示例一样在教练视图中设置viewport ：

var meta = document.createElement('meta');
meta.name = "viewport";
meta.content = "width=device-width, initial-scale=1.0";
document.getElementsByTagName('head')[0].appendChild(meta);

导入其他库时，可能会遇到CSS类冲突的问题。在某些情况下，IBM BPM将其他类添加到组件，或者组件在库之间具有相同的名称。解决这些重大问题的最简单方法是删除库存样式表。使用以下代码：

domAttr.remove(query("body")[0],"class","claro");
domAttr.remove(query("html")[0],"class","dj_gecko");
domAttr.remove(query("html")[0],"class","dj_contentbox");
domAttr.remove(query("html")[0],"class","dj_ff24");

此外，您可能需要删除所有对原始CSS文件的引用。删除引用CSS文件的文档元素。罪魁祸首是coach_ng.css文件。

构建第三方组件

导入正确的文件并配置系统后，可以使用与前面描述的Dojo组件相同的方式来构建组件，这意味着可以正确使用教练视图。如果jQuery是包含的文件集的一部分，则可以从coach视图的事件处理程序中调用jQuery函数。

使用REST协议扩展IBM BPM教练

另一个重要的考虑因素是包括REST协议。 REST已成为IBM BPM的标准功能，并且利用REST可以实现更多的库存功能，并可以更轻松地在UI控件中使用这些功能。有关Dojo REST的更新用法，请参阅dojo / request / xhr Dojo Toolkit文档。

使用计时器实现此方法使开发人员可以快速创建功能和显示，这些功能和显示可能需要经常刷新，例如任务列表。使用REST，您只需添加计时器功能，就可以轻松地将Foundation画布菜单扩展为可用于移动设备的Process Portal。

使用Dojo XHR Request ，您可以轻松收集信息并在页面上使用它。以下代码示例包含的代码可用于检索特定任务的任务流，然后将其注入到页面中。但是，如前所述，您可能想要声明AMD依赖关系，而不是在脚本中使用dojo.require 。 REST请求可以轻松地从教练视图的事件处理程序中执行，也可以从包含的脚本中定义的函数中轻松执行。

代码示例

function taskContain(){
require(["dojo/request/xhr"], function(xhr){
  var context = _this.context;
  var url = "/rest/bpm/wle/v1/search/query";
  xhr(url, {
    handleAs: "json",
    query: {
    condition:"instanceStatus|Active",
    organization:"byInstance",
    run:true,
    shared:false,
    filterByCurrentUser:true
    },
    headers: { 'Content-Type': 'application/json', 'Accept':'application/json' },
    method:"PUT"
  }).then(function(data){
    taskContainer.innerHTML = "";
    for(var i=0;i<data.data.data.length;i++){
        if(data.data.data[i].taskStatus!="Closed"){
        console.log("found one");
        var subject = data.data.data[i].taskSubject;
        var taskId = data.data.data[i].taskId;
        };
        };
  }, function(err){
    // Handle the error condition
  }, function(evt){
    // Handle a progress event from the request if the
    // browser supports XHR2
  });
});}

结论

本教程研究了在IBM BPM中创建定制教练控件的不同方法。它解释了IBM BPM中包含的Dojo框架，以及如何开发组件而不必包含其他软件包。本教程还研究了如何使用第三方框架（例如Foundation）来创建新的移动就绪组件。最后，该教程展示了如何利用REST提供所需的功能和移动就绪性。

致谢

作者要感谢James Carr的评论和对本教程的贡献。

翻译自: https://www.ibm.com/developerworks/bpm/bpmjournal/1506_grant2/1506_grant2-trs.html

ibm风控体系

cuxiong8996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ibm风控体系_在IBM Business Process Manager中品牌化和定制教练控件

IBM®Business Process Manager（BPM）包括针对教练的生动且可配置的控件，您可以使用这些控件来构建以构建流程参与者用来与服务进行交互的用户界面（UI）。有时，开发人员可能需要创建其他组件来扩展功能。本教程针对初学者到新手级别的开发人员介绍了可用的选项，这些选项可用于构建新控件并将高级功能集成到控件中。讨论了更高级的主题，这些主题需要了解暴露的过程变量和IBM B...
复制链接

扫一扫

ibm风控体系_在IBM Business Process Manager中品牌化和定制教练控件

评估UI框架

使用现有库扩展IBM BPM教练

在IBM BPM教练中创建定制控件

图1.示例Slider教练视图

图2.加载事件处理程序的代码窗口

图3. Custom HTML块

图4.示例定制滑块控件

将教练视图绑定到人员服务中的数据

图5.示例业务变量

控制编号

使用异步模块定义（AMD）模块扩展IBM BPM教练

图6.添加AMD依赖关系的示例

图7.示例配置选项

图8.教练视图示例