FancyUpload

  • 31/07/2008
  • 12:59 am
  • unijimpe

FancyUpload es una extensión de Mootools que permite hacer upload de archivos incluyendo barra de progreso. Esta basado en Swiff la clase de Mootools que permite incluir archivos SWF en HTML.

Si hacemos uso de la etiqueta input file no se puede hacer un seguimiento del progreso del upload y mucho menos aplicar estilos para integrarse correctamente con nuestro diseño. Esta librería utiliza un SWF que contiene las funciones necesarias para detectar el progreso de la carga, restringir a determinado tipo de archivos, entre otras opciones las cuales son características de flash.

Obteniendo los archivos
Lo primero es obtener los archivos necesarios: mootools.js desde Mootools, luego los archivos FancyUpload2.js, Swiff.Uploader.js, Fx.ProgressBar.js y Swiff.Uploader.swf desde FancyUpload.

Incluyendo los archivos
Lo siguiente es incluir los archivos recién descargados en nuestro HTML (En nuestro caso hemos colocado los Javascript en una carpeta llamada js), esto lo hacemos de la forma:

  1. <script type="text/javascript" src="js/mootools.js"></script>
  2. <script type="text/javascript" src="js/Swiff.Uploader.js"></script>
  3. <script type="text/javascript" src="js/Fx.ProgressBar.js"></script>
  4. <script type="text/javascript" src="js/FancyUpload2.js"></script>

Creando el Formulario
Lo que necesitamos crear son dos elementos, uno llamado demo-status que mostrará el progreso de la carga y demo-list que contiene la lista de archivos a subir. Además de ello necesitamos dos botones o links uno para seleccionar el archivo y el otro para iniciar el upload.

  1. <div id="demo-status" class="hide">
  2. <a href="#" id="demo-browse-all">Browse Files</a> |
  3. <a href="#" id="demo-upload">Upload</a>
  5.     <strong class="overall-title">Overall progress</strong><br />
  6.     <img src="img/bar.gif" class="progress overall-progress" />
  7. </div>
  9.     <strong class="current-title">File Progress</strong><br />
  10.     <img src="img/bar.gif" class="progress current-progress" />
  11. </div>
  12. <div class="current-text"></div>
  13. </div>
  14. <ul id="demo-list"></ul>

Implementando el Upload
Creamos una instancia de la clase FancyUpload2 el cual recibe como parámetros el elemento html para el estado de la carga, el elemento para el listado de archivos y luego un array de opciones donde indicamos a donde enviar los archivos, cual será el nombre con el cual se enviaran los archivos y finalmente la ruta al swf que contiene las funciones necesarias para el funcionamiento de esta librería.

  1. window.addEvent('load', function() {
  2.     var swiffy = new FancyUpload2(
  3.         $('demo-status'),
  4.         $('demo-list'),
  5.         {
  6.             'url': 'upload.php',
  7.             'fieldName': 'archivo',
  8.             'path': 'Swiff.Uploader.swf'
  9.         }
  10.     );
  11.     $('bt-browse').addEvent('click', function(){
  12.         swiffy.browse();
  13.         return false;
  14.     });
  15.     $('bt-upload').addEvent('click', function(){
  16.         swiffy.upload();
  17.         return false;
  18.     });
  19. });

Hay que notar también que hemos agregado los eventos para los botones que abrirán el selector de archivos y el inicio del upload.

Guardando los archivos con PHP
PHP recibe los archivos de forma normal y procedemos a guardarlo, para ello accedemos al archivo subido con el nombre asignado en el parámetro fieldName, entonces obviando la validación por propósitos de facilitar la explicación tendríamos:

  1. // file: upload.php
  2. if (isset($_FILES['archivo'])) {
  3.     $file = $_FILES['archivo']['tmp_name'];
  4.     $name = $_FILES["archivo"]['name'];
  5.     if (copy($file, "files/".$name)) {
  6.         $status = "Archivo subido: <b>".$name."</b>";
  7.     } else {
  8.         $status = "Error al subir el archivo";
  9.     }
  10. } else {
  11.     $status = 'Archivo vacio intentelo nuevamente!';
  12. }
  13. echo $status;

Pueden ver el ejemplo funcionando en: http://samples.unijimpe.net/fancyupload/ en donde se puede observar lo intuitiva que resulta ser la pantalla para subir archivos. Esto es muy importante por que le permite a los usuarios saber si efectivamente se esta subiendo los archivos y sobre todo que nos hemos olvidado del típico formulario al cual no se le podía aplicar estilos de forma adecuada.

Posts Relacionados

Firebug Lite

  • 29/07/2008
  • 9:46 pm
  • unijimpe

Firebug es una de las mas populares herramientas para depurar websites, es muy completo y versátil pero solo esta disponible como complemento para Firefox. Entonces para los usuarios de Safari, Internet Explorer u Opera ahora esta disponible Firebug-Lite, el cual es un javascript que automáticamente analiza el html seleccionado y nos permite mediante utilizar la mayoría de las funcionalidades de Firebug.

