教程 1:应用制作工具入门

“Button”微件 应用制作工具基本技能

10–15 分钟

您将构建的内容

您将构建一个简单的 Hello World 应用。该应用接受名称作为输入,通过显示自定义问候消息来响应按钮点击操作。

您将学到的内容

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

  • 创建和重命名应用
  • 使用微件选项面板和页面编辑器添加界面元素,如文本框和按钮
  • 使用属性编辑器设置微件的属性
  • 添加 JavaScript 代码以响应鼠标点击按钮的操作。介绍了两种方法:使用 JavaScript 提醒框和使用属性赋值。
  • 预览和测试应用

创建应用

  1. 登录雇主或学校提供的 G Suite 帐号。
  2. 打开应用制作工具
  3. 创建一个空应用:
    • 如果应用制作工具显示欢迎对话框,点击 Create New App
    • 否则,点击 “Menu” New Blank Application
  4. 重命名应用。删除默认名称 Untitled App,然后输入 Style Your App。

重命名页面

应用制作工具中的页面将成为应用中的页面,与传统网页类似。页面用作表单、表、按钮和图表等界面元素的父级容器。

每个新的空应用包含一个名为 NewPage 的空页面。本应用只需要一个页面。

重命名该页面:

  1. 在左侧边栏中,点击 NewPage 旁的“More”,然后点击 Rename。
  2. 输入 HelloPage,然后点击 OK。

添加微件并设置其属性

微件是您“组装”到应用中的界面元素。例如为内容加标签、接受和显示数据、设置页面导航等。

在本步骤中,使用“Widgets”HelloPage 添加两个微件。添加微件时,您可以在属性编辑器(选中“Editor” 后可见)中设置属性。

您将构建一个如下所示的页面:

Hello App Maker

  1. 添加一个文本框以供用户输入内容:
    1. 点击“Widgets” 并将“Text Box”“Text Box”微件 拖动到画布(页面编辑器中心的区域)左上角。在属性编辑器中,确切展示位置在 Layout 下方可见。
    2. 向右拖动右侧的文本框手柄,以增加文本框的宽度。
    3. 在属性编辑器中,将 name 属性更改为 YourName。
    4. label 属性中输入 Type your name,以告知应用用户应执行什么操作。
  2. 添加一个按钮以供用户点击:
    1. 从“Widgets” 中,将按钮 “Button”微件 拖动到您新建的文本框右侧。
    2. 垂直对齐按钮和文本框的下边缘。在拖动微件时,您会看到一条蓝色线显示对齐情况。
    3. 双击该按钮,将其文本更改为 Say Hello
  3. 定义用户点击该按钮时将执行的操作:
    1. 点击 Say Hello 按钮。
    2. 在属性编辑器 “Button”部分,点击 onClick 属性并选择 Custom Action
    3. 使用 JavaScript 定义操作,在本例中指的是定义用户点击该按钮时会发生什么。复制该脚本,并将其粘贴到“Client Script”对话框中:
      alert("Hello " + app.pages.HelloPage.descendants.YourName.value + "!");
      JavaScript 提醒框会引用 YourName 文本框的 value 属性。
    4. 点击 Done 以保存更改并关闭对话框。

您的应用现已制作完成,可以进行测试。

预览和测试应用

现在您可以预览应用了。预览提供您的应用的全部功能,并且只有您能访问。

  1. 点击右上角的 Preview。您的应用会在新的浏览器标签页中打开。
  2. 点击 Allow 以允许您的应用使用您的信息。

    第一次预览应用时,以及以后您更改应用的功能时,应用会要求您允许其使用特定信息。

    在应用上方(屏幕顶部),您会看到“Page”菜单,通过该菜单可以在应用的页面之间导航。默认情况下,已发布的应用中不显示“Page”菜单。

    在应用下方,您会看到一个控制台,您可以在其中查看运行时消息,以及点击链接以查看服务器日志。

  3. Type your name 文本框中,输入您的姓名,然后点击 Say Hello。

  4. 如果出现提醒框,点击 OK 以将其关闭。

恭喜!您刚刚使用应用制作工具构建了一个应用。

针对输出使用属性赋值(可选)

在本步骤中,您将修改应用,使之将输出置于应用界面中而是不使用 JavaScript 提醒框。使用“Label”微件用于输出并使用以 JavaScript 编写的属性赋值来引用输入:

  1. 为 Hello App Maker 输出添加标签。
    1. 将“Widgets” 中的“Label”“Button”微件 拖动到文本框下方。水平对齐标签和文本框的左边缘。
    2. 在属性编辑器中,将 name 属性更改为 Output。
    3. text 属性中删除 Label。
  2. 修改 Say Hello 按钮的 onClick 操作,以接受用户的输入并通过标签将其输出。
    1. 点击 Say Hello
    2. 点击 onClick 属性并选择 Custom Action。如果出现“Client Script”对话框,则删除当前操作,并将其替换为以下代码段之一:
      • 最简单 - 使用一条 JavaScript 赋值语句将输入微件的 value 属性分配给输出微件的 text 属性:
            widget.root.descendants.Output.text = "Hello, " +
            widget.root.descendants.YourName.value + "!";
      • 略复杂,用于处理 null 情况 - 在变量中引用输入和输出微件,并在为输出微件的 text 属性赋值之前测试是否为 null 情况:
            // Define variables for the input and output widgets
            var nameWidget = app.pages.HelloPage.descendants.YourName;
            var outputWidget = app.pages.HelloPage.descendants.Output;
            // If a name is supplied, say hello to it.
            // Otherwise, just say 'Hello!'
            if (nameWidget.value) {
            outputWidget.text = 'Hello, ' + nameWidget.value + '!';
            } else {
            outputWidget.text = 'Hello!';
            } 
      • 点击 Done 以保存更改并关闭对话框。
  3. 预览并测试修改后的应用。
    1. 在应用制作工具的右上角,点击 Preview
    2. 在文本框中,输入您的姓名,然后点击 Say Hello。“Label”微件显示问候消息。
  4. 关闭正在运行 Hello App Maker 应用的标签页,但不要关闭包含应用制作工具的标签页。

后续步骤

  1. 学习教程 2 - 构建简单的员工数据库应用,并了解数据模型、表单和表。
  2. 学习示例应用 - Hello Data 应用重复了您在此处完成的工作,只是对修改表单进行了一些更改 - 区别在于在放置其他微件之前,先在画布上放置了一张卡。您可以通过该卡来设计界面的样式。