✒️SAP Fiori El diseño con el layout flexible column

• Los controles de diseño

SAPUI5 ofrece numerosos controles de diseño para organizar la interfaz de usuario (UI). Los controles de diseño se encuentran en los espacios de nombres "sap.ui.layout" y "sap.ui.commons". Se recomienda utilizar el espacio de nombres "sap.ui.layout", ya que "sap.ui.commons" está obsoleto.

El control "sap.m.FlexBox" se utiliza como contenedor para un diseño de caja flexible, pero no es compatible con Internet Explorer 9.

Para definir estilos en la UI, se puede utilizar archivos CSS (Cascading Style Sheet). CSS permite cambiar los estilos y definir la apariencia de los controles.

Antes de agregar un diseño a la vista XML, es necesario hacer referencia al espacio de nombres XML correspondiente. Los diseños de "sap.m" se encuentran en el espacio de nombres "sap.ui.layout".

• El layout Flexible Column

El layout Flexible Column es una opción de diseño en SAPUI5 que reemplaza al diseño Split-Screen Layout/Master List. Es utilizado en SAP Fiori 3.0 para construir aplicaciones atractivas y flexibles. Permite mostrar varios floorplans en una sola página, lo que facilita la navegación rápida y fluida entre ellos.

El Flexible Column Layout ofrece diferentes diseños con hasta tres columnas. Los usuarios pueden expandir la columna en la que desean enfocarse y cambiar entre diseños, incluso ver la columna de la derecha en modo de pantalla completa. Es responsivo y se adapta tanto a dispositivos de escritorio como a dispositivos móviles.

El diseño se carga de manera optimizada según el ancho de pantalla disponible para brindar la mejor experiencia de usuario en cada dispositivo. Hay varios diseños disponibles, como OneColumn, TwoColumnsBeginExpanded, TwoColumnsMidExpanded, MidColumnFullScreen, ThreeColumnsMidExpanded, ThreeColumnsEndExpanded, ThreeColumnsMidExpandedEndHidden, ThreeColumnsBeginExpandedEndHidden y EndColumnFullScreen.

• El diseño de una vista usando el control flexible column

El texto habla sobre el diseño de una vista utilizando el control FlexibleColumnLayout. Se crea una vista principal que contiene dos columnas: una para mostrar el listado de productos y otra para mostrar el detalle de un producto seleccionado. Para lograr esto, se trabaja con la propiedad "layout" y se cambia su valor de "OneColumn" a "TwoColumnsMidExpanded". La vista principal tiene dos subvistas: "MasterProductos" para mostrar la lista de productos y "ProductoDetails" para mostrar el detalle de los productos.

• La lógica para mostrar la vista de detalles

Para mostrar la vista de detalles al hacer clic en un botón, se siguen los siguientes pasos:

En la vista "MasterProductos", se define que el tipo de producto es de navegación y se especifica el método a ejecutar al hacer clic.

El EventBus es como una estación de radio que transmite eventos en diferentes canales y permite a los interesados recibir notificaciones y utilizar los datos proporcionados.

Se recomienda usar la instancia del EventBus específica del componente en lugar del EventBus global para evitar conflictos de nombres y asegurarse de que los suscriptores se eliminen correctamente.

El EventBus permite disparar eventos personalizados mediante el uso de la función publish() y suscribirse a ellos mediante la función subscribe().

En el controlador de la vista principal, se realiza la suscripción al evento para mostrar los detalles del producto.

Se publica el evento en el controlador de la vista cuando el usuario hace clic en una fila de la tabla.

Es importante cancelar la suscripción al EventBus cuando se utiliza la aplicación en Fiori Launchpad para evitar errores.

Se recomienda agregar la cancelación de suscripción en la función onExit.

• El control para agregar pestañas

El texto habla sobre el control "sap.m.IconTabBar" que se utiliza para agregar pestañas a una aplicación. Este control representa una colección de pestañas con contenido asociado y se utiliza para la navegación o filtrado dentro de un objeto. Se menciona que existen diferentes tipos de IconTabBar según el contenido. Además, se muestra un ejemplo de dos pestañas en una imagen, una para mostrar la información general de un producto y otra para mostrar las medidas del mismo. También se muestra un fragmento de código XML donde se agrega el control IconTabBar con los ítems correspondientes a cada pestaña.

• La visualización de un control de forma dinámica

El texto habla sobre la visualización dinámica de un control en una aplicación. Se menciona la posibilidad de ocultar o mostrar un control mediante código, y se propone un ejemplo específico donde se oculta o muestra la solapa "Medidas" al hacer clic en un botón. Para lograr esto, se utiliza un modelo que controla la visibilidad del control a través de la propiedad "visible". Se explica que esta propiedad se puede manipular mediante código para determinar cuándo se mostrará o no el control. Además, se menciona que se aplica el mismo enfoque para ocultar la pestaña dentro de un filtro de pestañas. Por último, se muestra un fragmento de código que ilustra cómo obtener y modificar el valor de la propiedad "visible" del modelo para controlar la visualización de la pestaña "Medidas".

• El formateo de los campos

El texto habla sobre el formateo de campos en la interfaz de usuario utilizando formateadores en JavaScript. Se menciona que se puede crear una función de formateo para convertir los datos del modelo al formato deseado. Se muestra un ejemplo de formateo de fechas utilizando la clase Date y se explica que las propiedades enlazadas con un tipo definido se formatearán automáticamente al mostrarse en la interfaz de usuario. También se menciona la posibilidad de definir opciones de formato y restricciones para los valores de entrada. Se describen algunos tipos de datos predefinidos y se indica que es posible ampliarlos o implementar tipos de datos personalizados. Se explican las funciones formatValue, parseValue y validateValue que deben estar presentes en una implementación de tipo de datos.