Departamento

de Lenguajes y Sistemas InformAcos

Tema 10. Capa de Interfaz II

Herramientas Avanzadas para el Desarrollo de Aplicaciones

Escuela Politcnica Superior

Universidad de Alicante

Indice
1.
2.
3.
4.
5.
6.

Controles de lista sencillos

Controles de Navegacin
Controles de Validacin
Objetos Session y ApplicaAon
Eventos de Aplicacin: Global.asax
Distribucin de capas en el proyecto

Controles de
lista sencillos

Controles de Lista
Sencillos
Lista desplegable
Lista desplegada
Lista de botones de
verificacin
Lista de botones de
radio

Controles de Lista Sencillos (listBox, dropDownList,

radioButtonList, checkBoxList)

Lista desplegable (dropDownList)

ElementoLista1 (ListItem) FILA 0
ElementoLista2 Seleccionado (ListItem) FILA
1
ElementoLista3 (ListItem) FILA 2

Aadir elementos de forma declarativa

<asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIn
dexChanged" Width="90px" AutoPostBack=False">
<asp:ListItem Value="rojo1">rojo</
asp:ListItem>
<asp:ListItem>azul</asp:ListItem>
<asp:ListItem>verde</asp:ListItem>
</asp:DropDownList>

RepeatDirection

RadioButtonList: lista de botones de radio

<asp:RadioButtonList ID="RadioButtonList1" runat="server

onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
<asp:ListItem>rojo</asp:ListItem>
<asp:ListItem>azul</asp:ListItem>
<asp:ListItem>verde</asp:ListItem>
</asp:RadioButtonList>

CheckBoxList: lista de opciones mltiple

<asp:CheckBoxList ID="CheckBoxList1" runat="server"
onselectedindexchanged="CheckBoxList1_SelectedIndexChanged"
RepeatDirection="Horizontal">
<asp:ListItem>rojo</asp:ListItem>
<asp:ListItem>azul</asp:ListItem>
<asp:ListItem>verde</asp:ListItem>
</asp:CheckBoxList>

Propiedad Items: coleccin de ListItems

Objeto ListItem: propiedades

Text:

contenido visualizado

Value:

valor oculto del cdigo HTML

Selected:

true o false (seleccionado o no)

Propiedades de los Controles de Lista

Sencillos
Propiedad SelectedIndex

Indica la fila seleccionada como un ndice que empieza en

cero

Propiedad SelectedItem

Permite que el cdigo recupere un objeto ListItem que

representa el elemento seleccionado

Label1.Text = DropDownList1.SelectedIndex.ToString();
Label1.Text = DropDownList1.SelectedItem.Text.ToString();
Label1.Text = DropDownList1.SelectedItem.Value.ToString();
Label1.Text=DropDownList1.SelectedValue;

Controles de lista con seleccin mltiple

ListBox:

Pueden seleccionarse varios elementos: propiedad

SelectionMode=Multiple

CheckBoxList

Siempre pueden seleccionarse varios elementos

Para encontrar todos los elementos seleccionados

necesitamos
recorrer la coleccin Items del control lista
comprobar la propiedad ListItem.Selected de cada elemento
Foreach ListItem i in DropDownList1.Items
{ if (i.Selectedt==true)
.
}

Aadir elementos dinmicamente a una lista

(cdigo)

Mtodo Add del objeto Items

EJEMPLO:
DropDownList1.Items.Add(rojo);
DropDownList1.Items.Add(new ListItem(rojo,Red));
text

value

Controles de
navegacin:
Menu

Control menu
Se puede uAlizar para crear un men que colocaremos en la
pgina maestra y otras ayudas de navegacin.
Permite aadir un men principal con submens y tambin
nos permite denir mens dinmicos.
Los elementos del Menu pueden aadirse directamente en el
control o enlazarlos con una fuente de datos.
En las propiedades podemos especicar la apariencia,
orientacin y contenido del men.

Static Display y Dynamic Display

El control Aene dos modos de Display:
Est+co (sta+c): El control Menu est expandido completamente
todo el Aempo. Toda la estructura es visible y el usuario puede
hacer click en cualquier parte.
Dinmico (dynamic): En este caso solo son estAcas las porciones
especicadas, mientras que los elementos hijos se muestran
cuando el usuario manAene el puntero del ratn sobre el nodo
padre.

Propiedades
StaAcDisplayLevels.
Esta propiedad permite especicar el nmero de niveles estAcos
que queremos mostrar como raz del men (el mnimo es 1).

MaximumDynamicDisplayLevels
Esta propiedad especica cuantos niveles de nodos que aparecen
de forma dinmica se mostraran despus del nivel estAco.

