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