网络应用程序工作流程
Web 应用程序的工作流程包含各个阶段，从最初的用户交互到最终的输出或响应。了解此工作流程对于开发有效且用户友好的 Web 应用程序至关重要。
在AppMaster Web Designer中，除了后端逻辑之外，您还可以在前端配置Web应用程序的业务逻辑。这一强大的功能使您可以创建适合特定业务需求的复杂、动态的 Web 应用程序。
在 Web 应用程序上下文中，业务流程可能包括用户身份验证、数据处理、在线事务、内容管理、客户服务操作以及根据条件自定义 UI 元素。
AppMaster Web Designer 中业务逻辑的三个级别：
- 应用程序触发器：这些是高级触发器，响应应用程序范围的事件或状态，启动特定的业务流程。
- 通用业务流程：这些是预定义的操作集，可以应用于应用程序的各个部分，自动执行任务并简化工作流程。
- 元素触发器：比应用程序触发器更精细，它们链接到特定的 UI 元素，根据与这些元素的交互激活业务流程。
通过利用这些级别的业务逻辑，AppMaster Web Designer 使您能够制作不仅具有视觉吸引力而且智能且能够响应用户需求和行为的 Web 应用程序。
🔔 添加任何新的业务逻辑以启动 BP 后，重新加载运行预览非常重要。
应用程序触发器
AppMaster Web Designer 中的应用程序触发器是高级触发器，可响应应用程序范围的事件或状态，在特定业务流程上运行执行，以增强功能和用户体验。
AppMaster提供了多种应用程序触发器，每种触发器都针对特定场景而设计：
- 应用程序启动时：应用程序启动时激活，非常适合初始设置过程。
- 在应用程序导航上：在应用程序的不同部分之间导航时触发。
- On App Blur：当应用程序失去焦点时触发，对于暂停或保存操作很有用。
- 在应用程序焦点上：当应用程序重新获得焦点时执行，非常适合恢复或更新内容。
- 应用程序隐藏时：当应用程序最小化或在屏幕上不可见时激活。
- 在应用程序可见时：当应用程序再次可见时触发，对于刷新内容很有用。
- On App Destroy：在应用程序关闭过程中执行。
- 在应用程序在线上：当应用程序检测到在线状态时触发，非常适合同步数据。
- On App Offline：当应用程序离线时触发，启用离线功能。
- 需要应用程序身份验证：收到“401（未经授权）”响应时激活，提示用户重新身份验证。
- On App Forbidden：触发“403（禁止）”响应，通常用于访问控制和权限。
可以通过在应用程序的后端级别创建 WebSocket 端点来扩展应用程序触发器的确切列表。
这些触发器可用于管理启动时的用户授权、验证访问权限、配置授权更改时的重定向、处理错误等等，这使得它们在构建响应灵敏且安全的 Web 应用程序中不可或缺。
通用业务流程
AppMaster Web Designer 中的通用业务流程专门设计用于将重复操作和冗余逻辑封装到不同的流程中。创建后，这些业务流程可以作为不同的块无缝集成到 Web 应用程序业务流程的任何级别中。
主要特征：
- 高效的工作流程管理：通过将常见任务转移到通用业务流程中，您可以显着减少重复并简化应用程序的工作流程。
- 前端功能：在镜像后端业务流程功能的同时，通用业务流程在前端上唯一执行。这允许在用户界面内实现更快的交互和即时反馈。
易于重用：
要在构建逻辑时使用通用业务流程，只需将所需的块从用户创建的 BP组拖到画布上即可。
🔔 性能考虑：需要注意的是，对于复杂且资源密集型的任务，我们建议在服务器端（后端）执行这些流程。这种方法可确保更好的性能和效率，特别是对于计算要求较高或需要安全处理敏感数据的操作。
元素触发器
AppMaster Web Designer 中的组件触发器对于向 Web 应用程序添加交互性至关重要。这些触发器与特定的 UI 元素绑定，激活预定义的业务流程以响应用户交互。应用程序中的每个组件都有一组触发器，可以自定义这些触发器以创建动态且引人入胜的用户体验：
- 通用触发器：组件共享一组标准触发器，例如onCreate 、 onDestroy 、 onShow和onHide ，它们响应组件的生命周期和可见性更改。
- 特定触发器：除了常见触发器之外，组件还具有针对其功能定制的独特触发器。例如，按钮可能有onClick触发器，表可能响应onUpdateData ，选项卡可能有onTabSelect触发器。
尽管存在多样性，但基本原则仍然一致：事件触发相应的业务流程。通过有效地使用组件触发器，您可以制作交互式和响应式 Web 应用程序，实时响应用户输入，增强整体用户体验，并使您的应用程序更加直观和用户友好。
访问触发器
要查看和配置组件的触发器，请在画布上选择该组件并导航到右侧边栏中的“工作流程”选项卡。在这里，您将找到可用触发器的列表。单击其中一个即可将所需的业务流程附加到其上。带有附加逻辑的触发器以蓝色突出显示，以便于识别。
创建业务流程
为组件触发器设置业务流程遵循与后端业务流程创建类似的方法，如模块 4 中所示。您将使用通用画布，在其中添加代表不同操作的块。这些块之间的连接定义了操作的顺序，使您能够直观地构建复杂的工作流程。
构建应用程序工作流程
让我们为计算按钮创建这样一个业务流程。 首先，决定点击按钮时我们需要做什么：
- 找出 X 和 Y 值。从相应的输入字段获取它们。
- 启动计算端点并将 X 和 Y 参数传递给它。
- 使结果容器可见。
- 将计算结果放入所需的标签字段中。
在画布中选择我们的Calc Button元素，然后单击onClick触发器。
业务流程编辑器将打开。在这里，我们将为按钮构建业务流程。
从输入中获取值
第一步是获取用户输入的值。为此，AppMaster 提供了 Input Float Get Data 块，该块以“Element Key”作为其输入参数并输出“Value”，本质上是从指定组件读取当前值。
因为我们有两个单独的字段（代表 X 和 Y 值），所以您需要使用两个“Input Float Get Data”块 - 每个输入字段一个。
设置方法：
- 将两个输入浮动获取数据块拖动到每个输入字段的画布上。
- 设置每个块的元素键以与各自的浮点输入相对应。这会将块链接到正确的 UI 元素，确保它读取正确的数据。
如果您之前在创建界面时在 UI 设计器中重命名了元素，则为每个块找到并选择必要的组件将变得非常简单。
☝️ 在设计阶段重命名元素有助于稍后在业务逻辑配置期间轻松识别它们。
启动端点
检索用户输入后，Web 应用程序工作流程的后续阶段是启动Endpoint 。这一关键步骤在 Web 应用程序的前端（用户界面）和后端（服务器端进程）之间建立连接，并将计算命令从浏览器传输到服务器。
AppMaster 中的端点表示为应用程序内不同的业务流程块。要使用我们的端点，只需从业务流程块列表中选择适当的端点并将其拖到画布中即可。
在模块 5 中，我们使用GET方法配置了一个端点，并为其分配了基本 URL “module4-basic” 。您应该发现它列为 -服务器请求 GET /module4-basic/并将其拖到画布上。
与组件不同，AppMaster 端点不需要其 ID 设置，因为它是预定义的。此功能简化了将端点集成到业务逻辑中的过程。
最后一步是将上一步获得的X和Y值输入到 Endpoint。这允许后端接收和处理这些输入，执行必要的计算。
UI 元素的状态
Web 应用程序工作流程中的下一步是管理容器的可见性 - 具体来说，显示显示结果的容器并隐藏包含提示的容器。
以下是实现这一目标的方法：
- 首先将两个Flex Update Properties块拖到画布上。
- 对于每个Flex Update Properties块，分配与相应容器对应的Element Key参数 - 一个用于结果容器，另一个用于提示容器。
- 配置这些块中的可见性参数。将结果容器的Visible参数设置为True ，确保其在计算后变得可见。相反，将此参数设置为False ，提示容器将在计算完成时隐藏它。
通过实施这些步骤，您可以在应用程序界面中创建动态响应。根据用户的操作，例如单击按钮执行计算，应用程序会自动隐藏提示容器并显示结果容器。
这不仅增强了用户体验，还使您的应用程序界面保持干净，并在交互的每个阶段专注于相关信息。
实时预览
要评估业务流程的进度，您可以轻松预览中间结果：
- 首先，单击业务流程编辑器中的“保存并退出”按钮。此操作将保存您当前的工作流程并关闭业务流程编辑器。
- 运行 Web 应用程序的实时预览，以检查与应用程序的交互，就像它是实时的一样。
- 单击“计算”按钮测试功能。
如果您的业务流程设置正确，您将看到动态响应：带有提示的容器将被隐藏，同时显示结果的容器将被显示。
这种测试方法提供了一种实用且直接的方法来确保您的业务流程按预期运行，允许您在最终确定应用程序之前进行任何必要的调整。
数据渲染
一旦成功测试了应用程序的逻辑，就可以进一步细化您的业务逻辑。
最后一步涉及在 Web 应用程序的界面中显示计算结果。我们会将后端业务流程的输出数据映射到您的 Web 应用程序的相关 UI 元素。
鉴于后端的结果按预定顺序返回，您的任务是将每条数据（数组元素）与 UI 中正确的文本块元素对齐。
对于数据处理，我们将使用以下块：
- 数组元素：使用它们来访问结果数组中的各个元素。每个索引都需要一个块，范围从 0 到 4。
- To Text：由于您的数据是 Float 格式，因此使用此块将这些 Float 值转换为适合显示的文本格式。
- 文本块更新数据：此块对于使用转换后的文本数据填充 UI 中的文本块至关重要。
这些块将从结果数组中提取数据，将数据转换为文本格式，然后更新 UI 中相应的文本块。
设置方法如下：
- 将这些块放在画布上。
- 在Array Element块中，输入从端点接收到的数组（从 0 开始）。
- 设置索引以定位数组中的适当元素。
- 将Array Element的输出Value连接到To Text块。
- 将文本块更新数据中的元素键指定为要在其中显示数据的 UI 元素。
- 按顺序连接块。
为要显示的数组中的每个元素复制此块序列。调整每个“数组元素”块中的索引以对应于数组的不同元素。
确保这些块也按顺序连接。
最后结果
这样就完成了业务流程的创建。
保存您的业务流程并在预览中检查最终结果。在您在模块 5中发布端点的部署计划上运行应用程序预览。
🎉 恭喜您取得如此出色的成就！
您已经成功开发了一个功能齐全的 Web 应用程序，具有业务逻辑和交互式用户界面。如果一切按预期运行，您现在就可以采取最后一步，发布您的应用程序并与用户共享。
但旅程并不止于此。有足够的机会进一步完善您的申请！您可以通过自定义 UI 元素的外观或扩展 Web 应用程序逻辑来增强视觉吸引力和用户体验。例如，您可以将字段设为必填，并添加一个按钮来重置字段，而无需手动清除每个输入。