GUIA DE APRENDIZAJE NO. 006

CONTROLES DE USUARIO

INSTRUCTOR: Ing. Ariel Almonacid Arias

AREA: Programación en ASP.NET.

ESTUDIANTE: _____________________________________________________.

GRADO: ___________.

OBJETIVOS: Ilustrar en los educandos el modo de uso de los controles de usuario.

CONTENIDOS

Controles de usuario

Los controles de usuario son tan fáciles de crear que, de hecho, ya conoce casi todo lo que necesita para construirlos. Se crean exactamente igual que los formularios Web y disponen de un diseñador visual idéntico que permite arrastrar otros controles sobre su superficie. De hecho cualquier formulario Web (página ASPX) puede transformarse directamente en un control reutilizable con sólo unos pocos cambios de sintaxis.

Para añadir un nuevo control de usuario pulse con el botón secundario sobre el nodo raíz del proyecto en el explorador de soluciones y escoja la opción "Agregar elemento...". En el diálogo que aparece (ya sobradamente conocido) seleccione el icono correspondiente a Control de usuario Web, como se ilustra en la siguiente figura:

Diálogo para añadir un nuevo control de usuario.

Si se fija en la figura detenidamente verá que, salvo por el icono elegido, no hay diferencia alguna con añadir un nuevo formulario Web. De hecho la única diferencia existente en este punto es la extensión que se le otorgará al

archivo resultante, que es .ascx en lugar de .aspx.

El archivo resultante se distingue fácilmente en el explorador de proyectos porque Visual Studio le asigna un icono diferente (vea la figura lateral).

Al igual que un formulario Web corriente un control de usuario dispone de un diseñador visual con doble vista (Diseñoy Origen) y de un editor de código asociado en caso de haber escogido la separación de código e interfaz (opción marcada en la figura anterior).

Del mismo modo están disponibles para arrastrar sobre la superficie de diseño los mismos controles web que en el caso de los formularios Web.

La primera diferencia con una página ASPX la encontramos al ver las etiquetas que constituyen la parte de interfaz de usuario del control. En los formularios aparece al principio una directiva <%@Page %>, pero en los controles la directiva se llama <%@Control %> si bien se usa de un modo muy similar:

Código origen de un control de usuario sobre el que se han arrastrado tres controles Web.

Otra diferencia fundamental de un control con una página es que hereda de la clase UserControl y no de Page. Sin embargo ambas clases base heredan a su vez de la clase TemplateControl, por lo que conservan multitud de características en común.

Código de la clase code-beside de un control de usuario. en el que se ve que ésta hereda de UserControl .

De hecho la similitud es tal que el entorno de desarrollo le asigna al manejador del evento Load del control el nombre Page_Load (en lugar de, por ejemplo, UserControl_Load) como se observa en la figura.

Definición de la funcionalidad pública del control de usuarioTodo a partir de ahora es exactamente igual que en el caso de los formularios Web. Podemos arrastrar cualquier control Web desde el cuadro de herramientas sobre la superficie del control, asignar sus propiedades y recibir post-backs que generan eventos en los controles que hemos incluido.

Por supuesto, como en esencia un control de usuario no es más que una clase de .NET, podemos extenderla añadiéndole nuestros propios métodos y propiedades. Todos los miembros públicos que agreguemos estarán disponibles desde la página que albergue al control del mismo modo que lo están las propiedades y métodos de cualquier control Web normal. Esto es muy útil para encapsular el acceso a ciertas funcionalidades que hayamos incluido.

Por supuesto los controles que coloquemos en la superficie del control se verán adecuadamente en la página que lo contenga y se comportarán del modo esperado, esto es, recibiendo eventos, conservando su estado en el ViewState, etc...

Uso de los controles de usuarioAhora que ya sabemos crear controles de usuario veamos la forma de usarlos desde los formularios Web.

El modo más sencillo de incluir un control de usuario en una página ASPX es simplemente arrastrándolo desde el explorador de proyectos sobre su superficie de diseño. Esto hará que se visualice el control completo dentro de la página:

Control de usuario arrastrado sobre la superficie de un formulario Web (los puntos rojos se usan para destacarlo, no estaban en la imagen original).

