表单设计器是基于界面元模型的界面开发工具，该工具为界面开发人员提供了快速的所见即所得的界面定制能力，并可以根据所设计的界面自动编译生成可执行的界面代码。

使用前提：必须已经建好了界面元模型文件，对于需要使用参照的控件，也需事先建好并发布参照文件。

后续影响：设计的表单最终影响可执行的界面代码，以及界面的显示效果。

初识表单设计器

新建表单

第一步：选中一个界面项目，选择如下操作之一新建界面文档：

1. 在上下文菜单中选择新建
2. 在工具栏中点击新建按钮
3. 在主菜单中选择“文件 → 新建 → 新建”

第二步：如上图，在界面页签中选择“界面”文档类型，输入界面名称（需以字母开头），点击确定，打开新建表单界面：

第三步：选择模板类型及模板。关于表单模板的详情，请参见“表单容器”之“使用表单模板”小节。

第四步：选择要绑定的界面元数据。点击“选UIModel”按钮后，打开界面模型列表，列出现有的界面元数据供用户选择：

第五步：界面模型选择完毕后，完成表单的创建。

提示：

1. 通过新建表单，使用FormDesigner提供的模板类型可以快速的完成界面的构建或者界面复制工作；
2. 在选择模型的时候可以在预览区域看到界面的预览效果。

表单编辑界面

完成表单的创建后，就进入了表单设计器界面：

界面各区域功能说明：

＃1 工具箱之控件列表：包括本设计器支持的所有控件。

＃2 界面设计工作区：界面设计的主要工作区域，包括可见控件设计区和不可见控件（组件）设计区。

＃3 可见控件设计区：用于设计界面上可见的所有控件。

＃4 不可见控件设计区：用于设计界面上的不可见控件 

＃5 属性页：用于显示和编辑在界面设计工作区选中的控件的属性。

＃6 工具箱之界面元数据：显示当前界面所绑定的界面元模型的各个元数据视图，以及各视图所属的界面字段。

界面元数据的重新绑定

表单绑定界面元数据（界面模型）的工作一般在新建表单时进行，建立表单后也可以修改对界面模型的绑定。操作如下：

在左侧工具箱中切换到界面元数据区域，右键点击界面元数据的标题，在上下文菜单中选择“绑定UI Model”：

即可打开界面模型选择界面进行重新选择：

使用控件

表单是由界面控件构成的，设计表单的主要工作就是设计控件。

控件介绍

FormDesigner工具箱的控件列表分组中包含所有的控件，包括原子控件、容器控件和关联控件三类：

1. 原子控件：分为普通控件和UIField绑定控件。
   1. 普通控件：有文本标签、按钮、图像按钮、下拉按钮、线控件、图像控件、单选列表和多选列表，以及条件控件、报表控件和段组合项；
   2. UIField绑定控件：有文本框、多选按钮、下拉列表框、参照控件、树控件、日期参照、文件上传控件，以及双计量单位控件；
2. 容器控件：有普通容器控件、卡片控件、分组框控件、分页控件、向导控件，还有两个较特殊的容器控件网格控件和工具条。
3. 关联控件有使能关联控件、公式关联控件；

控件编辑

控件的创建

拖动控件列表项创建控件：

从“工具箱”中的控件列表分组中选择相应的控件项拖放鼠标到界面设计工作区，相应的控件就会根据当前拖放的位置进行放置。

1. 如果当前拖放的是不可见控件，将自动放置到不可见控件设计区，且位置不可调。
2. 所有控件都可以通过这个方式创建。对于数据绑定控件，需要手工进行数据绑定。

通过界面元数据列表创建数据绑定控件：

对于数据绑定控件，可以通过界面元数据列表快速创建并自动绑定数据。双击界面元数据列表中的节点是最快捷的方式，在双击之前需要首先选定该控件或控件组要进入的界面容器：

1. 双击界面字段节点：产生与当前界面字段相匹配的控件，加入到当前容器中。
2. 双击界面字段的分组节点：产生与当前分组下属所有字段各自匹配的控件，批量加入到当前容器中。系统默认的分组不支持这种操作。
3. 双击界面视图节点：产生与当前视图下属所有非系统默认字段各自匹配的控件，批量加入到当前容器中。其中，系统默认的分组及字段在界面中默认为隐藏显示。
4. 对于单个界面字段，也可以采用拖曳的方式产生控件并加入到目标容器中。
5. 对于需绑定多个界面字段的控件，还需要采取手工绑定的方式。

控件的编辑

控件的移动与放缩：

点击选中任何控件将鼠标移动到移动把手区，都可以将选中的一个或多个控件进行移动，移动可以跨容器进行。

点击选中任何控件将鼠标移动到放缩把手区，都可以将选中的一个或多个控件进行放缩，放缩根据选中的放缩把手区域不同，按照各自的方向进行。

