CONTROLES WEB AVANZADOS

Pgina: 1 / 16

5. AdRotator
El control rotador de anuncios (AdRotator), permite mostrar una serie de anuncios, en forma de imgenes, dentro de una pagina ASP.NET, alternando la aparicin de las imgenes, en otras palabras un banner. Para indicar las imgenes y los enlaces de los anuncios utilizamos un archivo en formato XML, el cual tiene un formato establecido: Todo el fichero se encuentra encerrado entre dos etiquetas <Advertisements>, y cada anuncio viene representado por un elemento <Ad>, y cada elemento que se corresponde con un anuncio tiene una serie de propiedades que definen el comportamiento de dicho anuncio, y son las siguientes: ImageUrl: Es la nica de las propiedades que es obligatoria, y es utilizada para indicar la ruta en la que se encuentra el fichero de la imagen. Esta ruta puede ser absoluta o relativa. NavigateUrl: Esta propiedad indica el enlace que va a tener la imagen, al pulsar sobre ella. AlternateText: El texto que se indique en esta propiedad se traducir en la propiedad alt de la etiqueta <img> de la imagen del anuncio, es decir, ser el tooltip que aparecer cuando situemos el cursor del ratn sobre la imagen. Impressions: El nmero que muestre esta propiedad indicara el peso que se le va a asignar a cada uno de los anuncios incluidos en el fichero XML. El anuncio se mostrara un mayor de veces si este valor es ms alto comparado con los dems. Una vez definido el archivo con el formato adecuado, debemos guardarlo con cualquier nombre pero con extensin XML, y debe encontrarse fsicamente en el servidor Web en el que vaya utilizarse. Para utilizar el control Web AdRotator solo nos queda establecer el nombre del archivo XML en la propiedad AdvertisementFile. Ejemplo: Crear un formulario Web que contenga 3 filas y 1columna. Agregamos al sitio Web un nuevo elemento de tipo archivo XML, con el nombre de Anuncios.xml el cual se muestra a continuacin (Recuerde tener lagunas imgenes en el formato JPG que sean recomendado de igual tamao, los cuales a su vez para mayor orden pudieran situarse en una carpeta distinta) Anuncios.xml <Advertisements> <Ad> <ImageUrl>Imagenes\COMPUTADORAS.JPG</ImageUrl> <NavigateUrl>http://www.solucionesnet.org</NavigateUrl> <AlternateText>Informacin de Tecnlogas</AlternateText> <Impressions>90</Impressions> </Ad> <Ad> <ImageUrl>Imagenes\VISA.JPG</ImageUrl> <NavigateUrl>http://www.visanet.com.pe/</NavigateUrl> <AlternateText>Consultas sobre su Tarjeta VISA</AlternateText> <Impressions>60</Impressions> </Ad>

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 2 / 16

<Ad> <ImageUrl>Imagenes\COMIDAS.JPG</ImageUrl> <NavigateUrl>http://www.ohperu.com/turismo/restaura.htm</NavigateUrl> <AlternateText>Los Mejores Restaurantes Peruanos</AlternateText> <Impressions>40</Impressions> </Ad> <Ad> <ImageUrl>Imagenes\TORTAS.JPG</ImageUrl> <NavigateUrl>http://www.tortasperu.com.pe/</NavigateUrl> <AlternateText>Las mejores Tortas del Peru</AlternateText> <Impressions>50</Impressions> </Ad> </Advertisements> El diseo de nuestro formulario podra parecerse a: AdRotator1 AdvertisementsFile = ~/Anuncios.xml Button1 ID = BtnPulsar Text = Pulsame

Este ejemplo no tiene ningn cdigo el la pagina asociada de Visual Basic.

