el blog del isra

Requisitos

• jQuery. Framework para Javascript
• jQuery UI. Sólo se requiere el Core UI y el widget Accordion

¿Cómo se generan los controles Web en .NET?

Cada página que creamos en .NET (con extensión aspx) es procesada por el servidor, por medio de Internet Information Services (IIS) y utilizando .NET para crear un archivo con puro código HTML y enviarla al usuario. Es decir, quien visite la página no va a ver nuestros componentes tal como los escribimos.

Suponiendo que creamos estos componentes:

<asp:Label ID="label1" runat="server" Text="Escriba un texto:" AssociatedControlID="textBox1" />
<asp:TextBox ID="textBox1" runat="server" Width="100px" />
<asp:Button ID="button1" runat="server" CssClass="boton" Text="Presione para continuar" OnClick="button1_Click()" OnClientClick="jsFunctionClick()" />

Cuando consultemos la página desde un navegador, si revisamos el código fuente encontraremos algo así:

Escriba un texto:
<input type="text" id="textBox1" style="width:100px" />
<input type="submit" id="button1" class="boton" value="Presione para continuar" onclick="jsFunctionClick();__doPostBack('button1','Click');" />

Lo que el servidor hizo, fue procesar cada elemento de .NET de acuerdo a lo que determine la clase de la que se deriva (Label, TextBox, Button), y mostró el código HTML equivalente.

Dentro del namespace (espacio de nombres) System.Web.UI existe la clase Control, que es la base para generar controles en las páginas Web.

En el mismo namespace se encuentra otro espacio llamado WebControls, el cual contiene una clase WebControl, que se deriva de Control y tiene más propiedades básicas, como CssClass (para definir una clase en CSS), o TagName, que determina el tipo de elemento HTML que se generará (esta propiedad será muy importante en nuestro ejemplo).

Junto con WebControl están todas las clases definidas para los distintos controles que se utilizan en ASP, derivados todos ellos de WebControl.

Nuestro control puede derivarse tanto de Control, como de WebControl, o incluso de un control ya definido, como un Label, o un GridView. Todos ellos pueden ser utilizados mediante herencia y extendidos a nuestro gusto.

Mi primer control personalizado: Acordeón

Ya tenemos una idea de cómo se procesan los controles en .NET, ahora podemos comenzar con nuestro control. Como dije, crearemos un acordeón, es decir, una lista de definiciones en las que se mostrará sólo una a la vez, expandiéndose al seleccionarlo con el mouse y contrayendo al resto (ejemplo)

Antes de definir el control en .NET, debemos definir cuál será el resultado en HTML. Debemos decidir en qué elemento HTML se "convertirá" nuestro control. Tenemos muchas opciones, pero la más acertada, en mi opinión, es la de <dt>, que es precisamente, una lista de definiciones.

<dl>
  <dt>Título de primera definición</dt>
  <dd>Descripción de la primera definición.</dd>
  <dt>Título de la segunda definición</dt>
  <dd>Descripción de la segunda definición</dd>
</dl>

Título de primera definición

Descripción de la primera definición.

Título de la segunda definición

Descripción de la segunda definición

Tenemos tres tipos de elementos: dl, dt y dd. Para nuestro control, crearemos una clase Acordeon, que creará el dl, y una clase Elemento que generará las etiquetas dt y dd. ¿Por qué no hacer una clase para cada etiqueta? Porque en realidad la etiqueta dt sólo guarda un título. Podríamos poner más elementos en esa etiqueta, pero lo correcto es sólo dar un nombre a lo que dd está definiendo. Así que crearemos una clase Elemento que contendrá todo lo de dd y en la que podremos indicar también el título que irá en dt. El código en JavaScript lo veremos después. Por ahora nos concentraremos en la creación del HTML

Hora de comenzar el trabajo duro. Utilizaremos Visual Studio, ya después veremos la compilación en consola de comandos. Nos vamos al menú File > New > Project, y en la lista de plantillas seleccionamos Class Library. Pueden escoger el lenguaje que gusten. Yo utilizaré C#. Damos un nombre al proyecto y presionamos OK.

Automáticamente se creará un archivo default Class1.cs/Class1.vb. Lo borramos.

