Aprendiendo lo basico de JSlider y JProgressBar

Aprendiendo un uso Básico del JSlider.

A toda persona que se inserte por primera vez en el mundo de la GUI de java, se le es complicado ejecutar cómodamente el uso de los componentes de la “swing”, y uno como esta pasando pasó por problemas similares, y como siempre es bueno ayudar a quien lo necesita presentaremos a continuación un muy simple tutorial sobre dos componentes del “SWING” en java, tomando en cuenta que quien este leyendo tiene conocimientos previos en programar en java, nos centraremos solamente en los componentes JSlider y JPRogressBar.

Nuestra primera labor en este tutorial será llegar a esta interfaz:




Primero construyamos una clase que llamaremos “JSlider”, e importamos todas las clases que usaremos:

_ javax.swing.*

_javax.swing.event.*

_java.awt.*

_java.awt.event.*

Nota: también importaremos la clase JSlider y JFrame aunque estas vengan en javax.swing.* y javax.swing.* respectivamente, por si a alguien le causa problemas (como a nosotros). Todo esto debiera quedar así:

import javax.swing.*;

import javax.swing.event.*;

import java.awt.*;

import java.awt.event.*;

import javax.swing.JSlider;

import javax.swing.JFrame;

public class Slider{

public static void main(String[] args) {

//código

}

Ahora en la sección de “//código” se realizara todo lo que tenga que ver con nuestro JSlider, y los detalles para poder verlos en una ventana como en la imagen anterior.

Crearemos rápidamente un JFrame, un Jpanel para poder pegar y visualizar nuestro JSlider (Como se dijo antes, solo explicaremos lo que tenga q ver con el JSlider).


//código:

JFrame ventana = new JFrame("COme On!!");

ventana.setSize(400, 400);

JPanel panel = new JPanel();

//Crearemos nuestro JSlider a continuación, cada línea con una breve descripción, luego se explicara con más //detalles

slider = new JSlider(JSlider.VERTICAL, 0, 100, 25); /*(posición vertical, comienza, termina, donde comienza al iniciar programa)*/

slider.setInverted(false); //se invierte el relleno del JSlider (desde donde comienza)

slider.setPaintTicks(true); //las rayitas que marcan los números

slider.setMajorTickSpacing(25); // de cuanto en cuanto los números en el slider

slider.setMinorTickSpacing(5); //las rayitas de cuanto en cuanto

slider.setPaintLabels(true); //si se ve los números del slider

slider.addChangeListener(new MiAccion()); //Agrega un escuchador al slider creado, lo cual se usara luego

/*Ahora, aunque no pertenece a la clase JSlider, crearemos un JLabel en el cuál se mostrara el numero en el cual se encuentre el slider en ese momento*/

label = new JLabel("LEts Go!!°"); /*Crea un JLabel el cual muestra el numero en el que esta el JSlider y de inicia con la frase LEts Go!!° */

Explicaremos un poco más detallado el constructor presente y cada método (el método se encontrara en cursiva):

Constructor:

slider = new JSlider(JSlider.VERTICAL, 0, 100, 25): Se inicializa el objeto del JSlider con nombre slider con los siguientes parámetro: _JSlider.VERTICAL, este parámetro especifica la forma del nuestro slider si se crea en forma Vertical u Horizontal (JSlider.HORIZONTAL).

*0, el segundo parámetro indica el tamaño mínimo de el JSlider.

*100, el tercer parámetro indica el tamaño máximo de el JSlider.

*25, el cuarto parámetro indica la posición en la cual se inicia el JSlider.

Métodos:

_ slider.setPaintLabels(true): Muestra una etiqueta con números designados en el método setMajorTickSpacing(25) el cual el numero 25 indica mostrar numero de 25 en 25 partiendo del minimo establecido en el JSlider.

_ slider.setInverted(false) : Recibe una variable Booleana (true o false), dependiendo cual sea su parámetro el JSlider tendrá su mínimo en un lado o el otro.

­_ slider.setPaintTicks(true): Este método muestra Ticks (líneas) que delimitan se según los métodos setMajorTickSpacing() y setMinorTickSpacing().

_ slider.setMinorTickSpacing(5): Este método muestra Ticks (líneas), los cuales equivalen a avanzar de 5 en 5 en este caso (se necesita método setPaintTicks() con parámetro true).

_ slider.setMajorTickSpacing(25): Muestra Ticks mayores, con un numero al lado, de 25 en 25, en este caso, partiendo del valor mínimo dado al JSlider (si el método setPaintTicks() esta con parámetro false, solo se mostraran el numero correspondiente).

Luego de haber explicado los métodos usados en nuestro JSlider (no son los únicos métodos existentes a todo esto), continuaremos con el fin del programa que consiste en: Luego de haber creado nuestro JSlider, y nuestro JLabel, lo siguiente será agregar estos elementos al JPanel creado anteriormente, para luego agregar el JPanel a la ventana (JFrame), para poder visualizar nuestra creación.

Y esto se realiza con el siguiente código:

panel.add(label); // add sirve para agregar nuestro label al panel creado

panel.add(slider); /*Ahora ya están agregados tanto el label como nuestro slider al panel*/

Entonces, que es lo que seguía luego de haber agregado lo anterior?? Sabes?? Bueno, si no te acuerdas es agregar nuestro panel (JPanel) a la ventana (JFrame), puesto que gracias a está podemos ver nuestro JSlider en acción, y también otros métodos pero para la ventana (JFrame), lo cuál no se explicara ya saben el porque, y nuevamente, esto se realiza Con el siguiente código:

ventana.add(panel); //Agrega panel a la ventana(JFrame).

ventana.setVisible(true); //Hace que la ventana sea “visible a nuestros ojos”.

ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); /*Al presionar la X de la ventana el programa terminara (al cerrar la ventana).*/

