Archivo de Junio 2008


Deshabilitar controles de la página hasta que finalicen los UpdatePanels

Jueves, 19 Jun, 2008 @ 00:30 | Por Gustavo Cantero (The Wolf) | AJAX, ASP.NET

Hace unos meses comenzamos a desarrollar para un cliente una aplicación web más o menos compleja, con .NET 3.5 y bastante uso de AJAX. En esta aplicación hay páginas que utilizan varios UpdatePanels, y algunos de estos realizan procesos complejos que pueden llegar a demorar varios segundos, es por esto que nuestro cliente nos pidió que, al iniciar estos procesos, se bloquee la página para que el usuario no pueda ejecutar ninguna otra acción en la misma hasta tanto no finalice el proceso pendiente.  Obviamente no queríamos ejecutar un script “a mano” cada vez que se ejecutaba una acción y otro al finalizar la misma, así que buscamos la manera de automatizarlo un poco.  Comenzamos buscando los eventos propios del motor de AJAX de Microsoft® y encontramos que podemos capturar los del RequestManager cuando inicia una petición al servidor y cuando la misma finaliza.  Esto lo podemos hacer utilizando los métodos add_initializeRequest y add_endRequest de la instancia actual del PageRequestManager, la cual podemos obtener con el siguiente código: Sys.WebForms.PageRequestManager.getInstance().
En el primer evento mostrábamos un ModalPopUp (control que muestra una “ventana” en la página y deshabilita todos los demás controles de la misma) de la librería ASP.NET AJAX Control Toolkit de Microsoft®, el cual contenía un mensaje que decía “Aguarde un momento…”, y en el segundo evento lo cerrábamos.  A continuación se muestra como quedaba el PopUp en la página:

<cc1:ModalPopupExtender ID="mpeLoading" runat="server" BehaviorID="idmpeLoading" PopupControlID="pnlLoading" TargetControlID="btnLoading" EnableViewState="false" DropShadow="true" BackgroundCssClass="ModalBackground" />
<asp:Panel ID="pnlLoading" runat="server" Width="300" Height="50" HorizontalAlign="Center" CssClass="ModalPopup" EnableViewState="false" Style="display: none">
<br />Aguarde un momento...</asp:Panel>
<asp:Button ID="btnLoading" runat="server" Style="display: none" />

y acá está el código JavaScript:

function initializeRequest(sender, args){
    $find('idmpeLoading').show();
}
function endRequest(sender, args){
    $find('idmpeLoading').hide();
}
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initializeRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

Cabe aclarar que la variable idmpeLoading del código anterior contiene el identificador del ModalPopUp a mostrar.
Hasta este punto todo funcionaba bien, el problema surgió cuando utilizamos paneles modales con UpdatePanels dentro, en ese momento la ventana con el mensaje “Aguarde un momento…” se “dibujaba” debajo del panel que estaba utilizando el usuario, no cumpliendo con su finalidad, ya que de esta manera no se deshabilitaban todos los controles de la página.
Paso siguiente revisamos el código del ModalPopUp (el mismo se puede bajar desde el mismo link que mostré antes) y encontramos que a los paneles se les estable un valor fijo en el estilo zIndex para mostrarlos sobre los demás controles.  Luego revisamos las propiedades del objeto de JavaScript que representa el panel y encontramos que posee dos objetos interesantes: _backgroundElement y _foregroundElement.  Estos representan los DIVs del fondo y del contenido de PopUp respectivamente, entonces para hacer que estos objetos de HTML se posicionen sobre todos los demás simplemente tenemos que incrementarles la propiedad zIndex de su estilo.  Entonces, nuestro código JavaScript queda como se muestra a continuación:

function initializeRequest(sender, args){
    var mpeLoading = $find(idmpeLoading);
    mpeLoading.show();
    mpeLoading._backgroundElement.style.zIndex += 10;
    mpeLoading._foregroundElement.style.zIndex += 10;
}
function endRequest(sender, args){
    $find(idmpeLoading).hide();
}
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initializeRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

Por último, para hacer que esta funcionalidad esté presente en todas las páginas de nuestra aplicación, lo agregamos en la página “master” del sitio, logrando que en cualquier página (que utilice esta master) posea la funcionalidad aquí descripta.

