在本文中，您将了解：
- Tulip 应用编辑器的各个组成部分
- 可添加到应用中的基本视觉元素（也称为小部件）
- 如何使用按钮添加基本逻辑
- 如何完成一个用于记录数据的应用
This topic is featured in the Introduction to app building course in Tulip University.
如果您正在熟悉 Tulip 应用编辑器，本文正是为您准备的。我们将以工作指令应用为例，带您逐一了解应用编辑器中的所有主要工具。
App Editor 允许您无需编写任何代码即可为操作员构建应用。
其界面如下所示：
在应用编辑器中，您可以创建一系列**“步骤**”，这些步骤代表了流程中的数字可视化元素。
介绍视频
We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might look different than what you see in images in this article. No worries, the ideas are the still same even if the content is a little different.
应用编辑器结构解析
应用编辑器是您构建和编辑应用的地方。下图展示了构成应用编辑器的各个部分：
- 添加步骤/步骤组 - 添加新的步骤或步骤组
- 步骤/记录面板——通过“步骤”选项卡查看步骤，或切换至“记录”选项卡查看所用的数据表
- 工作区 - 用于创建应用界面的区域
- 添加资源控件 - 向应用中添加形状、图标或徽标
- 添加按钮控件 - 向应用中添加按钮
- 添加输入控件 - 向应用中添加输入字段
- 添加文本控件——在应用中添加文本框
- 嵌入控件——嵌入各种控件，例如图片、分析、机器属性等
- 添加相机控件——添加普通相机或条形码相机的快照
- 翻译 - Tulip Player 将通过您的 Tulip 个人资料，自动将应用翻译成您选择的语言
- 创建快照 - 保存应用的当前版本，生成一个副本
- 测试 - 通过开发者模式测试您的应用
- 运行 - 在 Tulip Player 中运行您的应用
- 发布 - 发布您的应用
- 向前/向后 - 将工作区中的元素移至其他元素前方或后方
- 侧边面板 - 在“控件”选项卡、“步骤”选项卡和“应用”选项卡中设置触发器和样式组件。
使用平移和缩放工具，您可以：
- 移动应用程序的编辑区域
- 放大或缩小
左侧的**“步骤列表**”显示了包括“基础布局”在内的步骤列表。
基础布局
您对**“基础布局”**进行的任何格式或布局编辑，都会自动应用到应用中的每个单独步骤。
您可以通过在右侧的“上下文窗格”中“解锁”单个元素，来修改单个步骤的基础布局。
点击此处了解有关基础布局的更多信息。
步骤
您可以点击某个步骤，查看其中包含的元素。
右键单击某个步骤，可将其复制、将多个步骤分组或删除该步骤。
点击此处了解有关步骤的更多信息。
工具栏
屏幕顶部的工具栏包含可添加到应用中的视觉元素。这些元素包括形状、照片、文本、视频和按钮等。要向应用添加新的视觉元素，只需点击并将其拖动到目标位置即可。
工具栏右侧还提供其他工具，可用于在Tulip应用编辑器中调整对象的层级顺序。
上下文窗格
屏幕右侧的**“上下文窗格**”是您处理应用中所有格式设置和逻辑的地方。点击此处了解有关小部件配置的更多信息。
该面板包含三个选项卡：
- “步骤”选项卡
- “应用”选项卡
- 控件选项卡
“步骤”选项卡
“步骤”选项卡显示：
- 整个步骤的格式设置选项
- 允许您为该步骤指定目标循环时间
- 允许您重置为“基础布局”中指定的布局
- 允许您删除当前步骤
- 允许您构建逻辑，该逻辑将在每次打开或关闭此步骤时执行——关于“触发器”，我们稍后会详细讨论。
“应用”选项卡
“应用”选项卡：
- 允许您打印应用中的步骤
- 允许您调整整个应用的循环计时器
- 显示与该应用关联的所有变量列表
- 允许您指定应用程序的分辨率，以适应您预期的界面。
- 当有多个管理员审核更改时，允许您添加注释
- 使您能够构建逻辑，该逻辑将在此应用启动、完成或取消时执行
小部件选项卡
点击应用中的某个元素，侧边栏中将显示一个名为**“小部件”的标签页**。您可以在此调整应用中各种视觉元素的格式，以及用户与之交互时的行为。
为应用添加逻辑
逻辑决定了操作员与应用交互时应用中会发生什么。首先，让我们使用一个带有触发器的简单按钮，用于在各个步骤之间导航。
- 点击工具栏中的**“按钮**”，然后选择**“按钮**”。
- 将按钮拖动到您想要的位置。
- 为按钮添加标签，并使用右侧的“上下文窗格”调整格式和颜色选项。
- 要为按钮添加逻辑，请点击侧边窗格中**“触发器**”旁边的**“+”号**。
**“触发器”可让您无需编写任何代码即可为应用程序添加逻辑。触发器采用“当……如果……那么……否则”的逻辑序列。
我们在此构建的触发器具有以下逻辑：
**当：**按下按钮
**Then：**将当前时间保存到一个变量中
**过渡：**转到步骤 → “下一步”。
- 点击**“保存**”。
此按钮将用户带到下一步。通常，您还应添加一个按钮，允许用户导航到上一步。
构建完应用程序的基本逻辑后，您可以点击右上角的**“测试”**。这将以开发者模式启动您的应用程序，以便您进行测试。
完成应用并记录数据
添加一个**“完成”按钮**，以便 Tulip 记录与每位操作员相关的所有应用数据。
在此示例中，我们将在应用的最后一步添加另一个按钮。
- 选择应用程序的最后一步。
- 点击**“按钮**”，然后选择**“完成**”。
- 将新按钮拖动到所需位置。
延伸阅读
使用这些分步指南，基于这些概念构建一个完整的应用：
您找到想要的内容了吗？
您也可以访问community.tulip.co发布问题，或查看其他人是否遇到过类似问题！