Construyendo interfaz de usuario

Para diseñar una interfaz estructurada y de usabilidad, AppMaster Web Designer proporciona una amplia gama de componentes de interfaz de usuario atómicos. Estos componentes se pueden combinar y agrupar de varias maneras para alinearse con sus objetivos y metas.

AppMaster ofrece los siguientes componentes de interfaz de usuario:

• Contenedores: Elementos fundamentales para estructurar y agrupar lógicamente otros componentes.
• Modales y cajones: componentes interactivos para mostrar información o acciones adicionales sin salir de la pantalla actual.
• Componentes de salida de valores dinámicos: incluye listas , cuadrículas y tablas para presentar datos dinámicamente.
• Elementos básicos de la interfaz de usuario: como botones , texto e íconos , esenciales para las interacciones básicas de la interfaz.
• Componentes de navegación: incluidos menús verticales y horizontales, pestañas y herramientas de navegación similares.
• Elementos de formulario: varias entradas y controles para la interacción del usuario y la recopilación de datos.

Las actualizaciones periódicas de la biblioteca de componentes mejoran su capacidad para desarrollar aplicaciones web de manera más eficiente.

Construyamos una interfaz de usuario para nuestra sencilla aplicación de calculadora para demostrar las posibilidades de un creador de sitios web de arrastrar y soltar de AppMaster. Esta aplicación mostrará el resultado de varias operaciones matemáticas basadas en valores de entrada.

Contenedor flexible

Con Flex Container , puede gestionar fácilmente la alineación y el apilamiento de todos los elementos secundarios dentro de un contenedor.

Flex Container es un componente base para construir la estructura de su página web. Flex Container en el diseñador de aplicaciones web AppMaster permite a los usuarios organizar elementos secundarios (widgets o contenedores) de manera flexible. Admite alineaciones horizontales y verticales, lo que permite a los desarrolladores crear diseños complejos que se adaptan a diferentes tamaños de pantalla.

Agregar contenedores

Usaremos dos contenedores principales: uno para la entrada de datos y el otro para mostrar los resultados de los cálculos agrupados en un contenedor común.

Primero, agregue Flex Container al lienzo para albergar todos los demás elementos.

En el panel Apariencia , puede explorar una variedad de configuraciones:

• ID de elemento: un identificador único para hacer referencia al contenedor en los procesos de negocio.
• Grupo común: configuraciones para definir el estado predeterminado del componente, como la visibilidad y el estilo del cursor.
• Grupo secundario flexible: determina cómo se comporta el elemento dentro de un componente principal flexible.
• Diseño: Configuración para organizar elementos secundarios dentro del contenedor.
• Tamaños: Para especificar las dimensiones de los elementos.
• Espaciado : ajusta el espacio dentro y alrededor del elemento.
• Fondo: Opciones para colores y capas de fondo.
• Radio de esquina, bordes, sombra: personalización de bordes, bordes y efectos de sombra de elementos.
• Información sobre herramientas: agrega información sobre herramientas para acciones de enfoque o desplazamiento.

Personaliza tu contenedor principal. Por ejemplo, establezcamos la Dirección en horizontal y ajustemos el Espacio , el Relleno , el Radio de la esquina y los Bordes .

A continuación, agregue otro contenedor Flex dentro del principal para que el formulario ingrese valores. Configúrelo en ancho completo para llenar el espacio disponible en el contenedor principal.

Duplique este contenedor (usando CTRL/⌘+D ) para crear un bloque separado para mostrar los resultados. Establezca la propiedad Ancho en 30%.

Agregar elementos de la interfaz de usuario

Para continuar construyendo su aplicación, es hora de agregar los elementos de interfaz de usuario necesarios.

Agregar formulario

Nuestro proceso de negocio requiere que el usuario ingrese dos números, ambos de tipo Float. Para que esto sea posible, agregue dos entradas flotantes y un botón para iniciar el proceso de cálculo.

Cambie la dirección del contenedor flexible del lado izquierdo a vertical y agregue un espacio para que los elementos anidados tengan un pequeño espacio entre ellos. Agregue dentro de este contenedor Flex un Input Float para el primer valor, que etiquetaremos como 'X':

• Arrastre y suelte el elemento Input Float en el contenedor del lado izquierdo.
• En el Panel de apariencia , personalice el campo agregando una etiqueta y un marcador de posición .
• Ajuste la apariencia del campo para adaptarlo al diseño de su aplicación.

Seleccione el campo agregado en el lienzo y duplíquelo usando CTRL/⌘+D . Modifique la Etiqueta y el Marcador de posición del campo duplicado para representar el segundo valor, 'Y'.

Ahora arrastre y suelte un elemento Botón debajo de los campos agregados. En el panel Apariencia , ajuste el Botón para que abarque todo el ancho. Esto se puede lograr estableciendo la propiedad Alinear en el grupo Flex Child en Estirar .

Ingrese una etiqueta para el botón y, opcionalmente, agregue un ícono para mejorar su atractivo visual.

Después de agregar estos elementos, es una buena práctica cambiarles el nombre para mayor claridad y facilidad de identificación. Esto hace que sea más fácil hacer referencia a ellos en sus procesos comerciales, mejorando la comprensión y acelerando el proceso de desarrollo.

Agregar bloque de resultados

En el lado derecho del contenedor principal, configuraremos un espacio para mostrar los resultados luego de ejecutar nuestro proceso de negocio. Primero, establezca la propiedad Dirección de este contenedor en Vertical y agregue un pequeño espacio para mantener los elementos espaciados ordenadamente. Cambie su Ancho al 30%.

Dentro de este contenedor derecho, inserte un nuevo contenedor Horizontal Flex y agregue dentro de él un elemento Icono que represente la operación, un Bloque de texto con un símbolo igual y un Bloque de texto donde se mostrará el resultado de la operación. Duplique este contenedor cuatro veces, actualizando cada una para nuestras operaciones matemáticas definidas.

Personaliza cada elemento como quieras con el Panel de Apariencia .

Agregar bloque de sugerencias

Para mejorar la usabilidad de la interfaz, creamos un marcador de posición que se mostrará hasta que se obtengan resultados. Para esto, agregue un contenedor Flex adicional, reflejando el ancho del contenedor correcto (30%), y coloque un bloque de texto dentro con una sugerencia descriptiva.

Una característica clave del contenedor con resultados es su estado de visibilidad inicial. De forma predeterminada, desactive el interruptor Visible , haciéndolo inicialmente invisible.

Ocultar elemento

Haremos que este contenedor sea visible y actualizaremos los datos solo después de que se ejecute el proceso comercial y se obtenga el resultado. Es importante asignar nombres a los bloques de texto, lo que garantiza una fácil identificación durante la creación de procesos comerciales y la redacción de resultados para mostrar.

🎉 ¡Buen trabajo! Creamos la interfaz de usuario perfecta para nuestra aplicación y estamos listos para agregar interactividad a nuestros elementos.