教程 2:处理数据

应用制作工具中级技能

15 - 20 分钟

您将构建的内容

您将构建一个简单的员工数据库应用。该应用的用户可以:

  • 创建新员工记录,并在其中输入数据
  • 修改员工记录
  • 在记录之间导航
  • 对记录进行排序
  • 删除记录

您将学到的内容

本教程将指导您如何执行以下操作:

  • 创建数据模型,并向其添加字段。您将学习与数据相关的概念:模型、字段、记录、数据源和数据绑定。
  • 将表单和表微件添加到页面。您将学习如何修改这些微件及微件的工作原理,还将学习插入表单和修改表单之间的区别。

创建应用

  1. 登录雇主或学校提供的 G Suite 帐号。
  2. 打开应用制作工具
  3. 创建一个空应用:
    • 如果应用制作工具显示欢迎对话框,点击 Create New App
    • 否则,点击“Menu” New Blank Application
  4. 将应用重命名为 Employee Database

创建模型

创建一个模型并定义其字段。模型包含应用中可用的数据。模型字段类似于表中的列,例如 NameEmailHireDate。模型将数据存储在记录中,类似于表中的行。对于本教程,您将使用 Google Cloud SQL 模型。

  1. 在左侧导航栏中,将光标指向 Data,然后点击“Add”。此操作会打开 Create Model 对话框,其中显示已选中 Google Cloud SQL
  2. 点击 Next
  3. 将模型命名为 EmployeeData
  4. 点击 Create。应用制作工具创建模型并打开模型编辑器。
  5. 点击 Datasources 标签页。请注意,该模型有一个名为 EmployeeData 的数据源,是由应用制作工具自动创建的。数据源可设置数据库中的哪些数据在应用界面中可用。
  6. 点击 EmployeeData 以打开数据源编辑器并检查数据源设置。

    默认情况下,所有数据均可用(未设置 Query),数据源会自动加载(Automatically load data 选中),更改会自动保存(Manual save mode 未选中)。对于此应用,默认行为是正常的。对于其他应用,如果您想先向用户传递查询,则可能需要关闭 Automatically load data。如果您希望用户在数据源中明确保存对记录的更改,则可能需要打开 Manual save mode。例如,他们可能必须点击 Save changes 按钮才能保存更改。

向模型添加字段

Fields 标签页中,针对每个字段执行以下操作:

  1. 点击 Add New Field,并选择字段类型。
  2. Name 字段中,输入字段名称。说明和其他设置可以保留不变。

    添加以下字段:

    字段名称字段类型
    Name字符串
    Email字符串
    HireDate日期
    Active布尔值

为界面设置页面

您的应用开始时包含一个页面。为该页面命名,并为其分配您的模型的数据源。创建页面时,其中没有预定义的数据源。为页面选择数据源时,页面上的微件会自动继承该数据源。

  1. 在左侧边栏中,将光标指向 NewPage,并点击“More” Rename。
  2. 输入 EmployeePage,然后点击 OK。
  3. 在属性编辑器(选中“Editor” 后可见)中,点击 datasource 属性。
  4. 点击 EmployeeData 以选择其作为数据源。

添加修改表单

借助修改表单,用户可以执行以下操作:

  • 在数据库中创建新纪录
  • 为记录输入数据
  • 为带有选项的字段(如布尔值字段、日期字段)以及具有可能值的字段选择值
  • 修改记录中的数据
  • 从数据库中删除记录

如需添加修改表单,请执行以下操作:

  1. 打开微件选项面板(点击“Widgets”),并将“Form”“Form”微件 添加到页面。
  2. 由于您将页数据源设置为 Inherited: EmployeeData,该数据源会被自动推荐。保持此设置并点击 Next
  3. Choose form type 对话框中,选择 Edit,然后点击 Next。
  4. 指定表单的选项:

    • Field - 选择要包括在表单中的数据源字段。
    • Editable - 将字段设置为可修改。

    对于本教程,请保留默认设置。默认选项创建的表单包含所有数据源字段。除 Id 外的所有字段均可修改。

  5. 点击 Finish

