大家好，

几个月前，我发布了一个关于sapwebide插件的博客，我创建了这个插件来生成自定义UI5控件。在那个博客中，我还展示了如何使用这个插件创建自定义控件。你可以在这里找到博客：https://blogs.sap.com/2016/11/27/custom-ui5-control-generator-sap-web-ide-plugin/

插件也在SAPStore中，可以免费使用！https://www.sapappcenter.com/p/20553/custom-ui5-control-generator–sap web ide插件–flexso nv

目前该插件非常基本，只能用于创建基本控件。在这个插件中还没有预见到构建高级UI5控件。但仍然，它可以促进你的发展。

在这个博客中，我将向你展示如何创建可以一起使用的UI5控件，自建站平台，企业交流软件，以及我的插件如何帮助你。

作为一个例子，大数据和云计算，我从我在网上找到的一个HTML代码片段开始：

更多HTML片段https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/

我将把这个HTML片段转换成UI5控件。因此，我不得不将HTML分成两部分：

一个列表项控件：一个列表项可以在一个列表中使用零到多次。这应该是通用的，因此它需要一个单独的UI5控件列表的一个控件：这是添加项的位置。这是一个单独的控件，有一个特定的css类用于设计

首先我将开始创建控件，然后我将连接两个控件，最后但并非最不重要的是，我将在视图中使用它们进行绑定。

好的，让我们从项目开始创建一个文件"自定义列表项.js"在文件夹"控制"（你必须创建这个文件夹）

我复制了一个列表的HTML项目的代码段，它看起来像这样：

把它放在生成器插件：

点击转换按钮，使用WebIDE美化功能和改变命名空间关于您的项目名称空间和文件名。

现在为控件文件夹中的列表创建一个javascript文件。

现在我从代码段中获取列表的外部标记：

再次将其放入生成器：

让转换器完成其工作，然后在WebIDE中运行美化器并更改名称空间和控件名称。

我想使用列表项控件在我的列表控件中。我需要手动添加一些代码。在控制发生器中还没有预见到这一部分。在list控件的元数据中，我将添加一个聚合"items"。聚合的定义包含以下属性：

类型：这是可以在聚合中使用的控件的类型。我们想在此CustomList中使用CustomListItem控件。我们使用名称空间+自定义列表项的名称来定义聚合的类型。Multiple：定义在CustomList中可以使用childe控件的次数singularName：引用聚合的一个项

下一步是将聚合"项"集成到list控件的renderer函数中。因此，我添加了一个循环（$.each）来呈现聚合中的所有项。

我还将css包含在我的项目中。只要把它贴在样式表"

在视图中使用控件的第一步是添加对控件所在文件夹的引用，并向其添加命名空间（cust）：

使用命名空间（cust），我现在可以同时使用我的两个控件。首先，大数据前景，我打开"CustomList"的标签。在"CustomList"标记之间，我打开聚合标记"items"。在那里我可以添加"CustomListItem"控件。在"CustomListItem"标记中，我添加了超链接（href1）和图像（src1）的属性。

这是结果：

这一步与前一步类似，但现在我将使用绑定来显示图像和超链接。

在控制器中，我创建了一个带有多个图像和超链接的JSONModel，大量数据，我将其绑定到视图

在视图中，我为"CustomList"中的项目添加了绑定grid"是对JSONModel中数组的引用。

"hyperlink"和"image"是对数组"grid"对象中属性的引用。

这看起来像这样。

你可以在github上找到所有代码：

https://github.com/lemaiwo/CustomControlAggregation

项目预览结果：

https://cdn.rawgit.com/lemaiwo/CustomControlAggregation/6658d9e9/webapp/index.html

你可以做一些真正酷的东西与自定义控件！