Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Java / Formulario de login personalizado

Formulario de login personalizado

Por 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

Artículos similares

Crea una ventana de dialogo «Acerca de…» personalizado

Cuando se crean aplicaciones android o cualquier otro tipo de software, es importante dejar información del o los desarr[...]

Convertir objetos java en XML

Continuando con el estudio del meta lenguaje XML (Lenguaje de Marcado Extensible) bastante utilizado en el intercambio d[...]

Bloquear orientación de la pantalla

Cuando escribimos aplicaciones para android debemos tener cuidado al diseñar la interfaz en la posición que tomaran los[...]

El indice TIOBE

El índice TIOBE (TIOBE, The Importance of Being Earnest – «La importancia de ser honesto» – referencia a la[...]

Empaquetado de texturas en LibGDX

Continuando con los tutoriales sobre LibGDX (Librería para el desarrollo de videojuegos), en esta ocasión veremos como e[...]

Validación XML con Esquema XSD en PHP

En este post realizaremos un pequeño ejemplo de validación de archivos XML utilizando el esquema XSD y el lenguaje PHP ([...]