7.7 JSLIDER

 

Hola a todos, ¿Qué tal? JSlider es un componente que permite al usuario seleccionar un valor deslizando la perilla dentro del valor acotado.



Con la práctica veremos mejor su uso, pero por ejemplo, se utiliza para subir o bajar el volumen de un audio que tengamos en la aplicación, aumentar o disminuir la vista de una imagen.

Para programar el control deslizante o JSlider se utiliza la clase JSlider que tiene una serie de métodos, los más comunes son los siguientes:

·         setPaintTicks(boolean): se utiliza para que salgan las líneas de división en el slider.

·         setMajorTickSpacing(int): se utiliza para determinar de cuanto en cuanto va aumentando estas marcas.

·         setMinorTickSpacing(int): se utiliza para determinar de cuanto en cuanto va disminuyendo estas marcas.

·         setPaintLabels(boolean): se utiliza para que salgan los valores numéricos en el slider.

Pues como siempre para ver su uso y su sintaxis lo vamos a hacer mediante una práctica cuyo código inicial es el siguiente:

package swing;

 

import javax.swing.*;

 

public class Prac_Slider {

 

       public static void main(String[] args) {

           

             MarcoSlider mimarco = new MarcoSlider();

           

             mimarco.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

 

       }

 

}

 class MarcoSlider extends JFrame {

     

       public MarcoSlider(){

           

             setVisible(true);

           

             setBounds(550, 300, 550, 400);

           

             LaminaSlider milamina = new LaminaSlider();

           

             add(milamina);

 

           

       }

}

 class LaminaSlider extends JPanel {

       

        public LaminaSlider() {

             

             

        }

       

 

     

 } 

Vamos a empezar creando el slider para ello nos situamos dentro del constructor de la lámina:

JSlider control_deslizante = new JSlider();

Esta clase tiene sobrecarga de constructores por lo que sería recomendable ir a la API de Java y echar un vistazo a estos constructores, en nuestra práctica vamos a utilizar el constructor por defecto que nos lo coloca de forma horizontal, añadimos el slider a la lámina:

add(control_deslizante);

Probamos:



Vemos que se ha añadido el Slider al marco.

Las características que tiene es que se puede arrastrar de izquierda a derecha, al utilizar el constructor por defecto el slider se sitúa en 50, se supone que el valor mínimo es el 0 y el valor máximo es el 100.

Si utilizamos otro constructor, en la API de Java podemos ver la información del siguiente constructor:

JSlider(int min, int max, int value)

En este constructor le podemos indicar el valor mínimo, máximo y el valor por defecto. Si vamos al código y modificados el constructor:

JSlider control_deslizante = new JSlider(20, 50, 25);

Probamos:



Observamos que el slider ha cambiado.

En cuanto a la posición del slider, por defecto, aparece en horizontal pero podemos hacer que aparezca en vertical utilizamos otro constructor:

JSlider(int orientation)

También podemos utilizar otro constructor que nos indica la orientación, los valores mínimo, máximo y el valor por defecto:

JSlider(int orientation, int min, int max, int value)

Fijaros que para la orientación nos pide un número entero, eso es porque tenemos que utilizar una constante de clase que pertenece a la interfaz Swing. El slider también tiene un método setOrientation() por si queremos especificar la orientación a posteriori de haber creado el constructor. Si vais a la API de Java para ver más información sobre este método os indica que utiliza la constante de clase SwingConstants.VERTICAL o SwingConstants.HORIZONTAL. Si volvemos a modificar el constructor:

JSlider control_deslizante = new JSlider(SwingConstants.VERTICAL, 20, 50, 25);

Probamos de nuevo la aplicación:



Si no queremos especificar la orientación en el constructor lo podemos hacer mediante el método:

              JSlider control_deslizante = new JSlider(20, 50, 25);

              

              control_deslizante.setOrientation(SwingConstants.HORIZONTAL);

Para que el slider imprima marcas tenemos que utilizar tres métodos: setMajorTickSpacing() para indicarle de cuanto en cuanto tiene que ir las marcas mayores, setMinorTickSpacing() para indicarle de cuanto en cuanto tiene que ir las marcas menores y setPaintTicks() para imprimir esas marcas. Entonces lo haremos antes de agregar el slider a la lámina:

              control_deslizante.setMajorTickSpacing(25);

              

              control_deslizante.setMinorTickSpacing(5);

              

              control_deslizante.setPaintTicks(true);

Cambiamos el constructor para que empiece de 0 a 100 y que empiece en el 50:

JSlider control_deslizante = new JSlider(0, 100, 50);

Probamos de nuevo:



Si queremos que nos aparezcan los números utilizamos el método setPaintLabels():

control_deslizante.setPaintLabels(true);

Ejecutamos la aplicación:



Si queremos modificar el aspecto de los números lo podemos hacer con la clase Font pero siempre antes de pintarlos:

control_deslizante.setFont(new Font("Arial", Font.ITALIC, 12));

Y de nuevo probamos para ver el cambio:



