Widgets

Los widgets son componentes que se usan para crear páginas. Pueden ser desde etiquetas simples que muestran texto hasta formularios complejos que permiten a los usuarios ver y editar datos.

La creación de páginas mediante la función de arrastrar y soltar de App Maker hace que los widgets sean fáciles de usar, mientras que sus amplias propiedades te permiten personalizarlos y agregar funciones para compilar una IU con todas las características.

Tipos de widgets

Accede a los widgets a través de la paleta de widgets (widgets) en la esquina superior izquierda del editor de páginas. App Maker agrupa los widgets de la paleta en categorías para que sean más fáciles de encontrar:

CategoríaPropósitoEjemplos
Datos Widgets capaces de mostrar o editar datos de modelos. Estos son widgets compuestos: jerarquías de widgets que incluyen paneles, etiquetas, cuadros de texto y botones. Puedes editar la salida de los asistentes. Formulario, tabla
Entrada Widgets que manejan las entradas de usuario, como clics o entradas de texto Botón, etiqueta, cuadro de texto, área de texto, casilla de verificación, menú desplegable, cuadro de fecha, grupo de selección, calificación por estrellas, control deslizante, cuadro de sugerencia, editor de texto, selección múltiple, selector de usuario, selector de unidad
Visualización Widgets que muestran texto, imágenes y otros elementos de la IU relativamente no interactivos Vínculo, imagen, mapa de Google Maps, ícono de ayuda, ícono giratorio, html, localizador
Diseño Widgets que se usan para organizar otros widgets. También pueden tomar asignaciones de fuentes de datos. Panel fijo, panel horizontal, panel vertical, lista, cuadrícula, acordeón, pestañas, división horizontal, división vertical
Gráficos Widgets que muestran visualizaciones de datos como gráficos Gráfico de barras, gráfico de líneas, gráfico circular, gráfico de tabla
Fragmentos de página Paleta de fragmentos de página creados por ti Elementos de IU repetidos en varias páginas, como encabezados y pies de página
Tus imágenes Paleta de imágenes que subiste para tu aplicación Logotipos de productos, íconos personalizados

Propiedades de los widgets

Cada widget tiene propiedades editables que te permiten especificar todo, desde qué datos se muestran, hasta dónde está posicionado y cómo responde a la entrada del usuario. Usa el Editor de propiedades ubicado a la derecha del recuadro de una página para ver y editar las propiedades del widget seleccionado actualmente.

El Editor de propiedades agrupa las propiedades por sus funciones. Las propiedades exactas en cada grupo varían de un widget a otro.

Grupo de propiedades Descripción
Nombre del widget Este grupo consta de dos propiedades de widget fundamentales: nombre y fuente de datos, y una o más propiedades adicionales específicas de la función del widget.
Configuración de rendimiento Este grupo tiene una sola propiedad que controla cuándo se cargan los widgets secundarios. Esta propiedad solo aparece para páginas, widgets de diseño y widgets de datos que contienen widgets de diseño.
Diseño Las propiedades en este grupo especifican la posición y el tamaño del widget.
Espaciado Las propiedades en este grupo especifican el margen y el relleno del widget.
Eventos Las propiedades en este grupo determinan cómo responde el widget a eventos como la carga de datos y la entrada del usuario.
Validación de datos Las propiedades en este grupo establecen requisitos de validación para widgets de entrada de texto. Solo aparece para widgets de entrada relevantes.
Visualización Las propiedades en este grupo afectan la apariencia y visibilidad del widget.
Flujo Las propiedades en este grupo determinan cómo los widgets de diseño con flujo habilitado posicionan a sus widgets secundarios. Solo aparece para widgets de diseño.
Otros Las propiedades en este grupo controlan cómo se muestran los errores de validación y establecen el título HTML del widget. En la mayoría de los navegadores, el título HTML se muestra como información sobre la herramienta.

Propiedades fundamentales

Cada widget tiene las dos propiedades fundamentales siguientes:

  • Nombre: Es el identificador que se utiliza para hacer referencia al widget en vinculaciones de datos, secuencias de comandos, estilos y más. Los nombres de los widgets deben ser únicos para sus páginas y no pueden comenzar con un número ni contener espacios. App Maker genera automáticamente nombres cuando agregas widgets a una página, pero a menudo es útil cambiar el nombre de los widgets por uno fácil de recordar para referencia posterior.
  • Fuente de datos: Asigna una fuente de datos para que el widget tenga fácil acceso a los datos de la fuente. Las fuentes de datos solo se pueden asignar a los widgets de formulario y diseño. Todos los demás widgets heredan su fuente de datos del widget de diseño superior.

