本文主要介绍下,工具页面的使用细则
项目发布后,进入可视化页面编辑页面,$appRoot/flex/tools.html。
对已经录入的页面【读取】和【保存】操作,首先要在右上角进行登录,并且登录用户需要有页面读取和页面保存的权限。
该区域包括可拖拽的所有页面可视化组件,组件ID+组件名称,双击列表中的item,会弹出该组件的介绍及必输属性和选输属性的介绍,以及各属性如何填写。
如下图为双击item【15单选列表】弹出的界面:
页面编辑区(即后台弹出窗口)大小可以通过修改左侧页面属性调整,允许有滚动条,调整最下面一个控件的Y轴坐标即可。其中拖拽到此处的组件可以通过鼠标拖动来调整位置,并会在与其他组件XY坐标相同时,会出现对齐线,点击组件会出现4个边界点进行大小调整。如下图:
该区域包括【页面属性】、【必输属性】、【选输属性】及【批量修改】4个部分的内容。
页面属性:包括属性,页面名称,页面标题,页面高度,页面宽度,页面有效高度(不可修改),页面有效宽度(不可修改)。
页面名称 - 页面读取标志,唯一键,先要在后台系统的【页面管理】添加该页面。
页面标题 - 弹出窗口的Title显示。
页面高度 - 弹出窗体高度。
页面宽度 - 弹出窗体宽度。
页面有效高度 - 不可修改,为页面高度去除title区,按钮区级上下边框的像素值。
页面有效宽度 - 不可修改,为页面宽度去除边框的像素值。
必输属性:包括属性,组件类型,组件序号,X轴坐标,Y轴坐标,组件宽度,组件高度,是否可见。
组件类型 - 组件拖拽到编辑区后,自动绑定该属性,可修改,但需要保存后从新读取进行页面渲染。
组件序号 - 页面组件创建顺序,也是tab键的切换顺序。
X轴坐标 - 页面组件位置X轴坐标,以左上角为坐标原点,可以通过组件拖拽,动态更改。
Y轴坐标 - 页面组件位置Y轴坐标,以左上角为坐标原点,可以通过组件拖拽,动态更改。
组件宽度 - 页面组件宽度,可以通过组件直接调整修改。
组件高度 - 页面组件高度,可以通过组件直接调整修改。
是否可见 - 默认可见,编辑页面不可见是可见度调整为0.5。
选输属性:包括属性,组件名称,组件样式,显示文本,数据源,组件动作,验证信息,错误信息,组件参数,是否必输。
组件名称 - 用于后台交互,获取输入内容,非交互性组件如按钮,文本标签等则不需要这个属性。
组件样式 - 于flex端定义了几个样式,如图标,颜色,位置等,多个样式以空格隔开。
显示文本 - 显示文字信息。
数据源 - 单选列表,多选列表等组件的数据集合。
组件动作 - 多用于按钮,与java端交互。
验证信息 - 组件失去焦点或者页面提交时对组件进行的正则表达式验证。
错误信息 - 组件验证失败组件显示的错误信息。
组件参数 - 组件非数据库定义的属性,flex固有组件的属性。
是否必输 - 用于组件必输项验证。
批量修改:包括属性,X,Y,序号,win系统Ctrl,mac系统command,按住的同时,鼠标选取多个可见组件,批量修改X,Y及NO,其中NO是增量修改。
PS:右侧属性区,有的属性后面会有一个聊天按钮,点击后会弹出该属性的描述与示例等,如组件样式后的按钮点击后弹出框如下:
自此,可以根据可视化界面的组件说明与属性说明进行简单的页面定制,后面会对每一种组件进行单独的介绍,会介绍实现方式与组件核心代码。