Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Java / Crea una libreria TimeChooser – Selector de Tiempo

Crea una libreria TimeChooser – Selector de Tiempo

Autor jc mouse Miércoles, Octubre 29, 2014

En este post crearemos un componente gráfico para java que nos permitirá seleccionar la hora del día de una manera sencilla y rápida.

TimeChooser java

Necesitamos

– Java

– IDE Netbeans 7.x o superior

Nivel: Avanzado

Tiempo: 30 minutos

1.- Crea u nuevo proyecto en Netbeans: FILE -> NEW PROJECT –> JAVA -> JAVA CLASS LIBRARY, coloca como nombre de proyecto “TimeChooser“.

Dale la siguiente estructura al proyecto:

Selector de tiempo

En el paquete “time” tenemos una clase llamada TimeChooser, este sera nuestra componente en si, también tenemos otra clase llamada “TimePanel” este es un JPanel.

En el paquete “Resources” tenemos tres imágenes de tipo PNG, estos son dos flechas y una imagen de un reloj:

icono tiempo

Puedes usar estas imágenes o sino utiliza el editor gráfico de tu preferencia y crea las tuyas, los nombres son importantes, colócalas tal cual las ves en la imagen de arriba.

2.- Cuando presionamos el botón de nuestro componente aparece un menú PopUp con una pequeña ventana que nos permite elegir la hora del día, esta ventana es un JPanel (TimePanel).

Podemos crear este TimePanel desde código, pero ese no es el objetivo de este tutorial, así que nos ayudaremos del editor gráfico de Netbeans para facilitarnos la tarea. Abre el JPanel que creaste en el paso 1 y en vista diseño trata de darle el siguiente aspecto:

desgin

Tomate tu tiempo, no tiene que quedar igual, pero si los nombres de los controles (numerados desde 1 al 12) deben ser los mismos que en la imagen. Si prefieres crear este Jpanel desde código, no hay ningún problema, pero cuidado con los nombres de los objetos.

3.- Una vez que estés satisfecho con tu trabajo, abre el TimePanel en modo código.

Primeramente debemos añadir las referencias a los diferentes paquetes que usaremos en este proyecto.

import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.Calendar;
import javax.swing.JPopupMenu;
import javax.swing.JTextField;

A continuación declaramos las variables que usaremos, (04) una instancia a Calendar y (05) un JTextField

01 public class TimePanel extends javax.swing.JPanel {
02 
03     //--------------
04     Calendar cal = Calendar.getInstance();
05     private JTextField texto;

Cuando creamos el JPanel, netbeans automáticamente crea todo el código necesario para la interfaz, incluido su constructor de clase, esto muchas veces es más que suficiente para nuestra trabajo, en este caso no lo es, así que a continuación de este constructor, creamos un nuevo constructor pero con un parámetro de entrada de tipo JTextField que sera el componente padre de este JPanel

    public TimePanel() {
        initComponents();
    }

Nuevo constructor de clase

public TimePanel(JTextField jtextField) {
   initComponents();
   //aqui codigo
}

En este nuevo constructor pasamos el componente padre y ademas iniciamos valores de la hora y minuto  del sistema gracias al Calendar.

Como trabajamos con netbeans en modo gráfico, este crea todos los eventos necesarios para cada uno de los controles del JPanel, sin embargo, para hacer maá comprensible este tutorial, declararemos estos eventos en el nuevo constructor de clase.

A continuación el código completo del nuevo constructor:

    /** 
 * Constructor de clase con parametro de entrada
 * @param JTextField componente padre
 */
    public TimePanel(JTextField jtextField) {
        initComponents();

        texto = jtextField;
        //Se coloca el tiempo del sistema
        Hora.setText( (cal.get(Calendar.HOUR)<10)?"0"+cal.get(Calendar.HOUR):String.valueOf(cal.get(Calendar.HOUR)) );
        Minuto.setText( (cal.get(Calendar.MINUTE)<10)?"0"+cal.get(Calendar.MINUTE):String.valueOf(cal.get(Calendar.MINUTE)) );

        if( cal.get( Calendar.AM_PM ) == 0 ){  
            AmPm.setText("AM");
        }else
        {
            AmPm.setText("PM");
        }

        //Eventos de los controles del componente
        btnHora1.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent evt) {
                ajustarHora("-");                
            }
        });
        btnHora2.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent evt) {
                ajustarHora("+");                
            }
        });

        btnMinuto1.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent evt) {
                ajustarMinuto("-");                
            }
        });
        btnMinuto2.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent evt) {
                ajustarMinuto("+");                
            }
        });
        btnAmPm1.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent evt) {
                AmPm.setText( (AmPm.getText().equals("AM"))?"PM":"AM" );             
            }
        });
        btnAmPm2.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent evt) {
                AmPm.setText( (AmPm.getText().equals("AM"))?"PM":"AM" );             
            }
        }); 
        btnCancel.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent evt) {
                JPopupMenu menu = ((JPopupMenu) getParent());
                menu.setVisible(false);
            }
        }); 
        btnSet.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent evt) {
                JPopupMenu menu = ((JPopupMenu) getParent());
                texto.setText( Hora.getText() + ":"+Minuto.getText() + " " + AmPm.getText() );
                menu.setVisible(false);
            }
        }); 
    }//end constructor

 

