Skip Ribbon Commands
Skip to main content

Borja del Valle

:

Home
Blog de Borja del Valle
 

 Posts

 
October 01
Cómo crear un árbol XHTML con jquery

En muchos de los proyectos en los que he participado, ya sea el desarrollo de una intranet o un portal público, casi siempre aparece la necesidad de presentar un organigrama de la entidad, un árbol con los departamentos o algo por el estilo. Dejando a un lado la parte interna (cómo obtener la información) y centrándonos solo en la capa de presentación, dibujar un organigrama que permita la interacción del usuario se hace muchas veces tedioso, ya que hay que estar incluyendo llamadas javascript en los diferentes nodos del árbol y escribiendo complejas funciones que muestren u oculten las ramas del árbol.

Y cuando trabajamos en un entorno público, tenemos que añadir la necesidad de que los árboles que creemos deben de ser accesibles.

Todo esto es verdad siempre que no conozcamos o no nos haya dado nunca por hacer uso de jquery (como me pasaba a mi hasta hace unas semanas). Esta librería de javascript nos facilita mucho el trabajo.

Por ejemplo, para pintar un árbol de departamentos vamos a utilizar una lista formada por elementos ul y li, del siguiente modo.

clip_image002

La lista anterior cumple los requisitos de accesibilidad, pero aparece totalmente desplegada al usuario.

clip_image004

Para permitir que el usuario seleccione que elementos quiere desplegar vamos a utilizar jquery. Esta librería, que podemos descargarla desde la aquí, es necesario enlazarla dentro de la cabecera de la página.

clip_image006

El código que permitirá que las ramas del árbol se puedan abrir y cerrar mediante javascript es el siguiente:

clip_image008

El proceso es el siguiente:

1. La ejecución se realiza cuando la página ha sido cargada completamente

clip_image010

2. Se ocultan todos los elementos de tipo ul que cuelgan de algún elemento

clip_image012

3. Se asigna una función al evento onclick de todos los elementos li del árbol, encargada de mostrar u ocultar los submenús (mediante la función toggle).
clip_image014

4. La última función es muy importante, ya que evita que cuando se pulse sobre un enlace se ejecute la función onclick del elemento li que contiene el enlace y que evitaría que se produjera la redirección a la página indicada.

clip_image016

Y no hay que hacer nada más… nos podemos olvidar de meter complejas llamadas en todos los nodos del árbol, quedando el código XHTML mucho más sencillo de leer.

September 16
[MOSS] Análisis y rendimiento de SPList.Items.Add

En muchos de los artículos acerca de cómo mejorar el rendimiento de nuestros desarrollos basados en MOSS se hace mención de propiedad SPList.Items. El uso incorrecto de esta propiedad puede hacer que el rendimiento de nuestro desarrollo caiga en picado a medida que aumenta el número de elementos de la lista sobre la que estamos trabajando. Un ejemplo como un código muy simple pero incorrecto puede provocar estos problemas de rendimiento cuando trabajamos con listas grandes lo podemos encontrar en este post de Enrique Blanco.

En resumen, el problema radica en el acceso a la propiedad SPList.Items provoca que se cargue en memoria todos los elementos de la lista. Esto supondría una gran penalización en listas pequeñas si no fuera pro que cada vez que accedemos a un elemento de la lista mediante su índice (SPList.Items[i]) estamos volviendo a cargar por completo los elementos de la lista.

SPList.Items.Add()

Por esta razón, es necesario utilizar la propiedad Items solo cuando sea necesario y teniendo muy claro su funcionamiento. Pero, ¿qué hacemos cuando queremos añadir un elemento a una lista? En este caso, obligatoriamente es necesario acceder a la colección de elementos de la lista para llamar al método Add.

clip_image002

Buscando un poco de información que me aclarara el tema encontré el siguiente artículo, en el cual se habla de un método más eficiente para realizar la inserción de un elemento dentro de una lista de MOSS. El código que se presenta como más eficiente consiste en ejecutar una consulta vacía sobre la lista con el objetivo de no devolver ningún elemento, ya que no es necesario que los elementos estén cargados en la lista para poder realizar una inserción en esta.

clip_image004

Para comprobar la mejora de rendimiento hemos realizado una prueba de carga sobre una aplicación. Dicha aplicación consistía en una página con un WebPart encargado de añadir un elemento a una lista. Este elemento se añadía mediante uno de los dos métodos anteriores dependiendo de un valor de configuración.

 clip_image006

Los resultados obtenidos en la ejecución de las pruebas de carga son los siguientes:

image En el eje horizontal aparecen el número de inserciones que se realizan en 2 minutos mientras que en el eje vertical aparecen, en primer lugar, el número de usuarios concurrentes y en segundo el número de elementos con los que previamente se había cargado la lista. Como se puede observar en la gráfica no se observa una gran diferencia entre los resultados obtenidos con ambos métodos de inserción.

Cómo funciona la propiedad Items[i]

Mediante el uso de reflector es posible obtener el código de la propiedad Items. Observando el código de la propiedad vemos que internamente realiza una consulta recursiva sobre todos los elementos de la lista mediante el objeto SPQuery, llamando al método GetItems.

clip_image010

Este método genera una colección de elementos de lista que se cargan a partir de los la consulta recibida.

clip_image012

La colección creada no carga los valores dentro de la lista, si no que solo inicializa propiedades internas.

clip_image014

Aquí terminan las llamadas que se realizan cuando se accede a la propiedad ítems. Como se puede observar, la llamada a la propiedad Items no realiza la carga automática de los elementos de la lista. Desensamblando el código de la propiedad SPListCollection.Items[int] obtenemos el momento en el cual es cargada la lista:

clip_image016

¿Por qué no es eficiente la utilización de Items[int] dentro de un bucle? La respuesta es que en cada paso bucle se está realizando una nueva consulta, al accederse a la propiedad Items, que como hemos visto anteriormente, genera la consulta SPQuery, aunque esta no se ejecuta hasta que se accede a la propiedad Items[int]. Por esta razón el añadir un objeto a una lista no llega a ejecutar ninguna consulta, no produciéndose ninguna penalización en función del número de elementos de la lista.

 

 About this blog

 
About this blog
Welcome to SharePoint Blogs. Use this space to provide a brief message about this blog or blog authors. To edit this content, select "Edit Page" from the "Site Actions" menu.