在OpenUI5社区中，我们启动了一个名为UI5Lab的新项目。

UI5Lab是一个汇集力量和开发UI5社区驱动的定制存储库的地方，伴随着充满活力的交流。在Slack Channel#UI5Lab中讨论了这里要放置的内容。您可以加入Slack的邀请链接。

我想创建一个完美的示例，怎么做淘客推广，可以一步一步地解释如何创建一个自定义控件，从ground zero包装外部库。这就是为什么我选择集成davidshimjs qrcodejavascript库的原因GruntJS公司鲍里斯grunt-openui5

NPM

NPM是JavaScript的包管理器，也是世界上最大的软件注册中心。发现可重用代码包 - 并以强大的新方式组装它们。

我们将使用NPM下载和同步开发、构建和测试工作所需的所有依赖项。

GruntJS

GruntJS是一个基于NodeJS的任务运行程序，它将允许您自动化所有工作。在执行缩微、编译、单元测试、linting等重复性任务时，十大淘客软件排名，您需要做的工作越少，您的工作就越容易。

BowerJS

Bower类似于NPM，它是一个web包管理器。它帮助您管理包含HTML、CSS、JavaScript、字体甚至图像文件的组件。在本例中，我们使用bower下载openui5库，在本地测试我们的自定义控件。

grunt-openui5

它是由Matthias Oßwald开发的grunt插件，允许您配置要生成的任务，测试并缩小您的openui5应用程序/库。

对于本例，云服务器多少钱，我选择了QRCodeJS，它是一个跨浏览器的javascript QRCode生成器，没有其他javascript依赖项。

这就是我选择它的原因：

它有一个NPM库，但在最坏的情况下，您可以克隆repo并上传自己的没有jQuery/其他依赖项：这很重要，因为您不想与不兼容作斗争。浏览器兼容性：E6~10、Chrome、Firefox、Safari、Opera、Mobile Safari、Android、Windows Mobile等。个性化QRCode有很多选项：text、width、height、colorDark、colorLight、correctLevel

自定义控件是一个JavaScript对象，它有两个特殊部分（元数据和渲染器）和许多实现控件功能的方法。

元数据

元数据部分定义了数据结构，从而定义了控件的API控制。有了这个关于控件的属性、事件和聚合的元信息，OpenUI5会自动创建setter和getter方法以及其他可以在应用程序中调用的方便函数。

属性由名称和类型定义。此外，还可以为属性定义默认值。

类型：控件属性的数据类型；SAPUI5提供自动类型验证。例如，字符串属性的有效类型为string（默认值），数字属性的有效类型为int或float，数组和sap.ui.core.CSSSize用于自定义定义的类型。defaultValue：应用程序未设置值时设置的默认值；如果未定义默认值，则属性值未定义。

聚合是一种强关系，同时管理相关控件的生命周期，例如父控件被销毁时，相关控件也被销毁。此外，一个控件只能分配给一个聚合，如果它被分配给第二个聚合，它将自动从上一个聚合中删除。

关联是一种弱关系，不管理生命周期，可以多次定义。为了明确区分，关联只存储ID，而聚合存储对控件的直接引用。在本例中，我们不指定关联，服务器云，因为我们希望内部控件由父控件管理。

聚合和关联由它们的名称和配置对象定义，配置对象包含以下信息：

类型：类型应该是元素或控件的子类；默认值为sap.ui.core.控制multiple：定义是0..1聚合还是0..n聚合；聚合的默认值为true=0..n，关联的默认值为falsesingularName：对于0..n聚合，聚合名称通常是复数形式，但是在需要单数形式的地方会创建某些方法（例如，addWorksetItem}用于"worksetItems"聚合）。

根据多重性，在运行时会自动创建多个方法，例如getWorksetItems、insertWorksetItem，addWorksetItem、removeWorksetItem、removeAllWorksetItems、indexOfWorksetItem、destroyWorksetItems。这些方法有一个默认实现，它做了所有事情来正确处理聚合，但是它们可以被控件实现覆盖和扩展。

如果您想将一个聚合标记为默认聚合，以便能够在XML视图中省略聚合标记，您可以通过将defaultAggregation属性设置为聚合的名称来完成此操作

事件允许您公开自定义控件将触发哪些事件以及将随附哪些参数。

对于每个事件，将创建用于注册、取消注册和触发事件的方法。

您可以收集有关元数据部分在这里。

渲染器

渲染器定义了HTML结构，每当控件在视图中实例化时，它将被添加到应用程序的DOM树中。它通常最初由OpenUI5的核心调用，并且每当控件的属性发生更改时都会调用它。render函数的参数oRM是OpenUI5 render manager，可用于将字符串和控件属性写入HTML页。

您有两个不同的选项来定义渲染器：