JPanel shrinking-expanding problem

[eLancaster]

BACKGROUND
OK, in this program i made a window. In that window is a panel and the panel has a label in it. The panel is supposed to be 250 long by 250 wide in the window which is 500 long and 500 wide.

I have given the panel two animations:
1. shrinkToSide = the panel shrinks to a width of one.
2. expandToCorner = panel expands to its original width/

A button on the window toggles between shrinking and expanding.

PROBLEMS
1. I only see that part of the panel which holds the label - not the rest
2. The panel is supposed to be at x=0 and y =0 but it's at the center of the window.
3. Clicking on the button shrinks the panel (i.e. the whole panel suddenly appears, shrinks, then disappears) but clicking the button again does not expand it. I don't understand why!

QUESTION
After fixing the above problems in the program, what i also want to do is to make the background of the panel fade from white to black. I can do the fade but I don't know what starting colors and ending colors i should use.

CODE
FlashCard.java

[B]public class FlashCard extends JPanel implements ActionListene[/B]r {
	private Color backgroundColor = Color.WHITE;
	private final int ANIMATION_TICKER = 15;
	private final int WIDTH;
	private int width;
	private int height;
	private int operationType;
	
	public JLabel flashCardLabel;
	
	Timer timer = new Timer(ANIMATION_TICKER,this);
	
	[B]public void shrinkToSide()[/B]
	{
		this.operationType=1;
		timer.start();
	}
	
	[B]public void expandToCorner()[/B]
	{
		this.operationType = 2;
		timer.start();
	}
	
	[B]public void setCardText(String text)[/B]
	{
		flashCardLabel.setText(text);
	}
	[B]public FlashCard(int x,int y,int width,int height)[/B]
	{
		this.width = width;
		this.WIDTH = width;
		this.height = height;
		setBounds(x, y, this.width, this.height);
		setBackground(this.backgroundColor);
		
		flashCardLabel = new JLabel();
		add(flashCardLabel);
		
	}
	[B]public void actionPerformed(ActionEvent e)[/B]
	{
		switch(this.operationType)
		{
		case 1:
		{
			if(this.width>1)
			{
				this.width -= 5;
				setSize(this.width, this.height);
			}else{
				timer.stop();
			}
			break;
		}
		case 2:
		{
			if(this.width!=this.WIDTH)
			{
				this.width+=5;
				setSize(this.width,this.height);
			}else{
				timer.stop();
			}
			break;
		}
		default:
		{
			JOptionPane.showMessageDialog(null, "Animaiton Failed.");
		}
		}
	}
}

FlashCard_Frame.java

[B]public class FlashCard_Frame extends JFrame[/B] {
	private JLabel label;
	private FlashCard flashcard;
	private JButton button;
	private int actionType=1;
	
	[B]public FlashCard_Frame[/B]()
	{
		super("FlashCard Application");
		setLayout(new FlowLayout());
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setSize(500,500);
		
		label = new JLabel("Hi!");
		add(label);
		
		flashcard = new FlashCard(0,0,250,250);
		flashcard.setCardText("Howdy");
		add(flashcard);
		
		button = new JButton ("Hide Panel");
		button.addActionListener(
				new ActionListener(){
					[B]public void actionPerformed(ActionEvent arg0)[/B] {
						if(actionType%2 != 0)flashcard.shrinkToSide();
						else flashcard.expandToCorner();
					}
					
				}
		);
		add(button);
	}
	
	[B][COLOR="Red"]public static void main(String args[])[/COLOR][/B]
	{
		FlashCard_Frame frame = new FlashCard_Frame();
		//
		frame.setVisible(true);
	}
}

[ozzyman]

before you frame.setVisible(true) try to frame.setBounds(int x, int y, int width, int height)

if you dont want to change the height and width, just get the current height and width

[camickr]

1. I only see that part of the panel which holds the label - not the rest

You need to understand how layout managers work. A FlowLayout displays a component at its preferred size. The only component added to the flash card panel is a label so the preferred size of the panel is the preferred size of the label. Using setSize() on the panel doesn't do anything.

2. The panel is supposed to be at x=0 and y =0 but it's at the center of the window.

Again, this is how the FlowLayout works. Components are displayed in the order they where added to the panel from left to right.

but clicking the button again does not expand it. I don't understand why!

When you test the "actionType" variable in the actionPerformed method is always has a value of 1 so the code always tries to hide the panel. You can probably use the setActionCommand() method of the JButton to toggle the command every time the button is clicked.

You should start by reading Trail: Creating a GUI With JFC/Swing: Table of Contents (The Java™ Tutorials). There are sections on using layout managers and on using buttons which show how you might use the action command.

[eLancaster]

Thanks alot camickr! That helped solve all three problems!
Could you give me some idea on how to fade the panel from white to black - specifically how I would go about changing the colors?

[camickr]

This code fades the background when a component gains focus:

import java.awt.*;
import java.awt.event.*;
import java.util.Hashtable;
import java.util.ArrayList;
import javax.swing.*;

