Suscribirse a webrecursos.es! rss  
 
Mar
18
     
Componentes Flex [Web recomendada]
Posted (antoniohernandez) in Flex, Webs de interés on Marzo-18-2009

Vagando por Internet me he encontrado con esta web con decenas de componentes para Adobe Flex. Flexbox se trata de un directorio cargado de componentes disponible para desarrolladores Flex.  Lo único que piden a cambio es evidentemente que hagas referencia al autor en el código. Web recomendada para todos aquellos que no sepan muy bien que se puede hacer con esta tecnología.

flexbox Componentes Flex [Web recomendada]

URL: http://flexbox.mrinalwadhwa.com/
(0) Comments    Read More   


 
Feb
20
     
itemRenderer en Flex
Posted (antoniohernandez) in Flex on Febrero-20-2009

flex3 itemRenderer en Flex En esta ocasión me voy a basar en un ejemplo que he tenido que realizar hace unos dias.  El problema era que queriamos insertar una imagen en una columna de nuestro DataGrid pero no quedaba la cosa ahí. Si la entrada no dispone de imagen, queremos que cargue una imagen  por defecto y si tiene imagen pues que cargue esta. Para ello la columna llamada “Imagen” hace uno de la propiedad itemRenderer. Lo primero es ver como quedaría nuestra columna Imagen:

 

1
2
<mx:DataGridColumn headerText="Imagen" dataField="imagen"
width="80" wordWrap="true" itemRenderer="{new ClassFactory(ImagenNoticias)}"  />

 ImagenNoticias es en nuestro caso, el componente mxml que queremos que aparezca en nuestra columna.  Como todos sabreis dataField=”imagen” es la propiedad del objeto instanciado en la fila dle grid.

Visto esto vamos a ver como quedaría nuestro fichero  ImagenNoticias.mxml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="80"
    horizontalAlign="center" verticalAlign="middle"  creationComplete="init()">
        <mx:Script>
            <![CDATA[
                import mx.events.FlexEvent;
                import mx.controls.Image;  

            public function init() : void {
               
                var value   : NoticiaVO = (data as NoticiaVO);
                var img     : Image = new Image();
                   
                img.width=  75;
                img.height= 75;
               
                   /*realizamos el tratamiento*/
                   
                this.addChild(img);
               
                this.addEventListener(FlexEvent.HIDE,hideme);
                this.addEventListener(FlexEvent.SHOW,showme);
            }
                private function showme(evt:FlexEvent):void{
                    var item:ImagenNoticias = evt.target as ImagenNoticias;
                    var value:NoticiaVO = data as NoticiaVO;
                    var img     : Image = new Image();

                                /*realizamos el tratamiento*/
               
                this.addChild(img);
                }  

                private function hideme(evt:FlexEvent):void{
                   
                                       /*realizamos el tratamiento hide me*/
                    item.removeAllChildren();
                }
   
            ]]>
        </mx:Script>   
</mx:HBox>

 

En nuestra función init() implicitamente el objeto data trae toda la información de la fila que realiza la llamada al componente, en nuestro caso de tipo NoticiaVO.  Es aquí donde podremos realizar el tratamiento a los datos que necesitemos. Las funciones showme() y hideme() son  necesarias en nuestro caso ya que el grid en nuestro polling de objetos solo mantiene los que son visibles. De esta forma tendremos que ir instanciando y eliminando los objetos en función de si se ven o no. Finalmente así quedaría:

up itemRenderer en Flex

(0) Comments    Read More   


 
Feb
17
     
Upload de imagenes en Flex
Posted (antoniohernandez) in Flex on Febrero-17-2009

flex3 Upload de imagenes en Flex Buscando por la web como hacer un upload de imagenes en Flex me encontre con el componente realizado por Christian Hernández. Basandome en éste, he realizado una modificación de su upload de imagenes realizando sobre él cambios estéticos y funcionales.

El componente llama a un servicio en php que será el encargado de subir la imagen. Teneis que tener especial cuidado con Apache ya que puede bloquear el acceso a este archivo. Creo que el ejemplo viene bien claro así que no hace falta comentarlo mucho. Os dejo un enlace para que os lo descargueis. Cualquiér duda que tengais o problema en su implantación dejen un mensaje y os ayudare en la medida de lo posible.

upload Upload de imagenes en Flex

URL de descarga : uploadflexupdated (3kb)
(4) Comments    Read More   


 
Ene
29
     
Tratamiento de ficheros en AIR [Flex - AIR]
Posted (antoniohernandez) in Flash, Flex on Enero-29-2009

