Menggunakan Tool Tip

Pendahuluan

Pada tulisan kali ini saya akan menunjukkan bagaimana cara menggunakan tool tip pada komponen Swing. Dalam bahasan ini saya hanya menunjukkan penggunaan tool tip pada komponen button saja tetapi bukan berarti penggunaan tool tip hanya bisa dilakukan pada komponen button saja tetapi juga pada komponen yang lainnya juga.

Apa itu Tool Tip?

Tool tip adalah string dari teks (popup message) yang muncul di atas object ketika cursor mouse diarahkan (hovered) diatasnya untuk sejumlah waktu yang sudah ditentukan. Tool tip kita gunakan untuk memberitahukan user tentang apa yang akan dikerjakan suatu option jika user memilihnya. Lihatlah gambar di bawah ini:

Gambar 1 – Contoh program yang menggunakan tool tip

Gambar 1 – Contoh program yang menggunakan tool tip

Pada program tersebut saya arahkan cursor mouse ke button “About” dan beberapa saat kemudian muncul tool tip “About This Program” yang memberitahukan user jika button tersebut di klik maka akan muncul informasi mengenai program tersebut.

Gambar 2 – Informasi yang muncul pada saat button “About” di klik

Gambar 2 – Informasi yang muncul pada saat button “About” di klik

Bagaimana Menggunakannya?

Komponen swing mendukung kemampuan untuk menampilkan popup message singkat ketika user meletakkan (mengarahkan) cursor mouse-nya pada komponen tersebut. Class yang digunakan untuk menampilkannya yaitu JToolTip, tetapi kita tidak membuat instance-nya secara langsung. Tetapi untuk menggunakannya kita memanggil setToolTipText(String text) JComponent, yang akan memicu teks untuk ditampilkan pada waktu yang tepat. Agar lebih jelas Anda coba program di bawah ini:

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

public class UsingToolTip
{
 public static void main(String args[])
 {
  Runnable runner = new Runnable()
  	{
  	 public void run()
  	 	{
  	 	 JFrame frame = new JFrame("Using Tool Tip");
frame.setSize(300, 150); 	 	 	                        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

 	 	 JButton button1 = new JButton("Hello Java Programmers");
 	 	 button1.setToolTipText("Hello Java Programmers");
 	 	 frame.add(button1, BorderLayout.NORTH);

		 JButton button2 = new JButton("Goodbye Brotha");
 	 	 button2.setToolTipText("Goodbye Brotha");
 	 	 frame.add(button2, BorderLayout.SOUTH);
 	 	 frame.setVisible(true);
 	 	}	// end of run method
 	};	// end of runner

 	 EventQueue.invokeLater(runner);
 }	// end of main method
}	// end of class UsingToolTip

Bila Anda coba program di atas maka hasilnya adalah seperti di bawah ini dan bila kita coba untuk mengarahkan cursor mouse ke button “Hello Java Programmers” maka akan muncul tool tip “Hello Java Programmers” dan begitu pula apabila kita arahkan cursor mouse ke button “Goodbye Brotha” maka akan muncul tool tip “Goodbye Brotha”.

Gambar 3 – Tool tip pada button “Hello Java Programmers”

Gambar 3 – Tool tip pada button “Hello Java Programmers”

Gambar 4 – Tool tip pada button “Goodbye Brotha”

Gambar 4 – Tool tip pada button “Goodbye Brotha”

Menggunakan HTML dalam Teks Tool Tip

Dalam menggunakan tool tip kita dapat menggunakan format teks HTML 3.2. Supaya format html bisa digunakan maka kita awali teks tool tip dengan tag html. Jadi pada program di atas tadi kita lakukan sedikit perubahan. Untuk melihat kode program yang dirubah tadi Anda downlod dulu source code-nya disini lalu save dengan ekstensi .java

Dan bila program tadi sudah dilakukan perubahan maka hasilnya akan seperti di bawah ini:

Gambar 5 – Tool tip dengan format HTML pada button “Hello Java Programmers”

Gambar 5 – Tool tip dengan format HTML pada button “Hello Java Programmers”

Gambar 6 – Tool tip dengan format HTML pada button “Goodbye Brotha”

Gambar 6 – Tool tip dengan format HTML pada button “Goodbye Brotha”

Merubah Tampilan Tool Tip

Ada bermacam cara untuk meng-customize tampilan tool tip. Ketika tool tip didefinisikan untuk komponen tertentu, sebelum ditampilkan, method createToolTip pada komponen tersebut dipanggil. Dengan meng-override method tersebut, kita dapat memodifikasi setting seperti warna misalnya. Pada program yang tadi akan kita rubah warna hurufnya, cobalah program di bawah ini:

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