Nos vamos a las propiedades del proyecto (en el proyecto, clic derecho y luego en Properties), donde podemos definir el nombre del ensamblado (assembly) y el espacio de nombres. Estas propiedades las utilizaremos después, al momento de implementar nuestro control en un sitio Web. También podemos dar una descripción para el producto y la información de copyright. Otra forma de hacer esto es irnos al archivo /Properties/AssemblyInfo.cs y cambiar las propiedades manualmente.

Debemos descargar los archivos de jQuery y jQuery UI indicados en los requisitos y agregarlos al proyecto. Los pondremos en una nueva carpeta llamada Recursos.

Es posible que en las referencias no aparezca automáticamente la de System.Web. Debemos agregarla, dando clic derecho al proyecto y seleccionando "Add Reference".

Ahora agregamos un nuevo archivo de clase al proyecto, con el nombre Acordeon.cs. Podemos añadirlo a un namespace, si queremos, aunque también podemos definirlo dentro de la clase que vamos a crear. Si en las propiedades del proyecto establecimos IsraSoft como namespace, y la clase pertenecerá al de MisControles, debemos establecer como namespace del control "IsraSoft.MisControles".

Los valores encerrados entre corchetes son atributos que definen a la clase. También se pueden establecer ciertos atributos para las variables o métodos contenidos en la clase. En VisualBasic se utilizan los símbolos < y >, y se debe escribir todo como una sola línea, incluyendo la definición de la clase.

ToolboxData indicará la forma predeterminada en que se crearán los controles, si los cargamos desde la barra de herramientas de Visual Studio. Yo estoy poniendo solamente el atributo runat, pero podríamos poner más propiedades, si queremos. Claro, deberán ser propiedades que tenga el control, no debemos poner cualquier cosa que se nos ocurra.

El valor "{0}" será reemplazado automáticamente por el prefijo que determinemos en nuestra aplicación. En los controles de .NET el prefijo es "asp", como en <asp:Label>, pero nosotros podemos definir uno propio para las bibliotecas de clases que importamos.

Los atributos ParseChildren y PersistChildren trabajan en conjunto, indicando si el contenido anidado de nuestro control (todo lo que se ponga entre la etiqueta de apertura y de cierre de Acordeon) será tratado y procesado como controles de servidor o como propiedades del control padre (Acordeon). En la definición de PersistChildren da una explicación más detallada de la interacción entre estos atributos.

Los parámetros que utilizamos en Acordeon son: Tipo del contenido anidado (Elemento), Propiedad predeterminada (Elementos es una variable que veremos más adelante) y ChildrenAsProperties, que indica que estos Elementos serán manejados como propiedades del control, es decir, no como controles individuales.

Al escribir Acordeon : WebControl, estamos indicando que la clase Acordeon heredará de la clase WebControl sus atributos y métodos, los cuales podemos moificar, como lo veremos más adelante.

En el mismo archivo crearemos una nueva clase, a la que llamaremos Elemento

Primero, como pueden ver, los atributos los puse en corchetes separados. ¿Por qué? Por la simple y sencilla razón de demostrarles que eso también se puede hacer No importa realmente si lo hacen de esa forma, es más cuestión estética.

Aquí vemos una propiedad nueva, ToolboxItem, la cual indica el tipo de elemento dentro de la barra de herramientas. Al establecerlo en false, la clase quedará oculta para dicha barra, independientemente si es Control o no.

ParseChildren es establecido en Falso y PersistChildren en Verdadero. Esto es para que la etiqueta Elemento pueda contener otras etiquetas, de HTML o de otros controles de .NET.

El atributo ToolboxData sigue siendo definido para que quede establecida la forma en que se creará la etiqueta.

Todavía no podemos compilar el proyecto, pues hay algo que le indicamos a la clase Acordeon que no hemos definido: la propiedad Elementos.

Elementos será una variable de tipo Lista que contendrá todos los objetos Elemento que se definan en el sitio Web. Y la definimos de esta forma dentor de la clase:

Aquí definimos dos variables: _elementos y Elementos. La primera es una variable privada, que sólo podrá ser manipulada dentro de la clase Acordeon, y la otra es pública, y será la que manejemos desde fuera de la clase, o sea, cuando creemos nuestro control en una página Web.

