OutSystems中创建你的第一个web应用

利用OutSystems开发 Web 应用程序非常简单。如果您有包含数据的 Excel 文件,则可以将其导入数据库并快速创建企业级应用程序来管理数据。如果您没有准备好 Excel 文件,请不要担心,我们会为您提供样本文件。

要使用从Excel文件导入的数据创建应用程序,您需要:

  • 创建数据库模型,并将Excel文件中的数据导入数据库;
  • 创建一个屏幕列出数据库中数据;
  • 创建一个屏幕,允许创建新数据和更新现有记录;
  • 实现从数据库中删除记录的功能;
  • 发布您的应用程序;
  • 让我们开工吧!在这个例子中,我们将使用提供的Excel联系信息,创建一个简单的联系人管理应用。

创建一个web应用

让我们创建一个新的联系人信息管理的 Web 应用。应用程序包含一个或多个模块,应用程序的不同部分可以封装在一个模块中。您可以在模块中设计数据模型,运行逻辑以及设计应用程序的 UI 界面。

在Service Studio中,单击New Application,选择Web App,选择Top Menu模板并将其命名为“Contact Portal”。

在这里插入图片描述

在新的Contact Portal应用程序中,创建一个Web Responsive模块,并命名为‘ContactPortal’。
在这里插入图片描述

从Excel文件创建数据库表格

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

为此,我们将使用已包含以下联系信息的Excel文件:

  • 姓名
  • 地址
  • 出生日期
  • 邮箱

ContactPortal 模块中,打开右上角的 Date 选项卡,右键单击Entities文件夹,选择 Import Entities from Excel…”,然后在目录中选择默认情况下可用的Contacts.xlsx示例文件C:\Program Files\OutSystems\Development Environment 11.0\Service Studio\TutorialResources.

在这里插入图片描述

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

在程序后台,OutSystems将 Excel 的每行数据都导入数据库中。发布应用程序后,将自动运行由Excel数据的填充数据库。

创建一个屏幕列出联系人

现在我们可以创建一个屏幕列出所有联系人。

打开右上角的Interface选项卡,然后双击UIFlow目录下的MainFlow。然后,将ContactData选项卡拖放到Main Editor窗口中的空白区域。

在这里插入图片描述

这将创建一个屏幕,其中包含一次显示50个联系人的列表,以及分页和搜索功能。

在这里插入图片描述

创建一个屏幕用以创建和编辑联系人

创建一个屏幕用于创建和编辑记录与创建列表屏幕一样便捷,因此你只需要重复上一步即可。

打开MainFlow窗口,将 ContactData选项卡拖放到Main Editor窗口中的空白区域。

在这里插入图片描述

这将创建一个新窗口,其中包含用于创建新记录或编辑现有记录。 OutSystems还添加了服务器端逻辑,支持自动创建和编辑记录。

在这里插入图片描述

允许删除联系人

要实现管理联系人的应用程序,我们现在只缺少删除功能。让我们来实现!

双击屏幕ContactDetail按钮将其打开。将Button小部件从工具箱拖放到屏幕的Cancel按钮右侧,右键单击新按钮,然后选择Link to New ‘DeleteContact’ Screen Action

在这里插入图片描述

OutSystems添加服务器端逻辑以支持删除联系人记录并将该按钮与该逻辑相关联。

发布你的Web应用

现在我们只需要让应用程序上线。单击1-Click Publish按钮将应用程序发布到您的环境中。

在这里插入图片描述

部署应用程序后,单击Open in Browser在浏览器中打开,在浏览器中测试应用程序。

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44201067/article/details/85217723