Noticias Weblogs Foros Wiki Código

•
•
•
•
Planeta Código es un agregador de weblogs sobre programación y desarrollo en castellano. Si eres
lector te permite seguirlos de modo cómodo en esta misma página o mediante el fichero de
subscripción.
subscripción

Sponsors
• Vuelos Baratos
• Mercadona Actualidad
• Mercadona Compra Online
• Coche de Alquiler
• Regalos Publicitarios
Puedes utilizar las siguientes imagenes para enlazar PlanetaCodigo:

Si tienes un weblog de programación y quieres ser añadido aquí, envíame un email solicitándolo.
Idea: Juanjo Navarro
Diseño: Albin

MadeInFlex
Introducción a Web Services con .NET y FLEX II
Noviembre 25th, 2006 - [Enlace local]

En la primera parte de nuestro tutorial vimos como podemos elaborar un Web Service con .NET que
es capaz de devolver un mensaje y como generar la aplicación en FLEX para consumir el mismo y
mostrarlo. En esta parte del tutorial veremos algo mucho mas interesante y de mucha utilidad para
nuestras aplicaciones que consiste en enlazar datos de nuestro Web Service a una base de Datos
SQL Server 2005 Express Edition, entender los conceptos básicos de ADO.NET y como desplegarlos
de igual manera en FLEX.

1. Herramientas y conceptos básicos

2. Conexión del Web Service a una base de datos

3. Consumir el Web Service en FLEX

Herramientas y conceptos básicos

SQL Server 2005 Express Edition es un manejador de bases de datos ideal para almacenar los datos
de aplicaciones pequeñas y personales. Cuenta con el SQL Server Management Studio Express que
es el IDE para elaborar nuestras consultas, procedimientos almacenados, seguridad, funciones etc.
La base de datos con la que trabajaremos se encuentra en el QuickStart del SDK del .NET
Framework 2.0 llamada Store.Te invitamos a descargar las herramientas necesarias para completar
el tutorial.

Sql Server Management Studio Express

Una vez que ya tenemos las herramientas necesarias para empezar a desarrollar debemos de
entender lo esencial de ADO.NET . ADO.NET es una colección de clases y objetos del .NET
Framework que nos proporciona acceso a fuentes de datos. Cuando estamos en un desarrollo y nos
enfrentamos al acceso a datos existen varias maneras de hacerlo, una es mediante el DataSet o la
otra posibilidad es el DataReader, que debemos de igual manera saber emplear dependiendo de
nuestra situación, es decir si ocupamos una u otra o la combinación de las 2, ya que cada una de
estas tienen sus ventajas y desventajas.

Si tu proyecto requiere de acceso rápido a datos es decir solo lectura y no vas a hacer ninguna
operación de inserción (INSERT) o actualización (UPDATE) lo más recomendable es usar un
DataReader ya que es mucho más rápido que un DataSet. Una de sus desventajas es que lo hace
en modo conectado y como mencionamos anteriormente solo es de modo lectura.

Por el otro lado tenemos a el DataSet, este nos permite hacer operaciones tanto de lectura como de
escritura es decir (SELECT, INSERT Y UPDATE).Normalmente trabaja en conjunto con un
DataAdapter para efectuar estas operaciones y este se encarga de procesar la sentencia SQL, la
conexión y el resultado pasarlo al DataSet. Además el Dataset trabaja en modo desconectado ya
que guarda temporalmente todos los datos como un objeto en el servidor. Es importante mencionar
que los Datasets los ocupamos para hacer operaciones complejas en la base de datos, incluso el
Dataset puede tener múltiples DataTables o lo que es lo mismo tablas de la base de datos, lo que el
DataReader es incapaz de hacer ya que solo soporta una tabla de la base de datos. Las desventajas
del Dataset es que el acceso a los datos es más lento.