Dynamic: cantidad de tiempo

Tambin podemos especicar la canAdad de Aempo que
queremos que tarde la parte dinmica de un men en
desaparecer.
Lo podemos especicar en milisegundos mediante la
propiedad DisappearA7er del menu:
Menu.DisappearAfer=1000;

El valor por defecto son 500 ms.

DePinicin del contenido de menu

Aadir objetos individuales MenuItem (de forma declaraAva o
programAca) . Tambin se le puede enlazar un archivo XML.
Propiedades del control propiedad Items (coleccin de objetos
MenuItem)
<asp:Menu ID="Menu1" runat="server" Sta+cDisplayLevels="3">
<Items>
<asp:MenuItem Text="File" Value="File">
<asp:MenuItem Text="New" Value="New"></asp:MenuItem>
<asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Edit" Value="Edit">
<asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
<asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="View" Value="View">
<asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
<asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>

Code-Behind C#

protected void Menu1_MenuItemClick(object sender,
System.Web.UI.WebControls.MenuEventArgs e)
{
switch(e.Item.Value)
{
case "Products":
...
return;
case "Services":
...
return;
}}

hpp://msdn.microsof.com/en-us/library/16yk5dby(v=vs.80).aspx
hpp://www.obout.com/em/doc_server.aspx

Controles de
Validacin

Validacin de datos
Debemos asegurar que los usuarios introducen
datos correctamente
Direccin de email
Nmero de telfono

ASP.Net proporciona un conjunto de controles de

validacin predefinidos
Dos tipos de validacin
Validacin del lado del cliente
Validacin del lado del servidor

Validacin de datos
Lado del cliente:

Utilizacin de cdigo JavaScript que valida los datos

introducidos por el usuario, directamente en el
navegador

Lado del servidor:

Utilizacin de cdigo (C#) para validar los datos de

formularios una vez han sido enviados al servidor

Controles de validacin
ASP.Net detecta si el
navegador soporta
validacin del lado del
cliente:

Generan el cdigo JavaScript

necesario para validar los
datos
En otro caso, los datos del
formulario se validan en el
servidor

Controles de validacin
Sobre diferentes controles web:

TextBox
ListBox
DropDownList
RadioButtonList
FileUpload

Controles de Validacin
Propiedades
Para mostrar el mensaje de error ErrorMessage
Para indicar el control a validar ControlToValidate
Entrada requerida: RequiredFieldValidator: La
validacin es OK cuando el control de entrada no
contiene una cadena vaca.
InitialValue
Coincidencia de modelos:
RegularExpressionValidator: La validacin es OK si
el valor de un control de entrada se corresponde
con una expresin regular especificada.
ValidationExpression

Controles de validacin

<form id="form1" runat="server">

<div>
Usuario: <asp:TextBox ID="TextBox1 runat="server">
</asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameReq" runat="server"
ControlToValidate="TextBox1"
ErrorMessage="Introduce el usuario!!"> </asp:RequiredFieldValidator>
Password: <asp:TextBox ID="TextBox2" runat="server">
</asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordReq" runat="server"
ControlToValidate="TextBox2"
ErrorMessage="Introduce el password!!"></asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="Enviar" />
</div>
</form>

Controles de Validacin
Comparacin con un valor: CompareValidator: La
validacin es OK si el control contiene un valor que se
corresponde con el valor de otro control especificado.

ControlToCompare
ControlToValidate
ValueToCompare
Type
Operator

Comprobacin de intervalo: RangeValidator: La validacin

es OK cuando el control de entrada contiene un valor
dentro de un intervalo numrico, alfabtico o temporal
especificado.

MaximumValue
MinimumValue
Type

Controles de Validacin

CustomValidator: La validacin la realiza una

funcin definida por el usuario.

ClientValidationFunction
OnServerValidate

Supongamos que queremos validar que el nombre

de usuario sea nico en la aplicacin

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:CustomValidator ID="CustomValidator1
ControlToValidate="TextBox1
OnServerValidate="ComprobarUsuario" runat="server"
ErrorMessage="El usuario ya existe!!">
</asp:CustomValidator>

Controles de validacin
protected void Button1_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{ Button1.Text = "Correcto"; }
else
{ Button1.Text = "Incorrecto"; }
}
protected void ComprobarUsuario(object sender,
ServerValidateEventArgs e)
{
string username = e.Value.ToLower();
if (username == "sonia" || username == "irene")
{ e.IsValid = false; }
}

Controles de Validacin

