Panel con Scroll

   Muchas veces vemos un panel con scroll para seleccionar opciones, como por ejemplo las ventanas del navegador, que al ir bajando o subiendo muestran las distintas áreas del panel. Crear un panel con scroll da un efecto sumamente estético y con un acabado de elegancia (en ciertos casos).

   Hacer esto en java es fácil, simplemente creamos un panel y lo insertamos dentro de un scrollPanel, tomemos como ejemplo la entrada de los ButtonGroup, a esto le agregaremos un scroll para que muestre las barras según el tamaño de la ventana
import javax.swing.*;
import java.awt.event.*;

@SuppressWarnings("deprecation")
public class panelconscroll extends JFrame {
 String radio,check;
 JPanel panel = new JPanel();
 ButtonGroup grupoCheck = new ButtonGroup();
 ButtonGroup grupoRadio = new ButtonGroup();
 JRadioButton radio1 = new JRadioButton("Primera Opcion del Radio");
 JRadioButton radio2 = new JRadioButton("Segunda Opcion del Radio");
 JRadioButton radio3 = new JRadioButton("Tercera Opcion del Radio");
 JCheckBox check1 = new JCheckBox("Primera Opcion del Check");
 JCheckBox check2 = new JCheckBox("Segunda Opcion del Check");
 JCheckBox check3 = new JCheckBox("Tercera Opcion del Check");
 JTextArea mensajes = new JTextArea(30,35);
 JScrollPane scroll1 = new JScrollPane(mensajes);
 JScrollPane scroll2 = new JScrollPane(panel);

 public panelconscroll() {
  super("Los Grupos");
  setLocation(100,100);
  setSize(230,270);
  panel.add(check1);
  panel.add(check2);
  panel.add(check3);
  panel.add(radio1);
  panel.add(radio2);
  panel.add(radio3);
  grupoCheck.add(check1);
  grupoCheck.add(check2);
  grupoCheck.add(check3);
  grupoRadio.add(radio1);
  grupoRadio.add(radio2);
  grupoRadio.add(radio3);
  mensajes.setEditable(false);
  panel.add("South",scroll1);
  check1.addActionListener(new MiEscucha());
  check2.addActionListener(new MiEscucha());
  check3.addActionListener(new MiEscucha());
  radio1.addActionListener(new MiEscucha());
  radio2.addActionListener(new MiEscucha());
  radio3.addActionListener(new MiEscucha());
  add(scroll2);
  show();
  this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 }

 class MiEscucha implements ActionListener {
  public void actionPerformed(ActionEvent evt) {
   mensajes.append("Presionado el boton: "+
    evt.getActionCommand()+"\n");
  }
 }

 public static void main(String[] arg) {
  JOptionPane.showMessageDialog(null,"Un Panel con Scroll\n");
  JOptionPane.showMessageDialog(null,"By Carlitox ("+
   "http://calitoxenlaweb.blogspot.com)");
  new panelconscroll();
 }
}
   En lo único que debemos fijarnos es en las siguientes líneas de código:
JScrollPane scroll2 = new JScrollPane(panel);
add(scroll2);
   O en su defecto:
JScrollPane scroll2 = new JScrollPane();
scroll2.add(panel);
this.add(scroll2);
   Son las importantes, lo que hacemos es simple, creamos un nuevo scroll para luego agregarle el panel, por lo que tenemos 2, el del "TextArea" y el del panel en si, actualmente el "JScrollPane" acepta cualquier clase de componente swing, por lo que las posibilidades son muchas... suerte!

12 Comentarios

Escribir Comentario
27 de mayo de 2012, 1:09 delete Este comentario ha sido eliminado por el autor.
avatar
27 de mayo de 2012, 1:11 delete

Hola oye la verdad no entendí muy bien como insertar el scroll.Es mi primer proyecto y no puedo insertar un scroll para poder mover mi panel de arriba hacia abajo no me sale y es muy importante para mi proyecto ya que mi panel es bastante grande. te agradeceria tu respuesta. ;D

Responder
avatar
30 de mayo de 2012, 19:27 delete

Bueno, puedes comenzar colocando un poco de tu código aquí.... Saludos!

Responder
avatar
Anónimo
AUTOR
23 de enero de 2013, 20:15 delete

jajaja no mames.... tampoco es postear por postear

Responder
avatar
23 de enero de 2013, 20:20 delete

No es por esto, si lo combinas con los datos de MySQL en forma de carpetas (tipo explorador de archivos) tendrás un panel con scroll que si tendrá bastante uso dinámico y práctico...!!!

Responder
avatar
Anónimo
AUTOR
11 de mayo de 2013, 22:06 delete