En la siguiente imagen muestro como queda una aplicación de ejemplo que cree con Visual Studio 2008 para este artículo:

A continuación dejo el proyecto con el código fuente para quien quiera utilizar esta utilidad:

Gustavo Cantero (The Wolf)
MCP – MCSD – MCTS

VN:F [1.7.3_972]
Rating: 8.0/10 (4 votos cast)

Acerca de nosotros

Miércoles, 11 Jun, 2008 @ 20:42 | Por Gustavo Cantero (The Wolf) | General

Programando a medianoche

Programando a medianoche es sin ninguna duda algo que a cualquier programador le debe resultar conocido, ya que… ¿Qué programador no se ha quedado noches enteras tratando de resolver un problema que parecía imposible por puro placer?  ¿Qué programador no se ha quedado noches enteras tratando de resolver un problema porque al día siguiente había una entrega impostergable?  ¿O incluso por alguna otra causa?  Por ese motivo éste blog toma ese nombre, intentando poder proveer una ayuda por más pequeña que sea para resolver ese problema. Para que algún otro programador pueda alegrarse de haber encontrado una ayuda a algún problema que no lo dejaba pensar en otra cosa o para que algún otro programador pueda terminar con su entrega e irse a dormir un rato antes.

Quienes somos

Hola.  Me llamo Gustavo Cantero, vivo en Buenos Aires, Argentina, con mi esposa e hijas y trabajo en Scientia Soluciones Informáticas, una empresa de consultoría informática y desarrollo de software y programación web que, junto con Darío Krapp, fundamos a fines de 2007. Mi experiencia con las computadoras comenzó en la década del 80, con mi primer ordenador: el ZX Spectrum.  Pese a que el mismo tenía una escasa memoria de 48 Kb y como lenguaje un BASIC muy reducido, tengo muy buenos recuerdos de los programas que creaba en él cuando aún no cumplía mis 10 años.  Ya a los 17 años conseguí mi primer empleo como programador y desde ese momento, y hasta ahora, he utilizado varias tecnologías y desarrollado en distintos lenguajes con variadas herramientas, entre los cuales se encuentran COBOL, Clipper, FoxPro, QuickBasic, Visual FoxPro, Visual Basic, ASP con VBScript, GeneXus, Visual Basic .NET, C# y C.  Desde el primer momento que tuve contacto con una computadora (hace unos 24 años) y hasta este momento hay algo que nunca cambió: me apasiona la tecnología y trato de entenderla y utilizar lo mejor que pueda.

Yo soy Darío Krapp y como era de esperarse también trabajo en Scientia Soluciones Informáticas.
Mi primer contacto con una computadora fue a fines de los 80 con una Commodore 64 con Datassette, mezclando juegos con los primeros programas.   La programación en aquellos tiempos tenía muchas restricciones, si la comparamos con la actualidad, pero uno no lo sabía entonces y de todas formas no dejaba de ser divertido y didáctico.
Desde aquellas lejanas épocas de Basic V2, de gosub’s, poke’s, peek’s y otras cosas de ese tipo hasta hoy han pasado una cantidad incontable de tecnologías y lenguajes, algunos de los que recuerdo son Pascal,  C,  Visual Basic,  ASP,  Visual Basic .NET,  C#,  GeneXus y algunos no tan conocidos como Basic 4690 y C 4690, para hablar sólo de los lenguajes, una historia que supongo que debe repetirse con cada programador. Pero creo que a pesar de la diversidad de tecnologías, algunas más atrayentes que otras, siempre hay una constante, que es la necesidad incontrolable de aprender, de resolver, de innovar, y de mejorar, eso que puede llevarnos a pasar una madrugada entera tratando de resolver un problema o de mejorarlo.  Creo que esa constante es lo permite que la tecnología avance día a día.

Que escribiremos

En este blog escribiremos consejos, trucos y código de los desarrollos que hacemos en Scientia® Soluciones Informáticas y que creemos que puede serle útil a cualquier programador que se tope con el mismo problema que nosotros.

Cómo contactarnos

Pueden hacerlo agregando comentarios a los post que hagamos o enviando un correo a blog@scientia.com.ar.

VN:F [1.7.3_972]
Rating: 10.0/10 (1 voto cast)