入门

本教程将指导您如何搭建一个简单的移动Workshop应用，使用户能够查看航班数据、筛选航班，并查看每个航班的详细信息。本教程使用大多数Foundry环境中包含的示例数据。由于Foundry Ontology会根据您的需求和数据进行定制，您可能无法访问教程中描述的确切对象类型。

本教程侧重于创建移动Workshop应用所需的步骤，并假设您已经对搭建Workshop应用和使用Ontology操作配置数据输出有一定的了解。如果您从未使用过Workshop或操作，请考虑从一般的Workshop和操作类型教程开始：

• 开始使用Workshop
• 开始使用操作类型

第1部分：初始设置

首先，我们将创建一个基本的应用，可以用于滚动浏览航班数据，步骤如下：

1. 创建一个新的Workshop模块。

2. 在左侧边栏中选择设置，并切换到移动设备类型。编辑器的尺寸将切换为移动设备的尺寸，设计将更新为单列。

3. 目前，通过禁用右上角模块导航栏可见旁边的开关来关闭导航栏。

   

4. 在左侧边栏中选择概览，然后选择添加对象集变量以开始向您的应用添加数据。在本例中，将**[示例数据] 航班**对象类型添加到您的模块中。

   

5. 选择**+ 添加微件并向您的应用添加一个对象列表微件。配置微件以使用您的航班对象集变量，然后选择要在列表中显示的属性。在本例中，我们将添加属性承运人名称**、始发城市名称、目的城市名称、出发和到达到列表中。

   

此时，您已经创建了一个可以用于滚动浏览航班数据的基本应用。在下一步中，我们将为此应用添加一些互动功能。

第2部分：添加筛选

在本教程的这一部分中，我们将添加筛选航班列表的功能。为了提供足够的屏幕空间让用户应用筛选，我们将在一个Workshop抽屉式导航中嵌套筛选功能。

1. 在左侧边栏中选择设计，然后选择**+并向应用添加一个新抽屉式导航**。更新抽屉式导航的标题和名称为"筛选航班"，并将其图标设置为筛选图标。

   

2. 在抽屉式导航中，选择**+ 添加微件并添加一个筛选列表**微件。配置筛选列表的输入数据为您之前创建的航班对象集变量。

3. 在筛选配置下，选择用户应该能够筛选的几个属性。在本例中，我们将在始发城市名称、目的城市名称和取消原因属性上添加筛选。

   

4. 使用编辑器视图右上角的X关闭抽屉式导航。返回到航班视图，点击顶部工具栏中的**+以在工具栏中添加一个微件。选择按钮组**微件。

   

5. 将按钮设置为极简风格和大号风格，然后选择按钮1以配置按钮及其行为。在本例中，我们希望按钮仅显示筛选图标。删除按钮文本，然后在左侧图标下选择筛选图标。选择**+ 添加事件**，然后选择打开筛选航班。

   

6. 接下来，更新您的对象列表以尊重由筛选列表微件生成的筛选。在配置选项中，选择对象列表微件，然后通过选择输入数据下的X删除对象集变量配置。

   

7. 选择新对象集变量，并将新变量命名为"已筛选航班"。

8. 在起始对象集下，选择您现有的对象集变量"[示例数据] 航班"。接下来，选择使用变量筛选并选择您的筛选列表微件的输出。

   

此时，您已经添加了用户根据您配置的一组属性筛选航班列表的功能。为了避免界面杂乱，这些筛选显示在一个全页面抽屉式导航中，以便用户可以在返回到他们的筛选列表之前轻松配置多个筛选。

尝试打开抽屉式导航并筛选出因天气原因取消的丹佛，科罗拉多州的航班。关闭抽屉式导航，您将看到航班列表已被适当地更新。

在下一步中，我们将让用户探索有关选定航班的更多详细信息。

第3部分：添加选定对象视图

在本教程的这一部分中，我们将使用户能够导航到不同页面，以便在从列表中选择航班时查看详细信息。

1. 在左侧边栏中选择设计，然后选择**+并向应用添加一个新页面**。更新页面名称为"航班详情"。在新页面的标题中，删除部分标题。

2. 选择工具栏左侧的**+并添加一个对象集标题**微件。配置微件以使用"对象列表1活动对象"作为其输入对象集。

   

3. 在页面中，选择设置设计，然后选择流动设计。这会在页面中添加一个可滚动的主体，可以包含多个微件。

   

4. 接下来，我们将显示当前航班的一些属性：

• 选择您新的流动设计中的部分，并将其标题更新为"属性"。

• 选择**+ 添加微件**并添加属性列表微件

• 配置属性列表微件以同样使用"对象列表1活动对象"作为其输入对象集

• 更新属性列表微件以使用堆叠标签设计，并有1列，然后选择几个属性以显示。在本例中，我们将显示运营承运人、承运人名称、已取消和取消原因。

  

5. 然后，我们将显示有关始发和目的地机场的信息：

• 在流动设计的底部选择**+ 添加部分**。将新部分的标题更新为"始发机场"
• 选择**+ 添加微件**并添加属性列表微件
• 点击选择对象集变量...然后+ 新对象集变量。从"对象列表1活动对象"变量开始，然后使用**[示例数据] 始发机场链接搜索周围**。将此新变量重命名为"活动航班始发机场"。
• 更新属性列表微件以使用堆叠标签设计并有1列，然后选择几个属性以显示。在本例中，我们将显示显示名称、承运人数、起飞航班数、目的地数属性。

6. 重复上述步骤以添加一个显示有关目的地机场信息的部分。

   

7. 使用左侧设计侧栏切换回显示航班对象列表的原始页面。选择您的对象列表，然后在配置选项中选择**+ 添加事件下的在活动对象选择时**。选择切换到航班详情。

   

此时，您已经添加了导航到不同页面以查看列表中每个航班详情的功能。尝试在对象列表中选择一个航班，以导航到您刚刚创建的"航班详情"页面。

最后，我们将在桌面浏览器和手机上预览您的移动应用。

第4部分：查看和使用模块

选择右上角的保存并发布以保存您的模块，然后选择查看 ↗。这将在Foundry的移动应用启动器中打开您的应用。

此时，您有不同的选项来在桌面浏览器和手机上预览您的移动应用：

• 桌面浏览器预览。要预览您的应用在实际手机上的外观，请使用浏览器对移动设备模拟的支持：

  • Chrome设备模式 ↗
  • Safari响应式设计模式 ↗
  • Edge模拟移动设备 ↗
  

• 在移动设备上。如果您有一个可以访问您的Foundry环境的移动设备，您还可以通过从手机打开URL来导航到您的应用。在某些浏览器如Chrome和Edge中，您可以通过右键点击页面并选择为此页面创建二维码来轻松做到这一点。然后，您可以使用移动设备扫描二维码以打开应用。

  

请注意，在移动应用启动器中，您可以使用浏览器的后退和前进交互来导航页面。在Android设备上，您可以使用设备的后退按钮进行导航，而在iOS上，您可以从左或右滑动，如下所示。

下一步

本教程指导您如何搭建一个简单的应用，以在移动设备上探索航班数据。继续学习关于Workshop的移动支持使用以下资源：

• 了解移动设计的最佳实践。
• 使用导航栏通过更多页面扩展您的应用。
• 了解Workshop移动应用的网络访问。