Programando con Rupert

Cuando la programación es una forma vida...

Month: enero 2016

AngularJS: Introducción a la Inyección de Dependencias

En artículos anteriores ya hemos visto cómo trabajar con controladores y ámbitos y cómo añadirles eventos. En este artículo vamos a ver cómo podemos comunicar esos controladores mediante la inyección de dependencias.

Para ello vamos a ver ciertos elementos de AngularJS (value, factory y service) que nos van a ayudar a publicar valores y funciones para “inyectarlas” a los diferentes controladores.

Preparación del ejemplo

Para las opciones que vamos a ver en este artículo voy a tomar como base el siguiente código. Básicamente es una página con el módulo AppGatos declarado con dos controladores. Por cada controlador vamos a tener un div que mostrará ciertos datos, un campo de texto y un botón al que le iremos asignando funcionalidad en cada acción:

Por lo tanto si ejecutamos esta página veremos que de momento sólo contamos con el $scope de cada uno de los controladores y, al ejecutar la acción, cada actualización será independiente entre los controladores.

Inyección Implícita vs Explícita

A partir de ahora vamos a empezar a jugar con la Inyección de Dependencias. En el código base, sin embargo, ya hemos empezado a utilizarla. El sistema es el siguiente: Los módulos de AngularJS van a exponer una serie de elementos que pueden ser “reclamados” o no por otros módulos de AngularJS.

En el código base que estamos utilizando ya estamos reclamando el objeto $scope. Y en este caso hemos utilizado la Inyección Implícita, ya que obtenemos el objeto mediante el nombre de variable:

En principio no hay mucho problema en utilizar este sistema (de hecho voy a utilizar el sistema implícito en este artículo) pero puede haber problema si estamos utilizando alguna tecnología que minimice el código. Por ejemplo, en vez de $scope, lo puede transformar en a, por lo tanto ya no reconoce el objeto $scope expuesto. Para solucionarlo lo más recomendable es utilizar la Inyección Explícita, que se basa en declarar un array donde se especifica por String los elementos que vamos a inyectar en el mismo orden en el que los necesitamos en la declaración de la función:

Value

El elemento value sirve para declarar valores  que utilizarán los controladores y se declara durante la configuración

Factory

Factory es una función que devuelve un objeto con sus atributos y funciones. Devuelve ese objeto cada vez que un controlador o un servicio lo pide. Lo que se devuelve en un factory es un objeto con todos los elementos del factory.

El objeto se crea al declarar el factory y es compartido por los servicios y controladores.

Service

Service es un objeto Javascript que contiene un conjunto de funciones que realizan ciertas tareas. Puede ser inyectado en un controlador o en otro servicio.

A diferencia de Factory, se crea un nuevo objeto cada vez que se inyecta en un controlador o en un servicio.

Con esto hemos visto una pequeña introducción a la Inyección de Dependencias, en otro artículo crearé un módulo completo de AngularJS para ver cómo aplicar todo lo que hemos visto hasta ahora.

¡Hasta la próxima!

Rupert.

WordPress WP-Admin: columnas personalizadas para Custom Post Type

En un par de proyectos me he encontrado con la necesidad de personalizar el listado que WordPress ofrece para gestionar los Custom Post Types. En artículos anteriores vimos cómo crear un Custom Post Type y cómo añadirle campos personalizados.

En este artículo vamos a ver cómo podemos personalizar el listado de administración que nos ofrece WordPress.

Preparación del ejemplo

Voy a utilizar como base el plugin que creé en este artículo. Por recordar, teníamos un custom post type  Gatos que permitía gestionar un listado de Gatos. Posteriormente, en este otro artículo, le añadí los siguientes campos personalizados (meta-fields): Edad, raza, sexo y color. Sin embargo al acceder al listado aparecía lo siguiente:

Lo que vamos a hacer es añadir al listado las columnas de: Edad, Sexo y Raza. Sin embargo, la columna de Edad no mostrará el número, si no que, si el gato tiene menos de 4 años imprimirá “Cachorro“, si no imprimirá “Adulto

Añadir Cabeceras de Columnas

Antes de “rellenar” las filas del listado, se han de definir las columnas. Existen algunos nombres de columna que cogerán su valor automáticamente (title, author, date).

