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

更新 Jun 10, 2024

環境

軟體

  • G Web Development Software
  • LabVIEW NXG Web Module

HTML Container 允許用戶在 webVI 中呈現動態內容。這對於希望將其 Web 應用程序項目與第三方庫集成的用戶非常有用，因為 HTML Container 允許在網頁內的任何位置創建自定義控件和指示器，提供與拖放操作幾乎相同的靈活性概念！

本文將演示如何使用 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 Container 的位置。

下面是在G Web Development Software中運行的結果：
圖片.png
下面是在瀏覽器中運行的結果：
圖片.png

相關連結

其他支持選項

詢問NI社區

在我們的論壇中與其他用戶協作



請求工程師的支持

需要具備有效的服務合約或有效的租用版軟體，且支援選項因國家/地區而異。