Nota:Visual Studio 2010 ofrece un mayor soporte en tiempo de diseño para los controles de usuario que permite ver el contenido del control y ajustar sus propiedades desde el explorador de propiedades. En versiones anteriores de Visual Studio .NET lo único que se veía de estos controles era un cuadro de color gris con su nombre y eran por tanto más difícil trabajar con ellos y encajarlos en un diseño general.

Cuando observamos el código de la página ASPX desde la que estamos utilizando el control de usuario, vemos que al principio de ésta se ha incluido una directiva Register:

Quizá el atributo más importante de esta directiva sea el último, TagPrefix. El valor asignado a él será el que se utilice para distinguir de manera única un control de usuario dentro de la página. De este modo se pueden utilizar sin problemas controles de usuario con el mismo nombre en una misma página. Así, según la línea anterior podríamos definir en la página un control del tipo Micontrol usando una sintaxis como esta:

Las propiedades que hayamos definido para la clase Micontrol se pueden establecer mediante atributos (al igual que ID en la línea anterior, por ejemplo) siempre que se trate de tipos simples.

Podemos modificar la directiva Register para incluir un prefijo que nos guste más o sea más descriptivo que el que Visual Studio ha puesto por defecto.

Carga dinámica de controles de usuarioOtro modo de hacer uso de los controles de usuario es cargarlos dinámicamente según los necesitemos. El método LoadControl de la clase Page o del formulario de la página es el que nos va a ayudar a conseguirlo. Sólo hay que pasarle como argumento el nombre del archivo ASCX que contiene la definición del control de usuario, de modo similar a este:

Dim c As Control

c = Me.LoadControl("Micontrol.ascx")

Me.Form.Controls.Add(c)

En lugar de usar un tipo genérico (Control) como en este fragmento también podemos usarlo como el verdadero tipo del control y así llamar a sus métodos y propiedades antes de añadirlo al formulario:

Dim c As Control

Dim miC As Micontrol

c = Me.LoadControl("Micontrol.ascx")

miC = CType(c, Micontrol)

miC.ValorInicial = "Bienvenido a esta página"

Me.Form.Controls.Add(miC)

En este ejemplo hemos usado el control con su verdadero tipo para poder asignar la propiedad ValorInicial antes de agregarlo a la página.

Videos 331(Video a.)(para desarrollar en clase, no agregar a guía)

Ejemplo de utilización de parte de la interfaz de usuario con su lógica mediante el uso y la definición de controles de usuario para ello añadamos un control de usuario a nuestro proyecto: -Click derecho sobre el proyecto en el explorador de soluciones –Agregar nuevo componente –control de usuario web (en el video se guardó con el nombre encuesta pero yo lo guarde con el nombre InterfazususarioGuia06V331) –Aceptar.

Dentro de la carpeta de nuestro proyecto creemos una nueva llamada imágenes y a ella agreguémosle una imagen en forma de tira para el ejemplo; En diseño agregamos un control Image, en sus propiedad ImageUrl(seleccionemos la imagen), en la parte inferior del diseño agreguemos un control Label, en su propiedad text coloquemos te gusta el curso de ASP, ágamos el texto más grande con la propiedad Font, Size, Large; en ForeColor escojamos un color suave; debajo del label agreguemos un control RadioButtonList, dentro de las tereas que muestra el control escojamos Editar elementos, agregar, en Text coloco Si, y agregamos otro elemento y en text ponemos No, aceptar y cerramos las tareas; ahora añadamos un button para enviar esta clase de encuesta que estamos haciendo, en la propiedad Text (Enviar) y en Id (cmdenviar). Bueno ya hemos creado nuestro control de usuario, ahora guardémoslo y lo cerramos, ubiquémonos en otro formulario web(Default.aspx) y simplemente lo arrastramos al diseño(para poderlo mover agreguémoslo a una capa)

Fin video a.

Video b.

Nota: Los controles de usuario no son más que clases normales que heredan de la clase UserContro, definida asi::

PartialClass InterfazUsuarioGuia06V331a(nombre de mi control de usuario)

Inherits System.Web.UI.UserControl

