Colabora .NET

Usando el control BusyBoxDotNet

Mejorando la experiencia entre Postback

 

Fecha: 11/Oct/2006 (09 Octubre 2006)
Autor: Gonzalo Pérez C.- [email protected]

En Chile también se puede!

 


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.

Preview de BusyBoxDotNet

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

Lista de archivos del control BusyBoxDotNet

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.

Instalar el control en la toolbar de VS 2005

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

Componentes agregardos a la toolbar

 

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> 

    Referencias para VS 2005
 

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);
}
a... es que tengo que seguir escribiendo para que veas el efecto, si no escribo al menos tres líneas, no se notará que el texto está totalmente justificado (o alineado, si lo prefieres).

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.

Ejemplo de utilización de BusyBox

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

 



ir al índice principal del Guille