You are here
Primeros pasos con la API de HTML5 Sin categoría 

Primeros pasos con la API de HTML5

Primeros pasos con la API de HTML5

HTML5 nos proporciona una cosecha entera de nuevas posibilidades, como el dibujo con la lona , la aplicación multimedia con los de audio y vídeo API, y así sucesivamente veremos como encaminar nuestros Primeros pasos con la API de HTML5.

Una de estas herramientas, que sigue siendo relativamente nuevo, es la API del sistema de archivos .

Nos da acceso a una sección de un recinto de seguridad del sistema de archivos local del usuario, llenando así la brecha entre las aplicaciones de escritorio y web aún más! En el tutorial de hoy, vamos a ir a través de los conceptos básicos de esta API nueva y emocionante, la exploración de las tareas más comunes del sistema de archivos. ¡Empecemos!

En resumen, las aplicaciones web son frescas; pero, en comparación con las aplicaciones de escritorio, todavía tiene una debilidad significativa: no tienen una forma de interactuar y organizar los datos en una jerarquía estructurada de carpetas – un verdadero sistema de archivos. Afortunadamente, con la nueva API del sistema de archivos, esto se puede cambiar. Esta API proporciona a las aplicaciones web controlados acceso a una “caja de arena” privado local sistema de archivos en el que se pueden escribir y leer archivos, crear y lista de directorios, y así sucesivamente. Aunque en el momento de escribir este artículo único navegador Chrome de Google es compatible con la aplicación “completa” de la API del sistema de archivos, todavía merece ser estudiado como una forma poderosa y conveniente de almacenamiento local.

Primeros pasos con la API de HTML5
Primeros pasos con la API de HTML5

La API del sistema de archivos se presenta en dos versiones diferentes. El API asíncrona, que es útil para aplicaciones normales y la API síncrona, reservado para uso con los trabajadores de la tela. A los efectos de este tutorial, vamos a explorar exclusivamente la versión asíncrona de la API.

El primer paso es obtener el acceso al sistema de ficheros HTML 5 solicitando una archivoLocal objeto Sistema, mediante el window.requestFileSystem () método global:

No hay manera para que una aplicación web para “romper” más allá del directorio raíz local.

Como los dos primeros parámetros, se especifica la duración y el tamaño del sistema de archivos que desea. A PERSISTENTE sistema de archivos es adecuado para aplicaciones web que se desean almacenar los datos de usuario de forma permanente. El navegador no lo eliminará, excepto a petición explícita del usuario. Un TEMPORAL sistema de archivos es apropiado para aplicaciones web que se quiere almacenar los datos, pero todavía puede funcionar si el navegador web elimina el sistema de archivos. El tamaño del sistema de archivos se especifica en bytes y debe ser un límite superior razonable de la cantidad de datos que necesita para almacenar.

El tercer parámetro es una función de devolución de llamada que se desencadena cuando el agente de usuario proporciona con éxito un sistema de archivos. Su argumento es un sistema de archivos objeto. Y, por último, podemos añadir una función de devolución de llamada opcional, que se llama cuando se produce un error, o la solicitud de un sistema de archivos es negada. Su argumento es una FileErrorobjeto. Aunque este parámetro es opcional, siempre es una buena idea para detectar errores para los usuarios, ya que hay una serie de lugares donde las cosas pueden salir mal.

El sistema de ficheros obtenido con estas funciones depende del origen del documento que contiene.Todos los documentos o aplicaciones web desde el mismo origen (host, el puerto y protocolo) comparten un sistema de archivos. Dos documentos o aplicaciones de diferentes orígenes tienen sistemas de archivos completamente distintas e inconexas. Un sistema de archivos se limita a una única aplicación y no puede acceder a los datos almacenados de otra aplicación. También está aislado del resto de los archivos en el disco duro del usuario, lo cual es una buena cosa: no hay manera para que una aplicación web para “romper” más allá del directorio raíz local o de otra manera acceder a archivos arbitrarios.