Luego de haber generado el código para el JSlider, se procederá a crear el método, el cuál logra hacer q nuestra label se valla actualizando y lanzando el numero en la cuál se valla posicionando nuestro JSlider.

public static class MiAccion implements ChangeListener{ /*aquí se empieza a crear el método. */

public void stateChanged(ChangeEvent e){

int evaluo = slider.getValue(); /*toma el valor que tiene el slider y lo guarda como entero */

String nose = Integer.toString(evaluo); /*En nose guarda nuestro entero evaluo como un string */

label.setText(nose); /*actualiza nuestro label al valor en el que se encuentra nuestro JSlider */

}

}

Luego de haber visto por partes nuestro código vamos a ajustar nuestros últimos detalles en el código completo.

import javax.swing.*;

import javax.swing.event.*;

import java.awt.*;

import java.awt.event.*;

import javax.swing.JSlider;

import javax.swing.JFrame;

public class Slider{

static JSlider slider; /*se deben instanciar antes para poder usarlos en el método creado mas abajo */

static JLabel label; /*y a la vez estaticos (static) también para poder ser usados en nuestro método creado. */

public static void main(String[] args){

JFrame ventana = new JFrame("COme On!!");

ventana.setSize(400, 400);

JPanel panel = new JPanel();

slider = new JSlider(JSlider.VERTICAL, 0, 100, 25);

slider.setInverted(false);

slider.setPaintTicks(true); slider.setMajorTickSpacing(25); slider.setMinorTickSpacing(5); slider.setPaintLabels(true);

slider.addChangeListener(new MiAccion());

label = new JLabel("LEts Go!!°");

panel.add(label);

panel.add(slider);

ventana.add(panel);

ventana.setVisible(true);

ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

}

public static class MiAccion implements ChangeListener{

public void stateChanged(ChangeEvent e){

int evaluo = slider.getValue();

String nose = Integer.toString(evaluo);

label.setText(nose);

}

}

}

