为您的 OutSystems 应用程序注入动力 - 第一部分 - 将 Web API 集成到 OutSystems

我再次鼓励大家尝试 Javascript 并改进您的 OutSystems 应用程序。所以，让我们从一些简单的东西开始。

您听说过 Web API 吗？您可能没有听说过，但您可能已经以某种方式使用过它。

什么是 Web API？

Web API 是 Javascript 中的开箱即用功能。 这意味着当您开发 Javascript 代码时，您可以使用大量的可重用库，从而加速您的开发。

您可以在Mozilla 的文档中找到可用内置 Web API 的列表。

如何在您的 OutSystems 应用程序中使用 Web API？

在本文中，我将向您展示如何实现 Page Visibility API（页面可见性 API），作为在您的应用程序中使用 Web API 的一个例子。

Page Visibility API 提供了您可以监视的事件，以了解文档何时变为可见或隐藏，以及查看页面当前可见状态的功能。

Page Visibility API 的用例是什么？

例如，许多开发人员抱怨 Google Chrome 消耗大量内存。 让我告诉你一些事情，Google Chrome 不是唯一应该受到指责的。

许多应用程序消耗大量内存，显示动画，运行 ajax 调用以保持数据最新，大量的全局对象等等。 如果您保持 5 或 10 个选项卡使用这种应用程序，您就会遇到内存问题。

这是 Page Visibility API 帮助开发人员并改善用户体验的一个用例。 通过使用 Page Visibility API，您可以在用户切换到另一个选项卡并最小化窗口时触发，并停止执行这些繁重的任务。

如何在 OutSystems 中实现 Page Visibility API？

在这个例子中，我创建了一个新的传统 Web 应用程序模块，并添加了一个名为“PageVisibility”的块。

之后，我将以下代码添加到 WebBlock 的 Javascript 属性中

document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        // the page has lost focus
    } else {
        // the page got focused
    }
});

此代码正在向 DOM 添加一个新的侦听器，此侦听器称为 "visibilitychange"。 定义触发器后，您可以指定侦听器在触发时应执行的操作。

在此示例中，我正在检查页面是否隐藏。 在 Page Visibility API 中，您可以访问两个属性

• Document.hidden (布尔值)
• Document.visibilityState（四个可能的值：visible、hidden、prerender 或 unloaded）

对于此演示，我还创建了一个 Web 屏幕，其中包含两个容器，代表以下内容。

<video id="videoElement" style="width:400px;">
<source id="SourceTag" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
</video>

这是将其转换为 OutSystems 的方法

• Video 标签

• 视频标签内的 Source 标签

这是因为 OSTagName 扩展属性。 您可以在文档中找到有关此属性的更多信息。 它看起来比在其中包含 HTML 代码的表达式更好。

现在您需要定义侦听器在触发时应执行的操作。 基于当前窗口的可见性，使视频播放或暂停的代码应如下所示

function handleVisibilityChange() {
var videoElement = document.getElementsByClassName("videoElement")[0];
  if (document["hidden"]) {
    videoElement.pause();
    document.title = "Paused";
  } else {
    videoElement.play();
    document.title = "Playing";}
}document.addEventListener('visibilitychange', function () {
    handleVisibilityChange();    
});

所以，首先，此代码根据我们给它的类名在 DOM 中获取视频元素。 然后检查它的隐藏属性。

如果页面隐藏，它会调用视频元素的 pause 函数，否则，页面处于活动状态，它将播放视频。

它还会更改选项卡的标题，以便更容易查看视频何时暂停或播放。

将此代码插入 WebBlock 后，它看起来像这样

现在我们有了一个可用的 Javascript 代码，我们可以将 Web 块拖到屏幕上，就在我们插入的标签之后，并发布您的模块。

最后，您可以测试应用程序，看看当您播放视频并切换到另一个选项卡时，视频将被暂停。

这是一个简单的例子，说明您如何通过添加一些酷炫且易于实现的东西来改进您的 OutSystems 应用程序。