Utilizar Firebug-Lite Online
El primer método y el mas sencillo es utilizar Firebug-Lite de forma Online, el cual no requiere ninguna instalación o código adicional y el cual se puede aplicar a cualquier web. Lo que tienes que hacer es agregar el siguiente enlace a barra de favoritos, este enlace contiene un Javascript que ejecutará de forma remota el script necesario para el funcionamiento de Firebug.

Utilizar Firebug-Lite Offline
La segunda forma servirá para el caso que estemos desarrollando la aplicación sin conexión a Internet. Para ello es necesario descargar los archivos fuente de esta librería: firebug-lite.js y pi.js. Además de ello es necesario un archivo firebug-lite.css que contiene la hoja de estilos para la consola de Firebug y finalmente una imagen firebug.gif.

Luego para ejecutar Firebug-Lite, es necesario agregar las librerías pi.js y firebug-lite.js al header el HTML que deseas analizar, en mi caso he puesto los archivos en la carpeta firebug con lo cual se tendría::

  1. <script language="javascript" type="text/javascript" src="firebug/pi.js"></script> 
  2. <script language="javascript" type="text/javascript" src="firebug/firebug-lite.js"></script>

Listo, abres el HTML en un Browser y automáticamente se abrirá Firebug no importando el navegador que estes utilizando. Hay que notar que para que funcione adecuadamente la versión Offline es necesario editar el archivo firebug-lite.js en la línea 18 en colocamos la ruta correcta al archivo firebug-lite.css.

  1. new pi.element("link").attribute.set("rel","stylesheet").attribute.set("href","firebug/firebug-lite.css").environment.getElement()

Como pueden ver el utilizar esta librería esta aun click de distancia y ahora ya no estamos limitados a utilizar Firefox para realizar la depuración de nuestras aplicaciones. Finalmente les dejo los archivo fuente de como implementar la versión Offline de Firebug-Lite.

Posts Relacionados

JSON con Mootools

  • 20/07/2008
  • 7:21 pm
  • unijimpe

JSON (JavaScript Object Notation) es un formato basado en Javascript para intercambio de datos. JSON es una alternativa a XML pues brinda sencillez al momento de leer los datos, en Javascript puede ser analizado utilizando eval(), además provee sencillez para manipular los datos. Para mas información acerca de las diferencias con XML además de sus virtudes en: JSON.

Obteniendo los datos
Para nuestro ejemplo vamos a utilizar Google AJAX Search API, el cual es un servicio que nos utilizar los resultados de búsqueda de Google. No utilizaremos la funciones que provee Google si no que lo haremos utilizando JSON, para ello encontramos documentación en Flash and other Non-Javascript Environments.

Si deseamos obtener los resultado de la búsqueda de la palabra Google, lo podemos hacer accediendo al siguiente URL:

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Google

Este URL devolverá un objeto conteniendo los resultados de la búsqueda en un array ademas de estadísticas de resultados:

  1. { "results": [
  2.   {
  3.    "GsearchResultClass": "GwebSearch",
  4.    "unescapedUrl": "http://en.wikipedia.org/wiki/Paris_Hilton",
  5.    "url": "http://en.wikipedia.org/wiki/Paris_Hilton",
  6.    "visibleUrl": "en.wikipedia.org",
  7.    "cacheUrl": "http://www.google.com/search?...",
  8.    "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
  9.    "titleNoFormatting": "Paris Hilton",
  10.    "content": "In 2006, she released her debut..."
  11.   },
  12.   {
  13.    "GsearchResultClass": "GwebSearch",
  14.    "unescapedUrl": "http://www.imdb.com/name/nm0385296/",
  15.    "url": "http://www.imdb.com/name/nm0385296/",
  16.    "visibleUrl": "www.imdb.com",
  17.    "cacheUrl": "http://www.google.com/search?...",
  18.    "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
  19.    "titleNoFormatting": "Paris Hilton",
  20.    "content": "Self: Zoolander. Socialite..."
  21.   },
  22.   ...
  23.  ],
  24.  "cursor": {
  25.   "pages": [
  26.    { "start": "0", "label": 1 },
  27.    { "start": "4", "label": 2 },
  28.    { "start": "8", "label": 3 },
  29.    { "start": "12","label": 4 }
  30.   ],
  31.   "estimatedResultCount": "59600000",
  32.   "currentPageIndex": 0,
  33.   "moreResultsUrl": "http://www.google.com/search?..."
  34.  }
  35. }, 200, null)

