教程 3：为应用设计样式

应用制作工具基础至中级技能

大约 30 分钟

注意：只有在 G Suite 管理员为您的组织设置 Cloud SQL 后，您才能完成本教程。

您将构建的内容

您将构建项目跟踪应用的一小部分。目标不是构建一个可正常运行的应用，而是了解如何为应用设计样式。该应用的用户可以执行以下操作：

• 创建新项目记录，并在其中输入数据
• 修改项目记录
• 在记录之间导航

您将学到的内容

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

• 在不使用层叠样式表 (CSS) 的情况下，在应用制作工具编辑器中为您的应用设计样式。选择整体样式主题背景，并从内置的应用制作工具样式变体中为微件选择样式。
• 在样式编辑器中编写 CSS 语句为您的应用设计样式。或者，您也可以使用外部样式表。CSS 提供对应用外观的全面控制。

准备工作

构建您将为其设计样式的项目跟踪应用的一小部分。

注意：本教程概括了您在应用制作工具入门和处理数据教程中学到的步骤。如果您不熟悉如何创建新应用和数据模型，请参阅这些教程。

创建应用

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

创建数据模型

1. 将鼠标悬停在 Data 上方，然后点击 以添加一个模型。
2. 创建 Google Cloud SQL 数据模型。将该数据模型命名为 ProjectData。

向数据模型添加字段

1. 在 ProjectData 数据模型的标签页工具栏上，点击 Fields 标签页。

2. 将以下字段添加到 ProjectData 数据模型：

   字段名称	字段类型
   Project	字符串
   Owner	字符串
   DueDate	日期

重命名界面的页面并选择数据源

1. 将 NewPage 重命名为 Projects。
2. 在属性编辑器中，将 Projects 页面的 datasource 属性设置为 ProjectData。

添加修改表单和表

1. 点击“Widgets” 并将“Form” 拖动到页面上。选择 Edit form。
2. 将“Widgets” 中的“Table” 拖动到修改表单下方的页面上。水平对齐修改表单与表的左边缘。
3. 点击 “Close” 以关闭微件。

预览应用

请先预览应用，然后为应用设计样式。您的应用目前使用 Material 主题背景中的默认微件样式变体。

1. 点击右上角的 Preview，在新的浏览器标签页中运行您的应用。
2. 点击 Allow 以允许您的应用使用特定信息。

提示：静态样式变更在画布上可见。动态样式（例如当用户将鼠标悬停在某个按钮上时）仅在正在运行的应用中可见。预览即可查看所有样式更改。预览可查看所有样式变更。

在不使用 CSS 的情况下为您的应用设计样式

在应用制作工具中，您无需使用 CSS 语言即可为应用设计样式。您可以：

• 选择 theme，即适用于应用中所有微件的一组内置样式
• 从一组 variants（各个微件类型的样式变体）中选择。默认主题背景 Material 包含大量内置变体。例如，对于按钮，您可以在具备不同背景颜色的样式中进行选择。对于标签，您可以在不同字体大小中选择。所有微件都有默认变体。

提示：您还可以借用已编写的 CSS 语句。不妨查看一下“入门应用”和“材料库”模板，这些模板可作为您的应用的起点。

选择主题背景

应用制作工具提供以下主题背景：

• Material - 一组简洁大方的样式，每个微件类型有多个样式变体可供选择。您可以按原样使用“Material”主题背景，也可以进一步对其进行自定义。

• Plain - 一组非常简单的样式，样式变体选择很少。如果您能够熟练使用 CSS 并计划使用 CSS 为所有微件制作自己的样式，则可以使用“Plain”主题背景。

  提示：建议使用“Material”主题背景。

更改您应用的主题背景：

1. 在左侧边栏，点击 Projects 页面。
2. 在属性编辑器上方的标签页栏中，选择“Style Editor”。
3. 从 Theme 下拉列表中选择 Plain。请注意，表单和表中使用的样式更加简单。标签和按钮都只有一个内置变体。
4. 在本教程中，您将使用“Material”主题背景。从 Theme 下拉列表中选择 Material。

为特定微件选择样式变体

选择样式变体并观察效果：

