some image

Month junio 2015

Validar formulario en angularJS

Etiquetas: , Blog, Web No comments
AngularJS Logo

AngularJS Validando Formularios

Esta es una validación de un formulario en angularJS, basicamente consiste en verificar la property $valid del formulario que estamos utilizando y aplicar algunos estilos para algunas directivas de angular. Pero bueno, empezaré por el principio.

1. Creando el formulario

  • Al momento de realizar nuestras validaciones con angular es necesario quitar la validación que hace el navegador utilizando el atributo novalidate sobre el elemento form de html.
  • Utilizar la directiva de angular ng-submit, para decirle a angular cuál será la validación que queremos realizar y qué sucederá al momento de enviar nuestro formulario.
  • Si queremos mostrar mensajes especificos de validación, podemos utilizar también el atributo $error, del campo que estamos llenando o validando, teniendo en cuenta que es necesario previamente haber utilizado la directiva ng-model.

A continuación colocaré el código HTML de mi formulario.

Thank you for send us your information!

 

2. Creando la lógica en JavaScript

En este ejemplo, he creado un metodo llamado addUser(), el cuál una vez todos los datos del formulario se encuentran validados correctamente, en este método puedo hacer lo que considere necesario, como por ejemplo guardar mi usuario, agregar a un array de objetos, etc…

(function(){
    var app = angular.module('signUpExample',[]);

    app.controller('signUpController', function(){
        this.user = {};
        this.submitted = false;
        this.addUser = function(){
            users.push(this.user);
            this.user = {};
            this.submitted = true;
        };
    });
})();

3. Agregando estilos.

Para que los campos tengan el efecto de que son validados en tiempo real, angularJS a medida que valida cada campo adiciona y cambia classes de estilos css, así que para resaltar cuando un campo se encuentra correctamente, es necesario sobreescribir los estilos a continuación.

.ng-invalid.ng-dirty{
    border-color:red;
}

.ng-valid.ng-dirty{
    border-color:green;
}

4. Resultado

Aquí puedes ver el demo funcionando.

angularValidacionForm1 angularValidacionForm2 angularValidacionForm3 angularValidacionForm4

5. Código Fuente

 

Git Logo

Código en GitHub

Extraer contenido con expresiones regulares

Etiquetas: , Blog, Programación No comments

Bien, en algún momento todos hemos escuchado sobre las expresiones regulares y la magia que hacen para verificar si se cumple la expresión y así mismo realizar validaciones. Por otro lado, las expresiones regulares nos permiten también extraer contenido de esas gigantescas cadenas de texto, ayudándonos a simplificar la codificación y reducir unas cuantas lineas de código.

 

Sé que este es un ejemplo sencillo, pero muy útil para todos aquellos que en algún momento buscan la forma de extraer el contenido de un texto utilizando expresiones regulares :).

 

1. Código fuente

 

