niagara 控制元件開發 widget

一、參考資料

Tridium_N4_開發環境設定_JavaScript開發環境篇.pdf
Tridium_N4_開發環境設定_基礎開發環境篇.pdf
TridiumNiagara4控制元件開發參考手冊.pdf
以上的第一篇和第二篇是楊超大神寫的文件，是基本的參考資料，搭建環境必須閱讀。但是在實際的開發中有些許不相同，後續會說明相關情況。
第三篇是Niagara官方的開發文件翻譯版，可結合英文版以及niagara內建的參考文件（help-->help contents）開發
tridium官方GitHub地址

https://github.com/tridium?tab=repositories ，在官方的GitHub上有相關的案例，可以下載參考

 

enter description here

 

二、軟體安裝與環境配置

1、軟體安裝

• jdk安裝以及環境變數配置
• IDE安裝
• Niagara環境變數配置
• Gradle安裝
• NodeJS安裝
• Grunt安裝
• grunt-init安裝
• grunt-cli安裝
• 下載grunt-init-niagara放到指定目錄

基本的開發環境配置在第一篇第二篇參考文件中都有詳細的解釋，這裡就不做仔細的說明。

三、具體實施

1、構建工程

① 建立專案資料夾，執行命令grunt-init grunt-init-niagara，這時會建立工程
② npm install安裝依賴
③ gradlew build 構建工程，這一步是和第一篇參考文件不同部分的地方，實際操作中發現，在grunt ci之前需要先執行gradlew build命令，否則會報錯
④ 新增module.palette

檔案module-include.xml檔案

palette檔案的作用是與niagara的palette庫作關聯的，並且新增相關的屬性。沒有這個檔案，就沒辦法在niagara的palette視窗拖拽widget，也沒辦法自主編輯

 

module.palette

 

 

module-include.xml

 

⑤ 在src資料夾建立如下圖所示目錄

 

5

 

在ux資料夾下建立一個BTest1Widget.java檔案

 

5.1
內容如下圖：

 

 

BTest1Widget.java
⑥ 修改build.gradle檔案

 

 

build.gradle
⑦ 檔案目錄分析

 

 

檔案目錄分析

 

2.方法屬性

在這裡簡要的說明一下在編寫widget時主要的工作，第一個是需要新增自定義的屬性，第二個是繫結動態的資料，更具體的API可以參考官方的開發文件。

① 新增屬性方法

 

新增屬性方法

 

② 獲取繫結動態資料
當你給一個元件綁定了niagara中的動態資料，那麼這個元件繫結資料之後是如何獲取這個動態資料並顯示在頁面的某個元件上呢？需要用到下面的方法

 

獲取繫結動態資料

 

四、widget例項

在這裡簡單的展示一下我寫的widget元件例項：

③ 在niagara中編輯

 

3.1

 

 

3.2

 

② 在瀏覽器端顯示

 

資料是動態變化的.gif

 

五、注意事項

• 修改程式碼之後需要繼續構建工程執行gradlew build命令，重啟niagara，進入之後重啟station
• 首次建立一個widget需要重啟客戶機電腦（非虛擬機器），因為我的niagara在虛擬機器中，所以會有這個問題。
• 在控制檯重新gradlew比較方便，但是有時出錯會不太好除錯，這個時候可以用IDE開啟專案，比較好除錯