Son muchos los elementos UI que se pueden utilizar en una aplicación Web Dynpro, pero creo que uno de los más útiles es el UI Table. Este elemento se podría equiparar al table control que se usa en los module-pools de ABAP. El problema de estos era que apenas se les podía dar formato o color, lo cual hacía que la mayoría se decantase por los ALVs. Las tablas de WD tienen muchas más opciones y posibilidades de diseño que se pueden implementar de manera sencilla, haciéndonos olvidar los ALVs, más difíciles de crear y menos visuales en tiempo de diseño. En este primer artículo sobre estas tablas se muestran los pasos básicos para definirlas.
Ejemplos de un Table Control y un UI Table básicos.
El elemento Table actúa como elemento padre de los elementos TableColumn. Estos elementos hijos, por sí solos no muestran ni recogen información, si no que se les debe añadir un cell editor, que es una expresión abstracta para todos los tipos de elementos que pueden utilizarse en una columna dada. El cell editor por defecto es el TextView, sin embargo, hay otros elementos que pueden ser utilizados, como InputFields, Botones, CheckBoxes, DropDowns, Imágenes, Links, RadioButtons, Pulsadores…
Binding de una Tabla al Contexto
Como cualquier elemento que muestra datos de programa o de tablas, es necesario hacer un binding de contexto a la tabla (¿Qué es el binding?). Las tablas deben enlazarse a nodos con cardinalidad 0..n ó 1..n, ya que recogen varias líneas de una estructura. En la propiedad dataSource del elemento Table es dónde debemos relacionar el nodo.
Para mostrar (o escribir) la información del contexto, se debe crear un TableColumn por cada campo que queramos mostrar y a continuación añadir un cell editor del tipo que se desee a dicha columna. Es en las propiedades del cell editor donde se debe indicar el binding al atributo del contexto correspondiente.
Esta es la teoría básica, pero ya en una tabla de 10 columnas se hace demasiado laborioso definir las columnas una a una. Para ello el editor SAP de WD tiene un wizard que permite crear una tabla de una manera mucho más rápida. Al pulsar el botón elegimos la opción para crear una tabla. Después debemos seleccionar el nodo del contexto al que queremos hacer el binding, y acto seguido nos saldrán una lista con los atributos del nodo.
En la segunda columna se puede elegir el cell editor para cada columna, el cual no tiene por qué ser el mismo para todas. Con el checkBox de la tercera columna se indica si queremos que ese atributo se muestre o no en la tabla. Y por último, en la siguiente columna especificamos a que propiedad del cell editor vamos a relacionar el atributo, que normalmente si lo que se quiere es mostrar el valor será la propiedad text, o value si se trata de un inputField.
Al pulsar el botón de aceptar ya tendremos nuestra tabla creada en el layout de la vista. Una vez realizados estos pasos, es hora de tocar las diferentes propiedades tanto de la tabla como de las columnas para dar diferentes formatos y diseños. En próximos artículos mostraremos como utilizar estas propiedades.