Para esto vamos a seguir con el plugin que hemos desarrollado y que sirve para cambiar el estilo de nuestras cajas de texto cuando ésta tiene el foco y lo pierde.

Para usar eventos necesitamos tres cosas, el evento en si mismo (click, blur, focus), algo que lo lance y alguien que lo maneje (delegado). En jQuery el encargado de lanzar un evento es el método trigger y se hace de la siguiente manera

$(this).trigger('nombre_de_mi_evento', parametros_de_mi_evento);

Para manejar un evento se usa el método bind de la siguiente manera

$(this).bind(nombre_de_mi_eveto, function(e, data) {
// Código de la función que manejera mi evento. En la variable data tenemos los parameotros que hemos enviado en el trigger.
});

Aplicado esto a nuestro plugin, lo primero que haremos será crear un div donde iremos escribiendo todos lo eventos que vayamos manejando

<div id="status"></div>

y en nuestro fichero common.js pondremos los delegados

$('input').bind('myfocus', function(e, data) {
   var html = $('#status').html();
   html += 'onfocus<br />';
   $('#status').html(html);
});

$('input').bind('myblur', function(e, data) {
   var html = $('#status').html();
   html += 'onblur<br />';
   $('#status').html(html);
});

Luego sólo tendremos que modificar nuestro plugin para que lance los eventos

 $(this).focus(function() {
 	//...
    $(this).trigger('myfocus', "on focus");
	//...
 });
 $(this).blur(function() {
	//...
	$(this).trigger('myblur', "on blur");
	//...
 });

Con esto ya tendríamos nuestros propios eventos myfocus y myblur gestionados.

$.fn.highlight.defaults = {
   focusbackground: '#EFF5FF',
   focusborder: 'solid 1px #73A6FF',
   blurbackground: '#EEEEEE',
   blurborder: 'solid 1px #DFDFDF'
};

Para permitir que nuestro plugin admita parametros de configuración usaremos un parametros en la llamada del plugin donde pasaremos los valores que queramos

$.fn.highlight = function(options) {
   var opts = $.extend({}, $.fn.highlight.defaults, options);
   // Resto del código
}

Juntándolo todo tendríamos lo siguiente

(function($) {
    $.fn.highlight = function(options) {
        var opts = $.extend({}, $.fn.highlight.defaults, options);
        this.each(function() {
            var obj = $(this);
            // Valores por defecto
            obj.css('background', opts.blurbackground);
            obj.css('border', opts.blurborder);

            obj.focus(function() {
                obj.css('background', opts.focusbackground);
                obj.css('border', opts.focusborder);
            });

            obj.blur(function() {
                obj.css('background', opts.blurbackground);
                obj.css('border', opts.blurborder);
            });
        });
    };

    $.fn.highlight.defaults = {
        focusbackground: '#EFF5FF',
        focusborder: 'solid 1px #73A6FF',
        blurbackground: '#EEEEEE',
        blurborder: 'solid 1px #DFDFDF'
    };
})(jQuery); 

Para hacer la llamada a nuestro plugin tan sólo hay que hacer lo siguiente

$().ready(function() {
    $('input').highlight({
        blurborder: 'red'
    });
});

Para la próxima entrega dejaremos otros detalles que podemos hacer para mejor el plugin y así aprender un poco mas de jQuery.

(function($) {
    $.fn.highlight = function(options) {
		// Nuestro método es 'highlight' y el código va a partir aquí.
    };
})(jQuery);

Bien, con esto ya podríamos llamar a nuestro código de la siguiente manera

$().ready(function() {
    $('input').highlight();
});

Este código llama a nuestro método para todos los ‘inputs’ (la potencia de jQuery es casi infinita) de nuestra página una vez que ésta esté disponible.

Volviendo a nuestro método, el código para cambiar los estilos de las cajas de texto quedaría de la siguiente manera

obj.focus(function() {
	obj.css('background', '#EFF5FF');
	obj.css('border', 'solid 1px #73A6FF');
});