添加表

表以行和列的形式显示数据。行对应于模型中的记录,列对应于字段。用户可以使用表执行以下操作:

  • 同时查看多条记录,并在数据页之间移动
  • 修改可修改字段中的记录数据
  • 按列对记录进行排序
  • 删除记录

如需添加表,请执行以下操作:

  1. 在“Widgets” 中,向修改表单下的页中添加一个表 “Form”微件。将修改表单与表的左边缘对齐。
  2. 由于您将页数据源设置为 Inherited: EmployeeData,该数据源会被自动推荐。保持此设置并点击 Next
  3. 指定表的选项:

    • Field - 选择要用作表中的列的数据源字段。
    • Editable - 选择哪些字段可修改。

    对于本教程,请保留默认设置。默认选项创建的表中的列与所有数据源字段相对应,且所有列均不可修改。通常,在没有太多可修改字段时,应用的性能最佳。请按本教程中所示,提供弹出式对话框来创建和修改记录,并提供一个只读表来查看记录,而并非提供一个完全可修改的表。

  4. 点击 Next

  5. 保留其他选项 - 分页、可排序和可删除的行。

  6. 点击 Finish

预览和测试应用

  1. 点击右上角的 Preview,在新的浏览器标签页中运行您的应用。
  2. 点击 Allow 以允许您的应用使用特定信息。
  3. 放大浏览器窗口,使之能显示整个修改表单和表的顶部。
  4. Edit EmployeeData 表单中,尝试在 Name 字段中输入一个名称。您将不能完成此操作,因为还没有记录。
  5. 点击 Create 以创建记录。应用将记录添加到表中。这是数据库中的真实记录。现在,您可以输入数据,并且数据会自动保存到数据库。当用户想要更新记录时,该行为非常有用,但是若要创建记录,该行为并不直观。如本教程后面部分所述,对用户而言,插入表单是更直观的添加数据的方式。
  6. 填写表单。输入数据并选择值时,应用制作工具会将值添加到表中。在您按下 Enter、在字段外点击或进行选择后,各个字段的数据即会生效。
  7. 点击 Create 以便再创建一条记录,并为该记录输入数据。
  8. 选择表中的一条记录。点击修改表单中的“Delete” 以删除该记录。没有自动撤消功能,但该功能可通过脚本实现。
  9. 注意应用制作工具添加到表单底部的控件。使用这些控件可在数据页之间导航。

恭喜!您刚刚构建了一个处理数据的应用制作工具应用。

探索界面背后的力量

在完结本教程之前,让我们了解一下界面能力背后的功能:绑定、事件和操作。

了解绑定

绑定是微件属性和其他属性之间的双向关联。数据绑定是指微件属性绑定到数据源的某个属性。

由于绑定是双向的,因此更改一个绑定属性,另一个属性也会随之更改。

探索应用界面如何使用绑定:

  1. 如果应用的“Preview”标签页仍然打开,请将其关闭,然后返回应用制作工具。
  2. Edit Employee 表单上,选择 Name 文本框。
  3. 在属性编辑器中,注意 value 属性设置为 @datasource.item.Name

    该绑定关系将修改表单中 Name 的值与数据源中记录的 Name 的值相关联。value 属性中的路径将该绑定定义为:

    • datasource - 指微件的数据源
    • item - 指当前选中的条目(记录)
    • Name - 指记录的 的值
  4. 在属性编辑器中,选择 label 属性。请注意,该属性设置为 @models.EmployeeData.fields.Name.displayName

    该绑定将修改表单中 Name 文本框的 label 与 EmployeeData 模型中 Name 字段的 displayName 属性相关联。label 属性中的路径将该绑定定义为:

    • models.EmployeeData - 请参阅 EmployeeData模型。
    • fields.Name.displayName - 请参阅 Name 字段的 displayName 属性。

了解事件和操作

您可以将发生的事情(事件)与响应(操作)关联起来。

