jxTMS--web控件的一般定义

web控件的一般定义

在前述《web界面》一文，我们综述了jxTMS的web界面，但没有详细讨论各种web界面。本文即讨论jxTMS的web界面的一般定义语法。

web控件有多种语法，目前开放的主要有两种：web控件和引用其它web控件。

单个web控件的定义语法：

web 控件名 (bind 数据名)? (parent 父容器名)? type 控件类型 校验? 显示条件? (属性 (, 属性)*)? 描述?

控件名就是标准的变量名【英文字母、中文字、_、数字等组成，数字不可开头】，建议不要使用中文，而该名必须在整个空间唯一。

数据名同样是标准变量名且建议不要使用中文，但不需要空间唯一，而只要在一个整体显示的web界面中不重复即可。不绑定数据名，则控件无法在python代码中赋值与读取。

如果指定了父容器，则本控件就是父容器的一个组成部分，一般只有容器型控件才需要，如div和table。

控件类型目前开放的包括：

• div，组容器，包含其它web控件用于整体显示、控制的容器，一个web界面就是一个div控件

• table，数据表或容器表控件

• text，文本，主要用于显示信息以提示用户

• input，文本输入框，主要用于单行输入

• textarea，多行文本输入框，由于jxTMS前后端交互使用json，而行号会破坏json的解析，同时web中的回车是br、p标记等，所以该控件的值会被用base64编码，同时不做任何解码

• button，按钮，点击则根据参数触发相应的事件

• a，工具条，点击则根据参数触发相应的事件

• checkbox，复选框

• checkboxGroup，复选框组

• switchGroup，可选显示格式的复选框组

• radio，单选框

• tree，树型菜单

• dtpicker，日期拾取器

• tag，标记

• combobox，下拉选择框

• fileInput，文件上传

• map，高德地图

• h5ss，h5ss视频显示

• chart，图表

• codeEditor，代码编辑器

校验

校验是发送到前端浏览器的表达式，对该web控件的用户输入值在必要时【如点击了按钮之后】进行合规性检测：jxTMS的js代码会执行这些表达式来判断web控件的当前值是否能通过核验，如果不能通过核验，js代码会弹出提示框并标红该控件以提示用户其输入不符合要求。

校验语法如下：

verify=[ 校验子句 (, 校验子句)* ]

其中校验子句的语法如下：

校验子句 (, 校验子句)*		//校验子句可以是多个校验子句的或连接
数据校验 (and  数据校验)*	//单个校验子句是多个数据校验的与连接

其中数据校验的语法包括：

比较符 值					//web控件的当前值和某个值进行比较
值 比较符 值				//两个值的比较
len 比较符 整数				//输入的字符串的长度和整数的比较
validity 比较符 日期值		//把用户输入的字符串和日期值以【yyyy-MM-DD hh:mm:ss，ss可省略】的格式转换为日期，然后进行比较
is num						//判断用户输入的字符串是否是数字
is integer					//判断用户输入的字符串是否是整数
is dateTime					//判断用户输入的字符串是否是日期
rule= 字符串				//字符串是用单双引号框起来的javascript的正则表达式，根据该正则表达式来判断用户输入的字符串是否相符

注：如果值是VAR开头的【形如VARvn，如VARmyID】，则为引用上下文发送到前端的本地变量vn的值，如VARmyID即比较当前用户的ID

其中的比较符和sql数据源中的定义是一样的，包括：等于【==】、不等【!=】、大于【>】、大于等于【>=】、小于【<】、小于等于【<=】、相似【like】共七种。

注：用户输入的自然都是字符串，但jxTMS的js代码如果是值比较，则会在比较前将其转换为相应的格式，如果无法转换成相同的格式，则其比较请查看javascript的相应比较规则，jxTMS无法保证。所以建议如果是值比较，最好在比较前先and一个类型判断的数据校验子句

显示条件

显示条件是也发送到前端浏览器的表达式，jxTMS在接收到后台发送过来的该web控件的json描述时，会执行该表达式，如果不通过就不再创建该控件。但在后来的应用中，笔者从未使用过该特性，而且在测试过程中发现由于不显示该控件会影响控件布局不可预知，同时也可能会影响到后台逻辑的一致性，所以此处就不再加以介绍。建议如有此种情况，可由后台通过控制该控件的enable属性来使其失能，这样该控件既不会用户使用到，同时仍然占位不影响布局和后台逻辑。

描述

在开始设计jxTMS时，笔者希望能提供一种实时的帮助能力以便于用户在遇到使用问题时能尽快了解该如何操作，而减少对维护人员的打扰。所以就设计了控件的描述功能，当开发者对该控件设置了描述后，在鼠标移动到该控件时，就会弹出一个黄色的小tip显示这个描述。但这一设计后来基本不再使用，原因是笔者发现：

• 对于业务应用系统，用户上岗前应通过正式培训才能操作，而不能以这种自己学习的方式胡乱试错

• 对于已经足够熟练的用户，鼠标移过弹出的黄色tip是非常让人恼火的、会分散注意力无法高效的专心工作

• 如果想达到足够理解程度的说明，需要大量的字符，那就为了这么个只有负面效果的功能还必须每次都发送大量的文字到前端浪费了内存和带宽

有鉴于此，该功能虽未取消，但jxTMS前端已经将这一功能默认禁止掉了，也不建议开发者对控件加描述。如果需要说明，则开发者应编写界面设计说明文档。

引用其它web控件

有些界面可能有相当多的控件是相同的，而且还是一一对应的相同，即如果我要改你也必须改。如录入产品台账和编辑产品台账，可能除了产品代码/编号之类一个有信息一个没信息、最后点击触发后台事件的按钮所对应的cmd事件不同，其它都是一样的。

这种情况下如果需要修改，则必须同时修改两个界面，而且更头疼的是各个控件的名字还不能重复。所以如果有修改的需求，潜在的各种bug就会较大概率出现。

考虑到这个问题，jxTMS提供了引用其它控件的能力。比如，录入产品台账界面是由一个个不同的子div组成，而编辑产品台账界面也是由一个个的子div组成，但这些子div大多是引用了录入产品台账界面中对应的子div，只有包含确认按钮的子div不引用其它子div，而是真实定义的子div，其包含了触发【cmd.editProduct】事件的按钮，而录入产品台账界面中的这个子div则是包含触发【cmd.newProduct】事件的按钮。

引用其它web控件的语法为：

web 控件名 (parent 父容器名)? ref originalName? 被引用控件名 (属性 (, 属性)*)?

jxTMS支持引用一个已经定义好的控件，用新名重新命名后并添加属性后作为一个新的控件使用。这一能力主要用来引用其它的容器控件以避免修改业务逻辑后由于需要修改的界面太多而诱发各种bug。

如果设置了originalName，则控件名不会修改而就是被引用控件名，如果没有设置，则会用控件名来取代被引用控件名重新命名。

注：引用是复制被引用的控件，然后修改后使用的，所以被引用的控件和引用后的控件是两个不同的控件，引用后的属性修改不影响被引用的控件的定义

目前，jxTMS已经打包为云服务器镜像，开发者开箱即用：
jxTMS-腾讯云市场​