文章
Johnny Wang · 四月 25 阅读大约需 39 分钟

Angular 中 Ensemble 工作流的 UI

    大家应该都已经很熟悉 InterSystems Ensemble(一个集成和应用程序开发平台),每个人都知道 Ensemble Workflow 子系统是什么以及它对于自动化人类交互的作用。 对于那些不了解 Ensemble Workflow 的人,我将简要介绍它的功能(已经熟悉的朋友可以直接跳过这一部分并学习如何使用 Angular.js 中的 Workflow 接口)。

InterSystems Ensemble

    InterSystems Ensemble 是一个集成和应用程序开发平台,旨在集成异构系统、自动化业务流程和创建新的复杂应用程序,这些应用程序通过新的业务逻辑或新的用户界面增强集成应用程序的功能:EAI、SOA、BPM、BAM 甚至 BI (感谢 InterSystems DeepSee:一种用于开发分析应用程序的内置技术)。

    Ensemble 具有以下关键功能:

    适配器:与应用程序、技术和数据源交互的组件。 Ensemble 提供技术和应用程序集成适配器(Web 和 REST 服务、文件、FTP、电子邮件、SQL、EDI、HL7、SAP、Siebel、1S Enterprise 等)。 您可以使用适配器 SDK 创建自己的适配器。

    业务服务:将来自外部系统的数据转换为 Ensemble 消息并启动业务流程和/或业务运营的组件。

    业务流程:用于编排服务和操作的可执行流程,以自动化系统和/或人员之间的交互(通过工作流子系统)。 流程要么用声明性业务流程语言描述,要么用 Caché 对象脚本实现。 通过服务和操作将与外界交互的逻辑与这种交互的具体实现分开。

    业务运营:负责向外部系统发送/接收消息并将 Ensemble 消息转换为与此类系统兼容的格式的组件。

    消息转换:使用声明性数据转换语言将消息从一种格式转换为另一种格式的集成组件。   

    业务规则:允许集成解决方案的管理员在特定决策点更改 Ensemble 业务流程的行为,而无需编写代码。 

    工作流管理:Ensemble Workflow 子系统提供任务分配的自动化。

    业务指标:允许您收集和计算 KPI。 结合仪表板,它们用于实施业务活动监控 (BAM) 解决方案。

    OK,让我们回到工作流管理,仔细看看 Ensemble Workflow 子系统的功能。

 

工作流管理和 Ensemble 工作流子系统

    根据工作流管理联盟 (www.WfMC.org) 的定义,“工作流”是完全或部分自动化的业务流程,其中文档、信息或任务根据既定规则和程序从一个参与者传递给另一个参与者。”

    工作流程的关键方面:

  •     工作流的目的是涵盖工作的“片段”
  •     工作流是一组程序性任务执行规则
  •     工作流用户是在工作流管理系统中处理任务的人
  •     工作流中的角色是一组从事特定类型任务的用户。

    Ensemble 中的工作流管理子系统使您能够执行以下操作:

  •     使用 Ensemble 业务流程自动化工作流程管理
  •     灵活配置任务分配流程
  •     通过 Ensemble 提供的特殊工作流门户使用工作流管理系统
  •     组织工作流管理子系统与 Ensemble 的集成业务流程的交互
  •     使用业务活动监控子系统,Ensemble 的管理和监控工具
  •     轻松配置和扩展工作流子系统的功能

    工作流管理自动化的最简单示例是 Ensemble HelpDesk 应用程序(下图为HelpDesk 业务流程算法的片段),它可以自动化支持人员的交互,并且是标准的 Ensemble 示例集(在 Ensdemo 空间中)的一部分。 Ensemble 接收问题报告并启动 HelpDesk 业务流程。

    

    业务流程使用 EnsLib.Workflow.TaskRequest 类的消息向具有 Demo-Development 角色的用户发送任务,该类定义了所有可能的操作(“Fixed”或“Ignored”)以及“Comment”字段。 消息的正文还包含有关错误和报告错误的用户的信息。 在此之后,相应的任务会出现在每个具有演示开发角色的用户的工作流门户中。    

    最初(如果未在 TaskRequest 消息中定义),任务不与任何特定用户关联(仅与角色关联),因此用户必须通过单击相应按钮来接受它。 您也可以通过单击“推迟”按钮来拒绝任务。

    完成后,您可以执行此任务允许的任何操作。 在我们的例子中,我们可以在相应字段中提供评论后单击“已修复”按钮。 HelpTask 业务流程将处理此事件并向具有 Demo-Testing 角色的用户发送一条新消息,从而表明需要测试更改。 如果单击“忽略”按钮,该任务将被标记为“不是问题”,并且其处理将停止。

    从这个例子可以看出,Ensemble Workflow 是一个简单直观的系统,用于组织用户的工作流。 关于 Ensemble Workflow 子系统的更多详细信息可以在 Ensemble 手册的定义工作流部分找到。

    Ensemble Workflow 子系统的功能可以轻松扩展并集成到基于 InterSystems Ensemble 的外部复合应用程序中。 作为一个例子,让我们看一下在使用 Angular.js + REST API(由 Eduard Lebedyuk 编写)开发的外部复合应用程序中实现 Ensemble Workflow 的用户界面。

 

