Está en la página 1de 28

Unidad N 7 XML y

AJAX

Programacin y Servicios Web Plan


Transicin

Necesidad

Uso de archivos planos para guardar estructuras de


informacin. Por ejemplo datos de: ID, Nombre y Precio.

1
Chair
49.33
2
Car
43399.55
3
Fresh Fruit Basket
49.99

Problemas de lectura, y recuperacin de informacin al


intentar agregar mas datos a dicha estructura.
Es engorroso trabajar con archivos planos.
Adems si el programador disea una solucin para leer
este tipo de archivo otro programador que deba recibir el
mismo archivo inventar otra solucin distinta para hacer
lo mismo.

Improvisando una lista con


XML
XML es una manera de identificar cualquier tipo de datos

usando elementos. Estos elementos tambin llamados


etiquetas, tienen el mismo formato que los elementos
HTML. Pero mientras en HTML los elementos indican
formato, en XML indican contenido.
<?xml version="1.0"?>
<SuperProProductList>
<Product>
<ID>1</ID>
<Name>Chair</Name>
<Price>49.33</Price>
<Available>True</Available>
<Status>3</Status>

</Product>
<Product>
<ID>2</ID>
<Name>Car</Name>
<Price>43399.55</Price>
<Available>True</Available>
<Status>3</Status>
</Product>

</SuperProProductList>

XML Definicin

XML, siglas en ingls de Extensible Markup Language


(lenguaje de marcas extensible), es un metalenguaje
extensible de etiquetas desarrollado por el World Wide Web
Consortium (W3C).