import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class ContentExtractorRegularExpression {
    
    private final String REGULAR_EXPRESION_VOWELS = "[aeiouAEIOU]";
    private final String REGULAR_EXPRESION_NUMBERS = "\\d";
    private final String REGULAR_EXPRESION_P_TAG_HTML = "

(.+?)

"; private final String REGULAR_EXPRESION_NOT_EXISTS = "[y]"; /** * Extract the vowels in the text * * @param text * @return */ public String getVowels(String text){ StringBuilder result = new StringBuilder(); Pattern pattern = Pattern.compile(REGULAR_EXPRESION_VOWELS); Matcher matcher = pattern.matcher(text); while(matcher.find()){ result.append(matcher.group()).append(","); } return (!result.toString().isEmpty()) ? result.substring(0,result.toString().length() - 1) : "Not exists content with the regular expression " + REGULAR_EXPRESION_VOWELS; } /** * Extract the numbers in the text * * @param text * @return */ public String getNumbers(String text){ StringBuilder result = new StringBuilder(); Pattern pattern = Pattern.compile(REGULAR_EXPRESION_NUMBERS); Matcher matcher = pattern.matcher(text); while(matcher.find()){ result.append(matcher.group()).append(","); } return (!result.toString().isEmpty()) ? result.substring(0,result.toString().length() - 1) : "Not exists content with the regular expression " + REGULAR_EXPRESION_NUMBERS; } /** * Extract the elements which are a tag expression element * @param text * @return */ public String getTagElements(String text){ StringBuilder result = new StringBuilder(); Pattern pattern = Pattern.compile(REGULAR_EXPRESION_P_TAG_HTML); Matcher matcher = pattern.matcher(text); while(matcher.find()){ result.append(matcher.group(1)).append(","); } return (!result.toString().isEmpty()) ? result.substring(0,result.toString().length() - 1) : "Not exists content with the regular expression " + REGULAR_EXPRESION_P_TAG_HTML; } /** * This method should return the Not exist content with the regular expression * * @param text * @return */ public String getNotExistRegularExpression(String text){ StringBuilder result = new StringBuilder(); Pattern pattern = Pattern.compile(REGULAR_EXPRESION_NOT_EXISTS); Matcher matcher = pattern.matcher(text); while(matcher.find()){ result.append(matcher.group()).append(","); } return (!result.toString().isEmpty()) ? result.substring(0,result.toString().length() - 1) : "Not exists content with the regular expression " + REGULAR_EXPRESION_NOT_EXISTS; } public static void main(String[] args) { String text = "Hace 1 millon de años en la tierra existia una raza " + "de seres extraordinarios con muchos poderes, solo 4 fantasticos " + "tenian la capacidad de dominar todos los elementos. " + "

Cocoman

,

RockMan

, entre otros."; ContentExtractorRegularExpression example = new ContentExtractorRegularExpression(); System.out.println("Text : " + text + "\n"); System.out.println(example.getVowels(text)); System.out.println(example.getNumbers(text)); System.out.println(example.getTagElements(text)); System.out.println(example.getNotExistRegularExpression(text)); } }

 

2. Salida

Text : Hace 1 millon de años en la tierra existia una raza de seres extraordinarios con muchos poderes, solo 4 fantasticos tenian la capacidad de dominar todos los elementos. 

Cocoman

,

RockMan

, entre otros. a,e,i,o,e,a,o,e,a,i,e,a,e,i,i,a,u,a,a,a,e,e,e,e,a,o,i,a,i,o,o,u,o,o,e,e,o,o,a,a,i,o,e,i,a,a,a,a,i,a,e,o,i,a,o,o,o,e,e,e,o,o,o,a,o,a,e,e,o,o 1,4 Cocoman,RockMan Not exists content with the regular expression [y]

Ocultar header de la pagina con scroll down

Etiquetas: Blog, Web No comments

Durante mucho tiempo siempre me llamo la atención esas páginas en las qué uno hacía Scroll Down al contenido y mágicamente desaparecía el Header o el Menú en la página… Así que este fin de semana me puse en la tarea en descubrir la forma de hacerlo y voila!.. acá describo mi experiencia.

1. Revisando el código.

La forma más sencilla, es utilizando algo de jQuery y haciendo una validación de la posición del Scroll, la cuál nos permitirá hacer aparecer o desparecer el Header. (Lo interesante de esto es que podemos sacar nuestra creatividad a flote para hacer muchas más cosas :) ).

Acá presentó el código de JavaScript y el ejemplo en vivo de como ocultar header de la pagina con scroll down.

 

var lastPositionScrollTop = 0;

/***
 * Appear and disappear the header depends the
 * position of the Scroll
 */
$(window).scroll(function () {
    var position = $(this).scrollTop();
    if (position < lastPositionScrollTop){
        $('.navbar ').fadeIn("slow");
    } else {
        $('.navbar ').fadeOut("slow");
    }
    lastPositionScrollTop = position;
});

 

2. Demo

Acá podrás visualizar el DEMO para ocultar header de la pagina con scroll down.

3. Código Fuente

 

Git Logo

Código en GitHub

Tic-Tac-Toe usando AngularJS

Etiquetas: , Blog, Web No comments

Estoy seguro que todos alguna vez en la vida llegamos a jugar este famoso Tic-Tac-Toe o Triqui, sobre un pedazo de papel mientras estábamos en el colegio o aburridos. Bien, aprovechando mi self-study que estoy haciendo con Angular decidí aprender jugando 😛 , así que acá traigo el juego de Tic-Tac-Toe usando AngularJS.

1. Introducción

Según la definición de Wikipedia este juego se define como :