Hola, soy nuevo en Java. Estoy intentando poner unas barras de scroll (horizontal y vertical) a la ventana o los tabs del código que adjunto, de forma que todo se pueda ver si la ventana es pequeña. No quisiera modificar setLayout. No lo consigo usando "JScrollPane". Alguien puede ayudarme?

import javax.swing.*;
import java.awt.event.*;
import java.awt.*;
import java.awt.Color;
import javax.swing.*;
import javax.swing.JScrollPane;
import java.io.*;


public class SimGJAVA extends JFrame
{
int NumberTimesButton1 = 0;
static JFrame aWindow = new JFrame("SimG");
private ExitBH ebH;
private runBH runH;
private runB2H run2H;
private JTabbedPane tabbedPane;
private JPanel panel1;
private JPanel panel2;
JTextField TextNR = new JTextField(10);

public static void main(String args[])
{
SimGJAVA mainFrame = new SimGJAVA();
mainFrame.setVisible(true);
}

public SimGJAVA()
{
setTitle( "SimG" );
setSize(800, 800);
setBackground(Color.orange);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);

JPanel topPanel = new JPanel();
topPanel.setLayout( new BorderLayout() );
getContentPane().add( topPanel );

// scroll inactivo
/*JScrollBar hbar = new JScrollBar(JScrollBar.HORIZONTAL, 10, 600, 0, 800);
JScrollBar vbar = new JScrollBar(JScrollBar.VERTICAL, 10, 600, 0, 800);
hbar.setUnitIncrement(1);
hbar.setBlockIncrement(1);
add(hbar, BorderLayout.SOUTH);
add(vbar, BorderLayout.EAST);*/

createPage1();
tabbedPane = new JTabbedPane();
tabbedPane.addTab( "Purpose", panel1);
topPanel.add( tabbedPane, BorderLayout.CENTER );
}


public void createPage1()
{
panel1 = new JPanel();
panel1.setLayout( null );

JLabel label1 = new JLabel();
label1.setText("\nSimG\n\n\n");
label1.setLocation(90, 2);
label1.setSize(1200, 30);
panel1.add( label1 );

JButton runB1 = new JButton("Run");
runB1.setLocation(90, 50);
runB1.setSize(300, 200);
runH = new runBH();
runB1.addActionListener(runH);
panel1.add(runB1);

JButton ExitB = new JButton("Exit");
ExitB.setLocation(400, 50);
ExitB.setSize(300, 200);
ebH = new ExitBH();
ExitB.addActionListener(ebH);
panel1.add(ExitB);

JLabel label1c = new JLabel();
label1c.setText("04-2013");
label1c.setLocation(90, 520);
label1c.setSize(1200, 30);
panel1.add( label1c );
}


public void createPage2()
{
panel2 = new JPanel();
panel2.setLayout( null );

panel1.setVisible(false);

JLabel label2a = new JLabel();
label2a.setText("Number (int): ");
label2a.setLocation(30, 15);
label2a.setSize(400, 30);
panel2.add( label2a );

TextNR.setLocation(340, 15);
TextNR.setSize(100, 30);
panel2.add(TextNR);

JButton ButtonNext2 = new JButton("Save and next");
ButtonNext2.setLocation(600, 440);
ButtonNext2.setSize(150, 150);
run2H = new runB2H();
ButtonNext2.addActionListener(run2H);
setVisible(true);
panel2.add(ButtonNext2);
}


public class ExitBH implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
System.exit(0);
}
}

class runBH implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
NumberTimesButton1 = NumberTimesButton1 + 1;

if (NumberTimesButton1 == 1)
{
createPage2();
tabbedPane.addTab( "Settings", panel2);
panel2.setVisible(true);
JOptionPane.showMessageDialog(null, "\"Settings\" in next tab", " ", JOptionPane. INFORMATION_MESSAGE);
}
}
}

class runB2H implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
panel1.setVisible(true);
}
}


}


Responder
avatar
12 de mayo de 2013, 8:31 delete

Hola como estas?? Bueno, lo que necesitas hacer es algo bien simple, estas agregando los componentes a cada panel, cuando lo que tienes que hacer es agregar el panel al scroll y luego utilizar ese scroll para agregar todo, por ejemplo:

Tienes esto...
JPanel panel1 = new JPanel();
panel1.add( label1 );

Cuando debería ser esto...
JPanel panel1 = new JPanel();
JScrollPane scroll = new JScrollPane( panel1 );
scroll.add( MiJLabel );

Eso con cada uno de los componentes, utilizar el ScrollPane para adicionar los elementos.... Saludos!!

Responder
avatar
Anónimo
AUTOR
12 de mayo de 2013, 10:27 delete