Angular.js 中的Ensemble工作流接口

    要使 Workflow 界面与 Angular.js 一起使用,您需要在服务器上安装以下 Ensemble 应用程序:

    安装过程在指定存储库的自述文件中进行了描述。

    目前(原帖里说),该应用程序具有 Ensemble Workflow 的所有必要功能:显示任务列表、附加字段和操作、排序、任务中的全文搜索。 用户可以接受/拒绝任务。 有关任务的详细信息显示在模式窗口中。 (实现只是概念证明,它还有很大的改进空间。它还以一种不得在生产中使用的方式使用 BasicAuth。目前我们已经有一个更复杂的例子)。

    应用程序如下所示:   

    UI 使用以下库和框架:Angular.js、Twitter Bootstrap 以及 FontAwesome 图标字体。

    您可以查看我们的测试服务器上运行的 HelpDesk 应用程序的用户界面。 账号:dev,密码:123

 

对于那些对源代码感兴趣的朋友们

    以下这个小应用程序的结构:

    该应用程序有 4 个 Angular 服务(RESTSrvc、SessionSrvc、UtilSrvc 和 WorklistSrvc)、3 个控制器(MainCtrl、TaskCtrl、TasksGridCtrl)、一个主页(index.csp)和 2 个模板(task.csp 和 tasks.csp)。

    RESTSrvc 服务只有一个方法 getPromise,它是 $http Angular.js 服务的包装器。 RESTSrvc 的唯一目的是向服务器发送 HTTP 请求并返回这些请求的 Promise 对象。 其他服务使用 RESTSrvc 来发出请求,它们的分离本质上是一种功能性的(它其实可以写得更好)。点击下栏查看代码:

 
RESTSrvc

    SessionSrvc :包含一个负责关闭会话的方法。 此应用程序中的身份验证是使用基本访问身份验证 (http://en.wikipedia.org/wiki/Basic_access_authentication) 实现的,因此不需要单独的身份验证方法,因为每个请求的标头中都有一个授权令牌。点击下栏查看代码:

 
SessionSrvc

    UtilSrvc :包含辅助方法,例如按名称获取 cookie 值、按名称获取对象属性。点击下栏查看代码: 

 
UtilSrvc 

    WorklistSrvc :负责与任务列表数据相关的请求。点击下栏查看代码:

 
WorklistSrvc

    MainCtrl :负责用户身份验证的应用程序的主控制器。点击下栏查看代码:

 
MainCtrl

    TasksGridCtrl :一个控制器,负责任务列表和与之关联的操作。 它初始化任务列表表,包含加载任务列表和具体任务的方法,以及处理用户动作的方法(按键、表格排序、行选择、过滤)。点击下栏查看代码:

 
TasksGridCtrl

    TaskCtrl :模式窗口的控制器,包含有关任务的详细信息。 形成字段和用户操作的列表,还处理模态窗口中的按钮单击。点击下栏查看代码:

 
TaskCtrl

    app.js :包含所有应用程序模块的文件。点击下栏查看代码:

 
app.js
    index.csp :应用程序的主页。点击下栏查看代码:

 
index.csp

    tasks.csp :任务列表模板。点击下栏查看代码:

 
tasks.csp

    task.csp — 模态窗口模板。点击下栏查看代码:

 
task.csp 
  此外,您可以自由地将我们的 REST API 用于您的 UI,尤其是考虑到它非常简单。点击下栏查看代码:

 
The URL map of our REST API
 

本文翻译自 Habrahabr InterSystems 博客(俄语)

0
0 84