利用OutSystems创建你的第一个移动应用

使用OutSystems开发移动应用程序非常简单。如果您有包含数据的Excel文件，则可以将其导入数据库并快速创建移动应用程序，然后随时查阅和管理数据。

从Excel文件导入的数据创建移动应用程序，您需要：

创建数据库模型，并将Excel文件中的数据导入数据库;
创建一个屏幕列出数据库中数据;
创建一个屏幕，使您可以创建新记录并更新现有记录;
实现从数据库中删除记录的功能;
在移动设备上测试应用程序。

创建一个移动应用

让我们创建一个任务管理的应用程序。应用程序包含一个或多个模块，应用程序的不同部分可以封装在一个模块中。您可以在模块中设计数据模型，实现逻辑，设计应用程序的UI。

在开发环境中，使用移动模板创建一个名为ToDo的移动应用，然后为该应用程序创建一个新模块。
在这里插入图片描述

从Excel文件创建数据库表

OutSystems将您的应用程序数据存储在关系数据库中。这意味着创建应用程序的第一步是定义数据模型。

为此，我们使用已包含以下任务信息的Excel文件：

描述;
截止日期;
进度。

在开发环境中，打开右上角的Data选项卡，右键单击Entities文件夹，选择Import Entities from Excel…，然后选择默认目录下可用的示例文件Todos.xlsx。

在这里插入图片描述

导入Excel文件时，OutSystems会创建一个数据库表（在OutSystems中称为Entity），其中包含必要的列（在OutSystems中称为Attributes）以将数据存储在数据库中。

在程序后台，OutSystems将Excel文件中的每一行导入相应的数据库中。发布应用程序后，后台将使用Excel文件填充的数据库。

在本教程中，我们仅将数据存储在服务器数据库中，但是对于脱机使用，还可以使用本地存储在移动设备的本地存储数据。

创建一个界面来显示任务

现在我们将待办事项存储在数据库中，我们可以创建界面一个列出所有任务。

将Todo从Data选项卡拖放到Main Editor 窗口中。

在这里插入图片描述

这会更新HomeScreen用以包含最初的20个任务，并在用户滚动到列表末尾时自动加载更多任务。

在这里插入图片描述

创建编辑任务的界面

创建编辑的界面与创建列表界面一样。

右键列表中第一个任务的标题，然后选择 Link to Mobile Screen (New Screen)。

在这里插入图片描述

这会将任务标题链接到新创建的屏幕。我们将使用这个新屏幕来编辑任务，为此我们需要一个表单：

将“窗体”窗口小部件从工具箱拖放到新移动屏幕中的空白区域；
将Todo从Data选项卡拖放到先前创建的窗口部件；

在这里插入图片描述

现在我们定义用户按下Save按钮时的运行逻辑：

双击按钮Save的空白区域以定义与按钮关联的逻辑。这将创建一个名为SaveOnClick的新屏幕操作;
将Todo树下可用的实体操作CreateOrUpdateTodo拖放到SaveOnClick操作中的If-True分支。将Source属性设置为GetTodoById.List.Current。
将屏幕HomeScreen从Interface选项卡拖放到End节点，以便在保存任务后将用户重定向回主屏幕。

在这里插入图片描述

允许添加任务

我们希望最终用户能够从列表屏幕中添加新任务：

双击Interface选项卡树中的HomeScreen打开列表屏幕；
将Icon小部件从工具箱拖放到屏幕右上角的Actions占位符中，然后选择图标“+”;
右键单击该图标，然后选择 Link to Mobile Screen MainFlow\Todo。

在这里插入图片描述

允许完成任务

现在让我们添加将任务标记为完成的新功能。

选择列表中的项目，然后单击工具栏上的向左滑动操作；
将文本“Action”替换为“Done”。

在这里插入图片描述

双击“向左滑动”区域的空白区域以定义与向左滑动操作关联的逻辑；
将Data选项卡中Todo下可用的实体操作DeleteTodo拖放到“向左滑动操作”的流程中。将属性Id设置为“GetTodos.List.Current.Todo.Id”；
将Refresh Data工具拖放到操作流中，然后选择GetTodos以刷新屏幕中的可用任务。

测试移动应用

在这个阶段，我们测试移动应用程序。单击1-Click Publish按钮将应用程序发布到您的环境。

在这里插入图片描述

部署应用程序后，单击Open in Browser 按钮以在浏览器中测试您的应用程序（支持Chrome和Safari）。