air Tratamiento de ficheros en AIR [Flex AIR]Si algo caracteriza a Adobe AIR es la posibilidad de poder acceder y tratar los ficheros y directorios almacenados en tu pc.  Pero muchos os preguntareis ¿Que es AIR? AIR es un runtime que posibilita la ejecución de aplicaciones web fuera del su entorno habitual, el browser, y les proporciona los medios necesarios para que puedan integrarse completamente con el sistema operativo, convirtiéndose en “aplicaciones de primera clase” con exactemente los mismos “derechos” y capacidades que las aplicaciones nativas, con las ventajas propias de las aplicaciones web.

 

AIR dispone, digamos, de dos motores de renderizado/ejecución que le permiten gestionar aplicaciones HTML, JavaScript (AJAX), Flex y Flash.

 

Una vez sabido que es AIR vamos a poner un ejemplo de como podemos abrir un fichero en AIR almacenado en nuestro pc y tratar el contenido de este. El ejemplo es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
public function selectFichero():void{

var fichero : File = new File(); // Creacion de una variable de tipo fichero
fichero.addEventListener(Event.SELECT,ImportarFichero); //funcion que lanzamos si seleccionamos un archivo
fichero.addEventListener(Event.CANCEL,CancelarImportacion);
fichero.browseForOpen("Seleccione fichero a importar ...");
}

public function CancelarImportacion(evt: Event):void{
fichero.removeEventListener(Event.SELECT,ImportarFichero);
fichero.removeEventListener(Event.CANCEL,CancelarImportacion);
}

public function ImportarFichero(evt: Event):void{

fichero.removeEventListener(Event.SELECT,ImportarFichero);
fichero.removeEventListener(Event.CANCEL,CancelarImportacion);
var stream : FileStream = new FileStream();
stream.open(fichero,FileMode.READ);

var filestream: String = stream.readUTFBytes(stream.bytesAvailable);
var lineas:Array = fstream.split("\n"); //leeremos linea por linea
if(stream.bytesAvailable &gt;0){

for(var cnt:Number=0;cnt&lt;lineas.length-1;cnt++){
var cadena:String = lineas[cnt] as String;
trace(cadena); // mostramos el fichero linea a linea
}
stream.close();
}
else
Alert.show("Fichero vacio!","Error");
}

 
El ejemplo viene bien comentado así que creo que no tendreis  problemas en entenderlo. Lo que si esta es muy mal tabulado pero el editor no me da mucha opción. Para abrir un fichero sólo tendreis que llamar a la función SelectFichero(); y se os abrirá un popup típico de Windows para seleccionar que fichero desea abrir.
(0) Comments    Read More   


 
Ene
21
     
Barra de progreso [Flex]
Posted (antoniohernandez) in Articulos on Enero-21-2009

flex3 Barra de progreso [Flex]Después de un tiempo sin postear algo nuevo sobre Flex, hemos pensado en ir añadiendo asiduamente una explicación sencilla de cada uno de los componentes incluidos en Flex. Por este motivo voy a Empezar hoy explicando como funciona un ProgressBar en Flex.

Una barra de progreso podremos utilizarla cuando estemos realizando un proceso en segundo plano y queremos que el usuario  espere sabiendo cuanto tardará esta espera o no. Podremos configurar la barra de progreso para que sea indeterminada o al estilo clásico que todos conocemos.

 

Asi quedaría la barra cuando no la accionamos:

barra0 Barra de progreso [Flex]

 

Asi quedaría cuando accionamos la barra de progreso:

barra1 Barra de progreso [Flex]

 

 

El código para la creación de un ProgressBar seria el siguiente: 

 

1
2
3
4
<mx:ProgressBar
     id="progreso" x="30.75" y="45.7" width="394.5" label="PROGRESO"
     indeterminate="true" labelPlacement="center" height="24.3"
/>

 

Donde:

label. Es la etiqueta que aparece en el centro de la barra de progreso.

labelPlacement. El lugar donde queremos que apareca el label.

indeterminate. si es true la barra sera indeterminada y si es false ira rellenandose de manera incremental.

 

Sabiendo esto es fácil hacer uso de la barra de progreso:

 

Si la usamos en modo indeterminado basta con poner indeterminate= true -> REALIZAMOS PROCESO -> indeterminate= false. De esta forma, mientras se este realizando el proceso la barra quedará mostrando el efecto de carga.

 

Si usamos la barra en modo determinado tendremos que determinar el numero de pasos que completarán nuestra barra de carga. por ejemplo: Queremos descargar 100 archivos de internet y vamos a colocar una barra de carga mientras se descargan los 100 archivos. Entonces nuestra barra la dividiremos en 100 partes y cada vez que descarguemos una de estos ficheros pues avanzaremos la barra de carga.
(1) Comment    Read More   


 
Dic
31
     
