Apriso 开发葵花宝典之六 Client Mode 篇

李英杰同学

发布于 2023-09-02 08:34:16

3920

发布于 2023-09-02 08:34:16

本文作者陈捌华，感谢捌老师倾情奉献。

概述

Process builder是Delmia Apriso中主要的业务流程管理工具，也是DELMIA更广泛的Apriso制造运营管理解决方案的核心应用程序，Process Builder允许使用屏幕流管理设计方法和实体（如项目、屏幕、布局、视图和操作（函数））创作用户界面和业务逻辑。该应用程序能够快速方便地管理和修改开发的设计，使您能够根据需要随时更改业务流程。由于增强了对可重用性的支持，以前开发的逻辑可以在新的设计中快速重用。

本文介Process builder中Client mode概念及相关应用。

什么是Client Mode

客户机模式是Apriso中Screen Flow提供的一种新引擎。它是用JavaScript编写的，并在客户端即浏览器上执行。它支持Screen Flow的所有功能。

客户端模式SFM使用称为单页应用程序的技术。它可以提高解决方案的性能，但需要更仔细的脚本编写(主要是分离全局事件处理程序)。对产品中可用的标准组件进行测试，以确保它们不会导致内存泄漏。

客户端模式提供了更好的性能，增强了用户体验，并防止网络问题，因为它能够在浏览器中使用JavaScript呈现内容。与客户端模式相反，服务器模式导致整个页面重新加载，并且由于在屏幕上执行的每个操作都要发送多个服务器请求，从而导致整体页面呈现缓慢。在客户端模式下，Apriso屏幕可以轻松运行，而无需在初始页面加载后进行太多刷新，因为每个屏幕操作只会在屏幕中更新已更改的数据，而不是重新加载整个页面。

两种模式优缺点比对：

在项目开发时，客户端模式框架应该是默认选择。当将解决方案迁移到客户端模式时，大多数有问题的部分是糟糕的第三方JS库和为克服服务器模式的限制而开发的自定义代码而造成的。

两种模式对比

客户端模式其他差异点说明：

在客户端模式下，只支持Grid 1.0, Tree 1.0, Visualization, Quality Defects Visualization (vQDT), WI Experience 3DPlay和 Work Instructions业务控件Business Control
客户端模式下不支持用户输入User Inputs和用户输出User Outputs
要使用文件选择器用户输入，在HTML布局编辑器中添加一个< Input type=" File "/>元素(在服务器模式下不支持)
在客户端模式下不支持View类型的标准操作Operation的Layout Editor功能，因此必须将UI步骤转换为HTML Layout Editor布局编辑器
不支持Work Instructions显示模式设置(仅当链接到步骤时)，因此必须使用工作说明业务控件Work Instructions Business Control
无任务支持
在客户端模式下提供了一个新的JavaScript API（Apr.js）
当Go to Screen导航操作没有屏幕链接时，该操作不会刷新屏幕(在服务器模式下，执行刷新操作)
当没有从任何视图返回任何操作Action时，提交视图不会刷新屏幕(在服务器模式下，执行refresh操作)
在Mozilla Firefox中以弹出窗口显示PDF文件需要在Firefox中设置可移植文档格式为预览(在“选项>应用程序”中)

客户端模式启用

发布Flexpart时选择Client mode即可启用。

测试运行时可以也可以选择client mode方式进行测试，客户端模式下提供了不同的调试树：

新的树形结构——顶层包含在load/initialize和loaded视图上运行的操作。
当一个动作在屏幕上执行或一个屏幕被提交时，调试树将被附加有关执行动作的信息——调试历史将被保留。
由于新的树形结构，错误很容易访问
客户端模式下的调试树显示如下信息:
- INITIALIZE - 链接到屏幕的OnInitialize操作。
- LOAD - 链接到屏幕的OnLoad操作。
- DISPLAY - 视图操作的一部分，在显示视图时执行
- COMPUTE - 视图操作的一部分，在提交视图时执行
- ACTION - 执行的操作(可以包含链接操作)

Screen Flows引擎在使用以下角色运行客户端模式FlexParts时发送额外的调试数据:流程功能作者、流程技术作者、流程测试人员和流程用户界面作者。这可能会增加DELMIA Apriso服务器上的资源使用。

同时在Client Mode运行时，调试信息Debug info视图也不再显示和使用：

开发过程中的差异点

1、Process builder中的变化

带有UI元素的步骤应该转换为使用HTML布局编辑器。
用户输入应替换为屏幕接口输出(通常使用data- flex -bind)。
替换所有客户端模式下不支持的Business Controls。

2、Javascript的变化

Javascript事件(documentReady)不能确保页面已经加载完成，需要改用View.onLoaded事件。添加一个View.onunload处理程序，如

<script>
$(function () {
//A Screen is not loaded here.页面未加载
});
$View.onLoaded(function () {
//A View is loaded here.页面加载完成
});
</script>

尽量将全局变量替换为局部变量。如果存在全局变量，请确保在$view. onViewsUnloading中正确重置变量，如

<script>
$View.onViewsUnloading(function () {
//A View is unloaded here.
});
</script>