Si probamos la aplicación podemos mover el Slider al valor que queramos, sin embargo, habrán veces que no queramos que se queden en algún valor intermedio, por ejemplo, si dejamos el Slider cerca del valor 50 que el Slider se mueva de forma automática como si fuera un imán y se quede en el valor 50, para ello utilizamos otro método llamado setSnapToTicks():

control_deslizante.setSnapToTicks(true);

Vamos a ver otro ejemplo con JSlider para darle interactividad y que responda a eventos o que desencadene acciones. Este objeto contiene además de los métodos que ya hemos visto tiene otro addChangeListener(ChangeListener), lo que hace este método es poner el componente a la escucha de un cambio en su estado, es decir, cada vez que nosotros modificamos el estados del elemento arrastrándolo a la izquierda o a la derecha lo que estamos haciendo es desencadenar un evento de tipo ChangeListener. Este método nos pide un parámetro de tipo ChangeListener, este parámetro sería la interfaz que tiene un método que será el que se ejecute cuando desencadenemos el evento.

Se recomienda ir a la API de Java para conocer más acerca de este método.

Para realizar el ejemplo partimos del siguiente archivo con el siguiente código, muy similar al anterior pero la lámina está vacía:

package swing;

 

import java.awt.Font;

 

import javax.swing.*;

 

public class Prac_Slider2 {

 

       public static void main(String[] args) {

           

             MarcoSlider2 mimarco = new MarcoSlider2();

           

             mimarco.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

 

       }

 

}

 class MarcoSlider2 extends JFrame {

     

       public MarcoSlider2(){

           

             setVisible(true);

           

             setBounds(550, 300, 550, 400);

           

             LaminaSlider2 milamina = new LaminaSlider2();

           

             add(milamina);

 

           

       }

}

 class LaminaSlider2 extends JPanel {

       

        public LaminaSlider2() {

 

             

        }

       

 

     

 }

Lo primero que vamos a hacer es crear los campos de clase, las creamos antes de la última llave de cierre del código:

private JLabel rotulo;

private JSlider control;

La variable de tipo JLabel rotulo corresponde al texto que aparecerá en la lámina y otra variable de tipo JSlider control.

Nos vamos al constructor de la lámina para crear nuestra interfaz gráfica, queremos que en la parte superior aparezca el Slider y en la parte central un texto. Así que si queremos esta distribución empezamos declarando los setLayouts

setLayout(new BorderLayout());

Agregamos el rotulo:

rotulo = new JLabel("Aprender a programar Java");

Añadimos el rotulo a la lámina en parte central:

add(rotulo, BorderLayout.CENTER);

El siguiente paso es crear el JSlider con sus características, agregarlo a la segunda lámina y agregar la segunda lámina arriba. Iniciamos el JSlider:

control = new JSlider(8,50,12);

Como lo que vamos a modificar es el tamaño de letra le pasamos como parámetros un mínimo de 8 para que letra no sea menor a 8 y un máximo de 50 para que el tamaño no sea mayor a 50, le especificamos un valor predeterminado de 12, para que la frase aparezca con un tamaño de 12. Añadimos las marcas y los rótulos correspondientes.

  control.setMajorTickSpacing(20);

             

              control.setMinorTickSpacing(5);

             

              control.setPaintTicks(true);

             

              control.setPaintLabels(true);

             

              control.setFont(new Font("Serif", Font.ITALIC, 10));

Creamos la segunda lámina y agregamos el JSlider a la lámina:

              JPanel laminaSlider = new JPanel();

             

              laminaSlider.add(control);

Tenemos que agregar esta segunda lámina en la zona norte de la lámina principal:

add(laminaSlider, BorderLayout.NORTH);

Si ejecutamos el archivo:



Ya tenemos la interfaz gráfica, el texto aparece por defecto con un tamaño de letra de 12, nos falta darle interactividad de forma que al arrastrar el JSlider a la izquierda o derecha el texto aumenta o disminuya de tamaño.

Para dar interactividad nos vamos a crear una clase que maneje los eventos y ponerla a la escucha. Dentro de la clase de la lámina a continuación del constructor nos creamos la clase interna:

        private class EventoSlider implements ChangeListener {

           

           

        }

Añadimos el método por defecto:

        private class EventoSlider implements ChangeListener {

 

                  @Override

                  public void stateChanged(ChangeEvent e) {

                        // TODO Auto-generated method stub

                       

                  }

 

        }

Este método es el que se va a ejecutar cada vez que arrastremos el JSlider. Volvemos al constructor de la lámina y ponemos el control a la escucha, lo ponemos justo después de haberle añadimos todas las características e instanciamos la clase EventoSlider:

control.addChangeListener(new EventoSlider());

Dentro del método stateChanged con la función getValue() le indicamos que nos aumente o disminuya el tamaño del texto en función de donde desplacemos el JSlider:

rotulo.setFont(new Font("Serif", Font.PLAIN, control.getValue()));

Con esto ya estaría terminado, probamos, aumentamos el texto:



Disminuyamos el texto:



Esto ha sido todo espero que os haya quedado claro, sino, podéis enviar vuestras dudas a través de los comentarios del blog y entre todos ayudarnos. Hasta pronto!

7.6 COMBOBOX << >> 7.8 JSPINNER



No hay comentarios:

Publicar un comentario