Desarrollo de Aplicaciones AJAX Introductoria

UNIVERSIDAD TECNICA DE AMBATO
FACULTAD DE INGENIERIA EN SISTEMAS
DESARROLLO DE SOFTWARE IV
OCTUBRE 2016 MARZO 2017
Universidad Tcnica de Ambato

Facultad de Ingeniera en Sistemas
Ing. C.F.A.F
Octavo Sistemas
AJAX
Practica #: 01 - 01
En este laboratorio se crear una aplicacin basada en AJAX que implemente

DESCRIPCIN: un Chat bsico para aplicar los conceptos fundamentales de AJAX, para esto se
utilizar el control Timer.
Ejercicio #: 1
Creacin de chat con AJAX usando el control Timer.
1. Cree un nuevo proyecto Web con el nombre Webapp_chat.
2. Agregue un nuevo elemento al proyecto, de la lista seleccione Clase de aplicacin global, esto crea el
archivo Global.asax.
Desarrollo de Software IV
Pgina: 2

Ing. C.F.A.F
Octavo Sistemas
3. Abra el archivo Global.asax y agregue la directiva Imports a la pgina para hacer referencia a la DLL
System.Collections.Generic.
<%@ Import Namespace ="System.Collections.Generic" %>
4. Actualice el manejador Application_Start del archivo Global.asax para crear una lista de mensajes
ordenados y agregar la lista al objeto cache de la aplicacin. El archivo debera tener el siguiente cdigo.
<%@ Application Language="C#" %>

<%@ Import Namespace ="System.Collections.Generic" %>
<script runat="server">
void Application_Start(object sender, EventArgs e)
{
// Cdigo que se ejecuta al iniciarse la aplicacin
// Utilizacin de la clase genrica: List.
List<string> listaMensajes = new List<string>();
//Guardar la lista de mensajes en el objeto Cache de la aplicacin.
HttpContext.Current.Cache["Mensajes"] = listaMensajes;
}
</script>
NOTA:
Investigue el prposito e importancia del objeto CACHE.
5. Agregue una nueva pgina a la aplicacin de nombre GrupoChat.aspx. Esta pgina mostrar un
TextBox con los mensajes que se vayan acumulando en el chat, y tambin permitir al usuario nuevos
mensajes.
6. Abra la pgina GrupoChat.aspx en la vista de cdigo y agregue un control ScriptManger luego de la
etiqueta Form, luego de este control digite el texto: Grupo de Chatcomo se muestra a continuacin.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>
Pgina: 3

Ing. C.F.A.F
Octavo Sistemas
<h1>Grupo de chat....</h1>
<div>
</div>
</form>
</body>
</html>
7. Ahora abra la pgna GrupoChat.aspx en modo de diseo, agregue los siguientes controles, visualice las
propiedades, cambie las siguientes propiedades y sus valores segn se indica a continuacin
CONTROL
PROPIEDAD
HTML
TextBox
Button
VALOR
Ingrese su nombre de
usuario:
ID
ID
Text
txtUsuario
btnEnviar
Enviar
DESCRIPCION
Escriba este texto en HTML estndar en la vista
de diseo o en la vista de cdigo, luego de la
etiqueta h1 anterior. DENTRO DE LA ETIQUETA
Div
Ubiquelo a la derecha del texto HTML anterior
Pngalo a la derecha del TextBox anterior.
8. El formulario Web debera presentar la siguiente apariencia.
9. Luego del Botn enviar agregue un control UpdatePanel para que los controles que se ubiquen dentro
de este de recarguen parcialmente.
10. Como lgicamente solo es necesario actualizar (refrescar) el mensaje que otro usuario digito. Dentro del
control UpdatePanel (en la vista de Diseo o Cdigo) agregue el un Control TexBox y modifique las
siguientes propiedades.
CONTROL
PROPIEDAD
TextBox
ID
VALOR
txtConversacion
DESCRIPCION
Aqu se mostrar los mensajes ingresados por los
Pgina: 4

Ing. C.F.A.F
Octavo Sistemas
usuarios del chat.

TextMode
ReadOnly
Height
Width
BackColor
MultiLine
True
150px
800px
#999966
Seleccione el color que desee poner en el

TextBox
11. Fuera del UpdatePanel agregue los siguientes controles.

CONTROL
PROPIEDAD
HTML
TextBox
Button
VALOR
Ingrese el mensaje:
ID
ID
Text
Width
txtMensaje
btnAgregarMensaje
Agregar mensaje
800px
DESCRIPCION
Escriba este texto en HTML estndar en la vista
de diseo o en la vista de cdigo, luego de la
etiqueta h1 anterior. FUERA DEL
UPDATEPANEL.
Ubiquelo a la derecha del texto HTML anterior
Pngalo bajo del TextBox anterior.
12. Finalmente el formulario Web debera presentar un aspecto similar a la siguiente imagen.
13. Abra el archivo adjunto GrupoChat.aspx.cs para editarlo. Agregue una regin (Con el nombre: Mtodos)
para organizar mejor el cdigo, dentro de esta regin aada un mtodo que permita recuperar el nombre
de usuario apartir del estado de la sesin (Almacenado en un objeto Session).
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
Pgina: 5

Ing. C.F.A.F
Octavo Sistemas
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class GrupoChat : System.Web.UI.Page
{
#region Mtodos
public string GetIdUsuario()
{
//Obtener el id del usuario almacenado en el objeto: Session
string idUsuario = (string)Session["IdUsuario"];
return idUsuario;
}
#endregion
protected void Page_Load(object sender, EventArgs e)
{
}
}
14. Agregue otro mtodo dentro de la regin creada (con el nombre AdministrarGUI) para actuailizar la
interfaz de usuario (pgina) de esta forma los usuarios pueden ingresar mensajes pero solo una vez que
se hayan identificado. Si el usuario an no se ha identificado (esto es, la variable de sesin no existe, no
se ha creado), deshabilitar los elementos de la interfaz y activar los controles para que el usuario pueda
identificarse. Si el usuario ha sido identificado, habilitar los controles para realizar la conversacin en el
chat y deshabilitar los controles donde el usuario se ha identificado.
private void AdministrarGUI()

{
//Si esta vacio, el usuario aun no se ha identificado.
if (GetIdUsuario() == null)
{
//Si esta es la primera entrada al chat, entonces obtener el "USERID".
//por lo tanto deshabilitar los controles correspondientes.
txtMensaje.Enabled = false;
txtConversacion.Enabled = false;
btnEnviarMensaje.Enabled = false;
//Habilitar los controles para enviar el mensaje
btnEnviarID.Enabled = true;
txtIdUsuario.Enabled = true;
}
else
{
//Si esta NO ES la primera entrada al chat, entonces obtener el "USERID"
//por lo tanto habilitar los controles correspondientes.
txtMensaje.Enabled = true;
txtConversacion.Enabled = true;
btnEnviarMensaje.Enabled = true;
//Deshabilitar los controles para enviar el mensaje.
btnEnviarID.Enabled = false;
txtIdUsuario.Enabled = false;
}
Pgina: 6

Ing. C.F.A.F
Octavo Sistemas
15. Agregue el manejador para el evento click del botn Enviar. El mtodo debera almacenar en la sesin
el nombre de usuario con el cual se identific, y luego llamar al mtodo AdministrarGUI para habilitar o
deshabilitar los controles correctos.
protected void btnEnviar_Click(object sender, EventArgs e)

{
//Almacenar el nombre de usuario en un objeto Session.
Session["IdUsuario"] = txtUsuario.Text;
//Habilitar o deshabilitar los controles segn corresponda.
AdministrarGUI();
}
16. Aada otro mtodo a la regin Mtodos para refrescar la seccin de la conversacin de la pgina. El
cdigo debera buscar la lista de mensajes en la objeto cache de la aplicacin y crear una cadena que
muestre los mensajes en forma inversa (las mas recientes al tope). Luego, el mtodo debera setear la
propiedad Text del control TextBox txtConversacin con la nueva cadena (es decir la propiedad Text del
TextBox debera mostrar la conversacin):
public void RefrescarConversacion()

{
//Recuperar la lista de mensajes de la cache de la aplicacin.
List<string> listaMensajes = (List<string>)Cache["Mensajes"];
if (listaMensajes != null)
{
string conversacion = "";
int cantidad = listaMensajes.Count;
//Invertir la lista de mensajes.
for (int i = cantidad - 1; i >= 0; i--)
{
string mensaje = null;
mensaje = listaMensajes[i];
conversacion += mensaje;
conversacion += "\r\n";//Tabulador y salto de linea.
}
txtConversacion.Text = conversacion;
}
}
17. Agregue el manejador para el evento click del botn Agregar mensaje. El mtodo debera atrapar el
texto ingresado en el control TextBox txtMensaje, anteponer el nombre de usuario, y adicionarlo a la lista
de mensajes guardada en la cache de la aplicacin. Luego, el mtodo debera llamar al mtodo
RefrescarConversacion para asegurar que el nuevo mensaje aparece en el TextBox de la conversacin.
protected void btnAgregarMensaje_Click(object sender, EventArgs e)

{
Pgina: 7

Ing. C.F.A.F
Octavo Sistemas
//Adicionar el mensaje a la conversacion.

if (txtMensaje.Text.Length > 0)
{
//Obtener la lista de mensajes de la cache de la aplicacion.
List<string> listaMensajes = (List<string>)Cache["Mensajes"];
if (listaMensajes != null)
{
txtConversacion.Text = "";
//Obtener el nombre de usuario.
string userID = GetIdUsuario();
if (userID != null)
{
//Agregar el mensaje a la lista generica.
listaMensajes.Add(userID + ": " + txtMensaje.Text);
RefrescarConversacion();
txtMensaje.Text = "";
}
}
}
}
18. Actualize el controlador Page_Load para llamar a los mtodos AdministrarGUI y RefrescarConversacion.
protected void Page_Load(object sender, EventArgs e)

{
AdministrarGUI();
RefrescarConversacion();
}
19. Ejecute la aplicacin y pruebe como funciona. Despus de ingresar su nombre de usuario, puede ingresar
un mensaje en el chat, ver que este aparece en el TextBox txtConversacin. Pruebe ejecutando la
aplicacin en 2 navegadores (por ejemplo, Firefox y IE). Puede ver problema? El usuario que escribe el
mensaje llega a ver el mensaje en la conversacin de inmediato. Sin embargo, otros usuarios que
participan en el chat no ven ningn mensaje nuevo hasta despus de presionar el botn Enviar los
mensajes desde su cuenta. Puede resolver este problema lanzando un Timer (temporizador) AJAX a la
pgina.
20. A continuacin, arrastre un Timer de los controles AJAX a la pgina, cambie su ID por tmrTiempo.
Aunque el Timer de AJAX comienza a generar automticamente las devoluciones de datos (postbacks), el
intervalo predeterminado es 60.000 milisegundos, o una vez por minuto. Establezca la propiedad Interval
del Timer en algo ms razonable, como 5.000 milisegundos (o 5 segundos).
21. Modifique los triggers del UpdatePanel para que incluyan el evento Tick del Timer. Para esto seleccione
el UpdatePanel y asocie el evento Tick con el UpdatePanel.
Pgina: 8

Ing. C.F.A.F
Octavo Sistemas
Ahora ejecute el programas con dos pginas y ver qu pasa. Usted debe ver las pginas de publicacin
de nuevo de forma automtica cada 5 segundos. Si usted mira con suficiente atencin, ver que no toda
la pgina se actualiza. Durante la conversacin, usted est realmente interesado en ver slo el cuadro de
texto donde esta la conversacin (txtConversacion) actualizadose. Para solucionar este problema se
agrego un UpdatePanel y dentro se lo puso al control txtConversacion que es el nico que debera ser
actualizado.
Pgina: 9

Ing. C.F.A.F
Octavo Sistemas
RESUMEN
El Timer (temporizador) de ASP.NET AJAX es til siempre que necesite de forma

regular y peridica, hacer posts back al servidor. Puede ver aqu cmo es
especialmente til cuando se combina con el UpdatePanel para hacer peridicamente
actualizaciones parciales de la pgina.
Ejercicios propuestos
1. Profundice sobre el control Timer y sus diferentes utilidades.
2. Tambin puede probar a cambiar el objeto Cache por un objeto Application y
sacar sus propias conclusiones, sobre cuando usar un objeto Cache o cuando
un objeto Application.
Pgina: 10

Desarrollo de Aplicaciones AJAX Introductoria

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Desarrollo de Aplicaciones AJAX Introductoria

Caricato da

Copyright:

Formati disponibili

UNIVERSIDAD TECNICA DE AMBATO

FACULTAD DE INGENIERIA EN SISTEMAS

OCTUBRE 2016 MARZO 2017

Universidad Tcnica de Ambato

En este laboratorio se crear una aplicacin basada en AJAX que implemente

Universidad Tcnica de Ambato

<%@ Application Language="C#" %>

Investigue el prposito e importancia del objeto CACHE.

<asp:ScriptManager ID="ScriptManager1" runat="server">

Universidad Tcnica de Ambato

8. El formulario Web debera presentar la siguiente apariencia.

Universidad Tcnica de Ambato

usuarios del chat.

Seleccione el color que desee poner en el

11. Fuera del UpdatePanel agregue los siguientes controles.

Universidad Tcnica de Ambato

private void AdministrarGUI()

Universidad Tcnica de Ambato

protected void btnEnviar_Click(object sender, EventArgs e)

public void RefrescarConversacion()

protected void btnAgregarMensaje_Click(object sender, EventArgs e)

Universidad Tcnica de Ambato

//Adicionar el mensaje a la conversacion.

protected void Page_Load(object sender, EventArgs e)

Universidad Tcnica de Ambato

Universidad Tcnica de Ambato

El Timer (temporizador) de ASP.NET AJAX es til siempre que necesite de forma

Potrebbero piacerti anche