✒️SAP BTPFIORI / La adaptación de la IU a los diferentes dispositivos Por Jose Baz Suarez

La adaptación de la IU a los diferentes dispositivos

---

1. Introducción

La adaptación de la Interfaz de Usuario (IU) en SAPUI5 busca garantizar que las aplicaciones funcionen correctamente en todo tipo de dispositivos —computadoras, tablets y teléfonos— ofreciendo una experiencia fluida, intuitiva y uniforme.

SAP Fiori y SAPUI5 están diseñados con el principio "responsive by design", lo que significa que las aplicaciones ajustan automáticamente su presentación según el tamaño, orientación y capacidades del dispositivo, sin necesidad de desarrollar versiones separadas.

---

2. Concepto de diseño responsivo

El diseño responsivo es la capacidad de una aplicación web para adaptarse a diferentes tamaños de pantalla, resoluciones y orientaciones.
Su objetivo es que la aplicación se vea y funcione correctamente en cualquier entorno de visualización.

📘 Tres áreas clave:

• Disposición (Layout): reubica y escala los controles de IU para optimizar el espacio.

• Medios responsivos: ajusta imágenes, fuentes y videos al tamaño del dispositivo.

• Media queries (CSS3): permiten aplicar reglas CSS específicas según el ancho, la orientación o la densidad de píxeles.

💡 Ventaja: una única app se mantiene una sola vez, pero se adapta automáticamente a todos los dispositivos.

---

3. Controles responsivos en SAPUI5

SAPUI5 facilita el diseño responsivo ofreciendo controles de interfaz adaptativos, que se ajustan al tipo de dispositivo (táctil o escritorio).

Ejemplo típico: las tablas (sap.m.Table)
En dispositivos móviles, las tablas son difíciles de visualizar por su ancho. SAPUI5 soluciona esto con dos mecanismos:

1. Ocultamiento de columnas:

   • Propiedad minScreenWidth: define desde qué ancho se muestra una columna.

   • Propiedad demandPopin: si es true, muestra los datos como valores secundarios dentro de un “pop-in” debajo de las columnas principales.

2. Área de Pop-in:
   Permite visualizar datos secundarios en pantallas pequeñas sin perder información.

📘 Ejemplo:
En PC se muestran todas las columnas; en móvil, solo las más importantes, y las demás aparecen en el área de pop-in.

💡 Beneficio: las tablas se adaptan automáticamente sin necesidad de código adicional.

---

4. Propiedades de visibilidad por tipo de dispositivo

SAPUI5 permite mostrar u ocultar elementos de la IU según el tipo de dispositivo mediante clases CSS:

📘 Ejemplo:
Un botón puede mostrarse únicamente en escritorio y ocultarse en dispositivos móviles, para simplificar la interfaz.

---

5. Propiedad demandPopin

Define cómo se comporta una columna cuando no hay espacio suficiente:

• true → Muestra la columna en el área secundaria (“pop-in”).

• false → Oculta completamente la columna.

💡 Esto mejora la legibilidad de tablas en pantallas pequeñas.

---

6. La API sap.ui.Device

SAPUI5 ofrece la API sap.ui.Device, que permite detectar información del dispositivo y adaptar dinámicamente la aplicación.

Datos que proporciona:

• Tipo de dispositivo (phone, tablet, desktop).

• Sistema operativo y navegador.

• Orientación (portrait o landscape).

• Compatibilidad táctil y tamaño de pantalla.

📘 Propiedades útiles:

Esto permite condicionar el comportamiento o apariencia de la aplicación según el contexto del usuario.

---

7. Creación del modelo de dispositivo

Para integrar la API del dispositivo en nuestra aplicación SAPUI5, se crea un modelo JSON que permite hacer data binding con las vistas.

Archivo model.js:

📘 Explicación:

• Se importa la dependencia sap.ui.Device.

• Se crea un modelo JSON con los datos del dispositivo.

• El binding se define como OneWay (solo lectura) para evitar modificaciones accidentales.

---

8. Uso del modelo en la vista

Una vez creado, el modelo device puede usarse para controlar propiedades en la vista, por ejemplo:

• Expandir o colapsar paneles según el dispositivo.

• Cambiar tamaños de controles.

• Mostrar u ocultar botones o secciones.

Ejemplo:

💡 En este ejemplo, el panel se abre en escritorio y se mantiene cerrado en teléfonos.

---

9. Buenas prácticas

• Diseñar las vistas con layout adaptativo desde el inicio.

• Probar la aplicación en distintos dispositivos o con emuladores del navegador.

• Usar minScreenWidth y demandPopin para optimizar tablas.

• Mantener el binding del modelo device en modo OneWay.

• Evitar controles superpuestos o textos largos que rompan el diseño.

• Priorizar la simplicidad y accesibilidad en pantallas táctiles.

---

10. Conclusión

El diseño responsivo es un pilar fundamental en las aplicaciones SAP Fiori.
A través de los controles adaptativos de SAPUI5 y la API sap.ui.Device, los desarrolladores pueden garantizar una experiencia consistente y eficiente en cualquier dispositivo.

Estas herramientas permiten crear interfaces inteligentes, flexibles y accesibles, sin duplicar código ni esfuerzo de mantenimiento.

---

📘 Preguntas de repaso

1. ¿Qué objetivo tiene el diseño responsivo?
   → Que la aplicación funcione correctamente en todos los dispositivos y resoluciones.

2. ¿Qué propiedad de tabla permite mostrar columnas secundarias en pantallas pequeñas?
   → demandPopin.

3. ¿Qué API de SAPUI5 se utiliza para detectar el tipo de dispositivo?
   → sap.ui.Device.

4. ¿Por qué se utiliza el binding OneWay en el modelo de dispositivo?
   → Porque el modelo es de solo lectura y no debe ser modificado desde la vista.

5. ¿Qué clase CSS permite mostrar un control solo en escritorio?
   → sapUiVisibleOnlyOnDesktop.