Comunidad de diseño web y desarrollo en internet

Conectar Flex 3 a Visual Basic .NET y SQL Express con WebORB

En este tutorial conectaremos Flex Builder 3 con una aplicación en .NET para obtener datos de una base de datos en SQL Express. Usando la librería WebORB para .NET.

A continuación haré un tutorial en el cual vamos a conectar Flex 3, .Net(Visual Basic) y SQL de la manera más sencilla posible. Cabe resaltar que soy medio anti Microsoft, pero aun así, contra mi voluntad y rompiendo los principios rastafari que intento cumplir, contribuiré con este tutorial para esta gran comunidad a la que recien estoy ingresando, que es Cristalab. Bueno, lo primero que necesitaremos para empezar con es lo siguiente:

Instalar el IIS (Internet Information Services), si señores, inserten el cd de windows en la pc y vayan a panel de control >> Agregar o quitar programas >> Agregar o quitar Componentes de Windows >> IIS. Luego Siguiente a todo.


Instalar el Visual Studio .net 2005, es el que estoy usando en este ejemplo, pero si desean pueden descargar el Visual Basic Express 2005 de la pagina de Microsoft, tambien servirá.

Instalar el SQL Express 2005 que también lo pueden descargar, no olviden instalar tambien el SQL Management para poder manipular sus BDs. De lo contrario instalen la version profesional del SQL 2005 Server.

Descargar Weborb para .Net y realizar la instalación en la carpeta Inetpub de su partición principal, en este caso si es la C: les quedará instalado en la carpeta weborb30 así:

En este caso voy a configurar el IIS en el puerto 8080, para eso vamos a ir a panel de control>>Herramientas Administrativas>>Servicios de Internet Information Server, luego de ingresar al IIS, vamos a hacer click derecho en Sitio Web Predeterminado y escogemos propiedades:

En Dirección ip coloquen la dirección local de su maquina y en puerto TCP escriben 8080.

Una vez configurado todo, abrimos Visual Studio 2005, nos vamos a la pestaña Archivo>>Nuevo Proyecto>>Biblioteca de Clases y le ponemos como nombre flexnet, si gustan le ponen el nombre que ustedes deseen. A continuación el código:

Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Data
Imports System.Data.SqlClient

Namespace miclase
  Public Class categorias
    Private Shared conexion As String = "Data Source=localhost\SQLExpress;Initial Catalog=Northwind;User id=sa;Password=123;"

    Public Function obtenCategorias() As DataTable
      Dim dt As New DataTable()
      Dim cn As New SqlConnection(conexion)
      Dim da As New SqlDataAdapter()
      da.SelectCommand = New SqlCommand("SELECT * FROM CATEGORIES", cn)
      Try
        da.Fill(dt)
      Finally
        cn.Close()
      End Try
      Return dt
    End Function

    Public Function insertarCategorias(ByVal xCategoryName As String, ByVal xDescription As String) As Boolean
      Dim cn As New SqlConnection(conexion)
      Dim cmd As New SqlCommand("INSERT INTO Categories(CategoryName, Description) VALUES('" & xCategoryName & "','" & xDescription & "')", cn)
      Dim valor As Integer
      Try
        If cn.State = ConnectionState.Closed Then
          cn.Open()
        End If
        valor = cmd.ExecuteNonQuery()
      Finally
        cn.Close()
      End Try
      Return valor
    End Function

    Public Function eliminarCategorias(ByVal xCategoryID As String) As Boolean
      Dim cn As New SqlConnection(conexion)
      Dim cmd As New SqlCommand("Delete from Categories Where CategoryID = '" & xCategoryID & "' ", cn)
      Dim valor As Integer
      Try
        If cn.State = ConnectionState.Closed Then
          cn.Open()
        End If
        valor = cmd.ExecuteNonQuery()
      Finally
        cn.Close()
      End Try
      Return valor
    End Function

  End Class
End Namespace
 

En esta clase tenemos 3 funciones: obtenCategorias, insertarCategorias y eliminarCategorías, estamos trabajando con la base de datos Northwind que viene en los ejemplos de SQL 2005. Además estoy usando el usuario sa que tiene como password 123, ahi ustedes deberán poner el password que le hayan asignado a su usuario. Tambien al usar el SQL 2005 Express en la cadena de conexion uso Data Source=localhost\SQLExpress, si ustedes utilizan la version profesional solo deben usar Data Source=localhost.

Luego de copiar el código se van a la pestaña Generar y eligen la opción flexnet o el nombre que le hayan puesto a su proyecto.

Una vez obtenida la dll (por defecto se encuentra en la carpeta debug/bin del proyecto), la copian a la carpeta bin en la carpeta weborb30:

Luego de eso vayan a su navegador de internet y escriban en la URL: http//192.168.1.33:8080/weborb30

Aquí puse mi ip, ustedes deben poner la ip local de su pc. Les cargará la consola de weborb, luego eligen la pestaña Management y les aparecerá el nombre de la dll que generaron y copiaron en la carpeta bin de weborb30:

Para probar si realmente está funcionando pueden seleccionar la función obtenCategorias y presionan el botón Invoke, les arrojará los las categorías de la base de datos Northwind. Eso quiere decir que todo está bien.

Ahora veamos la parte de flex: Creamos un nuevo proyecto en este caso le llamaré Flexnet2:

Luego escogemos la ruta, aquí estoy creando una nueva carpeta dentro weborb30, es importante que sea allí, la estoy llamando Flexnet2 tambien:

Luego escogemos el output URL como el siguiente: http://192.168.1.33:8080/weborb30/Flexnet2 en este caso cada uno debe poner la ip local de su pc.

Una vez creado el proyecto seleccionaremos el mxml y nos iremos a la pestaña Project >> Propiedades, luego escogeremos la opción Flex Compiler y agregaremos: -services "C:\Inetpub\wwwroot\weborb30\WEB-INF\flex\services-config.xml"

En caso de tenerlo instalado en otra ruta, deben buscar la ruta al archivo services-config.xml y colocarlo correctamente.

Ahora el codigo fuente en flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="xobtenCategorias();">
 <mx:RemoteObject id="remoteObject" destination="GenericDestination" 
   showBusyCursor="true" 
   source="flexnet.miclase.categorias" 
   fault="faultHandler(event)" >
 <mx:method name="obtenCategorias" result="obtenCategorias_Result(event)"/>
 <mx:method name="insertarCategorias" result="insertarCategorias_Result(event)"/>
 <mx:method name="eliminarCategorias" result="eliminarCategorias_Result(event)"/>
 </mx:RemoteObject>
 
 <mx:DataGrid horizontalCenter="9" verticalCenter="-50" id="categoriadg" width="600" height="350" selectedIndex="0">
  <mx:columns>
   <mx:DataGridColumn headerText="IdCategoria" dataField="CategoryID"/>
   <mx:DataGridColumn headerText="Nombre" dataField="CategoryName"/>
   <mx:DataGridColumn headerText="Descripión" dataField="Description"/>
  </mx:columns>
 </mx:DataGrid>
 
 <mx:TextInput horizontalCenter="-149" verticalCenter="193" id="txtNombre"/>
 <mx:Button label="Insertar" horizontalCenter="272" verticalCenter="193" click="xinsertarCategorias();"/>
 <mx:Label text="Nombre" horizontalCenter="-269" verticalCenter="192"/>
 <mx:Label text="Descripcion" horizontalCenter="-17" verticalCenter="192"/>
 <mx:TextArea width="173" height="85" horizontalCenter="129" verticalCenter="217" id="txtDescripcion"/>
 <mx:Button label="Eliminar" click="xeliminarCategorias();" horizontalCenter="273" verticalCenter="257"/>
 



<mx:Script>
<![CDATA[

import mx.rpc.events.*;
import mx.collections.ArrayCollection;
import mx.controls.*; 
private var cadena:ArrayCollection;

private function faultHandler(event:FaultEvent):void{
    Alert.show(event.fault.faultString, "Error")}

private function xobtenCategorias():void{
    remoteObject.obtenCategorias();
}

private function obtenCategorias_Result(event:ResultEvent):void{
    cadena=new ArrayCollection(event.result as Array);
    categoriadg.dataProvider=cadena;
}

private function xinsertarCategorias():void{
    if(txtNombre.text != "" && txtDescripcion.text!=""){
        remoteObject.insertarCategorias(txtNombre.text, txtDescripcion.text);
    }else{
        Alert.show("Rellena los campos!");
    }
}

private function insertarCategorias_Result(event:ResultEvent):void{
    if(event.result==1){
        Alert.show("Categoria Insertada");
        remoteObject.obtenCategorias();
        txtNombre.text="";
        txtDescripcion.text="";
    }else{
        Alert.show("error");
    }
}

private function xeliminarCategorias():void{
    remoteObject.eliminarCategorias(categoriadg.selectedItem.CategoryID);
}

private function eliminarCategorias_Result(event:ResultEvent):void{
    if(event.result==1){
        Alert.show("Categoria eliminada");
        remoteObject.obtenCategorias();
    }else{
        Alert.show("error");
    }
}
]]> 
</mx:Script>
</mx:Application>
 


Bueno ahora sólo prueben la aplicación y podrán insertar y eliminar categorías fácilmente.

Cualquier pregunta en el foro.

Saludos

Cristalab y Mejorando.la te traen el increíble Curso de Estrategia Digital y Marketing. Online, a tu ritmo, con diploma de certificación y clases en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate