Navegación del editor de pantallas
El editor de pantallas contiene el canvas y otras cuatro partes principales: una barra de herramientas (arriba a la izquierda), las opciones del canvas (arriba a la derecha), el panel izquierdo y el panel derecho. Desde el panel izquierdo, puedes agregar una descripción y etiquetas para identificar fácilmente la pantalla y ayudarte a ti y a tu equipo a entender por qué se creó la pantalla. Además, puedes arrastrar y soltar los componentes o librería de componentes a la pantalla, identificar errores y traducciones de cada componente (si corresponde) y ver y modificar cómo se muestran los componentes. En el Panel derecho, configura los atributos de cada componente de la pantalla según tus necesidades.
Las secciones a continuación proporcionan información sobre todas las características disponibles en cada área de la interfaz del editor de pantallas. Puedes utilizar esta información como guía durante todo el proceso de construcción de pantallas, pero ten en cuenta que tendrás que utilizar las diferentes opciones según los requisitos de tu proyecto y tus necesidades al crear o modificar pantallas.
La barra de herramientas contiene un conjunto de herramientas esenciales que puedes utilizar mientras construyes tus pantallas. Consulta la tabla a continuación para saber más sobre las opciones disponibles.
 | Opciones de guardado. Haz clic en Save and continue (icono de disquete) para guardar los cambios y continuar trabajando. Haz clic en la flecha para acceder a más opciones de guardado, como se explica a continuación.
En todos los casos, aparece el modal Commit message. Ingresa una descripción para identificar los cambios que realizaste, de modo que los miembros de tu equipo estén al tanto de las modificaciones y determinen si necesitan combinar esos cambios con otra rama de la app. SugerenciaSi hay cambios no guardados, aparecerá un círculo en la pestaña del editor de pantallas, a la derecha del nombre de la pantalla. Como mejor práctica, guarda la pantalla cada vez que realices cambios importantes, como agregar nuevos componentes o configurar atributos que afecten el comportamiento del componente en la app. | ||||||
| Quick Run: Haz clic para ejecutar una prueba en tiempo real para ver los cambios realizados en la pantalla de tu app. Por ejemplo, si configuraste una animación en el atributo On Click para que aparezca un componente text input cuando el usuario de la app haga clic en la pantalla, puedes ejecutar una prueba con Quick Run para ver si la animación funciona según tus necesidades. Consulte Quick Run para aprender a usarlo. ImportanteLa funcionalidad Quick Run solo está disponible para aplicaciones móviles. Si estás trabajando en una app web, esta opción no aparecerá en el editor de pantallas. | ||||||
 | Undo and Redo. Haz clic para deshacer o rehacer la última acción realizada en el canvas. Es posible que tengas que deshacer una acción si, por ejemplo, cometiste un error al mover un componente por toda la pantalla y necesitas volver a colocarlo donde se encontraba originalmente. | ||||||
 | Duplicate Haga clic para duplicar un componente seleccionado. SugerenciaPor ejemplo, puedes usarlo para duplicar un flex container configurado con sus componentes hijos y realizar los cambios necesarios en ellos, en lugar de arrastrar y soltar todos los componentes en un flex container nuevo. | ||||||
 | Copy and Paste. Haz clic para copiar el componente seleccionado y sus atributos. | ||||||
 | Copy styles and Paste styles. Haz clic en Copy styles para copiar el estilo del componente seleccionado. A continuación, haz clic en el componente al que deseas aplicar el estilo copiado y haz clic en Paste styles. | ||||||
 | Lock. Haz clic para deshabilitar los cambios en el componente seleccionado. Todas las secciones del panel derecho aparecen en gris para evitar cambios. Cuando un componente está bloqueado, el icono se convierte en un bloqueo abierto. Haga clic en él para desbloquear el componente. | ||||||
 | Arrange up o Arrange down. Haz clic para mover el componente seleccionado hacia arriba en la vista de árbol. | ||||||
 | Create Library. Haz clic para crear un nuevo componente de librería para el componente seleccionado. Una vez que se abre el modal New Library Component, debes ingresar un nombre para el componente de librería, para identificarla. Además, puede agregar una imagen en miniatura para la librería en el campo Thumbnail image. Para agregar una imagen, haz clic en el botón de carga, selecciona una imagen siguiendo los tipos y dimensiones de archivo y haz clic en Open. A continuación, haz clic en Save para guardar el nuevo componente de librería. SugerenciaCrea nuevos componentes de librería, por ejemplo, cada vez que crees componentes con configuraciones complejas o componentes que necesites reutilizar en las diferentes pantallas de tu app. | ||||||
 | Create Theme Haz clic para crear un nuevo estilo y aplicarlo al componente seleccionado. Una vez que configures el panel del nuevo estilo y lo guardes, estará disponible para ser reutilizado en otros componentes. Puedes seleccionarlo en el menú desplegable CSS Class en la sección Basic de la pestaña Design Panel derechoy también puedes encontrarlo en la pestaña Custom del tema seleccionado para tu rama. | ||||||
 | Delete Haz clic aquí para eliminar el componente seleccionado de la pantalla. |