En resumen si quieren acceso rápido y de solo lectura les recomiendo el DataReader , si lo que
quieren es efectuar operaciones de inserción o actualización o quieren combinar múltiples tablas de
la base de datos lo que les recomiendo es el Dataset.
Conexión del Web Service a una base de
datos
Ahora que contamos con la parte teórica necesaria empecemos a codificar nuestro Web Service
para acceder a nuestros datos. Lo primero que haremos es un sencillo método para verificar si mi
conexión con la base de datos es correcta. Aislaremos la cadena de conexión en el archivo
Web.config, este archivo es para configurar parámetros de la aplicación y que es donde
almacenaremos nuestra cádena de conexión y utilizaremos el Configuration Manager para acceder a
este. Es importante mencionar que es buena práctica poner nuestras cadenas de conexión en el
archivo Web.Config y no embeberla en nuestro código ,ya que de esta manera si cambia el motor
de base de datos no será necesario volver a compilar nuestra aplicación.

En VWD dirijamonos a archivo abrir y abramos el proyecto del tutorial pasado, si no cuentas con el
te recomendamos pegar el siguiente código en un nuevo proyecto de ASP.NET Web Service (para la
creación de un nuevo proyecto ve la primera parte del tutorial aqui).

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data.SqlClient;
using System.Configuration;

