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:



miércoles, 14 de febrero de 2018

Crear una aplicación SAPUI5 responsive con Grid (I)

Siempre nos han dicho eso de que SAPUI5 es responsive, que sus aplicaciones se van a adaptar a las dimensiones de nuestro dispositivo. Pero debemos tener una cosa clara: Para que eso ocurra, el comportamiento lo debemos programar nosotros.

No, no vale con hacer una aplicación con muchos campos y esperar que ellos se muevan y se remuevan para adaptarse. Puede que lo hagan, pero no como nosotros queramos. Algo tendremos que hacer.

Pues eso es lo que vamos a ver, cómo crear una aplicación sencilla, para mostrar a nuestros autores favoritos y algunos de sus libros. Va a ser una aplicación estática, no vamos a pelearnos con llamadas a servicios oData ni nada de eso, pero con el ejemplo luego lo podríamos adaptar a cualquier cosa que queramos.

Y nos quedará algo como esto:


¿Y qué elemento vamos a utilizar para ello? Uno de tipo layout llamado sap.ui.layout.Grid.

Los pasos serán:


  • Crear el elemento sap.ui.layout.Grid y asignarle dentro el contenido.
  • Definir cuanto ocupa cada elemento dentro del Grid con defaultSpan="XL3 L3 M4 S12".
  • Agrupar los elementos que van dentro de una misma columna mediante un contenedor (List, Form, VerticalBox, etc.).
  • Definir el sangrado de cada elemento dentro del Grid con defaultIndent="XL2 L2 M1 S0".
  • Definir en ancho de cada elemento de forma individual, pero eso ya lo veremos en el siguiente post.

martes, 13 de febrero de 2018

Navegando entre apps

Presentación


Hola a todos, mi nombre es Carlos Blanco. Lo primero que me gustaría hacer es agradecer a Jorge la posibilidad de colaborar en este blog, en mi opinión de lo mejorcito que hay sobre SAPUX en castellano. 

Voy a tratar de aportar mi granito de arena explicando cómo implementar determinadas casuísticas que se me han ido presentando en mis ya más de 3 años de experiencia peleándome con todo lo relacionado con SAPUX.

En este mi primer post, os voy a hablar acerca de la navegación entre aplicaciones SAPUI5. Vamos a utilizar como ejemplo una aplicación de cliente que muestra un listado de pedidos realizados y sobre el que podemos realizar una serie de filtrados sobre determinadas características de la entidad relacionada. Al presionar sobre cualquiera de los pedidos vamos a navegar a otra aplicación de cliente donde se ve el pedido más en detalle e incluso podemos realizar acciones de modificación o copia del pedido. 


Un nuevo miembro más en la familia: Carlos Blanco

Mi antiguo compañero de trabajo y amigo (pero no antiguo amigo, que lo de antiguo se aplica sólo a compañero) Carlos Blanco se nos une para contar sus experiencias en estas cosas de SAPUI5, Fiori y demás, con un artículo muy interesante para navegar entre aplicaciones.

Así que, ¡bienvenido Carlos!

Por favor, os pido que votéis su aportación eligiendo una de las dos siguientes opciones:

  1. El artículo SI ha sido muy interesante y queremos que siga publicando más.
  2. El artículo NO tiene desperdicio y no queremos que deje de publicar.

Gracias por unirte al club, Carlos.

miércoles, 31 de enero de 2018

SAPUI5: Varios botones usando el mismo onPress

En el post anterior, vimos cómo crear un botón mediante Javascript, en lugar de hacerlo en la vista XML. Le añadimos un texto y una función que se ejecutaba cuando se pulsaba el botón, con el evento press.

Ahora vamos a ir un paso más allá, vamos a crear dos botones que hacen prácticamente lo mismo: Al pulsar cada uno de ellos, crea un nuevo botón con un texto. Si hemos pulsado el primer botón, el texto del botón será "Hola" y si hemos pulsado el segundo botón, el texto será "Mundo".

Además, si pulsamos alguno de los botones recién creados, mostrarán el texto "Hola" o "Mundo", respectivamente.



La funcionalidad para cada botón es, a todos los efectos, la misma, y sólo cambia el texto mostrado. Si vamos a añadir una funcionalidad nueva en un futuro, habrá que aplicarla igualmente a los dos botones.

El siguiente código haría lo que estamos buscando. A cada uno de los dos botones le añadimos como manejador del evento press una función específica (ver attachPress). Por tanto, si queremos añadir una nueva funcionalidad, habrá que replicarla dos veces.