郁金香应用程序编辑器介绍
  • 31 Oct 2023
  • 1 分钟阅读
  • 贡献者

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


Article Summary

目的

在本文中,您将了解到

  • 郁金香应用程序编辑器的不同部分
  • 可以添加到应用程序中的基本视觉元素(也称为小部件)
  • 如何使用按钮添加基本逻辑
  • 如何完成应用程序的数据记录

:::(Info) (注:)本主题在郁金香大学的"应用程序构建入门"课程中有所介绍:

如果你还在熟悉 Tulip 应用程序编辑器,这篇文章就是为你准备的。我们将以可视化工作指导应用程序为例,介绍应用程序编辑器中的所有主要工具。

在我们开始之前,这里有一个快速提醒:应用编辑器允许您为操作员构建应用,而无需编写任何代码。

它看起来是这样的

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

:::(Warning) (注:)我们会不断改进新实例中的应用程序。如果您最近才加入 Tulip,您实例中的应用程序可能与您在本文图片中看到的不同。不用担心。即使内容略有不同,但理念是相同的:

Tulip 应用程序编辑器快速概览

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

你对基本布局所做的任何格式或布局编辑都会自动应用到应用中的每个步骤。

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

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

单击步骤可查看其中包含的元素。

屏幕顶部的工具栏包含可添加到应用程序中的可视化元素。这些元素包括形状、照片、文本、视频和按钮。 要在应用程序中添加新的可视化元素,只需单击并拖动到所需位置即可。

工具栏的右侧,还有其他工具可以用来对郁金香应用程序编辑器中的对象进行分层。

屏幕右侧的 "上下文窗格"是你处理应用中所有格式和逻辑的地方。点击此处了解更多关于 Widget 配置的信息。

共有三个选项卡:

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

步骤选项卡显示

  • 整个步骤的格式选项
  • 可指定该步骤的目标周期时间
  • 可以重置为基本布局中指定的布局
  • 允许删除当前步骤
  • 让你可以建立在打开或关闭该步骤时执行的逻辑,稍后我们将详细介绍触发器。

应用程序选项卡

  • 允许打印应用程序中的步骤
  • 可以调整整个应用程序的循环计时器
  • 显示与该程序相关的所有变量列表
  • 可指定应用程序的分辨率,使其适合您的预期界面。
  • 如果多个管理员正在审查更改,则允许您添加注释
  • 让您能够建立在启动、完成或取消此应用程序时都将执行的逻辑

单击应用程序中的元素将在上下文窗格中显示另一个名为 "小工具选项卡 "的选项卡。在这里,你可以调整应用程序各种可视元素的格式,以及与之交互时的行为。

使用平移和缩放工具,您可以

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

为应用程序添加步骤

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

提示:如果想在新步骤中重复使用设计或逻辑,也可以复制现有步骤,方法是点击齿轮图标并选择 "复制步骤"。

为应用程序添加逻辑

既然我们已经介绍了如何添加新步骤,那么就需要为操作员提供从一个步骤移动到另一个步骤的方法。我们可以使用触发器在 Tulip 中创建这种逻辑。首先,让我们使用一个简单的按钮从一个步骤导航到另一个步骤。

从应用程序编辑器顶部的工具栏中选择 "按钮",即可添加自定义按钮。将按钮拖动到所需位置。

为按钮添加标签,并使用右侧的 "上下文窗格 "调整格式/颜色选项。

要为按钮添加逻辑,请单击上下文窗格中触发器旁边的 "+"号。

触发器可以让你使用简单的*"当"、"如果"、"那么"、"否则*"序列为应用程序添加逻辑,而无需使用任何代码。这是点击 "+"号后打开的触发器编辑器。

当触发器触发时,应用程序中将发生动作转换

按下按钮后,您可以执行许多操作转换

这个触发器很简单:

按钮被按下

然后 将当前时间保存到变量中

然后 转到步骤 → 下一步。

通过该按钮可以进入下一个步骤。您通常还想添加一个按钮,让用户也能导航到上一个步骤。

构建好应用程序的基本逻辑后,您可以单击应用程序编辑器右上方的运行测试选项。这将在 TTulip 播放器中启动您的应用程序,让您在电脑上实时测试应用程序。

完成应用程序以记录数据

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

在本例中,我们将在应用程序的最后一步添加另一个按钮,以记录完成情况。

点击工具栏上的 "按钮 "选项,选择 "完成 "按钮。将它拖到应用程序的最后一个步骤上。

恭喜您这就是构建一个简单的工作指导应用程序所需的全部知识。

更多阅读

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


找到您想要的了吗?

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


本文对您有帮助吗?