Así que debemos una función al filtro manage_edit-{post_type}_columns, devolviendo un array con las columnas con las que queremos trabajar.

Con la función columnas_post_type_gatos le indicamos que al entrar en la administración del post typegato” muestre las columnas que indicamos en el array. De esas columnas sólo Edad, Sexo y Raza son personalizadas. De tal manera, que estableciendo estas columnas, el listado ya nos aparecerá de la siguiente manera:

Contenido de Columnas Personalizadas

Las columnas integradas (title, author, date…) se rellenan automáticamente. Sin embargo, lo que necesitamos es imprimir un valor en nuestras columnas personalizadas.

Para ello debemos añadir una función a la acción manage_{post_type}_posts_custom_column, pasándole por parámetro la columna que se está renderizando y el id del post. Por lo tanto, si no nos interesa cambiar lo que imprimen las columnas integradas, sólo tendremos que decidir qué imprimir en nuestras columnas personalizadas.

Con este código le decimos que, por cada registro, cuando tenga que renderizar Sexo y Raza, los recupere y los imprima. Con edad, sin embargo, imprimiremos un texto u otro según el valor numérico del campo. Nuestro listado quedaría así:

Ordenar por Columna Personalizada

Para completar nuestra personalización del listado de administración, vamos a añadir a la columna Edad la posibilidad de ordenar el listado por su valor.

Para ello lo primero que debemos hacer es indicar a WordPress qué columnas tendrán capacidad de ordenación. Se ha de añadir una función al filtro manage_edit-{post_type}_sortable_columns, que recibe como parámetro las columnas previamente definidas. Se ha de asignar un “código de ordenación” a cada columna por la que queramos ordenar.

Una vez establecidas las columnas que tendrán ordenación, se ha de añadir el filtro de ordenación a la consulta principal. Para ello se añade una función al filtro ‘request‘, comprobando que se trate del post_type correcto.

Con esto ya hemos visto cómo personalizar nuestro listado de custom post type. Hemos visto cómo añadir columnas propias y cómo ordenar por ellas.

¡Hasta la próxima!

Rupert.

AngularJS: Modelo y eventos

En el artículo anterior escribí un pequeño acercamiento al sistema de Módulos y Controladores de AngularJS. En este artículo vamos a introducir un nuevo concepto: el Modelo, y cómo podemos modificarlo mediante eventos de la vista.

Preparación del Ejemplo

En este ejemplo vamos a trabajar con una vista que llamará a un módulo llamado AppGatos, cuyo objetivo será mostrar los datos de un dueño o dueña de gatos y poder cambiar su nombre y apellidos.

Por otro lado,  se mostrará un listado de los gatos de esa persona y nos dará la posibilidad de añadir un nuevo gato al listado. ¡Vamos a ello!

Atributos ng-model y ng-bind

Como vimos en el anterior artículo, cada controlador de AngularJS va a tener como mínimo un parámetro $scope, que va a representar el modelo de dominio del módulo. Para conseguir editar el nombre y el apellido del dueño o dueña de los gatos, vamos a declarar el módulo y el controlador, incializando las variables nombre y apellido.

El atributo ng-model enlaza el elemento al que se aplique con la variable del modelo a la que se aplique. Este enlace es bidireccional (Two-Way-Binding), eso quiere decir que si se modifica el modelo, se actualizará el elemento y que si se modifica el elemento, se actualizará el modelo.

Para ver cómo funciona voy a crear dos inputs en el HTML para que gestionen el nombre y el apellido.

El atributo ng-bind, al igual que ng-model, enlaza el elemento al que se aplique con la variable del modelo a la que se aplique. Pero hay una diferencia, y es que el enlace es de sólo lectura (Read-Only-Binding). Eso quiere decir que sólo se actualizará el elemento HTML si se modifica el modelo.

Siguiendo con el ejemplo, voy a imprimir el nombre y el apellido. El nombre lo imprimiré de la manera estándar de AngularJS ( {{ }} ) y el apellido mediante ng-bind.

Atributo ng-repeat

En muchas ocasiones nos encontramos con colecciones dinámicas que hay que imprimir en la vista respetando, lógicamente, la coherencia entre un elemento y el siguiente. Voy a añadir esta colección de gatos al modelo.

