一、參考資料
Tridium_N4_開發環境設置_JavaScript開發環境篇.pdf
Tridium_N4_開發環境設置_基礎開發環境篇.pdf
TridiumNiagara4控件開發參考手冊.pdf
以上的第一篇和第二篇是楊超大神寫的文檔，是基本的參考資料，搭建環境必須閱讀。但是在實際的開發中有些許不相同，后續會說明相關情況。
第三篇是Niagara官方的開發文檔翻譯版，可結合英文版以及niagara內置的參考文檔（help-->help contents）開發
tridium官方GitHub地址 https://github.com/tridium?tab=repositories ，在官方的GitHub上有相關的案例，可以下載參考
二、軟件安裝與環境配置
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，也沒辦法自主編輯
⑤ 在src文件夾創建如下圖所示目錄
在ux文件夾下創建一個BTest1Widget.java文件
內容如下圖：
⑥ 修改build.gradle文件
⑦ 文件目錄分析
2.方法屬性
在這里簡要的說明一下在編寫widget時主要的工作，第一個是需要添加自定義的屬性，第二個是綁定動態的數據，更具體的API可以參考官方的開發文檔。
① 添加屬性方法
② 獲取綁定動態數據
當你給一個組件綁定了niagara中的動態數據，那么這個組件綁定數據之后是如何獲取這個動態數據並顯示在頁面的某個組件上呢？需要用到下面的方法
四、widget實例
在這里簡單的展示一下我寫的widget組件實例：
③ 在niagara中編輯
② 在瀏覽器端顯示
五、注意事項
- 修改代碼之后需要繼續構建工程運行gradlew build命令，重啟niagara，進入之后重啟station
- 首次創建一個widget需要重啟客戶機電腦（非虛擬機），因為我的niagara在虛擬機中，所以會有這個問題。
- 在控制台重新gradlew比較方便，但是有時出錯會不太好調試，這個時候可以用IDE打開項目，比較好調試