miércoles, 21 de febrero de 2018

Crear una aplicación SAPUI5 responsive con Grid (y II)

Para poder hacer una aplicación SAPUI5 responsive a nuestro gusto, podíamos usar el componente Grid, como vimos en el post anterior. Lo malo de esa aplicación que nos creamos, es que todos los elementos ocupaban el mismo número de columnas.

Teníamos dos elementos, los datos de un autor y su bibliografía. ¿Pero qué pasa si queremos que los primeros ocupen menos ancho en la malla que los segundos? Pues que vamos a tener que aprender a usar un nuevo elemento de layout, el sap.ui.layout.GridData.

Este elemento nos va a permitir definir el comportamiento específico de un componente dentro de un elemento Grid, mediante los atributos:

  • span, spanXL, spanL, spanM y spanS para el ancho de columnas.
  • indent, indentXL, indentL, indentM e indentS para el sangrado.
  • visibleXL, visibleL, visibleM y visibleS para ocultar elementos.

Para ello, dentro del propio componente, le añadimos el elemento GridData de la siguiente forma:

<Componente >
   <Elementos dentro del componente >
   <Más elementos>
   <layoutData>
      <l:GridData span="XL3 L3 M6 S12" indent="XL0 L0 M0 S0" visibleS="false"/>
   </layoutData>
</Componente>

NOTA: Como en el post anterior, <l:GridData> usa l: porque he definido la abreviatura xmlns:l="sap.ui.layout".

Nuestro objetivo: Conseguir resultados como el siguiente:



Redefinir con span e indent


Por ejemplo, si al elemento Bibliografía de William Gibson (y sólo a ese elemento) le queremos modificar el comportamiento, lo haríamos así:

Como William Gibson es nuestro Dios, a su bibliografía le asignamos más espacio: Para L y M ocupará 7 columnas y no tendrá sangrado. ¡Alabado sea el Neuromante!

Y el resultado sería el siguiente: La bibliografía de W. Gibson tendrá un comportamiento diferente:

Ahora los libros de W. Gibson se leen mucho mejor

Redefinir algunos tamaños pero no todos


Aquí, sin embargo, tenemos un problema. Si sólo queremos modificar el ancho para un determinado tamaño (por ejemplo, para L), al hacerlo así estamos redefiniendo todo el defaultSpan. Sí, vale, sobrescribimos con los mismos valores, pero si modificamos en algún momento el defaultSpan de Grid, nos tendremos que preocupar también en redefinir cada elemento con su propio span e indent.

Para evitar esto, podemos hacerlo de dos formas:

  • Definir específicamente un tamaño, ya sea el ancho (spanXL, spanL, spanM o spanS) o el sangrado (indentXL, indentL, indentM o indentS). En este caso, asignamos al atributo el número de columnas que ocupa, como por ejemplo
<l:GridData spanL="7" />

  • Definir específicamente un tamaño o el sangrado con span e indent, pero indicando sólo los tamaños que queremos modificar. Con el mismo ejemplo anterior, podríamos obtener el mismo resultado con:
<l:GridData span="L7" />

Eso sí, si lo que queremos es redefinir un indent para llevarlo a 0, lo haremos con indent="L0" en lugar de indentL="0", porque en este segundo caso puede que lo tome como valor inicial y no sobrescriba al defaultIndent.

Así que con este código para la bibliografía de Philip K. Dick:

Aquí ignorar el atributo visibleS, que lo vamos a ver más adelante

Obtendríamos el mismo resultado que para la bibliografía de W. Gibson para tamaño L:


Pero no habríamos modificado para tamaño M:


Ocultar un elemento


La última opción que tenemos es ocultar un elemento para un determinado tamaño. Eso lo vemos en el código anterior, y lo conseguimos con el atributo visibleS="false" (visibleXL, visibleL y visibleM para otros tamaños, o visibleS="true" si lo que queremos es hacerlo visible). De esta manera podemos ocultar elementos que no queremos mostrar en determinados tamaños si no nos aportan información.

Para el ejemplo anterior, si redujésemos el tamaño a S, la bibliografía de P.K.Dick se ocultaría, y tendríamos:



Sí, la aplicación nos ha ido quedando más chula, ¿verdad? Ahora, con esto, sólo nos hace falta mezclar con llamadas oData y haciendo binding, pero eso ya se queda en vuestras manos.

7 comentarios:

  1. Genial, muchas gracias . Haran uno de tablas? eso tambien es muy usado y viene el enredo cuando se crean columnas o filas dentro de ellas y asi. Saludos y gracias!

    ResponderEliminar
    Respuestas
    1. Hola Naoto,

      Ya hay una serie de post sobre tablas, era una serie de 4 post y en el ultimo es donde se hablaba de las tablas responsive

      https://uxsap.blogspot.com.es/2017/07/crear-tabla-3.html

      Eliminar
  2. Tengo una duda es que no se si lo estoy haciendo mal o no entendi bien estoy tratando de hacer un grid pero que la distribucion de las 12 columnas sea 3 3 y 6 (todos los elementos en la misma linea) y en extra largo y largo y en mediano 6 6 y 12 (dos elementos en una linea y otro en otra) y chico todo 12 12 12 (un elemento por linea por decirlo asi)

    Pero me confundi todo e hice una ensalada de grid y span jaja xD como seria en ese caso?

    ResponderEliminar
  3. ¿Pero que tienes, tres elementos? Si es así, para el primero y el segundo tendrías que ponerle, en GridData, span="XL3 L3 M6 S12" y al tercero, span="XL6 L6 M12 S12".

    ResponderEliminar
    Respuestas
    1. Si tengo 3 listas dos deben ser chicas y una mas grande porque tendras mas informacion

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Listo ya lo logre muchas gracias , intente poner mi codigo pero no aparece jeje pero si lo hice como indicas, gracias :D

      Eliminar