ValidationSummary: Este control muestra un

resumen con todos los mensajes de error de cada
control de validacin.
ShowMessageBox:
muestra un cuadro
de dilogo resumen
ShowSummary

Propiedad Display
Sirve para comprobar si el control de validacin muestra
mensajes de error. La propiedad Display puede establecerse en :
None El control de validacin no aparece en la pgina.
Sta+c Cada control de validacin ocupa espacio aunque no sea
visible el texto de un mensaje de error, lo que permite denir una
presentacin ja para la pgina.
Dynamic Los controles de validacin no ocupan espacio a
menos que muestren un mensaje de error, lo que les permite
comparAr la misma ubicacin. No obstante, cuando se muestra el
mensaje de error, la presentacin de la pgina cambia, lo que a
veces produce que los controles cambien las posiciones.
La presentacin dinmica requiere un explorador que admita
Html dinmico (DHTML).

El proceso de validacin (servidor)

1. El usuario recibe una pgina y comienza a rellenar los
valores de entrada. Al final el usuario pulsa un botn
para enviar la pgina.
2. Cada control Button tiene una propiedad Causes
Validation.
Si esta propiedad es False, ASP.NET ignora los controles de
validacin.
Si est a True (Valor Predeterminado), ASP.NET valida
automAcamente la pgina cuando el usuario pulsa el botn. Se
realiza la validacin de cada control de la pgina.
Cada control de validacin expone su propiedad IsValid, La
pgina tambin expone una propiedad IsValid que resume el
estado IsValid de todos los controles de validacin de la pgina.

<asp:RangeValidator
ID="RangeValidator1"
runat="server"
ControlToValidate="TextBox1"
ErrorMessage="Este nmero no
est en el intervalo"
MaximumValue="100"
MinimumValue="10"
Type="Integer">
</asp:RangeValidator>

Vista ejecucin (range validator)

Expresiones regulares
Direccin de correo electrnico

Comprobar que existe una @, un punto y slo

permite caracteres que no sean espacios.

Contrasea

Entre 4 y 10 caracteres y el primer carcter debe

ser una letra.

Nmero de cuenta

Secuencia de 4, 4, 2, y 10 dgitos, cada grupo

separado por un guin.

Campo de longitud limitada

Entre 4 y 10 caracteres incluyendo caracteres

especiales (*, &)

Sintaxis Expresiones Regulares

*

cero o ms ocurrencias del carcter o subexpresin

anterior.
+ una o ms ocurrencias del carcter o subexpresin
anterior
() agrupa una subexpresin que se trata como un nico
elemento
|
Cualquiera de las dos partes (OR)
[ ] se corresponde con un carcter en un intervalo de
caracteres vlidos [a-c]
{n} exactamente n de los caracteres o subexpresiones
anteriores
.
cualquier carcter excepto el salto de lnea
?
el carcter anterior o la subexpresin anterior es
opcional
^ comienzo de una cadena
$ fin de una cadena


\s carcter de espacio en blanco (ej. tab o
espacio)
\S cualquier carcter no espacio
\d cualquier carcter numrico
\D cualquier carcter no dgito
\w cualquier carcter alfanumrico (letra,
nmero o carcter de subrayado)

Solucin
Correo electrnico
\S+@\S+\.\S+

Contrasea

[a-zA-Z]\w{3,9}

Nmero de cuenta

\d{4}-\d{4}-\d{2}-\d{10}

Campo de longitud limitada

\S{4,10}

Grupos de validacin
Los controles de validacin se pueden asociar en grupos
de validacin a n de que los controles que pertenezcan
a un grupo comn se validen juntos.
Puede uAlizar estos grupos para habilitar o deshabilitar
de forma selecAva la validacin para controles
relacionados en una pgina.
Hay que definir el nombre del grupo en los
controles de validacin y en el botn o otros
controles de envo que causan validacin.

SetFocusOnError
Se establece en controles de validacin que causan
que el primer control no vlido reciba el foco.
Propiedad de los controles de validacin.
Ms informacin sobre estos controles
http://msdn.microsoft.com/es-es/library/debza5t0
(v=vs.90).aspx
http://www.elguille.info/colabora/NET2005/
FernandoLuque_ASPValidar.htm

Mantenimiento de
estado:
Objetos Session y
Application

Objetos Session y Application

Los objetos Session estn asociados a un usuario
particular y sirven como manera de transportar y
mantener los datos del usuario en pginas web, como
foros o sitios de comercio electrnico.
Los objetos Application son compartidos por todos los
usuarios y permiten almacenar informacin compartida
por toda la aplicacin web.
En ASP.NET los objetos Session y Application estn
implementados como colecciones o conjuntos de pares
nombre-valor.

