在移动应用程序中,Image 组件的工作流程与Web应用程序的工作流程有些不同。这篇文章详细描述了如何在移动应用程序中使用 Image组件在移动应用程序中的应用。在重复的元素中,如元素的 ListGrid组件,从数据模型中加载 Image从数据模型中加载并不明确,需要使用BP的一定程序来加载。

Image 组件在重复元素中的使用 ( )List/Grid

让我们看一个例子,我们有航班表,每个航班对象都有自己的封面,由 ImageFile字段[file].

0_dataModel

想象一下,航班列表是用 List组件。该组件的每个元素 List组件--是一个 Card元素,包含 Image和一些其他组件来显示相关的航班信息。在用户界面设计器中,它看起来是这样的。

uiux

首先。 Data Source必须为父组件(这里是指List组件)。

01_select_from_model

为了将数据从数据库上传到 Image组件,我们需要为该组件创建一个新的业务流程。 Image组件创建一个新的业务流程。

02_openBP

所需的BP始于在应用程序中创建一个图像元素,即 onCreate触发器。首先,有必要接收对应于给定图像的数据模型对象。要做到这一点,你可以使用已经被父元素接收的数据(List在这种情况下)。要从一个 List的数据,可以使用 List Get Data块被使用。

03_bp_1

我们正在建立的BP的逻辑如下:如果其中一个 Data数组元素(flight模型对象)有一个标识符(ID) 等于 Record ID,那么我们就找到了我们需要的飞行表元素。然后,图像文件 ID从飞行模型对象中取出,并加载到图像组件中,其中包括所需的 Widget ID.

为了遍历数组中的所有元素 Data数组中的所有元素,使用 For each loopBP块被使用,在循环的主体中,数组中的每个元素都用 Data数组的每个元素都使用 Expand Flight块展开。如果 Flight ID= Record ID那么,文件标识符将被取走,并使用 ImageFile文件标识符,文件对象就会被加载到 Server request GET /_files/:id/download/块加载。相应的BP的例子如下。

03_bp_2

在下一步,图像文件被扩展,使用 Expand file块将字节数组作为输入传给 Image Update Properties块的 Data属性。还需要指定 Widget ID的特定图像元素,将BP开头的onCreate块的值传给它。BP的最后部分的结果显示在下面的例子中。

03_bp_3

在最后,该 Break Loop块的使用是为了避免徒劳地遍历数组的剩余元素。

break loop

从用户的智能手机的文件系统中加载一个图片

考虑一个加载用户资料头像的例子。网页界面由一张图片和一个启动BP的按钮组成,看起来像这样。

11_ui

然后,相关的BP允许用户从其设备中选择文件,并使用 Select Files块。如果文件被成功选择,那么带有 index = 0的元素被取走。相应的BP看起来像。

12_bp_1

产生的文件元素的 Files数组中产生的文件元素必须被上传到网络应用程序服务器以进一步使用(Server request POST /_files/).如果请求成功,在该块的输出的文件对象被传递到 Server request POST /_files/块的输出的文件对象被传递到 Expand file块的输入,得到一个 Bytes Array块的输入,并将其传递给 Image Update Properties块中的 Data属性中。

13_bp_2

Was this article helpful?

AppMaster.io 101 速成班

10 模块
2 周数

不知道从哪里开始?通过我们的初学者速成课程,从A到Z探索AppMaster。

开始课程
Development it’s so easy with AppMaster!

需要更多帮助?

在我们专家的帮助下解决任何问题。节省时间并专注于构建您的应用程序。

headphones

联系支持

告诉我们您的问题,我们会为您找到解决方案。

message

社区聊天

在我们的聊天中与其他用户讨论问题。

加入社区