jxWebUI--系统说明

jxWebUI包括几个组件：

web界面描述解释器

根据指定格式对文本进行解释，获取界面的json描述，在用户请求打开指定的页面时，jxWebUI会调用disp函数，将此json发送到浏览器中，由浏览器中js的解释代码将其绘制成相应的web界面。

功能点【capa】

capa是一个衔接浏览器中的web界面和python代码的桥。

从浏览器接收的输入有：

• 用户请求打开一个页面，capa查找此页面的json描述并将之发送到浏览器，然后调用为此页面编写的初始化函数对页面进行信息的初始化
• 用户点击一个按钮，capa调用为此按钮编写的动作函数
• 用户在输入控件输入了数据，capa将收到的数据放入缓存，等待上述的动作函数中使用

向浏览器的输出核心就一个：向浏览器中的web控件修改其某个属性值。文本框、数据表、分页控件等等都是如此，只是各控件的属性不同。

上下文【ctx】

上下文是capa调用事件函数时同步提交的上下文环境。

目前只包括当前登录用户的信息。

用户代理【ui】

ui位于capa和浏览器之间，代表当前的登录用户和capa打交道。主要管理capa的加载、卸载、调用等，并为定时任务【Timer】提供托管。

jxWebUI处理流程

登录流程

jxWebUI只有一个html文件：tms.html。用户访问jxWebServer在指定端口上打开的该文件时，首先需要进行登录。

登录完成后，jxWebUI将打开一个webSocket连接来完成后继的所有通信工作。该webSocket连接会有一个心跳保持，只要用户不退出登录【包括关闭页面】，该连接就会一直保持。断线会自动重连。

webSocket打开后，jxWebUI会创建一个ui来代表该用户和capa打交道，同时会创建一个session，用来保存本次登录所对应的ui、webSocket对象等会话信息。

因为webSocket连接可能会断线重连，所以webSocket连接的断开不会导致session的清理，而是15分钟超时后才会进行清理。

由于webSocket连接的打开需要一定的时间，所以jxWebUI会做一个短停【2-3秒】，然后会根据当前用户的权限为其定制左边侧的快捷功能栏并下发。

快捷功能栏的定制包括三个来源：

1、指定给具体用户的特殊操作

2、分配给该用户的所有角色名对应的操作

3、未指定授予人的公共操作

jxWebUI根据这三个层次的权限，从所有通过shortCutTree_add_item注册的快捷栏入口中提取符合权限的操作定义，最后组合成登录用户的快捷栏定义描述，发送到浏览器中，绘制成该用户的快捷栏。

页面显示流程

用户点击快捷栏中的某项二级子菜单后，浏览器根据jxWebUI.shortCutTree_add_item注册时的定义，生成一个motion调用。然后将其发送到该用户所对应的ui。

ui检查该motion调用，发现是一个capa的disp请求，则根据motion调用的信息创建这个capa所对应的capaInstance，然后将disp请求发送到该capaInstance。

capaInstance查找本capa用界面描述器创建的页面描述，添加和本capaInstance相关联的信息后，将其发送到浏览器中创建一个新的tab页，然后在此tab页中进行解释、绘制。

一个活跃的capaInstance对应一个tab，最多可以同时显示5个tab，超过后，最久未用的那个tab会被清理，其对应的capaInstance也将被自动卸载。

然后，capaInstance查找该页面是否定义了初始化函数，如果定义了，则以本capaInstance和此时的上下文作为参数来调用该初始化函数完成页面的数据装订。

用户输入流程

用户在输入控件中进行输入时，会触发该控件的change事件【input控件是在失去焦点时触发】，浏览器捕获该事件后，将变更后的值汇总到一个数据缓存中。

jxWebUI在用户登录后，会启动一个定时器来定时的发送各个控件触发的所有未提交的变更数据。

当定时器被触发后，浏览器会将当前所有未提交的变更数据统一打包，发送到ui。ui然后将其拆包后分别发送到各页面对应的capaInstance接收。

如果用户长时间不操作，该定时器的触发频率会越来越慢，等用户有了操作会，该定时器会加速。同时，在用户的按钮点击事实触发后，会首先触发一轮变更数据采集。

如果多个控件间存在联动，如：输入价格、数量自动计算出单项小计、总计。jxWebCapa是通过前端联动计算在浏览器中完成的，只提交联动处理后目标控件的变更数据。

用户点击按钮流程

请求jxWebUI执行某种动作，在jxWebUI中称为一个motion请求。一个motion请求由三部分组成：

capa_name.moditon.demand
capa_name:capa的名字
moditon:disp【请求打开一个page】或cmd【请求执行一个函数】
demand:page名或函数名，因为page也是定义在函数的doc中的，所以就是函数名
如：
hello_world.disp.helloWorld，就是请求打开hello_world这个capa用page所修饰的helloWorld界面，如果helloWorld函数的函数体中有代码，则在显示完该界面后会执行该函数中的代码以对该界面进行初始化

发出motion请求的在jxWebUI中称为入口，入口有四种：

• 快捷栏按钮，点击快捷栏中的快捷入口，会在tabs中创建一个新的tab用来打开对应的页面
• 普通按钮，在容器表中定义的按钮，点击按钮，或执行该页面对应的一个动作函数，或打开一个对话框
• 数据表按钮，也就是定义在一个数据表中每一行中某个操作列中的按钮，点击后执行的动作和普通按钮类似，但必须准确的对应到该行中的不同实体
• 工具条按钮，也就是一个页面最上方的工具栏中的按钮，其和普通按钮的功能是一样的，但由于其是独立于页面单独定义的，所以其可以实现同一页面不同用户操作时的权限控制，即某项操作a用户可以看到、操作；而b用户登录时就看不到，自然就无法访问了

不管什么按钮，用户点击后，浏览器都会根据该按钮的描述生成一个motion调用。然后将其发送到该用户所对应的ui。

ui检查该motion调用，根据不同的情况，如motion类型、capaInstance是否已经创建等，完成capaInstance的准备，然后将其发送给capa。

capaInstance查找相应的事件处理函数，如果定义了相应的函数，则调用该函数并将结果发送回浏览器。

motion调用的返回结果有两种：

• 页面描述
• 页面控件属性变更

浏览器请求motion调用时，可以有两种工作模式：同步模式，异步模式。

同步的motion调用会等待motion调用的结果返回，然后交调用时指定的回调函数处理。而异步的motion调用的返回结果会统一交给一个处理函数集中处理。

用户一般不需要关心motion的调用，jxWebUI会根据用户定义来自动选择相应的工作模式。