控件的删除：

1. 选中后，点击右键，在上下文菜单中选择“删除”
2. 选中后，直接按Delete键

查看编辑控件的属性项：

选中控件后，将右侧工具区切换到属性页。

控件的显示与隐藏：

可以修改控件在表单中的显示状态，操作：

切换到模型浏览器，打开表单的树形列表，可以看到所有的控件，包括隐藏的和没有隐藏的。隐藏的控件是灰色的图标。如图，点击鼠标右键，在上下文菜单中可以选择对控件进行“显示”或者“隐藏”。

控件的公共属性

在控件的属性页中，有一些属性项是多个控件的共有属性。这里对这些属性项做统一说明，下文在说明具体控件时，这些属性项将不再赘述。

控件事件的编辑

响应界面用户的操作是通过事件来进行的，表单设计器提供了若干种事件供开发人员使用。如：

1. 按钮类控件：Click事件
2. 树控件：NodeClick事件
3. 网格控件：GridRowClicked、GridRowDbClick、GridRowSelected事件
4. 数据绑定类控件：TextChanged、TitleClick事件。

如要启用某个事件，需要在属性页中点击相应事件的扩展按钮，打开事件设置窗口进行设置：

图中：

1. 控件名称、控件类型：显示当前选中的控件信息，系统自动带入，此处不可更改
2. 启用事件（复选框）：选择是否启用当前事件。
3. 事件设置分组框：
   1. 处理动作：选择一个界面动作以响应事件。动作来自于界面模型中已经存在的动作（UI Action）。
   2. 事件模板、模板参数：选择事件处理的模型及模板参数。

容器类控件

容器类控件综述

容器类控件中可以放入其它控件，方便逻辑上的分组以及表单的区域划分。此处对容器类控件的通用属性项进行统一说明，下文在介绍各具体控件时，将忽略通用属性项的说明。

容器类控件的通用属性项

表一：主体的通用属性项说明

表二：容器布局的属性项说明

设置网格行列的详细信息

点击属性页中网格行/列集合的扩展按钮，可以打开网格布局行/列信息编辑框，如图：

在网格布局行列信息编辑框中可以维护每行或者每列的信息，手工调整行列的尺寸，也可以对行列进行增删操作。

专有属性项说明：

在线调整网格布局

在设计锁定为False时，容器内行列的网格线会显示出来，此时拖动网格的边线可以在线调整列宽或者行高。

说明：只能拖动单元格宽、高；行、列间距不能通过在线拖动的方式调整。

网格自动布局

为了方便网格的布局，系统还提供了两种自动布局方式。在容器类控件的空白区域内点击鼠标右键，上下文菜单中有两个自动化布局的菜单项：

1. 按比例规则化网格列：[i]
2. 均分网格列：根据当前容器的宽度，等宽均分各列。

表单容器

表单本身就是一个容器，可以在其中直接加入原子控件，也可加入其它容器。

属性页说明

表单的特定属性项说明：

使用表单模板

在属性页点击“表单模板”输入项的扩展按钮后，就打开表单模板选择窗体，如图：

图中分为三大部分：

1. 左侧窗格：用于选择模板的类型
2. 中间窗格：用于选择具体的模板
3. 右侧窗格：用于选择模板的预览图

表单模板分为三大类：

1. 系统表单：系统默认提供的表单模板。这里提供了系统最常用的表单样式。
2. 定制表单：用户定制的表单模板。用户自己建立的表单都可以保存为模板，然后就显示在此处以方便复用。
   1.  
3. 表单复制：取现有的表单作为模板。系统会列出当前项目的所有表单供选择。

系统提供的默认表单模板：

1. 左树右表：左侧是一个树控件，右侧是一个网格控件。

左树右表卡：左侧是一个树控件，右侧上方是一个网格控件，右侧下方是一个卡片容器控件。

左树右卡：左侧是一个树控件，右侧是一个卡片容器控件。

1. 单据类模板：维护单据常用的表单格式，上部单据头是一个卡片容器控件，下部单据体是一个网格控件。

1. 主子表：上下两部分都是网格控件，一般用上部网格显示主表，下部网格显示子表。

说明：系统提供的默认表单模板都带一个工具栏控件，方便用户添加工具按钮。

定制表单模板：

打开要作为模板的表单，点击主菜单“文件” → “保存为模板”，即可打开自定义模板管理窗体：

点击“增加”按钮，在弹出窗口中输入模板的编码和名称，点击确定后即可将当前表单保存为定制模板。

Form参数设置

Form参数是调用其它WebPart时获取的参数变量及取值。在属性页的“Form参数”项点击扩展按钮后，打开Form参数单独设置窗口如下图所示：

图中的两大部分：

1. 左侧窗格：以层级树的方式显示出模型视图，其中的字段可用于建立与参数的对应关系
2. 右侧窗格：Form参数列表

