构建应用程序

要构建应用程序，您应该创建布局、页面，用内容填充它们，并设置 Web 应用程序交互。

布局

之前，我们介绍了布局的概念。要开始布局创建，您必须首先概述应用程序的结构并确定要使用的页面模板。

如果您错过了某些事情，请不要担心。您可以根据需要扩充布局列表。

布局列表

布局列表提供了 Web 应用程序的所有布局。在这里，您可以执行各种操作并管理布局。

要访问布局列表，请选择 UI 设计器选项卡中左侧工具栏上的第 4 个选项卡或使用快捷键4 。您的所有应用程序布局都将显示在此处。

每个应用程序必须至少有一种布局。当您创建新的应用程序时，将根据所选的应用程序模板自动创建一个或多个布局。其中之一被标记为**默认**。

在布局列表中，您可以对布局执行以下操作：

• 选择，
• 添新，
• 改名，
• 复制，
• 删除。

默认布局

创建新页面时，会从布局列表中自动选择默认布局。但是，如果需要，可以用不同的布局替换它。

使用默认布局可以提高开发速度，因此我们建议使用最常用的布局作为默认布局。请注意，一次只能将一种布局设置为默认布局。除非删除初始布局，否则覆盖默认布局不会影响现有页面。

默认布局在布局列表中标有蓝色星形图标。

创建新布局

您可以为不同的页面类型设计不同的布局。请按照以下步骤创建新布局：

• 按CTRL/⌘+L或从 UI 设计器的左侧工具栏打开布局列表（快捷键4 ），然后单击面板标题上的加号按钮。
• 在出现的模式中提供布局名称。我们建议使用反映布局结构的可读标题，以便在为页面分配布局时快速识别。
• 选择布局模板：
  • Base：没有附加元素的空白模板，适用于没有导航的页面，例如身份验证或错误页面。
  • 左侧边栏：带有侧边栏菜单的模板，适用于管理面板、CMS、ERP 等。
  • 顶部菜单：带有顶部菜单的模板，适用于网站或登陆页面。
• 如果要将此布局设为默认布局，请启用默认布局设置。
• 单击创建按钮。

您可以创建的布局数量没有限制。

重命名布局

要重命名布局，请双击布局名称，进行必要的更改，然后按Enter保存或按Esc恢复更改。

复制布局

要复制布局及其内容和设置：

1. 将鼠标悬停在要复制的布局上。
2. 单击复制图标。

重复的布局会自动显示在列表中，并在其名称中添加索引。如果您将布局集复制为默认布局，则新创建的布局不会覆盖源布局。

删除布局

删除布局：

1. 将鼠标悬停在要删除的布局上。
2. 单击垃圾桶图标。
3. 确认删除。

要删除与任何页面链接的布局，您应该在删除之前重新分配任何链接页面的布局。这可以通过确认模式或手动为每个页面完成。

要删除默认布局，您应该将另一个布局设置为默认布局。

❗️重要提示：您无法撤消布局删除操作。

布局设置

单击布局列表中的目标布局可从左侧设置侧边栏访问其设置。

在“设置”侧边栏标题中，您可以通过单击名称来重命名所选布局或将其删除。

您可以将选定的布局设置为默认布局并在此处查看所有链接的页面。要编辑链接页面，请在列表中单击它。

此外，您可以为布局构建一些业务逻辑。

布局业务逻辑

在业务逻辑选项卡中，选择一个触发器来设置操作。这将打开业务流程编辑器，重点关注选定的触发器。

在这里，您可以为一个或多个触发器创建操作流，例如实施导航、有条件地更改属性、切换可见性、发送数据等等。有关更多信息，请参阅我们的构建业务流程指南。

🔔 为了获得最佳应用程序性能，请在后端构建复杂的业务流程。

编辑布局

布局作为全局组件和页面模板，会自动将所有修改应用于所有链接的页面。

要编辑布局，请在布局列表中选择目标项目，然后通过将 UI 元素面板中的任何必要组件拖放到画布区域来添加它们。

编辑布局时，请记住模板包含不可更改的页面容器组件。这决定了页面内容在模板中的位置。页面容器以绿色突出显示，并且在布局编辑模式下不能包含内部组件。内容直接在页面上定义，页面容器大小由其父组件决定。

