[VSTS] Integrando Flex con VSTS

Francisco Fagas — Tue, 15 Sep 2009 19:55:00 GMT

Introducción

Este artículo se revisará como integrar una interface hecha en Flex Builder 3.0 con objetos de .Net, en post anteriores se revisó como hacer la integración entre Flex y TFS 2008 utilizando el plugin de teamprise en esta ocasión veremos que al momento que integramos nuestro proyecto de Flex a Visual Studio 2008 automáticamente nos habilita la administración de dicho código.

Software Utilizado

Cliente:

Visual Studio 2008 Team Suite
Team Explorer 2008
Flex Builder 3.0
FluorineFx (http://www.fluorinefx.com/download.html)

Servidor:

Team Foundation Server 2008

Desarrollo

Nota: En este artículo no revisaremos cómo crear una aplicación en Flex, nos centraremos en secciones de código propias de la integración con .Net, en base a esto antes empezar a revisar el artículo yo cuento con un proyecto en Flex sencillo que contiene una interface para consultar la información de un objeto persona en .Net. La siguiente imagen muestra la interface con la que contamos en flex, en donde cada textbox tiene en su propiedad text el binding con los campos de la variable persona.

Lo siguiente que debemos hacer es agregar al proyecto en flex un action script que contendrá la definición del objeto persona en la capa de presentación. El código es el siguiente:

   1:  package UIPackages

   2:  {

   3:  public class PersonaAS

   4:  {

   5:  public function PersonaAs():void

   6:  {

   7:  }

   8:  public var ID:String;

   9:  public var Nombre:String;

  10:  public var Apellido:String;

  11:  }

  12:  }

Nota: Deben tener la misma estructura que sus entidades de .Net.

Ahora abrimos Visual Studio .Net y creamos el proyecto en base a la plantilla FluorineFx ASP.NET Web Site.

Nota: Este proyecto lo creo en una carpeta de nivel superior de donde se encuentra mi proyecto de Flex para que el mismo forme parte de la estructura de esta aplicación de ASP.NET.

El proyecto creado tendrá la siguiente estructura:

Lo siguiente que haremos será agregar un proyecto a la solución del tipo FluorineFx ServiceLibrary

Nota: Este proyecto tendrá los servicios que me permitirán intercambiar información entre mis entidades de .Net y la interface el flex.

Una vez creado el proyecto renombre la clase Sample.cs a Servicios.cs o en su defecto elimínela y vuelva a crear una clase Servicios.

No olvide agregar las referencias entre los proyectos: Entidades a UiProxy

y UiProxy a WebApp.

En la clase servicio agregamos el siguiente código:

using System;
using System.Collections.Generic;
using System.Text;
using FluorineFx;
using Entities;

namespace UIProxy
{
    /// <summary>
    /// Fluorine sample service.
    /// </summary>
    [RemotingService("Fluorine sample service")]
    public class Services
    {
        public Services()
        {
        }

        public Persona GetPersona()
        {
            return new Persona { ID = "1234567890", Nombre = "Francisco", Apellido = "Fagas" };
        }
    }
}

En este punto podemos ejecutar la página Console.aspx y probar nuestro servicio.

Ahora para permitirle a la interface en flex consumir dicho servicio agregaremos el siguiente código en el archivo mxml.

<mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
import UIPackages.PersonaAS;
import flash.net.registerClassAlias;

registerClassAlias("Entities.Persona", PersonaAS);

[Bindable]
private var persona : PersonaAS;

public function personaHandler(event:ResultEvent):void
{
persona = event.result as PersonaAS;
}
public function faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.message);
}

private function getPersona():void
{
ro.GetPersona();
}

]]>
</mx:Script>
<mx:RemoteObject id="ro" destination="fluorine" source="UIProxy.Services" fault="faultHandler(event)">
<mx:method name="GetPersona" result="personaHandler(event)"/>
</mx:RemoteObject>

Para finalizar en las propiedades del proyecto de Flex debemos agregar la ruta del archivo de configuración:

De la siguiente manera:

Una vez agregado este código en Flex ejecutamos y podemos ver cómo ahora nuestra interface consume datos de nuestro objeto en .Net:

Integración con TFS 2008 utilizando el Team Explorer

En un post anterior revisamos como integrar el proyecto desde el IDE de Flex utilizando el plugin de teamprise, a continuación los links a los posts:

Instalación del plugin para Flex: http://geeks.ms/blogs/ffagas/archive/2009/09/14/tfs-2008-plug-in-para-flex.aspx

Cómo trabajar con Flex y el Source control de TFS 2008: http://geeks.ms/blogs/ffagas/archive/2009/09/14/source-control-c-243-mo-trabajar-con-flex-y-source-control-de-tfs.aspx

En este momento como se podrán haber dado cuenta mi proyecto de Flex es parte de mi proyecto de ASP.NET lo cual nos permite administrar dicho código directamente desde el IDE del Visual Studio 2008, es decir, proteger, desproteger, etc.

Nota: Esta integración no es nativa con el IDE de Flex antes de poder editar los archivos en Flex Builder es necesario realizar la respectiva desprotección del código desde el Visual Studio de lo contrario les aparecerá el siguiente mensaje en Flex:

Si se selecciona Si corren el riesgo de que la siguiente vez que obtengan la última versión esta no contenga los cambios realizados en la máquina cliente. La ventaja es que no es necesario comprar un plugin y podemos administrar el código directamente desde el Visual Studio, y las desventajas en base a la anteriormente comentada nacen más alrededor de la modificación de archivos sin la administración directa desde un IDE hacia el source control.

El blog de Francisco Fagas : Desarrollo, Tools, VSTS 2008

[VSTS] Integrando Flex con VSTS