obj.blur(function() {
	obj.css('background', '#EEE');
	obj.css('border', 'solid 1px #DFDFDF');
});

Juntándolo todo tenemos

(function($) {
    $.fn.highlight = function(options) {
        this.each(function() {
            var obj = $(this);
            // Valores por defecto
            obj.css('background', '#EEE');
            obj.css('border', 'solid 1px #DFDFDF');

            obj.focus(function() {
                obj.css('background', '#EFF5FF');
                obj.css('border', 'solid 1px #73A6FF');
            });

            obj.blur(function() {
                obj.css('background', '#EEE');
                obj.css('border', 'solid 1px #DFDFDF');
            });
        });
    };
})(jQuery);

Todo esto lo guardamos en un fichero con la extensión .js. Segun las buenas practicas nuestro plugin debería estar en un fichero con el nombre jquery.highlight.js.

El código que llama a nuestro plugin lo he puesto en un archivo llamado common.js, por lo que juntándolo todo en nuestra página aspx (o html) quedaría

<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script src="jquery.highlight.js" type="text/javascript"></script>
    <script src="common.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="text1" type="text" />
        <input id="text2" type="text" />
    </div>
    </form>
</body>
</html>

Como vemos, crear nuestro primer plugin en jQuery ha sido muy sencillo. Próximamente veremos como podemos personalizar aun más nuestro script para que admita parámetros.

string path = HttpContext.Current.Server.MapPath("~");

Llamado así este método nos devuelve la ruta física de la raiz de la aplicación web. Es útil para localizar directorios y así, por ejemplo, poder abrir ficheros de configuración propia. Pero ¿qué ocurre si llamamos a este método en un delegado?. La llamada fallará porque el object HttpContext no está creado. La solución es llamar al método de la siguiente forma

string path = HostingEnvironment.MapPath()

La clase HostingEnvironment la tenemos en el espacio de nombre System.Web.Hosting, en el ensamblado System.Web.dll. Tenemos mas información de está clase en la MSDN al igual que del método MapPath.

1.- Modificar las líneas AssemblyVersion y AssemblyFileVersion del fichero AssemblyInfo.cs

// Version information for an assembly consists of the following four values:
//
//      Major Version
//      Minor Version
//      Build Number
//      Revision
//
// You can specify all the values or you can default the Revision and Build Numbers
// by using the '*' as shown below:
[assembly: AssemblyVersion("0.1.*")]
[assembly: AssemblyFileVersion("0.1.1.0")]

Del AssemblyVersion obtendremos la fecha de compilación mientras que la línea AssemblyFileVersion es de donde sacamos la versión del programa (aquí se puede usar cualquier numeración). Para esto usamos el siguiente código

Assembly assembly = Assembly.GetExecutingAssembly();

FileVersionInfo versionInfo = FileVersionInfo.GetVersionInfo(assembly.Location);

DateTime assemblyDate = new DateTime(2000, 1, 1)
        .AddDays(assembly.GetName().Version.Build)
        .AddSeconds(assembly.GetName().Version.Revision * 2);

version = string.Format("{0}.{1}.{2} del {3}",
    versionInfo.ProductMajorPart,
    versionInfo.ProductMinorPart,
    versionInfo.ProductBuildPart,
    assemblyDate.ToString("dd/MM/yyyy"));

El código es tan simple como

public static string MD5Encrypt(string value)
{
  MD5CryptoServiceProvider provider = new MD5CryptoServiceProvider();

  byte[] data = System.Text.Encoding.ASCII.GetBytes(value);
  data = provider.ComputeHash(data);

  string md5 = string.Empty;

  for (int i = 0; i < data.Length; i++)
      md5 += data[i].ToString("x2").ToLower();

  return md5;
}

También debemos añadir esto en los using de nuestra clase

using System.Security.Cryptography;

Error 8 Could not find an implementation of the query pattern for source type
'System.Data.Linq.Table<Model.Provincia>'. 'Select' not found.
Are you missing a reference to 'System.Core.dll' or a using directive for 'System.Linq'?

