SAPUI5: Separar contenido mediante barras de iconos (Icon Tab Bar)

Habíamos estado viendo ejemplos de cómo crear una tabla con contenido estático y con contenido dinámico, obtenido a través de un servicio oData. La primera (la estática) la estábamos utilizando como si fuese una leyenda, para aprender a trabajar con tablas. La segunda nos servía para ver como enlazar una colección con la tabla.

Todavía nos falta hacer la tabla dinámica responsive. Pero hay que admitir que la aplicación quedaba más fea que un goblin con sarna, con las dos tablas juntas y sin separación. Así que en este tutorial vamos a separarlas y así aprendemos a usar un componente, el IconTabBar.

Nuestro objetivo es obtener algo así:

Al pulsar cada icono, veremos una tabla distinta y el resto hará ¡puf! y dejará de verse

De tal forma que, cuando pulsemos un icono, nos muestre sólo la leyenda, y cuando pulsemos el otro, la tabla con los datos. El tercero será para mostrar información adicional.

Podemos obtener información de este componente en la web de la SDK de SAP UI5 y ejemplos en la sección de Explored.

Así que vamos a comenzar. La aplicación que teníamos era la siguiente:

Realmente nos valdría cualquier aplicación cutrecilla que hagamos, incluso una que tenga dos simples textos, para meter cada uno en "un icono"

Así que vamos a usar el componente sap.m.IconTabBar. Este componente tendrá una serie de items, de los que vamos a ver dos, con las propiedades más interesantes para este caso:

• IconTabFilter, que será cada uno de los iconos que tenemos en la barra. Cada vez que se pulse uno de estos iconos, se mostrará el contenido que tiene asignado y se ocultará el contenido de los restantes IconTabFilter.
  En él podemos usar las siguientes propiedades, todas opcionales:
• icon para indicar el icono que se va a mostrar. Los iconos podemos encontrarlos en el Explorador de Iconos. Ojo, también es opcional, aunque sea una barra de iconos ;).
• text para añadir un texto debajo del icono.Un texto mediante la propiedad text.
• iconColor para aplicarle un color/estado al icono: Positive (verde), Critical (amarillo), Negative (rojo). De esta manera le podemos dar un significado de prioridad al icono. El color, por supuesto, dependerá de cómo hayamos configurado los estilos, el que indico es el de por defecto.
• count para informar de un dato numérico en el icono. Aquí normalmente, si ponemos algo, será el número de entradas de la tabla o lista que se va a mostrar al pulsar ese icono. De momento, para este ejemplo, sólo vamos a meter el número de entradas de la leyenda a capón, aunque más adelante de este mismo post os cuento algo interesante respecto al count.
• IconTabSeparator, que es un separador vertical que nos sirve para agrupar/separar visualmente los iconos. Este objeto va a venir sin propiedades ni contenido.

Para nuestro ejemplo, añadimos tres IconTabFilter y un IconTabSeparator. El tercer IconTabFilter lo he metido de forma simbólica, como si fuese una ayuda adicional de la aplicación. Una chorradilla, vaya, una excusa para usar el IconTabSeparator y que se entendiese mejor.

<IconTabBar>
  <items>
    <IconTabFilter>aquí es donde irá la primera tabla</IconTabFilter>
    <IconTabFilter>aquí ira la segunda tabla</IconTabFilter>
    <IconTabSeparator />
    <IconTabFilter>Aquí irá información explicativa</IconTabFilter>
  </items>
</IconTabBar>

Y tenemos algo como lo siguiente:

Hay tres "pestañas", una de ellas (la de Explicación) sin icono que,
además, está separada del resto por una barra vertical... ya sabéis, el IconTabSeparator.

Ahora lo que tenemos que hacer es meter, en cada IconTabFilter, el código correspondiente que queremos que se muestre al pulsar el icono:

<IconTabBar>
  <items>
    <IconTabFilter><Table>Tabla 1</Table></IconTabFilter>
    <IconTabFilter><Table>Tabla 2</Table></IconTabFilter>
     ...
  </items>
</IconTabBar>

Y nos queda:

Moviendo código como campeones

Con esto, habremos ordenado la aplicación para que luzca más bonita.

Hala, ahora cada tabla está metida en su icono correspondiente.

¡Buen trabajo! Good job! majQa'.

Ya ordenada la aplicación de tablas, sólo nos queda hacer la tabla de empleados responsive. Eso lo dejamos para otra semana.

Extra 1: count dinámico

Hemos dicho que el atributo count nos permite indicar un número informativo. Nos valdría, por ejemplo, para indicar el número de entradas de la tabla que va a mostrar, la de empleados, que se obtiene con esta url del servicio oData Northwind.

Así que podríamos pensar algo como "¡Genial! Lo enlazamos con count="{/Employee/$count} y así me muestra el número de empleados"...

Pues no, eso no nos valdrá :(. El count no es capaz de hacer la llamada oData, así que cargaría un modelo vacío.

Lo que habrá que hacer es enlazarlo con un modelo que calcularemos dentro del controlador (ya sabéis, el Javascript). Pero eso lo veremos en un próximo post, ¡que no me da la vida para más!

Extra 2: IconTabBar como filtro de tabla

El IconTabBar nos vale no sólo para mostrar u ocultar el contenido según pulsemos un icono u otro. Lo podemos usar para aplicar filtros (u otras operaciones) sobre contenido fuera del propio IconTabBar.

Por ejemplo, podríamos tener un IconTabBar con tres iconos y, después, una tabla que muestra un listado de productos. Uno de los iconos servirá para mostrar los productos de peso ligero, otro para los de peso medio y otro para los pesos pesados. Ese ejemplo lo podemos ver en el Explored.

Una única tabla, donde cada icono aplicará un filtro