在这个博客文章系列中，我想展示如何向saplumira应用程序添加附加功能。我将展示如何使用"复合"组件向Lumira应用程序添加附加功能，在DesignStudio中，只有SDK组件才能完成这项工作。

简介

完成这项工作的基础知识和通用脚本已经在其他一些博客文章中进行了解释（感谢Reiner Hille Doering、Michael Jung等人），但我认为有必要一步一步地展示如何将其结合到我最近为概念验证而创建的一个实际示例中。

目标是要有一个可视化组件，它能够以动态方式显示图像并与图像交互。这意味着图像由数据源驱动，可以过滤和选择，大数据汇总，视觉外观是动态和可配置的。

在第1部分中，我将从头开始开发组件，并将其引入第一个可测试版本。

在第2部分中，我将继续，使组件更灵活，好的云服务器，并向其添加功能，因此，人们最终可以在各种场景中使用它。

准备

开始开发每个组件，返利手游平台，我们需要一些测试数据。我收集了一些迪斯尼卡通人物的图片样本，并将它们放在我的开发系统（"sapdemovm"）tomcat web应用服务器上的web共享上：

然后我创建了一个Excel工作簿，其中包含一些带有图像数据的列，比如ID、名称、，文件名和在浏览器中访问图像的URL：

现在我启动了Lumira发现，并从Excel工作表中创建了脱机数据源：

并将带有数据的文档保存在Lumira Designer中，以备以后用作脱机数据源。

创建复合文件

现在我在Lumira Designer中打开了此文档：

然后我创建了复合称为"动态图像"：

现在我打开复合。在这里我添加了以下技术组件：

一个"组件"技术组件

它可以根据脚本中的数据源动态创建块和图像。

一个"全局脚本对象"技术组件：

它将保存我们稍后创建的脚本。

在布局上我们将使用两个"Adaptive Layout Container"组件、块模板和图像模板组件：

最终布局如下：

我们将使用"Adaptive\u Layout\u MAIN"组件作为容器，在运行时保存包含图像的块，这些块将通过脚本动态创建。模板组件应该隐藏，因为它们只是用作模板，用于设置图像和块的常规属性，云发布，与块的colspan和图像的CSS类类似：

属性将在稍后通过脚本复制到这些模板的新实例中。

创建DataSourceAlias类型的属性"inDataSource"：

这将从应用程序接收数据源，使用该组件并从中接收图像数据。

创建一个全局数组变量（gBlocks）来存储块对象：

它将在以后的脚本中用于存储动态创建的块对象并再次删除它们，在创建新图像之前。

创建一个全局脚本对象：

，在其中创建两个脚本函数：

一个是deleteImages（）函数，用于删除现有图像：

Code

另一个是createImages（）函数，要创建新图像：

代码

使用组合的"初始化时"和"属性更改时"事件中的createImages（）函数，在创建组合或更新属性时触发图像的创建：

代码

（gBlocks全局变量的初始化只需完成一次！）

最后创建一个更新接口函数：

代码

该函数简单地触发createImages（）全局脚本函数，并充当接口，通过脚本从组合体外部触发更新。

创建测试应用程序

现在我们的组合体已经准备好，在文档中创建一个新的应用程序"DYNAMIC\u IMAGES\u APP"以测试结果：

将（脱机）数据源添加到此应用程序：

编辑数据源的初始视图以包含所有可用数据：

添加组合：

将数据源"DS\u 1"绑定到组合的数据源数据绑定属性：

添加标题文本，数据源和维度过滤器组件的交叉表表示。最后将合成的update（）接口函数添加到维度过滤器的"On Apply"事件中：

我们现在已经完成并准备好进行第一次测试运行。

运行

现在运行应用程序：

看起来不错，不是吗？

使用维度过滤器过滤数据源时，动态图像合成会相应更新！

展望

在本系列博文的下一篇博文中，我将展示如何使组件更加灵活，并为其添加选择功能，因此，物联网概念股，我们最终可以在不同的场景和不同的数据源中使用它。

您可以在这里找到本博客系列文章的第2部分：

使用Lumira composites构建有用的组件–动态图像第2部分