public class Fader
{
	//  background color when component has focus
	private Color fadeColor;

	//  steps to fade from original background to fade background
	private int steps;

	//  apply transition colors at this time interval
	private int interval;

	//  store transition colors from orginal background to fade background
	private Hashtable backgroundColors = new Hashtable();

	/*
	 *  Fade from a background color to the specified color using
	 *  the default of 10 steps at a 50 millisecond interval.
	 *
	 *  @param fadeColor the temporary background color
	 */
	public Fader(Color fadeColor)
	{
		this(fadeColor, 10, 50);
	}

	/*
	 *  Fade from a background color to the specified color in the
	 *  specified number of steps at the default 5 millisecond interval.
	 *
	 *  @param fadeColor the temporary background color
	 *  @param steps	 the number of steps to fade in the color
	 */
	public Fader(Color fadeColor, int steps)
	{
		this(fadeColor, steps, 50);
	}

	/*
	 *  Fade from a background color to the specified color in the
	 *  specified number of steps at the specified time interval.
	 *
	 *  @param fadeColor the temporary background color
	 *  @param steps	 the number of steps to fade in the color
	 *  @param intevral  the interval to apply color fading
	 */
	public Fader(Color fadeColor, int steps, int interval)
	{
		this.fadeColor = fadeColor;
		this.steps = steps;
		this.interval = interval;
	}

	/*
	 *  Add a component to this fader.
	 *
	 *  The fade color will be applied when the component gains focus.
	 *  The background color will be restored when the component loses focus.
	 *
	 *  @param component apply fading to this component
	*/
	public Fader add(JComponent component)
	{
		//  Get colors to be used for fading

		ArrayList colors = getColors( component.getBackground() );

		//	FaderTimer will apply colors to the component

		new FaderTimer( colors, component, interval );

		return this;
	}

	/*
	**  Get the colors used to fade this background
	*/
	private ArrayList getColors(Color background)
	{
		//  Check if the color ArrayList already exists

		Object o = backgroundColors.get( background );

		if (o != null)
		{
			return (ArrayList)o;
		}

		//  Doesn't exist, create fader colors for this background

		ArrayList colors = new ArrayList( steps + 1 );
		colors.add( background );

		int rDelta = ( background.getRed() - fadeColor.getRed() ) / steps;
		int gDelta = ( background.getGreen() - fadeColor.getGreen() ) / steps;
		int bDelta = ( background.getBlue() - fadeColor.getBlue() ) / steps;

		for (int i = 1; i < steps; i++)
		{
			int rValue = background.getRed() - (i * rDelta);
			int gValue = background.getGreen() - (i * gDelta);
			int bValue = background.getBlue() - (i * bDelta);

			colors.add( new Color(rValue, gValue, bValue) );
		}

		colors.add( fadeColor );
		backgroundColors.put(background, colors);

		return colors;
	}

	class FaderTimer implements FocusListener, ActionListener
	{
		private ArrayList colors;
		private JComponent component;
		private Timer timer;
		private int alpha;
		private int increment;

		FaderTimer(ArrayList colors, JComponent component, int interval)
		{
			this.colors = colors;
			this.component = component;
			component.addFocusListener( this );
			timer = new Timer(interval, this);
		}

		public void focusGained(FocusEvent e)
		{
			alpha = 0;
			increment = 1;
			timer.start();
		}

		public void focusLost(FocusEvent e)
		{
			alpha = steps;
			increment = -1;
			timer.start();
		}

		public void actionPerformed(ActionEvent e)
		{
			alpha += increment;

			component.setBackground( (Color)colors.get(alpha) );

			if (alpha == steps || alpha == 0)
				timer.stop();
		}
	}

	public static void main(String[] args)
	{
		// Create test components

		JComponent textField1 = new JTextField(10);
		textField1.setBackground( Color.YELLOW );
		JComponent textField3 = new JTextField(10);
		JComponent textField4 = new JTextField(10);
		JComponent button = new JButton("Start");
		JComponent checkBox = new JCheckBox("Check Box");

		JFrame frame = new JFrame("Fading Background");
		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
		frame.getContentPane().add(textField1, BorderLayout.NORTH );
		frame.getContentPane().add(button, BorderLayout.SOUTH );
		frame.getContentPane().add(textField3, BorderLayout.WEST );
		frame.getContentPane().add(textField4, BorderLayout.EAST );
		frame.getContentPane().add(checkBox);

		//  Gradual Fading (using defaults)

//		Fader fader = new Fader( new Color(155, 255, 155) );
		Fader fader = new Fader( new Color(155, 255, 155), 10, 50 );
		fader.add( textField1 );
		fader.add( textField3 );
		fader.add( checkBox );

		//  Instant Fading

		fader = new Fader( new Color(255, 155, 155), 1, 1 );
		fader.add( textField4 );
		fader.add( button );

		frame.pack();
		frame.setVisible( true );
	}
}