[VSTS] Integrando Flex con VSTS

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:

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.

clip_image002

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.

clip_image004

El proyecto creado tendrá la siguiente estructura:

clip_image006

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.

clip_image008

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.

clip_image010

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

clip_image012

y UiProxy a WebApp.

clip_image014

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.

7

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:

10 

De la siguiente manera:

9

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

8

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.

11

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:

12

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.

[Source Control] Cómo trabajar con Flex y Source Control de TFS

En un artículo anterior vimos como instalar el plugin de teamprise para Flex Builder 3.0.

Configurar

Nota: Antes de poder empezar a utilizar el plugin es necesario que a través del menú Ventana en preferencias lo pueden registrar.

1

 

Lo siguiente es agregar las vistas al IDE, para esto desde el menú ventana seleccionan la opción otras vistas y seleccionan las vistas bajo la carpeta  Teamprise.

 2

 

Conectar a TFS 2008

De la vista del team explorer configuran la conexión a un TFS tal cual lo estarían haciendo con el Team Explorer de VS2008.

Luego pueden configurar el espacio de trabajo:

 3

4

 

Para finalizar con la conexión seleccionan el/los team project(s) con los que van a trabajar.

5

 

Agregar un proyecto existente de Flex al Source Control

Una forma es abrir el source control desde el team explorer, y seleccionar agregar al control de versiones…

6

Seleccionan la(s) carpeta(s) que contienen el proyecto de flex

7

Finalmente hacen check-In y listo! el proyecto de flex se encuentra en el source control. Pueden hacer check-In, check-out, ver historial, comparar, etc.

9

¿Puedo crear elementos de trabajo?

Claro, desde el Team Explorer seleccionar crear nuevo elemento de trabajo.

8

[TFS 2008] Plug-In para Flex

La presente publicación revisaremos cómo instalar el plugin para Flex Builder 3.0, el plugin que utilizaré es el de TeamPrise la versión liberada el 30 de abril del 2009, es importante para cualquier herramienta que deseen conectar al TFS revisar la información sobre el producto, en este caso Flex Builder está construido sobre eclipse, esto nos da la pauta para encontrar las posibles soluciones de conexión hacia el TFS y seleccionar la óptima para nuestro entorno.

 

Nota: Al finalizar la instalación le pedirá reiniciar el Flex Builder 3.0 asegúrese de antes guardar los cambios del proyecto en que se encuentren trabajando.

 

0

 

Lo que debemos hacer es desde el Flex Builder desde el menú ayuda seleccionar Buscar e instalar que se encuentra dentro de actualizaciones de programas.

 1

 

Luego seleccionamos Buscar nuevas características para instalar, esto nos llevará a la página para registrar la url de descarga del plugin de teamprise

 

2

 

Agregamos una nueva entrada:

 

 3

 

La marcamos a este nueva entrada y continuamos al siguiente paso donde deberemos seleccionar las características que deseamos instalar.

4

Aceptamos los términos de licencia.

5

Seleccionamos los directorios de instalación de las características e iniciamos la descarga.

6

Progreso de la descarga

7

Una vez descargada la característica selecciona instalar.

8

[ScreenCasts] Visual Studio Team System 2008 DataBase GDR

Screncasts sobre las características del Visual Studio Team System 2008 DataBase GDR, cómo empezar a trabajar con la herramienta e integración con el Team Foundation Server 2008.

Parte 1

Parte 2

 

Screncast sobre cómo comparar esquemas y hacer deploy de bases de datos con Visual Studio Team System 2008 Database GDR.

 

Screncast sobre las características de análisis estático y refactoring en Visual Studio Team System 2008 Database GDR.

[ScreenCast] Trabajando Con VSTS 2008: Trabajando con el Portal del Proyecto

Screencast sobre el portal del equipo de trabajo que crea TFS 2008, revisión de las características del portal, integración con herramientas clientes como excel, project, word, cómo publicar documentos, configuración y administración de versiones, administración de usuarios, comparación de versiones de los documentos.

Parte 1

Parte 2

[VSTS 2010] Herramientas de arquitectura en VSTS 2010

Nuestro amigo Soma en su blog en español ha publicado un post sobre las herramientas del Visual Studio 2010 para arquitectos, el artículo completo lo pueden encontrar aquí: http://blogs.msdn.com/somaespanol/archive/2009/09/03/herramientas-de-arquitectura-en-vsts-2010.aspx, el artículo original (inglés) lo encontrarán por acá: http://blogs.msdn.com/somasegar/archive/2009/08/29/architecture-tools-in-vsts-2010.aspx.