Luego de completo nuestro código, solo queda por parte de ustedes ejercitar, pueden ir cambiando las variables, y ahora les dejaremos la API del JSlider, donde podrán ver todos los métodos e ir implementando sus propias ideas.

LINK:

API JSlider: http://java.sun.com/javase/6/docs/api/javax/swing/JSlider.html

API general: http://java.sun.com/javase/6/docs/api/



JProgressBar……




Muchas personas parecen tener problemas para hacer frente a las barras de progreso, o el control JProgressBar swing, por lo que este tutorial te llevará a través del proceso de creación de una aplicación sencilla en la que un botón hará que el incremento de la barra de progreso progresivamente de 0 a 100 en cinco segundos. Esto le introducirá otra lección importante en Java: multithreading, que permite ejecutar múltiples tareas en su aplicación.

Creación de la clase principal

Vamos a nombrar a nuestros Ejemp1 clase principal . Esta es la clase con el método principal declaró:

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class Ejemp1{
public static void main (String[] args){
//codigo
}
}

Tenemos que declarar todos los componentes GUI. A partir de ahora, supongo que usted tiene algunos conceptos básicos sobre los componentes. Declaramos, por supuesto, un JFrame y un CONTAINER, y también necesitamos un botón y una barra de progreso.

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class Ejemp1{
//Declarar componentes GUI
static JFrame frmMain;
static Container pane;
static JButton btnDo;
static JProgressBar barDo;

public static void main (String[] args){
//codigo...
}
}

Vamos a crear una instancia de todos los componentes, añadirlos,a continuación, y también la posición de ellos.


import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class Ejemp1{
//Declarar componentes GUI
static JFrame frmMain;
static Container pane;
static JButton btnDo;
static JProgressBar barDo;

public static void main (String[] args){

try {UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());}
catch (Exception e) {}

//Crear los componentes
frmMain = new JFrame("Progreso");
frmMain.setSize(300, 100); // Tamaño de la ventana 300x100 pixels
pane = frmMain.getContentPane();
pane.setLayout(null); //aplicar nulllayout
frmMain.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); btnDo = new JButton("Apreta!!!!!!");
barDo = new JProgressBar(0, 100); //Valor mínimo: 0 Valor máximo: 100

//Añadir componentes al panel
pane.add(btnDo);
pane.add(barDo);

//Controles de posición (X, Y, ancho, altura)
barDo.setBounds(10, 10, 280, 20);
btnDo.setBounds(100, 35, 100, 25);

//Marco visible
frmMain.setResizable(false);
frmMain.setVisible(true);

//addActionListener
btnDo.addActionListener(new btnDoAction());
}
}

El método voidactionPerformed el método actionPerformed de la clase btnDoAction será borrado.

La acción del botón

Como dijimos anteriormente el método actionPerformed fue eliminado del programa y lo dejamos de la siguiente manera:

public static class btnDoAction implements ActionListener{
public void actionPerformed (ActionEvent e){
//….
}
}

Inicio de un thread (multithreading)

Algunos pueden pensar multithreading en Java es difícil, pero se equivocaron, es muy fácil. Ahora que se ha de aprendido la addActionListener, tendrá que aplicar lo que sabe para el método de ejecución de un Runnable, que es un thread,sencillo!!!.

public static class thread1 implements Runnable{
public void run(){

}
}

Como habrá intuido ya que usted es una persona muy inteligente, el run () que esta vacío contendrá los diversos acontecimientos que ocurren una vez que este thread(o hilo) se comenzó a usar, su método start (). Para iniciar este Thread, tendremos que utilizar:


new Thread(new thread1()).start();

En el thread, vamos a poner el código para incrementar la barra de progreso

for (int i=0; i<=100; i++){ barDo.setValue(i); barDo.repaint(); try{Thread.sleep(50);} catch (InterruptedException err){} }

El barDo.setValue (i) la línea cambia el valor de ProgressBar i, que es la variable de incremento, de modo que se incrementa la barra.

El repaint () método actualiza los gráficos de la barra, esto es algo importante a considerar como actualizar algunos de los componentes gráficos.

El try ... catch cosas es también parte de los fundamentos.

Usamos Thread.sleep (50) para hacer el sueño de hilo 50 milésimas de segundo, o 1 / 20 de segundo.

Tenemos que controlar el error InterruptedException que pueden ser lanzados por esta instrucción.

Poniendotodojunto:


import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class Ejemp1{
//Declarar componentes GUI

static JFrame frmMain;
static Container pane;
static JButton btnDo;
static JProgressBar barDo;

public static void main (String[] args){

try {UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());}
catch (Exception e) {}

//Creartodos los componentes
frmMain = new JFrame("Barra de progreso");
frmMain.setSize(300, 100);

pane = frmMain.getContentPane();
pane.setLayout(null);
frmMain.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); btnDo = new JButton("TOUCH ME!!");
barDo = new JProgressBar(0, 100);
pane.add(btnDo);
pane.add(barDo);


barDo.setBounds(10, 10, 280, 20);
btnDo.setBounds(100, 35, 100, 25);


frmMain.setResizable(false);
frmMain.setVisible(true);


btnDo.addActionListener(new btnDoAction());
}


public static class btnDoAction implements ActionListener{
public void actionPerformed (ActionEvent e){
new Thread(new thread1()).start();
}
}


public static class thread1 implements Runnable{
public void run(){
for (int i=0; i<=100; i++){ barDo.setValue(i); barDo.repaint(); try{Thread.sleep(50);} catch (InterruptedException err){} } } } }

Bueno, para finalizar les dejaremos un código bien fome con la una unión, del JSlider y el JProgressBar, el cual hace que al deslizar el JSlider, a la vez, se aumente o disminuya el JProgressBar:

import java.awt.Container;

import java.awt.GridLayout;

import javax.swing.JApplet;

import javax.swing.JFrame;

import javax.swing.JProgressBar;

import javax.swing.JSlider;

import javax.swing.border.TitledBorder;

public class Progress extends JApplet {

private JProgressBar progressbar = new JProgressBar();

private JSlider slider = new JSlider(JSlider.HORIZONTAL, 0, 100, 60);

public void init() {

Container cp = getContentPane();

cp.setLayout(new GridLayout(2, 1)); //GridLayout(fila, columnas)

cp.add(progressbar);

slider.setValue(0);

slider.setPaintTicks(true);

slider.setMajorTickSpacing(20);

slider.setMinorTickSpacing(5);

slider.setBorder(new TitledBorder("Correme..."));

progressbar.setModel(slider.getModel());

cp.add(slider);

}

public static void main(String[] args) {

run(new Progress(), 300, 200);

}

public static void run(JApplet applet, int width, int height) {

JFrame frame = new JFrame();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.getContentPane().add(applet);

frame.setSize(width, height);

applet.init();

applet.start();

frame.setVisible(true);

}

}

Se le agradece por su comprensión a todos los lectores, y a quienes logren entender este tutorial CONGRATULATION, y disculpen los que no, siendo este nuestro primer tutorial y único, se les agradece la comprensión.

BYE BYE….

By

Nicolas Araneda and Pablo Lara.



5 comentarios:

Carlos dijo...

Hola,estoy buscando que con un JSlider cambiarme la opacidad de mi JFrame, aun no he podido hacerlo, busque y lo unico que encontre es hacerlo utilizando la libreria com.sun.awt.AWTUtilities, si tuviera esa libreria me andaria, pero tampoco la logro conseguir, si me puedes ayudar en algo, te lo agradezco desde ya, saludos

Lezamitis dijo...

Buenisima información, me sirvio lo de Slider y me quedo clarisimo

Lezamitis dijo...

Gracias

Unknown dijo...

hola buen día, soy principiante en programación, me pueden explicar como implemento un slider.
gracias!

Unknown dijo...

hola buen día, soy principiante en programación, me pueden explicar como implemento un slider.
gracias!

Publicar un comentario