Widgets de diseño

Usa widgets de diseño para organizar otros widgets.

Usa el widget de panel fijo para controlar el diseño de los otros widgets. Los widgets en paneles fijos tienen propiedades de diseño que establecen su tamaño y posición en relación con los bordes del panel.

Obtén más información sobre el diseño de página con paneles fijos.

Uso

Arrastra uno de los widgets de panel a la página y usa el Editor de propiedades para configurar su texto, apariencia y función.

Flujos de trabajo comunes

• Vincula el panel a una fuente de datos.
• Haz clic en la propiedad layout para cambiar el tipo de panel.

Aplica estilos

Usa el selector de temas en la barra de Acciones para controlar la apariencia del panel.

Información adicional

En la API, encontrarás más información sobre los estilos, propiedades, métodos y eventos que usan los paneles.

Ejemplos

Varios ejemplos y plantillas usan paneles.

Usa widgets de panel para controlar el diseño de los otros widgets. Los widgets en paneles verticales y horizontales tienen propiedades de diseño que controlan su tamaño y posición, aunque las opciones para controlar la posición son más limitadas que en los paneles fijos. Las propiedades del panel de flujo se organizan en dos columnas: horizontal y vertical. Cada columna controla su respectivo eje.

Obtén más información sobre el diseño de páginas con paneles de flujo.

Uso

Arrastra uno de los widgets de panel a la página y usa el Editor de propiedades para configurar su texto, apariencia y función.

Flujos de trabajo comunes

• Vincula el panel a una fuente de datos.
• Haz clic en la propiedad layout para cambiar el tipo de panel.

Aplica estilos

Usa el selector de temas en la barra de Acciones para controlar la apariencia del panel.

Información adicional

En la API, encontrarás más información sobre los estilos, propiedades, métodos y eventos que usan los paneles.

Ejemplos

Varios ejemplos y plantillas usan paneles.

Usa el widget de lista para mostrar los datos de cada elemento en una fuente de datos como una fila diferente en una lista. En el editor, una lista tiene un panel externo que define su tamaño y una fila de prototipo interno que determina el diseño de las filas en la lista.

Uso

Arrastra una lista a la página y usa el Editor de propiedades para configurar su apariencia y función.

Cuando se ejecuta una app, App Maker crea una fuente de datos especial para cada item en la lista items de la fuente de datos. Luego, hace referencia a la fila de prototipo a fin de crear una fila para cada fuente de datos nueva.

Debido a que las filas de lista usan fuentes de datos especiales, algunos métodos de fuentes de datos modelo no funcionan en ellas. Por ejemplo, deleteItem(), createItem(), prevItem() y nextItem() arrojan error de fuentes de datos de las listas. Si quieres borrar un registro de una fila de lista, crea un botón de eliminación en el prototipo y configura su evento onClick como widget.datasource.item._delete().

Flujos de trabajo comunes

Las listas muestran los datos de cada elemento en una fuente de datos como una fila diferente en una lista. En el editor, una lista tiene un panel externo que define su tamaño y una fila de prototipo interno que determina el diseño de las filas en la lista.

Cuando se ejecuta una app, App Maker crea una fuente de datos especial para cada item en la lista items de la fuente de datos. Luego, hace referencia a la fila de prototipo a fin de crear una fila para cada fuente de datos nueva.

Debido a que las filas de lista usan fuentes de datos especiales, algunos métodos de fuentes de datos modelo no funcionan en ellas. Por ejemplo, deleteItem(), createItem(), prevItem() y nextItem() arrojan error de fuentes de datos de las listas. Si quieres borrar un registro de una fila de lista, crea un botón de eliminación en el prototipo y configura su evento onClick como widget.datasource.item._delete().

Aplica estilos

Usa el selector de temas en la barra de Acciones para controlar la apariencia de la lista.

Información adicional

En la API, encontrarás más información sobre los estilos, propiedades, métodos y eventos de este widget.