6. Calendar
Este control ofrece un completo calendario. Es muy sencillo de utilizar aunque ofrece un alto grado de personalizacin. Este control nos muestra un calendario que permite una navegacin por fechas y tambin selecciones de fecha, el calendario se encuentra basado internamente, de forma completa en cdigo JavaScript. Para utilizar este control bastara solo con arrastrar y soltar nuestro control en nuestro formulario Web. Podemos personalizar el calendario, para lo cual estando seleccionado el control nos mostrara una flecha en el borde superior derecho al hacerle un clic ASP.NET mostrara un smart tag (Etiqueta inteligente) que nos permite realizar, en modo diseo, una serie de operaciones sobre el control Web sobre el que se le aplica la etiqueta inteligente. Para nuestro control el smart tag nos permitir cambiar el formato automtico (AutoFormat):

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 3 / 16

Ejemplo: En un formulario Web agregar una tabla de 4 filas por 1 columna. En la primera fila indicaremos un titulo, en la segunda fila colocaremos un control Web Calendar, en la tercera fila un Control Web Button (con el ID= btnSeleccionar y Text = Seleccionar) y en la ltima fila una etiqueta (con el ID=lblMensaje), tal como se muestra a continuacin:

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 4 / 16

El cdigo asociado a la pgina Web de Visual Basic, corresponder al evento Clic del Botn: btnSeleccionar_Click(ByVal Object, Protected Sub btnSeleccionar_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles btnSeleccionar.Click 'Capturando en una variable el valor del dia seleccionado Dim cad As String = Me.Calendar1.SelectedDate.ToLongDateString Me.Calendar1.SelectedDate.ToLongDateString 'Adicionando a la variable "Cad" el valor de la hora actual. cad &= Space(5) & Now.ToLongTimeString() lblMensaje.Text lblMensaje.Text = cad End Sub Adems del aspecto del control Calendar, tambin nos va a interesar tener acceso a su comportamiento, y variarlo segn nos convenga, para ello este control ofrece un gran numero de propiedades que lo permiten. Una de estas propiedades, llamada SelectionMode, es la que permite indicar el modo de seleccin de fecha deseado. La propiedad SelectionMode puede presentar los siguientes valores: Day: nicamente se permite la seleccin de un solo da del mes. Este valor es el predeterminado. DayWeek: Permite seleccionar de un da o bien de una semana completa. DayWeekMonth: Esta es la seleccin mas completa, se permite elegir un da, una semana o el mes completo. Segn sea el modo de seleccin de fecha el control Calendar presentara aspectos distintos. Para la seleccin de un da aparecern subrayados cada uno de los das del mes, para la seleccin de semanas mostrara en la columna de la izquierda una serie de enlaces que permiten seleccionar la semana, y para seleccionar el mes se ofrece en la esquina superior izquierda un enlace. Ejemplo: Crear una Pagina Web que contenga una tabla de 4 Filas por 1 columna, primera columna un titulo, 2da columna un texto con un DropDownList, 3ra fila un Calendar y en la 4ta fila Label, tal como se muestra a continuacin:

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 5 / 16

Eligiendo al control DropDownList ingresaremos a sus propiedades avanzadas (smart tag) de Editar elementos (Edit tems) y adicionaremos 4 ListItems con los siguientes valores: Elemento ListItem1 ListItem1 ListItem1 ListItem1 Text Ninguno Da Da y Semana Da, Semana y Mes Value none Day DayWeek DayWeekMonth

El siguiente cdigo corresponde con la pgina Web asociada a su cdigo de programacin. Page_Load(ByVal Object, Protected Sub Page_Load(ByVal sender As Object, _ Me.Load ByVal e As System.EventArgs) Handles Me.Load Me.ddlEstiloCalendar.AutoPostBack Me.ddlEstiloCalendar.AutoPostBack = True Calendar1.SelectionMode = Me.ddlEstiloCalendar.SelectedIndex Me.ddlEstiloCalendar.SelectedIndex If Calendar1.SelectionMode = CalendarSelectionMode.None Then Me.Calendar1.SelectedDates.Clear() Me.Calendar1.SelectedDates.Clear() End If Sub End Sub Sobre el control Calendar, doble click para ingresar a su evento predeterminado SelectionChanged y escribimos lo siguiente: Calendar1_SelectionChanged(ByVal Object, Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _ Calendar1.SelectionChanged ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged 'De acuerdo a la cantidad de dias seleccionados Select Case Calendar1.SelectedDates.Count Case 0 lblMensaje.Text = "No se permite seleccionar una Fecha" Case 1 lblMensaje.Text = "La fecha seleccionada es: " & _ Me.Calendar1.SelectedDate.ToShortDateString Me.Calendar1.SelectedDate.ToShortDateString Case 7 lblMensaje.Text = "La seleccion de la semana comienza el: " & _ Me.Calendar1.SelectedDate.ToShortDateString Me.Calendar1.SelectedDate.ToShortDateString Case Else lblMensaje.Text = "La seleccion comienza el dia: " & _ Me.Calendar1.SelectedDate.ToShortDateString Me.Calendar1.SelectedDate.ToShortDateString End Select End Sub Como podemos ver se ha establecido sobre el control DropDownList la propiedad AutoPostBack el valor de True, de esta manera al producirse algn cambio en la seleccin de sus elementos, se producir un envo automtico del formulario al servidor Web, y en el evento Page_Load asignaremos a la propiedad SelectionMode el valor de la lista de acuerdo al ndice. En este ejemplo se puede observar la forma de recuperar el valor de la fecha seleccionada en el calendario en cada uno de los diferentes casos. El evento utilizado es SelectionChanged, este evento se lanzara cada vez que cambie la seleccin de la fecha en el calendario. El mtodo ToShortDateString() convierte el objeto DateTime que se encuentra en la propiedad SelectedDate en una representacin sencilla de una cadena de caracteres de la fecha seleccionada, del tipo da, mes y ao. El ejemplo en ejecucin se muestra a continuacin:

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 6 / 16

7. MultiView
Este control Web es nuevo en ASP.NET 2.0, y nos permite mostrar/ocultar algunas partes de la pagina ASPX que estamos visualizando en el navegador. El control MultiView va a actuar como un contenedlo de controles View, y estos a su vez van a contener grupos de controles Web hijos. El control MultiView nos va a permitir ir ocultando y mostrando los distintos controles View que contiene, seria similar a ir modificando la visibilidad de controles Panel. nicamente un control View puede estar activo en un mismo momento. En la vista de diseo de nuestro formulario Web, podemos construir de manera rpida nuestro control MultiView con los distintos controles View que formaran parte de el. Y dentro de estos ltimos podemos arrastrar los controles hijos que estaran formando parte de cada View. Ejemplo: Crear un formulario Web que contenga un control MultiView, dentro de este control agregaremos 3 controles View, en el primer control View colocaremos los controles del ejemplo del AdRotator, en el View2 colocaremos los controles del primer ejemplo del control Calendar y en el tercer View adicionaremos un control Image. Fuera del control MultiView crearemos una tabla de 1 fila por 3 columnas en donde estableceremos la posibilidad que se pueda elegir desde un control DropDownList la vista a mostrar.

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 7 / 16

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS El control DropDownList esta formado de 4 ListItems conteniendo lo siguiente Elemento ListItem1 ListItem2 ListItem3 ListItem4 Text Seleccione Vista 1 Vista 2 Vista 3 Value -1 0 Selected 1 2

Pgina: 8 / 16

A continuacin se muestra el cdigo de nuestro formulario Web En el evento Page_Load comprobaremos si la pagina esta cargandose por primera vez caso contrario saldremos del bucle, si la pagina esta cargandose por primera vez estableceremos que se cargue por defecto la vista 1, la cual tiene el indice 0. Page_Load(ByVal Object, Protected Sub Page_Load(ByVal sender As Object, _ Me.Load ByVal e As System.EventArgs) Handles Me.Load If Page.IsPostBack = True Then Exit Sub Me.MultiView1.ActiveViewIndex Me.MultiView1.ActiveViewIndex = 0 End Sub Al momento de que se cambia de vista activa imprimiremos por pantalla el nombre de la nueva vista a mostrarse, para lo cual, en la lista de eventos del control MultiView elegiremos el metodo ActiveViewChanged, doble clic y escribiremos el codigo que se muestra a continuacion: MultiView1_ActiveViewChanged(ByVal Object, Protected Sub MultiView1_ActiveViewChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles MultiView1.ActiveViewChanged Response.Write("<b>se ha cambiado a la vista: " & Response.Write("<b>se Me.MultiView1.GetActiveView.ClientID "</b>") Me.MultiView1.GetActiveView.ClientID & "</b>") End Sub Al seleccionar un nuevo elemento del control DropDownList y despues de presionar el boton OK estableceremos cual es la nueva vista activa que mostraremos en el control MultiView btnOk_Click(ByVal Object, Protected Sub btnOk_Click(ByVal sender As Object, _ btnOk.Click ByVal e As System.EventArgs) Handles btnOk.Click Me.MultiView1.ActiveViewIndex Me.DropDownList1.SelectedValue Me.MultiView1.ActiveViewIndex = Me.DropDownList1.SelectedValue End Sub Se ha copiado el cdigo programado en el evento SelectionChanged del control Calendar desde el ejemplo del control Calendar. Calendar1_SelectionChanged(ByVa ByVal Object, Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged 'Capturando en una variable el valor del dia seleccionado Me.Calendar1.SelectedDate.ToLongDateString Dim cad As String = Me.Calendar1.SelectedDate.ToLongDateString 'Adicionando a la variable "Cad" el valor de la hora actual. cad &= Space(5) & Now.ToLongTimeString() lblMensaje.Text = cad End Sub Del ejemplo del control AdRotator, no se tenia que programar nada, pues todo esta en el archivo XML y en las propiedades del control.

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 9 / 16

8. Wizard
Los asistentes proporcionan la infraestructura para mostrar al usuario los sucesivos pasos de un proceso, proporcionando acceso a todos los datos recogidos en los pasos anteriores, con una sencilla navegacin hacia delante y hacia atrs. Al igual que el control Multiview, el control Wizard contiene una coleccin de objetos WizardSteps. Estos WizardSteps derivan de la clase View y la relacion entre WizardSteps y el control Wizard es similar a la que hay entre View y MultiView. Un control Wizard se va a componer de los siguientes elementos: Un conjunto de controles WizardStep, que van a representar cada uno de los pasos de lo que se compone el proceso implementado. Los controles WizardStep pueden ser comparados con los controles View, por que ambos pueden contener a otros controles Web. rea de Navegacin, que nos permitir desplazarnos por los distintos pasos del control Wizard, y que esta compuesta por los controles Button correspondientes. Barra lateral, denominada SideBar, que va a mostrar, a modo de enlaces, todos los pasos de que se compone el control Wizard. De esta manera se tiene la posibilidad de acceder a los distintos pasos sin un orden determinado. Este elemento es opcional, podemos asignar el valor true/false a la propiedad SideBarEnabled del control Wizard. Cabecera, este tambin es un elemento opcional y su funcin es mostrar una cabecera o titulo en cada uno de los pasos. Al igual que con otros controles de ASP.NET, VS 2005 nos ofrece en la vista de diseo la posibilidad de construir de forma sencilla y visual un control Wizard con sus distintos pasos, gracias al Smart Tag que nos ofrece el control Wizard. Entre las tareas que podemos realizar sobre el control Wizard, esta la de aplicar un formato automtico, tal como se muestra en la siguiente figura:

Otra tarea comn es aadir pasos, para ello se debe elegir la opcin Agregar o quitar WizardSteps, que nos llevara a la ventana que se muestra a continuacin:

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 10 / 16

El WizardStep tiene una propiedad StepType, que tiene uno de los valores de la enumeracin WizardStepType. Por defecto StepType es Auto, en el que la interfaz de navegacin esta determinada por el orden de los pasos en la coleccin WizardSteps. Tabla de miembros de la enumeracin WizardStepType Miembro Auto Complete Finish Start Step Descripcin Interfaz de navegacin determinada automticamente por el orden en el que se declara el paso. Es el valor predeterminado. El ltimo paso que se mostrara. No se muestra ningn botn de navegacin. El ultimo paso de recogida de datos. Se muestran los botones Finalizar y Anterior. El primer paso. Solo muestra el botn Siguiente. Cualquier paso que no sea Start, Finish ni Complete. Se muestran los botones Anterior y Siguiente.

El control Wizard tiene seis eventos, que se muestran en la siguiente Tabla. Uno de estos eventos es ActiveStepChanged, que desencadena cuando se cambia el paso actual. Los otros 5 eventos se desencadenan en respuesta al clic del botn.

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS Tabla de Eventos Wizard Evento ActiveStepChanged CancelButtonClick FinishButtonClick NextButtonClick Descripcin Se desencadena cuando se muestra un nuevo paso.

Pgina: 11 / 16

Se desencadena cuando se hace Clic en el botn Cancelar. Se desencadena cuando se hace Clic en el botn Finalizar. Se desencadena cuando se hace Clic en el botn Siguiente.

PreviousButtonClick Se desencadena cuando se hace Clic en el botn Anterior. SideBarButtonClick Se desencadena cuando se hace Clic en un botn del cuadro adjunto.

Los 4 ltimos eventos mostrados en la tabla anterior tienen un argumento de evento del tipo WizardNavigationEventArgs, que muestra tres propiedades: Cancel: El valor booleano es True si hay que cancelar la navegacin al siguiente paso. Por defecto es False. CurrentStepIndex: El ndice entero de base cero del paso que se muestra en ese momento en la coleccin WizardSteps. NextStepIndex: El ndice entero de base cero del paso que se mostrara a continuacin. Por ejemplo, si se ha hecho clic en el botn Anterior, el valor de NextStepIndex ser una unidad inferior al de CurrentStepIndex.

Podemos controlar si enviaremos o no los resultados al paso final que es el Complete, que para este ejemplo resulta ser el Resumen, para lo cual en el paso Finish se ha colocado un RadioButtonList con 2 opciones (ListItems), los cuales determinaran si se enviaran o no los datos. Wizard1_FinishButtonClick(ByVal Object, Protected Sub Wizard1_FinishButtonClick(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) Handles Wizard1.FinishButtonClick e.NextStepIndex If e.NextStepIndex = 3 Then Me.RBLEnviar.Items(0).Selected If Me.RBLEnviar.Items(0).Selected Then Wizard1.ActiveStepIndex = 3 Else e.Cancel = True End If End If 'Colocar codigo 'Colocar codigo para recuperar la informacion ingresada previamente 'en 'en los pasos anteriores y mostrarlos en los controles del paso 'Complete. End Sub

9. FileUpload
Este control de servidor aparece en la versin 2.0 de ASP.NET y nos permite enviar archivos al servidor Web de forma muy sencilla. Para poder utilizar correctamente este control, tenemos que considerar 2 aspectos: 1. Tener los permisos de escritura en la carpeta de destino en el que se quiera copiar el archivo. 2. Tamao del archivo (limite predeterminado 4096 kb, 4mb) ____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 12 / 16

En la carpeta de destino al que se va a copiar el archivo en el servidor Web, se debe establecer permisos de Lectura /Escritura para el usuario ASPNET. Como se puede mostrar en la siguiente figura:

Existe una limitacin por defecto en el tamao del archivo que se puede subir al servidor Web, esta limitacin se utiliza para evitar ataques con la subida de archivos de gran tamao, y el valor por defecto es de 4096 KB, es decir, 4 MB. Si queremos modificar este valor por defecto, amplindolo o reducindolo debemos hacerlo en el archivo de configuracin de la aplicacin Web (web.config). Para ello deberemos crear una seccin <httpRuntime> que sobrescriba el valor de la propiedad maxRequestLength, la cual indica el mximo valor del tamao del archivo en KB. Al ampliar el tamao de esta propiedad deberemos tambin ampliar el valor de la propiedad executionTimeout que tambin pertenece a la misma seccin. Esta ultima propiedad se encuentra muy relacionada con la propiedad maxRequestLength ya que establece el tiempo de espera de la ejecucin de una pgina ASP.NET, el valor por defecto de executionTimeout es de 90 segundos, este ser el tiempo que el servidor esperara como mximo a que se ejecute una pgina ASPX. <system.web> system.web> executionTimeout= 90" maxRequestLength= 10000 000" <httpRuntime executionTimeout="90" maxRequestLength="10000" /> Vamos a ver en accin este control Web a travs del siguiente ejemplo, que consiste en un sencillo formulario que al pulsar sobre un botn guarda (sube) en el servidor Web el archivo indicado en el control FileUpload. Para esto utilizamos el mtodo de ese botn (btn_subir_archivo) al que pasamos por parmetro la ruta completa en la que queremos guardar el archivo. Una vez enviado el archivo al servidor Web, consultamos por el nombre del archivo enviado y el tamao del mismo en bytes (ContentLength). Tambin vamos a

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 13 / 16

cerciorarnos que realmente se est enviando un archivo, para lo cual bastara por preguntar por la propiedad HasFile del control FileUpload. btnSubir_Archivo_Click(ByVal Object, Protected Sub btnSubir_Archivo_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles btnSubir_Archivo.Click btnSubir_Archivo.Click Me.FileUpload1.HasFile If Me.FileUpload1.HasFile Then Me.FileUpload1.SaveAs("E:\PruebaFileUpload\ .FileUpload1.SaveAs("E: Me.FileUpload1.SaveAs("E:\PruebaFileUpload\" & Me.FileUpload1.FileName) Me.FileUpload1.FileName) String.Format( .Format("Se lblMensaje.Text = String.Format("Se ha copiado el archivo {0} con Tamao", {1} MBytes de Tamao", FileUpload1.PostedFile.FileName, _ Me.FileUpload1.PostedFile.ContentLength (Me.FileUpload1.PostedFile.ContentLength / (1024 * 1024)).ToString("0#.0#" "0#.0#")) 1024)).ToString("0#.0#")) End If End Sub El control FileUpload por si solo no lanza el proceso de subida del archivo al servidor, en nuestro caso se ha tenido que invocar este proceso al pulsar un botn del formulario Web.

10. ImageMap
Este control nos permite definir un mapa de imagen sensible, es decir, una imagen que posee varias secciones y segn en la seccin en la que se pulse la pagina realizara una accin u otra. Con este control podemos utilizar una imagen como un men de navegacin, por ejemplo. Se pueden determinar las secciones sensibles del control ImageMap utilizando los controles RectangleHotSpot, para indicar un rea rectangular, CircleHotSpot, para indicar un rea circular y PolygonHotSpot, para indicar un rea en forma de polgono. En estos controles asociados al control ImageMap, especificaremos el tamao y situacin del rea utilizando las coordenadas correspondientes. Visual Studio 2005 no ofrece una utilidad para indicar estas secciones, por lo que, por comodidad y productividad, tendremos que utilizar otra herramienta para indicar estas coordenadas. Para un control ImageMap podemos indicar el comportamiento que tendrn sus secciones cuando pulsamos sobre una de ellas, esto lo conseguiremos mediante la propiedad HotSpotMode. Esta propiedad puede tener 3 valores: PostBack: Al pulsar la seccin se enviara la pgina al servidor. Navigate: Al pulsar el rea se re-direcciona al usuario a la pagina que est asociada a esa seccin de la imagen. InActive: Al pulsar sobre las secciones no pasa absolutamente nada.

En el siguiente ejemplo se utilizara un control ImageMap y se crearan 2 secciones rectangulares a travs de la propiedad RectangleHotSpot, y que al pulsar sobre cualquiera de sus secciones va a realizar envos (PostBack) de la pgina al servidor. En el manejador del evento se acceder a la propiedad PostBackValue del objeto de la clase ImageMapEventArgs, para averiguar qu zona (seccin) ha sido pulsada. El valor de cada zona de la imagen se establecer en la propiedad PostBackValue de cada uno de los objetos RectangleHotSpot que definen las secciones de la imagen.

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 14 / 16

Para realizar este demo, agregaremos un control ImageMap, estableceremos una ruta de una imagen sobre la propiedad ImageUrl, luego debemos establecer el tamao de la imagen (Width), para este demo se estableci en 400. Luego sobre HostSpotMode se ha elegido la opcin PostBack y en la coleccin HotSpots se han agregado 2 elementos rectangulares sobre las cuales se han establecido las siguientes propiedades:

Algo similar estableceremos para la otra segunda seccin (Rectangular) de esta imagen. (Top = 0, Bottom = 400, Left = 200, Right = 400) El cdigo para saber en que seccin hemos realizado un clic lo detectamos en el evento ImageMap1_Click, gracias a su argumento ImageMapEventArgs que nos brinda la posibilidad de recuperar lo asignado en la propiedad PostBackValue. ImageMap1_Click(ByVal Object, Protected Sub ImageMap1_Click(ByVal sender As Object, _ System.Web.UI.WebControls.ImageMapEventArgs) ByVal e As System.Web.UI.WebControls.ImageMapEventArgs) _ Handles ImageMap1.Click lblMensaje.Text = "Has hecho click sobre: " & e.PostBackValue End Sub

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 15 / 16

11. Table, TableRow y TableCell

Estos controles Web se encuentran muy relacionados entre si, mediante la utilizacin de todos ellos podremos generar tablas en HTML. El control Web Table se corresponde con una tabla del lenguaje HTML, es decir, permite generar tablas del lenguaje HTML. Esta clase posee una coleccin llamada Rows, que contiene objetos de la clase TableRow. En el siguiente ejemplo nuestro formulario Web permitir indicar el nmero de filas y de columnas que queramos mostrar en la tabla. btnGenerar_Click(ByVal Object, Protected Sub btnGenerar_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles btnGenerar.Click ncols Dim nfilas, ncols As Byte nfilas = Convert.ToByte(txtnFilas.Text) CByte(txtnCols.Text) ncols = CByte(txtnCols.Text) For F As Byte = 1 To nfilas Dim fila As New TableRow For C As Byte = 1 To ncols Dim col As New TableCell col.Text = "[" & F & "," & C & "]" fila.Cells.Add(col) Next Table1.Rows.Add(fila) Next End Sub Como podemos ver en el ejemplo se utilizan objetos de la clase TableRow y TableCell para crear las filas y columnas de la tabla. Para aadir una columna se debe aadir un objeto TableCell a la coleccin Cells del objeto TableRow correspondiente, y para aadir una fila se aade un objeto TableRow a la coleccin Rows del objeto de la clase Table.

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.

CONTROLES WEB AVANZADOS

Pgina: 16 / 16

En este ejemplo se ha utilizado la propiedad GridLines del control Table para mostrar las lneas de la tabla, tanto las horizontales como las verticales, para ello se le ha asignado el valor Both.

____________________________________________________________________________ Lenguaje de Programacin IV Profesores: Carlos Garca V. y Julio C. Lin R.