应用制作工具基础至中级技能
大约 30 分钟
您将构建的内容
您将构建项目跟踪应用的一小部分。目标不是构建一个可正常运行的应用,而是了解如何为应用设计样式。该应用的用户可以执行以下操作:
- 创建新项目记录,并在其中输入数据
- 修改项目记录
- 在记录之间导航
您将学到的内容
本教程将指导您如何执行以下操作:
- 在不使用层叠样式表 (CSS) 的情况下,在应用制作工具编辑器中为您的应用设计样式。选择整体样式主题背景,并从内置的应用制作工具样式变体中为微件选择样式。
- 在样式编辑器中编写 CSS 语句为您的应用设计样式。或者,您也可以使用外部样式表。CSS 提供对应用外观的全面控制。
准备工作
构建您将为其设计样式的项目跟踪应用的一小部分。
创建应用
- 登录雇主或学校提供的 G Suite 帐号。
- 打开应用制作工具。
- 创建一个空应用:
- 如果应用制作工具显示欢迎对话框,点击 Create New App。
- 否则,点击 “Menu” New Blank Application。
- 重命名该应用。删除默认名称 Untitled App,然后输入 Style Your App。
创建数据模型
- 将鼠标悬停在 Data 上方,然后点击 add 以添加一个模型。
- 创建 Google Cloud SQL 数据模型。将该数据模型命名为 ProjectData。
向数据模型添加字段
- 在 ProjectData 数据模型的标签页工具栏上,点击 Fields 标签页。
将以下字段添加到 ProjectData 数据模型:
字段名称 字段类型 Project
字符串 Owner
字符串 DueDate
日期
重命名界面的页面并选择数据源
- 将 NewPage 重命名为 Projects。
- 在属性编辑器中,将 Projects 页面的 datasource 属性设置为 ProjectData。
添加修改表单和表
- 点击“Widgets”
并将“Form”
拖动到页面上。选择 Edit form。
- 将“Widgets”
中的“Table”
拖动到修改表单下方的页面上。水平对齐修改表单与表的左边缘。
- 点击 “Close” 以关闭微件。
预览应用
请先预览应用,然后为应用设计样式。您的应用目前使用 Material 主题背景中的默认微件样式变体。
- 点击右上角的 Preview,在新的浏览器标签页中运行您的应用。
- 点击 Allow 以允许您的应用使用特定信息。
在不使用 CSS 的情况下为您的应用设计样式
在应用制作工具中,您无需使用 CSS 语言即可为应用设计样式。您可以:
- 选择 theme,即适用于应用中所有微件的一组内置样式
- 从一组 variants(各个微件类型的样式变体)中选择。默认主题背景 Material 包含大量内置变体。例如,对于按钮,您可以在具备不同背景颜色的样式中进行选择。对于标签,您可以在不同字体大小中选择。所有微件都有默认变体。
选择主题背景
应用制作工具提供以下主题背景:
- Material - 一组简洁大方的样式,每个微件类型有多个样式变体可供选择。您可以按原样使用“Material”主题背景,也可以进一步对其进行自定义。
Plain - 一组非常简单的样式,样式变体选择很少。如果您能够熟练使用 CSS 并计划使用 CSS 为所有微件制作自己的样式,则可以使用“Plain”主题背景。
更改您应用的主题背景:
- 在左侧边栏,点击 Projects 页面。
- 在属性编辑器上方的标签页栏中,选择“Style Editor” 。
- 从 Theme 下拉列表中选择 Plain。请注意,表单和表中使用的样式更加简单。标签和按钮都只有一个内置变体。
- 在本教程中,您将使用“Material”主题背景。从 Theme 下拉列表中选择 Material。
为特定微件选择样式变体
选择样式变体并观察效果:
- 点击左下角的“Show outlines”
以显示微件的轮廓。选择变体时,微件可能会“消失”,例如当白色文本框位于白色面板上时。您可以通过轮廓找到微件。
- 点击 Edit Projects 表单。确保选中整个表单。整个表单会被一个蓝色选择框框起来。“Outline”标签页中的
Panel: Form1
应处于选中状态。 - 在左上角,注意已选中 Variant 下拉列表中的“Paper”。
- 从 Variant 下拉列表中选择 Primary。整个表单即会变成蓝色。请注意,“Edit Project”标签自动变成了白色。此自动更改不会改变标签的变体。请注意,“Project”、“Owner”和“Target Date”微件不会自动改变。(您可以为这些微件选择深色变体,以使其变成白色。现在请勿执行此操作。)
- 点击 Edit Projects 标签。
- 从 Variant 下拉列表中选择 DisplayOne。这会增加 Edit Projects 标签的大小。
- 点击 Create 按钮。这是 Edit Projects 标签最右侧的微件。您看不到文本,因为文本是蓝色,而背景也是蓝色。选中该按钮后,面包屑导航中的最后一项是
Button: Form1CreateButton
。 - 从 Variant 下拉列表中,滚动浏览按钮的变体选择。请注意,一些变体使用“Material”图标。选择变体 IconDark。
- 预览应用。
- 点击三次“Undo” 即可撤消您对变体进行的更改。
使用 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
如需为微件类型创建自定义样式变体,请执行以下操作:
在属性编辑器上方的标签页栏中,选择“Style Editor”
以打开样式编辑器。您可以在其中创建 CSS 样式表,以便为您的应用设计样式。在某些情况下,您在输入时会看到代码补全的情况。您也可以按 Ctrl+Space 查看补全的代码。为按钮添加橙色变体。复制下面的代码,并将其粘贴到样式编辑器中:
.app-Button--Orange { background-color: #FFB74D; }
在应用上,点击 Create 按钮。
从 Variant 下拉列表中,选择变体 Orange。“Create”按钮即会变为橙色。
从 Variant 下拉列表中,选择变体 FlatColor。
提示:创建自定义变体的一种替代方案是改写现有变体。例如,对于按钮,添加包含选择器
.app-Button--Icon
的规则集,并指定另一背景颜色(如青色):.app-Button--Icon { background-color: #4DD0E1; }
您为其选择变体 Icon 的所有按钮的背景颜色都将为青色。
使用样式属性为特定微件设计样式
微件的 styles
属性提供了一个简单的方法,可将一个或多个样式应用于特定微件。在 styles
属性的 value
中,您通过类名称引用 CSS 规则集。您可以在样式编辑器和/或外部样式表中定义样式。
在样式编辑器中添加样式的规则集。提供不直接为应用部件设计样式的样式类名称(即不引用
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; }
选择要为其设计样式的微件。在修改表单上,点击 Create 按钮。
输入要应用的样式的类名称作为 styles 属性的值(用空格分隔):
- 在属性编辑器
已选中。
中,展开 Display 部分。您应该会看到下拉列表图标 旁的值 - 在 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 中:
- 在文件管理器中,找到 CSS 文件。
- 在应用制作工具中,点击“Settings” Resources。
- 将文本文件拖动到“Add” 区域。
- 点击“Copy resource URL” 。
- 点击“Settings” General settings。
- 在 CSS URLs 中,粘贴资源网址并点击 Add CSS。
- 若要放置其他 CSS 文件,重复第 2 步至第 6 步。
添加从应用到样式表的引用
如需使用位于 Google Cloud 中某个网址上的外部样式表,请执行以下操作:
- 获取此 CSS 文件的资源网址。
- 点击“Settings” General settings。
- 在 CSS URLs 中,粘贴资源网址并点击 Add CSS。
- 若要放置其他 CSS 文件,重复第 1 步至第 3 步。