Para terminar con el TimePanel, declaramos dos métodos privados que nos sirven para ajustar la Hora y el Minuto del componente cada vez que presionemos las flechas

    /** 
 * Metodo privado que ajusta el valor de la hora
 * @param String value cadena que puede tener los valores 
 * "+" para incrementar el valor
 * "-" para decrementar el valor
 */
    private void ajustarHora(String value)
    {
        int h = Integer.valueOf( Hora.getText() );                

        if( value.equals("+"))
        {
            h = (h==12)?1🙁h+1);    
        }
        else if( value.equals("-"))
        {
            h = (h==1)?12🙁h-1);
        }
        String s = (h<10)?"0"+h:String.valueOf(h);
        Hora.setText(s);
    }

    /** 
 * Metodo privado que ajusta el valor del minuto
 * @param String value cadena que puede tener los valores 
 * "+" para incrementar el valor
 * "-" para decrementar el valor
 */
    private void ajustarMinuto(String value)
    {
        int m = Integer.valueOf( Minuto.getText() );                

        if( value.equals("+"))
        {
            m = (m==59)?0🙁m+1);    
        }
        else if( value.equals("-"))
        {
            m = (m==1)?59🙁m-1);
        }
        String s = (m<10)?"0"+m:String.valueOf(m);
        Minuto.setText(s);
    }

4.- Para terminar este post, abre la clase TimeChooser, esta clase que se extiende de un JTextField, es nuestra clase principal, nuestro componente swing en si. Es en este JtextField modificado que añadimos el botón en el lado derecho e implementamos el PopPup Menu para abrir y mostrar el TimePanel para seleccionar la Hora y el Minuto del día.

El código completo de la clase es el siguiente:

package org.bolivia.time;
import java.awt.Cursor;
import java.awt.Dimension;
import java.awt.Insets;
import java.awt.event.ComponentEvent;
import java.awt.event.ComponentListener;
import java.awt.event.InputEvent;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JPopupMenu;
import javax.swing.JTextField;
/**
 * @web http://www.jc-mouse.net/
 * @author Mouse
 */
public class TimeChooser extends JTextField implements ComponentListener {

    //Dimensiones del componente
    private Dimension dimension = new Dimension(120,24);
    //Boton para abrir el panel selector de tiempo
    private final JButton button = new JButton();
    //menu emergente
    private JPopupMenu popup = new JPopupMenu();    
    private TimePanel timePanel;    

