如何使用G Web Development Software 内的 HTML Container?

更新 Jun 10, 2024

环境

软件

  • G Web Development Software
  • LabVIEW NXG Web Module

HTML Container 允许用户在 webVI 中呈现动态内容。这对于希望将其 Web 应用程序项目与第三方库集成的用户非常有用，因为 HTML 容器允许在网页内的任何位置创建自定义控件和指示器，提供与拖放操作几乎相同的灵活性概念！

本文将演示如何使用 HTML Container 显示使用 Javascript 以编程方式创建的内容。

  1. 启动 G Web Development Software。
  2. 在面板中，从Decoration面板中放置 HTML Container。
    图片.png
  3. 右键单击并选择Create reference。
    图片.png
  4. 将Static Control Reference（HTML Container）放入图中，在 While 循环之外。
  5. 将Obtain JavaScript Reference放在Static Control Reference （HTML Container）旁边并连接它们。
    图片.png
  6. 启动您的文本编辑器并将以下代码保存为AddH1.js 。此代码将创建一个新的 HTML 元素 H1，并将其附加到 HTML Container中。 
    (function () {
    'use strict';
    
    window.addElement = function(container){
    const newElement = document.createElement("h1");
    newElement.innerText = "Hello World!";
        container.appendChild(newElement);
    }
}());
  7. 右键单击WebApp.gcomp并选择Import files。导入AddH1.js。
    图片.png
  8. 右键单击WebApp.gcomp并选择New>>JavaScript Library Interface。将其命名为Library.jsli 。
    图片.png
  9. 将以下代码插入HTML script and link dependencies。 
    <script src="AddH1.js"></script>
  10. 插入addElement作为 Javascript Global 的值并单击Add function 。
  11. 添加新的 JavaScript 参考参数
    1. 单击Add Parameter。
    2. 突出显示新创建的参数并展开右侧的项目窗格。
    3. 在 Item 窗格中，将参数的数据类型配置为JS Reference 。
    4. 将其重命名为container。
      图片.png
  12. 在index.gviweb中，从Project Items>>Software>>WebApp>>Library 中拖放 AddElement。
  13. 将 AddElement 的container输入与Obtain JavaScript Reference中的 Javascript 参考连接起来。
    图片.png
  14. 它已准备好运行。观察“Hello World!”将显示在放置 HTML 容器的位置。

下面是在G Web Development Software中运行的结果：
图片.png
下面是在浏览器中运行的结果：
图片.png

相关链接

其他支持选项

询问NI社区

在我们的论坛中与其他用户协作



请求工程师的支持

可能需要有效的服务协议，支持选项因国家/地区而异。