在本文中，您将了解到
- 郁金香应用程序编辑器的不同部分
- 可以添加到应用程序中的基本视觉元素（也称为小部件）
- 如何使用按钮添加基本逻辑
- 如何完成一个记录数据的应用程序
This topic is featured in the Introduction to app building course in Tulip University.
如果你还在熟悉 Tulip 应用程序编辑器，这篇文章就是为你准备的。我们将以工作指南应用程序为例，介绍应用程序编辑器中的所有主要工具。
通过应用程序编辑器，您无需编写任何代码即可为操作员创建应用程序。
下面是它的外观：
在应用程序编辑器中，您可以创建一系列步骤，将流程的可视元素数字化。
介绍视频
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.
应用程序编辑器分解
应用程序编辑器是您构建和编辑应用程序的地方。下图显示了组成应用程序编辑器的不同部分：
{height="" width="""}
- 添加步骤/步骤组 - 添加新步骤或步骤组
- 步骤/记录面板--通过步骤选项卡查看步骤，或切换到记录选项卡查看使用的表格
- 工作区 - 创建应用程序界面的空间
- 添加资产小部件--为应用程序添加形状、图标或徽标
- 添加按钮 Widget - 为应用程序添加按钮
- 添加输入 Widget - 在应用程序中添加输入框
- 添加文本小工具--为您的应用程序添加文本框
- 嵌入小部件--嵌入各种小部件，如图片、分析、机器属性等
- 添加摄像头小部件--添加普通摄像头或条形码摄像头快照
- 翻译--郁金香播放器会通过您的郁金香配置文件自动将应用程序翻译成您选择的语言
- 创建快照 - 保存应用程序的当前版本，创建副本
- 测试 - 通过开发者模式测试应用程序
- 运行 - 在郁金香播放器中运行应用程序
- 发布 - 发布应用程序
- 向前/向后--将工作区中的元素向前或向后移动到其他元素后面
- 侧窗格：在小工具标签、步骤标签和应用程序标签中设置触发器和样式组件。
使用平移和缩放工具，你可以
- 移动应用程序的编辑面
- 放大或缩小
左侧的步骤列表显示步骤列表，包括基本布局。
基本布局
您对基本布局所做的任何格式或布局编辑，都将自动应用到应用程序中的每个步骤。
您可以通过 "解锁 "右侧 "上下文窗格 "中的单个元素来更改单个步骤的基本布局。
点击此处了解有关基本布局的更多信息。
步骤
单击步骤可查看其中包含的元素。
右键单击步骤可复制步骤、将步骤分组或删除步骤。
在此了解有关步骤的更多信息。
工具栏
屏幕顶部的工具栏包含可添加到应用程序的可视化元素。这些元素包括形状、照片、文本、视频和按钮。 要在应用中添加新的可视化元素，只需单击并拖动到所需位置即可。
在工具栏的右侧，还有其他工具可以用来对郁金香应用程序编辑器中的对象进行分层。
上下文窗格
屏幕右侧的上下文窗格是你处理应用程序中所有格式和逻辑的地方。点击此处了解更多关于 Widget 配置的信息。
共有三个选项卡：
- 步骤选项卡
- 应用程序选项卡
- 小工具选项卡
步骤选项卡
步骤选项卡显示
- 整个步骤的格式选项
- 可指定该步骤的目标周期时间
- 可重置为 "基本布局 "中指定的布局
- 允许删除当前步骤
- 为您提供构建逻辑的功能，每当打开或关闭该步骤时都将执行该逻辑--稍后我们将详细介绍触发器。
应用程序选项卡
应用程序选项卡：
- 允许您打印应用程序中的步骤
- 可以调整整个应用程序的循环计时器
- 显示与此应用程序相关的所有变量列表
- 可以指定应用程序的分辨率，以适应您的预期界面。
- 如果多个管理员正在审查更改，则允许您添加注释
- 让您能够构建在此应用程序启动、完成或取消时都将执行的逻辑
小工具选项卡
单击应用程序中的元素将在侧窗格中显示另一个名为 "**小工具选项卡 "**的选项卡。在这里，您可以调整应用程序各种可视化元素的格式，以及与之交互时的行为。
为应用程序添加逻辑
逻辑决定了操作员与应用程序交互时，应用程序中会发生什么。首先，让我们使用一个带有触发器的简单按钮，从一个步骤导航到另一个步骤。
- 单击工具栏上的按钮并选择 "按钮"。
- 将按钮拖动到所需位置。
- 为按钮添加标签，并使用右侧的上下文窗格调整格式/颜色选项。
- 要为按钮添加逻辑，请单击侧窗格中触发器旁边的**+**。
触发器可让您为应用程序添加逻辑，而无需使用任何代码。触发器使用when、if、then、else序列。
我们将在这里创建的触发器具有以下逻辑：
当 按钮被按下
然后 将当前时间保存到变量中
过渡： 转到步骤 → 下一步。
- 单击保存。
该按钮可将用户移动到下一个步骤。你通常还想添加一个按钮，让用户也能导航到上一个步骤。
一旦构建出应用程序的基本逻辑，就可以单击右上角的测试。这将在开发者模式下启动应用程序，以便测试应用程序。
完成应用程序并记录数据
点击 "完成 "按钮，Tulip 将记录与每个操作员相关的所有应用程序数据。
在本例中，我们将在应用程序的最后一步添加另一个按钮。
- 选择应用程序的最后一步。
- 单击 "按钮"，然后选择 "完成"。
- 将新按钮拖动到所需位置。
进一步阅读
使用这些分步指南，利用这些概念构建一个完整的应用程序：
找到您想要的内容了吗？
您还可以前往community.tulip.co发布您的问题，或查看其他人是否遇到过类似问题！