5 Páginas que te ayudarán con el aprendizaje de Flash / ActionScript
Posted (antoniohernandez) in Flash, Flex, Webs de interés on Diciembre-31-2008

Adobe Flash es una herramienta muy muy potente y usada por su facilidad a la hora de crear animaciones ya sea para webs, aplicaciones, cds interactivos, presentaciónes, … A menudo nos encontramos con animaciones realizadas en flash que nos dejan soprendidos pero no sabemos como o que pasos hay que dar para hacer algo así. hoy os pongo 5 websites que os ayudará mediente ejemplos, tutoriales, documentación,… a crear esas animaciones que tanto os gustaria hacer pero os cuesta a veces desarrollar.

 

1. kirupa.com

10 01 kirupa dot com 5 Páginas que te ayudarán con el aprendizaje de Flash / ActionScript

kirupa.com excelentes tutoriales en flash muy bien redactados.

 

2. gotoandlearn.com

10 02 gotoandlearn 5 Páginas que te ayudarán con el aprendizaje de Flash / ActionScript

Excelentes video tutoriales.

 

3. gotoAndPlay()

10 03 gotoandplay 5 Páginas que te ayudarán con el aprendizaje de Flash / ActionScript

goToAndPlay() Recursos para desarrolladores de juegos en flash.

 

4. Flash Kit

10 05 flash kit 5 Páginas que te ayudarán con el aprendizaje de Flash / ActionScript

flashkit no podia ser menos. Una comunidad dedicada intengramente a Adobe Flash con mas de 600.000 miembros. Aquçi puedes descargar desde proyectos flash completos hasta el mas insignificante sonido.

 

5. Flash Perfection

10 09 flashperfection 5 Páginas que te ayudarán con el aprendizaje de Flash / ActionScript

Flash perfection Aunque no suelo visitarla, la nombro aqui. Este website tiene una gran colecciçon de tutoriales para flash.
(0) Comments    Read More   


 
Dic
22
     
Usando un itemRenderer en un Datagrid [FLEX]
Posted (admin) in Flex on Diciembre-22-2008

flex3 Usando un itemRenderer en un Datagrid [FLEX]Os realizo un pequeño ejemplo de como incrustar un itemrenderer en un datagrid sin muchos problemas. En el ejemplo lo que hemos realizado es dependiendo del valor pasado por una variable booleana que venia a través del dataProvider vamos a mostrar una imagen que representará true o false.  Para ello vamos a realizar un itemrendered dentro de la columna de la forma que mostramos a continuación.

1
2
3
4
5
6
7
8
9
<mx:DataGridColumn headerText="Descargado" width="70">
    <mx:itemRenderer>
    <mx:Component>
    <mx:HBox horizontalAlign="center">
    <mx:Image source="{data.descargado ? 'assets/iconos/tick.png' : 'assets/iconos/cross.png'}"/>  
    </mx:HBox>
    </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>

data.descargado es la variable que nos llega a través del dataProvider y que obiamente debe estar definida en la aplicación. De esta manera si la variable descargado es igual a true se nos mostrará la imagen “V” y si esta a falso se nos mostrará la imagen “X”.

 

 

imagenknstudios Usando un itemRenderer en un Datagrid [FLEX]
(0) Comments    Read More   


 
Dic
20
     
Ejemplo de Login haciendo uso de Cairngorm
Posted (admin) in Flex on Diciembre-20-2008

flex3 Ejemplo de Login haciendo uso de CairngormPara conocer Cairngorm me mire este ejemplo que encontre en MadeInFlex y la verdad que me vino fenomenal. El ejemplo consume servicios sobre AMFPHP 1.9 para poder mostrar también como pasar objetos tipados de Flex a PHP y viceversa.

Cairgornm a mi personalmente me ha facilitado el trabajar en equipo y rehusar código de manera fácil y ampliar programas en muy poco tiempo. Os pongo una imagen de la arquitectura  de Cairngorm.

Descargar ejemplo: Ejemplo Cairngorm 2.2 con amfphp 1.9 (Login)

cairngorm 300x230 Ejemplo de Login haciendo uso de Cairngorm
(0) Comments    Read More   


 
Dic
12
     
Contador decremental en ActionScript 3 [FLEX]
Posted (antoniohernandez) in Flex on Diciembre-12-2008

flex3 Contador decremental en ActionScript 3 [FLEX]Pues he realizado hace unos dias un contador que ira decrementando segundo a segundo ejecutando una función cuando este llega a 00:00:00. El contador cuenta con funciones de start, pausa y reset teniendo así pleno control sobre el. Es mu fácil de implementar.

Descargar Contador Decremental AS3
(0) Comments    Read More