Ahora con el ejemplo del control de usuario vamos a crarle una propiedad al control label1 que permita ajustar el texto que queremos que aparezca dentro de la etiqueta, para ello vamos al codigo y establecemos la propiedad, si aparece un get con su end get, como va a ser de solo escritura le quitamos el get, el codigo queda asi:

PartialClass InterfazUsuarioGuia06V331aInherits System.Web.UI.UserControl

PublicWriteOnlyProperty Pregunta() AsStringSet(ByVal value AsString)Label1.Text = valueEndSetEndProperty

Ahora vamos al control Default en el que habimos arrastrado nuesto control de ususario y nos ubicamos en el codigo dentro del evento de la carga de la pagina para definir propiedades de este control de usuario asi:

ProtectedSub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.Load

InterfazUsuarioGuia06V331a1.pregunta = "¿has comido hoy bien?"EndSub

Observen que al nombre Id del control de usuario que en este caso había sido grabado como InterfazUsuarioGuia06V331a, dentro del diseño de la página en la cual fue arrastrado(Default) se le asigna el mismo nombre con un 1 al final, y con este nombre se le invoca dentro del PageLoad la propiedad que le habíamos creado al código del control de usuario que en este caso es pregunta. Corran la aplicación y verán que de esta manera podemos cambiar el contenido del Label1 creado en el control de usuario.

Fin video b.

Técnicas de trabajo y consejos varios

Navegación entre páginas Antes de nada me parece necesario comentar que en las aplicaciones ASP.NET se utilizan seguramente muchas menos páginas que en el caso de que la misma aplicación estuviese escrita con ASP clásico. Esto se debe a que, gracias a los post-back y los correspondientes eventos de servidor se encapsula más la funcionalidad en un sólo archivo. Por ejemplo en una aplicación ASP 3.0 clásica para recoger los datos de un usuario con mucha probabilidad escribiríamos dos (o incluso tres o cuatro) páginas: la página HTML con el formulario, la página ASP a la que se envían los datos del formulario y puede que una página o dos para informar al usuario del éxito o del fracaso de su acción. En ASP.NET todo esto se resolvería con una sola página ASPX, un evento de servidor y probablemente mostrando y ocultando controles Web desde dicho evento.

Por supuesto una aplicación estará formada de todos modos por un número más o menos elevado de páginas a las que se debe dirigir al usuario. Existen diversas maneras de dirigir a un usuario hacia otra página o recurso de la aplicación.

La primera de ellas, y la más sencilla, consiste en utilizar controles del tipo HyperLink que tiene este aspecto en el

cuadro de herramientas: . Estableciendo su propiedad NavigateUrl estaremos indicando a qué página queremos enviar al usuario cuando pulse sobre el enlace resultante. Si la página es una de las que pertenecen a nuestra aplicación será muy fácil seleccionarla gracias al diálogo especial que aparece para ello:

Diálogo de selección de páginas de nuestra aplicación.

Además si ajustamos la propiedad Text de este control ese será el texto que se muestre para el enlace de la página. Es posible utilizar un gráfico en lugar de texto para el enlace si se utiliza la propiedad ImageUrl.

Nota:Existen controles especializados en crear árboles de navegación en una página pero por debajo usan enlaces como éstos. Los estudiaremos en un próximo módulo.

La otra manera de enviar a los usuarios a una página propia o ajena consiste en hacer uso del método Redirect de la clase HttpResponse del contexto de llamada de la página. Así podremos controlar desde un evento de servidor a dónde enviaremos al usuario. Por ejemplo, si queremos enviarlo a una página diferente según lo que haya escogido en un control de selección podríamos escribir algo similar a esto en el evento de pulsación de un botón:

If opciones.ListIndex = 0 Then

Response.Redirect("opcion1.aspx")

Else

Response.Redirect("opcion2.aspx")

End If

El método Redirect envía al navegador del usuario una cabecera especial de redirección que le indica que, en lugar de descargar los contenidos de la página actual, debe solicitar una nueva. Esto provoca una nueva petición de página desde el navegador por lo que no es la forma de navegación de mayor rendimiento (hay el doble de viajes al servidor que en un enlace directo). Sin embargo dota de gran flexibilidad a la hora de decidir qué hacer ante la solicitud de página de un usuario o para redirigir al final de un proceso ejecutado en el servidor.