Revisemos un ejemplo:

Esto crea un sistema de ficheros temporal con 5 MB de almacenamiento. A continuación, proporciona una función de devolución de llamada de éxito, lo que vamos a utilizar para operar nuestro sistema de ficheros.Y, por supuesto, también se agrega un controlador de errores – por si acaso algo sale mal. Aquí, elerrorHandler () función es demasiado genérica. Así que si quiere, puede crear una versión ligeramente optimizado, lo que le da al lector un mensaje de error más descriptivo:

El objeto del sistema de archivos se obtiene tiene un nombre (un nombre único para el sistema de ficheros, asignado por el navegador) y la raíz propiedad que hace referencia al directorio raíz del sistema de archivos. Se trata de un DirectoryEntry objeto, y puede haber anidado directorios que están representados por DirectoryEntry objetos. Cada directorio en el sistema de archivos puede contener archivos, representada por FileEntry objetos. El DirectoryEntry objeto define los métodos para obtenerDirectoryEntry y FileEntry objetos por su nombre de ruta (opcionalmente crearán nuevos directorios o archivos si se especifica un nombre que no existe). DirectoryEntry también define un createReader ()método de fábrica que devuelve un DirectoryReader objeto para el listado el contenido de un directorio. ElFileEntry clase define un método para obtener el archivo objeto (una gota) que representa el contenido de un archivo. A continuación, puede utilizar un FileReader objeto para leer el archivo. FileEntry define otro método para devolver un FileWriter objeto que se puede utilizar para escribir el contenido en un archivo.

Phhew … Suena complicado? No se preocupe. Todo quedará más claro a medida que avanzamos a través de los ejemplos a continuación.

Obviamente, lo primero que se necesita para crear en un sistema de archivos es de unos cubos, o directorios. A pesar de que el directorio raíz ya existe, no desea colocar todos los archivos allí. Los directorios son creados por el DirectoryEntry objeto. En el siguiente ejemplo, creamos un directorio, llamados Documentos , dentro del directorio raíz:

El GetDirectory () método se utiliza tanto para leer y crear directorios. Como primer parámetro, puede pasar ya sea un nombre o ruta como directorio para buscar o crear. Hemos establecido el segundo argumento de verdad , porque estamos tratando de crear un directorio – no leer una ya existente. Y al final, añadimos una respuesta de error.

Hasta aquí todo bien. Tenemos un directorio; Ahora vamos a añadir un subdirectorio. La función es exactamente la misma con una diferencia: cambiamos el primer argumento de ‘Documentos’ a ‘Documentos / Música’. Suficientemente fácil; pero lo que si desea crear una subcarpeta, Cielo , con dos padres carpetas, Imágenes y naturaleza , dentro de la Documentos carpeta? Si escribe ‘ Documentos / Imágenes / Naturaleza / Cielo ‘ para el argumento de ruta, recibirá un error, porque no se puede crear un directorio, cuando no existe su padre inmediato. Una solución para esto es crear cada carpeta uno a uno: Imágenesen el interior de Documentos , de la naturaleza dentro de Imágenes , y luego Sky dentro Naturaleza . Pero esto es un proceso muy lento e inconveniente. Hay una solución mejor: crear una función que va a crear todas las carpetas necesarias de forma automática.

Con este pequeño truco, todo lo que necesitamos hacer es proporcionar una ruta completa en representación de las carpetas que queremos crear. Ahora, el cielo directorio se crea con éxito, y se pueden crear otros archivos o directorios dentro de ella.

Ahora es el momento para revisar lo que tenemos en nuestro sistema de ficheros. Vamos a crear unDirectoryReader objeto, y el uso de los readEntries () método para leer el contenido del directorio.