Es unjuego de lápiz y papel entre dos jugadores: O y X, que marcan los espacios de un tablero de 3×3 alternadamente. Un jugador gana si consigue tener una línea de tres de sus símbolos: la línea puede ser horizontal, vertical o diagonal.

2. Estructura de archivos

La estructura de archivos de elaboró de la siguiente manera :

Estructura de archivos

Estructura de archivos

 

  • index.html => Archivo principal
  • css => Estilos y Bootstrap
  • js => Lógica del juego en JavaScript y angular, librerias de angularJS, jQuery y bootstrap.
  • fonts => Fuentes para manejar estilos más interesantes.
  • img => Para almacenar imagenes en caso de que se quiera tener una interfaz más agradable.

 

3. Creando el tablero

Para crear el tablero, decidí utilizar la directiva de angularJS ng-repeat la cuál nos permite iterar los elementos de una lista o arreglo de datos. Adicionalmente sobre los botones, es necesario utilizar la directiva ng-click y ng-disabled, para generar el evento cuando se pulsa click y bloquear el botón cuando ya ha hecho un movimiento.

 

4. Creando el Objeto de juego

Para manejar la lógica en el juego, decidí utilizar un objeto en JavaScript con expresiones anonimas (Funciones) que me permitieran conocer estados y validaciones del objeto en cuestión. El objeto TicTacToe, es la representación de una clase en JavaScript con sus atributos y métodos. 😀

 

var TicTacToe = function(){
        this.title = "Tic Tac Toe";
        this.activePlayer = null;
        this.winner = null;
        this.draw = true;
        this.movements = null;
        this.players=[
            {name: "Player 1", symbol:"X", movements : []},
            {name: "Player 2", symbol:"O", movements : []}
        ];
        this.solutions = [
            [1,2,3],   [4,5,6],   [7,8,9], // Horizontals
            [1,4,7],   [2,5,8],   [3,6,9], // Verticals
            [1,5,9],   [7,5,3]    // Diagonals
        ];
        this.board ={
            rows:[
                [
                    {id: 1, value: "", isChecked:false},
                    {id: 2, value: "", isChecked:false},
                    {id: 3, value: "", isChecked:false}
                ],
                [
                    {id: 4, value: "", isChecked:false},
                    {id: 5, value: "", isChecked:false},
                    {id: 6, value: "", isChecked:false}
                ],
                [
                    {id: 7, value: "", isChecked:false },
                    {id: 8, value: "", isChecked:false},
                    {id: 9, value: "", isChecked:false}
                ]
            ]
        };
        this.fillBox = function(id){
            for(var i = 0; i < this.board.rows.length; i++){
                for(var k = 0; k < this.board.rows[i].length; k++){
                    if(this.board.rows[i][k].id == id){
                        if(this.activePlayer == null){
                            this.activePlayer = this.players[0];
                        }else{
                            if(this.activePlayer.name == this.players[0].name){
                                this.players[0].movements.push(id);
                                this.verifyGame(this.players[0]);
                                this.activePlayer = this.players[1];
                            }else{
                                this.players[1].movements.push(id);
                                this.verifyGame(this.players[1]);
                                this.activePlayer = this.players[0];
                            }
                        }
                        this.board.rows[i][k].value = this.activePlayer.symbol;
                        this.board.rows[i][k].isChecked = true;
                    }
                }
            }
        };
        this.verifyGame =function(player){
            var totalMovements = (this.players[0].movements.length + this.players[1].movements.length);
            if(totalMovements == this.board.rows.length * this.board.rows[0].length){
                this.draw = false;
            }else{
                for(var i = 0; i < this.solutions.length; i++){
                    var isSolution = true;
                    for(var k = 0; k < this.solutions[i].length; k++){
                        isSolution &= (player.movements.indexOf(this.solutions[i][k]) != -1);
                    }
                    if(isSolution){
                        this.winner = player.name;
                        this.movements = player.movements.length;
                        this.highLightSolution(this.solutions[i]);
                    }
                }
            }
        };
        this.highLightSolution = function(solution){
            for(var i = 0; i < solution.length; i++){
                var button = $("button")[solution[i] - 1];
                $(button).addClass("solution-check");
            }
        }
    };

 

De esta manera, cada vez que se necesario iniciar un nuevo juego o crear una instancia desde nuestro código en angularJS, simplemente nos limitamos a escribir algo como esto.

 

