Random Post: Bienvebido al Blog de ZonaDevelop
RSS .92| RSS 2.0| ATOM 0.3
  • Home
  • About
    •  

    Descargar archivo en Flex usando la clase FileReference

    September 12th, 2009

    Bueno una de las preguntas mas frecuentes en las aplicaciones RIA's es si ¿se pueden descargar archivos atravez de ellas? y la respuesta a esa pregunta es sip! si se puede,
    Veamos un ejemplo de como descargar archivos con flex.

    Vamos a descargar el archivo Zip que contiene el codigo fuente de este ejemplo.

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    3.         layout="vertical"
    4.         verticalAlign="middle"
    5.         backgroundColor="white"
    6.         creationComplete="init();" viewSourceURL="srcview/index.html">
    7.  
    8.     <mx:Script>
    9.         <![CDATA[
    10.             import mx.controls.Alert;
    11.             import mx.collections.ArrayCollection;
    12.             import flash.net.FileReference;
    13.  
    14.             [Bindable]
    15.             [Embed('assets/disk.png')]
    16.             private var diskIcon:Class;
    17.  
    18.             [Bindable]
    19.             private var arrColl:ArrayCollection;
    20.  
    21.             /* URL del archivo que vamos a descargar. */
    22.             private const FILE_URL:String = "http://zonadevelop.netau.net/wp-content/examples/post_52/srcview/DescargarArchivo_Flex.zip";
    23.  
    24.             private var fileRef:FileReference;
    25.             private var urlReq:URLRequest;
    26.  
    27.             private function init():void {
    28.                 /* Inicializamos en ArrayCollection que guardara los eventos */
    29.                 arrColl = new ArrayCollection();
    30.  
    31.                 /* Creando la referencia al archivo de la url en la variable FILE_URL */
    32.                 urlReq = new URLRequest(FILE_URL);
    33.  
    34.                 fileRef = new FileReference();
    35.                 fileRef.addEventListener(Event.CANCEL, doEvent);
    36.                 fileRef.addEventListener(Event.COMPLETE, doEvent);
    37.                 fileRef.addEventListener(Event.OPEN, doEvent);
    38.                 fileRef.addEventListener(Event.SELECT, doEvent);
    39.                 fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, doEvent);
    40.                 fileRef.addEventListener(IOErrorEvent.IO_ERROR, doEvent);
    41.                 fileRef.addEventListener(ProgressEvent.PROGRESS, doEvent);
    42.                 fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doEvent);
    43.             }
    44.  
    45.             private function doEvent(evt:Event):void {
    46.                 /* Creamos un referencia al objeto FileReference */
    47.                 var fr:FileReference = evt.currentTarget as FileReference;
    48.  
    49.                 /* Agregamos los eventos al arreglo y luego a la grilla en orden del tipo de evento */
    50.                 arrColl.addItem({data:arrColl.length+1, type:evt.type, eventString:evt.toString()});
    51.  
    52.                 try {
    53.                     /* Actualizamos en Modelo. */
    54.                     fileRefModel.creationDate = fr.creationDate;
    55.                     fileRefModel.creator = fr.creator;
    56.                     fileRefModel.modificationDate = fr.modificationDate;
    57.                     fileRefModel.name = fr.name;
    58.                     fileRefModel.size = fr.size;
    59.                     fileRefModel.type = fr.type;
    60.                     /* Mostrando el TextControl. */
    61.                     txt.visible = true;
    62.                 } catch (err:*) {
    63.                     /* ... */
    64.                 }
    65.             }
    66.  
    67.             private function downloadSourceCodeZip():void {
    68.                 /* Borramos el contenido del array collection. */
    69.                 arrColl = new ArrayCollection();
    70.                 /* Ocultamos el Text control. */
    71.                 txt.visible = false;
    72.                 /* Empezamos la descarga. */
    73.                 fileRef.download(urlReq);
    74.             }
    75.  
    76.             private function showAlert(item:Object):void {
    77.                 Alert.show(item.eventString, item.type);
    78.             }
    79.         ]]>
    80.     </mx:Script>
    81.    
    82.     <!-- Creamos el modelo para los datos de los eventos -->
    83.     <mx:Model id="fileRefModel">
    84.         <file>
    85.             <creationDate>{""}</creationDate>
    86.             <creator>{""}</creator>
    87.             <modificationDate>{""}</modificationDate>
    88.             <name>{""}</name>
    89.             <size>{""}</size>
    90.             <type>{""}</type>
    91.         </file>
    92.     </mx:Model>
    93.  
    94.     <!-- Boton para descargar el archivo -->
    95.     <mx:Button id="downloadBtn" label="Descarga el codigo fuente aqui!" icon="{ this.diskIcon }" click="downloadSourceCodeZip()" toolTip="{FILE_URL}" height="40" />
    96.    
    97.     <!-- Grilla que musra los eventos -->
    98.     <mx:DataGrid id="debug" dataProvider="{arrColl}" width="{downloadBtn.width}" rowCount="5" rowHeight="22" itemClick="showAlert(event.currentTarget.selectedItem)">
    99.         <mx:columns>
    100.             <mx:DataGridColumn dataField="data" headerText="#" width="20" />
    101.             <mx:DataGridColumn dataField="type" headerText="Type" showDataTips="true" dataTipField="eventString" />
    102.         </mx:columns>
    103.     </mx:DataGrid>
    104.  
    105.     <mx:Text id="txt" condenseWhite="true" visible="false">
    106.         <mx:text>
    107.         creationDate: {fileRefModel.creationDate}
    108.         creator: {fileRefModel.creator}
    109.         modificationDate: {fileRefModel.modificationDate}
    110.         name: {fileRefModel.name}
    111.         size: {fileRefModel.size}
    112.         type: {fileRefModel.type}
    113.         </mx:text>
    114.     </mx:Text>
    115.  
    116. </mx:Application>

    Luego de revisar el codigo nos quedaria algo asi:

    No Comments » | Adobe Flex 3 | Permalink
    Posted by Tomás Tapia Silva

    Mostrar datos de un XML en un DataGrid

    September 12th, 2009

    Bueno en este ejemplo voy a mostrar un código simple pero bien explicativo sobre como cargar e incluir datos de un archivo XML dentro de un DataGrid cuando este compile.

    A nuestro archivo XML le vamos a llamar: dataXML.xml

    1. <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
    2. <!-- http://zonadevelop.netau.net/?p=38 -->
    3. <personas version="1">   
    4.  
    5.     <persona>
    6.         <nombre>Perico</nombre>
    7.         <apellido>Lospalotes</apellido>
    8.         <edad>35</edad>
    9.         <telefonos>
    10.             <telefono>
    11.                 <descripcion>Casa</descripcion>
    12.                 <numero>555-1234</numero>
    13.             </telefono> 
    14.             <telefono>
    15.                 <descripcion>Movil</descripcion>
    16.                 <numero>655-8456</numero>
    17.             </telefono>
    18.             <telefono>
    19.                 <descripcion>Trabajo</descripcion>
    20.                 <numero>555-7894</numero>
    21.             </telefono>
    22.         </telefonos>
    23.     </persona>
    24.    
    25.     <persona>
    26.         <nombre>Juanito</nombre>
    27.         <apellido>Perez</apellido>
    28.         <edad>21</edad>
    29.         <telefonos>
    30.             <telefono>
    31.                 <descripcion>Casa</descripcion>
    32.                 <numero>555-8521</numero>
    33.             </telefono> 
    34.             <telefono>
    35.                 <descripcion>Movil</descripcion>
    36.                 <numero>655-7536</numero>
    37.             </telefono>
    38.         </telefonos>
    39.     </persona>
    40.    
    41.     <persona>
    42.         <nombre>Pedro</nombre>
    43.         <apellido>Tovar</apellido>
    44.         <edad>41</edad>
    45.         <telefonos>
    46.         </telefonos>
    47.     </persona>
    48.    
    49. </personas>

    Y nuestra aplicación seria algo como esto:

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <!-- http://zonadevelop.netau.net/?p=38 -->
    3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    4.         layout="vertical"
    5.         verticalAlign="top"
    6.         backgroundColor="white">
    7.    
    8.     <!-- Incluimos en archivo XML -->
    9.     <mx:XML id="archivoXML"
    10.             source="assets/dataXML.xml" />
    11.    
    12.     <!-- Creamos una XMLList con nuestros datos -->
    13.     <mx:XMLListCollection id="personasXMLList"
    14.             source="{archivoXML.persona}" />
    15.     <mx:XMLListCollection id="telefonosXMLList"
    16.             source="{ dataGrid.selectedItem.telefonos.telefono }" />
    17.  
    18.     <mx:Script>
    19.         <![CDATA[
    20.            
    21.             private function telefonosLabelFunction(item:Object, column:DataGridColumn):String {
    22.                 return item.telefonos.telefono.length();
    23.             }
    24.            
    25.         ]]>
    26.     </mx:Script>
    27.  
    28.     <mx:VBox>
    29.    
    30.         <!-- Creamos una grilla para nuestros datos de personas -->
    31.         <mx:DataGrid id="dataGrid"
    32.                 dataProvider="{ this.personasXMLList }"
    33.                 width="100%"
    34.                 rowCount="{ this.personasXMLList.length + 1 }">
    35.             <mx:columns>
    36.                 <mx:DataGridColumn id="nombreCol"
    37.                         dataField="nombre"
    38.                         headerText="Nombre" />
    39.                 <mx:DataGridColumn id="apellidoCol"
    40.                         dataField="apellido"
    41.                         headerText="Apellido" />
    42.                 <mx:DataGridColumn id="nameCol"
    43.                         dataField="edad"
    44.                         headerText="Edad" />
    45.                 <mx:DataGridColumn id="telefonosCol"
    46.                         dataField="telefonos"
    47.                         headerText="Telefonos:"
    48.                         labelFunction="telefonosLabelFunction" />
    49.             </mx:columns>
    50.         </mx:DataGrid>
    51.        
    52.         <!-- Creamos otra grilla para los telefonos de ls personas -->
    53.         <mx:DataGrid id="telefonosDataGrid"
    54.                 dataProvider="{ this.telefonosXMLList }"
    55.                 width="100%"
    56.                 visible="{ this.telefonosXMLList.length> 0 }"
    57.                 rowCount="{ this.telefonosXMLList.length + 1 }">
    58.             <mx:columns>
    59.                 <mx:DataGridColumn id="descripcionCol"
    60.                         dataField="descripcion"
    61.                         headerText="Descripcion" />
    62.                 <mx:DataGridColumn id="numeroCol"
    63.                         dataField="numero"
    64.                         headerText="Numero" />
    65.             </mx:columns>
    66.         </mx:DataGrid>
    67.     </mx:VBox>
    68.  
    69. </mx:Application>

    y quedaria algo como lo siguiente:

    Saludos! :)

    No Comments » | Adobe Flex 3 | Permalink
    Posted by Tomás Tapia Silva

    Creando nuestra primera aplicacion con Flex 3

    September 9th, 2009

    Lo primero que ahi que tener claro a la hora de crear una aplicacion con adobe flex 3 es que este utiliza dos lenguajes de ensamblamiento, estos son MXML y ActionScript.

    MXML

    MXML es un simple lenguaje basado en XML que se utilizan para diseñar componentes de interfaz de usuario para las aplicaciones de Flex. También puede utilizar MXML mediante declaración para definir aspectos no visuales de una aplicación, como el acceso a a los datos del lado del servidor y enlaces de datos entre los componentes de interfaz de usuario y tu fuentes de datos.

    ActionScript

    Las etiquetas MXML corresponden a las clases o propiedades de las clases escritas en ActionScript. Al compilar su aplicación Flex, Flex analiza tus tags escritas en MXML y genera las clases de ActionScript correspondientes.

    Ahora ya que tenemos una noción de lo que son estos lenguajes vamos a ver algunos ejemplos de ellos:

    MXML

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <mx:Application
    3.     xmlns:mx="http://www.adobe.com/2006/mxml"
    4.     horizontalAlign="center" verticalAlign="center">
    5.  
    6.     <mx :Button id="boton1" label="Este es un boton!" />
    7. </mx:Application>

    esto se vería así:
    GettingStartedMXML

    ActionScript

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <mx:Application
    3.      xmlns:mx="http://www.adobe.com/2006/mxml"
    4.      creationComplete="creationCompleteHandler();"
    5.      width="300" height="80">
    6.  
    7.     <mx:Script>
    8.           <![CDATA[
    9.              import mx.controls.Button;
    10.              import mx.events.FlexEvent;
    11.              private var myButton:Button;
    12.              private function creationCompleteHandler():void
    13.              {
    14.                  // Create a Button instance and set its label
    15.                  myButton = new Button();
    16.                  myButton.label = "I'm a button!";
    17.                  // Get notified once button component has been created and processed for layout
    18.                  myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);
    19.                  // Add the Button instance to the DisplayList
    20.                  addChild (myButton);
    21.              }
    22.              private function buttonCreationCompleteHandler ( evt:FlexEvent ):void
    23.              {
    24.                  // Center the button
    25.                  myButton.x = parent.width/2 - myButton.width/2;
    26.                  myButton.y = parent.height/2 - myButton.height/2;
    27.              }
    28.          ]]>
    29.  </mx:Application>

    esto se veria asi:
    GettingStartedMXML

    Ahora que ya tenemos unos ejemplos de como es la sintaxis de estos lenguajes

    vamos a construir nuestra aplicación "Hola Mundo Flex"

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <mx:Application     xmlns:mx="http://www.adobe.com/2006/mxml"     horizontalAlign="center" verticalAlign="middle"     width="300" height="160">
    3.     <mx:Panel title="My Application">
    4.         <mx :Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    5.     </mx:Panel>
    6. </mx:Application>

    Definicion:

    1. En la primera linea vemos la etiqueta que define a un archivo xml comun.
    2. en la segunda linea vemos la apertura de la etiqueta <mx:Application> la cual da comienzo a nuestra aplicación y contendrá todos nuestros controles y contenedores secundarios.
    3. en la tercera, cuarta y quinta linea nos encontramos con las propiedades de la etiqueta <mx:Application>, las cuales son:
      • xmlns:mx: definimos el esquema que utilizara nuestro mxml.
      • horizontalAlign: con esta propiedad le daremos posicionamiento horizontal a nuestro contenido.
      • verticalAlign: propiedad que da posicion vertical a nuestro contenido.
      • width: el ancho que tendra nuestra aplicacion.
      • height: alto que tendra nuestra aplicacion.
    4. Luego de esto tenemos a otro contenedor llamado "Panel" o <mx:Panel> el cual es como una típica ventanita de windows con la diferencia que esta es trasparente si no se le da ningun color o skin adicional.
    5. dentro de la etiqueta <mx:Panel> tenemos la etiqueta <mx:Label> la cual nos permite mostrar texto en nuestra aplicacion. Con la propiedad "text" podemos escribir nuestro texto a mostrar.

    Por ahora creo que esto cumple una introduccion a los lenguajes que se utilizan con Flex 3 espero se entendiera y si les gusta pueden ver mas información en las siguientes paginas:

    Saludos!! :)

    PD: Claramente Flex es gringo y por lo tanto su documentación y los libros que se puedan encontrar son todos en ingles, ahí muy pocas cosas en español por eso intentare ir escribiendo muchas cosas para que halla material en español.

    No Comments » | Adobe Flex 3 | Permalink
    Posted by Tomás Tapia Silva

    10 razones para usar PHP

    September 9th, 2009

    Este es un articulo que leí alguna vez y lo encontré muy interesante para saber por que diablos es tan popular y por que debemos trabajar con PHP.

    1.- La Comunidad PHP
    PHP tiene una comunidad muy grande de desarrolladores, existen miles de lugares donde se pueden encontrar: documentación, tutoriales, ejemplos de código, foros. Si se tiene un problema con PHP puedes encontrar la respuesta en muchos sitios en donde los usuarios comparten el conocimiento adquirido en el proceso de desarrollo.

    2. Aprender PHP es fácil
    PHP es fácil de aprender comparado con otros lenguajes de programación. El lenguajes es semejante a C y Java pues la sintaxis primaria esta basada en Perl. Además si conoces Javascript o ActionScript verás la semejanza entre estos lenguajes por ejemplo en sus estructuras de control. Otro punto es que PHP tiene librerías especializadas en determinados trabajos por lo cual solo necesitas conocer la sintaxis, aplicarla y lograrás grandes resultados.

    3. Rendimiento
    El rendimiento de PHP es muy bueno y verdaderamente eficiente, utilizando un servidor modesto puedes atender millones de peticiones al día. Además de ello si necesitas mejorar este rendimiento Zend Technologies ha desarrollado versiones especiales para incrementar este rendimiento.

    4. Bajo Costo
    El precio para utilizar PHP es cero, PHP es gratuito y lo puedes descargar desde www.php.net. Incluso si contratas un hosting verás que sale mas barato uno con soporte PHP comparado con el que tiene soporte ASP o ASP.NET.

    5. Es Open Source, lo puedes modificar
    PHP es Open Source es decir que se tiene acceso al código fuente. Si deseas agregar o modificar algo para obtener un funcionamiento de acuerdo a tus necesidades puede hacerlo con total libertad. Esto a diferencia de las aplicaciones comerciales en las cuales solo queda esperar versiones mejoradas de la empresa desarrolladora. Este punto es importante también pues teniendo acceso al código miles de desarrolladores detectan bugs y van corrigiendo y mejorando PHP, logrando tener una aplicación muy segura y constantemente mejorada.

    6. Librerías Incluidas
    PHP fue diseñada para trabajar sobre la web por ello trae un conjunto muy amplio de funciones para ser utilizadas en diferentes tares relacionadas con la web. Se puede conectar con bases de datos, conectar a web services, parsear XML, enviar email, generar PDFs, generar imágenes, etc. Basadas en estas librerías existes clases implementadas para facilitar el trabajo de los desarrolladores. Otro punto es que hay desarrolladores que agregan librerías especializadas para extender las funcionalidades de PHP.

    7. Portabilidad
    PHP esta disponible para la mayoría de sistemas operativos existentes. Desde Unix, Linux, Microsoft Windows, MAC, entre otros. Una vez desarrollado tu aplicación PHP esta puede funcionar cualquiera de estos sistemas operativos sin necesidad de modificar el código.

    8. Soporte para OOP
    La versión 5 de PHP esta diseñada para soporte de características de programación orientada a objetos. Características como herencia, métodos y atributos públicos o privados, clases y métodos abstractos, constructores, interfaces y destructores. Si tienes conocimientos de C++ o Java estas características te serán muy familiares con una sintaxis muy similar.

    9. Soporte para gran variedad de Bases de Datos
    PHP tiene soporte para conectarse a una gran variedad de base de datos como: MySQL, PostgreSQL, mSQL, Oracle, dbm, FilePro, HyperWave, Informix, InterBase, Sybase entre otras. Las base de datos hacen que una aplicación sea mas robusta y con este soporte tu aplicación puede conectarse con facilidad a tu base de datos existente.

    10. Soporte
    Si lo que necesitas es soporte, Zend Technologies la empresa que patrocina PHP, ofrece versiones comerciales con todo el soporte que puedas necesitar.

    Bueno con este finalizo este articulo que encontre en una paguina de programacion.

    Saludos!!!

    No Comments » | PHP | Permalink
    Posted by Tomás Tapia Silva

    Bienvebido al Blog de ZonaDevelop

    September 9th, 2009

    Hola! en este blog encontraras artículos, tutoriales y cosas entretenidas sobre el desarrollo de aplicaciones en los lenguajes de programación mas comunes!!

    No Comments » | General | Permalink
    Posted by Tomás Tapia Silva

    Introduccion al Lenguaje PHP

    September 9th, 2009

    Lo primero es explicar que es "PHP" veamos que nos dicen sus creadores:

    What is PHP?

    PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML.

    Bueno según estos tipos "PHP es un lenguaje de programación interpretado, que sirve específicamente para el desarrollo web y que puede ser integrado dentro del HTML" en fin php es un lenguaje para crear paginas web de las mas simples a las mas complejas sabiendo utilizar bien e informándose constantemente en su sitio oficial <a href="http://www.php.net/">http://www.php.net/</a> que contiene toda la documentación correspondiente a este gran lenguaje de desarrollo web.

    Algunos ejemplos de código serian algo asi:

    1. <html>
    2. <head>
    3. <title>Example</title>
    4. </head>
    5. <body>
    6. <?php echo "Hola mundo, Esto es un Script PHP"; ?>
    7. </body>
    8. </html>

    Este es el clasico "hola mundo" que se muestra en diferentes lenguajes de programacion como Perl o C. El codigo de PHP esta incluido en tags especiales "".

    Lo que hace diferente a PHP es que el código que se deba ejecutar se ejecuta siempre en el servidor.

    Así, al ejecutar el script anterior, el cliente recibirá sólo los resultados de la ejecución por lo que es imposible para el cliente acceder al código que generó la página, veamos un ejemplo un poco mas avanzado:

    1. <?php
    2.  
    3. $variable = 2; // Creamos una variable de numeros enteros (int)
    4. $variable2 = 2; // Creamos una segunda variable de números enteros (int)
    5. $suma = $variable + $variable2; // Creamos otra variable para guardar nuestra suma de enteros;
    6.  
    7. echo $suma;
    8. ?>

    PHP tambien es compatible con muchisimos motores de bases de datos y soporta la utilización de otros protocolos como IMAP, SNMP, NNTP, POP3 o HTTP a nivel de socket.

    Algunos de estos motores son:

    • Adabas D
    • dBase
    • Empress
    • FiclePro
    • informix
    • InterBase
    • Solid
    • Sybase
    • Velocis
    • Unix dbm
    • mSQL
    • MySQL
    • Oracle
    • PosgreSQL

    Bueno mas adelante hire mostrando mas ejemplos de como utilizar la sintaxis de php y la infinidad de cosas que se pueden hacer con este genial lenguaje ( que no se note que suelo programar mucho en este lenguaje :)  )

    Saludos!!!

    No Comments » | PHP | Permalink
    Posted by Tomás Tapia Silva