上一讲中,为大家介绍了表单模型一些基本概念。接下来,我们以本次培训案例——设备管理系统为基础,为大家循序渐进介绍DWF的表单建模工具的使用。
现在,我们为零部件(Part)创建两个表单,分别用于展示单个零部件的信息和全部零部件的列表。之所以选择零部件类,是因为它的属性较少也相对简单,适合用于基础控件的入门学习,这两个表单涉及的控件包括:
- 单对象控件:文本框、单选框、附件、按钮
- 多对象控件:表格
- 布局控件:分组框、行、列
1.维护单个零部件信息
1.1 表单管理入口
展开表单模型菜单,找到零部件(Part)类,点击“+”可以创建一个新表单,点击下拉三角可查看当前类上所有表单。
1.2 布局设置
根据培训案例,设计维护单一零部件信息的表单建模如下:
根据布局设置,建模过程如下:
1)首先进入实体类表单管理,点击零部件Part类右侧的“+”按钮,创建一个英文名为SinglePart表单,进入表单定制页面;
2)在左侧布局控件区找到行()控件,双击或者拖拽的方式,将行控件放入画布区;
3)选中画布区的行中的第一列,调整占位个数为8格,同样的方式调整第二列为16格(一行总占位格为24格)。也可以通过拖拽两列之间的深绿色块控制布局比例。
图-行布局属性设置
1.3 单对象控件-分组框
为了让右侧零部件信息分类更一目了然,可以在布局内添加一个“分组框”控件,建模过程如下:
1)在布局控件区域找到“分组框”()控件,拖至第二列布局内;
2)选中画布区分组框控件,右侧滑出的分组框属性编辑区设置分组框的标题为“零件信息”。
1.4 单对象控件-上传附件
根据案例中零部件信息维护表单的设计,左侧为零部件图片,右侧为零部件基本信息。DWF提供了”上传文件“控件,用于展示需要文件、图片、音频、视频类型的文件。
1)找到左侧控件区-单对象控件区域内的上传文件),拖至第一列中;
2)选中画布区的“上传文件”,右侧出现“上传文件”属性编辑区。在目标属性处,为”上传文件“控件绑定“零件图片partImg”属性;
3)”上传文件“绑定目标属性后,会默认显示一个与属性同名的标签。从用户体验角度考虑,可去掉标签名,使页面更简洁;
4)上传文件默认的显示方式为文件,可根据业务需要调整”上传文件“的显示方式。根据案例设计,将显示方式调整为“图片”;
5)”上传文件“默认高度为0(需建模者根据实际应用场景自定义设置),本案例中将”上传文件“的整体高度设置为300px。
1.5 单对象控件-文本框
字符串类型的属性,可以用文本框来展示和维护数据。例如零件名称、零件规格、零件材质、零件描述等。建模过程如下:
1)文本框提供了四种类型:text、password、textarea、email。默认类型为text,对于像零件名称、零件规格这类需要存储字段较少的属性,可以直接使用text类型;
2)对于零件描述这类需要存储较多字段(包括换行、回车等)的属性,可以将文本框类型切换为textarea。
1.6 单对象控件-单选框
对于变化不大的数据,例如性别仅有男、女两个选项,我们可以提供单选框将可能出现的数据罗列出来,供终端用户选用。
1)在单对象控件区域找到单选框()控件,拖入画布区适当布局内;
2)选中画布区的单选框控件,同以上控件设置步骤,首先为该控件绑定目标属性,本案例中绑定“零件类别partType”;
3)单对象控件属性编辑区提供两种单选框类型,默认是空心的小圆圈,也可以调整为按钮;
4)在选项组处,可以设置选项的具体数据,以“,”(英文/中文逗号均可)分割。设置完毕后点击确定,选项组即刻显示在画布区。
2.维护多个零部件列表
以上内容讲解了如何创建维护单对象表单(SinglePart),现在为大家演示如何创建维护零部件列表。零部件维护列表建模端示意图如下。
图-零部件列表
2.1 多对象控件-表格
1)首先创建一个表单英文名为MultiParts的表单,跳转表单定制页面后,拖入两个1行1列的布局;
2)在多对象控件区域,找到“表格”()控件,将表格拖入第二行布局内;
3)选中画布区域的表格控件,查看右侧表格属性编辑区,目标类默认显示为当前表单对应的目标类:零部件(Part);
4)点击选择属性按钮,设置表格中需要展示的列名,例如代号、零件名称、零件类型、零件规格等,勾选完成后点击确定。
勾选属性的顺序决定属性在表格列从的排列属性,第一个勾选到最后一个勾选在表格列中按照从左到右依次排列)
2.2 单对象控件-按钮
是否可以将以上零部件表格(MultiParts)和维护单个零部件表单结合起来使用呢?这里我们需要使用到按钮控件,用于维护零部件类的对象。
操作的基本概念与使用详见操作第三章 表单建模入门关于操作的介绍。
1)在单对象控件区域找到“按钮”()控件,拖入第一行布局内;
2)选中按钮控件,右侧滑出属性编辑区,这里有很关键的一步,就是为按钮绑定操作。按钮只有绑定一个有意义的操作,才能实现一个具体的业务;
3)根据业务场景,可以创建一个”创建零件“的操作,选择的动作为”create“,动作被激活时打开的目标类是零部件Part、目标表单SinglePart;
4)如果想打开一个编辑状态的零部件信息表单,需要在布局内新拖入一个按钮控件,创建并绑定一个动作为“edit”的操作,目标类及表单同上;
5)删除表格中的数据无需自定义操作,仅需绑定系统内置的基本操作-删除即可。
这有一个小技巧,如果想要新增、编辑、删除零部件类对象的同时使表格数据及时刷新,需要为按钮绑定的多对象控件id,相当于操作对象后通知多对象控件进行数据自动刷新。设置方式为点击下拉勾选当前画布区域的表格id。
图-按钮绑定多对象控件
以上这个表单是业务系统中最常用到的表单,比如:通用录、学籍管理、会议室预定系统都会用到类似的业务表单,下面针对此类页面定制再做个小结:
- 第1步:创建信息录入表单,本例子表单为:SinglePart
- 第2步:创建一个多对象的表格MultiParts,即实体类的信息列表;
- 第3步:增加按钮,在MultiParts上增加3个按钮,分别给“新增”、“编辑”按钮定义事件,事件需要选择:
- 给事件定义英文名、中文名,英文、中文名称最好要和默认的”create“、”edit"有区别
- 事件“动作”可选择:create、edit等
- 选择实体类,本例子选择的“part"
- 选择按钮要连接的“表单名称”,本例子中选择“SinglePar”,即数据信息录入的表单
3.小结
维护单个零部件信息 SinglePart
- 布局控件
- 行、列、分组框
- 单对象控件
- 文本框:文本框类型textarea
- 选择框:自定义下拉内容
- 上传文件:显示方式、整体高度
- 按钮:新增并绑定操作、基本操作
维护零部件列表 MultiParts
- 布局控件-行、列
- 单对象控件
- 按钮:新增并绑定操作、基本操作
- 多对象控件
- 表格:选择属性、列定制面板引用设置、显示模式