    /** Constructor de clase*/
    public TimeChooser()
    {
        //Propiedades del jtextfield
        setSize(dimension);
        setPreferredSize(dimension);
        setText("");

        //propiedades del boton
        button.setText("");                                
        button.setContentAreaFilled(true);
        button.setMargin(new Insets(1, 1, 1, 1));
        button.setVisible(true);
        button.setFocusPainted(false);
        button.setCursor(new Cursor(Cursor.HAND_CURSOR));
        button.setIcon(new ImageIcon(getClass().getResource("/org/bolivia/resources/clock.png")));
        updateButton();
        add( button );//se añade el boton al jtextfield

        //eventos del boton
        button.addMouseListener( new MouseListener(){

            //cuando se realice un clic sobre el boton, aparecera el menu emergente
            @Override
            public void mouseClicked(MouseEvent e) {   
                if((e.getModifiers() & InputEvent.BUTTON1_MASK) == InputEvent.BUTTON1_MASK){
                    popup.show( e.getComponent() , 0 , button.getParent().getSize().height );                    
                }                
            }

            @Override
            public void mousePressed(MouseEvent e) {/*...*/}

            @Override
            public void mouseReleased(MouseEvent e) {/*...*/}

            @Override
            public void mouseEntered(MouseEvent e) {/*...*/}

            @Override
            public void mouseExited(MouseEvent e) {/*...*/}

        });

        setVisible(true);
        addComponentListener(this);    

        timePanel = new TimePanel(this);
        popup.add(timePanel);
    }

    /** Ajusta la dimension y posicion del boton X*/
    private void updateButton()
    {
        //la altura del boton sera la misma que la del jtextfield 
        button.setSize( new Dimension(24, this.getSize().height));
        button.setPreferredSize( new Dimension(24, this.getSize().height) );        
        //posicion - extremo derecho
        button.setLocation(getWidth()-button.getWidth(), 0);        
    }

    //Metodos abstractos de ComponentListener
    @Override
    public void componentResized(ComponentEvent e) {
        //cuando el jtextfield cambie de tamaño, el boton tambien lo hara respecto a la altura
        //el ancho del boton es fijo
        updateButton(); 
    }

    @Override
    public void componentMoved(ComponentEvent e) {/*...*/}

    @Override
    public void componentShown(ComponentEvent e) {/*...*/}

    @Override
    public void componentHidden(ComponentEvent e) {/*...*/}

}

Compila el proyecto para crear el JAR y estará listo para usar en otros proyectos

TimeChooser java

Proyecto Netbeans

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

Compartir imagen desde android – Share Image

Compartir imagen desde android – Share Image

En este post crearemos una aplicación android que nos permitirá compartir una imagen con Facebook, whatsapp, bluetooth,...

Mapas HTML5 – Elementos del canvas- Parte 4

Mapas HTML5 – Elementos del canvas- Parte 4

Continuando con nuestro tutorial de “Mapas interactivos con HTML5” , esta es la sección que corresponde a lo...

Añade un PlaceHolder a un JTextField

Añade un PlaceHolder a un JTextField

PlaceHolder: PlaceHolder es un atributo propio de HTML5 y es el texto que aparece dentro de un campo de texto (un JTextF...

Agregar soporte para JNLP en servidor Apache

Agregar soporte para JNLP en servidor Apache

Java Network Launching Protocol (JNLP) es una especificación usada por Java Web Start. Esta especificación, permite tene...

Conexion c# y MySQL con ADO.NET

Conexion c# y MySQL con ADO.NET

Uno de los mayores problemas que se presenta en el desarrollo de una aplicación, es el acceso a la base de datos y el mé...

Blog MVC – El theme y primer controlador [p3]

Blog MVC – El theme y primer controlador [p3]

Tercera parte del tutorial [Crea tu blog con el patrón MVC y php] En este post trabajaremos en el Theme del blog, agrega...

2 comentarios en “Crea una libreria TimeChooser – Selector de Tiempo”

  1. DragShot dice:

    El procedimiento para hacer los componentes desplegables en un JPopupMenu me será útil para varias cosas. Gracias por el aporte.

  2. javier dice:

    Como siempre aportes de primera, saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

“Material Design es una guía integral para el diseño visual, de movimientos y de interacción en distintas platafor...

Un TextView autocompletado nos facilita el ingreso de información en aplicaciones móviles ya que te muestra posibles opc...

Un Tabbed Activity te permite cambiar la vista entre  fragmentos desplazando el dedo  de izquierda a derecha o de derech...

Este 12 de Mayo de 2017 se produjo un ataque masivo mundial del ransomware WannaCry  el  que afecto a más de 200000 comp...

Android Bolivia

Bandera en Alto