Eugenio Estrada's Weblog : JavaScript

AJAX: Cómo “embeber” un archivo JavaScript en una DLL

Eugenio Estrada — Sun, 24 Aug 2008 15:16:33 GMT

Recordando el post sobre cómo crear un UpdateProgress, puede ser que queramos que nuestro JavaScript lo queramos incrustar en una DLL, por lo que sea, para proteger el JavaScript que no llega al cliente, por ejemplo.

Objetivo:

Debemos desarrollar una especie de librería de clases, pero en vez de clases .NET, JavaScript. Recuperar luego ese recurso será muy sencillo, al igual que incrustarlo.

Requisitos:

Al igual que en el anterior artículo, ~~copy-paste~~, cualquier versión de ASP.NET AJAX nos sirve, tanto la 1.0 (para .NET 2.0) descargable en http://ajax.asp.net/, como la versión nativa de ASP.NET AJAX. Si usas VS 2008 (o Visual Web Developer 2008 Express Edition) no tendrás que descargar nada.

Análisis:

Si tenemos una libreria en nuestra aplicación web sirve, sino debemos crear una libreria de clases de C#, en mi ejemplo se llamará AjaxLibrary.

Por lo tanto, necesitamos un archivo .js que contenga el código JavaScript del anterior artículo, ClientLibrary.js en este:

ClientLibrary.js

Coding.

Incrustando el archivo

Simplemente añadimos a nuestro proyecto el archivo .js y en sus propiedades cambiamos la propiedad “Build Action” y la establecemos en “Embedded Resource”.

Esto lo que hará es que el archivo js, se incruste en la DLL, como podemos ver en Reflector.

Preparando la librería

Bien, el archivo ya está dentro de nuestra DLL… Pero… Con eso no hacemos nada de nada… Debemos convertirlo en un recurso web. Para ello, antes de nada debemos “desocultar” los archivos ocultos del proyecto, como se muestra en la siguiente figura, el punto 1.

Eso nos permitirá ver el archivo del punto 2, que es el que nos interesa para convertirlo en un recurso web. Ese archivo, AssemblyInfo.cs, contiene toda la información del ensamblado.

Debemos añadir en nuestro proyecto la referencia System.Web si no la tenemos y en AssemblyInfo.cs, el namespace System.Web.UI.

Y en este archivo debemos añadir la siguiente línea:

[assembly: WebResource("AjaxLibrary.ClientLibrary.js", "text/javascript")]

La librería ya está lista.

Obteniendo la librería en el cliente

Para obtener el javascript debemos modificar el ScriptManager de nuestro sitio, quedando algo así:

<asp:ScriptManager ID="ScriptManager1" runat="server">

<asp:ScriptReference Assembly="AjaxLibrary"

Name="AjaxLibrary.ClientLibrary.js" />

</Scripts>

</asp:ScriptManager>

Evidentemente el código JavaScript debemos haberlo borrado ;) De esta forma ya tenemos el JavaScript en el cliente.

http://eugenioestrada.es/blog

AJAX: Cómo crear nuestro propio UpdateProgress

Eugenio Estrada — Sun, 24 Aug 2008 10:22:00 GMT

A veces no queremos hacer uso del UpdateProgress que viene con ASP.NET por diversos motivos.

Objetivo

El objetivo es conseguir el efecto del UpdateProgress. Para ello necesitamos un UpdatePanel donde tengamos por ejemplo un botón con un Label. Para que el efecto sea visible se recomienda usar el método Sleep de System.Threading.Thread, un par de segundo es suficiente.

Requisitos

Cualquier versión de ASP.NET AJAX nos sirve, tanto la 1.0 (para .NET 2.0) descargable en http://ajax.asp.net/, como la versión nativa de ASP.NET AJAX. Si usas VS 2008 (o Visual Web Developer 2008 Express Edition) no tendrás que descargar nada.

Análisis

¿Que hace el UpdateProgress? Siempre que se hace una petición al servidor se muestra un panel. Por lo que ya sabemos dos cosas:

Debemos manejar el evento de comienzo y finalización de las peticiones en el cliente.
Hay algo oculto que debemos mostrar después.

Esta claro que el lenguaje en el cliente es JavaScript y para el estilo (necesario para mostrar y ocultar el panel, que ya digo que será una capa, DIV) usaremos estilso en cascada CSS.

Coding.

Antes de nada el manejador de evento del evento Click del botón es:

protected void ActualizarButton_Click(object sender, EventArgs e)

{

HoraLabel.Text = DateTime.Now.ToShortTimeString();

System.Threading.Thread.Sleep(5000);

}

Ahora vamos a la parte que nos ocupa, el cliente. La capa que nos ocupa es la siguiente, sencillita:

Actualizando...

</div>

Como puedes ver vamos a tener un estilo llamado hidden y, esto os lo digo yo, tendremos otro para cuando lo queramos mostrar, que le llamaré showed, estos son los siguientes:

.hidden {

display: none;

}

.showed {

border: 2px solid #FF0000;

background-color: #FF6666;

color: #800000;

font-size: x-large;

font-family: Arial, Helvetica, sans-serif;

padding: 10px;

margin: 10px;

width: 200px;

text-align: center;

}

Le he añadido algo de formato en el estilo showed, para que se vea bien. Realmente lo importante es la diferencia de que el primero contiene la etiqueta display: none y la segunda no.

Bien, ahora nos queda lo más importante, manejar los dos eventos en el cliente. La clase encargada de ello es el PageRequestManager, en el namespace Sys.WebForms. Y el código es tan sencillo como este:

function pageLoad() {

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginPageRequest);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endPageRequest);

}

function beginPageRequest(sender, args) {

updateProgress.className = "showed";

}

function endPageRequest(sender, args) {

updateProgress.className = "hidden";

}

En este caso el efecto es muy similar al del UpdateProgress, pero los resultados pueden ser muy diversos cuanto más lo piensa uno.

http://eugenioestrada.es/blog

ASP.NET y el JavaScript manejado

Eugenio Estrada — Tue, 01 May 2007 21:27:00 GMT

Ayer escribí sobre las novedades que el MIX'07 nos trae sobre Web, Silverlight 1.0 y 1.1. Y también hablé de ASP.NET Futures May 2007 CTP, ahora mirando un poco más afondo, estoy viendo que novedades hay y la que más me ha sorprendido es el ¡JavaScript...(read more)

JavaScript Optimizer

Eugenio Estrada — Fri, 06 Apr 2007 21:09:00 GMT

Acabo de publicar la primera release de una pequeña herramienta para la optimización de JavaScript que he llamado JavaScript Optimizer. La hice con el objetivo de reducir automaticamente el tamaño del archivo agHost.js de WPF/E y es el que se carga por...(read more)