SAPUI5: Adaptación al dispositivo

Como ya sabemos, o deberíamos saber, toda aplicación Fiori debe cumplir con los 5 principios que SAP nos repite constantemente:

En este post vamos a hablar un poco del segundo de ellos, donde se refiere a que dichas aplicaciones deben de ser capaces de adaptarse al dispositivo en el que se están ejecutando.

Y pese a lo que muchos creen, esto no es algo que siempre va intrínseco al utilizar las librerías SAPUI5 (cada vez más componentes pueden ser responsive por sí mismos), sino que en muchas ocasiones el programador debe ser el que le dé esa adaptabilidad a la aplicación.

Por lo tanto SAPUI5 soporta varios métodos para adaptar las aplicaciones a diferentes sistemas operativos y dispositivos:

• Controles con adaptación al dispositivo incorporada: por ejemplo

. sap.ui.layout.form.Form: se puede adaptar al tamaño de la pantalla, particularmente cuando usamos el ResponsiveGridLayout.

. sap.m.Table: este control dispone de una determinadas propiedades incorporadas para poder jugar con los diferentes tipos de pantallas (minScreenWidth), y en base a su valor indicar qué columnas de la tabla se muestran, cuáles no o tiene la posibilidad de indicar que se muestren pero no como columna (demandPopin)

Tablet

Teléfono

• Device API (sap.ui.Device):  es una API que nos ofrece información en tiempo de ejecución sobre características del dispositivo como puede ser el sistema operativo, la versión, el navegador, la orientación, el tamaño de la pantalla, si es táctil, etc.

Toda esa información la podemos tener disponible en un modelo JSON que normalmente ya nos viene creado al crear nuestra aplicación desde una plantilla como Device Model. Este modelo se suele instanciar a nivel Component.js para que esté disponible en toda la aplicación. Evidentemente este modelo debe ser declarado como de solo lectura.

A partir del acceso a este modelo en cualquier punto de la aplicación, nos permitirá tomar decisiones acerca de la adaptación de nuestros controles en tiempo de ejecución.

• Densidades de contenido: SAPUI5 dispone de diferentes densidades para los controles para permitir adaptarlos a los dispositivos:

. Densidad ‘Cozy’: se trata de un diseño grande, pensado para dispositivos táctiles donde sea preciso un mayor espacio a la hora de tener que seleccionar. Densidad por defecto para la mayoría de los controles, especialmente librería sap.m.

. Densidad ‘Compact’: se trata de un diseño reducido, con las dimensiones de los controles y el espacio entre ellos más pequeño. Pensado para dispositivos manejados con el ratón.

               Como hemos dicho anteriormente la densidad ‘Cozy’ está por defecto para controles de la librería sap.m, pero si vamos a combinar controles de diferentes librerías nos conviene utilizar las clases CSS que le dan a los controles una determinada densidad de contenido (sapUiSizeCozy o sapUiSizeCompact). Recordad de las clases de Densidad CSS se heredan para los controles hijos, pero para los controles que están en el nodo raíz como dialogs u otros popups hay que darles estas clases CSS de forma directa.

Y hasta aquí el post de hoy, espero que os sirva a la hora de adaptar vuestras aplicaciones.