El atributo ng-repeat aplicado a un elemento HTML implica que se va a repetir dicho elemento por cada registro de la colección. Para ver cómo funciona, voy a crear una lista desordenada (ul) y por cada elemento de la colección imprimiré un li.

Atributo ng-click

El atributo ng-click permite añadir funcionalidad al evento click del elemento al que se aplique. Lo primero que voy a hacer es añadir una función al modelo con el que estamos trabajando.

Lo que me interesa es que se vacíen los campos en la vista, así que utilizo el método extend para realizar una copia del objeto. Si no lo hacemos al reiniciar los valores se vaciaría también el elemento de la lista, ya que en AngularJS se trabaja con referencias.

Para terminar voy a crear el formulario en HTML y voy a aplicar el atributo ng-click al botón Añadir Gato

Este es el ejemplo completo:

Pues con esto nos hemos metido un poco más en el funcionamiento del modelo y la creación de eventos. En siguientes tutoriales veremos qué es eso de la inyección de dependencias.

¡Hasta la próxima!

Rupert.

AngularJS: Módulos, Controladores y Scopes

¡Pero bueno! ¿Cuánto hace que no me pasaba por estos lares? ¡Ha comenzado ya el 2016 y con él estrenamos dominio y cambio de look! 😀

Voy a dar pistoletazo de salida a este nuevo año continuando los artículos de AngularJS, que va a ser imprescindible para trabajar con Ionic Framework. En este artículo escribiré sobre los Módulos, Controladores y los Scopes. Al lío.

Estructura de Módulos

Antes de pararnos a ver cada uno de estos tres elementos de manera individual, vamos a tomar un poco de perspectiva y veamos cómo interactúan estos elementos entre ellos.

Como vemos en el esquema, nosotros trabajaremos siempre sobre una vista. Esta vista hará referencia directamente a un módulo, que puede o no, necesitar funciones de otros módulos.

Cada módulo puede tener uno o varios controladores, cada uno de ellos con sus propios scopes y funcionalidades.

De tal manera que la vista, habiendo referenciado a un único módulo, tiene la funcionalidad de todos los módulos requeridos.

Módulos

Un módulo de AngularJS es básicamente lo que su nombre indica, una parte del total de la aplicación con un cometido en particular. Cada página (Vista) va a utilizar un módulo mediante el atributo ng-app.

Un módulo puede funcionar de manera independiente o requerir otros módulos existentes para su funcionamiento.

Para declarar un módulo desde Javascript utlizamos el método angular.module. Este método acepta dos parámetros, el primero es el nombre del módulo y el segundo es un array con los nombres de los módulos requeridos para que este módulo funcione.

En este caso se ha definido un módulo llamado AppGatos que requiere otro módulo llamado AppPerros. Este módulo devuelve una referencia al módulo, que puede ser empleada más adelante.

Si se aplica el método angular.module sobre el mismo nombre de módulo se estaría haciendo referencia al mismo módulo.

Por último para indicarle a una vista que va a utilizar el módulo creado, se utiliza el atributo ng-app

Controladores y Scopes

Todo módulo necesita como mínimo un controlador para funcionar. Un controlador es una parte funcional de un módulo, con sus propias variables, modelos y métodos.

Para declarar un controlador, se utiliza el método controller() del objeto module. Este método acepta como mínimo un parámetro llamado $scope.

El elemento $scope representa el ámbito de variables, modelos y métodos del controlador.

Ya que tanto el método angular.module() como el método .controller() devuelven una referencia al módulo, es posible concatenar métodos.

Para especificar a un contenedor de HTML que va a utilizar un controlador, se utiliza el atributo ng-controller. En este ejemplo se ve todo lo que hemos visto:

Con lo cual el resultado debería ser algo parecido a esto

Hola Rupert ¡miau!
Hola Roy ¡guau!

Con esto ya nos hemos acercado un poco al sistema de módulos y controladores en AngularJS. En el siguiente artículo veremos cómo empezar a añadir funcionalidad a nuestra vista.

¡Hasta la próxima!

Rupert.

© 2019 Programando con Rupert

Sé cambiar el Footer, pero me apetece decir que este tema es de Anders NorenParriba' ↑