Programando con Rupert

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

Page 2 of 6

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.

WordPress: Añadir campos personalizados (metas) a un Post Type

En el artículo anterior escribí acerca de cómo crear un Tipo de Entrada personalizado (Custom Post Type) en WordPress y hoy voy a indicar cómo podemos añadirle campos personalizados. Ya que uno de los objetivos de crear un Custom Post Type es que cada entrada de ese tipo sea diferente a una entrada de blog, tanto funcional como aparentemente.

Preparación del ejemplo

Voy a realizar este ejemplo a partir del Custom Post Type que creé en el artículo anterior. Lo que vamos a hacer es añadir varios campos personalizados al Post Type “Gatos” (edad, sexo, color, raza).

Ya que de momento la edición de un gato no se diferencia de la edición de una entrada de blog:

Meta Boxes

Lo que queremos lograr es añadir a esa pantalla de edición cuatro campos personalizados. Efectivamente, hay partes del editor que no vamos a alterar (como es el Título, la descripción o la imagen principal). Así que los campos que vayamos añadiendo los incluiremos en Meta Boxes.

Podríamos definir las Meta Boxes como “secciones” en la edición de una entrada que permiten gestionar información adicional. Se pueden establecer tantas secciones como necesitemos.

En este ejemplo vamos a crear una Meta Box llamada Características del gato, que nos permita introducir esos valores específicos.

Cada Meta Box se compone de dos procesos, en uno de ellos indicamos cómo se mostrarán los campos y sus valores (add_meta_boxes), y en el otro indicaremos cómo se guardan esos valores cuando guardemos la entrada (save_post).

Mostrando los campos – add_meta_boxes

Lo primero que haremos será añadir una acción al hook “add_meta_boxes” indicando la función que añadirá la caja donde dibujaremos los atributos, en nuestro caso la función se llama gatos_custom_metabox:

add_action( ‘add_meta_boxes’, ‘gatos_custom_metabox’ );

function gatos_custom_metabox()
{
add_meta_box( ‘gato_meta’, ‘Características del gato’, ‘display_gato_atributos’, ‘gatos’, ‘normal’, ‘high’);
}

Esta función tiene que llamar a la función add_meta_box, que acepta los siguientes parámetros en este orden:

  • Nombre de la Meta Box
  • Título de la Sección
  • Función que dibujará los campos
  • Custom Post Type al que se va asignar
  • Lugar donde aparecerá (Normal, Advanced, Side)
  • Prioridad respecto a otras Meta Boxes

Por lo tanto ya sólo queda “dibujar” y mostrar los campos. En nuestro caso lo haremos mediante la función display_gato_atributos, que tiene que aceptar un parámetro que represente el post en el que estamos. Así que esta función recoge los meta datos guardados si los hubiera (get_post_meta), y los muestra en los campos correspondientes.

Guardando los campos – save_post

Una vez que tenemos los campos disponibles, queda guardarlos junto al post. Para ello hemos de añadir una acción al hook save_post indicándole la función que guardará los datos mediante la función update_post_meta.

Con esto ya hemos visto cómo añadir campos personalizados a nuestros tipos de entrada en WordPress. En siguientes artículos veremos cómo crear plantillas personalizadas tanto de listado como de ficha.

¡Hasta la próxima!

Rupert.

WordPress: Crear un Plugin con Custom Post Type

Recientemente, en varios de mis proyectos, me he visto en la necesidad de crear tipos de entradas personalizadas para WordPress. Es una tarea un tanto rutinaria, pero que puede aportar mucha funcionalidad y velocidad a la gestión de datos específicos en WordPress. Así que en vez de apuntar los pasos en mi cuaderno garabateado, lo escribo aquí por si le sirve de ayuda a alguien más.

¿Por qué un Custom Post Type?

Imaginémonos esta situación: En nuestro sitio de WordPress queremos que los usuarios puedan visualizar un directorio de gatos y puedan acceder a sus fichas. Efectivamente, podemos crear una entrada con los datos de un gato y, una vez diseñada, duplicarla y cambiar los valores para el siguiente. Así sucesivamente. Hasta que un día es necesario hacer un cambio en el diseño y toca modificar 500 entradas de gatos. Esta metodología sería entonces poco eficiente.

Cuando nos encontramos con la necesidad de manejar un tipo de entrada que tendrá sus datos específicos además de la foto y la descripción (edad, sexo, color, carácter) y además tendrá un diseño claramente diferenciado de una entrada de blog corriente, una opción a tener en cuenta es la creación de un Custom Post Type.

Preparación del ejemplo

Lo que vamos a conseguir con este artículo es crear una sección “Gatos” en el menú de administración de WordPress y conseguir visualizarlo.

Creación del plugin

