Repeater
Plataformas | Apps móviles |
Sistemas operativos |
El componente Repeater es un componente contenedor que permite crear diseños de forma eficiente y eficaz mientras se utilizan datos dinámicos a través de una array. Consta de dos componentes, el Repeater y el Repeater Item (su componente hijo principal), que representa la estructura que se repite un número específico de veces.
El número de veces que se repite el elemento depende de la información configurada en el array que invoca, es decir, dependiendo de los datos del array y del usuario de la app, el Repeater puede mostrar información diferente en la app publicada. A diferencia de otros componentes utilizados para crear diseños con disposición de información específicos, el Repeater te permite enumerar elementos utilizando la misma estructura de forma repetitiva y utilizar arrays.
La característica dinámica del Repeater se refiere al hecho de que permite configurar una sola estructura y mostrar información diferente para cada usuario de la app. Esto deriva del uso de un array, que contiene información configurada que le permite personalizar la información que se muestra a cada usuario de acuerdo con su perfil. La información personalizada puede referirse a diferencias en la lógica o la apariencia de los datos. Además, si necesitas realizar cambios en la información que se muestra en la app, los cambios deben aplicarse al array y no necesitarás modificar la configuración del Repeater en el editor de pantallas.
Dependiendo de los requisitos del proyecto, puedes utilizar una de las tres estructuras que puede tener el Repeater: grilla, horizontal o vertical. Por ejemplo, puedes utilizar la estructura de grilla para crear un menú principal con las transacciones que puede realizar el usuario de la app, la estructura vertical para mostrar la lista de últimas transacciones o la estructura horizontal para mostrar opciones de pago con diferentes medios (por ejemplo, tarjeta de crédito o tarjeta de débito).
Sugerencia
Solo deberías utilizar un componente Repeater si necesitas obtener información de un array.
El principal beneficio de este componente es que hace que la construcción sea eficiente donde se necesita repetir una estructura, y ágil ya que utiliza un array para agregar información de manera dinámica a la estructura. Además, simplifica la vista de árbol, dado que la estructura principal se configura una vez, y facilita la actualización de los componentes cuando sea necesario, ya que deberás realizar los cambios en una sola estructura.
Para usar el Repeater en el editor de pantallas, debes agregar el componente Repeater Item al canvas y, a continuación, agregar el componente Repeater Item dentro del Repeater. Solo tienes que agregar y configurar un componente Repeater Item y, en función de la configuración tanto del Repeater como del Repeater Item, el resto de la grilla se dibujará en la app.
Importante
El componente Repeater solo se puede agregar dentro de un componente Panel o Flex Container. Como buena práctica, agrega el Repeater dentro de un Flex Container para comenzar a construir la pantalla.
Cómo usar un componente Repeater en tu app
Esta sección incluye un caso de uso que explica cómo debes usar y configurar un componente Repeater para cumplir con una solicitud realizada por GoldBank, tu cliente.
GoldBank te pide que rediseñes el menú principal de servicios dentro de la página de inicio de la app. Esta solicitud implica agregar una nueva pantalla, con un menú de grilla que contiene todas las transacciones (Pay with QR, Withdrawal, Transfer) que pueden realizar los usuarios de la app. Además, GoldBank especificó que los servicios que aparecerán en la app dependerán del perfil de usuario de la app: la definición del perfil la realiza el cliente. El fondo de la pantalla debe ser el mismo en toda la app, un tono específico de gris (##f2f2f2), pero cada cuenta debe mostrarse sobre un fondo blanco y tener esquinas redondeadas. Cada transacción debe contener un icono y un texto que represente la acción que el usuario puede ejecutar.
Para este ejemplo, el caso de uso solo le dará instrucciones sobre cómo construir y configurar el menú principal de la pantalla, que contiene el componente Repeater. Consulta las instrucciones a continuación para obtener más información sobre cómo configurar la pantalla de acuerdo con los requisitos del cliente.
Una vez obtenida la información sobre los requisitos del proyecto y el diseño de la pantalla, se debe establecer el array que contendrá la información que será consumida por el componente Repeater.
En el Overview, dirígete a Branch Edition > Views.
En la pestaña Lambda processes, haz clic en + New lambda process.
Configura los ajustes del proceso:
En el campo Name, escribe Array_mainmenu .
En el campo Description, introduce Array that contains the data that will appear in the main menu of the homepage.
En On start, comienza a configurar el proceso:
Ve a la lista de bloques y haz clic en Arrays.
Haz click en Table y arrastra y suelta el bloque Save array with table.
En el campo en blanco, escribe 1001, que representa el número que identificará el array cuando se invoque desde el editor de pantallas.
En el bloque save array, introduce el bloque array ofy luego agrega 7 más array of, donde añadirás la información que representa los iconos y etiquetas de texto que aparecerán en el menú principal de la página de inicio de la app.
Teniendo en cuenta la información proporcionada por el cliente, configura los campos de cada fila del array. La información del array aparece representado en columnas. En este caso, la primera columna representa el orden de los datos, la segunda representa los nombres de las transacciones disponibles para los usuarios y la tercera representa los nombres que identifican los iconos que aparecen para cada transacción. Ingresa la información como se muestra en la imagen a continuación.
Importante
Los iconos deben cargarse en el inicio del proyecto en la sección Assets (Global Design > Assets). Luego, pueden ser invocados por su nombre.
Para obtener más información sobre los procesos lambda y cómo configurarlos, lee Procesos Lambda .
Nota
Los datos del array invocados desde el editor de pantallas aparecerán en la pantalla cuando se publique la app. La información y los iconos no se mostrarán en el editor de pantallas.
Como mejor práctica, debes agregar el Flex Container padre al canvas y configurarlo. Dentro de este Flex Container, agregarás componentes Flex Container hijos que representarán las secciones dentro de la pantalla. En este caso, agregará solo un Flex Container hijo, donde incluirás el componente Repeater.
Ve al panel izquierdo y dirígete a la pestaña Components. Escribe Flex Container en la barra de búsqueda o encuéntralo en la lista. Luego, arrástralo y suéltalo en el canvas para usarlo como Flex Container principal para contener cualquier otro Flex Container dentro de él.
Dirígete al panel derecho y cambia su atributo Name a Flx_Main.
Dirígete a la sección de posición y alineación. Elimina los valores de los atributos X e Y. En los atributos W y H, introduce 100 y selecciona % (porcentaje) como unidad de medida, de modo que el componente Flex Container cubra toda la pantalla (tanto en longitud como en ancho).
De acuerdo con el diseño del proyecto, dirígete a la sección Background e introduce un color para el fondo del Flex Container. En este caso, introduce #f2f2f2, que es el código hexadecimal que representa el tono de gris definido para la app según los requisitos del cliente.
Sugerencia
Como mejor práctica, ingresa el código hexadecimal para el color requerido en lugar de seleccionar un color del selector de color.
Dirígete a la sección Layout. En la sección Children, selecciona Wrap para que, si los componentes dentro del Flex Container exceden su ancho máximo, se coloquen debajo del resto de los componentes. Luego, en las opciones de wrapping que aparecen, selecciona stretch.
En la subsección Direction, selecciona Column para que los componentes dentro del Flex Container se extiendan desde la parte superior a la inferior del contenedor.
En la subsección Align, selecciona stretch, de modo que los componentes dentro del Flex Container estén alineados y se extiendan por todo el espacio del contenedor.
En la subsección Justify, selecciona start, para que los componentes dentro del Flex Container se ubiquen en la parte superior del contenedor.
En la sección Children, selecciona Wrap para que, si los componentes dentro del Flex Container exceden su ancho máximo, se coloquen debajo del resto de los componentes. Luego, en las opciones de wrapping que aparecen, selecciona stretch.
Dirígete a la sección Size & Position. En el campo Position type, selecciona Relative.
Sugerencia
Como mejor práctica, el Flex Container padre, los Flex Container hijos y los componentes hijos deben tener el tipo de posición definido en Relative. Con el posicionamiento establecido en Relative, los componentes hijos se alinean uno tras otro según el diseño del Flex Container padre (ya sea en columnas o filas). Además, si se modifica el tamaño de un componente hijo, el posicionamiento relativo permitirá que todos los componentes hijos se reorganicen automáticamente, para evitar la superposición entre ellos.
Configura los dos primeros contenedores hijos que aparecerán en la sección superior de la pantalla. El primer Flex Container contendrá el mensaje Hello! para el usuario de la app y dos iconos que, al hacer clic, permiten al usuario cambiar de cuenta o ir a la página de inicio, respectivamente. Para los fines de este ejemplo, las instrucciones a continuación solo explican cómo agregar el primer Flex Container, pero no su contenido. El segundo Flex Container hijo incluirá el componente Repeater.
Ve al panel de la izquierda y añade un segundo Flex Container, que incluirá el mensaje de bienvenida y los iconos. Cambia el nombre a FlexData2.
Dirígete a la sección de posición y alineación. Introduce 100 en el atributo width (W) e introduce 17 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Spacing. Ingresa 13 en el relleno superior y 12 en el relleno inferior. A continuación, introduce 18 en los rellenos izquierdo y derecho.
Dirígete al panel izquierdo y agrega un Flex Container, que incluirá los detalles de la cuenta. Cambia el nombre a FlxMenu.
Dirígete a la sección de posición y alineación. Introduce 100 en el atributo width (W) e introduce 65 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Dirígete a la sección Spacing. Ingresa 5 en el margen superior y 8 en el margen inferior. A continuación, introduce 10 en el relleno inferior.
Dirígete a la sección Border y elimina el número 1 que aparece por defecto.
Dirígete a la sección Layout. En la subsección Direction, haz clic en Row. En la subsección Align, selecciona center, En la subsección Justify, selecciona center. En la sección Children, selecciona Wrap y luego Start.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Configura el Repeater que establecerá la estructura de la grilla que representa el menú principal en la página de inicio.
Ve al panel izquierdo y dirígete a la pestaña Components. Escribe Flex Container en la barra de búsqueda o encuéntralo en la lista. Luego, arrástralo y suéltalo en el canvas para usarlo como contenedor y luego agrega el Repeater Item dentro de él.
Ve al panel derecho y cambia el nombre a RptrMain.
Dirígete a la sección de posición y alineación. Introduce 100 en el atributo width (W) e introduce 100 en el atributo height (H). Para ambos atributos, selecciona % como unidad de medida.
Importante
En el caso del componente Repeater, la configuración de la altura (H) es obligatoria. Dado que el contenido de la estructura del Repeater es dinámico, si la información del elemento del Repeater ocupa más espacio que la altura definida, el componente permitirá automáticamente al usuario desplazarse hacia abajo sin configurar otros atributos. Como resultado, el usuario de la app podrá desplazarse hacia abajo para ver todos los datos que contiene.
Dirígete a la sección Spacing. En el área Padding, escribe 10 en el relleno superior, 18 en el relleno inferior y 30 en los rellenos izquierdo y derecho.
Nota
La definición de márgenes y rellenos depende del diseño de la app y de las especificaciones dadas por los diseñadores de la app desde el principio del proyecto.
Dirígete a la sección Layout.
En la sección Layout, selecciona Grid, de modo que la estructura del Repeater se muestre como un menú de grilla.
En el campo Columns, escribe 3 de modo que la grilla contenga tres columnas.
En el campo Column Gap, escribe 8px, de modo que el espacio entre las tres columnas sea de 8px.
En el campo Row Gap, escribe 8px, de modo que el espacio entre las filas del menú de la grilla es de 8px.
Nota
En función de la configuración de la sección Spacing y de los valores introducidos en la sección Layout, el Repeater mostrará el número de elementos que caben en él, considerando el espacio que tiene con respecto al Flex Container en el que está incluido.
Ve a la sección Border. En el campo Color introduce el código hexa #192a60. En el campo Width, introduce 2 y deje seleccionada la unidad de medida px.
Dirígete a la sección Basic. En el campo Array, escribe 1001, que es el ID del array que contiene la información relacionada con las transacciones que aparecerá disponible en el menú de la grilla de la app.
Dirígete a la sección Size & Position. En el campo Position type, selecciona Relative.
Configura el elemento que representa cada uno de los elementos que se incluirán en el menú de grilla. Este componente solo debe configurarse una vez y, en función de su configuración, la app activará los datos dinámicos tal como se definen en el array invocado.
Ve al panel izquierdo y dirígete a la pestaña Components. Escribe Repeater Item en la barra de búsqueda o encuéntralo en la lista. A continuación, arrástralo y suéltalo en el componente Repeater.
Ve al panel derecho y cambia el nombre a RptrItem.
Dirígete a la sección de posición y alineación. Introduce 29 en el atributo de altura (H) y selecciona % como unidad de medida.
Ahora, tienes que configurar los dos componentes que representan las transacciones disponibles en el menú de la grilla: un icono y una etiqueta de texto. Estos componentes invocarán el array configurado previamente y mostrarán los datos cuando se publique la app. Además, dado el propósito del Repeater, el resto de los elementos dentro del Repeater también utilizará la información dinámica especificada en el array.
Importante
Solo tienes que configurar un Repeater Item por estructura de Repeater.
Configura el icono que aparecerá dentro del Repeater Item. En la app, el icono incluirá la imagen relacionada con la transacción que el usuario puede ejecutar. La etiqueta utilizará la información obtenida del array definido.
Dirígete al panel izquierdo. Escribe Icon y arrastra y suelta el componente dentro del flex container en el canvas.
Sugerencia
Dirígete a la pestaña Treeview para asegurarte de que los componentes hijos se coloquen correctamente dentro de cada Flex Container.
Dirígete a la sección de posición. Elimina los valores de los atributos X e Y. Entrar 5 en el campo Y y deje seleccionado % como unidad de medida. A continuación, introduce 25 en el atributo width (W) e introduce 25 en el atributo de altura (H) y selecciona px como unidad de medida.
Dirígete a la sección Basic. En el campo Icon, escribe #F{3}. Este número representa la columna del array desde donde se deben obtener los datos. Dado que el Repeater Item se posiciona en el primer elemento de la estructura del Repeater, el sistema utilizará el primer valor definido en el array en la tercera columna (de arriba a abajo de la lista). A continuación, el resto de los elementos mostrarán la información del array según su ubicación dentro de la estructura del Repeater y la columna especificada. Por ejemplo, el tercer elemento de la estructura del Repeater mostrará los valores establecidos en la tercera fila y la tercera columna del array.
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
Configura la etiqueta que aparecerá dentro del Repeater Item. En la app, la etiqueta incluirá el nombre de la transacción que el usuario puede ejecutar. La etiqueta utilizará la información obtenida del array definido. Por ejemplo Pay with QR.
Dirígete al panel izquierdo. Escribe Text label y arrastra y suelta el componente dentro del componente Repeater Item en el canvas.
Sugerencia
Dirígete a la pestaña Treeview para asegurarte de que los componentes hijos se coloquen correctamente dentro de cada Flex Container.
Ve al panel derecho y cambia el nombre a TxtLabel.
Dirígete a la sección de posición. Elimina los valores de los atributos X e Y. Ingresa 20 en el campo Y y deja seleccionado % como unidad de medida. Ingresa 100 en el atributo width (W) y selecciona % como unidad de medida.
Dirígete a la sección Basic. En el campo Value, ingresa #S{2}. Este número representa la columna del array desde donde se deben obtener los datos. El sistema utilizará el primer valor definido en el array en la tercera columna (de arriba a abajo de la lista).
Dirígete a la sección Size & Position. En el atributo Position Type, selecciona Relative.
En la sección Margins & Alignment, selecciona center.
Ve a la sección Text. En el campo Font Size, ingresa 10px. En el campo Font Family selecciona InterBold. A continuación, ve al campo Color, haz clic en el selector de color e introduce #4C4C4C en el campo Hexa.
Especificaciones de atributos
Consulta la sección a continuación para obtener más información sobre todos los atributos del panel derecho que aparecen para la configuración cuando arrastras y sueltas un componente Repeater en el canvas.
Importante
Esta sección es solo para fines informativos. Configura los atributos del componente según los requisitos de tu proyecto.
Repeater
En las secciones siguientes se describen las secciones disponibles para la confirmación del componente Repeater.
Importante
Para el componente Repeater, las únicas unidades de medida que se deben utilizar en el panel derecho son % y px.
Pestaña Design.
Nota
Los atributos de alineación no se pueden configurar.
En primer lugar, debes cambiar el nombre del Repeater para representar su posición dentro del diseño de la pantalla. Por ejemplo, si es el repetidor principal, el nombre puede ser Rptr_main.
Luego, puedes configurar los atributos de posición, que afectan a la posición de todos los componentes hijos dentro de él, como se especifica en la tabla siguiente.
X | Posición del Repeater en el canvas con respecto al eje x. Introduce un número en el campo y, a continuación, seleccione la unidad de medida % o px. |
Y | Posición del Repeater en el canvas con respecto al eje x. Introduce un número en el campo y, a continuación, seleccione la unidad de medida % o px. |
R | Ángulo con el eje vertical en el que se sitúa el componente Repeater. Este atributo no debe configurarse para el componente Repeater. |
W | Ancho del componente con respecto al tamaño de la pantalla. |
H | Altura del componente con respecto al tamaño de la pantalla. |
Flat | Haz clic en el botón de opción Flat para establecer un único color para el fondo del componente. Para establecer el color, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el ícono cuadrado de bordes redondeados para abrir el selector de color. En el selector de color, introduce el código de color hexadecimal. También puedes establecer el porcentaje de opacidad fuera del selector de color en el campo Opacity. Si anteriormente seleccionaste un color en el selector de color, la opacidad se establece en 100 de forma predeterminada. Si no se seleccionó ningún color, este campo está vacío. Para modificarlo, haz clic en el campo e introduce el porcentaje deseado. SugerenciaComo mejor práctica, si un color ya está definido, el campo de opacidad no debe modificarse. |
Gradient | Haz clic en el botón de opción Gradient para establecer un degradado de color para el fondo del componente. Haz clic en cada uno de los íconos cuadrados para abrir el selector de color. En el selector de color, introduce el código de color hexadecimal en el campo Hexa. Haz clic en Switch direction para invertir el orden de los colores seleccionados para el degradado. Haz clic en |
Background Image | Este atributo no debe utilizarse para el componente Repeater. |
Nota
Si seleccionas el fondo Flat, no podrás elegir el fondo Gradient y viceversa. La opción Background Image está disponible en ambos casos.
Pestaña Actions
Repeater Item
Design
Nota
Los atributos de alineación no se pueden configurar.
En primer lugar, debes cambiar el nombre del Repeater para representar su posición dentro del diseño de la pantalla. Por ejemplo, si es el repetidor principal, el nombre puede ser Rptr_main.
Luego, puedes configurar los atributos de posición, que afectan a la posición de todos los componentes hijos dentro de él, como se especifica en la tabla siguiente.
X | Posición del Repeater en el canvas con respecto al eje x. Introduce un número en el campo y, a continuación, seleccione la unidad de medida % o px. |
Y | Posición del Repeater en el canvas con respecto al eje x. Introduce un número en el campo y, a continuación, seleccione la unidad de medida % o px. |
R | Ángulo con el eje vertical en el que se sitúa el componente Repeater. Este atributo no debe configurarse para el componente Repeater. |
W | Ancho del componente con respecto al tamaño de la pantalla. ImportanteSi construyes un componente Repeater con una estructura de grilla, no debes configurar el ancho, ya que el ancho del componente está definido por el ancho del Repeater y, si está configurado, el valor no se tendrá en cuenta. |
H | Altura del componente con respecto al tamaño de la pantalla. ImportanteLa altura definida en este atributo dependerá de la altura definida en el Repeater (componente padre). Por ejemplo, si configuras la altura del Repeater Item en 20% y configuraste previamente la altura del Repeater padre en 50px, la altura del elemento será del 20% sobre los 50px del Repeater. |
Flat | Haz clic en el botón de opción Flat para establecer un único color para el fondo del componente. Para establecer el color, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el ícono cuadrado de bordes redondeados para abrir el selector de color. En el selector de color, introduce el código de color hexadecimal. También puedes establecer el porcentaje de opacidad fuera del selector de color en el campo Opacity. Si anteriormente seleccionaste un color en el selector de color, la opacidad se establece en 100 de forma predeterminada. Si no se seleccionó ningún color, este campo está vacío. Para modificarlo, haz clic en el campo e introduce el porcentaje deseado. SugerenciaComo mejor práctica, si un color ya está definido, el campo de opacidad no debe modificarse. |
Gradient | Haz clic en el botón de opción Gradient para establecer un degradado de color para el fondo del componente. Haz clic en cada uno de los íconos cuadrados para abrir el selector de color. En el selector de color, introduce el código de color hexadecimal en el campo Hexa. Haz clic en Switch direction para invertir el orden de los colores seleccionados para el degradado. Haz clic en |
Background Image | Este atributo no se debe utilizar para el componente de Repeater Item. |
Nota
Si seleccionas el fondo Flat, no podrás elegir el fondo Gradient y viceversa. La opción Background Image está disponible en ambos casos.
Pestaña Actions
Pestaña Advanced.
No hay atributos disponibles para configurar en la pestaña Advanced para el componente Repeater Item.