Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Java / Formulario de login personalizado

Formulario de login personalizado

Autor jc mouse jueves, mayo 26, 2016

Hola, en este oportunidad dejo a disposición un formulario de logueo que se me ocurrió de repente creo inspirado en las interfaces de los teléfonos celulares que cada ves están mas trabajadas 🙂 el resultado me pareció interesante aparte de que se sale de los típicos formularios rectangulares, el formulario es el siguiente:

hexagon java

Básicamente este formulario cuenta con 6 botones de forma hexagonal los cuales cada uno corresponde a un usuario del sistema, para ingresar, se hace un clic en cualquier usuario y este mostrara una ventana emergente para escribir la contraseña o palabra clave.

No explicare paso a paso la construcción del mismo, el código esta comentado y para un usuario de java nivel intermedio, no tendrá problemas en entender el código, creo 🙂 pero cualquier duda en comentarios.

  • IDE: Netbeans 8.1
  • Java 7

La clase principal, es la que transforma los botones rectangulares en un polígono de 6 lados, se llama “HexagonButton.java“, el cogido es el siguiente:

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Cursor;
import java.awt.Dimension;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.RenderingHints;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.geom.GeneralPath;
import java.awt.geom.Point2D;
import java.util.ArrayList;
import javax.swing.JComponent;
/**
 * Boton de forma hexagonal
 * see https://www.jc-mouse.net/
 * @author MOUSE
 */
public class HexagonButton extends JComponent implements MouseListener {

    private Image avatar;
    private ArrayList<Point2D.Float> vertices = new ArrayList();
    private Signboard signboard;
    private boolean entered = false;
    private String nickName;
    
    /**
     * constructor de clase
     */
    public HexagonButton(){
        super();        
        vertices = CalculateVertices(50,0,100);
        HexagonButton.this.setCursor(new Cursor(Cursor.HAND_CURSOR));
        HexagonButton.this.setSize(new Dimension((int) vertices.get(2).x, (int) vertices.get(3).y));        
        HexagonButton.this.setOpaque(false);                
        HexagonButton.this.addMouseListener(HexagonButton.this);
    }
    
    /**
     * Calcula vertices del hexagono
     *       A        B
     * 
     * 
     * F                    C
     * 
     * 
     *      E          D
     * @param x coordenada eje x
     * @param y coordenada eje y
     * @param side tamaño de lado del hexagono
     * @return ArrayList con los puntos que forman el hexagono
     */
    private ArrayList<Point2D.Float> CalculateVertices(float x, float y,float side)
    {
        ArrayList<Point2D.Float> array = new ArrayList();        
        float h;
        float r;            
        h = (float)(Math.sin( Math.toRadians(30)) * side);
        r = (float)(Math.cos(Math.toRadians(30)) * side);
        //vertices
        array.add( new Point2D.Float(x, y) );               //A
        array.add( new Point2D.Float(x + side, y) );        //B
        array.add( new Point2D.Float(x + side + h, y + r) );//C
        array.add( new Point2D.Float(x + side, y + r + r) );//D
        array.add( new Point2D.Float(x, y + r + r) );       //E
        array.add( new Point2D.Float(x - h, y + r ) );      //F 
        return array;
    }
  
    
    @Override
    public void paintComponent(Graphics g){
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);          
        //puntos principales del hexagono
        GeneralPath polygonPrincipal = new GeneralPath(GeneralPath.WIND_EVEN_ODD,6);                 
        polygonPrincipal.moveTo(vertices.get(0).x, vertices.get(0).y); 
        polygonPrincipal.lineTo(vertices.get(1).x, vertices.get(1).y);             
        polygonPrincipal.lineTo(vertices.get(2).x, vertices.get(2).y);             
        polygonPrincipal.lineTo(vertices.get(3).x, vertices.get(3).y);             
        polygonPrincipal.lineTo(vertices.get(4).x, vertices.get(4).y);             
        polygonPrincipal.lineTo(vertices.get(5).x, vertices.get(5).y);             
        polygonPrincipal.closePath();
        //coordenadas para el borde   
        GeneralPath polygonPrincipal2 = new GeneralPath(GeneralPath.WIND_EVEN_ODD,6);                 
        polygonPrincipal2.moveTo(vertices.get(0).x+1, vertices.get(0).y+1); 
        polygonPrincipal2.lineTo(vertices.get(1).x-2, vertices.get(1).y+1);             
        polygonPrincipal2.lineTo(vertices.get(2).x-2, vertices.get(2).y);             
        polygonPrincipal2.lineTo(vertices.get(3).x-2, vertices.get(3).y-1);             
        polygonPrincipal2.lineTo(vertices.get(4).x+2, vertices.get(4).y-1);             
        polygonPrincipal2.lineTo(vertices.get(5).x+1, vertices.get(5).y);             
        polygonPrincipal2.closePath();
        
        if(entered)
            g2.setPaint(new GradientPaint(0, 0, new Color(214,214,214), 460, 0, new Color(255,255,255)));
        else
            g2.setPaint(new GradientPaint(0, 0, new Color(255,255,255), 460, 0, new Color(214,214,214)));
        g2.fill( polygonPrincipal );
        
        g2.setColor(  new Color(55,55,55) );        
        g2.setStroke( new BasicStroke( 4 ));
        g2.draw( polygonPrincipal2 );
        
        if(avatar!=null)
            g2.drawImage(avatar,53, 28,null);
        if(signboard!=null)
            signboard.draw(g2);
    }

    public String getNickName() {
        return nickName;
    }

    public void setNickName(String nickName) {
        this.nickName = nickName;
        signboard = new Signboard(nickName,53,126);
    }

    public Image getAvatar() {
        return avatar;
    }

    public void setAvatar(Image avatar) {
        this.avatar = avatar;
    }     
    
    @Override
    public void mouseClicked(MouseEvent e) {/*Aquí no hay nada que ver, circulen*/}

    @Override
    public void mousePressed(MouseEvent e) {/*Aquí no hay nada que ver, circulen*/}

    @Override
    public void mouseReleased(MouseEvent e) {/*Aquí no hay nada que ver, circulen*/}

    @Override
    public void mouseEntered(MouseEvent e) {
        entered=true;
        repaint();
    }

    @Override
    public void mouseExited(MouseEvent e) {
        entered=false;
        repaint();
    }
    
}

Y lo que hacemos es distribuir estos botones hexagonales en un JPanel, darle un fondo transparente tanto al JPanel como al JFrame (algo que nos permite versiones de java 7 para adelante) y ya esta. En el siguiente video el resultado final.

Código Fuente en este <<enlace pobre>>

enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Gráficos de tortas en iReport

Gráficos de tortas en iReport

Los gráficos de torta, también llamados gráficos de 360 grados o circulares, son gráficos estadísticos que se utilizan p...

Generar clases desde Esquemas XSD

Generar clases desde Esquemas XSD

XJC es una herramienta de linea de comandos del compilador de esquemas de JAXB que se puede utilizar para convertir un e...

Cambiar API Level en Android Studio

Cambiar API Level en Android Studio

Cuando desarrollamos aplicaciones en el IDE (Entorno de Desarrollo Integrado) de Android Studio, es importante indicar e...

Migrar proyecto Netbeans a Eclipse

Migrar proyecto Netbeans a Eclipse

En ocasiones por motivos cualesquiera que sea queremos pasar proyectos hechos en netbeans a Eclipse, Netbeans cuenta con...

Impresión de reportes con JasperReport + YAPA

Impresión de reportes con JasperReport + YAPA

En un post anterior [Guardar reporte PDF directamente con Jasperreports] vimos una manera de imprimir reportes directame...

Tesseract OCR: Reconocimiento de caracteres

Tesseract OCR: Reconocimiento de caracteres

OCR (Optical Character Recognition) en español, Reconociminto Optico de Caracteres, es el proceso por el cual  se extrae...

4 comentarios en “Formulario de login personalizado”

  1. Misael dice:

    No puedo descargar el codigo, se queda en espera y el conteo muestra 00:00:NaN

    Que puedo hacer?

    1. Mouse dice:

      usa chrome para las descargas 🙂

  2. alberto dice:

    Es demasiado codigo solo para un login 🙂

    1. Mouse dice:

      Welcome to Java programming 🙂

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Lorca Editor es una aplicación online creada por el desarrollador español Domingo Martin el cual tiene como objetivo el...

Eratóstenes era un matemático griego del siglo  III a.C. el cual ideó una manera rápida de obtener todos los números pri...

Las matemáticas son fundamentales para la vida y aparte de las actividades clásicas de enseñanza desarrolladas en el aul...

MVC es un patrón de arquitectura de software que separa una aplicación en tres componentes lógicos principales.  Estos s...

Herramientas

Generador de Enlaces a Whatsapp