Exploración de los fundamentos de los componentes

¿Cuál es el rol de la interfaz de usuario (IU) en una aplicación?

La IU cubre lo que verá y podrá hacer en la aplicación. La IU no solo define los elementos que se pueden ver, sino que también define algunas de las interacciones básicas en la aplicación. Los entornos de desarrollo con poco código suelen estar equipados con un conjunto de herramientas para crear una IU.

En SAP Build Apps, los componentes son la clave poderosa para crear aplicaciones fácil y rápidamente que satisfagan las necesidades más diversas de las empresas y enriquezcan los procesos de trabajo. Una descripción simple de los componentes es que son piezas de código prefabricadas que se pueden utilizar como bloques de construcción con funciones predefinidas para diseñar la IU y permitir que el puente utilice la lógica.

Los componentes pueden aparecer en cualquier tipo de elemento, como botones, campos de entrada, áreas de texto o imágenes. No hay límites fijos en cuanto a cuán grandes o pequeños pueden ser los componentes. Los componentes más pequeños pueden ser como un icono individual o una línea divisoria. Los componentes más grandes pueden ser un componente de mapa para geolocalización o un reproductor de vídeo. Al prefabricarlos, promueven una experiencia intuitiva en el campo visual del desarrollo y, con las funciones proporcionadas, permiten cubrir muchas posibilidades de desarrollo. Sin embargo, si se necesitan requisitos adicionales específicos, los componentes también se pueden adaptar y crear en función de la apariencia y la funcionalidad.

Los componentes de SAP Build Apps se dividen en varias secciones a la izquierda. En la parte superior, puede encontrar los componentes ESSENTIALS que permiten añadir los módulos más básicos de una aplicación. Los componentes de título y texto siempre están presentes y se combinan entre sí en diferentes estilos para preparar bien la información. El componente de tarjeta combina texto y título y se resalta con el formato del componente.

Principalmente para el estilo, con componentes de imagen e icono, una aplicación se puede diseñar para ser fácil de usar o más información dirigida. Los componentes del botón están predestinados a estimular interacciones e iniciar procesos lógicos. Junto con los componentes de formulario, la aplicación de ejemplo que se muestra en el siguiente ejercicio también describe que la mayoría de los componentes se producen con frecuencia y, en combinación entre sí, a menudo forman la base de una interfaz de usuario de aplicación intuitiva y dinámica.

Los componentes de formulario se pueden utilizar para insertar formas útiles en la aplicación. Estos son particularmente ventajosos para explotar la información del usuario y permitir interacciones. Permite al usuario desencadenar acciones simples y más complejas. El componente más utilizado es el componente de botón que está predestinado a desencadenar una acción seleccionándola, incluso si otros componentes están conectados a la lógica y también pueden desencadenar acciones seleccionándola.

Los campos de entrada y contraseña son esenciales para que los usuarios introduzcan información que se pueda seguir procesando, por ejemplo, para almacenar y visualizar o autenticar un usuario.

Además, las casillas de selección, los campos desplegables y los controles deslizantes proporcionan una forma rápida e intuitiva para que los usuarios seleccionen valores predefinidos en estos componentes. La aplicación también puede seguir procesando esta información.

La creación de listas utilizando componentes de lista es un enfoque importante y utilizado con frecuencia para SAP Build Apps. Para visualizar determinada información mediante listas, los componentes de lista suelen estar conectados a una base de datos (fuente) en la que se encuentran los datos almacenados. Se puede enumerar la información temporal de la aplicación combinada con la entrada de usuario o la nueva información que resulta de las funciones y formularios. Sin embargo, otras opciones son la conexión a través de interfaces con datos/información de Internet u otras soluciones de SAP o de terceros. El tipo de visualización con los componentes es diverso; existen aquellos, utilizando listas normales a las que se conecta más de una pieza de información o a las que también se mostrarán imágenes e iconos. Con las listas, en particular, es importante utilizar el componente de propiedades, que se explica con más detalle en la siguiente lección, para una visualización dinámica o de destino.

Por defecto, SAP Build Apps ofrece tres componentes de layout que le permiten diseñar más opciones en relación con el layout de la IU y para estructurar elementos. Solo puede agrupar componentes o realizar acciones más complejas, como convertir componentes en grupos invisibles o visibles después de un desencadenador como una sección al mismo tiempo. De este modo, los componentes de disposición aportan ventajas adicionales para diseñar aplicaciones, como:

• Más claridad, especialmente con el árbol de disposición.
• Visualizar secciones de contenido en paralelo.
• El contenido y los componentes pueden proporcionarse y agruparse fácilmente.
• Introduzca varios componentes a la vez como grupo.
• Visualización intuitiva posible desplazándose por el área definida, etc.

Reproduzca el video para obtener un resumen del árbol de diseño y aprender a utilizar la oferta de árbol de diseño de SAP Build Apps.

No solo son útiles los componentes de layout para crear una estructura clara, sino, especialmente en combinación con estos, también la vista de árbol, que se puede encontrar en la parte inferior derecha y proporciona un resumen claro.

En la vista de árbol, los contenedores utilizados se enumeran en su orden para visualizar la disposición de página. De este modo, puede ser ventajoso seleccionar componentes directamente en la vista de árbol, ya que los nombres de visualización de componentes que se pueden asignar a componentes también se visualizan allí.

Otro método útil es que puede mover y reestructurar componentes utilizando la función de arrastrar y soltar con el soporte de una línea de ayuda que aparece.

Si se utiliza un componente de layout, éste también se visualiza en la vista de árbol. Sin embargo, aún existe la ventaja de que puede utilizar otros componentes que están subordinados al componente de layout y que se pueden desplegar y ocultar en la vista.