SAPUI5: Crear una tabla (I, tabla con datos estáticos)

Uno de los elementos que más podemos usar en SAP UI5 para mostrar mucha información de forma tabulada es una tabla: Nos alinea el contenido y la podemos hacer responsive para que se adapte a las dimensiones del dispositivo.

Así que vamos a seguir una serie de pasos para ver como usar las tablas. Para ello voy a utilizar el elemento sap.m.Table, tabla específica para móviles, que es la que más nos va a convenir cuando queremos que la aplicación se use en cualquier tipo de dispositivo. Si fuésemos a necesitar una tabla más compleja para el ordenador de escritorio, usaríamos sap.ui.table.Table.

Este ejemplo lo haremos en tres artículos consecutivos:

• En el presente, crearemos una tabla con datos estáticos, es decir, que nunca van a cambiar. De esta manera aprenderemos los conceptos básicos.
• En el siguiente artículo, enlazaremos una tabla con un servicio oData, para ver como se genera el contenido de la tabla de forma dinámica.
• En el último artículo, haremos nuestra tabla adaptativa (responsive), para que la información que muestre dependa del dispositivo usado.

Crear una tabla con datos estáticos

Pues lo dicho, manos a la obra. Nuestro objetivo final para estos tres artículos es crear una tabla para mostrar los datos de la colección Employees del servicio oData de Northwind.

Pero antes de eso, en el artículo actual, nos crearemos una especie de leyenda para indicar que significa cada columna. Será una tabla estática, tendrá un número fijo de columnas y filas y los textos mostrados serán siempre los mismos.

Posiblemente lo más cómodo sería crear algún tipo de leyenda o un formulario en lugar de una tabla pero... oye, mira lo que dice el título: Crear una tabla. Así que hala, a crear la tabla.

Esta hoja de cálculo cutrecilla es lo queremos mostrar en una tabla en SAPUI5

Abrimos el Web IDE para crearnos una aplicación de tipo SAP UI5 Application, sin preocuparnos de servicios oData por el momento. Ese tipo de aplicación nos pide únicamente el nombre de la vista inicial, que yo, en un alarde de originalidad, he llamado Tabla.view.xml.

Una vez creada la aplicación, creamos una tabla en la vista. Podemos hacerlo a mano, como unos campeones, o podemos aprovecharnos del Layout Editor, que se puede abrir pulsando sobre el nombre de la vista, botón derecho, "Open with -> Layout editor". Con esta opción podemos añadir un elemento Table de forma rápida para que nos genere el esqueleto.

Así es como se muestra la vista en modo Layout editor

El código que nos genera, que he agrupado un poco para poder verlo en una única captura, y teniendo en cuenta la abreviatura xmlns="sap.m", es el siguiente:

¿Y qué es lo que conforma la tabla?

La tabla va a estar definida por columnas y filas. Las columnas se definen dentro del agregado columns, y las filas del items.

<Table>
<columns>aquí las columnas </columns>
<items>aquí las filas</items>
</Table>

Podemos poner el columns antes o después del items, como más nos guste. A mí, personalmente, me gusta más poner delante el columns. me parece más ordenado (se ve antes la estructura de la tabla que los datos), pero ahora me ha vencido la pereza y he usado el Layout editor :D.

Columnas

Las columnas nos van a servir para tres cosas: Dar estructura a la tabla (cuantas columnas hay, cómo se alinean, su comportamiento de adaptabilidad, etc.) y poner los títulos de los encabezados y el pie de la tabla.

Todas las columnas las pondremos dentro del agregado columns:

<columns>...</columns>

Para cada columna que tenga la tabla, usaremos un elemento de tipo sap.m.Column y dentro del mismo indicamos el título con la etiqueta header y el pie con la etiqueta footer.

En nuestro ejemplo vamos a crear los encabezados (header) con elementos de tipo sap.m.Label, que va a ser lo más sencillo.

Además, vamos a alinear la columna "Posición" a la derecha (al final de la columna), para que quede bonico. Eso se consigue con el atributo hAlign="End".

Así que para nuestro ejemplo, en el que tenemos tres columnas, nos quedará algo así:

Sí, el texto lo he añadido sin internacionalización :P

Filas

Ahora vamos a por las filas, para lo que usaremos el agregado items. Es ahí donde vamos a indicar los datos a mostrar.

<items>....</items>

Cada fila, dentro de items, estará contenida en un elemento de tipo sap.m.ColumnListItem. Olvidémonos de cabecera y pie, ya que estos no son filas, sino que forman parte de la configuración de las columnas.

Como nosotros teníamos seis filas, nos crearemos seis ColumnListItem.

<items>
  <ColumnListItem>fila 1</ColumnListItem>
  <ColumnListItem>fila 2</ColumnListItem>
  <ColumnListItem>fila 3</ColumnListItem>
  <ColumnListItem>fila 4</ColumnListItem>
  <ColumnListItem>fila 5</ColumnListItem>
  <ColumnListItem>fila 6</ColumnListItem>
</items>

Dentro de cada una fila, tenemos que especificar las celdas. Eso lo hacemos dentro de las etiquetas <cells></cells>. Cada elemento que creemos aquí dentro, será una celda de esa fila, pudiendo haber tantas celdas como columnas creadas en el paso anterior.

Por tanto, como cada fila va a tener tres celdas (porque hemos definido tres columnas), el contenido lo mostraremos usando tres elementos de tipo sap.m.Text.

<items>
  <ColumnListItem>
    <cells>
      <Text /><Text /><Text />
    </cells>
  </ColumnListItem>
...


¿El resultado? El siguiente:

Cada ColumnListItem es una de las seis filas que queríamos mostrar.
Las tres últimas las tengo comprimidas en el Web IDE, por eso no se ve información

Aunque en la celda de "posición" no hemos indicado su alineación, como la columna tiene alineación "al final", la celda correspondiente de cada fila tendrá la misma alineación.

Resultado final

El resultado final será el siguiente: Una tabla con tres columnas, un encabezado y seis filas. Y la columna central (Posición), alineada al final.

Ay, pero que requetebonita que eres

Complicando las celdas

¿Y qué ocurre si queremos poner varios elementos en una misma celda? Por ejemplo, imaginemos que en la primera fila, segunda columna (la celda de posición), queremos poner una imagen y un texto.

Si añadimos todos los elementos sin más, sólo se mostrarán tantos como columnas haya, el resto no se mostrarán.

Que se ve así:

¿Dónde demonios se ha metido la descripción de la primera fila?

La solución pasa por usar un elemento de tipo Layout, dentro del cual incluiremos los elementos que necesitamos. Por ejemplo, nos valdría una "caja horizontal" (sap.m.HBox) y, dentro de ella, la imagen y el texto. En ese caso, todo el conjunto que hay dentro del HBox se tratará como una única celda.

Hay que ponerla de tipo displayInLine porque si no, no nos lo alinea como queremos

¡Y con eso ya tenemos lo que buscábamos!

Y lo siguiente es...

El siguiente paso es crear una tabla recuperando los datos de un servicio oData. ¿Pero cómo vamos a saber cuantas filas tenemos que crear? Que a lo mejor el servicio un día nos devuelve 20 entradas y otro, 40.

Pues eso lo veremos en el siguiente artículo.