Ciclo de vida del widget

Los widgets tienen un ciclo de vida simple. En primer lugar, App Maker los crea y, luego, los adjunta a una página para que sean visibles. Además, los separa cuando ya no son necesarios. Los widgets se pueden adjuntar y separar varias veces, pero se crean solo una vez.

Creación

Cuando App Maker crea un widget, establece sus propiedades y compila su HTML. Puedes acceder a las propiedades del widget inmediatamente después de la creación a través de la propiedad app.pages, incluso si un widget aún no está adjunto a una página. De manera predeterminada, App Maker crea la mayoría de los widgets inmediatamente después de que un usuario accede a una aplicación. Las listas y los widgets relacionados son una excepción: App Maker solo crea sus widgets secundarios después de la carga de sus fuentes de datos.

Adjunto

Cuando App Maker adjunta un widget a una página, lo que hace en realidad es insertar el widget en la estructura HTML de la página, o DOM, y lo hace visible para los usuarios. App Maker adjunta la mayoría de los widgets de una página cuando un usuario realiza una visita, y los descarga cuando el usuario se va. Nuevamente, las listas y los widgets relacionados son excepciones, porque sus widgets secundarios solo se adjuntan después de que se cargan sus fuentes de datos, y porque pueden adjuntar y separar filas nuevas a medida que cambian sus fuentes de datos.

App Maker configura vinculaciones de widgets cuando adjunta los widgets, y las quita cuando los separa. Esto tiene dos significados: no puedes basarte en las propiedades de los widgets para configurar los valores antes de que un widget se adjunte, y la acción de adjuntar un widget suele activar solicitudes del servidor a medida que las fuentes de datos se cargan para propagar las vinculaciones.

Todos los widgets tienen eventos onAttach, onDetach y onDataLoad que ejecutan código en respuesta a cambios en los ciclos de vida del widget. Lee más sobre estos eventos en Lógica del widget.

Configuración de rendimiento

Puedes controlar cuándo se inicializan las páginas y los widgets de tu aplicación. De manera predeterminada, App Maker descarga todo cuando un usuario abre la aplicación. Sin embargo, a medida que agregas páginas, es posible que debas retrasar la carga de una parte del contenido para evitar que la aplicación tarde demasiado en abrirse.

Para controlar cómo tu aplicación inicializa el contenido, haz clic en una página o panel y, luego, en Configuración de rendimiento en el Editor de propiedades. Elige una de las siguientes opciones:

  • Inicialización completa: App Maker inicializa todas las páginas y widgets cuando el usuario abre la aplicación. Esta es la configuración predeterminada de App Maker, y funciona mejor para las aplicaciones más pequeñas. El uso de esta opción en cada página puede hacer que una aplicación grande con páginas complejas tarde demasiado en abrirse.
  • Inicialización parcial: Elige esta opción para paneles o páginas ligeras en aplicaciones grandes. App Maker descarga el contenido y la estructura de una página o panel cuando un usuario abre la aplicación. Sin embargo, los widgets no se inicializan hasta que el usuario abre su página superior. Esta opción hace que la aplicación se cargue más rápido que la configuración predeterminada, pero puede aumentar el tiempo de carga para páginas individuales.
  • Inicialización diferida: Esta opción es mejor para páginas complejas en aplicaciones grandes. App Maker no carga la estructura de la página o del panel, a menos que el usuario abra la página principal. La aplicación muestra un indicador de progreso animado mientras App Maker descarga contenido y compila la página. Esta opción hace que la aplicación se cargue más rápido, pero las páginas individuales con esta configuración tardan más en cargarse.
  • Inicialización basada en secuencia de comandos: Usa esta opción si tu aplicación incluye widgets que se usan solo cuando se cumplen ciertas condiciones. Puedes escribir una secuencia de comandos que llame a createChildren cuando el usuario realice las acciones que especifiques. App Maker no cargará widgets secundarios, a menos que sean necesarios.

Si tu aplicación tarda demasiado en cargarse, puedes, por ejemplo, dejar las páginas más importantes de tu aplicación configuradas como Inicialización completa. Luego puedes retrasar la carga de otras páginas; para hacerlo, configúralas como Inicialización parcial. Si consideras que tu aplicación aún tarda demasiado en cargarse, intenta configurar algunas páginas como Inicialización diferida.

Ten en cuenta que las propiedades y vinculaciones de un widget son inaccesibles hasta que se inicializa. Deberás probar exhaustivamente cualquier configuración de rendimiento personalizada antes de implementar estos cambios en los usuarios.

Obtén más información sobre prácticas recomendadas para el diseño de las aplicaciones.