Creando un Proxy
Normalmente cuando se accede a datos JSON se hacen sobre el mismo dominio, pero como nosotros deseamos acceder a los datos de Google necesitamos crear un proxy para cambiar de dominio los datos recibidos. Esto por que nos browsers no permites acceder a datos de otros dominios. Entonces creamos el archivo proxy.php.

  1. $apiQue = "Google"; // variable a consultar
  2. $apiKey = "tu_key_google"; // key para acceder al servicio
  3. $apiUrl = "http://ajax.googleapis.com/ajax/services/search/web";
  4. if (isset($_GET['query'])){
  5.    $apiQue = urlencode($_GET['query']);
  6. }
  7. readfile($apiUrl."?v=1.0&key=".$apiKey."&q=".$apiQue);

Cargando los datos con Mootools
La nueva versión de Mootools trae el método Request.JSON que permite cargar y parsear automáticamente datos JSON, para nuestro caso cargaremos los datos del proxy recién creado y lo mostraremos utilizando la función alert. Primero incluimos la librería Mootools en el header de nuestro html y luego obtenemos los datos JSON.

  1. <script type="text/javascript" src="mootools.js"></script>

  1. window.addEvent('domready', function() {
  2.     var path = "proxy.php?query=unijimpe";
  3.     var json = new Request.JSON({url: path, onComplete: onLoad});
  4.     json.get();
  5.     function onLoad(obj){
  6.         var results = obj.responseData.results;
  7.         for (i=0; i<results.length; i++) {
  8.             var tmp = results[i];
  9.             alert(i + " --> " + tmp.title + "\n" + tmp.url)
  10.         }
  11.     }
  12. });

Pueden ver el resultado en: /json/index.html.

Como pueden observar, la función onLoad se ejecuta cuando se ha completado la carga de los datos, dentro de esta función podemos acceder a los datos recién cargados como si fueran objetos es decir podemos acceder a todas sus propiedades utilizando el operador punto (.).

Entonces si deseamos mostrar la cantidad total de resultados podríamos hacer mediante obj.estimatedResultCount, entonces para acceder a los resultados de la búsqueda accedemos a obj.responseData.results el cual contiene un array con los resultados de la búsqueda por lo cual utilizamos un FOR para acceder a cada elemento.

Ahora si deseamos mostrar estos resultados como HTML y no como alerts, lo primero es crear un div en donde escribiremos los resultados y modificar brevemente nuestro script.

  1. window.addEvent('domready', function() {
  2.     var path = "proxy.php?query=unijimpe";
  3.     var json = new Request.JSON({url: path, onComplete: onLoad});
  4.     json.get();
  5.     function onLoad(obj){
  6.         var tmpHTML = "";
  7.         var results = obj.responseData.results;
  8.         for (i=0; i<results.length; i++) {
  9.             var tmp = results[i];
  10.             tmpHTML+= "<a href='"+tmp.url+"'>"+tmp.title+"</a>";
  11.             tmpHTML+= "<br />"+tmp.content+"<br/>";
  12.             tmpHTML+= "<i>"+tmp.url+"</i><br /><br />";
  13.         }
  14.         $("results").set("html", tmpHTML);
  15.     }
  16. });

  1. <div id="results">Loading...</div>

Pueden ver el resultado en: /json/json.html.

Finalmente, agregamos un campo te texto y un botón para crear un formulario de búsqueda para mostrar la potencia de JSON. Esto lo hacemos con el siguiente código.

  1. window.addEvent('domready', function() {
  2.     var path = "proxy.php?query=unijimpe";
  3.     var json = new Request.JSON({url: path, onComplete: onLoad});
  4.     json.get();
  5.     function onLoad(obj){
  6.         var tmpHTML = "";
  7.         var results = obj.responseData.results;
  8.         for (i=0; i<results.length; i++) {
  9.             var tmp = results[i];
  10.             tmpHTML+= "<a href='"+tmp.url+"'>"+tmp.title+"</a>";
  11.             tmpHTML+= "<br />"+tmp.content+"<br/>";
  12.             tmpHTML+= "<i>"+tmp.url+"</i><br /><br />";
  13.         }
  14.         $("results").set("html", tmpHTML);
  15.     }
  16.  
  17.     function sendSearch() {
  18.         $("results").set("html", "Loading...");
  19.         path = "proxy.php?query=" + $("q").value;
  20.         json = new Request.JSON({url:path, onComplete: onLoad});
  21.         json.get();
  22.     }
  23.    
  24.     $("bt").addEvent("click", sendSearch);
  25. });

  1. <div id="search">
  2. Buscador JSON
  3. <input type="text" id="q" name="q" />
  4. <input type="submit" id="bt" name="bt" value="Buscar" />
  5. </div>
  6. <div id="results">&nbsp;</div>

Pueden ver el resultado en: /json/search.html.

Como pueden ver utilizando Mootools para manejar JSON es muy fácil el implementar aplicaciones con acceso remoto a datos o también llamado AJAX solo que no estamos utilizando XML y además tenemos la posibilidad de formatear a nuestro antojo los resultados obtenidos.

Mas Información

Posts Relacionados