Usando el control BusyBoxDotNet

Introducción

Hola que tal, vamos a revisar un control bastante útil para ASP.NET 2.0, este control lo puedes descargar desde la pagina del autor: http://busyboxdotnet.qsh.eu/Projects.aspx y te será de mucha utilidad para  mostrar un efecto visual de alto impacto en tus aplicaciones Web.

La razón...

Si no estas familiarizado con el desarrollo de sitios Web, creo que por lo menos has navegado por un par de decenas de ellos, y te has fijado que en algunos, al procesar los datos, la página se queda en blanco mientras se esta esperando la respuesta del servidor verdad?  Con BusyBoxDotNet esto se acabó, este control nos permite mostrar en pantalla mientras se realiza, por ejemplo, un postback una ventana en donde se le indica al usuario que la página aun no se carga debido a que esta procesando una solicitud.

De que manera?

BusyBoxDotNet nos  provee de  una  ventana emergente, de la siguiente forma.

Si no te gusta, puedes modificarla a tu gusto,  según el mismo autor, las características principales de este webcontrol son:

• Una muy buena integración con VS 2005, no necesita javascript adicional, ni CSS , ni HTML adiciona; todo esta embebido en un control que es muy simple de adicionar a nuestro proyecto.

• La compatibilidad, ha sido testeado en firefox/mozilla, Internet Explorer, Opera, Netscape Navigator.

• Se puede modificar el aspecto visual y funcional a gusto!

Instalación.

Paso 1

Primero lo primero, la descarga del Control, has clic acá: Bajar BusyBox

Lista de archivos

Paso 2

Necesitas agregar el control a la barra de controles de Visual Studio 2005, para ello pincha con el botón derecho sobre la Toolbar y selecciones “Choose ítems” o Elegir elementos, luego exploras tu disco duro hasta encontrar la carpeta en donde descomprimiste el archivo y seleccionas BusyBoxDotNet.dll.

Una vez seleccionado, podremos ver en nuestra Toolbar los elementos adicionados.

Agregar el control a tu WebForm

Al agregar el control BusyBox a tu webform, automáticamente se crearan las referencias hacia los archivos binarios, y además, el control de consultará si deseas registrar el HTTPHandler  en tu web.config automáticamente, que mejor!, eso si, si quieres agregarlo a manualmente, deberás escribir las siguientes líneas en tu web.config:

<httpHandlers>
    <add verb="*" path="BusyBoxDotNet.axd"
        type="BusyBoxDotNet.ResourceHttpHandler, BusyBoxDotNet" />
</httpHandlers> 

    

A Probarlo!

Para probarlo, podemos agregar un boton webcontrol en nuestro webform ( o cualquier control que genere un postback), ya que vamos a ver como funciona BusyBoxDotNet al momento del postback.

Seguramente casi no alcanzaste a ver la ventana emergente de BusyBox, por lo que puedes agregar el siguiente código en el botón para producir una pausa por 3 segundos.

private void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
}

Personalizando

Existen varias situaciones en donde vas a querer personalizar este control, como la interfaz gráfica  así como también el cuando se va a mostrar la ventana.

Según el autor de este muy buen control, una de las propiedades mas importante es ShowBusyBox, los valores que acepta esta propiedad son:

OnLeavingPage :  La ventana se mostrará cuando se deje una pagina, es decir, cuando se hace un postback y/o cuando se esté cargando otra pagina.

OnPostBackOnly: La ventana se mostrará cada vez que se haga un PostBack al servidor.

OnLoad : Se muestra la ventana cuando la pagina comienza a realizar el render y se oculta cuando el render termina. Debes modificar la propiedad OverLay a Falso para poder utilizarlo en este evento

Custom: Hay veces que vas a querer mostrar la ventana es un evento específico de un control, para esto, se invoca a la propiedad ShowFunctionCall:

private void Page_Load(object sender, EventArgs e)
{
    Button1.Attributes.Add("onclick", BusyBox1.ShowFunctionCall);
}

Por mi parte, lo estoy utilizando para mostrar un mensaje al usuario mientras el archivo que él seleccionó, se esta subiendo al servidor.

Queda muy bueno verdad? 
Bueno, ahora que sabemos algo más de este excelente control, descarguémoslo, démosle gracias al Autor Simone Busoli , cooperando con su proyecto para que continue brindándonos controles tan buenos como este.

Para ver una demo con todas las propiedades, visita la pagina del autor:

http://busyboxdotnet.qsh.eu/Demo.aspx

Saludos,
Gonzalo