En el código anterior, los isDirectory y isfile propiedades se utilizan con el fin de obtener una salida diferente para los directorios y archivos, respectivamente. Además, utilizamos la fullPath propiedad con el fin de obtener la ruta completa de la entrada, en lugar de sólo su nombre.

Hay dos formas de eliminar un DirectoryEntry desde el sistema de archivos: eliminar () yremoveRecursively () . El primero elimina un directorio dado sólo si está vacía. De lo contrario, recibirá un error.

Si la música carpeta tiene los archivos dentro de ella, entonces usted necesita para utilizar el segundo método, que forma recursiva elimina el directorio y todo su contenido.

Ahora que sabemos cómo crear directorios, es el momento de rellenarlos con archivos!

El siguiente ejemplo crea un vacío test.txt en el directorio raíz:

El primer argumento de getFile () puede ser una ruta absoluta o relativa, pero debe ser válida. Por ejemplo, es un error intentar crear un archivo, cuando no existe su padre inmediato. El segundo argumento es un objeto literal, que describe el comportamiento de la función si no existe el archivo. En este ejemplo,crear: verdadera crea el archivo si no existe y genera un error si lo hace ( exclusiva: true ). De lo contrario, si crear: false , el archivo es simplemente inverosímil y regresó.

Tener un archivo vacío no es muy útil, sin embargo; así que vamos a añadir algo de contenido en su interior. Podemos utilizar el FileWriter objeto para esto.

Por encima, recuperamos el test.txt archivo, y creamos un FileWriter objeto para él. A continuación, añadimos el contenido a ella mediante la creación de un nuevo BlobBuilder objeto y el uso de la escritura () método de FileWriter .

Llamando getFile () sólo se recupera un FileEntry . No devuelve el contenido del archivo. Por lo tanto, si queremos leer el contenido del archivo, tenemos que utilizar el archivo de objeto y el FileReader objeto.

Hemos escrito algunos contenidos en nuestro archivo, pero lo que si deseo de añadir más en una fecha posterior? Para añadir datos a un archivo existente, el FileWriter se utiliza una vez más. Podemos cambiar la posición del escritor a la final del archivo, mediante el seek () método. Buscar acepta una compensación como un argumento de bytes, y establece la posición del escritor archivo a esa compensación.

Para eliminar un archivo del sistema de archivos, sólo tiene que llamar entry.remove () . El primer argumento de este método es una función de devolución de llamada con parámetro cero, que se llama cuando el archivo se ha eliminado correctamente. La segunda es una respuesta de error opcional si se produce algún error.

FileEntry y DirectoryEntry comparten los mismos métodos de la API para copiar, mover y cambiar el nombre de las entradas. Hay dos métodos que puede utilizar para estas operaciones: copyTo () y moveTo () . Ambos aceptan los mismos parámetros exactos:

El primer parámetro es la carpeta principal para mover / copiar la entrada en. El segundo es un nombre nuevo opcional para dar la entrada movido / copiado, que en realidad se requiere cuando se copia una entrada en la misma carpeta; de lo contrario obtendrá un error. El tercer y cuarto parámetros fueron explicados anteriormente.

Vamos a repasar algunos ejemplos sencillos. En el siguiente, copiamos el archivo test.txt desde la raíza la Documentos directorio.

El siguiente ejemplo mueve test.txt a los documentos , en lugar de copiarlo:

El ejemplo siguiente cambia el nombre test.txt a text.txt :

En este tutorial introductorio, sólo hemos arañado la superficie de las diferentes interfaces del sistema de archivos. Si desea obtener más información y profundizar en la API del sistema de archivos, se debe hacer referencia a las especificaciones especificaciones de W3C:

  • API de archivo: Directorios y Sistema
  • API del archivo: escritor
  • File API

Ahora que tiene una comprensión básica de lo que la API del sistema de archivos es, y cómo puede ser utilizado, debe ser considerablemente más fácil de entender la documentación de la API, que puede ser un poco confuso a primera vista.


 Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts