Aplicar estilo y disposición

Con SAP Build Apps, no solo puede crear rápidamente interfaces de usuario funcionales, sino también crear aplicaciones que parezcan atractivas, sean fáciles de usar y permitan que los componentes individuales se adapten visualmente a las necesidades del usuario y la empresa. Los temas desempeñan un papel importante aquí y se utilizan para determinar el diseño y la gestión de una aplicación. Muchas propiedades de estilo están disponibles en el menú para cambiar el aspecto de la aplicación.

La ventaja de los temas es que traen diferentes estilos, colores o fuentes con diferentes colecciones, por un lado, para garantizar que el diseño siempre aparezca consistente. Por otro lado, esto tiene la ventaja de que los desarrolladores pueden ahorrar tiempo y centrarse más en el desarrollo gracias al rápido ajuste y configuración con temas.

Para trabajar en el diseño y modificar el aspecto de su aplicación, puede utilizar el editor de temas. Puede acceder al editor de temas en la parte superior de la tarjeta de registro. Allí puede encontrar diferentes paletas de colores y seleccionar una ya disponible o crear una que se ajuste a sus necesidades o, por ejemplo, el diseño corporativo de su empresa.

SAP Build Apps se beneficia de colores inteligentes. Se pueden utilizar para optimizar la experiencia del usuario. Después de la configuración del color de contenido inteligente, los componentes se ajustan automáticamente al color de fondo, por ejemplo, si se modifica de un fondo claro a un fondo oscuro.

Con la variable de tema, el diseño también se puede separar de los colores, que luego adaptan todos los elementos de la aplicación como la opción seleccionada. Por ejemplo, puede establecer la configuración para el tamaño del texto, el borde, la sombra, el espaciado y la fuente con las opciones indicadas. También puede definir fácilmente nuevas variables de tema. La gran ventaja es que también puede hacer que todas las variables sean dinámicas aquí utilizando la opción de enlace.

Si desea utilizar los temas predeterminados, hay dos grupos de temas (tema universal y tema de SAP Fiori) disponibles actualmente, con varias posibilidades de diseño para adaptar el diseño de las aplicaciones a sus necesidades.

Al utilizar componentes, se debe hacer una distinción entre él como elemento de IU con sus propiedades y cómo se aprovisiona con respecto al estilo. El estilo y la apariencia de un componente no afectan a las funciones de este componente. Sin embargo, es importante dirigir la usabilidad deseada de la aplicación y el comportamiento de uso.

En el ejemplo de un componente de botón, puede contener una descripción y desencadenar acciones al tocar un botón, pero el mismo botón puede diferir en color, forma y tamaño. El diseño se refiere entonces por separado a la intención en una determinada situación. Esto puede ser, por ejemplo, que un botón se muestre en rojo o verde, dependiendo del estado en un proceso de pedido. Esto es para mostrar si toda la información está disponible y el botón se puede seleccionar. O, otra posibilidad es el tamaño, para indicar si es un botón principal importante para continuar una acción o un botón pequeño para un ajuste intermedio.

Según el tipo de componente, hay diferentes configuraciones de estilo que vienen con él. Pero el foco está en las clases de estilo. Por defecto, siempre hay definidos completamente, que puede seleccionar directamente, como Primario, Secundario, Terciario, Peligro y Éxito y, por lo tanto, ya tienen un estilo adecuado para muchos casos de uso.

Una clase de estilo define valores para todas las propiedades de estilo del componente, por lo que cambiar a una clase de estilo diferente cambiará completamente el aspecto de su componente.

También puede editar clases de estilo y crear las suyas propias. Esto ofrece la ventaja de que puede ajustarlo aún más precisamente con la posibilidad de establecer muchos otros ajustes de estilo, ya sea que ahora desee que el componente se redondee en las esquinas, que tenga una sombra o que se ajuste el tipo de fuente. Hay innumerables posibilidades. Hay una gran ventaja para cada ajuste que se puede introducir aún más dinámica por medio de un enlace.

Además de los componentes, una página en sí también se puede modificar en la pestaña Estilo. Por lo que puede hacer el fondo más atractivo ajustando el color de fondo de la aplicación o configurando el relleno. Pero también hay opciones avanzadas, como deshabilitar el desplazamiento de una página.

Sin embargo, en lugar de colorear el fondo, también puede seleccionar una imagen de fondo para la página entre la que puede elegir, por ejemplo, los objetos o la vinculación. Aquí, se utiliza entonces el contenedor, cuya disposición en sí aún se puede cambiar con respecto a los márgenes, con el fin de evitar opcionalmente un borde.

Puede utilizar la ficha Diseño para configurar el diseño de los componentes y el diseño de la página o componente seleccionado. El diseño de página se puede lograr eligiendo un espacio en un área libre. Esto permite cambiar la alineación de todos los componentes de esta página al mismo tiempo, que luego se alinean a la izquierda, al centro o a la derecha.

Otras categorías importantes en la ficha Diseño son la configuración de los componentes en términos de ancho y altura, así como la posición. También puede manipular su contenido allí con el índice Z que permite una mejor experiencia de usuario. Z-index es una propiedad que le permite controlar el orden de los elementos en su página. Funciona asignando a cada elemento un valor numérico (el índice z) y luego utilizando este número para determinar qué elemento se mostrará delante o detrás de otro elemento. Cuanto mayor sea el índice z, más cerca se mostrará un elemento al visor.

Cuando se selecciona un componente, aparecen opciones adicionales en la pestaña Diseño. Estas opciones están influenciadas por el concepto de espacio entre componentes. En lugar de utilizar márgenes, se introduce el concepto de brecha de componentes. El hueco de componente determina la separación entre componentes, actuando esencialmente como el "hueco" entre ellos. Este enfoque mejora significativamente el flujo de trabajo intuitivo para el espaciado de componentes, al tiempo que conserva la capacidad de personalizar cada aspecto según sea necesario. Además, el hueco de componente se comporta de manera consistente si el diseño es vertical u horizontal. Este enfoque unificado garantiza una experiencia fluida en la gestión del espaciado de componentes.