使用 Predix UI 組件 開發應用程序
作者: Zhiwei Li，前端工程師，GE數字集團
如果您還沒有Predix試用帳號，請訪問https://supportcentral.ge.com/esurvey/GE_survey/takeSurvey.html?form_id=18446744073709715720 申請。請務必準確提供您的信息，我們會以郵件方式通知您註冊結果。
Predix UI 組件是一組用戶界面組件，可以快速地組合在一起來構建應用程序。本指南將介紹安裝單個組件(px-spinner)的步驟。
步驟1：完成 bower 的安裝
Bower是一個在線軟件包管理器。你的應用程序中應包含一個 bower.json 文件 （在你的應用程序目錄中運行 bower init 創建）。在應用程序中添加 bower.json 文件意味着你使用 bower 管理你的依賴項。運行 bower install 會安裝 bower.json 中的依賴。這是把 Predix UI 組件導入你的應用程序的第一步。
例如：安裝最新的 px-spinner 組件，在你的應用程序文件夾中，在命令行工具輸入以下命令：
$ bower install px-spinner如果你想把該組件加入到 bower.json 文件中作爲一個依賴，初始化安裝組件時，加上 “–save” 參數：
$ bower install px-spinner --save安裝好的組件將存在你的應用程序文件夾下的 bower_components/px-spinner 文件夾中。爲了更好的運用 bower 這個強大的工具，請查看 bower 官網。
步驟2：引入鏈接
下一步，在 HTML 文件中使用 link 標籤導入 Predix UI 組件，下面是一個導入 px-spinner 組件的例子：
<link rel="import" href="bower_components/px-spinner/px-spinner.html" />link 標籤讓瀏覽器識別這是一個可能被分享的資源，意味着如果另一個組件需要依賴之前導入的這個組件，瀏覽器不需要再去請求一次代碼。瞭解更多請查看 StackOverflow answer。
步驟3：使用標籤
現在可以在你的應用程序中使用該組件了。只需要把 px-spinner 組件的標籤放入你的應用程序中：
<px-spinner></px-spinner>步驟4：查看 API 文檔
每個組件都有一個交互示例和 API 文檔頁面。你可以在 px-spinner 組件文檔 查看，並在目錄中查看其他組件的文檔。
使用 API 文檔：
比如：如果你在查看px-spinner API ，你會看到它有一個“finished” 的屬性可以用來隱藏它。設置該屬性爲 true 則可隱藏該組件，如：
<px-spinner finished="true"></px-spinner>“finished” 屬性同樣可以通過獲取 DOM 元素後使用程序直接設置：
var spinner = document.querySelector('px-spinner');
spinner.finished = true;在使用中您有任何問題，請訪問我們的論壇 http://bbs.csdn.net/forums/GEPredix
GE數字集團的技術專家們會在線回答您的問題。
也請訪問我們在CSDN的Predix專區 http://predix.csdn.net 瞭解更多Predix的內容和相關活動。