开发者中心

选项卡插件

概述

在下面的文档中,您将了解如何开发一个插件,为设备添加新的选项卡。

在开始使用选项卡插件之前,我们建议您查看介绍应用程序和插件的基本概念的介绍以及"Hello world!"演示插件。

您可以在存储库cumulocity-ui-plugin-examples中的文档中找到相关插件。

设备联系人插件

本节说明如何创建一个插件,在应用程序的设备中添加一个新的"联系人"选项卡。点击"联系人"向用户提供一个用于输入联系人详细信息的简单表单。当用户保存表单时,联系人详细信息作为设备对象的一部分存储在设备清单中。新标签页如下所示:

联系人选项卡

为了实现这个目标,您需要执行以下步骤:

  • 创建一个插件。
  • 应用程序清单导入列表上声明插件。
  • 添加选项卡到设备
  • 在选项卡中显示数据。
  • 将数据保存到QuarkIoE后端。

我们假设您已经创建了一个可以添加新插件的应用程序。如果没有,您可以使用上面提到的存储库中提供的应用程序。您还可以在文件夹"plugins/deviceContact"中找到此处描述的示例。

添加依赖关系

对于此练习,让我们考虑您想扩展应用程序"设备管理"。实际上,这意味着添加在设备管理中使用的一组插件,并将自己添加到应用程序清单中的导入列表中。您可以通过执行命令c8y util:showimports <appContextPath>在您的开发环境中通过任何可用的应用程序打印已使用的插件列表。

在这种情况下:


  $ c8y util:showimports devicemanagement
                    

将打印的插件列表添加到应用程序清单的导入定义。

请注意,如果您已经定义了自己的品牌插件,则必须排除c8yBranding插件。

但是,如果你喜欢更简约的方法,你也可以阅读cumulocity-ui-plugin-examples中的"cumulocity.json" 只导入必要的插件为设备联系人插件工作。

  • 提示 运行 c8y util:showimports cockpitc8y util:showimports administration 查看其他可用插件。 内置应用程序的清单存储在"node_modules/cumulocity-ui-build"内的 _apps.json 中。
创建插件

在应用程序文件夹中,运行命令:


  $ c8y create:plugin deviceContact
                    

然后在"plugins/deviceControl"中编辑插件清单以添加以下信息:


  {
    "name": "Device Details - Contact",
    "description": "Plugin adds a Contact tab to Device Details view"
  }
                  

然后在插件的根文件夹中创建一个文件"deviceContact.module.js",包含以下内容:


  (function () {
    'use strict';

    angular.module('myapp.deviceContact', []);
  }());
                

更新应用程序清单以将此新插件添加到导入列表。


  {
    ...
    "imports": [
    ...
    "myapplication/deviceContact"
    ]
  }
                
添加选项卡到设备

现在,我们在设备详细信息视图中创建一个空的"联系人"选项卡,我们将在下面的步骤中填写内容。 在plugin文件夹中,创建一个文件"deviceContact.config.js",内容如下。 就像在"Hello world!"示例,我们将使用QuarkIoE JavaScript API提供的"c8yViewsProvider"服务为我们的应用程序添加一个新视图。


  (function() {
      'use strict';

      angular
      .module('myapp.deviceContact')
      .config(configure);

      configure.$inject = [
      'c8yViewsProvider'
      ];

      function configure(
      c8yViewsProvider
      ) {
      c8yViewsProvider.when('/device/:deviceId', { // when the path "/device/:deviceId" is accessed ...
      name: 'Contact', // ... show a tab with the name *"Contact"*
      icon: 'envelope-o', // ... use the envelope-o icon (icons are provided by the great Font Awesome library and you can use any of their [icon names](http://fontawesome.io/icons/) without the *fa-* prefix here
      priority: 1000, // ... set the priority to 1000, which means that all tabs with a priority lower than 1000 appear before this tab and all with a priority higher than 1000 appear after this tab
      templateUrl: ':::PLUGIN_PATH:::/views/deviceContact.html', //  ... display our html file "deviceContact.html" inside the "views" folder of our plugin (the plugin's folder is represented using the magic string ```:::PLUGIN_PATH:::```, which is replaced by the actual path during the build process)
      controller: 'deviceContactCtrl' // ... use "deviceContactCtrl" as controller
    });
  }

}());
                

请注意,当多个视图附加到路由(在这种情况下为"/device/:deviceId")时,将自动为其中的每个创建选项卡。 由于设备详细信息视图已经使用/device/:deviceId作为设备详细信息,因此"联系人"将作为选项卡呈现。

接下来,我们必须定义我们的视图和控制器。 对于控制器,在plugin文件夹中创建一个新文件"deviceContact.controller.js",并添加以下内容:


  (function () {
  'use strict';

  angular
  .module('myapp.deviceContact')
  .controller('deviceContactCtrl', DeviceContactController);

  function DeviceContactController() {

  });

  }());
                