1. 点击左下角的“Show outlines” 以显示微件的轮廓。选择变体时，微件可能会“消失”，例如当白色文本框位于白色面板上时。您可以通过轮廓找到微件。
2. 点击 Edit Projects 表单。确保选中整个表单。整个表单会被一个蓝色选择框框起来。“Outline”标签页中的 Panel: Form1 应处于选中状态。
3. 在左上角，注意已选中 Variant 下拉列表中的“Paper”。
4. 从 Variant 下拉列表中选择 Primary。整个表单即会变成蓝色。请注意，“Edit Project”标签自动变成了白色。此自动更改不会改变标签的变体。请注意，“Project”、“Owner”和“Target Date”微件不会自动改变。（您可以为这些微件选择深色变体，以使其变成白色。现在请勿执行此操作。）
5. 点击 Edit Projects 标签。
6. 从 Variant 下拉列表中选择 DisplayOne。这会增加 Edit Projects 标签的大小。
7. 点击 Create 按钮。这是 Edit Projects 标签最右侧的微件。您看不到文本，因为文本是蓝色，而背景也是蓝色。选中该按钮后，面包屑导航中的最后一项是 Button: Form1CreateButton。
8. 从 Variant 下拉列表中，滚动浏览按钮的变体选择。请注意，一些变体使用“Material”图标。选择变体 IconDark。
9. 预览应用。
10. 点击三次“Undo” 即可撤消您对变体进行的更改。

提示：要更改同类型微件的变体，您可以选择多个微件，然后选择变体。

使用 CSS 为应用设计样式

提示：获得正确起点后，您可能需要减少样式的使用。请查看“Material Starter Kit”模板和“Material Header and Menu”模板。这些模板可作为您的应用的起点，或者作为如何使用 CSS 为微件设计样式的参考。

在本部分中，您将学习如何使用 CSS 为应用设计样式。要为应用设计样式，您可以编写 CSS 规则集。开发 Web 应用时，规则集中的选择器通常会引用 HTML 元素。在应用制作工具中，选择器引用微件，或者您可以使用 styleClasses 属性将规则集应用于微件。

关于 CSS

CSS 主要由名为规则集的语言单元组成，规则集定义在哪里应用样式以及要应用哪些样式。

以下是规则集的一个示例：

.app-Projects-Form1CreateButton {
      background-color: #B2FF59;
      color: #03A9F4;
    }
    

在规则集中：

• 一个或多个选择器定义在哪里应用样式。在上面的示例中，选择器是 .app-Projects-Form1CreateButton。该选择器告知应用制作工具将样式应用于 Projects 页面上的 Form1CreateButton 按钮。
• 声明定义要应用的样式。在上面的示例中，声明设置背景颜色和颜色。

样式表以三种方式进行级联：

• 对于外部 CSS 文件和样式编辑器的内容，应用制作工具自上而下评估规则集。如果多个选择器将同一个声明应用于特定微件，则 CSS 文件中最下方的规则集中的声明会覆盖其上方的声明。

  例如，在这两个规则集中，您首先指定所有按钮为浅蓝色，然后指定 Form1CreateButton 按钮为橙色。因此，Form1CreateButton button 将为橙色。所有按钮文本的颜色为深灰色。对于 Form1CreateButton 按钮，该颜色不会被替换。

  .app-Button {
        background-color: #A1C2FA;
        color: #212121;
       }
      .app-Projects-Form1CreateButton {
        background-color: #FFB74D;
      }
      

• 应用制作工具按您在“General Settings”中的添加顺序评估外部 CSS 文件。

• 在评估了外部 CSS 文件后，应用制作工具最后评估样式编辑器的内容。

注意：选择下方使用的样式，并不是因为它们时尚或精妙，而是因为视觉效果清晰。

创建自定义样式变体

您可以为微件类型创建自定义样式变体，以便提供自定义的按钮或面板外观。定义了自定义变体后，您可以从 Variant 下拉列表中选择该变体。

自定义变体的类选择器的语法是：

    .app-widget_type--widget_style
    

注意双连字符。该符号向应用制作工具指出后面的内容是变体的名称。

例如：