Hola Carlos, muchas gracias por la ayuda!!!. He hecho lo que comentas y la nueva versión (ver abajo) compila pero los componentes no aparecen al ejecutar (tal vez por agregarlos al scroll en vez de al panel). Ideas?, agradezco mucho si me podeis enviar el código completo con modificaciones (soy Java principiante). Un saludo!!

import javax.swing.*;
import java.awt.event.*;
import java.awt.*;
import java.awt.Color;
import javax.swing.*;
import javax.swing.JScrollPane;
import java.io.*;

public class SimGJAVA extends JFrame
{
int NumberTimesButton1 = 0;
static JFrame aWindow = new JFrame("SimG");
private ExitBH ebH;
private runBH runH;
private runB2H run2H;
private JTabbedPane tabbedPane;
private JPanel panel1;
private JPanel panel2;
JTextField TextNR = new JTextField(10);

public static void main(String args[])
{
SimGJAVA mainFrame = new SimGJAVA();
mainFrame.setVisible(true);
}

public SimGJAVA()
{
setTitle( "SimG" );
setSize(800, 800);
setBackground(Color.orange);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);

JPanel topPanel = new JPanel();
topPanel.setLayout( new BorderLayout() );
getContentPane().add( topPanel );

// scroll inactivo
/*JScrollBar hbar = new JScrollBar(JScrollBar.HORIZONTAL, 10, 600, 0, 800);
JScrollBar vbar = new JScrollBar(JScrollBar.VERTICAL, 10, 600, 0, 800);
hbar.setUnitIncrement(1);
hbar.setBlockIncrement(1);
add(hbar, BorderLayout.SOUTH);
add(vbar, BorderLayout.EAST);*/

createPage1();
tabbedPane = new JTabbedPane();
tabbedPane.addTab( "Purpose", panel1);
topPanel.add( tabbedPane, BorderLayout.CENTER );
}


public void createPage1()
{
panel1 = new JPanel();
panel1.setLayout( null );

JScrollPane scroll1 = new JScrollPane( panel1 );

JLabel label1 = new JLabel();
label1.setText("\nSimG\n\n\n");
label1.setLocation(90, 2);
label1.setSize(1200, 30);
scroll1.add( label1 );

JButton runB1 = new JButton("Run");
runB1.setLocation(90, 50);
runB1.setSize(300, 200);
runH = new runBH();
runB1.addActionListener(runH);
scroll1.add(runB1);

JButton ExitB = new JButton("Exit");
ExitB.setLocation(400, 50);
ExitB.setSize(300, 200);
ebH = new ExitBH();
ExitB.addActionListener(ebH);
scroll1.add(ExitB);

JLabel label1c = new JLabel();
label1c.setText("04-2013");
label1c.setLocation(90, 520);
label1c.setSize(1200, 30);
scroll1.add( label1c );
}


public void createPage2()
{
panel2 = new JPanel();
panel2.setLayout( null );
panel1.setVisible(false);

JScrollPane scroll2 = new JScrollPane( panel2 );

JLabel label2a = new JLabel();
label2a.setText("Number (int): ");
label2a.setLocation(30, 15);
label2a.setSize(400, 30);
scroll2.add( label2a );

TextNR.setLocation(340, 15);
TextNR.setSize(100, 30);
scroll2.add(TextNR);

JButton ButtonNext2 = new JButton("Save and next");
ButtonNext2.setLocation(600, 440);
ButtonNext2.setSize(150, 150);
run2H = new runB2H();
ButtonNext2.addActionListener(run2H);
setVisible(true);
scroll2.add(ButtonNext2);
}


public class ExitBH implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
System.exit(0);
}
}

class runBH implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
NumberTimesButton1 = NumberTimesButton1 + 1;

if (NumberTimesButton1 == 1)
{
createPage2();
tabbedPane.addTab( "Settings", panel2);
panel2.setVisible(true);
JOptionPane.showMessageDialog(null, "\"Settings\" in next tab", " ", JOptionPane. INFORMATION_MESSAGE);
}
}
}

class runB2H implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
panel1.setVisible(true);
}
}

}

Responder
avatar
12 de mayo de 2013, 17:01 delete

Veamos, que es lo que quieres hacer?? Si lo que quieres es que las pestañas contengan un scroll simplemente agrega esto cuando crees el "TabbedPane":

tabbedPane = new JTabbedPane( /* JTabbedPane.TOP, JTabbedPane.SCROLL_TAB_LAYOUT */ );

Ahora, si lo que quieres es que dentro del panel este el scroll debes crear un tamaño mínimo o un layout, siguiente el ejemplo este (suponiendo que has creado todo como en este ejemplo), simplemente te resta agregarlo al tabbed panel:

tabbedPane.addTab( "Purpose", ScrollPane);

Ahora bien, me has entendido un tanto mal, las cosas siguen agregándose al panel normal, lo que debes agregar es un scroll por cada panel que quieras que lo contenga, guíate por el ejemplo.... Saludos!!

Responder
avatar
13 de mayo de 2013, 7:39 delete Este comentario ha sido eliminado por el autor.
avatar
13 de mayo de 2013, 7:43 delete

La idea sería que si se reduce la ventana que se pueda ver el label "04-2013" (y el boton "Save and next") moviendo la barra de scroll. Es decir, una barra de scroll vertical para cada panel. He hecho modificaciones siguiendo el ejemplo pero hay algo que se escapa, tal vez podría ser añadir un scroll a "topPanel" o añadir scrolls al panel (como en el ejemplo: panel.add("South",scroll1);) pero éstos me devuelven errores al ejecutar. Muchas gracias por la ayuda!. Nueva versión:

import javax.swing.*;
import java.awt.event.*;
import java.awt.*;
import java.awt.Color;
import javax.swing.*;
import javax.swing.JScrollPane;
import java.io.*;


public class SimGJAVA extends JFrame
{
JTextField TextNR = new JTextField(10);
static JFrame aWindow = new JFrame("SimG");
private runBH runH;
private runB2H run2H;
private JTabbedPane tabbedPane;

// paneles
JPanel panel1 = new JPanel();
JPanel panel2 = new JPanel();
JPanel topPanel = new JPanel();

// Scrolls
JScrollPane scrolltop = new JScrollPane( topPanel );
JScrollPane scroll1 = new JScrollPane( panel1 );
JScrollPane scroll2 = new JScrollPane( panel2 );


public static void main(String args[])
{
SimGJAVA mainFrame = new SimGJAVA();
mainFrame.setVisible(true);
}

public SimGJAVA()
{
setTitle( "SimG" );
setSize(800, 800);
setBackground(Color.orange);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);

tabbedPane = new JTabbedPane(JTabbedPane.TOP, JTabbedPane.SCROLL_TAB_LAYOUT);

// aplicar scrolltop aqui? como?
topPanel.setLayout( new BorderLayout() );
getContentPane().add( topPanel );
topPanel.add( tabbedPane, BorderLayout.CENTER );

// scroll1
tabbedPane.addTab( "Purpose", scroll1);
// panel1
createPage1();
}


public void createPage1()
{
panel1.setLayout( null );

JLabel label1 = new JLabel();
label1.setText("\nSimG\n\n\n");
label1.setLocation(90, 2);
label1.setSize(1200, 30);
panel1.add( label1 );

JButton runB1 = new JButton("Run");
runB1.setLocation(90, 50);
runB1.setSize(300, 200);
runH = new runBH();
runB1.addActionListener(runH);
panel1.add(runB1);

JLabel label1c = new JLabel();
label1c.setText("04-2013");
label1c.setLocation(90, 520);
label1c.setSize(1200, 30);
panel1.add( label1c );

//panel1.add("Scroll1",scroll1); // no ejecuta
//add(scroll1); //no hace nada
}


public void createPage2()
{
panel2.setLayout( null );

JLabel label2a = new JLabel();
label2a.setText("Number (int): ");
label2a.setLocation(30, 15);
label2a.setSize(400, 30);
panel2.add( label2a );

TextNR.setLocation(340, 15);
TextNR.setSize(100, 30);
panel2.add(TextNR);

JButton ButtonNext2 = new JButton("Save and next");
ButtonNext2.setLocation(600, 440);
ButtonNext2.setSize(150, 150);
run2H = new runB2H();
ButtonNext2.addActionListener(run2H);
setVisible(true);
panel2.add(ButtonNext2);

//panel2.add("Scroll2",scroll2); //no ejecuta
//add(scroll2); //no hace nada
}


class runBH implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
tabbedPane.addTab( "Settings", scroll2); //scroll2
createPage2(); //panel2

JOptionPane.showMessageDialog(null, "\"Settings\", next tab", " ", JOptionPane. INFORMATION_MESSAGE);
scroll1.setVisible(false);
scroll2.setVisible(true);
tabbedPane.setSelectedComponent(scroll2);
}
}

class runB2H implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
scroll1.setVisible(true);
scroll2.setVisible(false);
tabbedPane.setSelectedComponent(scroll1);
}
}

}

Responder
avatar
15 de mayo de 2013, 9:10 delete

Hola,

Ya lo tengo. Me faltaba un "panel1.setPreferredSize(new Dimension(1100,800));" para que se redimensionara y funcionara el scroll.
Gracias!

Un saludo

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon