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