简介

在开发UI5页面时，仅遵循SAP提供的标准控件总是非常困难的。有时我们可能需要有自己的控件，这在UI5库中是不可用的。其中一个控件是一个看起来像KPI磁贴的磁贴容器。在这里，在这个博客中，中国云，我试图解释如何创建一个自定义的tile容器，它可以用于桌面UI5仪表板和自定义FIORI应用程序？

关于我们要创造什么，美国云服务器，没什么可说的。有时，屏幕截图不仅仅是文字

只是一个边框上有一点阴影的框，一个标题栏和一个内容窗格，我们可以在其中放置平铺内容。

控件需要什么

要创建这样一个控件，我们只需要一些HTML编码和CSS条目。下面是我用来创建这个框的CSS代码

（感谢w3schools提供的CSS）

如何动态创建控件

SAPUI5为我们提供了扩展任何现有控件或创建自己控件的功能。我们在UI中看到的所有控件都是从名为Control的基本组件扩展（或继承）的(sap.ui.core.控制）。因此，在创建控件时，我们应该扩展控件基组件。

下一步是了解控件的属性和聚合（以及事件，如果有的话）。在我们的例子中，它有一个属性，那就是标题文本（id属性将默认从控件继承，不用担心）。在我们的例子中，我正在使瓷砖背景颜色动态化。

第三个也是非常重要的部分是渲染器。renderer函数应该呈现我们在控件中定义的UI5元数据，以便在运行时生成相应的HTML标记。记住，小程序建站，JavaScript和XML都不能在屏幕上显示控件，只有HTML可以，我们将直接转到编码部分

writeControlData方法是必需的，因为它向div提供id信息。该id可以手动传递，也可以由呈现器自身自动生成。如果没有此语句，则设置后无法动态更新互动程序内容或标题栏。

WriteClasses方法会将css类信息（如果有的话）写入关联的div内容。

WriteStyles方法能够分配或链接关联css类的css属性。在我们的例子中，box是具有属性背景的类。动态地，我们可以通过指定background属性来改变背景。

渲染后您将得到什么

一旦渲染完成，淘客查询，当我们传递控件标题和内容时，它将在HTML DOM树中创建相应的DOM对象。

在视图中使用控件：

where chart（）函数返回一个条形图有数据的图表。您可以根据需要实现width属性和其他css属性。

现在，电梯物联网，我们的UI5 tile看起来像，