如果使用setTimeout或setInterval函数，需要在视图卸载时停止它们的执行 ($ view.onUnloading)，如

var intervalId = setInterval(myCallback, 2000);


$View.onUnloading(function() {
    clearInterval(intervalId);
});

3、常见问题

旧的布局编辑器Layout editor打开视图时错误，但步骤已经有HTML布局编辑器。当使用旧的外部输入(外部输入External Input允许用户输入User Input)并且没有传递任何值时，就会发生这种情况。检查屏幕配置(是否所有变量都初始化了)或在视图操作(和子操作)中启用操作接口interface。
打开视图时显示“已经添加了具有相同键的项目”错误-。Apriso2021之前的版本有这个错误，禁止在多个步骤中使用相同的外部输出External Output。需要创建“Set Outputs”步骤，在该步骤中包含所有外部输出External Output。

客户端模式API

提供Apr和SF Javascript API，详见：http://[ServerName]/Apriso/Portal/Documentation/ApiDocs/index.htm

服务器模式向客户端模式转换

从服务端模式向客户端模式转换的一般步骤有：

▶第一步：检查控件Business control支持性

客户端模式只支持Grid 1.0, Tree 1.0, Visualization, Quality Defects Visualization (vQDT), and Work Instructions 业务控件

▶第二步：转换到HTML layout Editor

只转换带有UI元素的步骤
如果UI步骤包含带有UI元素的子操作，则UI步骤和子操作都应该使用HTML布局编辑器
如果一个操作包含多个UI步骤，则应该转换所有UI步骤(注意，在步骤导航视图中的一个路由路径中应该只有一个UI步骤)。

▶第三步：重写User Inputs

应该使用data- flex -bind标记重写用户输入为屏幕接口输出Screen Interface Outputs：

<input type = "text" data-flx-bind = "Output1" />

▶第四步：重写User Outputs

用户输出User Outputs重写为HTML Layout Editor布局编辑器中的屏幕界面输入Screen Interface Intputs。

▶第五步：检查Javascript

1、检查“Document Ready”事件，这个事件不再保证页面已经加载完成，加载完成事件需要使用“$View.onLoaded”事件

2、检查JavaScript变量在页面加载完成是否还需要使用，如果不再使用，需要在“$View.onViewsUnloading”事件中进行清除

3、如果使用setTimeout或setInterval函数，需要在视图卸载时“$View.onViewsUnloading”停止它们的执行。

▶第六步：检查Refresh

当Go to Screen导航操作没有Screen链接时，该操作不会刷新Screen(但在服务器模式下，执行refresh操作)。所以在客户端模式下，如果必须执行刷新操作，则必须将Portal操作类型从转到屏幕更改为刷新。

同样如果submit提交视图没有从任何视图返回任何操作时，不会刷新屏幕(在服务器模式下，执行refresh操作)。

例如

一个带有视图链接的屏幕，用户提交视图。这是一个例子:

使用网格Grid业务控件(行双击模式默认设置为选择和提交)和具有外部输出的用户公式User formula函数的操作。
外部输出的值是要执行的操作的名称。如果Action返回空，则不执行任何动作

如果必须执行Refresh操作，则必须使用action 的外部输出External Output返回Refresh类型的操作名称。

▶第七步：检查Go To Screen

在服务器模式下，Change View和Go to Screen功能性能之间的差异并不显著。然而，在客户端模式下，最好使用Change Views(如果适用)而不是Go to Screen。

例如：

服务器和客户端模式下的配置示例:

一个屏幕有两个链接的视图:View1和View2。
在View1上执行Action后，用户希望将View2更改为View3。

服务器模式行为:可以使用Change View功能将View2更改为View3，也可以使用Go to Screen功能导航到显示View2和View3的屏幕。在这两种情况下，屏幕都被重新加载。

而在客户端模式下，更改视图Change View只会更改所选视图，而不会更改其他视图，因此可以实现快速的应用程序性能。但Go to Screen功能将重新加载所有视图。

文件上传处理

在Screen Flows客户端模式中使用File Picker，在HTML布局编辑器或HTML编辑器(HTML视图)中添加一个<input type=" File "/>元素。客户端模式下上传文件是异步的。

1、配置文件大小限制

要配置文件大小限制，请在IIS管理器中更改以下IIS设置:

IIS设置请求过滤-部分maxAllowedContentLength，有关详细信息，请参见Microsoft Docs中的请求限制<requestLimits>。
IIS配置编辑器-部分system.web/httpRuntime:maxRequestLength，详细信息请参见HttpRuntimeSection。MaxRequestLength属性的文章在微软文档。

2、上传事件应用：

当添加File Picker控件时，可以使用当文件上传成功或失败时触发的事件，例如:

document.addEventListener("apr-file-uploaded", function(event) {your code})

document.addEventListener("apr-upload-failed", function(event) {your code})

文件默认上传到以下位置:<drive>\Program files \Dassault Systemes\DELMIA Apriso 2023\WebSite\Portal\Uploads。为了接收URL而不是路径，View Operation需要配置如下:

▶第一步：添加一个文件选择器控件

添加一个文件选择器控件，并将其与HTMLLayout Editor布局编辑器中的其他控件绑定，例如: