使用 Predix UI 组件 开发应用程序

使用 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的内容和相关活动。