事件会触发操作。应用事件包括:

  • 应用启动
  • 数据源加载
  • 应用检查权限
  • 用户点击按钮
  • 应用访问或更改数据
  • 应用验证数据

操作是对事件的响应。操作包括:

  • 创建新条目
  • 删除当前条目
  • 重新加载数据源
  • 运行客户端脚本

探索应用如何使用事件和操作:

  1. Edit EmployeeData 表单中,选择 Create 按钮。
  2. 在属性编辑器中,找到 onClickonClick 事件是指用户点击 Create 按钮。onClick 事件同时列在 ButtonEvents 部分(为方便起见,相同内容显示在两处)。
  3. 点击 onClick。菜单包括当用户点击按钮时可能会采取的操作。在本例中,操作是自定义脚本。点击 Custom action 以打开代码。此代码可在数据源中创建分配给微件的条目。应用制作工具提供 Create new item 预设操作,但该操作适用于插入表单。
  4. 在画布(页编辑器)中,在表中点击 Name 标题。
  5. 在属性编辑器中,点击 onClick > Custom action。当用户点击 Name 标题时,操作是按 Name 字段对表进行排序的自定义脚本。

比较插入表单与修改表单

在结束表单主题之前,我们来比较一下修改表单与插入表单。

在本教程前面的部分,您发现用户可以通过修改表单来修改数据库中的记录。如果还没有记录,用户必须先创建记录,然后才能输入数据。相比之下,插入表单一开始将数据保存到数据源中(不是数据库中)的单个草稿记录中。当用户准备好后,他们将草稿记录的内容明确保存到数据库。

利用插入表单,用户可以执行以下操作:

  • 在草稿记录的字段中输入数据和选择值
  • 将草稿记录的内容保存在数据库中的新纪录中。数据复制后,草稿记录随即清空。

添加插入表单

  1. 将“Widgets” 中的“Form”“Form”微件 添加到修改表单旁的页面中。
  2. Inherited: EmployeeData 数据源默认选中。维持该选中状态,并点击 Next
  3. 选择 Insert,然后点击Next。使所有字段保持选中状态,以使它们显示在表单上并且可修改。
  4. 点击 Finish

探索插入表单的工作原理

  1. 点击右上角的 Preview,在新的浏览器标签页中运行您的应用。
  2. 如果表包含记录,请将光标指向相应行,并点击“Delete”,直到不存在记录。
  3. 填写 Create EmployeeData 表单。与“Edit Employee”表单不同,您可以立即输入数据,但数据不会添加到表。输入数据时,应用制作工具会将数据保存到数据源(不是数据库)中的草稿记录中。只有当您将记录保存到数据库后,表才会更新。
  4. 点击 Submit,在数据库中创建一个真实的记录。应用制作工具将数据从草稿记录复制到该真实记录,然后清空草稿记录。现在,数据在表中,因为数据在数据库中。数据也出现在修改表单中,修改表单包含当前选中的记录中的数据。

    在修改表单中输入数据时,数据不会出现在插入表单中,因为插入表单中的值与草稿记录绑定。

探索插入表单是如何构建的

  1. 如果应用的“Preview”标签页仍然打开,请将其关闭,然后返回应用制作工具。
  2. Create EmployeeData 表单中,选择 Name 文本框。
  3. 在属性编辑器中,注意 value 属性设置为 @datasource.item.Name,与修改表单相同。但是,由于该表单是插入表单,因此该绑定将插入表单中 Name 的值与数据源中草稿记录Name 的值相关联。详细了解草稿记录和 create-mode 数据源
  4. 现在,选择 Submit 按钮。请注意,onClick 事件的操作是 Create New Item。对于插入表单,Create New Item 操作会产生以下后果:
    1. 在数据库中创建新记录
    2. 将草稿记录的内容复制到新记录中
    3. 清除草稿记录

后续步骤

  • 学习教程 3 - 了解如何为应用设计样式
  • 详细了解数据 - 参阅模型相关文档
  • 学习示例应用 - Hello Data 应用重复了您在此处完成的工作,只是对修改表单进行了一些更改。