郁金香应用程序编辑器的介绍

目的

在这篇文章中，你将了解到。

• 郁金香应用程序编辑器的不同部分
• 你可以添加到应用程序中的基本视觉元素（也叫Widget）。
• 如何使用按钮添加基本逻辑
• 如何完成你的应用程序来记录数据

:::(Info) (注：)这个主题在郁金香大学的"应用程序构建简介"课程中有所介绍。 ::。

如果你还在熟悉郁金香应用编辑器，这篇文章是为你准备的。我们将用一个可视化工作指示应用程序的例子来介绍应用程序编辑器中的所有主要工具。

在我们开始之前，这里有一个简短的提醒。应用程序编辑器允许你为操作员建立应用程序，而无需编写任何代码。

下面是它的外观。

应用程序编辑器允许你创建一系列的步骤，或操作员可以在应用程序中使用的屏幕。这些步骤还可以被组织成步骤组，以提高可用性。

:::(Warning) (注意：）我们正在不断改进新实例中的应用程序。如果你最近加入郁金香，你的实例中的应用程序可能与你在本文中看到的图片不同。不用担心。即使内容有些不同，想法也是一样的。

郁金香应用程序编辑器的快速概述

左边的步骤列表显示了包括基本布局的步骤列表。

你对基本布局所做的任何格式化或布局编辑都将自动应用于应用程序中的每个单独的步骤。

{高度="" 宽度="300"}

你可以通过在右侧的上下文窗格中 "解锁 "个别元素来改变每个步骤中的基本布局。

使用 "右键"，你可以复制、分组步骤，或删除。

你可以点击一个步骤来查看它所包含的元素。

屏幕顶部的工具栏包括可以添加到应用程序的视觉元素。这些元素包括形状、照片、文本、视频和按钮等。 要向应用程序添加一个新的视觉元素，只需点击并将其拖到所需的位置。

在工具栏的右侧有一些额外的工具，你可以用来给郁金香应用程序编辑器中的对象分层。

屏幕右侧的上下文窗格是你处理应用程序中所有格式化和逻辑的地方。在这里阅读更多关于小工具配置的信息。

有三个标签。

• 步骤标签
• 应用程序选项卡
• 小工具选项卡

步骤标签显示了你。

• 整个步骤的格式化选项
• 允许你指定这个步骤的目标周期时间
• 允许你重设为在 "基本布局 "上指定的布局
• 允许你删除当前的步骤
• 让你能够建立逻辑，每当这个步骤被打开或关闭时都会被执行--我们稍后会讨论更多关于触发器的内容。

应用标签。

• 允许你打印出应用程序中的步骤
• 允许你调整整个应用程序的循环计时器
• 向你显示与该应用程序相关的所有变量的列表
• 允许你指定应用程序的分辨率，以适应你的预期界面。
• 如果多个管理员正在审查更改，允许你添加评论
• 让你有能力建立逻辑，每当这个应用程序开始、完成或取消时都会执行。

点击应用程序中的一个元素，会在上下文窗格中暴露出另一个标签，称为Widget Tab。你可以在这里调整应用程序的各种视觉元素的格式，以及与之互动时的行为。

使用平移和缩放工具，你可以。

• 移动你的应用程序的编辑面
• 放大或缩小

向你的应用程序添加步骤

要在Tulip应用程序中创建一个新的步骤，点击应用程序编辑器左侧的添加步骤选项。新步骤的设计将反映基本布局。

专业提示：如果你想在你的新步骤上重复使用设计或逻辑，你也可以复制一个现有的步骤，点击齿轮图标，选择 "复制步骤"。

给你的应用程序添加逻辑

现在我们已经介绍了如何添加新的步骤，我们需要给操作者一种从一个步骤到另一个步骤的方法。我们可以在Tulip中使用触发器创建这种逻辑。首先，让我们使用一个简单的按钮来从一个步骤导航到另一个步骤。

你可以从应用程序编辑器顶部的工具栏上选择 "按钮 "来添加一个自定义按钮。将按钮拖到所需的位置。

为按钮添加一个标签，并使用右边的上下文窗格调整格式/颜色选项。

要给按钮添加逻辑，请在上下文窗格中点击触发器旁边的 "+"号。

触发器让你在无需使用任何代码的情况下，通过简单的when、if、then、else序列向你的应用程序添加逻辑。这是触发器编辑器，在你点击 "+"号后打开。

动作或过渡是当触发器触发时将在应用程序中发生的变化。

当按钮被按下时，你可以采取许多行动和过渡。

这个触发器很简单。

当。 按钮被按下

然后。 当前时间被保存到一个变量中

然后 转到步骤→下一步。

这个按钮可以让你进入下一个步骤。你通常会想添加一个按钮，让用户也能导航到上一步。

一旦你建立了应用程序的基本逻辑，你就可以在应用程序编辑器的右上方点击运行或测试选项。这将在TTulip播放器中启动你的应用程序，让你在电脑上实时测试该应用程序。

完成你的应用程序以记录数据

你需要添加一个 "完成 "按钮，这样Tulip就会记录操作员使用应用程序的所有数据。

在这个例子中，我们要在应用程序的最后一步添加另一个按钮来记录完成情况。

点击工具栏中的 "按钮 "选项，选择 "完成 "按钮。把它拖到你的应用程序的最后一步。

{height="" width="450"}。

恭喜你！这就是你需要知道的全部内容。这就是你需要知道的建立一个简单的工作指导应用程序的全部内容。

进一步阅读

使用这些分步指南，利用这些概念建立一个完整的应用程序。

• 创建一个郁金香应用程序
• 构建一个完整的缺陷报告应用程序
• 构建一个捕捉工单数据的应用程序

你找到你要找的东西了吗？

您也可以前往community.tulip.co发布您的问题，或者看看其他人是否遇到过类似的问题!