AppBox拖拽设计增删改查用户界面

  之前为了应对客制化大屏设计的需求，在框架内实现了拖拽方式（动态化）生成用户界面的功能，跟大部分实现方式差不多，设计时生成配置json，然后在运行时解析json生成用户界面。这次完善了一下该功能，支持类似于零代码平台生成增删改查界面，下面简单介绍一下操作步骤。

一、准备数据结构

  参考之前的文章准备好所需的实体模型。

二、详情视图

  进入开发后台后，主菜单New->View，参考下图选择Dynamic类型的视图。

可以参考之前的可视化大屏设计视频了解一下如何布局组件。

1. 创建数据状态

  点击右上部State旁的添加按钮，添加类型为DataRow，名称为customer的状态，点击右侧修改按纽参考下图选择对应的Customer实体，并选择相应的列。

2. 详情表单布局

  参考下图大纲结构设计表单。

3. 绑定表单至状态

  在设计界面依次选择表单输入项，然后点击右侧属性面板内Text属性面侧的绑定按钮，在弹出的对话框内选择绑定的数据状态对应的列（绑定成功后绑定按纽为变为绿色）。

4. 绑定保存按纽事件

  在设计界面选择保存按纽，然后点击右侧属性面板内的OnTap事件，在弹出对话框内选择SaveData事件操作，并勾选customer数据状态。

三、列表视图

1. 创建数据状态

  先添加类型为String，名称为qName的状态，用于绑定查询过滤条件，然后再添加DataTable类型名为customers的状态，参考下图分别设置查询返回的列及过滤条件。

2. 列表视图布局

  参考下图大纲结构设计列表视图。

3. 绑定按钮事件

  分别绑定新建、编辑、删除、搜索按纽的事件操作，其中新建与删除按钮都是绑定至ShowDialog操作，不同的是向目标视图CustomerEdit传入的视图参数分别是CreateRow及FetchRow类型，FetchRow视图参数请参考下图设置主键字段来源于当前视图的哪个状态。

四、测试运行

  保存并发布上述模型后，就可以在应用端测试运行了（如下图所示）。

五、待实现功能

• 目前查询与保存暂未做权限验证，后续将在实体模型设计时提供是否允许动态化查询与保存的相关权限设计；
• 需要完善如实体关联选择等动态化组件；
• 事件支持脚本或图形化脚本；

六、本篇小结

  作者个人能力实在有限Bug在所难免，如有问题请邮件联系或Github Issue，欢迎感兴趣的小伙伴们加入共同完善，当然更欢迎赞助项目或给作者介绍工作（目前找工作中）。