Elementos parece ser un método, con esas llaves que le puse, pero no lo es. Una variable que tiene las funciones get y set anidadas es lo que se llama propiedad. Si se fijan, lo que Elementos hace en realidad es siempre recurrir a _elementos, que es la verdadera contenedora de los controles que crearemos para nuestro acordeón. _elementos es la mera mera, pero Elementos es la cara bonita que se verá en el código de la página Web.

Cuando queremos obtener el valor de una propiedad, por ejemplo List<Elemento> lista = Elementos, el sistema entrará directamente a get, el cual devuelve el valor de _elementos. Si queremos asignar un valor a la propiedad, como Elementos = new List<Elemento>(), se entrará a set, y value representará el valor que queremos asignar a la propiedad.

Aquí parecerá no tener sentido el utilizar una variable oculta y una propiedad pública, pero es muy importante tenerlo en cuenta, ya que dentro de una propiedad puedes definir toda una función. Puedes hacer validaciones, condicionar el valor de la variable oculta de acuerdo a lo que tenemos en la propiedad, o incluso manipular el valor que recibes y guardar distintos valores en distintas variables privadas.

En Visual Basic, el código sería éste:

Podemos agregar una propiedad de cualquier tipo a una clase. Cuando son los tipos de variables como int, string, bool, etc., todos tienen un valor predeterminado (0, "", false). El problema es cuando nuestra propiedad es un objeto de una clase más compleja, como lo es List<> en este caso. De entrada, _elementos tendrá un valor null, lo cual puede provocarnos errores.

Lo que haremos será instanciar _elementos en el constructor de la clase. Así nos aseguraremos que en todo momento tendrá un valor.

Recuerden que en VB.NET el constructor se declara como Public Sub New()

Si compiláramos el proyecto en este punto, podemos agregarlo como referencia a un sitio Web e introducir controles de clase Acordeon. Si hacemos esto, podremos crearlos tal como los controles que .NET ya incluye.

<ctrl:Acordeon ID="acordeon1" runat="server">
    <ctrl:Elemento runat="server">
        Primer elemento de nuestra lista.
    </ctrl:Elemento>
    <ctrl:Elemento runat="server">
        Segundo elemento de nuestra lista.
    </ctrl:Elemento>
</ctrl:Acordeon>

El asunto es que si lo compilamos, no obtendremos ningún resultado. Seguramente sólo veremos esto en la página:

    <span id="acordeon1"></span>

Ah, ca...nijo! ¿Qué le pasó a nuestro control? ¿Dónde están esos dos elementos que escribimos?

Visual Studio tiene la gran ventaja de que podamos ver qué elementos se pueden insertar dentro de un control. En el caso de Acordeon, podemos ver que sólo se permite insertar objetos de tipo Elemento por dentro, y no podemos poner <p>, <div>, <asp:Label> ni ningún control que no sea un Elemento. Esto es porque los atributos ParseChildren y PersistChildren de Acordeon están definidos de tal forma que lo contenido dentro de un objeto de esa clase sea tratado como Propiedades, además de que especificamos que la propiedad a utilizar sería Elementos, por lo que el contenido de nuestro acordeón será únicamente una lista de Elementos.

Ahora bien, como dije, son propiedades, no controles. No se le puede exigir todo el trabajo a .NET. Si se le dice que son propiedades, son eso, y nada más. El hacerlos controles depende de nosotros. Así que ésa será nuestra siguiente tarea: decirle a la clase que los elementos serán tratados como controles.

WebControl tiene toda una serie de métodos que se ejecutan al generar (renderizar) el control en la página, es decir, al convertir el control en un elemento HTML. Todos esos métodos pueden ser sobreescritos, indicando el término override en dicho método dentro de nuestra clase.

Uno de esos métodos es CreateChildControls, que procesa la colección de controles anidados dentro de un control padre (en otras palabras, lo que queremos hacer con los Elementos en el Acordeón). Por medio de código, haremos que esos Elementos, considerados propiedades hasta ese momento, sean guardados dentro de la colección de controles del Acordeón.

Primero que nada, base.OnPreRender(e) es la llamada a la clase padre (WebControl) para que realice las operaciones que hace esta función. No debemos borrar esta línea, pues podríamos evitar que se realicen operaciones que no conocemos, y que le quiten funcionalidad a nuestro control. Lo que hacemos en este método es añadir cada miembro de Elementos a la colección Controls, que pertenece a WebControl. Con esto, el servidor ya no los tomará como propiedades al momento de generar el control, sino como controles anidados, y al ser derivados de WebControl serán tratados como tal.

