构建联系人表单
您的设计应集中于单个任务。如果一个视图有太多关注点，则应将其划分为多个较小部分，以保持清晰。您将创建一个独立的表单设计，使用表单布局 (Form Layout) 来编辑单个联系人的信息。
为表单创建新设计
-
在项目树(Project tree)中，右键点击
frontend/src/views文件夹，选择 New > Vaadin 10+ Design。 -
在 Name 字段中输入
contact-form。 -
确保：
-
Create Java companion file 复选框已选中。
-
Java 包名(package)为
com.example.application。
-
-
点击 OK 生成文件。
-
设计在 IDE 中打开。
-
在组件面板(palette)中，搜索 "form"，并将
vaadin-form-layout拖到画布(paper)中的放置区域(drop section)。
您的表单组件包括两个用于姓名的文本字段，一个电子邮件字段，以及两个选择字段：一个用于选择公司；另一个用于选择联系人的状态。
添加姓名的两个文本字段
添加姓名的两个文本字段，首先在组件面板中找到 Vaadin Text Field，并将其拖放到 vaadin-form-layout 两次。 然后，在设计中选择第一个 vaadin-text-field。
在属性视图(properties view)中，打开属性面板(attributes panel)。找到 label 属性，将文本替换为 "First name"。找到 placeholder 属性，并清除其值。
然后，在设计中选择第二个 vaadin-text-field。在属性视图中，打开属性面板。找到 label 属性，将文本替换为 "Last name"。找到 placeholder 属性，并清除其值。
|
Note
|
如果您的设计画布比较宽，文本字段会水平排列。您可以拖动左右边缘来缩小画布宽度，这样就能使表单字段垂直堆叠。这是 vaadin-form-layout 默认的行为，根据宽度不同以一列或两列排列它的字段。
|
添加电子邮件字段
添加电子邮件字段，在组件面板中找到 vaadin-email-field，并将其拖放到 vaadin-form-layout 中。在属性视图中打开属性面板。找到 label 属性，并输入 "Email"。
添加公司与状态字段
添加公司和状态字段，在组件面板中找到 vaadin-combo-box 并将其拖放到 vaadin-form-layout 中两次。然后，在设计中选择第一个 vaadin-combo-box。
在属性视图中打开属性面板，找到 label 属性并添加值 "Company"。选择设计中的第二个 vaadin-combo-box。在属性视图中打开属性面板，找到 label 属性并添加值 "Status"。
添加按钮
您需要向表单添加保存(Save)、删除(Delete)和关闭(Close)按钮。保存是主要操作，应突出显示。删除操作可能存在风险，应被标记为错误(error)。关闭操作不重要，可以使用第三优先级(tertiary)样式以降低其强调程度。
要做到这一 点，请在组件面板中找到 Horizontal 布局，并将其拖动到 vaadin-form-layout 中。在组件面板的 Vaadin 按钮部分中，将以下三个按钮拖放到水平布局(horizontal layout)中：首先放置 Primary Button；再将 Primary Error Button 放置在其旁；最后放置 Tertiary Button。
接下来，选中 Primary 按钮，将按钮文本更改为 Save。选中 Primary Error 按钮，将按钮文本更改为 Delete，并在属性面板的 theme 属性中将 primary error 更改为 error。然后选中 Tertiary 按钮，将按钮文本更改为 Close。
完成以上步骤后，表单即完成。
在主视图中添加表单
您现在可以返回主视图，并将联系人表单放置到 Grid 的旁边。main-view`设计应当仍在 IDE 中打开，若没有打开，请在 IntelliJ IDEA 中再次打开 `main-view.ts 文件。
组件面板中现在会显示一个名为 Project Components 的部分，列出您在项目中创建的所有设计。从此处拖动内容，即可将其它设计嵌入到当前打开的设计中。
在 main-view 设计的组件面板中，找到 contact-form （在 Project Components 中）。将 contact-form 拖放到第二个 vaadin-horizontal-layout 中。
调整 Grid 与表单尺寸
您希望将大部分空间给予网格(grid)。为此，您需使用弹性尺寸(flex sizing)，在网格和表单间设置 2:1 的比例。
操作如下：选择 vaadin-grid。在属性视图的属性面板中，定位到 style 属性，在末尾添加值为 "flex: 2;"。
然后选择 contact-form。在属性视图的属性面板中，定位到 style 属性，并将其值设置为 "flex: 1;"。完成上述操作，布局即完成。
请继续下一页运行您的应用程序：运行应用程序。
DD73F930-FE7B-48FA-BCC2-F625A972D2E9