[WebService(Namespace = "http://www.madeinflex.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Service : System.Web.Services.WebService
{
public Service () {

//Eliminar la marca de comentario de la línea siguiente si

utiliza los componentes diseñados
//InitializeComponent();
}

[WebMethod (Description="Método de prueba que me regresa una

cadena")]
public string HelloWorld() {
return "Hola a todos";
}

[WebMethod(Description = "Método para probar la conexión con la

base de datos")]
public bool TestConnection()
{
//CADENA DE CONEXION
string strConn =
ConfigurationManager.ConnectionStrings["StoreSQL"].ConnectionString;

//OBJETO DE CONEXION SQL, SI LA BASE DE DATOS ES ACCESS

//EL OBJETO SERIA OleDbConnection
SqlConnection sqlConn=new SqlConnection();

//ASIGNO LA CADENA DE CONEXIÓN

sqlConn.ConnectionString=strConn;

try{
 //UTILIZO EL MÉTODO OPEN PARA
//ABRIR LA CONEXIÓN
sqlConn.Open();

//SI TODO ES CORRECTO REGRESAME VERDADERO

return true;
}

//DE LO CONTRARIO REGRESAME FALSO

catch(Exception ex){
return false;
}

//FINALMENTE CIERRA LA CONEXION

finally{
sqlConn.Close();
}

Primeramente en la línea 5 y 6 de nuestro código tenemos que importar dos

librerias, una para mi acceso a datos (System.Data.SqlClient)y la última
para poder acceder a la configuración de la aplicación (Web.Config)
mediante el ConfigurationManager.
En la línea 24 generamos un método que me regresa solamente un valor booleano y me dira si mi
conexión con el motor de base de datos es correcta. En la línea 27 declaro una variable de tipo
cadena que es la que le pasare a mi objeto SQL de conexión posteriormente y que es igual a la
cadena de conexión con el identificador "StoreSQL" que se encontrara en el archivo Web.Config.
Antes de continuar asignemos en el archivo Web.config nuestra cadena de conexión. El archivo
Web.config está en el explorador de soluciones, si no lo pueden ver y es nuevo su proyecto inicien
la depuración (F5) y les aparecerá una pantalla diciendoles si lo quieren agregar. Existe otra manera
de agregarlo y es dando clic derecho sobre nuestro URL den el explorador de soluciones>agregar
nuevo elemento>Archivo de configuración web.

Explorador de soluciones
Una vez que estamos en el archivo Web.config en el nodo de connectionstrings asignaremos el
siguiente código.

<?xml version="1.0"?>
<!--
 Nota: como alternativa para editar manualmente este archivo puede
utilizar la
herramienta Administración de sitios Web para configurar los
valores de la aplicación. Utilice
la opción Sitio Web->Configuración de Asp.Net en Visual Studio.
Encontrará una lista completa de valores de configuración y
comentarios en
machine.config.comments, que se encuentra generalmente en
\Windows\Microsoft.Net\Framework\v2.x\Config
-->
<configuration>
<appSettings/>
<connectionStrings>
<!-- Nombre de identificador y cadena de conexión -->
<add name="StoreSQL" connectionString="Data
Source=localhost\SQLExpress;Initial Catalog=Store;Integrated
Security=SSPI;"/>
</connectionStrings>
<system.web>
<!--
Establezca debug="true" en la compilación para insertar
símbolos
de depuración en la página compilada. Dado que este
proceso afecta al rendimiento, debe establecer este valor
como true
durante la depuración.
-->
<compilation debug="true"/>
<!--
La sección <authentication> permite configurar
el modo de autenticación de seguridad utilizado por
ASP.NET para identificar a un usuario entrante.
-->
<authentication mode="Windows"/>
<!--
La sección <customErrors> permite configurar
las acciones que se deben llevar a cabo/cuando un error no
controlado tiene lugar
durante la ejecución de una solicitud. Específicamente,
permite a los desarrolladores configurar páginas de error
html
que se mostrarán en lugar de un seguimiento de pila de
errores.

<customErrors mode="RemoteOnly"
defaultRedirect="GenericErrorPage.htm">
<error statusCode="403" redirect="NoAccess.htm" />
<error statusCode="404" redirect="FileNotFound.htm" />
</customErrors>
-->
</system.web>
</configuration>
Primero lo que hacemos es añadir una etiqueta add con un atributo name para asignar un
identificador a nuestra conexión con datos y posteriormente el atributo connectionString para la
cadena de conexión pertinente con el nombre de nuestra base de datos en este caso llamado Store.
Existen varias cadenas de conexión dependiendo el contexto donde se encuentren , una buena
fuente para consultar cadenas de conexión de distintos manejadores de bases de datos es
www.connectionstrings.com
Una vez finalizado la configuración en Web.Config regresemos a nuestro archivo Service.cs y
continuemos analizando el código. En la línea 31 declaro un objeto de conexión y posteriormente le
paso la propiedad ConnectionString que sera igual a la variable strConn. Enseguida en la línea 36
abro un bloque try para ocupar el método open del objeto de conexion. Si todo marcha bien me
regresara true el Web Service, de lo contrario saltara a la línea número 36 y cachara la excepción y
me regresara false. En nuestro bloque finally pase lo que pase cerrara la conexión. Generalmente
cuando abrimos conexiones con datos es casi obligado para desarrolladores meterlos en bloques
try, catch, finally por si ocurre una excepción cacharla y manejala.

Probemos nuestro Web Service iniciando la depuración (F5) y nos debe aparecer en nuestro
navegador predeterminado 2 métodos, nuestro famoso HelloWorld y ahora nuestro método
TestConnection.

Navegador mostrando métodos del Web Service

Demos clic en TestConnection y si todo está correcto deberá devolvernos nuestro método el valor
de true. En caso contrario nos devolverá false. Los errores más comunes que podemos encontrar
aquí son que la cadena de conexión este mal escrita en el archivo Web.Config, que el nombre al que
nos referimos en el Configuration Manager no sea igual al nombre llave ("StoreSQL") que
asignamos en el archivo Web.Config.
 Conexión exitosa del Web Service
Ahora pasemos a la parte interesante que es acceder a los datos y desplegaros en nuestro
WebService para posteriormente consumirlo en FLEX con un DataGrid. Para este ejemplo
ocuparemos el DataSet en conjunto con un DataTable para devolver los datos a FLEX.

Lo interesante de ocupar y regresar un tipo de datos DataTable en un Web Service de .NET es que
FLEX lo interpretara como un ArrayCollection, y obvio este atributo lo podemos hacer [Bindable]
para posteriormente asignarlo a un componente que en este caso será un DataGrid.

Agregaremos un método llamado getDataTable que me regresará un DataTable apartir de un

DataSet. Recordemos que los DataSets son capaces de guardar múltiples tablas.Nuestro Web
Service se debe ver como el siguiente código con el nuevo método.

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

[WebService(Namespace = "http://localhost/webserviceclass/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Service : System.Web.Services.WebService
{
public Service () {

//Eliminar la marca de comentario de la línea siguiente si

utiliza los componentes diseñados
//InitializeComponent();
}

[WebMethod (Description="Método de prueba que me regresa una

cadena")]
public string HelloWorld() {
return "Hola a todos";
}

[WebMethod(Description = "Método para probar la conexión con la

base de datos")]
public bool TestConnection()
 {
//CADENA DE CONEXION
string strConn =
ConfigurationManager.ConnectionStrings["StoreSQL"].ConnectionString;

//OBJETO DE CONEXION SQL, SI LA BASE DE DATOS ES ACCESS

//EL OBJETO SERIA OleDbConnection
SqlConnection sqlConn=new SqlConnection();

//ASIGNO LA CADENA DE CONEXIÓN

sqlConn.ConnectionString=strConn;

try{

//UTILIZO EL MÉTODO OPEN PARA

//
sqlConn.Open();

//SI TODO ES CORRECTO REGRESAME VERDADERO

return true;
}

//DE LO CONTRARIO REGRESAME FALSO

catch(Exception ex){
return false;
}

//FINALMENTE CIERRA LA CONEXION

finally{
sqlConn.Close();
}

}
//METODO QUE ME REGRESA UN DATATABLE
[WebMethod(Description = "Método que me devuelve un DataTable")]
public DataTable getDataTable()
{
//DECLARO MI CADENA DE CONEXION ALMACENADA
//EN EL ARCHIVO WEB.CONFIG
string strConn =
ConfigurationManager.ConnectionStrings["StoreSQL"].ConnectionString;

//DECLARO MI OBJETO DE CONEXION

SqlConnection sqlConn = new SqlConnection();

//ASIGNO LA CADENA DE CONEXIÓN AL OBJETO DE CONEXION

sqlConn.ConnectionString = strConn;

//SQL A LA TABLA PRODUCTS

string strSQL = "SELECT * FROM PRODUCTS";

//DECLARO EL ADAPTADOR DE DATOS

SqlDataAdapter da = new SqlDataAdapter(strSQL,sqlConn);

//DECLARO EL DATASET
DataSet dsProductos = new DataSet();

//LLENO EL DATASET
da.Fill(dsProductos);
 //REGRESO
return dsProductos.Tables[0];

Como pueden observar es muy sencillo el código, tengo entonces un método que me regresara
un DataTable. Dentro del método primero declaro una variable que contendra la cadena de
conexión (línea 65) almacenada en el archivo Web.config. Posteriormente declaro un objeto de
conexión (línea 68) y con la propiedad ConnectionString del objeto de conexión lo asigno (línea 71)
a mi variable que contiene la cadena. Una vez hecho esto declaro en una variable la consulta que
deseo ejecutar (línea 74), en este caso a la tabla de PRODUCTS. Enseguida declaro un adaptador de
datos (línea 77) y le paso como parametros la consulta y el objeto de conexión. Despues declaro un
DataSet (línea 80) y con el método Fill del SqlDataAdapter lleno el DataSet (línea 83) con los
registros. Finalmente regreso el DataTable (línea 86) haciendo referencia al método Tables con el
índice en 0 ya que no tenemos más tablas en está consulta.

Me despliega un XML en un formato llamado DiffGram, este tipo de formato es para representar a
un DataSet y además es capaz de identificar cambios en el DataSet. Además nos muestra ya los
datos provenientes de la base en una mánera fácil de leer.

DiffGram
Una vez desplegando nuestra tabla de Datos en nuestro navegador pasemos a FLEX implementar lo
último para desplegar los datos.

Consumir el Web Service en FLEX

Primeramente iniciaremos con agregar un botón y un DataGrid. Al botón le asignaremos una
etiqueta llamada "Obtener DataSet".Estos los ubicaremos en la parte inferior de nuestros primeros
componentes que hicimos en la parte 1 del tutorial como se ve en la figura.

Botón y Datagrid en FLEX

Pasaremos a la vista de código y veremos que tenemos el botón y el DataGrid. Lo que deseamos es
que al dar click al botón mande llamar a mi Web Service y llene de registros el DataGrid.
Empecemos por agregar un script justo debajo de la etiqueta de application y modificar algunas
cosas en mi MXML. El código es el siguiente:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" height="280">

<mx:Script>
<![CDATA[

//IMPORTO LAS CLASEs NECESARIAS PARA MANEJAR EL DATASET

Y EL EVENTO
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable]
private var arrProductos:ArrayCollection

//FUNCION QUE ME LLENA UN DATAGRID

private function llenaDataGrid(event:ResultEvent):void{

//
arrProductos=event.result.diffgram.NewDataSet.Table;
}

]]>
</mx:Script>

<mx:WebService id="mifWebService"
wsdl="http://localhost/webserviceclass/Service.asmx?WSDL">
<mx:operation name="getDataTable"
result="llenaDataGrid(event)" />
</mx:WebService>

<mx:Button x="22" y="10" label="LLamar a web service de .NET"

width="201" click="mifWebService.HelloWorld()" />
<mx:Label x="26" y="46"
text="{mifWebService.HelloWorld.lastResult}"/>

<mx:Button x="26" y="72" label="Obtener DataSet"

click="mifWebService.getDataTable()"/>
<mx:DataGrid x="26" y="102" dataProvider="{arrProductos}" />

</mx:Application>
Después de agregar la etiqueta script importamos las clases necesarias, ArrayCollection y
ResulEvent para manejar los resultados de mi llamado.Posteriormente declaro con el metadatag
[Bindable] una variable arrProductos de tipo ArrayCollection y que será igual a los resultados
obtenidos por el Web Service. Noten que despues de event.result tengo diffgram.NewDataSet.Table
que es como me lo regresa el Web Service (ver figura de diffgram).Enseguida lo que hacemos es
declarar una función llamada llenaDataGrid que le pasamos como parámetro una variable llamada
event de tipo ResultEvent.

Nota importante
Para ver el comportamiento del tipo de datos que me esta interpretando event dentro de la función,
comentemos la línea donde asignamos la variable arrProductos y asignemos un punto de
interrupción en la fúncion llenaDataGrid. Iniciemos la depuración y encontraremos principalmente
dos objetos this y event. Si hacemos una exploración el en objeto event vean como el DataTable de
.NET es interpretado como un ArrayCollection
 Sesión de depuración
En lo que respecta al MXML tenemos la etiqueta WebService asignandole un id para referenciarlo y
el WSDL donde reside nuestro Web Service. Dentro de la etiqueta Web Service abro una etiqueta
llamada operation y con el atributo name hago referencia a la operación o al método en mi Web
Service (getDataTable) si tuvieramos mas operaciones y las quiero convocar puedo abrir tantas
etiquetas de tipo operation como yo desee para diferentes métodos , además tiene el atributo result
que es igual a la funcion que ya declaramos dentro del bloque script y que maneja los resultados.

En líneas posteriores encontramos las etiquetas correspondientes a el botón y el DataGrid que

agregamos. El botón tiene el atributo click que es igual al identificador del Web Service con el
método que pretendemos llamar (getDataTable). Por último la etiqueta DataGrid tiene el atributo
dataprovider que es igual a la variable arrProductos.

Si todo esta correcto corramos la aplicación , demos click en el boton obtenerDataSet y veamos los
resultados como se ve en la figura
 DataGrid con resultados
Conclusión:
Esta es una manera de trabajar con Web Services de .NET y FLEX accediendo a datos. No obstante
existe una mejor manera que nos beneficia en desempeño tanto del lado del cliente como del lado
del servidor si la cantidad de datos es mayor, aunque implica un poco de mayor código. En el
siguiente tutorial veremos como podemos implementar esta manera para mejorar el rendimiento,
además de manejar posibles fallas del lado del servidor dentro de FLEX.

» Leer más, comentarios, etc...

Información legal y técnica