Ya salimos de un problema. Ahora nuestros Elementos serán mostrados en la página.

El otro detalle es el tipo de elemento HTML que se está creando:

<span id="acordeon1">
  <span>Primer elemento de nuestra lista.</span>
  <span>Segundo elemento de nuestra lista.</span>
</span>

La etiqueta <span> es la más simple de HTML. Se usa para encerrar una porción de texto dentro de una línea, o un párrafo, o una lista, etc. Puede ser insertada dentro de cualquier elemento de texto. Por lo tanto, .NET la usa como predeterminada para los controles Web. Claro que eso no nos sirve a nosotros, así que la cambiaremos por las que necesitamos.

Al principio vimos que nuestro control sería una lista (dl) de elementos (dd) precedidos por su encabezado (dt). Comenzaremos con la clase Acordeon.

Otro elemento sobreescrito de la clase WebControl: TagKey. Cuando la función que renderiza el control tiene que escribir el tipo de elemento HTML que se generará, recurre a esta propiedad, por lo que nosotros reemplazamos lo que tiene de forma predeterminada (que lleva a la etiqueta span), por la de DL. Haremos lo mismo con Elemento, dándole la etiqueta DD.

Ahora sí, nuestro acordeón generará automáticamente los elementos que necesitamos.

<dl id="acordeon1">
  <dd>Primer elemento de nuestra lista.</dd>
  <dd>Segundo elemento de nuestra lista.</dd>
</dl>

¿Y el título, apá? Ya tenemos nuestra lista y los elementos de descripción de cada miembro, pero el título no lo hemos generado. No creamos un control más para esos elementos, ¿por qué? Porque consideraremos que el título siempre será texto. Lo que haremos será darle a Elemento una propiedad en la que se defina la etiqueta DT que corresponderá a tal elemento.

Cuando usamos el diseñador de VisualStudio, al seleccionar un WebControl podemos ver sus propiedades en diferentes Categorías. La propiedad Category define en cuál de esas se mostrará la propiedad.

Ya definida la variable que tomará el nombre del título, podemos utilizarla en nuestras páginas Web.

<ctrl:Acordeon ID="acordeon1" runat="server">
    <ctrl:Elemento runat="server" Titulo="Elemento 1">
        Primer elemento de nuestra lista.
    </ctrl:Elemento>
    <ctrl:Elemento runat="server" Titulo="Elemento 2">
        Segundo elemento de nuestra lista.
    </ctrl:Elemento>
</ctrl:Acordeon>

Obviamente el definir la propiedad Titulo así nomás no sirve de nada. Tenemos que generar la etiqueta DT por código, y debe hacerse antes de que se cree el elemento DD.

WebControl tiene toda una serie de métodos para renderizar (generar) el control por etapas: uno para la etiqueta de inicio, otro para la de cierre, otro para el contenido, otro para los atributos, etc. El de Render será el que utilicemos.

Recordemos que la llamada al mismo método en base es lo que realiza las funciones predeterminadas para este método. Render crea el control DD, por lo que debemos agregar la etiqueta DT antes de que esto ocurra.

El objeto writer es el que se utiliza para "escribir" el código HTML dentro de la página. Va pasando de un método a otro, escribiendo lo que cada uno le indique. Aquí, le estamos indicando que escriba la etiqueta DT con el título del elemento, antes de crear la etiqueta DD.

Ahora sí, ya tenemos nuestra lista.

<dl id="acordeon1">
  <dt>Elemento 1</dt>
  <dd>Primer elemento de nuestra lista.</dd>
  <dt>Elemento 2</dt>
  <dd>Segundo elemento de nuestra lista</dd>
</dl>

Felicidades! Hemos creado nuestro primer control HTML que genera una lista de elementos!!! :cheer: Claro que no es el objetivo de un "Acordeón" en tener una simple lista. Es hora de entrar en algo más avanzado de .NET

Inserción de archivos en un WebControl

