您当前的位置是:  首页 > 资讯 > 文章精选 >
 首页 > 资讯 > 文章精选 >

低代码时代的呼叫中心(十)

2021-11-11 09:23:30   作者:黄河   来源:CTI论坛   评论:0  点击:


  进一步,页面的属性风格、事件和脚本以及数据服务。
  1、页面的属性设置
  属性编辑是低代码平台最常用的功能之一。属性面板位于右侧边栏的下部,与“事件”、“样式”组成多标签页。
  1)值编辑
  在属性面板中,根据属性值类型不同,采用不同的值编辑方式。下面逐一介绍这些值编辑方式。
  A、文本
  文本类型的属性是最常用的。如果属性是文本类型,则用文本框编辑属性的值。例如:
  B、数字
  数字类型的属性使用数字编辑框编辑。例如:
  C、枚举
  有些属性的值需要从固定的列表中选择。这类属性用下拉框编辑。下拉列表可以是固定的,也可以是从服务端加载的。这取决于控件。例如:
  D、尺寸
  对于尺寸类型的属性,使用特殊的尺寸编辑框。尺寸可以分为两类:像素、百分百。在尺寸编辑器中可以选择。某些控件属性只接收一种类型,另一种类型是禁用的。
  E、布尔
  布尔类型的属性,使用滑块按钮编辑。按钮灰色表示“false”,按钮蓝色表示“true”。
  F、表达式
  表达式类型的属性值比较特殊。表达式是javascript格式的语句。根据属性的不同,要求的表达式结果也不同。比如“是否显示”属性,要求表达式执行结果是布尔值。
  写表达式的时候一定要注意,表达式内的值一定要符合javascript规范,否则会导致表达式异常,从而使页面加载失败。比如字符串、日期时间要用英文单引号括起来的。
  表达式中允许引用页面定义的数据项。引用这些数据项时,要加this。限定符。例如页面内定义了一个名为“strval”的数据项,下面的表达式判断strval的值等于'hello'时,才显示控件。
  G、数据项绑定
  在低代码平台中,表单类的控件需要绑定数据项才能使用。这些控件的值是存储在绑定的数据项中的。当控件拖入页面时,平台会自动为控件创建数据项,并绑定。有时候,我们需要改变一个控件的数据项绑定。例如两个控件绑定同一个数据项。这时候就需要手动修改数据项绑定。
  数据项绑定属性的编辑器是一个下拉框。下拉框中以树状结构显示页面内所有数据项。包括普通变量、计算值、页面的参数等。
  H、图标
  某些控件有图标类型的属性。例如按钮控件,允许设置按钮图标。图标属性使用特殊的图标编辑器修改。图标属性编辑器是一个文本框,右侧有一个按钮()。点击这个按钮会弹出图标选择对话框。在这个对话框中选择图标。
  I、键值对
  键值对类型的属性值,是JSON的数组结构。数组每个元素都是一个JSON对象,至少有键和值两个元素。键和值的具体名称,根据不同控件,有所不同。有些控件中,这两个名称是可配置的。
  JSON结构允许多层,即每个数组元素还可以有自己的下层数组。这根据控件属性的要求而定。
  典型的键值对属性,是下拉框的选项数据。下拉框的选项数据中的键和值名称是可配置的。分别在值字段(选项数据中的键)、文本字段(选项数据中的值)属性中配置。
  点击键值对编辑框右侧的编辑按钮““,可以打开键值对编辑对话框。在对话框中,用可视化方式编辑键值对数据。也可以直接编辑JSON数据。对话框右上角有使用帮助。
  2)运行时属性
  一般情况下,都是在属性面板中,静态编辑属性的。如果希望在页面运行时,使用脚本来实时改变属性值。可以将属性做运行时绑定。
  不是所有属性都支持运行时绑定。只有部分属性支持运行时绑定。例如文本框控件的标签、后缀标签、占位文本、选项数据等属性支持运行时绑定。按钮的按钮文本支持运行时绑定。支持运行时绑定的属性,在属性编辑框右侧有一个绑定按钮”“。
  A、绑定
  将属性做运行时绑定的方法,是在属性编辑器中,点击属性后端的绑定按钮。如下图。
  当属性没有绑定为运行时数据项时,会显示蓝色的()按钮。点击后,弹出确认框。点击确定后,就绑定了运行时数据项。同时,按钮变为红色的()按钮。
  B、取消绑定
  点击红色的取消绑定按钮,就取消了属性的运行时绑定。
  C、查看绑定
  所有已经绑定的运行时属性,都可以在数据项面板中查看。
  D、初始值
  已经绑定的运行时属性,属性编辑器中设置的值作为属性的初始值。
  D、使用
  在脚本编辑器中,通过”this。rt['控件ID']['属性']“格式可以读写运行时属性。同时,脚本编辑器也提供了自动补全的辅助功能。

  2、事件和脚本
  低代码平台通过事件和脚本来完成业务功能。例如,当点击按钮时,会触发按钮点击事件。从而执行编写好的处理脚本,完成所需要的功能。
  1)事件
  事件面板在右侧边栏的下部。当选中一个控件后,事件面板中列出这个控件的所有事件。
  双击某个事件,或点击这个事件右侧的编辑按钮”“,就可以切换到事件脚本编辑界面。在脚本编辑区域,可以编辑事件的脚本。
  2)脚本
  在工具栏右侧按钮中,点击”脚本“按钮,可以切换到脚本视图。在脚本视图中,可以检索、编辑脚本,还可以添加自定义的方法。
  脚本视图分为两部分:方法导航和编辑区。
  方法导航中可以添加方法、删除方法、检索方法。这里列出的方法包括事件处理方法和自定义方法。检索方法使用的条件可以是方法名、事件名、事件名拼音或拼音缩写、控件ID、控件类型、控件类型拼音或拼音缩写、方法内容。方法列表的顶部是”所有方法视图“。点击这个视图,可以在编辑器显示所有方法的内容,但是不能编辑。
  编辑区内可以编辑方法内容。编辑内容的时候,会有智能提示辅助功能。
  U-Agent低代码平台是一款基于Web的快速业务实现平台。使用U-Agent低代码平台配合U-Agent强大的平台基础能力,可以快速实现客户的业务页面。在U-Agent低代码
  3、样式
  低代码平台的样式面板,在右侧边栏的下方,与”属性“、”事件“组成多标签页。
  低代码平台提供两种样式编辑方式:可视化方式和CSS方式。
  一般情况下,可以使用可视化方式编辑样式,简单方便。可视化方式支持背景色、边框、字体大小、字体颜色、字体样式、对齐方式、布局的编辑。可视化编辑视图的顶部,显示当前正在编辑的控件或控件内元素。
  某些情况下,需要修改可视化方式以外的样式。或者对样式做更高级的定制。这种情况下可以直接编辑CSS内容。点击样式面板右上角的切换按钮”“““就可以在可视化和CSS方式之间切换。
  4、数据服务
  低代码平台用数据服务提供数据的访问功能。通过编写SQL语句的方式访问数据。SQL语句在开发阶段编写。语句内可以提供参数。运行时前后端交互中,没有SQL语句,前端只向服务端传递数据服务名和参数。避免了安全问题。同时,参数是预先编译的,避免了SQL注入问题。
  低代码平台将页面内数据服务,封装为数据对象(页面内的数据项)。从而简化使用数据服务时的工作。使用数据服务对象有以下优点:
  1)简化脚本代码。一般情况下,使用数据服务对象不需要在then和catch中处理数据服务的返回和异常。数据服务对象将这些都做了封装。包括参数取值、返回结果赋值给数据项、结果到控件的显示、异常处理、日志记录、消息提示等。
  2)脚本更灵活。如果在某种情况下确实需要对结果进行处理,也可以使用then来实现。处理更加灵活。
  3)简化控件使用。常用控件对数据服务对象进行了适配,能够自动处理数据服务对象的返回结果。
  数据服务的测试如下图:
  查询数据的操作如下图:
  在”界面“视图,选中”查询“按钮。在右侧的”事件“面板,双击”点击“事件,为按钮添加事件代码。
  在点击事件的代码中,输入”this。ds$。“,会提示刚才添加的数据服务。如下图:

邮箱:huanghe@utry.cn
电话:18600895885
【免责声明】本文仅代表作者本人观点,与CTI论坛无关。CTI论坛对文中陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。请读者仅作参考,并请自行承担全部责任。

专题

CTI论坛会员企业