Form参数列表项说明：

提供者设置

提供者参数是提供给其它WebPart的参数变量及取值。在属性页的“提供者集合”项点击扩展按钮后，打开提供者设置窗口如下图所示：

图中的两大部分：

1. 左侧窗格：以层级树的方式显示模型视图。
2. 右侧窗格：显示提供者层级树列表。

提供者参数列表项说明：

普通容器控件

普通容器控件是最常用的容器类控件，没有标题，没有边框，默认带有一个垂直滚动条，如下图所示：

普通容器控件的属性项均为容器类控件的通用属性项，无专有属性。

卡片控件

卡片控件可以选择是否显示边框，其它属性与普通容器控件相同。

专有属性项说明：

分组框

分组框的外形如下图所示，带有标题和边框。其它方面与普通容器控件相似。

专有属性项说明：

分页控件

分页控件用来定义信息的多页签显示，相当于每个页签中嵌套了一个卡片容器。

分页控件各部分的选择：分页控件是复合型的容器，其各部分的选择有一定的复杂性：

1. 选择整个控件：点击当前子页的页签标题
2. 选择当前子页：点击当前子页的主体区域。
3. 切换页签：点击非当前子页的页签标题

分页控件的操作：

1. 维护分页控件的整体属性：选择整个控件后，修改属性页中的输入项信息。其属性项均为通用属性。
2. 维护当前子页的属性项：选择当前子页后，修改属性页中的输入项信息。
   1. 修改当前页签标题：修改属性页中的“显示名称”属性项。
   2. 其属性均为容器类控件的通用属性，无专有属性。
3. 调整各页签的前后次序：右键点击页签标题区域，在上下文菜单中选择“前移”、“后移”，就会改变当前页签的次序。
4. 删除当前标签页：右键点击页签标题区域，在上下文菜单中选择“删除标签页”。注意：不要选择“删除”，该选择会删除整个分页控件。
5. 新增当前标签页：右键点击页签标题区域，在上下文菜单中选择“增加标签页”。

向导控件

同分页控件类似，向导控件也是一个复合型的容器类控件。

向导控件各部分的选择

同分页控件类似，向导控件各部分的选择也有一定的复杂性：

1. 选择整个向导控件：点击子页主体和页签标题之外的部分，比如左下角或者顶部的空白处。
   1. 当向导页签被隐藏时，整个向导控件一片空白，此时点击顶部边缘线（其实是子页的边缘线）外部，才能选中整个向导控件。
2. 选择当前子页主体：点击子页主体或者当前子页的标题。
3. 切换页签：有两种可选方式
   1. 点击要切换到的页签标题
   2. 点击右上角下拉按钮，从页签的下拉列表中选择要切换到的页签。

向导控件的整体属性

选择整个向导控件后，就可以在属性页看到向导控件的整体属性项，如图：

向导控件的专有属性项：

向导控件子页管理

向导控件各子页的顺序调整、增删都可通过组件集合编辑框进行。通过如下两种方式之一：

1. 选择整个向导控件，在属性页中选择“向导页集合”输入项，点击输入框右侧的扩展按钮
2. 点击向导控件右上角的下拉按钮，选择弹出菜单中的“增减页签”

就可以打开组件集合编辑框窗体，如图：

图中，主要分为左右两大部分：

1. 左侧窗格：显示页签列表，点击右侧的上下箭头，可以调整页签间的次序。
2. 右侧窗格：显示当前页签的属性项，均为容器类控件的通用属性项，无专有属性。

工具条和按钮

工具条

工具条控件主要用来作为界面中的功能按钮的容器，工具条控件中只能放置按钮、图像按钮、下拉按钮、分割符控件。

1. 按钮和分割符等可以在工具条中拖放以调整顺序。
2. 在工具条中点击鼠标右键的弹出菜单中可以增加工具条中的分割符。

按钮控件

按钮的主要功能是响应用户的界面操作事件，实现方式是通过对Click事件添加界面操作（UI Action）来完成的。其它有些控件也可以响应一种或几种事件，是否启用是可选择的，但按钮的Click事件一般是需要响应的，否则就失去了设置按钮的意义。

按钮控件一般放在工具条控件中。如有需要，放在容器中的其它位置也是允许的。

按钮、图像按钮、下拉按钮的通用属性项说明：

图像按钮控件

图像按钮控件与按钮控件类似，不同之处在于：图像按钮控件上可以添加图片作为图标。

特有属性说明：

下拉按钮控件

下拉按钮控件的主体与按钮控件类似，不同之处在于多了个下拉菜单的选项。整个下拉按钮控件可以响应一个Click事件，每个选项也有各自的Click事件。

属性页说明

特有属性说明：

编辑下拉菜单项

特有属性说明：