Hasta ahora tenemos un WebControl que crea un elemento HTML, sin muchas complicaciones. Lo que sigue es darle la función de acordeón incluída en el archivo de jQueryUI que indiqué en los requisitos.

Como se muestra en la documentación de jQuery UI, para crear un acordeón se debe hacer esto:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('acordeon1').accordion();
  }
</script>
<dl id="acordeon1">
  <dt>Elemento 1</dt>
  <dd>Primer elemento de nuestra lista.</dd>
  <dt>Elemento 2</dt>
  <dd>Segundo elemento de nuestra lista</dd>
</dl>

Lo que se hace aquí es agregar a la página Web la referencia a los dos archivos de JavaScript y una función que convierte en acordeón a nuestra lista.

Todo esto se ve sencillo si hacemos la página a mano, pero aquí estamos utilizando un WebControl de .NET, y lo más conveniente es tener todas esas funciones dentro del mismo. En realidad no vamos a hacer algo muy complicado, no más que lo que hemos hecho hasta ahora.

Los archivos JS que utilizaremos no son clases de .NET, ni se puede acceder a ellos directamente. Serán utilizados como recursos.

En el explorador de soluciones de Visual Studio, seleccionamos el archivo de jquery-1.3.2.js, le damos clic derecho y seleccionamos Properties, para ver el panel de Propiedades. Ahí veremos una propiedad "Build Action", a la cual le daremos el valor de "Embeded Resource". Luego cambiamos la propiedad "Copy to output Directory" a "Do not copy". Con esto, le indicamos al compilador que el archivo será insertado dentro del control (es decir, en el archivo dll generado de la compilación) y se accederá a él como recurso, no como archivo, y que al mismo tiempo, no debe crearse una copia en la compilación. Hacemos lo mismo con el archivo de jQuery UI.

Ahora nos vamos al archivo Properties/AssemblyInfo.cs, para agregar las referencias a estos recursos. Al principio del archivo, escribimos una referencia a System.Web.UI. Al final, escribimos esto:

Si se fijan, pusimos a cada archivo "IsraSoft.Recursos". Esto es porque ambos están dentro del proyecto que tiene un espacio de nombres IsraSoft y están dentro de la carpeta Recursos, como lo vimos en la creación del proyecto. Es importante verificar que la referencia al archivo siempre esté correctamente escrita.

Ahora nos vamos de vuelta a nuestro control, donde haremos las funciones que generen esas etiquetas de script que puse de ejemplo arriba.

Ya modificamos la función Render en Elemento. Ahora trabajaremos sobre otro método en la clase Acordeon, que también se ve involucrada en el proceso de generación del control: OnPreRender.

PreRender es una función que se ejecuta antes de generar las etiquetas HTML que forman un WebControl. Ya que vamos a agregar código de JavaScript para nuestro botón, hay que introducirlo fuera del elemento HTML. En este caso, lo haremos como en el ejemplo, primero la etiqueta <script> y luego la <dl&rt;.

Como antes, mantenemos la llamada a base para que se realicen las operaciones heredadas en este método. Después utilizamos un nuevo elemento, muy útil en el desarrollo Web en .NET: ClientScript.

ClientScript, objeto del tipo ClientScriptManager, nos permite realizar distintas operaciones para insertar código de JavaScript en una página ASPx.

En nuestro control, tenemos que agregar la referencia a los dos archivos de JavaScript (jQuery y jQuery UI). El método que usamos en este ejemplo es RegisterClientScriptResource, que hace precisamente lo que queremos: insertar una referencia a los archivos JS desde los Recursos de nuestra librería.

Como recordarán, le dimos a estos archivos la propiedad de aparecer como Embeded Resources. Lo que hará .NET dentro de nuestra librería es generar un paquete WebResource.axd, donde se almacenará toda referencia a un recurso, ya sea una imagen, un script, una hoja de estilos... Cualquier objeto agregado como recurso.

RegisterClientScriptResource lleva dos parámetros: un tipo para el script y el recurso que se enlazará. El primero (que sinceramente no sé de qué depende) debe llevar el tipo de clase del que lo estamos llamando, en este caso, Acordeon. En el segundo, daremos el mismo nombre que pusimos en la referencia dentro del archivo AssemblyInfo.cs.

