Conceptos básicos del editor de páginas

El editor de páginas de App Maker se usa a fin de compilar de manera fácil y visual una interfaz para tus apps. Arrastra widgets al recuadro, vincúlalos a datos y obtendrás una IU.

El editor de páginas tiene tres partes principales: el recuadro en el que creas tu IU, una paleta de widgets con todos los elementos de IU que necesitas y una barra lateral derecha que te permite controlar los detalles.

Recuadro

El recuadro te permite ubicar y configurar componentes llamados widgets que forman parte de la IU de tu app. El recuadro es WYSIWYG (“lo que ves es lo que obtienes”), a excepción de las propiedades del widget de vinculación de datos que se procesan con marcadores de posición hasta que publicas la app o realizas una vista previa de ella.

Puedes cambiar el tamaño del recuadro a medida que agregas widgets a él, si quieres ver cómo se verá tu app para diferentes tamaños de pantalla. Si quieres obtener más información, consulta Aplica estilos para tamaños de pantalla diferentes.

Paleta de widgets

Arrastra widgets desde la paleta de widgets hasta el recuadro. Algunos widgets tienen asistentes que te ayudan a vincularlos a los datos. Algunas vinculaciones de datos son automáticas, si la fuente de datos predeterminada está configurada para una página.

La barra lateral derecha tiene tres herramientas diferentes que necesitas para compilar tu IU y se detallan a continuación:

HerramientaDescripción
Editor de propiedadesUna lista de propiedades que determina la manera en que un widget seleccionado interactúa con los datos, responde a eventos, se carga en la página y más.
Editor de estiloUn panel que controla la apariencia de los widgets en el recuadro. Selecciona un tema integrado y crea tus propios estilos con CSS.
DescripciónUna lista que muestra las relaciones entre los widgets de la página y te permite ocultar los widgets y bloquearlos en su posición.

Vinculación de datos con el Editor de propiedades

El Editor de propiedades te permite editar propiedades que controlan la mayoría de los aspectos de un widget: dónde se ubica, qué es lo que muestra y cómo se comporta. Por ejemplo, los widgets de etiquetas tienen una propiedad text que determina el texto que muestran.

Hay tres formas de establecer una propiedad. Cuando puedas establecer una propiedad de diferentes maneras, haz clic en el ícono de lista desplegable arrow_drop_down para seleccionar la forma de establecer la propiedad.

  • Valor estático (Igual): los valores estáticos son convenientes porque puedes ingresarlos de forma directa, pero no pueden cambiar cuando un usuario interactúa con tu app.

  • Expresión de vinculación(Vinculación): las expresiones de vinculaciones son potentes, ya que te permiten conectar tu IU a los modelos de datos, lo que hace que puedan responder de forma dinámica cuando se ingresan o editan datos.

  • Elección (more_horiz): elige entre las opciones de configuración predeterminada o define (y elige) una o más opciones. Por ejemplo, selecciona una fuente de datos para una página o agrega una lista de nombres de clases a una propiedad styles.

Sugerencias rápidas sobre el recuadro

A continuación, encontrarás sugerencias y trucos para trabajar con el recuadro:

  • Mantén presionada la tecla Mayúscula y arrastra el mouse para seleccionar varios widgets.

  • Con varios widgets seleccionados, puedes moverlos como un grupo, editar las propiedades compartidas y más.

  • Haz clic derecho en los widgets o en el recuadro para abrir un menú contextual.

  • Mantén presionada la tecla Control mientras reorganizas los widgets, para inhabilitar de forma temporal las pautas de alineación de ajuste del recuadro.

  • Usa las teclas de flecha para mover un widget de un píxel a la vez.

Lecturas adicionales

  • Obtén más información sobre los Widgets de App Maker.

  • Descubre cómo personalizar el aspecto de tu app con Estilos.

  • Obtén instrucciones sobre cómo compilar tus páginas en Diseño avanzado.