.app-Button--Orange

如需为微件类型创建自定义样式变体，请执行以下操作：

1. 在属性编辑器上方的标签页栏中，选择“Style Editor” 以打开样式编辑器。您可以在其中创建 CSS 样式表，以便为您的应用设计样式。在某些情况下，您在输入时会看到代码补全的情况。您也可以按 Ctrl+Space 查看补全的代码。

2. 为按钮添加橙色变体。复制下面的代码，并将其粘贴到样式编辑器中：

   .app-Button--Orange {
         background-color: #FFB74D;
       }
       

3. 在应用上，点击 Create 按钮。

4. 从 Variant 下拉列表中，选择变体 Orange。“Create”按钮即会变为橙色。

5. 从 Variant 下拉列表中，选择变体 FlatColor。

   提示：创建自定义变体的一种替代方案是改写现有变体。例如，对于按钮，添加包含选择器 .app-Button--Icon 的规则集，并指定另一背景颜色（如青色）：

   .app-Button--Icon {
         background-color: #4DD0E1;
       }
       

   您为其选择变体 Icon 的所有按钮的背景颜色都将为青色。

使用样式属性为特定微件设计样式

微件的 styles 属性提供了一个简单的方法，可将一个或多个样式应用于特定微件。在 styles 属性的 value 中，您通过类名称引用 CSS 规则集。您可以在样式编辑器和/或外部样式表中定义样式。

1. 在样式编辑器中添加样式的规则集。提供不直接为应用部件设计样式的样式类名称（即不引用 app-）。例如，添加以下 CSS 规则集：

   .Green {
         background-color: #0F9D58;
         border-style: double;
         border-width: 4px;
         border-color: #000000;
         border-radius: 7px;
       }
       .Border {
         border: 4px solid #000000;
         box-shadow: 5px 5px 10px #BDBDBD;
         margin: 15px;
       }
       

2. 选择要为其设计样式的微件。在修改表单上，点击 Create 按钮。

3. 输入要应用的样式的类名称作为 styles 属性的值（用空格分隔）：

   1. 在属性编辑器 中，展开 Display 部分。您应该会看到下拉列表图标 旁的值 已选中。
   2. 在 styles 属性中，输入类名称 Green 和 Border。
      提示：样式属性还可包含绑定表达式，这可实现数据驱动型样式设计。

使用外部样式表

您可以使用外部样式表为微件设计样式。与在样式编辑器中一样，外部样式表必须包含满足以下条件之一的 CSS 规则集：可将样式应用于微件，或者您使用微件的 styleClasses 属性应用于微件。如果外部样式表包含的规则集将样式应用于 HTML 元素，则将不会对应用制作工具微件设置样式。

外部样式表必须位于 Google Cloud 中应用制作工具可以访问的网址上。您应在“General Settings”中提供该网址。例如，您可以提供 Google Fonts 的 CSS 文件的网址：

https://fonts.googleapis.com/css?family=Roboto+Condensed:regular,bold

在 Google Cloud 中的网址上放置样式表

注意：这些步骤是出于完整性考虑而提供的。对于本教程，您不需要使用外部样式表。

如果您的 CSS 文件还不在 Google Cloud 中，应用制作工具提供一个简单的方法，可将该文件放在 Google Cloud 中：

1. 在文件管理器中，找到 CSS 文件。
2. 在应用制作工具中，点击“Settings” Resources。
3. 将文本文件拖动到“Add” 区域。
4. 点击“Copy resource URL”。
5. 点击“Settings” General settings。
6. 在 CSS URLs 中，粘贴资源网址并点击 Add CSS。
7. 若要放置其他 CSS 文件，重复第 2 步至第 6 步。

添加从应用到样式表的引用

如需使用位于 Google Cloud 中某个网址上的外部样式表，请执行以下操作：

1. 获取此 CSS 文件的资源网址。
2. 点击“Settings” General settings。
3. 在 CSS URLs 中，粘贴资源网址并点击 Add CSS。
4. 若要放置其他 CSS 文件，重复第 1 步至第 3 步。

后续步骤

• 详细了解层叠样式表。
• 学习教程 4 并了解调用脚本。