User Controls

A partir de hoy intentaré escribir un artículo en mi blog sobre cómo resolver ciertas situaciones con las cuales uno se puede llegar a encontrar en el trabajo.

Para empezar, muchos de nosotros en el mundo de la programación nos encontramos en casos donde necesitamos repetir ciertos fragmentos de páginas web. Hablo de los obvios casos como el formulario para el logueo, el muy conocido:

Pero muchas sabemos que en el día a día de los trabajos, de los freelos que nos salen, nos encontramos con que no solo debemos construir algo así, sino que también debemos repetir ciertos componentes como “recuperar password”, “noticias del día”, “calculadora”(para casos como login a bancos) y demás.

Debido a esta necesidad que tenemos, en ASP.Net tenemos la oportunidad de construir nuestros propios controles, que son llamados “User Controls”.

Pero qué es un “user control”? Según la definición del mismo Microsoft, un user control es un tipo de control compuesto que trabaja como una página web ASP.NET, porque en este podemos agregar controles ya existentes (TextBox, Buttons, Grids, etc), definir propiedades y métodos para el control. Y además se pueden embeber dentro de una página ASP.NET para que trabajen unidas.

Entonces, particularmente podemos definir algunas características del User Control

- Permite reutilizar componentes como TextBox, Button, ListBox, CheckBox, etc.

- Permite definir propiedades y métodos

- Permite reutilizar otros user controls existentes

- La extensión de un user control es “.ascx”

- Permite manejar muchos eventos de la clase “Page” (como el Page_Load y otros)

Esas son solo algunas características que puedo mencionar. Pero vamos al grano, osea lo que le gusta más a la gente, el código.

Empezaremos con un ejemplo simple. Varios que ven este tema de User Controls, conocerán el clásico User Control que enseñan al inicio que es el de Login (http://www.15seconds.com/Issue/020319.htm). Pero, imaginemos un poco, si tenemos login, también podemos tener un “recuperar password”. Así que hagamos eso como primer ejemplo simple. Para esto, imaginemos, un requerimiento de nuestro cliente, es que el usuario pueda recuperar su contraseña por “usuario” o por “E-mail”, entonces para esto tenemos que colocar en nuestro User Control un “dropdownlist”, donde se colocará “usuario” o “E-mail”, un textBox donde colocará su información y, por último, un Button.

Para esto asumiremos que ya hemos creado nuestro Web-site y dando click derecho a la raíz seleccionamos “add New Item”, dentro de la ventana que nos sale seleccionamos “Web User Control”, le colocamos de nombre “wucRecoveryPass”.

Al darle click a “Aceptar” nos encontraremos con algo parecido a las directivas de una página web ASP.Net normal, algo así:

Jugando un poco con este user control, se pueden dar cuenta que es muy parecido a crear una página web común y corriente.

Entonces, luego de familiarizarnos con esto, procedemos a agregarle una tabla para darle forma y luego los controles que necesitamos. Finalmente tenemos el sgte código:


<table style="width: 100%;"> <tbody><tr> <td colspan="4"> <b> Si olvidó su contraseña, coloque sus datos necesarios para enviársela por E-mail </b> </td> </tr> <tr> <td> <asp:literal runat="server" id="ltrUsername" text="Usuario(o E-mail)"></asp:literal>
</td> <td> <asp:textbox id="txtDato" runat="server"></asp:textbox>
</td> <td> <asp:dropdownlist runat="server" id="ddlTipo"> <asp:listitem value="0" text="Usuario"> <asp:listitem value="1" text="E-mail"> </asp:listitem> </asp:listitem></asp:dropdownlist>
</td> <td> <asp:button runat="server" id="btnAceptar" text="Enviar E-mail"></asp:button>
</td> </tr> </tbody></table>

Teniendo este código, necesitamos alguna forma de acceder a los componentes (TextBox y DropDownList). Entonces procedemos a crear nuestras propiedades.


public partial class wucRecoveryPass : System.Web.UI.UserControl {
private int entero; public string DatoUsuario { get { return txtDato.Text; } } public string TipoDato { get { return ddlTipo.SelectedValue; } } protected void Page_Load(object sender, EventArgs e) { } }


Ahora sí tenemos todo lo necesario para poder utilizar nuestro control. Para eso creamos una nueva página web llamada “frmUsingUserControl.aspx”. Para utilizar este control tenemos que colocar algo muy simple en la parte superior de nuestro aspx.

Finalmente nuestro form queda de la sgte forma


<form id="form1" runat="server"> <style="width: 500px;"> <wuc:recoverypass id="wucRecov" runat="server"> </wuc:recoverypass></div> </form>

Hasta ahí tenemos algo muy simple. Pero cada uno puede ir experimentando muchas cosas como agregarle un evento al boton en la parte del diseñador del User Control. En ese caso verán que el evento se crea dentro del code behind de éste, pero si desean controlarlo desde la página misma, deberán de crear un delegado, asignárselo al evento del botón y listo. Con eso tienen todo el control que deseen sobre sus user controls, utilizarlos en sus proyectos, tenerlos para reutilizarlos en más de un proyecto, entre otras cosas.

Termino este pequeño artículo dándoles para pensar, cómo harían esas calculadoras que pueden variar de posición sus números cada vez que entran? Un claro ejemplo www.scotiabank.com.pe. Y para el sgte artículo, les dejo la pregunta, cómo harían de una forma dinámica crear un User Control que tenga varios TextBox, los cuales pueden variar dependiendo de un parámetro. Posteen sus ideas y en el sgte artículo les daré algunos tips que he descubierto utilizando los user controls.

Aparte, si es que llego a ir a la conferencia de Microsoft de este miércoles, les estaré informando al respecto.

Nos vemos

cya :3

P.d. Acá les dejo un link con el código fuente de lo explicado, así también el cómo agregarle un evento al botón de forma directa. Código Fuente

Shinji

1 comentarios:

Jose Luis Manrique dijo...

Hola Shinji, he revisado tu blog y me he dado cuenta que te falta un visualizador de código fuente, en mi blog uso el siguiente: http://alexgorbatchev.com/wiki/SyntaxHighlighter, a ver si animas a ponerlo no es muy dificil de hacerlo solo agregas los .js a tu theme y pones el estilo tb y san se acabo. Nos vemos luego.