var app = angular.module('ticTacToe', []);
    app.controller('GameController', function(){
        this.game = new TicTacToe();
        this.game.activePlayer = this.game.players[0];
        this.newGame = function(){
            this.game = new TicTacToe();
            this.game.activePlayer = this.game.players[0];
        }
    });

5. Verificando cuando un jugador gana o empata el juego

Para determinar cuando un jugador gana o empata el juego, se hace a partir de la cantidad de movimientos jugados y las posibles soluciones para el juego. Es por eso que he creado un arreglo de soluciones y he contado la cantidad de movimientos para verificar dichas situaciones.

this.solutions = [
            [1,2,3],   [4,5,6],   [7,8,9], // Horizontals
            [1,4,7],   [2,5,8],   [3,6,9], // Verticals
            [1,5,9],   [7,5,3]    // Diagonals
        ];

this.verifyGame =function(player){
            var totalMovements = (this.players[0].movements.length + this.players[1].movements.length);
            if(totalMovements == this.board.rows.length * this.board.rows[0].length){
                this.draw = false;
            }else{
                for(var i = 0; i < this.solutions.length; i++){
                    var isSolution = true;
                    for(var k = 0; k < this.solutions[i].length; k++){
                        isSolution &= (player.movements.indexOf(this.solutions[i][k]) != -1);
                    }
                    if(isSolution){
                        this.winner = player.name;
                        this.movements = player.movements.length;
                        this.highLightSolution(this.solutions[i]);
                    }
                }
            }
        };

 

6. Resaltando la solución

Para resaltar la solución, simplemente utilicé una clase en css y una busqueda de los botones con jQuery, identificando que posiciones pertenecian a la posición correspondiente del tablero inicial.

.solution-check{
    background-color: #c1e2b3;
}

 

this.highLightSolution = function(solution){
            for(var i = 0; i < solution.length; i++){
                var button = $("button")[solution[i] - 1];
                $(button).addClass("solution-check");
            }
        }

7. Resultado

Acá se muestran algunas  imágenes del resultado final 😀 .

Winner Tic Tac Toe Game

Winner Tic Tac Toe Game

Draw Tic Tac Toe Game

Draw Tic Tac Toe Game

Tic Tac Toe Game

Tic Tac Toe Game

 

Jugar Tic Tac Toe (Demo)

8. Código fuente

Git Logo

Git Logo

Creación de dibujo simple con el método paintComponent

Etiquetas: , , , , , Blog, Programación 1 comment

Captura de pantalla 2015-06-18 00.15.24

 

Puede que la creación de dibujos simples en JAVA no sea muy útil en el campo laboral de un programador promedio, aún así es un buen ejercicio aprender algo nuevo sobre la interfaz gráfica de usuario (GUI) y de paso poder profundizar mas en el uso de los ciclos repetitivos while (ya verán porque).

Además de todo lo anterior es de gran ayuda entender como funciona el sistema de coordenadas y como se puede ubicar un punto en el contenedor del programa.

Para empezar hay que tener en cuenta que el sistema de coordenadas empieza desde la esquina superior izquierda donde las parejas ordenadas vendrían siendo (0,0) y finaliza en el último punto de la pantalla de la esquina inferior derecha donde las parejas ordenadas son el tamaño de ancho y alto de la aplicación.

Basado en lo dicho anteriormente se puede escoger el punto inicial y final de nuestro dibujo, sin embargo puedes preguntarte… Que pasaría si cambias el tamaño de la ventana de tu aplicación?.

La respuesta es que tu dibujo no se re-acomodaría al nuevo tamaño de la pantalla y posiblemente quede volando o sobrando según sea el caso. Por ese motivo se deben de crear dos variables que puedan traer el ancho y alto de la aplicación y después de esto con la formula porcentual puedes escoger el inicio y final de tu dibujo.

Teniendo claro esto ya se puede entrar a jugar con los ciclos repetitivos while y crear la figura o dibujo que se desea, yo decidí hacer una c dentro de dos etiquetas (mayor que y menor que ) que vendría siendo un sencillo logo de codes and tags, acá les va el código…

Clase que crea el panel

 

package codesdraw;
import javax.swing.JPanel;
import java.awt.Graphics;

