Sirven para acceder diréctamente desde ActionScript (bueno, para según qué cosas hace falta código del lado del servidor) a servicios conocidos como YouTube, Facebook, Flickr, etc. Os recomiendo que descarguéis los archivos (normalmente son repositorios de subversion) y que vayáis probando. Suelen ser bastante sencillos en cuanto a funciones básicas.
ATI Drivers para Ubuntu 8.10 Intrepid Ibex y solución de Video Enviado por eclipse_v el Mié, 22/10/2008 - 22:14 Intrepid Ibex (8.10)
No se quien empezo el rumor y si sera verdad o cierto no me corresponde pero (luego de mucho de no escribir nada) vengo a dar salida a un problema existencial "ATI". Claro que no me refiero a tí si no a una de las empresas que generan tarjetas graficas en conjunto con AMD (quien la compro hace ya un buen tiempo), pero quien quiere saber de historia, el problema es el siguiente "ATI trae problemas a la hora de instalarse en Ubuntu 8.10 Intrepid Ibex" el cual saldra en pocos dias. En mi primera prueba de este sistema, hice un mal visto upgrade de mi sistema anterior, solo para no perder los programas que tenia, sin embargo hasta el momento no he tenido mayor rollo, pero cuando lo utilice por primera vez, siendoque ya tenia mi sistema como lo queria incluido mi ATI Radeon Mobility X1400 ya bien configurada, me muestra una linda pantalla de error de xorg.Se imaginan mi sorpresa creyendo que ya en futuras distros de este, no tendria que ver nuevamente estos dramas. Empece nuevamente a instalar los drivers privativos de ATI en su version 8.10 (que coincidencia XD ) procurando utilizar el nombre de intrepid (las sintaxis las mostrare al final), luego de reiniciar y ver que nada avia ocurrido un simple aticonfig --initial basto en cojunto con el cambio en xorg.conf en la seccion Devices donde decia "fglrx" por "ati". no fue tan complicado. Luego para variar no suspendia ni hibernaba... ( U_U pan de cada formateo y reintalación de sistema ), se modifique siertos atrivutos en el archivo acpi-support y con ello supuestamente todo bien, pero no... Aun sin hibernar. Para ello solo cambie valores del swap en fstab y initramfs-tools/conf.d/resume solo poniendo el la direccion de la partición swap, luego solo active este ultimo con update-initramfs -u y listo.
Debo agradecer a PaBLoX de la pagina http://glatelier.wordpress.com por la guia ya que sin ella dificilmente hubiera podido hacer andar los drivers bien, que conste esta guia esta basada en Gusty y Hardy. Ahora como hacemos esto (sacado de la guia anterior)...
1.- Antes de hacer cualquier cosa corrovorar que tengamos todas las aplicaciones necesarias.
13.5.- Entramos a /etc/initramfs-tools/conf.d/resume
sudo gedit /etc/initramfs-tools/conf.d/resume
13.6.- Y el valor donde esta RESUME=... lo cambiamos por la direcion de la swap.
RESUME=/dev/¿particion?
13.7.- Finalmente (y luego de ello preferentemente reiniciar).
sudo update-initramfs -u
Sin embargo quedaba algo pendiente... Problema con reproduccion de Video...
Entren a una consola y ejecuten "gstreamer-properties" (¬¬ sin las comillas), se van a la pestaña de video En Salida predeterminada > Complemento: cambian la ComboBox por "X Window System (No Xv)" asi Totem estara listo, y todas las aplicaciones que usen gstreamer. Para VLC. Ejecuta VLC > Opciones -> Preferencias > Selecciona Video y luego Módulos de Salida> Click en la pequeña caja que dice Opciones Avanzadas > Selecciona “Salida de Video X11? > Guarda los cambios y sale del programa. Con ello todo referente al video estara solucionado...
n_n espero que esto solucione el resto de las dudas...
Con eso estariamos listo para hacer funcionar Ubuntu 8.10 Intrepid Ibex con cualquier placa ATI sobre la 9250. Please comenten resultados y descubrimientos para asi mejorar este tutorial.
Solo puedo decir, que desde que he empezado a programar con Cairngorm soy una persona feliz :) es ideal para trabajo en grupo, organizado y accesible. ¿Qué más se puede pedir?
El mar, 03-06-2008 a las 13:14 -0700, maxonico escribió:
> Hola amigos, me gustaria saber si es posible obtener el titulo de la > cancion que se esta reproduciendo por shoutcast a traves de Flex 3, el > codigo que tengo es simple:
> var song:SoundChannel; > var request:URLRequest = new URLRequest("http://miradio:8000"); > var soundFactory:Sound = new Sound(); > soundFactory.addEventListener(Event.ID3, id3Handler); /*este evento no > se dispara nunca*/
> soundFactory.load(request); > song = soundFactory.play();
public static void createChart(Worksheet worksheet) { _Worksheet ws = worksheet.getPeer(); IUnknown disp = ws.chartObjects(Variant.createUnspecifiedParameter(),new Int32(0)); ChartObjects objects = new ChartObjectsImpl(disp);
DoubleFloat left = new DoubleFloat(500); DoubleFloat top = new DoubleFloat(100); DoubleFloat width = new DoubleFloat(300); DoubleFloat height = new DoubleFloat(300);
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.
