Photo
El componente Photo te permite configurar y personalizar una función de cámara para tu pantalla. Para insertar un componente Photo en la pantalla, ve al panel izquierdo en el constructor visual. Recorre la lista de componentes para encontrar el componente Photo o haz clic en la barra de búsqueda y escribe el nombre. A continuación, arrastra y suelta el componente en el canvas y configura sus atributos en el panel derecho.Visual Builder - Left Panel
Importante
El componente Photo solo puede utilizarse en apps móviles (tanto para dispositivos Android como iOS).
Attributes
En el panel derecho, puedes configurar diferentes atributos para personalizar el componente. Consulta Design, Actions y Advanced a continuación para obtener más información.Visual Builder - Right Panel
Design
En la pestaña Design, puedes configurar la información básica del componente seleccionado y los atributos que determinan el aspecto que tendrá el componente en la app. Consulta las secciones a continuación para obtener más información.Design Tab
En esta sección, rellena los detalles básicos del componente seleccionado y los atributos de alineación y tamaño. Esta sección está disponible para cada componente arrastrado al lienzo. Para saber más, lee Design.Design Tab
En esta sección, puedes definir el estilo de uno o varios bordes de tu componente.
Para fijar todos los bordes del componente, haz clic en el icono de eslabón de cadena situado en el centro del cuadrado. La cadena aparece intacta y todos los bordes del cuadrado se vuelven azules.
Para configurar los atributos de los bordes individualmente, haz clic en el borde deseado del icono cuadrado; el borde seleccionado se vuelve azul y el icono de eslabón de cadena aparece roto. Recuerda configurar los atributos para cada borde que desee personalizar.
A continuación, debes establecer el color y la anchura del borde o bordes que desees configurar. Consulta la tabla a continuación para obtener más información.
Color | Color del borde. Para establecer el color, haz clic en el campo y escribe el código hexadecimal del color o haz clic en el icono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. |
Width | Ancho del borde. Escriba un número para establecer el ancho. Para cambiar la unidad de medida, haz clic en la unidad de medida seleccionada en el campo Width (texto de color azul) y selecciona una opción del menú desplegable. |
En esta sección, puedes configurar el radio para definir la redondez de las esquinas del componente.
Por defecto, todas las esquinas del componente aparecen seleccionadas. La cadena aparece intacta y los puntos que representan cada esquina del cuadrado se vuelven azules. Si utilizas esta opción, se aplicarán los mismos atributos a todas las esquinas.
Para configurar los atributos de las esquinas individualmente, haz clic en la esquina deseada del icono cuadrado; el punto de la esquina seleccionada se vuelve azul y el icono de eslabón de cadena aparece roto. Recuerda configurar atributos para cada esquina que desees personalizar.
Para aumentar o disminuir el tamaño del radio de los bordes o de un borde específico, escribe el valor en el campo Radius o utiliza la barra deslizante situada a la izquierda o a la derecha, respectivamente. Si el valor de la barra deslizante es superior a cero, los lados del icono cuadrado se vuelven azules y el valor aparece automáticamente en el campo de valor.
Para cambiar la unidad de medida, haz clic en la unidad de medida seleccionada (texto de color azul) y elige una opción del menú desplegable.
En esta sección, puedes establecer la orientación de la cámara. Consulta la siguiente tabla para obtener más información.
Vertical | Pulsa para poner la cámara en modo retrato (orientación vertical). |
Horizontal | Haz clic para poner la cámara en modo horizontal (orientación horizontal). |
Flexible | Haz clic para configurar la cámara de modo que adopte una orientación horizontal o vertical en función de cómo el usuario sostenga el dispositivo. Si el usuario de la app sostiene el dispositivo en posición vertical, la cámara se ajustará en orientación vertical y si el usuario de la app sostiene el dispositivo en posición horizontal, la cámara se ajustará en orientación horizontal. |
En esta sección, puedes seleccionar el tamaño de las fotos que se tomarán con la cámara. Haz clic en el tamaño deseado. Las opciones disponibles son: Small (200 KB), Medium (400 KB), Large (2 GB) y Original.
En esta sección, puedes seleccionar la cámara que se utilizará para tomar fotos. Las opciones disponibles son: Front y Rear.
En esta sección, puedes seleccionar el modo flash de la cámara que se utilizará para tomar las fotos. Las opciones disponibles son: On, Off y Auto.
En esta sección se configuran los atributos básicos del componente. Consulta la siguiente tabla para obtener más información.
Source Name | Nombre de identificación que se da al componente para poder invocarlo desde otro componente. Para establecer un nombre, haz clic en el campo y escríbelo. |
Available Photo Preview | Atributo que define si la foto tomada puede previsualizarse en la app. Haz clic en la flecha y elige un valor en el menú desplegable. Selecciona true para que la foto pueda previsualizarse o false para que no pueda previsualizarse. |
Visible | Atributo que define si el componente es visible en la app. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que el componente sea visible en la app o false para que no lo sea. |
Important For Accessibility | Atributo que define si el lector de pantalla lee o ignora el valor definido en el atributo Texto de accesibilidad del componente. Haz clic en la flecha y selecciona una opción del menú desplegable. Elige true para que el lector de pantalla lea el componente o false para que el lector de pantalla no lea el componente. El valor por defecto es false. |
Accessibility Text | Texto alternativo. Añade un texto breve para describir el componente a los usuarios que no puedan verlo. El texto será leído por iOS Voice Over o Android Talk Back. También puedes añadir el texto de accesibilidad al diccionario de traducciones o seleccionar una traducción existente si hay idiomas seleccionados en la configuración de tu app. |
En esta sección puedes configurar los atributos de tamaño y posición del componente. Consulta la tabla a continuación para obtener más información.
Position Type | Haz clic en la flecha y selecciona un tipo en el menú desplegable. Consulta la tabla a continuación para saber más sobre las opciones disponibles.
|
En esta sección, puedes definir el orden de los componentes dentro de la pantalla. Consulta la tabla a continuación para obtener más información.
Z-Index | Propiedad que define el orden de posición de los componentes. Si varios componentes se solapan, los componentes con un índice Z más alto se colocarán sobre los que tengan un índice más bajo. Este campo se rellena automáticamente. |
Actions
En la pestaña Actions, puedes establecer animaciones para los componentes de la pantalla de tu app y determinar cómo el usuario invoca efectos y desencadena acciones mientras interactúa con la app. Consulta las secciones a continuación para obtener más información.Actions Tab
En esta sección, puedes establecer eventos o acciones en el componente que serán activados por otras acciones determinadas. La única acción disponible para la configuración es On Successful, que consiste en establecer un evento después de que se tome una foto correctamente.
Para establecer el evento o la acción, escribe la acción que se va a activar en el campo On Successful o haz clic en los tres puntos verticales. Se abre la ventana Create new link. Haz clic en la flecha hacia abajo y selecciona uno de los tipos de enlace disponibles en el menú desplegable: View, SW States, Process, Lambda, Pop Up, Toggle, Event, Link, Mail, Module Screen o Interface Message. Aparece un nuevo menú desplegable. Haz clic en la flecha hacia abajo y selecciona la acción o evento dentro del tipo seleccionado. A continuación, completa los parámetros aplicables a la opción seleccionada. Una vez configurados los parámetros necesarios, haz clic en Accept.
En esta sección, puedes establecer diferentes efectos sobre los atributos del componente y las animaciones a través de las cuales se producen los efectos. En primer lugar, debes seleccionar los atributos para los que deseas establecer efectos. Consulta la tabla a continuación para obtener más información.
Alpha | Transparencia u opacidad del componente. Introduce el valor para establecer la opacidad inicial del componente antes de que se ejecute la animación. El valor puede oscilar entre 0 y 1, considerando 1 como el valor que otorga el mayor nivel de transparencia. |
Scale | Dimensión del componente. Introduce el valor para establecer la escala inicial del componente antes de que se ejecute la animación. Por defecto, el valor de escala es 1, que equivale al tamaño original del componente. El valor puede ser cualquier número empezando por 1. |
A continuación, se configura la animación a través de la cual se ejecutarán los efectos previamente definidos. Consulta la tabla siguiente para obtener más información sobre las animaciones disponibles.
On Load Effect | Animación ejecutada inmediatamente después de cargar la pantalla. |
On Call Effect | Animación ejecutada al invocarla a través de un mensaje. |
En todos los casos, puedes establecer el código de la animación o configurarla con el Editor de animaciones. Para configurar la animación, haz clic en </> y, a continuación, haz clic en el campo de texto para empezar a escribir el código o haz clic en los tres puntos verticales para abrir el Editor de animación. Consulta Actions para aprender a utilizar el editor.Actions Tab
En esta sección, puedes establecer atributos avanzados relacionados con la animación del componente. Consulta la siguiente tabla para obtener más información.
Auto dump | Token donde se almacenará la foto tomada con la cámara. Para establecer un token, haz clic en el campo e introduce el número de token. |
Advanced
En la pestaña Advanced, puedes configurar atributos avanzados para el componente. El componente Photo no tiene atributos que configurar en esta pestaña.Advanced