//Clase CodesPanel hereda todos los componentes de la clase JPanel
public class CodesPanel extends JPanel{
    public void paintComponent(Graphics g){
        super.paintComponent(g);
        //Se obtiene el ancho y alto de la aplicación
        int anchura = getWidth();
        int altura = getHeight();
        //Se definen los puntos X y Y que eventualmente serán cambiados según sea el caso
        int puntoInicioX =  (anchura / 100) * 15;
        int puntoInicioY =  (altura / 100) * 60;
        //la variable recorrido es el espacio que habrá entre cada nuevo caracter del dibujo
        int recorrido =  (anchura / 100) * 2;
        //Los limites son utilizados para determinar el final del dibujo
        int limite1 = (anchura / 100) * 50;
        int limite2 = (anchura / 100) * 60;
        int limite3 = (altura / 100) * 45 ;
        int limite4 = (altura / 100) * 77 ;
        int limite5 = (anchura / 100) * 45 ;
        int limite6 = (anchura / 100) * 65 ;
        //Variables tipo String que contienen el caracter que tendrán las imagenes
        String caracter1 = "*";
        String caracter2 = "+";


        //Ciclos while que crean la figura de la etiqueta
        while(puntoInicioX < limite1){
            g.drawString(caracter1, puntoInicioX, puntoInicioY);
            puntoInicioX += recorrido;
            puntoInicioY -= recorrido;
        }

        puntoInicioX =  (anchura / 100) * 15;
        puntoInicioY =  (altura / 100) * 60;

        while(puntoInicioX < limite1){             g.drawString(caracter1, puntoInicioX, puntoInicioY);             puntoInicioX += recorrido;             puntoInicioY += recorrido;         }         puntoInicioX =  (anchura / 100) * 95;         puntoInicioY =  (altura / 100) * 60;         while(puntoInicioX >= limite2){
            g.drawString(caracter1, puntoInicioX, puntoInicioY);
            puntoInicioX -= recorrido;
            puntoInicioY -= recorrido;

        }

        puntoInicioX =  (anchura / 100) * 95;
        puntoInicioY =  (altura / 100) * 60;

        while(puntoInicioX >= limite2){
            g.drawString(caracter1, puntoInicioX, puntoInicioY);
            puntoInicioX -= recorrido;
            puntoInicioY += recorrido;

        }

        //Ciclos while que dibujan la C dentro de las etiquetas < >

        puntoInicioX =  (anchura / 100) * 65;
        puntoInicioY =  (altura / 100) * 50;
        while(puntoInicioY > limite3){
            g.drawString(caracter2, puntoInicioX, puntoInicioY);
            puntoInicioY -= recorrido;

        }



        puntoInicioX =  (anchura / 100) * 65;
        puntoInicioY =  (altura / 100) * 45;
        while(puntoInicioX > limite5){
            g.drawString(caracter2, puntoInicioX, puntoInicioY);
            puntoInicioX -= recorrido;
        }



        puntoInicioX =  (anchura / 100) * 47;
        puntoInicioY =  (altura / 100) * 45;
        while(puntoInicioY < limite4){
            g.drawString(caracter2, puntoInicioX, puntoInicioY);
            puntoInicioY += recorrido;

        }

        puntoInicioX =  (anchura / 100) * 47;
        puntoInicioY =  (altura / 100) * 77;
        while(puntoInicioX < limite6){
            g.drawString(caracter2, puntoInicioX, puntoInicioY);
            puntoInicioX += recorrido;

        }


    }
}

Clase principal

package codesdraw;


import javax.swing.*;
import java.awt.*;

public class CodeDraw {
    public static void main(String args[]){
        //Se instancia la clase CodePanel
        CodesPanel panel = new CodesPanel();
        JFrame aplicacion = new JFrame();
        //Se agrega el panel dentro del JFrame
        aplicacion.add(panel);
        //Cambio color del fondo y la letra
        panel.setBackground(Color.black);
        panel.setForeground(Color.green);
        aplicacion.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        //tamaño de la ventana
        aplicacion.setSize(350,350);
        aplicacion.setVisible(true);

    }
}

Acá puedes descargar el proyecto desde mi repositorio en GITHUB —> paintComponent

 

Para terminar me gustaría compartir otro ejemplo algo mas complejo del uso que se le puede dar al método paintComponent.

Captura de pantalla 2015-06-18 00.23.48