Importante
Todos los botones, excepto las opciones de guardado, se habilitan solo después de seleccionar un componente dentro del canvas o la vista de árbol.
La sección de opciones del canvas contiene opciones que te permiten ver cómo se verá la pantalla cuando se publique la app y que te ayudan a identificar las diferentes áreas dentro de la pantalla para organizar mejor los componentes dentro de ella. Consulta la siguiente tabla para obtener más información sobre cada opción.
| Opciones Device view y Rotate device. Si estás trabajando en una app móvil, puedes seleccionar un dispositivo para ver en el canvas cómo se verá la pantalla en la app publicada. Haz clic en la flecha para abrir el menú desplegable y selecciona un dispositivo o grupo de dispositivos de la lista. Cada opción incluye el nombre del dispositivo o dispositivos y su resolución de pantalla en píxeles. NotaEl menú desplegable de dispositivos y la opción Rotate Device solo están disponibles para aplicaciones móviles. Si estás trabajando en una app web, el menú desplegable descripto anteriormente no aparecerá. Sin embargo, puedes ver cómo se verá la pantalla en la app publicada seleccionando una opción con el tipo de breakpoint. Los breakpoints son anchos personalizables que determinan cómo se comporta el diseño adaptable en todos los dispositivos. Cada breakpoint se refiere a un ancho máximo (en píxeles). Una vez que selecciones la opción, selecciona un dispositivo en el menú desplegable que se abre. La siguiente tabla describe las opciones disponibles.
| ||||||||||
| Treeview Mode. Haz clic para ocultar el canvas y abrir sólo la pestaña Treeview. No podrás ver los componentes en el simulador. Utilice esta opción para visualizar mejor la pantalla e identificar cualquier error en la organización de los componentes, por ejemplo, para comprobar si los componentes correctos están incluidos dentro de un componente flex container. | ||||||||||
| Simulador Mode. Haz clic para abrir la pestaña Treeview sin ocultar el canvas. Esta opción está seleccionada por defecto. | ||||||||||
| Guías flexibles. Líneas que se comportan como guías para delimitar las secciones dentro de la estructura de un componente flexible. De forma predeterminada, estas guías están deshabilitadas. ImportanteLas guías flexibles solo están disponibles si tienes componentes flexibles en el canvas, como un flex container o un flex panel. | ||||||||||
| View modes. De forma predeterminada, se seleccionan los tres modos de vista (ver imagen a continuación). Haga clic en la flecha y seleccione o anule la selección de cualquier opción. Consulte el siguiente gráfico para obtener más información sobre las vistas disponibles.
| ||||||||||
| Idiomas. Haz clic en la flecha y selecciona un idioma en el menú desplegable. ImportanteEl menú desplegable de idiomas contiene los idiomas seleccionados en la configuración de tu app. Si no se ha configurado ningún idioma, el inglés será el idioma predeterminado de la app y el menú de idiomas no se mostrará en el constructor visual. | ||||||||||
| Zoom del canvas. Haz clic en - o + para reducir o aumentar el zoom en el canvas, respectivamente. También puedes hacer clic en el campo de porcentaje para escribir un porcentaje personalizado o hacer clic en la flecha y elegir una opción fija en el menú desplegable: 25%, 50%, 100%, 200% o Fit Canvas. |
El panel izquierdo Panel izquierdodel editor de pantallas proporciona un conjunto de pestañas que te permiten construir y personalizar tu pantalla. Lee Panel izquierdo para obtener más información.
El panel derecho del editor de pantallas te permite establecer diferentes tipos de atributos para cada componente. Los atributos que serán configurados dependerán específicamente del componente seleccionado. Lee Panel derecho para obtener más información.