Lo primero que vamos a hacer va a ser crear un plugin para que al activarlo nos permita incluir nuestra nueva funcionalidad. En la carpeta /wp-content/plugins crearé una carpeta llamada gatospcrupert. Y dentro de esta carpeta, crearé el fichero gatospcrupert.php que contendrá mi plugin.

El primer paso es indicar los datos del plugin al comienzo del fichero gatospcrupert.php

Sólo con este paso, ya debería aparecer en la sección Plugins de la administración de WordPress para ser activado, así que lo activamos.

Creamos el Post Type GATOS

Ahora que tenemos nuestro plugin, vamos a añadir el Custom Post Type. Para ello en el fichero gatospcrupert.php vamos a añadir el siguiente código.

En el hook “init” enlazamos la función post_type_gatos, que por un lado registra el post type con sus etiquetas, mediante el método register_post_type y por otro registrar la taxonomía, mediante el método register_taxonomy.

Con este código ya deberíamos tener disponible la sección Gatos:

Por último, en el hook de activación del plugin, habría que añadir una llamada al método flush_rewrite_rules() para que se creen las url www.dominio.com/gatos/rupert

Con este artículo hemos visto cómo crear un Post Type personalizado. En un siguiente artículo veremos cómo añadirle campos personalizados.

¡Hasta la próxima!

Rupert.

AngularJS: Conceptos Básicos

Después del veranito empezamos con las pilas bien cargadas. En los artículos anteriores empecé a escribir sobre Ionic Framework e incluso creamos una aplicación simple. Como ya comenté, esta tecnología tiene como base AngularJS, así que hoy voy a escribir sobre este framework, de cara a poder entender mejor el funcionamiento de Ionic.

¿Qué es AngularJS?

AngularJS es un framework de JavaScript open source, mantenido por Google. Está orientado sobre todo a las denominadas Single Page Applications (Aplicaciones de una sola página). Su objetivo es facilitar el desarrollo y el testeo de dichas aplicaciones, respondiento a patrones de arquitectura como MVC o MVVM.

Librería de AngularJS

A pesar de que al crear una aplicación de Ionic esta librería ya está referenciada, desde el HTML deberíamos incluir esta referencia:

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script>

Modelo y Vista: Una simbiosis

Una de las peculiaridades de AngularJS es la adaptación a patrones de diseño como MVC (Model View Controller), MVVM (Model View ViewModel), MVP (Model View Presenter).

En este punto vamos a demostrar cómo funciona la relación Vista-Modelo en AngularJS. Como veremos, la actualización es bidireccional. El modelo constará de un elemento “Nombre“. A medida que la vista (una caja de texto) vaya actualizándose, se actualizará el modelo y a su vez, cuando se actualice el modelo, automáticamente se actualizará el valor en la vista.

En el siguiente ejemplo vamos a crear una página que solicite el nombre del usuario y que dicho nombre se imprima dentro de un <p>. Para ello, al input le estableceremos el atributo ng-model para que actualice el modelo. Y al elemento <p>, le estableceremos el atributo ng-bind, para que recoja el nuevo valor del modelo a medida que éste se actualice. Un elemento a tener en cuenta es la etiqueta body, a la que le indicamos mediante el atributo ng-app que va a manejar una aplicación AngularJS

Directivas comunes

Al trabajar con AngularJS, vamos a ver que la clave es combinar correctamente las directivas o atributos de que disponemos. Para que la validación HTML sea correcta, es posible añadir el prefijo “data-“ a las siguientes directivas

  • ng-app: Se aplica sobre un contenedor y especifica que su contenido va a a ser manejado por una aplicación AngularJS
  • ng-model: Se suele aplicar en los controles de formulario para indicar que debe estar sincronizado con el modelo. Es decir, se aplica lectura y escritura sobre el modelo que se le indique
  • ng-bind: Al aplicarlo sobre un elemento, le indicamos que el contenido o valor de dicho elemento va a estar leyendo continuamente las actualizaciones del modelo. A diferencia de la directiva anterior, estaríamos hablando de una actualización de sólo lectura.
  • ng-init: Se aplica en el mismo elemento en el que se declare ng-app y permite establecer unos valores iniciales para el modelo.

Basándonos en el ejemplo anterior, voy a modificar el ejemplo para que ahora proponga un nombre antes de que el usuario escriba en la caja de texto. Por otro lado, añadiré otra caja de texto pidiendo verificar el nombre, de tal manera que haya dos cajas de texto realizando operaciones de lectura y escritura contra el mismo modelo.

Hasta aquí hemos visto un para de conceptos básicos, en el siguiente artículo veremos cómo manejar Módulos, Scopes y Controladores.

¡Hasta la próxima!

Rupert.

« Older posts Newer posts »

© 2019 Programando con Rupert

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