Qu es una sesin?
Una sesin es el perodo de tiempo en el que un
usuario particular interacta con una aplicacin
web.
Durante una sesin la identidad nica de un usuario
se mantiene internamente.
Los datos se almacenan temporalmente en el
servidor.
Una sesin finaliza si hay un timeout o si t
finalizas la sesin del visitante en el cdigo.

Cul es el uso de una sesin?

Las sesiones ayudan a preservar los datos entre
accesos sucesivos. Esto puede hacerse gracias a los
objetos de sesin.
Los objetos de Sesin nos permiten preservar las
preferencias del usuario y otra informacin del
usuario al navegar por la aplicacin web.
Ejemplo
Website de comercio electrnico donde el visitante
navega a travs de muchas pginas y quiere seguir
qu productos ha adquirido.

Objeto Session
Session: sirve para almacenar datos pertenecientes
a un nico usuario (en el mbito de una sesin).
//Borra todos los valores de estado de la sesin
Session.Clear();
Session.Add("nombre","Homer");
Response.Write(Session["nombre"]);

En ASP.NET
Las sesiones son tablas Hash en memoria con un
timeout especificado.
Session[username] = Jose Martnez;
Session[color] = Blue;
Asignamos los valores a las variables de sesin
username y color, respectivamente. Si necesito
saber el username o color en pginas
siguientes puedo usar Session[username],
Session[color].
Las sesiones en ASP.NET estn identificadas
usando enteros 32-bit long conocidos como
Session IDs. El motor ASP genera estos session
IDs de tal forma que se garantice que son nicos

Objeto Session
Session Type

Qu hace

Ejemplo

Session.Abandon

Abandona
(cancela) la sesin
actual

Session.Remove

Borra un elemento
de la coleccin de
estado de la
sesin.

Session[username] =
Jose Martnez;
(Inicializa una variable de
sesin)
Session.Remove[usernam
];
(Borra la variable de sesin
username

Session.RemoveAll

Borra todos los

elementos de
estado de la
sesin.

Session Type

Qu hace

Ejemplo

Session.Timeout

Establece el the timeout

(en minutos) para una
sesin

Session.Timeout=30 (Si
un usuario NO pide una
pgina en la aplicacin
ASP.NET en 30 minutos
la sesin expira.)

Session.SessionID

Recupera el ID de la
sesin (propiedad de
slo lectura de una
sesin) para la sesin.

Session.IsNewSession

Es para comprobar que

la sesin del usuario se
cre con la peticin
actual p.ej. el usuario
acaba de entrar al sitio
web. La propiedad
IsNewSession es cierta
en la primera pgina de
la aplicacin.

Ejercicio
Ejercicio

Crear una aplicacin web en la cual pidamos

introducir un nombre de usuario y un botn
enviar.
Al pinchar en el botn que nos redireccione a
un segundo formulario en el cual pondremos
hola seguido del login introducido,:
Metiendo el login en una variable de sesin

Archivo Default.aspx.cs
protected void Button1_Click (object sender,
EventArgs e)
{
Session["login] = TextBox1.Text;
Response.Redirect("session2.aspx");
}
Archivo session2.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
Label3.Text = Session["Login"].ToString();
}

Importante
Al crear la parte privada de la Web
utilizaremos variables de sesin para
controlar si el usuario ha entrado
logueandose o ha entrado poniendo
directamente la URL, en cuyo caso la variable
de sesin estar vaca y no deberamos
permitir el acceso

Variables de aplicacin
Y si queremos inicializar variables que estn
disponibles en una sesin y sean las mismas para
todos los usuarios??
Esto supone que un cambio en el valor de una
variable de aplicacin se refleja en las sesiones
actuales de todos los usuarios.

Objeto Application
Por ejemplo:

Se puede dar un valor a una variable de aplicacin

llamada SiteName
Application["SiteName"] = "Mi aplicacin";
Cualquier pgina de la aplicacin puede leer esa
cadena:
string appName = (string)Application["SiteName"];

Para eliminar cualquier variable del objeto

Application:
Application.Remove("SiteName");

Para eliminar todas las variables:

Application.RemoveAll();

Variables de aplicacin
Ejercicio

Crear una aplicacin web que cuente el nmero de

visitas que recibe
}
}

Utilizar variables de aplicacin

Cuando llegue a 10 visitas el contador
se debe reiniciar

Variables de aplicacin
Primer paso:

En la pgina Default.aspx incluimos una etiqueta