Después de agregar esas referencias, sigue crear un bloque de script que convierta nuestro elemento en un acordeón, lo cual se hace con el método RegisterClientScriptBlock del ScriptManager. El contenido de la función de javascript lo puse en una variable para que puedan verlo por separado.

El segundo parámetro es un identificador para este bloque de código. Si tenemos un script genérico, que puede ser utilizado en distintos controles, a todos le damos el mismo identificador. Antes de registrar el bloque, podemos revisar si ya está en la página, usando Page.ClientScript.IsClientScriptBlockRegistered("identificador") para verificarlo. En nuestro control, el bloque será único para esta clase (pues la operación incluye el id del control), así que no necesitamos condicionarlo.

En el tercer parámetro es el contenido en javascript, el mismo que puse en la variable string.

El último parámetro nos pregunta si queremos que se inserten automáticamente las etiquetas <script></script>. Yo pongo este parámetro en falso (y por eso escribí en el script éstas etiquetas), porque al hacerlo automáticamente, se crean algunas instrucciones de esas únicas para Internet Explorer, y eso es algo que no queremos como los buenos desarrolladores Web que somos

En cuanto al script, es la misma función que convierte nuestro control en un acordeón, como lo vimos arriba en el ejemplo de HTML. this.ClientID devuelve el id del elemento HTML, no el del WebControl. Si insertamos un acordeón de nombre acordeon1 en nuestra página, posiblemente ClientID sea igual que ID, pero si la página, por ejemplo, tiene un MasterPage y el acordeón está dentro de un ContentPlaceHolder, ClientID devolverá algo como "ctl00_ContentPlaceHolder1_acordeon1". Por eso no utilizamos ID, porque su valor no necesariamente es igual en el control HTML.

Al crearse nuestro control, en HTML se insertará la función $('#acordeon1').accordion(), para convertir nuestra lista, tal como lo deseamos, en un acordeón.

Ahora sí! Ya no sólo tenemos una lista de definiciones, sino que también tiene el efecto que queríamos! Pero para quienes no sepan cómo usarlo en nuestro sitio Web, se los explicaré.

Aplicación de nuestro acordeón a un sitio Web.

Ya terminado nuestro control, nos vamos al menú Build > Build Solution, o en el explorador de soluciones, le damos clic derecho al proyecto y seleccionamos Build. Si todo sale bien, se compilará el proyecto y generará una dll con el nombre de ensamblado (Assembly name) establecido en AssemblyInfo.cs (o en las propiedades del proyecto). Esta dll se guardará en la carpeta del proyecto, en la carpeta Bin\Debug. La dejaremos ahí por ahora.

En el sitio Web (si no lo tenemos, hay que crearlo... obviamente), le damos clic derecho en la raíz del sitio o en la carpeta Bin y seleccionamos "Add Reference...". Algunas personas se van con la finta de que hay una opción "Add Web Reference", pero eso es otra cosa, no se confundan.

En el cuadro que aparece, nos vamos a la pestaña Browse y, como si fuésemos a abrir un archivo, buscamos la dll en la carpeta del proyecto Acordeon. Presionamos OK y nuestra referencia se habrá creado.