Envío de datos entre páginasComo hemos visto el comportamiento normal durante la pulsación de un botón u otro evento de controles servidor es el de realizar un post-back a la página actual. Sin embargo puede haber ocasiones en las que, por el motivo que sea, se necesita realizar ese envío de datos a otra página diferente, pero eso sí, conservando el acceso a todos los controles y datos de la página original (que como sabemos están contenidos en el ViewState).

ASP.NET 2.0 ha añadido una nueva funcionalidad denominada Cross Page Posting, que permite precisamente esto. Para conseguirlo lo único que hay que hacer es ajustar la propiedad PostBackUrl del control cuyos eventos queremos gestionar desde otra página asignándole la ruta virtual de ésta última.

Los datos se reciben en la otra página pero todavía tenemos acceso a los datos de la página original a través de la propiedad PreviousPage de la nueva. Se trata de un objeto Page reconstruido a partir del ViewState recibido. Si la usamos así, de modo genérico, tendremos que utilizar el método FindControl de la clase Page para localizar cualquier control que hubiese en la página original. Por supuesto si ambas páginas pertenecen al mismo espacio de nombres (o lo hemos declarado) podemos forzar el uso de la página como la clase original de ésta usando CType y acceder directamente a sus métodos, propiedades y controles.

También es posible determinar desde una página si los datos que está recibiendo son de su propio Post-back o pertenece a otra página mediante la propiedad IsCrossPagePostBack, que es muy similar a la propiedad IsPostBack que ya hemos estudiado.

Esta técnica es de un uso poco frecuente pero se trata de una novedad poco conocida que me ha parecido interesante incluir aquí.

Transferir el control entre páginasA veces puede ser útil procesar el código de una página y justo después transferir el control a otra página ejecutando también su código. El método Transfer de la clase HttpServer ejecuta dinámicamente el código de una página desde otra cualquiera.

La forma de hacerlo es la siguiente:

Server.Transfer("otrapagina.aspx")

Al contrario que el uso de Redirect, Server.Transfer no cambia la URL que el usuario ve en su navegador ya que desde fuera no se observa ninguna variación en la página ejecutada. Es una ejecución en el servidor, sin redirección en el cliente.

Este método es análogo al del mismo nombre en ASP clásico, si bien en ASP.NET su utilidad es menor puesto que, como veremos, existen maneras mucho mejores y más recomendables de reutilizar código de uso común en las páginas.

Reutilización de código en una aplicación A menudo, al escribir una aplicación, tenemos necesidades similares en diversas partes de ésta. Por ello sería absurdo escribir una y otra vez el mismo código dentro de los manejadores, al cargar una página y demás eventos. Lo mejor es encapsular el código en diversos métodos y llamar a éstos cuando sea necesario.

En ASP clásico, por ejemplo, se solían agrupar las funciones de uso común dentro de archivos de inclusión que luego se utilizaban en las diferentes páginas gracias a una directiva <!-- #include -->. Si bien esto constituía una manera básica de reutilizar código no ofrecía la flexibilidad de un lenguaje capaz de crear bibliotecas de objetos y métodos.

En .NET es posible crear nuevas clases que encapsulen funcionalidades comunes y que sean reutilizables en cualquier punto de la aplicación. En ASP.NET 2.0 existen una serie de carpetas con nombres especiales que cuelgan de la carpeta principal de la aplicación y que llevan asociado un comportamiento especial. Una de estas carpetas es 'App_Code'. Básicamente, todo el código que se coloque bajo esta carpeta se compila de manera automática.

Tal y como hemos estudiado anteriormente, cuando se solicita una página ésta se compila de manera automática junto con su archivo de "code-beside" de forma que, a medida que se accede a las diferentes partes de una aplicación se va compilando por completo. Dadas las características de Visual Studio, el código residente en archivos que no sean páginas o clases parciales de "code-beside" no se compila ya que jamás navegamos por él ni se referencia desde otras páginas. La excepción a esta regla es el código que coloquemos en la carpeta App_Code que se compila automáticamente al comenzar la aplicación.