La verdad es que el error es bastante raro y no deja muy claro a que se refiere. Una búsqueda por google y tras un ratillo leyendo respuestas encontré la solución. Tan sólo hay que añadir la referencia a System.Linq.

using System.Linq;

Esperemos que todo se cumpla, así que, feliz 2010 a todos. Nos vemos en los próximos posts.

Para aprovechar un poco tanta RAM he decido probar el Virtual PC 2007 de Microsoft. Así podría montarme un entorno de desarrollo en Windows XP o Vista y tenerlo siempre listo independientemente del equipo “huésped”, o incluso llevármelo de viaje. Para bajarte el Virtual PC sólo hay que ir a la pagina de Microsoft y bajarnos la versión que queramos (32 o 64 bits). De paso, también nos bajaremos el SP1 que amplia en número de sistemas operativos soportados.

• Virtual PC 2007
• Virtual PC 2007 SP1

Una vez instalado, tan sólo tenemos que crearnos una máquina con las características que queramos e instalar nuestro sistema operativo. Analizado el Virtual PC esta son las conclusiones que he sacado

Ventajas

• Es gratuito.
• Al ser un producto de Microsoft no debería plantear demasiados problemas con sus propios sistemas operativos.
• Podemos ampliar la memoria y añadir hasta tres discos duros (que podemos compartir con otra máquinas virtuales.

Desventajas

• Una vez creado el directorio virtual no se puede ampliar su tamaño.
• No soporta máquinas de 64 bits.

Dudas

• Estoy investigando si se puede tomar una “fotografía” (snapshot) del sistema, y revertirlo posteriormente a ese punto. Esto es ideal, en entornos donde se prueban instalables.

Y para muestra mi máquina virtual de desarrollo sobre mi Windows Vista.

Y como punto final dos consejos

• Para sacar el puntero del ratón de nuestra máquina virtual hay que usar la tecla “ALT GR”
• Para maximizar nuestra máquina virtual hay que usar ALT GR + ENTER (con esto no nos daremos ni cuenta de que estamos en una máquina virtual).

El código para comprimir es el siguiente

   1: public static string Zip(string text)

   2: {

   3:     byte[] buffer = Encoding.UTF8.GetBytes(text);

   4:     MemoryStream ms = new MemoryStream();

   5:     using (GZipStream zip = new GZipStream(ms, CompressionMode.Compress, true))

   6:     {

   7:         zip.Write(buffer, 0, buffer.Length);

   8:     }

   9:

  10:     ms.Position = 0;

  11:     MemoryStream outStream = new MemoryStream();

  12:

  13:     byte[] compressed = new byte[ms.Length];

  14:     ms.Read(compressed, 0, compressed.Length);

  15:

  16:     byte[] gzBuffer = new byte[compressed.Length + 4];

  17:     System.Buffer.BlockCopy(compressed, 0, gzBuffer, 4, compressed.Length);

  18:     System.Buffer.BlockCopy(BitConverter.GetBytes(buffer.Length), 0, gzBuffer, 0, 4);

  19:     return Convert.ToBase64String(gzBuffer);

  20: }

y el código para descomprimir es muy parecido

   1: public static string UnZip(string compressedText)

   2: {

   3:     byte[] gzBuffer = Convert.FromBase64String(compressedText);

   4:     using (MemoryStream ms = new MemoryStream())

   5:     {

   6:         int msgLength = BitConverter.ToInt32(gzBuffer, 0);

   7:         ms.Write(gzBuffer, 4, gzBuffer.Length - 4);

   8:

   9:         byte[] buffer = new byte[msgLength];

  10:

  11:         ms.Position = 0;

  12:         using (GZipStream zip = new GZipStream(ms, CompressionMode.Decompress))

  13:         {

  14:             zip.Read(buffer, 0, buffer.Length);

  15:         }

  16:

  17:         return Encoding.UTF8.GetString(buffer);

  18:     }

  19: }

Como vemos el código es bastante simple y nos sirve para evitar que nuestros ficheros auxiliares crezcan de manera incontrolada.

Saludos y nos vemos en la próxima entrega.