应用制作工具中级技能
10–15 分钟
您将构建的内容
您将构建一个披萨订购应用。该应用的用户可以执行以下操作:
- 订购披萨并选择披萨的尺寸和馅料
- 在表中查看所有订单
- 更新馅料选项
您将学到的内容
本教程将指导您如何执行以下操作:
- 设置不同种类的输入微件
- 以三种方式为输入微件设置选项
您还将创建数据模型、添加页面、使用绑定在微件中设置选项,相关内容将在其他教程中详细介绍。
创建应用
设置应用的数据模型和界面
- 添加 Cloud SQL 模型,并将其命名为“Orders”。
- 添加以下字段:
字段名称 | 类型 |
---|---|
CustomerEmail | 字符串 |
Size | 字符串 |
Toppings | 字符串 |
- 点击 Size 字段,然后点击 Advanced。点击 Possible values 字段,输入尺寸(如“small”),然后点击 Add。如果要添加更多尺寸,如“medium”和“large”,请重复此步骤。点击 Done。
在左侧导航栏中,点击 NewPage。在属性编辑器中,设置以下属性:
- Name - PizzaOrders
- DisplayName - Pizza Orders
- datasource - Orders
打开微件选项面板
,将“Form”微件添加到页面。
- 仍使用数据源“Inherited:Orders”。
- 选择 Insert 类型表单。
- 取消勾选 Choose form fields 页面上的 Id 复选框。
表单将使用与数据源中的字段相对应的文本字段自动填充。在接下来的步骤中,您将添加微件以替换一些文本字段。但是,您不会删除文本字段,因为这些字段向您显示了微件如何与数据源关联。
在该表单旁添加一个
“Table”微件。保留所有默认设置。
添加选项微件
在本部分中,您将设置微件,以允许用户选择披萨尺寸和馅料。
创建一个用于选择披萨尺寸的下拉列表:
- 将
“Dropdown”微件添加到 Customer Email 文本字段下方的 Pizza Orders 表单。
- 在属性编辑器中,将该“Dropdown”微件命名为“SizeSelector”。
- 将 label 设置为“Select size:”。
- 点击 options。要将下拉选项绑定到 Size 字段的可能值,请将 options 设置为
@datasource.model.fields.Size.possibleValues
。 - 点击 values 并选择 Size。此设置将值绑定到
@datasource.item.Size
。如果点击 Size 文本字段微件,您会看到它具有相同的值。value 将微件与数据源关联起来。当用户创建订单时,应用向数据模型添加记录,并将 Size 字段设置为在微件中选择的值。 - 删除 Size 文本字段微件。
- 将
创建一个多选微件以用于选择披萨馅料:
- 将
“Multi select”微件添加到 Select size 下拉列表下方的页面。
- 在属性编辑器中,将该多选微件命名为“ToppingsSelector”。
- 将 label 设置为“Select toppings:”。
点击 options。在绑定代码编辑器中,删除
@datasource.text
并输入["basil", "eggplant", "garlic", "tomatoes"]
(或您最喜欢的其他馅料)。请注意,您没有将选项绑定到为数据源中的 Toppings 字段设置的可能值。可能的值用作数据验证器,并且完全匹配。对于多选微件,要使用该方法,您需要输入每一种馅料和所有馅料组合,例如“basil”、“eggplant”、“garlic”、“tomatoes”、“basil,eggplant”、“basil,garlic”、“basil,eggplant,garlic”等等。
点击 values 并将绑定设置为
@datasource.item.Toppings#strToArray()
。如果点击 Toppings 文本字段微件,您会看到它具有类似的值。由于用户可能在多选微件中选择多种馅料,因此您可以使用 #strToArray() 将微件中的列表转换为数据源中存储的数组。删除 Toppings 文本字段微件。
- 将
关闭微件选项面板(点击“Close”
)。预览和测试应用:
- 点击 Preview 并允许应用访问数据。
- 在 Create Orders 窗格中,订购披萨。点击 Submit 后,披萨订单会添加到表中。
- 关闭预览标签页。
使用数据绑定设置馅料选项
如果您的菜单需要经常更改,怎么办?您不希望在每次增加馅料选项时都要修改微件选项并重新部署应用。在本部分中,您将添加一个用于添加馅料的页面,以及一个用于查看馅料的表。您将设置数据绑定,以使用新选项自动更新馅料选择器。
- 添加一个 Cloud SQL 模型,并将其命名为“Toppings”。
- 在 Fields 标签中,添加字符串类型字段,并将其命名为“Topping”。
- 添加一个新页面。在属性编辑器中进行以下更改:
- 将页面命名为“CreateToppings”。
- 将数据源设置为 Toppings。
- 在 Security 部分,点击 Who can see this page 菜单并选择 Admins only。进行该设置后,您的客户无法访问页面,也无法添加更多馅料。他们只能访问 PizzaOrders 页面。
打开微件选项面板
,将“Form”微件添加到页面。
- 仍使用数据源 Inherited: Toppings。
- 选择 Insert 表单类型。
- 取消勾选 Choose form fields 页面上的 Id 复选框。
- (可选)调整微件的尺寸,以将其收窄。
在插入表单旁添加一个表。请保留默认值。
转到 Create Orders 页面。
在 CreateOrders 表单中,选择 SelectToppings 多选微件。
在属性编辑器中,点击 options。删除之前生成的 JavaScript 数组。在 Application 下,选择 datasources
Toppings items projections Topping。其值为@datasources.Toppings.items..Topping
。现在,微件选项是 Toppings 数据模型中的值。预览和测试应用:
- 点击 Preview。
- 请注意,在 PizzaOrders 页面的 Create Orders 窗格中,目前没有任何馅料选项。您必须在 Toppings 数据库中添加一些馅料。
- 使用页面选择器转到 CreateToppings 页面。
- 添加馅料,您添加后它们即会填入表中。
- 使用页面选择器转到 PizzaOrders 页面。现在,Create Orders 窗格显示您刚刚添加的所有馅料。
恭喜!您刚刚创建了一个应用,该应用通过多种常见方法让用户选择选项。
后续步骤
- 尝试通过数据绑定在 Create Order 表单中设置披萨尺寸选项。
尝试通过“单选按钮组”
微件设置披萨尺寸选择器。
提示:要让单选按钮选项显示 Size 字段值而非 Id 字段,请转到您的数据模型,点击 Size 字段,然后点击 Set as display field。您是否想要使用单选按钮组来选择馅料?
学习供应商评分模板应用。CompanyCreate 页面具有一个多选微件,用于选择公司的区域。区域通过关系与公司记录关联。