En las aplicaciones móviles el flujo de trabajo del componente Image es un poco diferente del flujo de trabajo en las aplicaciones web. Este artículo describe en detalle cómo utilizar el componente Image en una aplicación móvil. En los elementos que se repiten, como los elementos de List y Grid la carga de los componentes Image del modelo de datos no es inequívoca y requiere un determinado procedimiento de carga mediante el BP.
Image uso de componentes en elementos repetitivos (List/Grid)
Veamos un ejemplo en el que tenemos la tabla de vuelos y cada objeto de vuelo tiene su propia portada representada por el ImageFile campo [file].
Imaginemos que la lista de vuelos se representa con el componente List componente. Cada elemento del List componente - es un Card componente que contiene Image y algunos otros componentes para mostrar la información relevante de los vuelos. En el diseñador de interfaz de usuario se ve de la siguiente manera:
En primer lugar Data Source tiene que ser especificado para el componente padre (List en este caso).
Para cargar los datos de la base de datos al Image componente, necesitamos crear un nuevo proceso de negocio para el Image componente.
El BP requerido comienza con la creación de un elemento de imagen en la aplicación, a saber, el onCreate trigger. En primer lugar, es necesario recibir el objeto del modelo de datos correspondiente a la imagen dada. Para ello, se pueden utilizar los datos que ya recibe el elemento padre (List en este caso). Para obtener los datos de un List, se utiliza el bloque List Get Data se utiliza el bloque
La lógica del BP que estamos construyendo es la siguiente: si uno de los Data elementos del array (flight objeto modelo) tiene un identificador (ID) igual a Record IDentonces hemos encontrado el elemento de la tabla de vuelo que necesitamos. Entonces, el archivo de imagen ID se toma del objeto modelo de vuelo y se carga en el componente Imagen con el Widget ID.
Para iterar sobre todos los elementos del Data array, se utiliza el bloque For each loop y, en el cuerpo del bucle, se expande cada elemento de la matriz Data se expande utilizando el bloque Expand Flight bloque. Si Flight ID = Record IDentonces se toma el ImageFile se toma el identificador del archivo y se carga el objeto archivo utilizando el Server request GET /_files/:id/download/ bloque. A continuación se muestra un ejemplo del BP correspondiente.
En el siguiente paso, el archivo de imagen se expande utilizando el bloque Expand file para pasar la matriz de bytes como entrada al bloque Image Update Properties del bloque Data del bloque. También es necesario especificar el Widget ID de un elemento de imagen específico en la hoja, pasándole el valor del bloque onCreate al principio del BP. El resultado de la última parte del BP se muestra en el siguiente ejemplo:
Al final el bloque Break Loop se utiliza para no iterar sobre los elementos restantes del array en vano.
Carga de una imagen desde el sistema de archivos del smartphone del usuario
Consideremos un ejemplo de carga de un avatar de perfil de usuario. La interfaz web consiste en una imagen y un botón que lanza el BP, y tiene este aspecto:
A continuación, el BP correspondiente permite al usuario seleccionar los archivos de su dispositivo con el uso de Select Files bloque. Y si los archivos fueron seleccionados con éxito, se toma el elemento con index = 0 es tomado. El BP correspondiente se ve así:
El elemento de archivo resultante del Files array debe ser subido al servidor de la aplicación web para su posterior uso (Server request POST /_files/). Si la solicitud tiene éxito, el objeto archivo a la salida del bloque Server request POST /_files/ se pasa a la entrada del bloque Expand file para obtener un Bytes Arrayque se pasa a la entrada del bloque Image Update Properties en la propiedad Data propiedad.
