Adding Life To Buttons
[Home] [Java] [HTML] [Tabs] [About Me] [Disclaimer] [Contact]
 

 

 

 

 

 

If you find anything wrong in this tutorial or you'd simply like to comment mail me .

This is basically a bunch of tricks I do to add life to buttons in Java applications . For instance the button could change its icon when you click on it or maybe the button could change it's border when the mouse is in focus ( i.e. the mouse pointer is over it ) .

Here are the most common things you could do -

  • Changing the buttons icon's ( or even text ) in response to mouse events
  • Changing button borders in response to mouse events
  • Setting up tool tip

Changing Icons in response to mouse events

To change the icon when mouse is pressed or released you are going to need two images ( JPEG / GIF ) . 

  • One for when the button is in it's normal state
  • one for when the button is pressed

You can make these images in any of the commonly available imaging utilities . Here are two images I made to explain the concept

Lets call the first one normal & the second pressed - corresponding to the behavior associated .

We'll let the button sport the pressed image when the button is clicked & normal otherwise .


First see Adding Icons To Buttons if you don't know how !

Now all we need to do to change the button icon is run a few factory methods on our button which will take care of it during mouse events .

	button.setIcon(normal_icon);
	button.setPressedIcon(pressed_icon);
	//normal_icon & pressed_icon are ImageIcon objects

So now when the button is pressed pressed.gif is set as the icon for the button & in all other cases the icon for the button is set to normal.gif .

Try this -

Put this code snippet in a regular JApplet & see the above thought process in action

	//initializing icons & button
	ImageIcon normal_icon = new ImageIcon("normal.gif");
	ImageIcon pressed_icon = new ImageIcon("pressed.gif");
	JButton button = new JButton();

	//setting icons for different states
	button.setIcon(normal_icon);
	button.setPressedIcon(pressed_icon);

	//adding button to the applet
	getContentPane().add(button);

Changing button borders with mouse events

This is also fairly simple but the only hassle is that we need to take care of the changing borders . The concept is that we highlight the border when the mouse enters the button & restore to default when it leaves .

Since there are no methods which can take care of both the things ( mouse events & changing borders  ) we need to take care of it manually . It ain't really that much pain . Just one line to add in your event handling code & instantiating some borders  . The various border classes can be found in javax.swing.border .

We'll limit ourselves to LineBorder . You can experiment with the rest , once you get the idea .

 


Step one would be to create two border objects -

  • One for the normal state
  • And the other for when the mouse enters the button

Here's what you do -

	LineBorder normal_border = new LineBorder(Color.gray , 5);
	LineBorder scope_border = new LineBorder(Color.blue , 5);

 

Next we setup the border for the normal state . Here's how -

	button.setBorder(normal_border);
	//buton is a JButton object

Now we just have to tell to the event listener ( the one which is going to listen to this buttons mouse events ) to change the border when the mouse enters the button . Fairly simple !

	public void mouseEntered(MouseEvent me){
		button.setBorder(scope_border);
		//and other code if required
	}
 

OK , but we also want to make sure that the border is restored to it's original state when the mouse has exited . So we set the border again in the mouseExited ( ) method .

	public void mouseExited(MouseEvent me){
		button.setBorder(normal_border);
		//and other code if required
	}

If you still can't piece it all together , here's a sample code -

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

/*
<applet code="ChangeBorders" width=50 height=50>
</applet>
*/

public class ChangeBorders extends JApplet{
	private LineBorder normal_border;
	private LineBorder scope_border;
	private JButton button;

	public void init(){
		
		//initializing border objects & button
		button = new JButton("Try Me");
		normal_border = new LineBorder(Color.gray , 5);
		scope_border = new LineBorder(Color.blue , 5);

  		//settin border to the color gray
		button.setBorder(normal_border);


		//button is regsitered to listen for mouse events
		button.addMouseListener(new MouseAdapter(){

			//when in scope , paint blue border
			public void mouseEntered(MouseEvent me){
				button.setBorder(scope_border);
			}

			//when out of scope restore gray border
			public void mouseExited(MouseEvent me){
				button.setBorder(normal_border);
			}
		});

		//add button to the applet
		getContentPane().add(button);

	}
};
 

Adding tool tip text

Ok , this is dumbass easy . You just need to know the method .

	button.setToolTipText("Darn Easy");
	//button is a JButton object

JButton inherits the setToolTipText ( ) from class javax.swing.JComponent .

 


So thats all I know about adding more jest to my buttons . If you'd like some other tutorial let me know & I'll see if I have the time & the knowledge to write one for you . If you found any mistakes in this tutorial or you'd like to send in your comments , feel free to mail me , that's my only motivation .

 


Further suggestions -

  • Use animated GIF's for your button icons
  • Combine all the three things ( from above ) for your buttons
  • Add cursor's to your applications
  • Check  more methods to mess around with from the API

 


 

[Home] [Java] [HTML] [Tabs] [About Me] [Disclaimer] [Contact]