在插件文件夹中,创建一个新的文件夹"views",并用以下内容添加文件"deviceContact.html":

  
  <div class="panel panel-clean">
  <div class="panel-body">
  Contact
  </div>
  </div>
                

现在我们已经将模块,config和controller添加到我们的插件,我们必须指定"myapp.deviceContact"作为我们的模块,并将每个javascript文件添加到我们的插件清单:


  {
    "name": "Device Details - Contact",
    "description": "Plugin adds a Contact tab to Device Details view",
    "category": "Examples",
    "ngModules": [
    "myapp.deviceContact"
    ],
    "js": [
    "deviceContact.module.js",
    "deviceContact.config.js",
    "deviceContact.controller.js"
    ]
  }
                

此时,您可以通过部署它来测试您的应用程序。 选择设备时,应显示新的选项卡"联系人"。

在"联系人"选项卡中显示数据

以前,我们只为"联系人"选项卡设置了一个空视图。 在此步骤中,我们将在视图中显示与设备存储的实际联系信息。 我们将定义联系人数据存储在设备清单中设备的片段"c8y_Contact"中,如下所示:

   
 {
    "c8y_Contact": {
    "name": "John Smith",
    "email": "john.smith@example.com",
    "phone": "123-456-789",
    "address": "Sample Street 11 A"
  }
}
                

将加载函数添加到"deviceContact.controller.js"中,并注入必要的注入依赖关系,如下所示。 该函数获取当前显示的设备($routeParams.deviceId)的详细信息,并将设备的id和"c8y_Contact"片段添加到本地作用域。


  (function() {
    'use strict';

    angular
    .module('myapp.deviceContact')
    .controller('deviceContactCtrl', DeviceContactController);

    DeviceContactController.$inject = [
    '$scope',
    '$routeParams',
    'c8yDevices'
    ];

    function DeviceContactController($scope, $routeParams, c8yDevices) {

    function load() {
    c8yDevices.detail($routeParams.deviceId).then(function (res) {
    var device = res.data;
    $scope.device.id = device.id;
    $scope.device.c8y_Contact = device.c8y_Contact;
  });
}

$scope.device = {};

load();
}

}());
              

使用下面的内容编辑deviceContact.html中的设备联系人视图。

   
    <div class="panel panel-clean">
    <div class="panel-body">
    <form name="contactForm">
    <div class="form-group">
    <label for="contact_name">Name</label>
    <input id="contact_name" type="text" class="form-control" ng-model="device.c8y_Contact.name">
    </div>
    <div class="form-group">
    <label for="contact_email">E-mail address</label>
    <input id="contact_email" type="text" class="form-control" ng-model="device.c8y_Contact.email">
    </div>
    <div class="form-group">
    <label for="contact_phone">Phone</label>
    <input id="contact_phone" type="text" class="form-control" ng-model="device.c8y_Contact.phone">
    </div>
    <div class="form-group">
    <label for="contact_address">Address</label>
    <input id="contact_address" type="text" class="form-control" ng-model="device.c8y_Contact.address">
    </div>
    </form>
    </div>
    </div>
              
允许用户保持数据

完成以下步骤后,您将能够保存以新联系表单输入的数据。

更新"deviceContact.controller.js"中的控制器,还通过添加另一个注入依赖项和下面的内容刚好在加载函数的结束大括号之后保存数据。 "c8yDevices.save"是存储使用QuarkIoE REST API的设备的库函数。 "c8yAlert.success"是一个库函数,在用户界面的顶部显示一个绿色确认框。


    (function() {
      'use strict';

      angular
      .module('myapp.deviceContact')
      .controller('deviceContactCtrl', DeviceContactController);

      DeviceContactController.$inject = [
      '$scope',
      '$routeParams',
      'c8yDevices',
      'c8yAlert'
      ];

      function DeviceContactController($scope, $routeParams, c8yDevices, c8yAlert) {

      function load() {
      c8yDevices.detail($routeParams.deviceId).then(function (res) {
      var device = res.data;
      $scope.device.id = device.id;
      $scope.device.c8y_Contact = device.c8y_Contact;
    });
    }

    function save(device) {
    c8yDevices.save(device).then(onSave);
    }

    function onSave() {
    c8yAlert.success('Contact information successfully saved!');
    }

    $scope.save = save;
    $scope.device = {};

    load();
    }

    }());
              

在设备联系人视图中添加"保存更改"按钮。 将下面的div粘贴到deviceContact.html中关闭表单标记之前。 该按钮将触发我们刚定义的save函数。

    
  <div>
  <a href="" class="btn btn-primary" ng-click="save(device)" ng-disabled="contactForm.$invalid">Save changes</a>
  </div>
              

现在你的插件完成了! 部署您的插件,在Web浏览器中打开您的应用程序,然后单击设备以查看新的"联系人"选项卡。