Por ello, una buena forma de reutilizar código entre páginas es agregar clases especializadas a la carpeta App_Code. De hecho si presionamos con el botón secundario sobre el proyecto en el explorador de soluciones y agregamos un nuevo elemento de tipo Clase se nos mostrará una advertencia diciendo, grosso modo, que debemos añadirla a App_Code si queremos que funcione. Incluso se crea automáticamente la carpeta si no lo hemos hecho ya con anterioridad:

Advertencia para colocar código en App_Code (aplicable a Visual Studio 2010 ó superior).

Incluso si intentamos agregar un nuevo elemento a la carpeta App_Code sólo se nos ofrecerá la posibilidad de incluir nuevas clases, archivos de texto (para comentarios, por ejemplo) o DataSets. Estos últimos son DataSets tipados que no dejan de ser clases con un diseñador asociado.

Una vez creadas nuevas clases en estas carpeta podemos añadirle métodos, propiedades y campos para dotarlas de la funcionalidad que requiramos. Por supuesto son clases normales de .NET por lo que podremos derivarlas de otras clases para obtener funcionalidad "gratis", hacer que implementen interfaces o incluirlas dentro de módulos o espacios de nombres para ordenarlas.

Si lo que desea es compartir código entre distintas aplicaciones o encapsular funcionalidad en una librería independiente, puede crear un proyecto de tipo librería de clases. Este proyecto genera un archivo .DLL que puede compartir entre distintas aplicaciones. Con esto podrá reutilizar sus clases en tantos proyectos como quiera, incluso en distintos tipos de proyectos como Aplicaciones Web y Aplicaciones Windows.

Nota: Si dispone de la versión Visual Web Developer no podrá generar bibliotecas DLL.

Video 341

Ejemplo para observar cómo podemos utilizar ciertas porciones de código desde cualquier página o cualquier control de nuestra aplicación, para ello creemos una clase que no sea dependiente deninguna clase ni ningún control pare ello:

Vamos y agreguemos un nuevo elemento al proyecto, este será Clase, démosle el nombre(para mi CrearClaseGuia06V341; para el videos es Utils), al darle agregar el sistema nos dice que la clase debe estar contenida en la carpeta App_Code(no necesariamente debemos dar si, ya que podemos decidir manualmente así: click derecho sobre el proyecto, agregar carpeta ASP.NET, en este caso agregaos App_Code), a esta carpeta le podremos añadir clases que se compilaran automáticamente cuando empiece la aplicación; demos click sobre la carpeta con el botón derecho y agreguemos un nuevo elemento, seleccionamos clase, damos de nuevo el nombre Utils.vb y agrega; ahora definamos en utils un método que podamos utilizar desde cualquier parte de nuestra aplicación así: generemos un método que nos devolverá la versión Windows en la que se está aplicando nuestra aplicación, en la clase creemos este código:

Imports Microsoft.VisualBasic

PublicClass CrearClaseGuia06V341PublicSharedFunction VersionDewindows() AsStringReturn Environment.OSVersion.TostringEndFunctionEndClass

Shared: indica que es una clase compartida o estática para poderla llamar sin instanciar ningún objeto de la clase utils, As String es para que me devuelva una cadena.

La clase Environment con su propiedad OSVersion me permite llamar la versión de Windows, también le decimos que nos devuelva una cadena con la versión actual del sistema operativo; como esta clase está dentro de App_Code la voy a poder utilizar desde cualquier punto de nuestra aplicación.

Ahora para comprobarlo ubiquemos en la página Default, dentro del código cambiemos la pregunta que metimos en el control de usuario que hicimos anteriormente así:

InterfazUsuarioGuia06V331a2.Pregunta= CrearClaseGuia06V341.VersionDeWindows()

Con esto me muestra en la pregunta de la encuesta la versión de Windows.

Fin video

“LA INTELIGENCIA CONSISTE NO SOLO EN EL CONOCIMIENTO SINO TAMBIEN EN LA DESTREZA DE APLICAR LOS CONOCIMIENTOS EN LA PRACTICA”. Aristóteles

NOTA: Este material es solo un introductorio, el estudiante debe fortalecer estos conceptos a medida que se van viendo las clase y anexarlos al portafolio.

FIRMA DEL ESTUDIANTE FIRMA Y CEDULA DEL ACUDIENTE

FIRMA DEL INSTRUCTOR