Originally posted as "AJAX: Como crear una ventana ..." in Spanish on December 13th 2007.
A few days ago I had need to implement some functionality based on AJAX technology in a Web application that I was developing. When a request is sent to the server doing click to some web control in the page, AJAX "hide" the Postback to our eyes and sometimes is so difficult to detect, that the page is processing the request based on the click event.
There is an AJAX ASP.net Control that provides status information about partial-page updates called UpdateProgress. It's very useful to "control" the user patience but permits that the user continue interacting with other controls in the application, and rare behaviors can result if the user clicks other button or does other Postback action.
// UpdateProgress Implementation Example
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">
<ProgressTemplate>
<div style="position: relative; top: 30%; text-align: center;">
<img src="loading.gif" style="vertical-align:middle" alt="Processing"/>
Processing ...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Unfortunately doesn't exists an ASP.net AJAX control that "blocks" the application while a Postback request is made to the server, but fortunately we can make a powerful combination using this control in conjunction with an AJAX Control Toolkit's called ModalPopup Extender, that allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page.
//Modal Popup Extender Implementation Example
<ajaxToolkit:ModalPopupExtender ID="ModalProgress"
runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" />
Now, this is the interesting part, take the power of each one of this controls to create a composite functionality that shows a progress indicator to the user in a modal window way, blocking the user interaction with the application while it's processing a previous Postback request. The next code example shows how to do this:
// Include this page directives to reference ASP.net AJAX controls
// from AJAX and the Toolkit
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI"
TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
// Include ScriptManager tag manages client script for Microsoft
// ASP.NET AJAX pages
<asp:ScriptManager ID="ScriptManager1" runat="server" />
// Include UpdateProgress Control inside a Panel Control
// and then the ModalPopupExtender Control
<asp:Panel ID="panelUpdateProgress" runat="server"
CssClass="updateProgress">
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">
<ProgressTemplate>
<div style="position: relative; top: 30%; text-align: center;">
<img src="loading.gif" style="vertical-align: middle"
alt="Processing" />
Processing ...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server"
TargetControlID="panelUpdateProgress" BackgroundCssClass="modalBackground"
PopupControlID="panelUpdateProgress" />
It's necessary to add a pair of javasctript functions that are executed at the initial and final AJAX requests.
//JavaScript code included at jsUpdateProgress.js file
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args){
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// shows the Popup
$find(ModalProgress).hide();
}
You can view that the javascript functions references a variable called ModalProgress, this variable must be created in the ASP.net page's code. The next code shows how to do it:
<script type="text/javascript" language="javascript">
var ModalProgress ='<%= ModalProgress.ClientID %>';
</script>
<script type="text/javascript" src="jsUpdateProgress.js"></script>
Finally we add a little CSS code to show a gray contour in the modal window, and a cute format to the image and text.
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.updateProgress
{
border-width: 1px;
border-style: solid;
background-color: #FFFFFF;
position: absolute;
width: 180px;
height: 65px;
}
You can download the source code from the above code examples, and include an Update Progress Modal Window in your Web applications.
Updated (Sept 02/2009): The source code includes a Visual Basic example of this implementation.
Thanks to my friend Gabriel Porras for sharing me this excellent tool intended to demonstrate the implementation of regular expressions AKA regex. It's a graphical tool that shows how regular expressions engines use FSA (Finite State Automata) to match regex patterns against text.
This fabulous tool is called Reanimator was built by Oliver Steele. Thanks to Oliver for share this tool with us.
How many regex has built today?
I wrote this short tip based in a question made from a workmate about a functionality that he wanted that appears in a Hashtable class.
Remember that a Hashtable represents a collection of key/value pairs that are organized based on the hash code of the key, and when a element is added to the Hashtable it's stored based on the hash code of the key, and the elements don't preserves the order based in their insertion to the Hashtable's "bag". If I want to retrieve the elements in the same order that they were placed, there's no way to retrieve them (normally).
And, if I want a collection class which can add key/value elements, and it maintains all the items sorted based in the insertion order? This class exists and their name is SortedList.
A SortedList is a collection of key/value pairs that is sorted by the keys and are accessible by key and by index.
If you want that the items contained in a collection always be "sorted" you need to use a SortedList instead a HashTable. If you don need the items sorted then use a HashTable, beacuse it's more faster than a SortedList obtaining a value from their "bag".
Updated 01-08-2008
An interesting performance test to compare four different implementations of the IDictionary interface posted by Vladimir Bodurov (IDictionary options - performance test - SortedList vs. SortedDictionary vs. Dictionary vs. Hashtable).
Siempre unos de los principales "karmas" de los desarrolladores ha sido la documentación, ¿hasta que punto un proyecto de software debe contemplar un excesivo detalle de generación y mantenimiento de documentación y no perder el norte que es la elaboración de un paquete de software funcional que cumpla con los requisitos y necesidades planteados por el cliente?
A continuación les comparto un interesante post publicado por Rodrigo Corral denominado Documentos o Ejecutables en el cual hace énfasis a lo indicado en el párrafo anterior y que me parece es uno de los eternos dolores de cabeza que se presentan en un grupo de desarrollo de software .
¿Buen documentador o buen desarrollador?