<asp:Label ID="LabelCont" runat="server"></asp:Label>

Segundo paso:

En el archivo Default.aspx.cs (code behind) utilizar una

variable Application para controlar el nmero de visitas
protected void Page_Load(object sender, EventArgs e) {

if (Application["PageCounter"] != null && (int)Application["PageCounter"] >= 10)

{ Application.Remove("PageCounter"); }
if (Application["PageCounter"] == null)
{ Application["PageCounter"] = 1; }
else
{ Application["PageCounter"] =
(int)Application["PageCounter"] + 1; }
LabelCont.Text = Application["PageCounter"].ToString();
}

Variables de aplicacin
Problema:

Dos personas cargan simultneamente la pgina:

El contador podra incrementarse slo 1 unidad

Application["PageCounter"] = (int)Application["PageCounter"] + 1
La expresin de la derecha se evala primero
El usuario1 lee el valor de PageCounter almacenado en la
aplicacin
El usuario2 lee el valor de PageCounter almacenado en la
aplicacin
Ambos le suman 1 unidad pero el incremento final en lugar de
ser 2 unidades es slo 1

Actualizar una variable de aplicacin

Solucin:
En un instante concreto, varias sesiones pueden
estar intentando cambiar el valor, aunque slo
una sesin estar autorizada a cambiarlo.
ASP.NET tiene exclusin mutua para este tipo de
problemas:
Application.Lock() Bloquea las variables de aplicacin
Application.Unlock() Desbloquea las variables de aplicacin

Una vez que las variables estn bloqueadas las

sesiones que intentan cambiarlas tienen que
esperar.

Variables de aplicacin

Objeto Application
Application: proporciona una manera
sencilla de almacenar en el servidor
datos comunes a todos los visitantes de
nuestro sitio web.
Application.Lock();
Application.Add("edad",22);
int valor=(int)Application["edad"];
valor++;
Application["edad"]=valor;
Application.UnLock();
Response.Write(Application["edad"]);

Problema
Dnde inicializo una variable de aplicacin para que no se
reinicie cada vez (ej. Contador de visitas)????

Global.asax

El archivo global.asax
Permite escribir cdigo de aplicacin global.
No contiene etiquetas HTML ni ASP.NET
Se utiliza para definir variables globales y reaccionar a
eventos globales.
Contiene cdigo de tratamiento de eventos que reacciona
a los eventos de aplicacin o sesin.

El archivo global.asax
Se aade a la aplicacin web como un nuevo
elemento Clase de aplicacin global
Global.asax y Global.asax.cs

protected void Application_Start(object sender, EventArgs e)

{ Application["SiteName"] = "Mi aplicacin"; }
protected void Session_Start(object sender, EventArgs e)
{
Session.Timeout = 15;
Response.Write("Servida el " + DateTime.Now.ToString());
}

Importante:

Cualquier cambio en el archivo global.asax reiniciar la

aplicacin

Ejemplo, uso de objetos de sesin

Se quiere modificar el timeout por defecto (20min)
Se puede hacer en cualquier lugar del cdigo pero
lo ms recomendable es hacerlo en el archivo
Global.asax
Archivo Global.asax
protected void Session_Start(object sender, EventArgs e)
{
Session.Timeout = 15;
}

El archivo global.asax
Slo puede haber un archivo global.asax
Debe residir en el directorio raz de la aplicacin

Default.aspx.cs

Global.asax.cs
protected void Application_Error(object sender, EventArgs e)
{ Response.Write("<b>");

int j = 1;
int x = 0;
int k=j / x;

Response.Write("OOps! Ha ocurrido un error! </b>");

Response.Write(Server.GetLastError().Message.ToString());
Response.Write(Server.GetLastError().ToString());
Server.ClearError(); }

OOps! Ha ocurrido un error! System.Web.HttpUnhandledException: Se produjo una

excepcin de tipo 'System.Web.HttpUnhandledException'. --->
System.DivideByZeroException:

CONTADOR DE VISITAS
Aadir nuevo elemento

Clase de aplicacin Global Global.asax

void Application_Start(object sender, EventArgs e)
{
// Cdigo que se ejecuta al iniciarse la aplicacin

Application.Add("contador", 0);

Distribucin
capas en el
proyecto

En la prctica en grupo
Una solucin con 2 proyectos:
Proyecto Web (con referencia al proyecto de librera)
Contendr la interfaz y validaciones

Proyecto de Librera de clases con las Capas EN y CAD

Carpeta EN
Clases EN para enAdades del sistema

Carpeta CAD
Por cada EN una clase CAD para el acceso a datos