Ejemplos

El ejemplo de la lista de proyecto usa el widget de lista.

Usa el widget de cuadrícula para mostrar los datos de cada elemento en la fuente de datos como una celda en una cuadrícula. En el editor, una cuadrícula tiene un panel externo que define su tamaño y una fila de prototipo interno que determina el diseño de las celdas en la cuadrícula.

Uso

Arrastra un widget de cuadrícula a la página y usa el Editor de propiedades para configurar su apariencia y función.

Flujos de trabajo comunes

Los widgets de cuadrícula son idénticos a los widgets de lista, excepto que su prototipo es una celda en una cuadrícula en vez de una fila. Son útiles a fin de mostrar una cantidad pequeña de detalles para una cantidad grande de elementos, como una miniatura de álbumes de fotos o un inventario de compras en línea.

Aplica estilos

Usa el selector de temas en la barra de Acciones para controlar la apariencia de la cuadrícula.

Información adicional

En la API, encontrarás más información sobre los estilos, propiedades, métodos y eventos de este widget.

Ejemplos

La plantilla Tienda corporativa usa el widget de cuadrícula.

Los acordeones son como listas, pero tienen un segundo prototipo de detalles que se expande cuando un usuario selecciona una fila. Son útiles si quieres incluir más información que se pueda mostrar con practicidad en una lista o para incluir un panel de edición adicional en un elemento seleccionado.

Uso

Arrastra un acordeón a la página y usa el Editor de propiedades para configurar su apariencia y función.

Flujos de trabajo comunes

El acordeón es un Panel de lista con una vista detallada que se expande debajo de la fila seleccionada. Esta vista detallada se edita de la misma manera que un prototipo, como la vista de la fila principal.

Durante el entorno de ejecución, se muestra una fila por elemento en la fuente de datos del acordeón. La fuente de datos de esa fila es una fuente de datos de un solo elemento especial que apunta al elemento correspondiente en la fuente de datos del Acordeón. La fila de detalles también contiene esta fuente de datos especial. Esto permite que el prototipo acceda al elemento de la fila actual con la sintaxis “@datasource.item”.

Aplica estilos

Usa el selector de temas en la barra de Acciones para controlar la apariencia del Acordeón.

Información adicional

En la API, encontrarás más información sobre los estilos, propiedades, métodos y eventos de este widget.

Ejemplos

La plantilla Material Gallery usa un widget de acordeón.

Usa el widget de pestañas para habilitar una organización de contenido de alto nivel.

Uso

Arrastra una pestaña a la página y usa el Editor de propiedades para configurar su apariencia y función.

Flujos de trabajo comunes

Las pestañas controlan la visualización del contenido en una ubicación coherente. Usa la pestaña Propiedades en el editor de propiedades para agregar, editar y borrar pestañas.

Aplica estilos

Usa el selector de temas en la barra de Acciones para controlar la apariencia de las pestañas.

Información adicional

En la API, encontrarás más información sobre los estilos, propiedades, métodos y eventos de este widget.

Ejemplos

La plantilla Material Gallery usa un widget de pestañas.

Usa los widgets de división horizontal y vertical para controlar el diseño de los otros widgets. Son similares a los otros paneles, excepto que tienen un divisor móvil.

Los paneles de división se pueden anidar para crear diseños receptivos, rellenar dimensiones primarias y flujos según el tamaño del contenido.

Uso

Arrastra un widget de división a la página y usa el Editor de propiedades para configurar su apariencia y función.

Flujos de trabajo comunes

• Vincula la división a una fuente de datos.
• Usa la propiedad splitPosition para controlar dónde la división divide el panel.

Aplica estilos

Los widgets de división no tienen opciones de estilo preconfiguradas.

Información adicional

La API tiene más información sobre los widgets de división horizontal y vertical.

Ejemplos

Varios ejemplos y plantillas usan divisiones.