页数

创建必要的布局后，是开始创建 Web 应用程序页面的最佳时机。创建必要的布局后，是开始创建 Web 应用程序页面的最佳时机。每个 Web 应用程序页面都提供通过目标 URL 显示在用户 Web 浏览器上的内容。

页面树

页面树向您显示网站的结构 - 您的网站页面和容纳这些页面的文件夹。在这里，您可以执行各种操作并组织页面和文件夹。

要打开页面树，请从 UI 设计器的左侧工具栏中选择第三个选项卡或按 3。此处将显示您的所有应用程序页面。

每个申请必须至少有一页。当您创建新应用程序时，根据所选的应用程序模板，已经创建了一页或多页。

您可以对页面和文件夹执行以下操作：

• 选择，
• 添加新页面或文件夹，
• 改名，
• 将页面和文件夹移入/移出文件夹，
• 复制，
• 删除。

索引页

索引页是您的应用程序的初始页面。当您的应用程序运行时，如果您没有创建任何重定向，将首先呈现此页面。

索引页在页面树中标记了 House 图标，并且无法切换到其他页面。默认情况下，此页面与自动创建的默认布局链接，但您可以在页面设置中更改它。

创建新页面

要将页面添加到您的 Web 应用程序：

1. 按CTRL/⌘+P或从 UI 设计器的左侧工具栏打开页面树（快捷键3 ），然后单击面板标题上的加号按钮。
2. 在出现的模式中提供页面 URL 。
3. 选择页面的父文件夹或将该字段留空以将页面放置在根目录下。
4. 选择页面布局。
5. 单击创建按钮。

💡 要构建嵌套路由而不创建文件夹，请在页面 URL 字段中提供目标页面的完整路径，例如 settings/profile。在这种情况下，将创建嵌套到文件夹“设置”中的“配置文件”页面。

您可以为您的 Web 应用程序创建无限的页面和文件夹。

🔔 使用 AppMaster Studio 构建的 Web 应用程序通过页面 URL 生成应用程序路由，因此在页面生成形式中，请以正确的格式使用页面 URL，并且为了更好地理解，请使用友好的 URL。

创建新文件夹

您可以创建文件夹来组织导航并为页面构建正确的路由器。要创建新文件夹：

• 按CTRL/⌘+SHIFT+P或从 UI 设计器的左侧工具栏打开页面树（快捷键 3），然后单击面板标题上的文件夹按钮。
• 在出现的模式中提供文件夹名称。
• 如果需要创建嵌套路由器，请选择父文件夹
• 单击创建按钮。

用户界面元素

您的应用程序的用户界面由元素组成：输入字段、按钮、图像、复选框、日历、图像和图标，每个元素都有特定的用途。

AppMaster 提供了一个拖放式可视化编辑器，可让您直接在页面上选取和放置元素，而无需编写代码并立即预览。

添加元素

要将元素添加到画布：

1. 打开包含UI 元素列表的 UI 元素面板（快捷键1 ）。
2. 选择必要的元素或使用搜索栏。
3. 将选定的元素拖到页面或布局画布上。

要将拖动元素放置在目标内，请将元素放在目标元素上方。

要在元素之前或之后添加元素，请将元素拖动到目标边框上方，直到出现分隔符。

分隔线取决于父容器方向：

• 如果父容器Direction 为 Vertical ，则将从顶部或底部添加元素。
• 如果父容器Direction 为 Horizo​​ntal ，则将从左侧或右侧添加元素。

自定义元素

您添加到画布的每个组件都被赋予了一套全面的可自定义设置。通过元素属性，您可以管理元素外观和将显示的数据。

配置元素：

• 在画布上选择目标组件。
• 导航到“外观”面板，即右侧边栏上的第一个选项卡。
• 在面板中，选择您要修改的特定设置项目。
• 在指定字段中输入您的首选值。

画布实时响应，立即显示您的调整。

如需更多指导，请将鼠标光标短暂悬停在某个设置上以显示工具提示，提供该设置功能的简明描述。

除了这些交互功能之外，AppMaster还通过其特殊的业务流程块、设置属性和设置数据增强了定制功能。这些块提供高级访问权限，允许您在 Web 应用程序中以编程方式更改每个组件的设置。