El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Angular 2 avanzado: Gestión de archivos en PHP

Crear un pipe personalizado para desplegar iconos

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En Angular tenemos algo llamado pipes que son básicamente filtros convertidores de datos. Con los pipes podemos dar formato de datos y modificar elementos dentro de una aplicación, y en esta lección vamos a crear un pipe personalizado para desplegar iconos de acuerdo a la extensión del archivo.
09:33

Transcripción

Estoy trabajando en una aplicación que despliega diferentes items que se encuentran dentro de una carpeta. En este caso, tres elementos que están almacenados en una carpeta. Sin embargo, en los tres elementos que tengo acá se despliega exactamente el mismo ícono. Si vemos, también tengo información sobre cada una de las diferentes extensiones. Así que voy a tomar la información que me llega de la extensión que tiene cada archivo y la voy a convertir, a través de un filtro de Angular, en un elemento personalizado. Cada uno va a tener su propio ícono de acuerdo a la extensión. Para eso, vamos a crear algo que se llama un "pipe". Los "pipes" básicamente son filtros personalizados que vamos a poder crear en Angular. Vamos a crear uno de ellos utilizando la terminal. En este caso, yo estoy ejecutando mi servidor, así que voy a crear una nueva ventana. Y voy a entrar a mi proyecto. Y una vez que esté dentro del proyecto voy a crear este nuevo "pipe". Cuando te digo el "pipe", va a ser un filtro que me va a permitir tomar información que viene desde una variable, convertirlo, transformarlo a cualquier formato y devolver un resultado. Para crearlo, voy a entrar dentro la terminal y voy a escribir el comando "ng g" para generar.. Voy a escribir lo que deseo crear, en este caso que es un "pipe", así que escribo "p", "i", "p", "e" y le pongo el nombre del "pipe" que deseo crear. En este caso, y solamente para que lo recordemos le vamos a poner "filtro-extension". Listo. Esto me va a crear un nuevo "pipe", un nuevo filtro que va a estar disponible dentro de mi aplicación. A diferencia de los componentes, ahora sí ya lo tengo creado en mi aplicación. Vamos a refrescar en caso de que no aparezca correctamente. Vamos a ver que aparece dentro de la raíz de la aplicación, a diferencia de los demás componentes que aparecen dentro de una carpeta. Esto sucede, porque en el caso de este filtro, va a estar dispoinible a lo largo de toda la aplicación. Entonces, lo que vamos a hacer es que una vez que lo hemos creado, dentro de la línea de comandos, ya se ha generado todo el código necesario para que lo podamos usar en cualquier parte de la aplicación, y lo vamos a utilizar específicamente en el componente que está desplegando cada uno de estos items. En mi caso, el componente que lo está haciendo, es uno llamado "item-archivo". Vamos a ir a directamente a la plantilla, y, dentro de la plantilla, vemos que estoy utilizando acá una clase que es la que está desplegando este ícono. Cada una de las clases que yo estoy desplegando están utilizando el "framework" de Font Awesome. En este caso, estoy dentro de "fontawesome.io" y, en la sección de íconos, podemos ver cómo se despliegan los diferentes íconos. Yo voy a utilizar algunos que están acá y voy a desplegar cada uno de ellos según la extensión. Por ejemplo... Y voy a utilizar la búsqueda acá... Si yo deseo desplegar un archivo comprimido, voy a mostrar este ícono. ¿Cómo lo despliego? Básicamente, tengo que cambiar esta clase. En este caso, "file-archive-o". Vamos a utilizar diferentes formatos para desplegar diferentes íconos. ¿Cómo lo hacemos? Primero que todo, necesitamos definir cómo va a ser nuestro filtro. Para modificar el filtro, vamos a entrar, en este caso, al archivo "filtro-extension.pipe". Básicamente, el nombre del "pipe" va a tener el nombre con el que nosotros lo creamos: ".pipe.ts". Ahora yo voy a modificar algunos detalles. Primero que todo, necesito buscar la sección donde aparece la propiedad "transform". "transform" lo que va a hacer es que va a tomar los valores que me llegan desde el filtro. Básicamente cualquier variable en la que asignemos este filtro lo va a tomar, posiblemente lo transforme y devuelve un resultado. Este es el resultado que está devolviendo en este momento. Nosotros vamos a cambiar este código y vamos a hacer que se modifique. Entonces, una vez que nosotros tenemos estos valores, vamos a tomar este valor que ya viene escrito por defecto, en este caso "value". "Value" va a almacenar el valor de la variable en la que se encuentre nuestro filtro Y yo voy a crear una variable local que se va a llamar... "iconoClase". Mi clase que va a definir cuál va a ser el ícono que voy a utilizar. Ahora, una vez que ya tengo esto, la voy a definir como una variable de tipo "string" y sabiendo que voy a tener diferentes formatos como PDF, JPG y DOC. Así que voy a tomar una condicional que se llama "switch" que me va a servir a mí para utilizar diferentes valores y dar diferentes resultados. Así que voy a tomar este "switch" y voy a utilizar el valor que estoy recibiendo acá, que en este caso es "value" y vamos a trabajar sobre este valor. Así que vamos a poner, por ejemplo, "case". En el caso de que el valor de "value" sea "zip". vamos a asignarle un valor que va a ser "iconoClase". Va a ser igual a "="... Y, en este caso, yo ya tengo algunos íconos que ya he almacenado, que ya he investigado cuál es el ícono correcto así que para un archivo "zip" voy a utilizar este que se llama "archive-o"... Por ejemplo, acá, dentro de Font Awesome, vemos que acá se llama "file-archive-o". Voy a utilizar este ícono. Así que, de la misma forma que obtuve este ícono de acá, vamos a cerrar esta sección de el "switch", poniendo un "break" para que no lea más información y no siga iterando sobre esta condicional y vamos a seguir incluyendo las diferentes condiciones en las que podemos encontrar valores de "value". Por ejemplo, si en vez de un archivo "zip", estamos trabajando con un archivo "jpg", vamos a asignar que la clase en la que vamos a trabajar va a ser la que tiene Font Awesome definido como imagen que, en este caso, es "file-image-o". Y ya tengo algunas que están predefinidas, así que voy a incluir también... una opción para PowerPoint y le voy a asignar a "IconoClase". Listo, entonces, tenemos acá una condicional que va a analizar el valor que nos llega desde este filtro, que, en este caso, le vamos a asignar la extensión y, dependiendo el valor que tenga, nos va a devolver una clase. Esta clase va a representar el ícono correspondiente. Finalmente, tenemos que incluir, dentro de la condicional "switch"... Se recomienda siempre que incluyamos un valor por defecto que lo asignamos con "default". Y vamos a asignar la clase "iconoClase". Y vamos a decir que, en el caso de que no reconozca ninguno de los valores que estén dentro de "value", que no sea "zip", "jpg", PowerPoint o cualquiera que quieras agregar, si no calza con ninguno de estos, vamos a asignar este valor por defecto. Sabiendo eso, vamos a devolver como valor dentro de nuestro filtro, vamos a devolver el valor "iconoClase". Y ya tenemos definido el filtro y así es como va a trabajar en nuestra aplicación. Guardamos y vamos a revisar la plantilla. En la plantilla, nosotros estamos asignando el ícono a partir de esta clase, así que la vamos a eliminar. Y, para desplegarla, tenemos varias formas de hacerlo, pero una forma bastante sencilla es simplemente incluir en la plantilla el valor donde obtenemos el tipo. En este caso, de hecho yo ya lo tengo incluido. El valor es "itemInfo.tipo", que es donde me está llegando a mí el valor de la extensión. Ahora, voy a asignarle el filtro. Vamos a incluir el signo de pleca o "pipe", depende de cómo le quieras decir, y vamos también a agregar el nombre del filtro. En mi caso, mi filtro se llama "FiltroExtension". Puedes revisar dentro de las propiedades de el archivo vemos acá que está el nombre, y este es el nombre con el que voy a tener acceso a mi filtro dentro de la aplicación. Así que, nada más vengo acá, lo voy a asignar "FiltroExtension" vamos a guardar y vamos a revisar nuestra aplicación. Y vemos que ya se están desplegando correctamente los diferentes íconos de acuerdo a la extensión. Vemos que se está mostrando este para una imagen... Tenemos el de PowerPoint en el caso de la extensión de una presentación y tenemos también el que representa un archivo comprimido si estamos utilizando un archivo ".zip". En el caso de que quieras utilizar diferentes extensiones, simplemente tienes que seguir extendiendo las diferentes condiciones que están en nuestra aplicación. Y, por ejemplo, si tuviéramos un archivo que no calce con ninguna de las extensiones que ya tenemos definidas, entonces vamos a tener la opción que muestra el archivo genérico y así vamos a poder distinguir, va a ser mucho más sencillo reconocer cuál es la extensión que tiene cada uno de los archivos con los que trabajamos en esta aplicación.

Angular 2 avanzado: Gestión de archivos en PHP

Aprende a crear vínculos entre PHP y Angular 2 mediante un ejemplo práctico en el que trabajarás del lado del servidor con PHP y la parte web con la tecnología Angular de Google.

3:20 horas (33 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:19/04/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.