Ventajas:
Es extensible: Despus de diseado y puesto en produccin, es posible
extender XML con la adicin de nuevas etiquetas, de modo que se pueda
continuar utilizando sin complicacin alguna.
El analizador es un componente estndar, no es necesario crear un
analizador especfico para cada versin de lenguaje XML. Esto posibilita el
empleo de cualquiera de los analizadores disponibles. De esta manera se
evitan bugs y se acelera el desarrollo de aplicaciones.
Si un tercero decide usar un documento creado en XML, es sencillo
entender su estructura y procesarla. Mejora la compatibilidad entre
aplicaciones.
Es un estndar poderoso para almacenamiento, manejo y transmisin de
datos. XML tiene dos principales ventajas para el almacenamiento y
transferencia de datos: XML es un estndar industrialmente aceptado y
XML no es nada ms que texto.
Es usado en la definicin y utilizacin de servicios webs.
(ej. http://www.subgurim.net/servicios-web/smaths.asmx?op=suma)

Partes de un documento
XML
Prlogo : Aunque no es obligatorio, los documentos XML

pueden empezar con unas lneas que describen la


versin XML, el tipo de documento y otras cosas.
El prlogo de un documento XML contiene:

Una declaracin XML. Es la sentencia que declara al documento


como un documento XML.
Una declaracin de tipo de documento. Enlaza el documento con su
DTD (definicin de tipo de documento), o el DTD puede estar incluido
en la propia declaracin o ambas cosas al mismo tiempo. Hoy en da
en ves de usar un archivo DTD se usan los XMS SCHEMA que
permite hacer lo mismo con el agregado de definir los tipos de datos
de los elementos cosa que con DTS no se puede.
Uno o ms comentarios e instrucciones de procesamiento.

Ejemplo

<?xml version="1.0" encoding="ISO-8859-1"?>


<!DOCTYPE lista_de_personas SYSTEM "ejemplo.dtd">

Partes de un documento
Cuerpo: A diferencia del prlogo, el cuerpo no es opcional en un
XML
documento XML, el cuerpo debe contener un y solo un elemento

raz, caracterstica indispensable tambin para que el


documento est bien formado. Sin embargo es necesaria la
adquisicin de datos para su buen funcionamiento
Elementos: Los elementos XML pueden tener contenido (ms
elementos, caracteres o ambos), o bien ser elementos vacos.
Atributos: Los elementos pueden tener atributos, que son
una manera de incorporar caractersticas o propiedades a los
elementos de un documento. Deben ir entre comillas. Por
ejemplo, un elemento "chiste" puede tener un atributo "tipo" y
un atributo "calidad", con valores "vascos" y "bueno"
respectivamente.
<chiste tipo="vascos" calidad="bueno">Esto es un da que
Patxi y Josu van paseando</chiste>
Comentarios: <!--- Esto es un comentario --->
Nota: la diferencia entre elemento y atributo es que un atributo no puede tener
subatributos, se usan para informacin corta, sencilla y desestructurada, solo
se puede especificar una vez y en cualquier orden.

Documentos bien formados

Los documentos han de seguir una estructura estrictamente


jerrquica con lo que respecta a las etiquetas que delimitan sus
elementos. Una etiqueta debe estar correctamente incluida en
otra, es decir, las etiquetas deben estar correctamente
anidadas. Los elementos con contenido deben estar
correctamente cerrados.
Los documentos XML slo permiten un elemento raz del que
todos los dems sean parte, es decir, solo pueden tener un
elemento inicial.
Los valores atributos en XML siempre deben estar encerrados
entre comillas simples o dobles.
El XML es sensible a maysculas y minsculas. Existe un
conjunto de caracteres llamados espacios en blanco (espacios,
tabuladores, retornos de carro, saltos de lnea) que los
procesadores XML tratan de forma diferente en el marcado XML.
Es necesario asignar nombres a las estructuras, tipos de
elementos, entidades, elementos particulares, etc. En XML los
nombres tienen alguna caracterstica en comn.
Las construcciones como etiquetas, referencias de entidad y
declaraciones se denominan marcas; son partes del documento
que el procesador XML espera entender. El resto del documento
entre marcas son los datos "entendibles" por las personas.

Documentos validos

Un XML es vlido si cumple con el conjunto de


requerimientos que estn listados en el esquema: En
XML, un esquema es una descripcin de un documento
XML. Un esquema es usado para validar documentos
XML. Si una instancia del documento corresponde a la
definicin del esquema, la instancia del documento se
dice que es vlida. Hay tres tipos de esquema que
pueden ser usados para validar una instancia de un
documento
en la siguiente tabla.
Tipo de XML, como se muestra
Descripcin
esquema
Document Type
Definition (DTD)

XML-Data
Reduced (XDR
schema)
XSD schema

DTD es el mtodo de validacin original descrito en


el W3C
Recomendacin XML version 1. XML Schema
Definition (XSD) precede el DTD. DTD no estn
basados en XML.
XDR es un tecnologa de esquema temporal que fue
desarollado por Microsoft. Mientras XDR es similar a
XSD, el esquema XSD estan escritos en XML.
XSD est recomendado por W3C para validacin de
esquemas XML. XSD reemplaza tanto a DTDs como a

XML Files vs Databases

Los archivos XML no son buenos sustitutos de las Base


de Datos debido a que poseen las mismas limitaciones
de los archivos comunes:
No es posible un acceso concurrente.
Las bases de datos proveen un esquema de manejo de accesos
multiusuario y optimiza el rendimiento.

El XML TextWriter

Una de las simples formas de crear o leer algn


documento XML es usando las clases XmlTextWriter y
XmlTextReader.

Ejemplo:
Importar: System.IO y System.Xml;
Ver ejemplo en los comentarios.

El XML TextReader

El XmlTextReader se mueve a traves del documento


desde el inicio al final un nodo por vez. Se puede llamar
al mtodo Read() para movernos al prximo nodo.

Ver Ejemplo en comentario de la Diapositiva.

En el ejemplo lo que se ve es la definicin de cada


elemento dentro del documento.

XML Como fuente de


datos
string file =
Path.Combine(Request.PhysicalApplicationPa
th, @"App_Data\SuperProProductList.xml");
DataSet ds = new DataSet("Table");
ds.ReadXml(file);
dG1.DataSource = ds.Tables[0].DefaultView;
this.DataBind();

Trabajando con XML Documents en


memoria

Las clases XmlTextReader y XmlTextWriter obtienen los


datos del archivo XML de una forma muy rapida. Lo que
hacen es: Abrir el documento, recuperar los datos
necesarios y usar los datos para crear objetos o rellenar los
objetos apropiados.

Este esquema es ideal para archivos de gran tamao.

La clase XmlDocument provee un esquema en memoria del


documento completo. Con lo cual posibilita leer, insertar y
remover nodos de cualquier lugar del mismo.

Lo que hace es cargar el contenido del documento en


memoria dentro de un objeto XmlDocument.

Usando el XmlDocument se puede manipular el contenido


de la estructura del documento.

Cuando terminamos de trabajar podemos guardar el


resultado en un archivo.

Con este esquema no se mantiene una conexin directa


con el archivo.

Leyendo un documento

Ver ejemplo

string file = Path.Combine(Request.PhysicalApplicationPath,


@"App_Data\SuperProProductList.xml");
DataSet ds = new DataSet("Table");
ds.ReadXml(file);
dG1.DataSource = ds.Tables[0].DefaultView;
this.DataBind();

AJAX - Asynchronous JavaScript and


XML

En lo visto hasta el momento, la construccin de pginas


web utilizan el modelo postback. En dicho modelo las
pginas son enviadas al servidor web y regeneradas para
su interpretacin.

Una solucin utilizada es la tecnologa JavaScript del lado


del cliente para evitar estas idas y venidas, pero
mientras ms compleja sea la aplicacin el uso de esta
tecnologa se vuelve cada vez ms complejo.

Por estas razones nace AJAX como un conjunto de


tcnicas para crear pginas dinmicas ms parecidas a
aplicaciones de escritorios.

Uno de las caractersticas ms resaltantes de esta


tecnologa es que permite refrescar parte de una pgina
mientras el resto queda inalterable.

Usando el esquema normal

Usando AJAX

El ScriptManager

Para usar ASP.NET AJAX necesitamos colocar un nuevo


web control llamado ScriptManager, este control es el
cerebro de AJAX.
<asp:ScriptManager ID="ScriptManager1"
runat="server"></asp:ScriptManager>

El ScriptManager no genera cdigo HTML cuando es


renderizado, en cambio se encarga de administra otras
tareas. Como veremos agrega un links a la ASP.NET AJAX
JavaScript libraries.
<script src="/YourWebSite/ScriptResource.axd?d=RUSU1mI ..."
type="text/javascript">
</script>

El archivo ScriptResource.axd es un archivo de recursos


que le indica a ASP.NET cmo encontrar el archivo
Javascript resultado de la compilacin y que debe utilizar
para procesar las tareas de la pgina en cuestin.

Usando el UpdatePanel

Cdigo ASPX:
<asp:UpdatePanel ID="UpdatePanel1" runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<div style="background-color:green;padding: 20px">
<asp:Label ID="lblTime" runat="server" Font-Bold="True"></asp:Label>
<br />
<br />
<asp:Button ID="cmdRefreshTime" runat="server"
OnClick="cmdRefreshTime_Click"
Text="Refresh Time" />
</div>
</ContentTemplate>
</asp:UpdatePanel>

Cdigo .cs
protected void cmdRefreshTime_Click(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToLongTimeString();
}

Usando el UpdatePanel .

Explicacin del problema


Supongamos que tenemos una pgina de carga de datos,
en la cual tenemos varios controles (textbox, dropdwonlist,
etc.), normalmente estos controles requieren algn tipo de
validacin o la carga de uno en base al dato seleccionado
en otro, ejemplo tpico la seleccin de (Pais, Provincia). En
este caso no queremos que cada vez que se cambie un pas
se tenga que refrescar toda la pgina para solo volver a
cargar la lista de Provincias.
Posible solucin: Una forma de solucionar este problema es armar
una serie de funciones con cdigo del lado del cliente (tpicamente
JavaScript) para que en background haga un pedido a travs de http,
nos traiga la informacin y refresquemos los datos en la pantalla, toda
esta lgica es bastante compleja y alejara al programador del eje
principal de su tarea, que es armar la lgica de negocios, obtener los
datos y mostrarlos de la manera que mas le guste al usuario.
Solucin con UpdatePanel: Como solucionarlo con ASP.NET AJAX, es
muy fcil, solo hay que agrupar los controles que queremos refrescar
entre una serie de tags y listo, todos los controles que hagan un
postback dentro del grupo solo refrescaran a los controles que estn en
el grupo.

Usando el UpdatePanel .
Ac

tenemos los dos DropDownList, el primero


hace un posback cada vez que cambia su valor,
mientras que el segundo no hace nada.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">


<ContentTemplate>
<table>
<tr>
<td colspan="2"> Lugar de Nacimiento</td>
</tr>
<tr>
<td> Pais</td>
<td> <asp:DropDownList ID="cboPais" runat="server"
onselectedindexchanged="cboPais_SelectedIndexChanged" AutoPostBack="True" >
</asp:DropDownList> </td>
</tr>
<tr><td>Provincia</td>
<td> <asp:DropDownList ID="cboProvincia" runat="server">
</asp:DropDownList></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

protected void Page_Load(object sender, EventArgs e)


{ if (!IsPostBack)
{ cboPais.Items.Add(new ListItem("Seleccione un Pais", ""));
cboPais.Items.Add(new ListItem("Argentina", "ARG"));
cboPais.Items.Add(new ListItem("Brasil", "BRA"));
cboPais.Items.Add(new ListItem("Uruguay", "URU"));
cboProvincia.Items.Add(new ListItem("Debe seleccinar un pais","")); }
protected void cboPais_SelectedIndexChanged(object sender, EventArgs e)
{ cboProvincia.Items.Clear();
switch (cboPais.SelectedValue) {
case "ARG": { cboProvincia.Items.Add(new ListItem("Seleccione una Provincia"));
cboProvincia.Items.Add(new ListItem("Buenos Aires"));
cboProvincia.Items.Add(new ListItem("Santa Fe"));
cboProvincia.Items.Add(new ListItem("Jujuy"));
break; }
case "BRA": { cboProvincia.Items.Add(new ListItem("Seleccione una Provincia"));
cboProvincia.Items.Add(new ListItem("Amazonas"));
cboProvincia.Items.Add(new ListItem("Pernanbuco"));
cboProvincia.Items.Add(new ListItem("Bahia"));
break; }
case "URU": { cboProvincia.Items.Add(new ListItem("Seleccione una Provincia"));
cboProvincia.Items.Add(new ListItem("Artigas"));
cboProvincia.Items.Add(new ListItem("Florida"));
cboProvincia.Items.Add(new ListItem("Maldonado"));
break; }
case "": {
cboProvincia.Items.Add(new ListItem("Debe seleccionar un pais"));
break; }
}
}

Triggers

Los UpdatePanel permiten el uso de Triggers para especificar


controles que pueden estar fuera del UpdatePanel pero que
necesitan ser monitoreados para realizar cambios/refrescar el
rea dentro del UpdatePanel.
Esto es especialmente til para evitar el refrescado del cdigo
HTML de zonas que no cambian, es decir, que desencadenan
eventos pero cuyo contenido no se ve alterado.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlCard" runat="server" ... >
<asp:Label id="lblGreeting" runat="server" Width="272px"
Height="150px"></asp:Label>
<asp:Image id="imgDefault" runat="server" Width="212px" Height="160px"
Visible="False"></asp:Image>
</asp:Panel>

</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lstBackColor" />
<asp:AsyncPostBackTrigger ControlID="lstForeColor" />

</Triggers>
</asp:UpdatePanel>

UpdateProgress
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="background-color:#FFFFE0;padding: 20px">
<asp:Label ID="lblTime" runat="server" FontBold="True"></asp:Label>
<br /><br />
<asp:Button ID="cmdRefreshTime" runat="server"
OnClick="cmdRefreshTime_Click"
Text="Start the Refresh Process" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:UpdateProgress runat="server" id="updateProgress1">
<ProgressTemplate>
<div style="font-size: xx-small">
Contacting Server ... <img src="wait.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>

El ASP.NET AJAX Control


Toolkit
El ASP.NET AJAX Control Toolkit es un proyecto conjunto

entre Microsoft y la comunidad ASP.NET, que consiste en


un conjunto de controles que utilizan la librera ASP.NET
AJAX para crear efectos sofisticados.

El ASP.NET AJAX Control Toolkit:


Es completamente free.
Incluye todo el cdigo fuente con la ayuda suficiente para crear sus
propios controles.

Instalando el ASP.NET AJAX Control Toolkit

Ir a http://ajax.asp.net/ajaxtoolkit y descargar la ltima


versin. Es un archivo .ZIP, dentro del mismo encontrars
una carpeta llamada SampleWebSite la cual contiene un
ejemplo completo de todos los controles del Toolkit.

Dentro de SampleWebSite\Bin esta el ensamblado


principal llamado AjaxControlToolkit.dll

Luego se debe agregar este componente a la barra de


herramientas del Visual Studio.
1. Clic derecho en la Toolbox y elegir Add Tab (colocar el nombre Ajax
Control Toolkit)
2. Clic derecho sobre el nuevo Tab y elegir Choose Items.
3. En el cuadro de dialogo elegir Browse y buscar el
AjaxControlToolkit.dll que esta dentro de SampleWebSite\Bin, clic
OK.
4. Todos los componenetes del Control Toolkit apareceran en la nuevo
Tab.

Usando el ASP.NET AJAX Control


Toolkit
Calendar
ConfirmButton
Password
NumericUpDown
..

Referencias

Beginning ASP.NET 3.5 in C# 2008 Apress

Pro ASP.NET 3.5 in C# 2008 Apress

http://www.beansoftware.com/ASP.NET-Tutorials/UsingXML.aspx

http://es.wikipedia.org/wiki/Extensible_Markup_Langu
age