CoderoPro: agosto 2014

martes, 26 de agosto de 2014

Directivas en AngularJS

En este articulo vamos a realizar un ejemplo para explicar el concepto de Directivas en AngularJS.

Sabemos que HTML define alrededor de 91 etiquetas para realizar y determinar el comportamiento de una página web html, tales como <section>, <audio>, <title>, <header>, <body>, <canvas>, <span>, <code>, etc.

Pero de igual forma desearíamos que existieran etiquetas como <cabecera>, <contenedor>, <graficas>, <mi-etiqueta>, <promedio>, <iniciar-sesion>,<barra-lateral>,<ubicacion>, etc. y muchas otras que se le puedan ocurrir al desarrollador, las cuales pueda brindar más claridad y facilidad para entender el contenido de una página web con solo mirar sus etiquetas.

Las directivas son una propiedad de Angular que permiten editar una parte del documento HTML permitiendo crear etiquetas personalizables, atributos y manipular el código, haciendo que éste se adapte y pueda expresar el comportamiento que desea el desarrollador en la aplicación.

Declaración de una directiva:

directive('miDirectiva',function(){
return { 
restrict : 'E', 
templateUrl: 'mi-pagina.html'
};
});

restrict : 'E' Define la Directiva para  que sea utilizada como una etiqueta HTML:  <mi-directiva> </mi-directiva>

restrict : 'A' Define la Directiva para que sea utilizada como un atributo de una etiqueta especifica:  <div mi-directiva> </div>

restrict : 'C' Define la Directiva para que sea utilizada como una clase:  <div class="mi-directiva"> </div>

restrict : 'M' Define la Directiva para que sea utilizada como un comentario: <!-- directive: mi-directiva -->

templateUrl: Proporciona la url de la plantilla (página) para que ésta sea incluida en la página donde se llame la directiva.

Las directivas también permiten incluir controladores en su cuerpo:

directive('miDirectiva',function(){
return { 
restrict : 'E',
templateUrl: 'mi-pagina.html',
controller: function(){
//contenido del controlador
...
},
controllerAs: 'miControlador' //alias del controlador
};
});

Para incluir un controlador en una directiva solo basta con declarar 'controller' y a continuación de éste se declara una función la cual contiene su contenido.

El controlador se usa con un alias el cual permite identificarse en Angular, para el ejemplo anterior este toma el alias de 'miControlador'.

A continuación se usa un ejemplo de recordatorio de notas para explicar el concepto.

código página principal del recordatorio de notas.

archivo directivas.js que contiene el modulo principal junto con el controlador que permite agregar notas en la tabla.

Se crea un archivo .html donde se alojará todo el contenido del recordatorio de notas de la página principal, quedando el nuevo archivo de la siguiente manera:

nuevo archivo tablaDeNotas.html con el contenido principal del recordatorio de notas.

página principal después de cortar todo el contenido del recordatorio de notas.

Se crea la nueva directiva llamada recordatorioNotas en el archivo directivas.js:

archivo directivas.js con la nueva directiva.

Se elimina el controlador inicial y luego se crea la directiva (Linea 2).

Se declara la propiedad restrict y se le asigna el valor 'E' el cual le indica que será una etiqueta en el cuerpo principal de la página HTML (Linea 4).
Se declara la propiedad templateUrl donde se le asignará la ruta del archivo con el contenido separado del recordatorio de notas (Linea 5).
Una vez eliminado el controlador ctrlDirectiva se declara la propiedad controller en la directiva, se pasa una función anónima y luego se asigna el contenido del controlador inicial (Lineas 6 - 14).

Por ultimo una vez hecho todo lo anterior solo queda agregar la directiva en la página principal como una etiqueta mas. Asi:

página principal con la directiva declarada como una etiqueta.

Resultado final

miércoles, 6 de agosto de 2014

Crear una clase en Python

En este blog vamos a crear una clase en Python con algunos métodos.

Para ello se crea un archivo llamado clases.py en el que se incluirá todo el código.

Una vez creado el archivo, se crea una clase llamada OperacionesMatematicas en la que se incluirán los métodos operativos. Así:

Para crear la clase se utiliza la palabra reservada class del lenguaje, seguido del nombre que llevará la clase, como lo muestra la imagen anterior.

Una vez creada la clase se escribe todo su contenido en las lineas siguientes y dejando un espacio de izquierda a derecha (Tabulado) según se tenga configurado en cada editor te texto. En este ejemplo se trabaja con el editor Sublime Text 3 el cual viene con un tabulado de 4 espacios por defecto, suficiente para que la indentación se pueda notar en el archivo clases.py.

Indentación es el concepto de mover un bloque o lineas de código cierta cantidad de espacios a la derecha para que este sea más legible y genere más orden en el código.

En Python es muy importante este concepto ya que permite delimitar el inicio y el final de un bloque de código conformando asi la estructura del programa debidamente ordenada. la cantidad de espacios es relativa, ya depende del programador la cantidad que le sea conveniente manejar.

En la imagen anterior se da un ejemplo de indentación. El método de la linea 3 hace parte de la clase ya que éste está tabulado lo cual genera orden y facilidad para identificar los métodos de la clase. El método de la linea 5 esta por fuera de la clase ya que éste no ha sido indentado (Tabulado) y sigue la misma margen de la clase.

Continuando con el ejercicio primero se declara el método init (constructor) el cual se ejecuta por defecto cuando se haga el llamado a la clase, aun así cuando no esté declarado, éste se ejecuta por defecto una vez se cree el objeto:

Se pasan dos argumentos por valor (a y b) al constructor los cuales se usarán para realizar los cálculos matemáticos, como también se pasa el argumento self.

self es el argumento que va incluido en cada método de una clase siendo éste una referencia a la instancia actual de la clase, en el constructor referencia al objeto creado recientemente, y en los demás métodos se refiere a la instancia cuyo método ha sido llamado.
Se usa para referenciar a las demás variables.
Cuando se invoca un método no se especifica este argumento, ya que Python lo hace de manera automática.

Se declara una variable self.a la cual se inicializa con el valor del argumento a (Linea 4).
Se declara una variable self.b la cual se inicializa con el valor del argumento b (Linea 5).

Se declaran los métodos matemáticos a implementar (suma, resta, producto, división):

se realiza la operación correspondiente a cada método (Lineas 8, 11, 14 y 18).
en la linea 17 se evalúa el valor de la variable b condicionando que si el valor de b es diferente de cero, entonces puede realizar el calculo correspondiente, de lo contrario arroja un mensaje de Error!, ya que las divisiones sobre cero retornan un valor nulo o indefinido.

El script completo seria:

En la linea 24 se crea una instancia de la clase OperacionesMatematicas inicializando las variables a y b con los valores (20 , 12) respectivamente.
Y luego solo se llaman los métodos matematicos de la clase.

Para ejecutar este script se abre la consola, se ubica en la carpeta que contiene el archivo .py y se digita el comando python seguido del nombre del archivo, dando como resultado:

Únete a la página de Python en