Teniendo la referencia al proyecto, desde el código de servidor (C# o VB) podemos invocar a las clases que se encuentran en el proyecto.

Pero bueno, la idea es agregarlos desde el editor de html. Podemos agregar la referencia en el archivo ASPx de esta forma:

    <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="prueba._Default" %&rt;
    <%@ Register Assembly="Acordeon" Namespace="IsraSoft.MisControles" TagPrefix="ctrl" %&rt;

Assembly es el nombre del archivo sin el ".dll". Namespace es el que incluye nuestro control. TagPrefix es lo que irá en la etiqueta antes del nombre del control, así como para los demás WebControls está el prefijo "asp:".

    <body>
        <ctrl:Acordeon ID="ac1" runat="server">
            <ctrl:Elemento runat="server" Titulo="Elemento 1">
                <p>contenido del elemento 1</p>
            </ctrl:Elemento>
            <ctrl:Elemento runat="server" Titulo="Elemento 2">
                <h1>elemento 2</h1>
                <p>contenido del elemento 2</p>
            </ctrl:Elemento>
        </ctrl:Acordeon>
    </body>

Con esto, nuestro control se generará tal como lo esperamos (para los pesimistas, como debe generarse ).

Claro, han de pensar "qué flojera escribir esa línea en todas mis páginas". Pues para ustedes que se quieren ahorrar tiempo antes del Parkinson, podemos escribir esto sólo una vez, dentro de nuestro archivo de configuración.

Abrimos nuestro archivo web.config, o lo creamos, si aun no existe en el sitio Web. Hay una etiqueta <system.web>, dentro de la cual añadiremos esto:

    <pages>
      <controls>
        <add assembly="Acordeon" namespace="IsraSoft.MisControles" tagPrefix="ctrl" />
      </controls>
    </pages>

Es lo mismo que hacemos en la página, con la etiqueta @Register, sólo que esta vez aplicará para todas las páginas del proyecto. Sencillo, ¿no?

Bueno, ya terminamos. Creamos un sencillo acordeón para nuestras páginas Web. Pero esto sólo es una introducción a lo que es crear un control personalizado en ASP.NET. Hay más cosas que se pueden hacer para extender nuestra clase, por ejemplo, agregar todas las opciones que puede tener la función accordion de Jquery UI, y aplicarlas de acuerdo al valor dado en nuestro control. Podemos agregar propiedades de estilos también, sobre todo en Elemento, que crea dos etiquetas HTML.

Cada vez que recompilemos nuestra librería, en el sitio Web debemos ir a la carpeta Bin en el explorador de soluciones, dar clic derecho a la dll y seleccionar "Update Reference". Las dll en Bin no son exactamente referencias, sino copias de las dlls externas, por lo que debemos actualizarlas cada vez que hay un cambio en el origen.

Compilación en consola

Para los que nos hacemos los muy-muy, que somos la mera onda, y que decimos que no necesitamos Visual Studio y que hacemos nuestros programas en el bloc de notas... qué mentirosos somos... Pero si queremos apantallar, aquí les muestro cómo compilar nuestro proyecto desde consola de comandos.

Antes que otra cosa, sí. Se puede compilar código de C#/VB.NET desde el símbolo de sistema, cmd, el remedo de MS-DOS o como quieran llamarlo. .NET se instala en la carpeta Windows\Microsoft.NET\Framework\[version]\, donde encontraremos unos ejecutables csc.exe y vbc.exe, que son los compiladores.

En una carpeta almacenamos los archivos Acordeon.cs, AssemblyInfo.cs y los dos archivos de JavaScript. Luego nos vamos al símbolo de sistema y ejecutamos esta sentencia:

\WINDOWS\Microsoft.NET\Framework\v2.0.50727\csc.exe /out:Acordeon.dll /target:library /res:jquery-1.3.2.js,IsraSoft.Recursos.jquery-1.3.2.js /res:jquery-ui-1.7.2.custom.min.js,IsraSoft.Recursos.jquery-ui-1.7.2.custom.min.js AssemblyInfo.cs Acordeon.cs

• /out - Archivo destino de nuestro proyecto.
• /target - Tipo de ensamblado. En este caso será una librería.
• /res - Recursos. Se pone la ruta al archivo y separado con coma, el nombre de la referencia al recurso. En el caso de los archivos JS, la referencia es la misma que se usa en el AssemblyInfo y en la llamada desde el control Acordeon.
• Al final se ponen los archivos a compilar. También se puede poner *.cs

De la misma forma que en Visual Studio, se creará una dll que agregamos a nuestro sitio Web, en la carpeta Bin. El resto es igual.

Para compilar código de Visual Basic (usando vbc.exe) no estoy seguro si es igual. Nunca lo he usado, así que se los quedaré debiendo.

Ahora sí, es todo sobre este tutorial. Sé que fue muy largo (mis dedos lo resienten), pero lo que quise hacer fue explicar lo necesario para dudas. No voy a pegar el código de un archivo sin explicarles cómo funciona, ni voy a hacer una guía como esas en las que me basé, que tratan de una sola cosa cada una, y que necesité unirlo todo yo solo

Me tardé mucho porque lo hice de poco en poco, en el poco tiempo que llegara a tener en la tarde, y el fin de semana no tuve tampoco mucho tiempo, por motivos personales. Al fin pude terminarlo.

Espero que esto les sirva como referencia para otros controles que tengan que hacer. Cualquier duda, pueden escribirme en los comentarios.