public class UsingCuztomizeToolTip
{
 public static void main(String args[])
 {
  Runnable runner = new Runnable()
  	{
  	 public void run()
  	 	{
  	 	 JFrame frame = new JFrame("Using HTML Tool Tip");
  	 	 frame.setSize(300, 150);
 	 	 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

 	 	 JButton button1 = new JButton("Hello Java Programmers")
 	 	  	{
 	 	  	 public JToolTip createToolTip()
 	 	  	   {
			    JToolTip tip = super.createToolTip();
			    tip.setForeground(Color.BLUE);
			    return tip;
  			   }
 	 	 	 };
 	 	 	 button1.setToolTipText("Hello Java Programmers");
 	 	 	 frame.add(button1, BorderLayout.NORTH);

			 JButton button2 = new JButton("Goodbye Brotha");
 	 	 	 button2.setToolTipText("Goodbye Brotha");
 	 	 	 frame.add(button2, BorderLayout.SOUTH);

 	 	 	 frame.setVisible(true);
}	// end of run method
 	};	// end of runner

  EventQueue.invokeLater(runner);
 }	// end of main method
}	// end of class UsingCuztomizeToolTip

Bila program diatas dijalankan maka saat kita coba untuk mengarahkan cursor ke button ”Hello Java Programmers” warna teks tool tip menjadi warna biru.

Gambar 7 – Merubah teks tool tip menjadi warna biru

Gambar 7 – Merubah teks tool tip menjadi warna biru

Menampilkan Position-Sensitive Tool Tip

Maksud dari position-sensitive adalah pada saat kita mengarahkan cursor ke button pada area tertentu dari button maka teks tool tip yang akan muncul adalah ”A” dan bila kita mengarahkan lagi cursor pada area yang lain (masih pada button yang sama) maka teks tool tip yang akan muncul adalah ”B”. Agar lebih jelas lihat gambar di bawah ini:

Gambar 8 – Button dengan position-sensitive tool tip

Gambar 8 – Button dengan position-sensitive tool tip

Jadi bila kita mengarahkan cursor pada area merah maka teks tool tip yang muncul adalah “Got a thousand lines code?” dan apabila kita mengarahkan teks tool tip pada area biru maka teks tool tip yang akan muncul adalah ”Which one?:D”.

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

public class UsingPositionSensitiveToolTip
{
 public static void main(String args[])
 	{
 	 Runnable runner = new Runnable()
 	 	{
 	 	 public void run()
 	 	 	{
 	 	 	 JFrame frame = new JFrame("Using Position Sensitive Tool Tip");
 	 	 	 frame.setSize(300, 150);
 	 	 	 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

 	 	 	 JButton button1 = new JButton("Hello Java Programmers")
 	 	 	 	{
 	 	 	 	 // overrided contains method to display
                         //position-sensitive tool tip text
				 public boolean contains(int x, int y)
				 	{
    			 	 if (x < 50)
    			 	 	{ setToolTipText("Got a thousand lines code?"); }
    			 	 else { setToolTipText("Which one?:D"); }

    				 return super.contains(x, y);
  					}
 	 	 	 	};
 	 	 	 button1.setToolTipText("Hello Java Programmers");
 	 	 	 frame.add(button1, BorderLayout.NORTH);

			 JButton button2 = new JButton("Goodbye Brotha");
 	 	 	 button2.setToolTipText("Goodbye Brotha");
 	 	 	 frame.add(button2, BorderLayout.SOUTH);

 	 	 	 frame.setVisible(true);
 	 	 	}	// end of run method
 	 	};	// end of runner

 	 EventQueue.invokeLater(runner);
 	}	// end of main method
}	// end of class UsingPositionSensitiveToolTip</pre>

Di bawah ini adalah hasil dari program di atas:

Gambar 9 - Area pada button yang memunculkan teks tool tip ”Hello Java Programmers”

Gambar 9 - Area pada button yang memunculkan teks tool tip ”Hello Java Programmers”

D”

Gambar 10 - Area pada button yang memunculkan teks tool tip ”Which one?:D”

Referensi

  1. John Zukowski, “Getting Started with Tool Tips”, http://blogs.sun.com/JavaFundamentals/entry/getting_started_with_tool_tips
  2. Andrew Mulholland and Glen Murphy, “Java 1.4 Game Programming”, Wordware, 2003.

Download

Tulisan

  1. http://www.ziddu.com/download/2456185/ghaNOZ2480-MenggunakanToolTip.pdf.html (180.87 KB)
  2. ghaNOZ2480 – Menggunakan Tool Tip (180.87 KB)

Source Code

  1. UsingToolTip.java
  2. UsingHTMLToolTip.java
  3. UsingCuztomizeToolTip.java
  4. UsingPositionSensitiveToolTip.java

One thought on “Menggunakan Tool Tip

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s