estos tres juntos crean un swc --> llamado tambien skin. Por defecto Flex 2 trae uno que se llama haloo.
Pero normalmente se suele llegar solo al css.
Los estilos permiten cambiar el aspecto visual de nuestra aplicación usando las propiedades de estilo de los componentes (UIComponent). Estas propiedades están sujetas al "tema" que se use.
Pueden ser aplicados jerárquicamente o a un componente específico. - Las propiedades de estilo pueden recibir valores en los formatos de Tiempo, longitud y color. - Existe un global Selector relacionado.
Formas de encontrar información de estilo:
-Fichero de estilo externo: Fichero de estilo común enlazado -Definición de estilo local: Definición de estilo común -clase StyleManager: Permite acceder a los selectores de CSS definidos (clases de tipo CSSStyleDeclaration) y modificarlos y manipularlos. -Métodos getStyle() y setStyle): Permiten modificar las propiedades de estilo de un objeto en concreto desde actionscript. -Estilos en línea.
Cascade Style Sheet en Flex (CSS)
-Propiedades y selectores: sintaxis hyphenated (font-color) y camel-case (fontColor). -herencia en CSS: Las propiedades se aplican a las clases padres e hijos -Diferencias con la especificación de CSS:Flex implementa solo una parte en dependencia del tema. -Selectores: Se define el estilo con la propiedad styleName y se puede usar una clase del Framework directamente -Estilos soportados: color, fontFamily, fontSize, fontStyle, fontWeight, paddingBottom, paddingLeft, paddingRight, paddingTp, textAlign, textDecration, textIndent. -Recursos embebidos: backgroundImage
en este link existen varios ejemplos, una vez cargado el ejemplo de aplicacion pulsar boton derecho para ver el source. http://www.adobe.com/devnet/flex/
En este tutorial aprenderemos desde cero a obtener datos desde una base de datos de MySQL y a representarlos en un DataGrid de Flex, donde se puedan modificar, eliminar e insertar nuevos registros, mediante una clase de PHP. Este tutorial es una adaptación del tutorial de bases de datos con flash y amfphp de Maikel, por ser extremadamente completo y además es de donde yo aprendí.
Primero instalaremos WebOrb, un sistema parecido a AMFPHP, que funciona con Flex, y nos permite acceder, de manera limitada, a los Flex Data Services, en concreto a los remoteObjects, instancias de una clase de un lenguaje de servidor cuyas propiedades y métodos se pueden llamar desde Flex. WebOrb tiene algunos bugs, pero resulta muy rápido trabajar con él (por ejemplo no hacen falta los methodTable de AMFPHP).
Después crearemos una base de datos desde phpmyadmin, agregaremos a WebOrb la clase misquerys de Maikel, y por último haremos una aplicación parecida a la suya en Flex.
Para poder realizar el tutorial es imprescindible conocer, al menos en parte, el funcionamiento de flex, php y las bases de datos. Es recomendable haber hecho algún tuto similar para flash, como el de Maikel, que mencioné arriba.
Para empezar necesitas un servidor que admita PHP 5 (no, con PHP4 no vale) y MySQL. Un programa para crear un servidor local que cumple estas características es wamp (pero no EasyPHP u otros) .
Además usaremos FlexBuilder2 para configurar el proyecto y obtener el swf final. Configurar el proyecto con algún otro framework es bastante complicado, pero siempre pueden probar FlashDevelop.
Instalación de WebOrb
Instalar WebOrb es muy sencillo. Además tiene la ventaja de que podemos tratar en ActionScript instancias de una clase de php con toda naturalidad, y sin tanto código como hace falta para AMFPHP.
Simplemente tenemos que descargar la última versión para php desde aquí: http://www.themidnightcoders.com/weborb/php/weborb-php-latest.zip
Ahora tenemos que descomprimir el archivo .zip que hemos conseguido en la raiz de nuestro sitio (la carpeta www donde tenemos nuestro index, vamos).
Ahora, para comprobar que todo funciona abrimos el archivo http://tusitio/Examples/FlexRemoting/main.html, que si trabajamos en local será http://localhost/Examples/FlexRemoting/main.html. Los 5 primeros test deberían funcionar sin problemas y el sexto una vez hayamos ejecutado el desde phpmyadmin (u otra cosa parecida) el archivo siguiente archivo: DIRECTORIOWEB\Services\weborb\tests\northwind.sql.
Aquí está el tutorial en inglés de la web oficial.
Preparación de la Base de Datos:
Crea una base de datos para el ejemplo (o usa la que tengas si es de alojamiento gratuito), en mi caso llamaré a la base de datos flexphp.
Crea una tabla con 3 campos, en mi caso le di el nombre de prueba, los campos deberán tener esta descripción:
Nombre
Tipo de Dato
Características adicionales
id
bigint
not null, auto_increment, clave primaria
nombre
text
null
comentarios
text
null
Nota: Pueden crear la base de datos ejecutando el archivo flexphp_bd/flexphp.sql de los archivos det tutorial.
Crear y agregar una clase de php a WebOrb
Bien, el primer paso es crear la clase de php. En la carpeta Services de nuestro directorio principal creamos un archivo php llamado "misquerys.php":
class misquerys{
function insertar($nombre,$comentarios){
$nombre = utf8_encode($nombre);
$comentarios = utf8_encode($comentarios);
$sql= "INSERT INTO prueba (id,nombre,comentarios) VALUES ('','".$nombre."','".$comentarios."')";
return $this->query($sql,1); //retornamos el id de nuestro registro insertado
}
function eliminar ($id){
$sql= "DELETE FROM prueba WHERE id='".$id."' LIMIT 1";
return $this->query($sql,0);
}
function modificar ($id,$nombre,$comentarios){
$nombre = utf8_encode($nombre);
$comentarios = utf8_encode($comentarios);
//creamos la cadena de nuestra sentencia(query) SQL
$sql = "UPDATE `prueba` SET `nombre` ='".$nombre."', `comentarios` ='".$comentarios."' WHERE `id` =".$id." LIMIT 1;";
return $this->query($sql,0);
}
function consulta (){
$sql = "SELECT * FROM prueba ORDER BY id ";
return $this->query($sql,0);
}
function query ($sql, $accion){
$conex= mysql_connect("tuhost","user","password") or die("no se puede conectar porque ".mysql_error());
mysql_select_db("flexphp");
$result= mysql_query($sql,$conex);
if ($accion && result){
$result= mysql_insert_id();
}
mysql_close($conex);
return $result;
}
}
?>
Explicación:
Una descripción detallada de cada método:
Nombre
Parámetros
Explicación
Valor de Retorno
insertar
$nombre, $comentarios Inserta los parámetros a los respectivos campos de la tabla, codificando con utf8_encode los parámetros para entender la codificación que hace flash con el escape para mandarle los parámetros y crea la respectiva sentencia SQL. Retorna el id del registro insertado en tal caso de que se haya hecho exitosamente.
eliminar
$id Crea la sentencia SQL DELETE con la condición de que id sea el que recibio. Retorna 1 si fue exitosa la operación o 0 en caso contrario.
modificar
$id, $nombre, $comentarios Crea la sentencia SQL UPDATE, buscando el registro cuyo campo id corresponda con $id y actualiza los campos nombre y comentarios con los respectivos parámetros. Retorna 1 si fue exitosa la operación o 0 en caso contrario.
consulta
ninguno Crea la sentencia SQL SELECT para seleccionar todos los registros de la tabla. Retorna un RecordSet con los registros.
query
$sql, $accion $sql será la sentencia SQL que ejecutará, $accion es para hacer una excepción de que si la sentencia es un INSERT.
* Para consulta: retorna un recordSet.
* Para eliminar y modificar: 1 o 0 en caso de que haya sido exitosa la operación.
* Para insertar: hay una excepción donde el parámetro $accion valdrá 1 al invocar la función query y es para indicar que retornará el id del último registro insertado.
Noten que en el código, en la función query, donde pone "tuhost, "user" y "password" tendrán que sustituirlos por sus datos.
Ahora tenemos que decirle a WebOrb que este servicio existe:
Vamos a la carpeta principal>Weborb>WEB-INF>flex y abrimos el archivo remoting-config.xml. En él, al final del código, antes del último añadimos lo siguiente
misquerys
Configuración del proyecto de Flex
Vamos con Flex Builder:
File> New > Flex Project.
En el primer cuadro de diálogo How will your Flex application access data? seleccionamos Flex Data Services, y después Compile application locally in Flex Builder. Hacemos click en Next.
Después en el siguiente diálogo, en el cuadro "Root folder" tendremos que decir cuál es la ruta de la carpeta weborb, en la que está el servidor. La mía es: C:\wamp\www\Weborb . Y en el cuadro "Root URL" cuál será la URL del servidor, en este caso, http://localhost/Weborb . De nuevo, hacemos click en Next,
Ahora nos pide que demos un nombre al proyecto y la carpeta en la que se guardará. Cuando lo hayamos hecho, volvemos a pinchar en Next.
Allí, dejamos vacío el campo "Main source folder" y donde pone Output folder, ponemos la carpeta en la que deseamos que esté el archivo generado (tendrá que ser dentro del directorio web). Por ejemplo: C:\wamp\www\Examples. También tendremos que darle la ruta que tendrá cuando aparezca en el navegador al darle al botón de compilar, en el caso anterior sería esta: http://localhost/Examples.
De nuevo, esto pueden verlo en inglés en la ayuda de WebOrb.
Y por fin podemos empezar a programar mxml.
Creación de la aplicación de Flex.
Como es un poco difícil de separar por partes, pondré todo el código comentado y luego una explicación más general (y creo que es más rápido que andar explicando con el modo diseñador de Flex). Así que lean atentamente los comentarios (Texto en verde) del siguiente código:
creationComplete="remoteObject.consulta()">
//Importamos la clase ArrayCollection, que usaremos en el DataProvider.
import mx.collections.ArrayCollection;
//Importamos la clase para trabajar con las comlumnas del dataGrid, que será necesaria para definir
//función con la que rellenaremos el dataGrid
import mx.controls.dataGridClasses.DataGridColumn;
//Importamos las clases para trabajar con los remoteObjects de WebOrb
import mx.rpc.remoting.*;
import mx.controls.*;
import mx.rpc.events.*
//Importamos los detectores de eventos
import flash.events.Event;
//Una variable que necesitaremos para saber qué operación realizar
private var action:Number;
//
//
//
//Esta variable servirá para definir el índuce en el que tendrá que estar el datagrid
//alrealizar una consulta
private var dgIndex:int=0;
//
//
//Esta variable contiene el resultado de la petición. Su tipo de datos será
// ArrayCollection, el recomendado para dataProviders.
//El metatag Bindable hará que la variable se pase por referencia:
//si ella cambia, las demás cambian.
[Bindable]
private var resultado:ArrayCollection
//
//
//
//Al ejecutarse una consulta...
private function consulta_Result(event:ResultEvent):void{
//rellenamos la variable resultado con los datos obtenidos en la consulta,
//tratando de convertirlos en un Array usando el operador "as".
resultado=new ArrayCollection(event.result as Array);
//Rellenamos el dataGrid con los datos que hemos recibido
datagrid.dataProvider=resultado;
//Si hay al menos un registro...
if (resultado[0]){
estadotxt.text="Consulta completada";
//Seleccionamos el primer elemento del datagrid.
datagrid.selectedIndex=dgIndex;
//Mostramos los botones de Eliminar y Modificar por si estaban deactivados
btnModificar.enabled=btnEliminar.enabled=true;
//Si no...
}else{
//Desactivamos los botones de Eliminar y Modificar
btnModificar.enabled=btnEliminar.enabled=false;
estadotxt.text="No hay registro que mostrar";
}
}
//
//
//
//El resultado de insertar un registro:
private function insertar_Result(event:ResultEvent):void{
//Si todo salió bien...
if (event.result){
estadotxt.text = "La inserción se realizó exitosamente";
dgIndex=datagrid.dataProvider.length;
//Volvemos a cargar los datos actulizados
remoteObject.consulta();
} else {
estadotxt.text = "La inserción no fue completada, intente de nuevo";
}
}
//Lo mismo para las funciones modificar y eliminar
private function modificar_Result(event:ResultEvent):void{
if (event.result){
estadotxt.text = "La modificación se realizó exitosamente";
remoteObject.consulta();
} else {
estadotxt.text = "La modificación no fue completada, intente de nuevo";
}
}
private function eliminar_Result(event:ResultEvent):void{
if (event.result){
estadotxt.text = "El registro se eliminó correctamente";
remoteObject.consulta();
} else {
estadotxt.text = "El registro no se eliminó, la operación falló";
}
}
//
//
//
//Muestra el error al no poder ejecutarse alguna función
public static function onFault(event:FaultEvent):void
{
Alert.show(event.fault.faultString, 'Error');
}
//
//
//
//Esto pasará cada vez que se pusle un botón:
private function onButtonPress(event:Event):void{
//Según el botoón que hayamos pulsado...
switch (event.target){
case btnConsultar:
remoteObject.consulta();
estadotxt.text="Consultando..."
break;
case btnInsertar:
//Usamos la variable action para saber a cuál de las acciones posibles nos referimos,
//para evaluarlas después, al presionar el botón Si
action = 1;
//Nos ponemos en el estado donde están todos los menús
currentState="commands";
//No necesitamos que se pueda insertar el id
idtxt.text="##";
//Borramos los otros campos de texto
nombretxt.text= "";
comentariostxt.text= "";
preguntatxt.text="¿Desea insertar este registro?";
nombretxt.editable=true;
comentariostxt.editable=true;
break;
case btnModificar:
//Nos ponemos en el estado donde están todos los menús
currentState="commands";
//Mostramos el elemento seleccionado en el DataGrid, con los carácteres codificados
//correctamente
idtxt.text= datagrid.selectedItem.id.toString();
nombretxt.text= unescape(datagrid.selectedItem.nombre);
comentariostxt.text= unescape(datagrid.selectedItem.comentarios);
action = 2;
preguntatxt.text="¿Desea modificar este registro?";
nombretxt.editable=true;
comentariostxt.editable=true;
break;
case btnEliminar:
//Nos ponemos en el estado donde están todos los menús
currentState="commands";
idtxt.text= datagrid.selectedItem.id.toString();
nombretxt.text= unescape(datagrid.selectedItem.nombre);
comentariostxt.text= unescape(datagrid.selectedItem.comentarios);
action = 3;
preguntatxt.text="¿Desea eliminar este registro?";
nombretxt.editable=false;
comentariostxt.editable=false;
break;
case btnSi:
switch (action){
//Si la acción es...
case 1:
//Realizamos la función php que hemos pedido.
remoteObject.insertar(escape(nombretxt.text), escape(comentariostxt.text));
break;
case 2:
remoteObject.modificar(idtxt.text,escape(nombretxt.text), escape(comentariostxt.text));
break;
case 3:
remoteObject.eliminar(idtxt.text);
break;
}
//Volvemos al estado principal
currentState="";
break;
case btnNo:
currentState="";
break;
}
}
//Función para mostrar correctamente el DataGrid
public function dataGridLabelFunction(item:Object, column:DataGridColumn):String{
//Devuelve lo mismo, pero aplicando un unescape
return unescape(item[column.dataField].toString());
}
//Función para ordenar los datos de la columna id de manera numérica, no alfabética:
public function numericSort(a:*,b:*):int{
var nA:Number=Number(a.id);
var nB:Number=Number(b.id);
if (nA return -1;
}else if (nA>nB){
return 1;
}else {
return 0;
}
}
]]>
En el primer estado coloco un Panel, que ocupará todo el espacio disponible del swf (hago esto con el width=heigth=100%) y dentro un DataGrid que también intentará ocupar todo el espacio.
El DataGrid (datagrid) será quien muestre la información. Sus tres columnas, que muestran cada una la información del objeto del dataProvider que les indica el parámetro dataField, aunque aquí sirve más bien de indicador ya que las columnas tienen una labelFunction para mostrar la información decodificada (ya que si no hay problemas con los carácteres raros y es la solución mas fácil). La columna que muestra la propiedad id tiene una sortCompareFunction, para que al presionar sobre ella los datos se ordenen de forma numérica, no alfabética.
Debajo del DataGrid coloco un Grid de una fila, que permitirá mantener los botones que lleva dentro distribuidos según el espacio disponible.
Debajo hay una caja de texto que nos irá informando sobre el transcurso de las operaciones.
Los tres últimos paneles llevan al segundo estado, que añade tres cajas de texto y los botones para confirmar o cancelar la operación, elimina los botones principales y deshabilita el datagrid.
Según el botón que hayamos pulsado, las cajas de texto serán o no editables y mostrarán unos datos u otros. Al insertar un registro, no podremos usar el campo id, ni modificarlo al pulsar el botón modificar. Con el botón eliminar se verán los tres campos pero ninguno será editable.
Al pulsar el botón No simplemente volveremos al estado principal y al presionar el btnSi además realizaremos la operación solicitada con el Remote Object de php.
Conclusiones
Flex crea un nuevo mundo de posiblidades en las aplicaciones de Internet, permitiendo un manejo de datos potente y fácil y una rapidísima forma de montar proyectos que en Flash costarían mucho más tiempo (eso sí, una vez que te acostumbras a programar con él ;) ).
Información adicional
A muchos nos gustaría saber como juntar la acción de estos componentes en una aplicación real de ingeniería. Tuve la oportunidad de desarrollar este pequeño programa para la obtención de perfiles de profundidad en el análisis de resistencia de suelos, o resistividad eléctrica de terrenos, y pues dado que aprendí gran cantidad de conceptos mientras lo hice, pues les comparto mi experiencia. Trataré de detallarlo a pedazos y al final público el código completo. Para entender mejor el ejemplo tendré que explicar algunos sencillos conceptos de electricidad que se usan en el procedimiento. No tiene conexión a base de datos o algún servicio, así que puedo asegurarles que funcionará perfecto en sus PCs.
El sistema andando, entregando el perfil de profundidad (para algunos datos ficticios), luce así:
En la gráfica hay 3 curvas, dos de ellas (la azul y la verde) pertenecen a resistividades calculadas en dos regiones diferentes del terreno (N-S significa de Norte a Sur, W-E significa Este – Oeste), la curva naranja pertenece al promedio de estas dos curvas. El eje horizontal corresponde a la profundidad del suelo; así entonces por ejemplo en el punto indicado donde se cruzan las 3 curvas, a una profundidad de 3.75m, tenemos 502.65 ohmios-metro.
Pero vamos entonces a lo que nos interesa. Primero vamos a indicarle al sistema los 8 puntos de resistencia tomados de norte a sur, y los otros 8 de este a oeste. Lo vamos a hacer a través de componentes TextInput. El formato de inserción de datos debe quedarnos así:
Concentremos la mirada en las dos columnas de la derecha. Son sencillos TextInput puestos en cierto orden que nos permiten (a los que trabajamos en ingeniería eléctrica) relacionar los campos con un valor de profundidad ya prevista junto con una separación de electrodos. Son entonces, 8 medidas de resistencia de Norte a Sur, y otras 8 de Este a Oeste. La nomenclatura usada para los TextInput es: para los de norte a sur los llamamos rns_1, rns_2, etc. hasta rns_8; lo análogo para los de este a oeste: rwe_1, rwe_2… hasta rw8. El código para estos TextInput dentro de un Panel es:
Vamos a construir de una vez el navegador con pestañas TabNavigator, un sistema muy sencillo y eficiente para organizar información en espacios pequeños. La aplicación tiene 3 áreas para mostrar al usuario, una con la pestaña ‘Valores de Resistencia’, otra ‘Grilla de Cálculos’ y la otra ‘Perfiles de Resistividad’, que ya vimos arriba en acción. La clave es, luego de abrir el componente, usar en el interior elementos ‘Canvas’ que nos van a contener todo lo visible en cualquiera de las 3 áreas de mostrar al usuario. Entonces en este caso, requerimos 3, así:
En cada uno de estos estados vamos a incluir los componentes que necesitamos. Se supone que al hacer clic en la pestaña correspondiente se mostrarán los componentes contenidos en el Canvas actual del TabNavigator. No hay que hacer nada especial, el componente se encarga de todo.
Entonces, voy a detallar rápidamente los componentes que hay en los 3 Canvas del TabNavigator:
Canvas ‘Valores de Resistencia’:
* Un contenedor Panel (solo para fines estéticos)
* 16 TextInput
* 16 Label para indicar cierta información
Canvas ‘Grilla de Cálculos’:
* Un Panel
* Un Datagrid con 7 columnas
Canvas ‘Perfiles de Resistividad’
* Un Panel
* Un componente LineChart para graficación
* Un componente Legend para acompañar al LineChart
Toda la configuración de estos componentes puedes encontrarla abajo en el código y analizarla por ti mismo, no es tan complicada.
En el Canvas ‘Grilla de Cálculos’ tenemos un componente DataGrid enlazado a un ArrayCollection que le suministra la información. Esto se indica en la propiedad dataProvider="{mydata}" del componente DataGrid. Aquí vemos entre ‘llaves’ a la variable mydata. Esto sucede ya que queremos que cualquier cambio en el contenido de mydata se transmita inmediatamente al DataGrid. Para hacer eso, en alguna parte del ActionScript tenemos que indicar que ‘mydata’ es [Bindable], o, vinculable. El DataGrid nos queda:
Prestemos atención a los ‘dataField’. Cada uno de estos campos va a estar enlazado a cada uno de los componentes de la variable ‘mydata’, es decir, en la estructura de mydata, vamos a encontrar a ‘profundidad’, ‘separacion’, ‘resistencia_ns’, etc. El resto de parámetros son solo ajustes de visualización.
Este señor debe verse al final así:
Las dos primeras columnas son valores puestos ‘a mano’ en la estructura de mydata. Ya lo veremos en el ActionScript. Las dos siguientes se absorben de los TextInput (las columnas R-NS y R-EO que significan Resistencia Norte-Sur y Este-Oeste). Las p-Ns y p-EO (resistividades norte-sur, y este-oeste) son valores que se calculan en el momento en que se presionan las pestañas del TabNavigator a través del evento change del mismo; este evento change aparece en la línea donde están las propiedades del TabNav. La función puede verse en el código y se llama ‘calculate()’.
En el ActionScript empezamos entonces con importar la clase que nos permite trabajar con ArrayCollections, y luego, definir el objeto usando [Bindable] como anunciamos arriba. Junto con esto, hay una función que creé llamada init() que deseo corra apenas la aplicación sea cargada (solo quiero que mydata se inicialice una vez). Para esto introducimos el evento creationComplete="init()" en el
Las funciones
Tenemos en total 4 pequeñas funciones que nos permiten hacer lo que necesitamos, y son:
* init()
* calculate()
* setNewItem()
* myround()
Vamos una por una:
init()
Ya hablamos de ella arriba. Nos permite inicializar el proveedor de datos del sistema (mydata) en el momento de la carga de la aplicación.
calculate()
No es precisamente la función que ejecuta los cálculos Riendo, pero se encarga de llamar 8 veces a la función que si lo hace (setNewItem()) y también, antes de eso, limpia el proveedor de datos con removeAll().
setNewItem()
Esta si es la que ejecuta los cálculos. A partir de las resistencias enviadas desde calculate(), se determinan las resistividades a través de una fórmula sencilla (2*PI*SeparacionElectrodos*Resistencia). Como sólo queremos dos decimales luego de la coma, se hizo una función llamada round() que se encarga de eso. Se pudo haber usado otro método pero creí este como el más conveniente para conservar el tipo de datos en la estructura de mydata.
round()
Ya quedó explicado arriba, redondea el número que se le envía a dos decimales.
Y para finalizar, el plato fuerte, el LineChart.
Hay varios componentes Chart en el IDE de Flex, yo decidí usar el LineChart ya que era el que más se ajustaba al objetivo. Hay algunas cosas en la configuración que considero importantes para mencionar:
* LineChart requiere de un proveedor de datos. En este caso lo vinculamos a mydata quien suministra los datos en toda la aplicación. Lo puedes observar en la línea del LineChart:
* Al ajustar showDataTips en ‘true’ como se puede ver arriba, podemos obtener los tooltips en los puntos de muestreo ingresados.
* Es bueno detallarle al LineChart quien va a a proveer los datos del eje horizontal. Esto se hace con mx:horizontalAxis en la forma:
Efectivamente, el campo ‘profundidad’ (de la estructura mydata) es el que queremos que proporcione los datos del eje horizontal. Hacerlo así nos asegura un eje ordenado con los puntos que ingresamos. Si decides probar con xField en los LineSeries (explicados abajo) tal vez obtendrás un resultado que no te guste, pero que igual, funciona.
* Como son 3 gráficas las que vamos a incluir en el LineChart, necesitamos incluir tres elementos . Cada uno de ellos debe ir enlazado a los campos que corresponden a las resistividades calculadas (y a la promedio por supuesto) a través de los campos de mydata: promedio, resistividad_ns y resistividad_we. Recordemos que en la función setNewItem() se construyó así la estructura, debemos usar exactamente los mismos nombres proporcionados a mydata.
* Debajo del LineChart está un componente llamado Legend. Observa aquí que el proveedor de datos de este componente es precisamente el LineChart (que en este caso se llama ‘mychart’).
Muy bien les dejo el código completo abajo.
import mx.collections.ArrayCollection;
[Bindable]
private var mydata:ArrayCollection;
private var pns:Number = new Number();
private var pwe:Number = new Number();
private var prom:Number = new Number();
private function init():void {
mydata = new ArrayCollection();
}
private function calculate():void {
mydata.removeAll();
setNewItem(0.75, 1, rns_1.text, rwe_1.text);
setNewItem(1.5, 2, rns_2.text, rwe_2.text);
setNewItem(2.25, 3, rns_3.text, rwe_3.text);
setNewItem(3, 4, rns_4.text, rwe_4.text);
setNewItem(3.75, 5, rns_5.text, rwe_5.text);
setNewItem(4.5, 6, rns_6.text, rwe_6.text);
setNewItem(5.25, 7, rns_7.text, rwe_7.text);
setNewItem(6, 8, rns_8.text, rwe_8.text);
}
private function setNewItem(prf:Number, sep:Number, rns:String, rwe:String):void {
pns = myround(2*(Math.PI)*sep*(new Number(rns)));
pwe = myround(2*(Math.PI)*sep*(new Number(rwe)));
prom = myround((pns + pwe)/2);
mydata.addItem({profundidad: prf, separacion: sep, resistencia_ns: rns,
resistencia_we: rwe, resistividad_ns: pns, resistividad_we: pwe, promedio: prom});
}
private function myround(numToRound:Number):Number {
numToRound = (Math.round(numToRound*100))/100;
return numToRound;
}
]]>
change="calculate()">
Copiar y pegar les asegura que va a compilar correctamente, pero la idea es analizar cada una de las estrategias usadas aquí, pues precisamente para aprender. Se que el ejemplo amerita una explicación mas detallada (y seguramente más ordenada), pero aún así espero que les ayude en su aprendizaje de Flex. ¡Saludos!
En la conferencia de aniversario de garageFlash, hice un pequeño registro de asistentes en Flex, con una alerta personalizada con CSS, muchas personas me preguntaron como lo logré y aqui les dejo el tip. Zguillez dejó una personalización de icono del componente muy bueno por cierto.
Para empezar creamos un proyecto en Flex, agregamos un botón y que dispare un Alert:
Código :
import mx.controls.Alert; private function llamarAlerta():void{ Alert.show("No se puede procesar su información"); } ]]>
Ahora agregaremos el css necesario para personalizar nuestro componente. Para eso creamos un estilo CSS con el nombre de nuestro componente, también podemos aplicar estilos a cualquier componente.
En este tutorial aprenderás desde cero a obtener datos desde una base de datos en MySQL y a representarlos en un DataGrid de Flex. Desde la configuración de WebORB hasta el código Actionscript 3, hecho fácil.
Para lograrlo:
1. Instalaremos WebORB, como agente de intercambio Cliente/Servidor en formato AMF3, el cual funciona con Flex perfectamente. Gracias a WebORB podremos acceder fácilmente a los Servicios PHP que desarrollaremos para nuestro ejemplo en Flex. 2. Crearemos una base de datos en MySQL muy sencilla, a través de phpMyAdmin para el ejemplo. 3. Escribiremos una clase/servicio en PHP y la registraremos en WebORB. 4. Y finalmente, construiremos una pequeña aplicación en Flex Builder 2, que acceda al Servicio PHP creado, y rellene un DataGrid con los datos recibidos.
NOTA: Si desconoces alguno de los conceptos anteriores, te recomendamos leer estos tutoriales: Tutorial de Flex Builder 2, Tutorial básico de bases de datos, Crear una base de datos MySQL desde cPanel.
Todo esto lo haremos, paso a paso y explicando el porqué de cada cosa, desde los conceptos más elementales, hasta los más avanzados, para que al final del tutorial entiendas perfectamente, qué, cómo y porqué de todo lo que se está manejando. Empecemos por el principio...
Voy a comenzar, explicando los conceptos fundamentales que rigen la filosofía de trabajo Cliente/Servidor que representa RemoteObject.
Estamos acostumbrados a usar archivos de texto, XML, SOAP, HTTPServices, etc, como servidores de datos remotos. Todos ellos se basan en un modelo de representación plano, es decir, la aplicación oyente recibe de sus orígenes un texto plano estructurado, que es parseado y tratado apropiadamente por nuestros algoritmos personales.
Adobe agregó a Actionscript 3 (Y por ende a Flex) el estándar E4X que realmente ayuda mucho en el parseo de este tipo de orígenes, pero aún así seguimos limitados a un procesamiento previo al uso efectivo de los datos, con código adicional en nuestros desarrollos. A esto se suma la perdida del tipo de datos, carencia que deberíamos resolver nuevamente a mano.
Aún con todo, para aplicaciones sencillas suele ser una muy buena opción de uso, ya que no requieren alto rendimiento ni integridad de tipos, cosa que se vuelve fundamental en una aplicación un poco más seria, como sería una Rich Internet Application.
Para salvar esta problemática apareció Flash Remoting, que aportaba un protocolo de transporte de datos en formato binario, al cual llamaron AMF0, pensado para trabajar con ColdFusion como agente de transporte. Este protocolo permitía hacer uso de objetos complejos de una manera cuasi-transparente entre nuestro Flash y los servicios AMF que se ejecutaban en el servidor a través de un agente de transporte que codificaba y descodificaba el protocolo contra las clases servicio que se les registraban, el más famoso y efectivo de la época AMF0 es sin duda AMFPHP para PHP y OpenAMF para Java. En resumen: Permitía transferir objetos y variables entre Flash y un lenguaje del servidor (PHP, Coldfusion, Java) sin que se perdiera el tipo de datos.
Para sacar partido a la ventaja que este protocolo ofrecía, crearon un tipo de objeto en Flash al cual llamaron RemoteObject, el cual permitía ejecutar RPC's (Remote Procedure Call) o sea llamadas a procedimientos remotos en un clase instanciada en el servidor, superando el problema del texto plano y la serialización de datos que hasta entonces sufríamos. Resumen: Un RemoteObject permite invocar funciones escritas en código del lado del servidor y usar su resultado en Flash.
AFM0 evolucionó hacia AMF3 con la llegada de Flex 2, corrigiendo varias carencias que tenía el protocolo original, y mejorando con mucho la velocidad, el peso, el modo en como se transmite la información, y sobre todo unificando criterios de llamada y construcción de clases, al estilo Java para todos los lenguajes que lo soporten.
Una vez sabes que demonios es RemoteObject y AMF3, vamos a ver como instalamos un agente de transporte que implementa AMF3 sobre PHP en el servidor, WebORB.
NOTA: Un agente de transporte es un bloque de código que permite conectar a Flex o Flash con PHP u otro lenguaje del lado del servidor.
WebORB, es la alternativa (gratis y libre) más lograda a la versión de Abobe del protocolo AMF3, el cual es LiveCycle Data Services. LiveCycle solo puede usarse en entornos Java, en cambio WebORB da soporte al protocolo en Java, .NET, PHP y Ruby on Rails, con un rendimiento muy alto y estable. El sistema para configurarlo es idéntico al que usa LiveCycle, con lo cual lo que aprendas ahora para WebORB te valdrá también para LiveCycle.
Esquema de conexión de WebORB
WebORB es la serie de archivos del lado del servidor (En PHP en este caso) que permiten a Flash o Flex conectarse directamente con PHP por medio de AMF3.
Antes de pasar a rellenar xml's como loco para configurarlo y que copies y pegues sin saber realmente que estas haciendo, voy a explicarte como funciona un agente de transporte, para que sepas porqué y para qué son los distintos xml's que tiene en configuración.
Entra al sitio de descarga de WebORB para PHP, descarga el .zip y descomprimelo en la raiz de tu sitio, de modo que todo el contenido del zip quede en www.tusitio.com/weborb/. Esta dirección será la raiz de weborb y a partir de esto empezará el tutorial.
WebORB tiene su carpeta de configuración alojada dentro /Weborb/WEB-INF/ (Buscala dentro de la carpeta donde descomprimiste el .zip). Dentro de ésta se encuentran las clases de PHP, configuración y librerias que requerirá el agente para poder generar el protocolo e incluir nuestras clases personales dentro de las clases usables en despliegue.
En Flex Builder has de indicar la ruta hasta la carpeta WebORB (contenedora de WEB-INF), para encontrar los xml's de configuración a la hora de compilar.
Dentro de /WEB-INF/flex/ la estructura que encontramos es esta:
Los 3 primeros no se usan en WebORB para PHP, ya que hacen referencia a funcionalidades que no se pueden ofrecer en PHP, pero que si tienen soporte en su versión Java y en LiveCycle, el cual presenta la MISMA estructura de configuración. Lo que realmente necesitamos
services-config.xml En este fichero se le indica al agente, que servicios del protocolo va a ofrecer y como se llaman. No lo editaremos en nada, a excepción de un atributo id. Puedes copiar y pegar el siguiente código completo dentro del archivo .xml.
Analicemos su estructura. Lee los comentarios (En verde) para entender el XML
Este fichero era el más complejo, ¿A que no era tan complicado?
remoting-config.xml Éste es el que más tocaremos, de hecho el anterior viene preconfigurado en la distribución y difícilmente necesitaras tocarlo. Este es remoting-config. Lee los comentarios (En verde) para entender el XML.
Y con esto ya sabes que es cada cosa en los xml que hay que tocar, y ademas de camino hemos añadido la configuración para nuestro ejemplo. Notese que la ruta de nuestra clase es relativa a la carpeta /Services/ dentro de la raiz de /weborb/. En esa carpeta /Services/ es donde guardaremos nuestros archivos .PHP de la aplicación. Creamos la Base de Datos
phpMyAdmin: Administrador de base de datos instalado en todos los hosting y servidores con PHP y MySQL.
Entra a phpMyAdmin. Dentro encontramos el panel general, donde se nos ofrece la posibilidad de crear una nueva base de datos. Ahí le damos el nombre a nuestra DB (Base de datos), y especificamos con cuidado el cotejamiento y el charset, de modo que sea utf8_unicode_ci, dado que Flex usa esa codificación de caracteres, y ademas nos aseguramos la compatibilidad con cualquier cliente de otros paises. Ponle cualquier nombre a la DB.
Con la nueva DB creada, entramos al panel de administración de tablas. En esta pantalla creamos nuestra tabla de ejemplo, con esta sencilla especificación:
* Nombre de la tabla: user * Campos: 2 o campo: id o tipo: int, auto_increment, primary_key
o campo: name o tipo: VARCHAR(255), charset: utf8
Con esta estructura, ya tenemos nuestra tabla lista para trabajar, no olvides llenarla de datos para tener algo que mostrar ;)
Si no quieres usar phpMyAdmin, este código en SQL genera la base de datos:
CREATE TABLE `user` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `name` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL );
Construimos las clases para comunicar en PHP y Actionscript 3.
Crearemos dos clases que definirán la estructura de los datos que recibimos entre PHP y Actionscript 3. Estas clases se conoces como tipos complejos de datos. Para mantener este tipo complejo correcto tanto en nuestro Flex como en nuestro PHP, nos creamos dos clases gemelas, una en AS3 y la otra en PHP, de manera que lo que enviemos por PHP sea recibido identido en AS3. Para ello, indicamos en Actionscript 3 con el metatag [RemoteClass(alias=””)] donde está su pareja AMF3 escrita en PHP.
RECUERDA: PHP es el lenguaje del lado del servidor que se conecta a MySQL. Actionscript 3 es el lenguaje del lado del cliente que muestra los datos en Flex. AMF3 es el protocolo de comunicación entre PHP y Actionscript 3 que en AS3 ya está programado internamente y en PHP lo implementamos usando las librerías WebORB para PHP. En otras palabras, AMF3 es, para efectos practicos, WebORB Código en Actionscript 3
Creamos un archivo llamado UsuarioVO.as, que colocaremos en la misma carpeta raiz del proyecto de Flex (Donde está el .mxml).
package
{
[Bindable]
[RemoteClass(alias="flex.morphx.UsuarioVO")]
public class UsuarioVO {
public function UsuarioVO() {
}
public var name:String = ""; } }
Este objeto tiene una propiedad "name" y nada más. name será el nombre de usuario a mostrar en el DataGrid, que es el campo de contenido de nuestra tabla. Este valor será llenado por medio de PHP. Código en PHP
Versión de PHP WebORB requiere obligatoriamente, PHP 5.
Crearemos nuetro fichero PHP en /Services/flex/morphx/UsuarioVO.php nota que la ruta de carpetas coincide con la ruta de la clase que indicamos en el XML, de ese modo AMF3 es capaz de encontrar nuestra clase PHP, y replicarla correctamente. De esto se deduce que las mayusculas y minusculas en los nombres de las carpetas ha de coincidir plenamente con la ruta indicada antes. En programación es muy importante mantener mayusculas y minusculas de manera exacta.
class UsuarioVO {
public $name;
public function UsuarioVO() {
}
} ?>
Si os fijáis es un objeto que tiene exactamente la misma estructura que nuestro UsuarioVO.as, y de hecho sus propiedades han de llamarse exactamente igual, incluso manteniendo el mismo uso de mayusculas y minusculas.
ValueObject: Esta combinación de clases gemelas en PHP y Actionscript 3, cuyo objetivo es mantener un mismo tipo de datos entre lenguajes, se conoce como ValueObject. Clase en PHP de conexión a MySQL. Servicio.
Vamos a crear ahora una clase servicio en PHP para nuestro ejemplo, ubicala en la misma carpeta que el PHP anterior.
Nota: Las carpetas de clases en programación se conoces como paquetes. La clase anterior tendría como su paquete a "flex.morphx"
La llamaremos UsuarioService.php, y será ésta la clase a la que nos conectaremos desde Flex, en la cual podremos usar sus metodos, por tanto es ésta la clase que hemos de asociar al “destination” en la configuración de WebORB, como vimos antes (El XML). Lee los comentarios del código (En verde) para entender su funcionamiento.
require_once ("UsuarioVO.php"); //Importamos nuestro objeto de transporte, nuestro ValueObject
class UsuarioService {
public function UsuarioService() {
}
//Nuestro metodo a llamar public function getUsuario() {
//Cabecera de conexión a la BD //DEBES CAMBIAR LOS VALORES de "SERVER", "USER" y "PASS" de acuerdo a tus datos //de conexión a tu base de datos. $sqlconnect = mysql_connect("SERVER", "USER", "PASS"); $db = "DBNAME"; //DEBES CAMBIAR "DBNAME" por el nombre de tu base de datos.
if (!$sqlconnect) throw new Exception("No fue posible conectarse a MySQL");
if (!mysql_select_db($db)) throw new Exception("No se puede seleccionar la base de datos $db");
//Ejecutamos la consulta SQL para obtener todos los registros de la tabla $rst = mysql_query("SELECT * FROM USER");
if (!$rst) throw new Exception("Error en la consulta SQL");
$respuesta = array (); //Array de datos a devolver. //De este modo nuestro ArrayCollection en Flex, //tendrá una serie de objectos con la propiedad "name" //para pasarle al DataGrid
while ($row = mysql_fetch_object($rst)) //Tomamos record a record y lo encapsulamos //en nuestro objeto de transporte { //Creación de los Objetos de Transporte $vo = new UsuarioVO(); //Le añadimos a nuestro ValueObject el nombre obtenido de MySQL $vo->name = $row->name;
//Añadimos a nuestro array el ValueObject creado $respuesta[] = $vo; }
//Devolvemos el resultado hacia Flex return $respuesta; } } ?>
Y finalmente construimos nuestro ejemplo Flex. Código MXML en Flex
Ahora definimos nuestro MXML en Flex desde el que llamaremos a nuestro servicio PHP.
RemoteObject: Un RemoteObject es un tag de MXML que permite conectarse a un servicio PHP configurado con WebORB.
Aclaremos cuales son los principios de una llamada a través de un RemoteObject. Una llamada de éste tipo, es por definición “asíncrona”, es decir, tenemos que pedir al RemoteObject la ejecución del procedimiento que necesitemos y luego “esperar” a que el servicio nos conteste, y para ello es imperativo el delegar esa espera a un listener (Un manejador de evento), para avisarle al usuario que los datos están cargando y cuando están cargados. Visto lo anterior, se entiende que una llamada a un método remoto implica 3 acciones:
* La llamada al método en sí. * Un evento “result” que entrega un ResultEvent, y es lanzado cuando nos llegan los datos. * Un evento “fault” que entrega un FaultEvent, y es lanzado en caso de obtener un error en el proceso.
Por lo tanto el tratamiento de los datos esperados tras una llamada tipo “servicio.getUsuario()” donde "srv" es el id de nuestro RemoteObject en Flex, no puede hacerse en la línea siguiente a ella, sino que se hará en una función a parte que será lanzada por el evento “result” y que nos pasará por parámetro un ResultEvent con los datos recibidos y lo salvaremos en un ArrayCollection. ArrayCollection es un tipo de datos de Flex que nos encapsula un Array, con una serie de metodos de manejo que nos permiten un gran numero de operaciones avanzadas sobre la "colección" de datos, tales como: Filtros, Cursores, Ordenaciones, etc. Por ello recogemos los datos en un objeto de este tipo, que actuará como DataSet.
[Bindable] private var usuarios : ArrayCollection;
//Esto lo hacemos para forzar al compilador //a incluir la clase UsuarioVO en el swf de salida, //de modo que reconozca los objetos recibidos desde WebORB. private var forceimport:Array = [UsuarioVO];
private function onResult(event:ResultEvent):void{ usuarios = ArrayCollection(event.result); //Es necesario convertir el "result" a un ArrayCollection (Eso se llama hacer cast) //Asignamos al ArrayCollection, //la colección de objetos de //transporte recibidos desde WebORB. }
Ahora tan solo nos queda dar de alta en /Weborb/WEB-INF/flex/remoting-config.xml nuestro “destination” tal y como vimos antes, para que el compilador de Flex encuentre la clase remota a llamar a la hora de generar nuestro swf, para ello incluiremos en dicho fichero el siguiente segmento de código (Si ya lo hiciste antes en la configuración, no necesitas duplicarlo):
flex.morphx.UsuarioService
Ya tenemos todo, ahora solo queda compilar en Flex y probarlo. No olvides enviar tus preguntas al foro de Flex y Actionscript 3 o al de WebORB.
Este es el primer problema que me surgió cuando instalé el Flex Builder 3. Por defecto trae como opción de control de versiones el CVS. Lo que no está mal, ya que al ser open source es una excelente opción.
Pero si les pasa como a mí y necesitan usar el mismo estándar en toda la empresa (el VSS, en mi caso), la cosa se complica.
Este mismo problema ya había surgido con la versión anterior de Flex Builder 3, el Flex Builder 2, donde la solución era instalar un plugin, el Java Developer Tools, y luego el del VSS. Pero este mismo método no me funcionó, porque no pude encontrar el plugin de Java entre los plugins que me ofrecía Flex Builder 3.
Mi solución fue optar por trabajar con Eclipse 3.3 y el plugin de Flex (que me costó bastante encontrar, link abajo). Luego de descargar ambos, instalé el plugin de VSS y todo anduvo de mil maravillas.
Pero como me quedé con ganas de usar Flex Builder 3 (por que no me quería dar por vencido, hasta donde sé, Flex Builder 3 y Eclipse son funcionalmente idénticos), copié todos los plugins que tenía en el Eclipse y los pegué (sin reemplazar nada) en la carpeta de plugins de Flex Builder 3.
Y funcionó, sin mayor problema. Lo único malo es que debería haber probado copiar los plugins uno por uno para ver cuál era exactamente el que tenía que copiar en un principio.
Conclusión: Si, como yo, se ven en la necesidad de usar el VSS, opten por Eclipse. Es más práctico.
* Descargar Elipse 3.3.2 * Descargar el plugin de VSS para Eclipse
Descargar el plugin de Flex 3 es más complicado y requiere estar registrado en Adobe. Lo que tienen que hacer es ir a adobe.com/downloads, seleccionar Flex 3 en las opciones y descargarlo. Por las dudas el link a la página de descarga, una vez logueados es esta.
VSS (SourceSafe), CVS y SVN (SubVersion) son software de control de versiones. Muy útiles y a mi parecer indispensables en proyectos donde más de un desarrollador participa. Permite entre otras cosas llevar historial de los cambios hechos al proyecto en cada uno de sus ficheros.
No he usado SourceSafe, no puedo dar mi opinión, pero si he estado usando con mi equipo CVS y SVN SubVersion y con el cambio a Flex 3 tambien tuvimos un par de dolores de cabeza para instalar el plug-in de SubVersion, algo parecido a lo que cita HernanRivas en este post Les dejo los pasos para instalar el plug-in en Flex Builder 3 de SubVersion:
* Help Menu * Software Updates * Find and Install * Search for New Features to Install * Click en Europa Discovery Site * Escoger un Mirror * Exapndir Europa Discovery Site * Exapndir Java Development * Seleccionar lo siguiente: o Eclipse plug-in development Environment (PDE) o Java Development Tools (JDT)
* Aceptar los términos y reiniciar Flex Builder 3
Luego se sigue el mismo proceso hasta "Search for New Features to Install",
* New Remote Site: * Se agrega el sitio "Subversion" (o el nombre que se desee) y la url http://www.polarion.org/projects/subversive/download/eclipse/2.0/update-site/ * Se agrega el sitio "Conectores" (o el nombre que se desee) y la url http://www.polarion.org/projects/subversive/download/eclipse/2.0/update-site/ * Escoger un mirror si no está automático. * Expandir "Conectores" Seleccionar el paquete Subversive Connectors. * Expandir "Subversion" Seleccionar el paquete Subversive (Incubation).
Con esto queda listo el plug-in. Otro pequeño tip, si están detrás de un proxy-firewall deben darle acceso al puerto 3690 para poder trabajar con SVN.
Un buen host de control de versiones es www.assembla.com; para los que quieren empezar teniendo un servidor SVN remoto para proyectos privados, tiene una muy buena opción gratuita; y si el proyecto es abierto obviamente esta el Señor Google con code.google.com/hosting/. Y obviamente también pueden instalarlo localmente, más información.
Con el SDK de flex, (especificamente el fichero mxmlc.exe) es posible compilar archivos SWF desde la linea de comandos de windows (DOS) teniendo un archivo de texto con el código Actionscript o MXML. Es seguro que si lo han usado se han terminado frustrando por la poca comodidad que brinda para compilar. Yo personalmente o hacía un acceso directo en cada proyecto o escribía la ruta completa del proyecto, que a veces era más largo y demorado que abrir flex por cualquier cambio minimo que hiciese. Y es que muchas veces prefiero simplemente trabajar en el bloc de notas, porque Mr Flex Builder se devora todos los recursos de mi compu (bueno, memoria).
Entonces pensé en integrarlo, aunque fuese de una manera sencilla, con el explorador de windows. Cosa que sin abrir flex, solo click derecho sobre el archivo y compilar
Para ser mas claros, que al dar click derecho sobre un MXML viera esto:
A mi personalmente me ha terminado encantando, solo es cuestión de hacer click derecho sobre el mxml sin necesidad de tener abierto el flex y compilar, y woala, se generara el archivo swf.
Eso sí es sencillo.
Los pasos para su instalación son los siguientes:
1. Bajar estos archivos necesarios. 2. Dar doble click al archivo de registro (reg.reg) que esta dentro del rar. 3. Copiar el archivo mxml.bat en c:\
Yo espero que salgan alternativas al Flex Builder (Cómo Flexible), solo he visto por allí una, pero no me convence aun. De todas formas estoy seguro que sera así. Mientras tanto espero que esto sea algo util. A mi me ha encantado, de verdad.
Algunas veces cuando estamos generando aplicaciones empresariales o de alto nivel, los Web Services nos pueden quedar cortos en cuanto desempeño, desarrollo, e incluso depuración de los mismos. Recordemos que los Web Services son mensajes SOAP basados en texto, y cuando la aplicación empieza a crecer en cuanto a cantidad de datos puede ser un problema para el cliente para "parsear" todo este XML y para el servidor el envio y generación del mismo. Para solventar este problema tenemos lo que conocemos como Remoting. Remoting o en nuestro caso Flex Remoting es capaz de transportar los datos con mayor eficiencia que los Web Services, ya que usa un formato binario (AMF) para transmitir datos entre el Flash Player y nuestro código en .NET. El protocolo AMF (Action Message Format) es un protocolo binario mucho mas liviano que los Web Services y en cuanto al poder y rendimiento es mucho mayor ya que podemos accesar directamente con esta tecnología a objetos remotos como dll (dynamic link libraries) construidas en .NET , es decir podemos consumir directamente los métodos que tengamos en nuestra dll,además que consume menos ancho de banda.
En este tutorial vamos a entender lo que es WebORB y sus características principales , desarrollaremos un componente (dll) para el acceso a los datos y lo daremos de alta en WebORB, una vez finalizado crearemos el front end en Flex para ver los datos.
1. Herramientas Necesarias 2. ¿Que es WebORB y para que me sirve? 3. Creación de nuestro componente en .NET 4. Front-End en Flex 5. Conclusión
Herramientas Necesarias
Para completar el tutorial con éxito necesitaremos algunas herramientas para trabajar con ellas. La primera es Visual C# 2005 Express Edition, para hacer nuestro componente o .NET dll , la segunda es WebORB versión 3.0.1.3 que es el servidor que me permitirá conectarme a mi dll y desde luego antes de instalar WebORB necesitamos instalado IIS (Internet Information Services) y por último SQL Server 2005 Express Edition . Ocuparemos la base de datos (Northwind) de ejemplo que viene en el .NET Framework 2.0 . Si no cuentas con SQL Server 2005 lo puedes hacer con Microsoft Access o con otro motor de base de datos, los conceptos son los mismos. Obviamente también Flex Builder. ¿Que es WebORB y para que me sirve?
WebORB es un servidor multiprotocolo que me permite conectar clientes Flex, Flash o AJAX a objetos .NET , es decir a dlls (dynamic link libraries) o Web Services. Esto quiere decir que mi Front -End se comunica directamente con mi Back-End. En el caso de Flex , utilizaremos el protocolo AMF3 (el cual explicamos con anterioridad y en esta versión 3 viene muy mejorado ), si utilizan Flash, estarían ocupando el protocolo AMF0. Algunas de sus características de manera sintetizada y de mayor interés para desarrolladores .NET serian la completa implementación de Flex Remoting (RPC), una implementación parcial de Flex Data Management Services (Adobe FDMS para Java parte de Flex Data Services), Seguridad ya que soporta un modelo a nivel código y a nivel servicio usando credenciales (basado en roles) que podemos controlar desde el panel de Administración (Management) o direcciones IP. Además el panel provee de una manera bastante sencilla en intuitiva el acceso seguro por namespace, clase o nombre de método, Flex Messaging Service (ya sea para publicación/subscripción o push de datos) basado en el protocolo RTMP (Real Time Message Protocol). En el momento de estar escribiendo este tutorial liberaron la versión 3.1.0.2, la cual ya me permite también trabajar con VB.NET, lo cual no podía en versiones anteriores porque solo codificaba con C#.
Este servidor viene en su última versión bastante completo y muy amigable para los que quieren empezar a conectar aplicaciones con Back Ends hechos en .NET, ya que cuenta con varias pestañas bastante intuitivas, donde nos dice que es WebORB y un esquema de como trabaja, otra pestaña de ejemplos ;esta parte es muy útil para desarrolladores nuevos ya que tiene además del código MXML del Front End, el código del Back (.NET) de una manera bastante bastante simple y el ejemplo funcionando, tiene otras pestañas como instalación , manejo, licencias, monitoreo, extensibilidad etc. Además cuenta con un generador de código ya sea para CAIRNGORM O ARP según sea nuestro caso y podemos descargarlo en formato zip para su posterior implementación en Flex.
Web Orb
Para descargar WebORB diriganse al siguiente link (recuerden que necesitamos instalado WebORB en nuestras computadoras para completar con éxito el tutorial) Creación de nuestro componente en .NET
Vamos a crear nuestro componente de acceso a datos en Visual C# 2005 Express Edition. Lo primero que debemos hacer es dirigirnos a Archivo > Nuevo > Proyecto y Seleccionaremos Biblioteca de Clases. En la parte inferior, le asignaremos el nombre al componente y se llamara mifdll. Ustedes si así lo desean pueden llamar al componente como gusten. Primero empezaremos con el viejo método de hola mundo, lo que haremos es crear una clase y dentro de esta un método que me devuelva una simple cadena. El código debe verse de esta manera:
Por ahora es lo único que necesitaremos. Ahora vamos a realizar la compilación o generación del proyecto. Nos dirigimos al Menú Generar > Generar Solución o podemos con la tecla F6 efectuar esta tarea.
Generar solucion
Una vez generada nuestra dll vamos a hacer el "Deploy" en WebORB. Dirijámonos al panel de WebORB esto lo podemos hacer dirigiéndonos a Inicio > Programas > WebORB > WebORB Management Console. Una vez la consola abierta , seleccionaremos el panel de Deployment.
Consola webORb
Nos aparecerán debajo dos listas, la primera son los directorios virtuales en IIS y la segunda los directorios virtuales para WebORB. Para efectos de nuestro tutorial, vamos a poner nuestra dll en el directorio de WebORB. Existen dos maneras de poner nuestro componente en WebORB , la primera es manual es decir copiamos al directorio bin de nuestro sitio nuestro componente en .NET (en este mismo panel existe la descripción por si quieren hacer la operación manualmente) o con el botón "Deploy assembly". Demos click en "Deploy assembly". Ahora seleccionemos donde se encuentra nuestra dll y empezara a subir la dll al directorio de WebORB. Recuerden esto es solo por caso de ejemplo nosotros podemos tener nuestro directorio virtual.
Ahora probemos nuestro método, quizás se dirán bueno pues es hora entonces de hacer el Front-End. A decir verdad no ya que directamente en WebORB podemos probar nuestra dll!!!, ¿increible no?. Lo que haremos es lo siguiente. Me voy dirigir a la pestaña que se llama Management> Services y debajo de esta tengo una lista donde están los "Deployed Services", si no aparece nuestro componenet o dll lo que haremos es en esta lista , dar click en el botón de "Refresh" que se encuentra debajo de la misma. Nos deberá aparecer nuestro componente con sus métodos.
En esta lista puedo ver todos mis Servicios dados de alta y como mencionamos con anterioridad todos los métodos que estos tienen.
Web Orb Management
Probemos nuestro componente demos click en el método diHola y del lado derecho tengo activada una pestaña llamada Test Drive. Del lado derecho tengo un botón para invocar el servicio. Demos click en él y obtendremos lo siguiente:
Test drive
Si todo lo hicimos correctamente nos aparecerá despues de invocar el método el tipo y el valor de nuestra clase. Ahora vamos a implementar el método para el acceso a nuestra base de datos, eso nos implica que tenemos que modificar nuestro componente. Regresemos a Visual C# Express Edition y codifiquemos lo siguiente:
En el código tenemos un método que se llama obtenClientes y que me regresa un DataTable y si nos damos cuenta es un poco parecido cuando vimos el tema de WebServices, es decir un método que me regresa un DataTable con la tabla "Customers". Lo que sigue es que compilemos nuestro componente y hagamos de nuevo el deploy en WebORB.
TIP Como tip lo que les sugiero para no tener que estar haciendo el deploy cada vez en WebORB, en nuestro proyecto vamos a generar el resultado directamente en WebORB en la carpeta bin, es decir la dll compilada directamente en WebORB, esto lo conseguimos dirigiéndonos en Visual C# en el Menú Proyecto, Propiedades.. y posteriormente en la pestaña de Generar, del lado derecho nos aparece hasta abajo un recuadro de resultado. Demos click en Examinar y para efectos de nuestro tutorial seleccionaremos la carpeta de WebORB>bin.
Invocar
Listo ahora cada vez que compilemos nuestra dll estará directamente en WebORB.
Ahora probemos nuestro fabuloso componente en WebORB, lo que haremos es dar click en Services y daremos un click en el botón de abajo de Refresh. Una vez que hemos dado refresh nos aparecerá nuestro nuevo método que me regresara mi tabla de Datos.
Nuevo metodo
Ahora vamos a probar nuestro método. Si todo esta correcto demos click en el botón de Invoke y nos aparecerá en la parte inferior una carpeta con el Nombre de Result. Demos click en la carpeta y aparecerá en la parte de abajo un DataGrid con todos los registros de nuestra consulta. ¿Maravilloso no creen?
DataGrid
Ok listo, ahora vayamos a Flex a elaborar el Front-End, aunque a decir verdad WebORB también nos podria generar este trabajo , es decir el código mxml para ya no tener que escribir tanto; la intención del tutorial es que lo hagamos todo por el camino "largo" y después en los siguientes tutoriales utilizar todas las bondades de WebORB. Pero si quieren dar un vistazo solamente seleccionen en services la clase AccesoDatos y vean la pestaña Code Generator. El code Generator me generará dependiendo lo que necesite el código del cliente, e incluso con CAIRNGORM O ARP o simplemente Flex Remoting y podré descargarlo para su posterior implementación. Front-End en Flex
Ahora lo que haremos será crear nuestro front-end en Flex. Lo que haremos es dirigirnos al Menú File> Flex Project y posteriormente Flex Data Services. Seleccionaremos la opción compilar la aplicación local en FLex Builder.
Fp
Daremos click en siguiente y desactivaremos la casilla use default local y seleccionaremos la carpeta de WebORB, todo se verá como muestra la figura
localhost weborb
Una vez hecho esto codifiquemos en Flex Builder el siguiente código:
Este código que tenemos aquí tiene una etiqueta con un botón que llamará al servicio remoto y posteriormente desplegará los resultados en el DataGrid, así que analicemos pues un poco el código para ver lo que esta sucediendo. Primeramente tengo una función llamada obtenDatosCliente que será activada o llamada cuando de click en el botón de Invocar. Lo más importante que debemos saber es que en la línea 26 teniendo declarado miobjetoRemoto y dentro del constructor el id del servicio llamado "GenericDestination", aunque este id no lo hemos asignado en la parte de Remoting o Flex Remoting, lo que haremos ahora es abrir el archivo remoting-config.xml que se encuentra en C:\Inetpub\wwwroot\weborb30\WEB-INF\flex y se tendrá que ver como lo tenemos a continuación.
Nota Importante: Algunas veces cuando agregamos mas destinos o nodos o incluso cambiamos el nombre de nuestro destino para identificar nuestros componentes, y los invocamos nuevamente desde flex por alguna razón no funciona. La solución es simple, lo que debemos hacer es reiniciar la aplicación en IIS y listo. Como buena práctica definan bien sus nombres de destino para que no tengan que estar reiniciando en caso de que cambien el nombre :roll:
Una vez asignado el id en remoting-config.xml , este id es como flex se tiene que referir o identifica el nombre del servicio y en source es el espacio de nombres completo junto con la clase que vamos a invocar. Si tenemos algún error o el nombre no corresponde al momento de invocar nos aparecerá el error. Este error se hará visible gracias a que tenemos un listener que me manejara cualquier evento Fault y lo mostrara en una ventana de error (línea 35 ) y una función que precisamente me procesara el error.
Por último tenemos un método que me procesa los resultados, tenemos un datagrid con un id de "miDG", el cual en la función de resultados le asignamos un data Provider que es igual a los resutlados como ArrayCollection.
FlexGrid Conclusión
WebORB me va a permitir conectar a mi Front-End en Flex con mi backEnd en .NET. Es por demás decir que WebORB son los Flex Data Services para .NET. Cuando generamos aplicaciones de alto rendimiento esta es la solución más viable (Les sugiero ver el post que Edgar Rivera puso en cuanto a rendimiento se refiere entre distintas plataformas, AJAX, Flex Remoting, etc pulsando aqui WebORB además tiene otras aplicaciones como servidor RTMP, ya que puedo hacer streaming etc. En el siguiente tutorial vamos a ver un manejo de datos con lo que conocemos WebORB Data Management.
He aqui que comienza la nueva saga de WebORB! :cool:
