Creation of Hover Dialog box in Jface

Creation of Hover Dialog box in Jface

An article by Debadatta Mishra

Introduction

There has been a revolutionary changes in the look and feel of the modern application. As you have seen in case of web application, web 2.0 has made radical changes in the UI design. Today's UI design is based upon the concept that each screen should speak about itself. It means that each screen design should have the facility to know about the purpose and its use regardless of web UI or desktop UI. In case of desktop application, Eclipse UIs are very meaningul. There are many features regarding this. However in this article I will explain you the dialog box used for hover. I have named it as hover dialog. As you have seen that while writing java code in eclipse editor, if you move mouse in certain method, it will display you the hover dialog explaining the javadocs attached to the method. Let us go into the technical part of this dialog.

Technicalities

In this dialog box called as HoverDialog, there is a Shell which has no buttons at all. It has a readonly text field which displays the help message specific to your UI controls. The main feature is that the shell will be closed automatically when it is out of focus. You can also drag the Shell from any corner of your monitor. You can press "ESC" button to remove the hover dialog. Now let us have a look into the complete code.

Code for HoverHelpDialog.java


package com.core.plugin.dialog;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.ControlAdapter;
import org.eclipse.swt.events.ControlEvent;
import org.eclipse.swt.graphics.Point;
import org.eclipse.swt.widgets.Event;
import org.eclipse.swt.widgets.Listener;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Text;

/**
 * This class is used to create a dialog box for only display
 * of data while hovering over a contents. This dilaog box
 * does not contain any buttons. It is simply a rectangular area
 * where the String contents will be displayed. It is used to display 
 * the help data.
 * @author Debadatta Mishra(PIKU)
 *
 */
public final class HoverHelpDialog 
{
	/**
	 * Object of type {@link Shell}
	 */
	private Shell hoverShell = null;
	/**
	 * String message to display the contents in the hover dialog.
	 */
	private String helpMessage = null;
	/**
	 * Default number of line in the message contents
	 */
	private int messageLines = 1;
	/**
	 * Default message lenth
	 */
	private int msgLength = 30;

	/**Default constructor
	 * @param shell of type {@link Shell}
	 * @param message of type {@link String} to display the String message as help message
	 */
	public HoverHelpDialog( Shell shell , String message )
	{
		this.hoverShell = shell;
		this.helpMessage = getWrappedString(message, msgLength);
		getNoOfLines(message);
	}

	/**Method used to obtain the number of lines in a message
	 * @param message of type String
	 * @return the number of line
	 */
	private int getNoOfLines( String message )
	{
		messageLines = ( message.length() / msgLength ) + 2;
		return messageLines;
	}

	/**Default listener attached to Text
	 * @param text of type {@link Text}
	 */
	public static void addTextListener( final Text text )
	{
		try
		{
			Listener shellListener = new Listener() 
			{
				int startX, startY;
				public void handleEvent(Event e) 
				{
					//To track the x and y position
					if (e.type == SWT.MouseDown && e.button == 1) 
					{
						startX = e.x;
						startY = e.y; 
					}
					//Track the position of x and y and set the location of the shell accordingly
					if (e.type == SWT.MouseMove && (e.stateMask & SWT.BUTTON1) != 0) 
					{
						Point p = text.getShell().toDisplay(e.x, e.y);
						p.x -= startX;
						p.y -= startY;
						text.getShell().setLocation(p);
					}
					//Close the shell if it out of focus
					if( e.type == SWT.FocusOut )
					{
						text.getShell().dispose();
					}
				}
			};
			text.addListener(SWT.MouseDown, shellListener);
			text.addListener(SWT.MouseMove, shellListener);
			text.addListener(SWT.FocusOut, shellListener);

			text.getShell().addControlListener(new ControlAdapter() 
			{
				public void controlResized(ControlEvent e)
				{
					text.setBounds(text.getShell().getClientArea());
				}
			});
		}
		catch( Exception e )
		{
			e.printStackTrace();
		}
	}

	/**Method used to return the wrapped message.
	 * @param str of type String indicating the message
	 * @param lengthSize of type int indicating the size
	 * @return the wrapped string message
	 */
	public static String getWrappedString( String str , int lengthSize )
	{
		StringBuilder wrappedString = new StringBuilder();
		try 
		{
			StringBuilder sb = new StringBuilder();
			for( int i = 0 , n = str.length() ; i < n ; i++ )
			{
				sb.append(str.charAt(i));
				if( sb.length() == lengthSize )
				{
					wrappedString.append(sb.toString()).append("\n");
					sb = null;
					sb = new StringBuilder();
				}
			}
			wrappedString.append(sb.toString());
		}
		catch (Exception e) 
		{
			e.printStackTrace();
		}
		return wrappedString.toString();
	}

	/**
	 * Method used to open the dialog box
	 */
	public void open()
	{
		final Shell shell = new Shell ( hoverShell, SWT.RESIZE );
		try
		{
			shell.setSize(200, 200);
			final Text label = new Text( shell , SWT.READ_ONLY | SWT.H_SCROLL | SWT.V_SCROLL );
			label.setText(helpMessage);
			label.setBackground(shell.getDisplay().getSystemColor(SWT.COLOR_INFO_BACKGROUND));
			label.setSize( shell.getClientArea().width , shell.getClientArea().height);
			shell.open ();
			addTextListener(label);
		}
		catch( Exception e )
		{
			e.printStackTrace();
		}
	}
}

Now let us look at the test harness class to execute the above class

Code for TestHoverHelpDialog.java


package com.core.plugin.test.dialog;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.SelectionAdapter;
import org.eclipse.swt.events.SelectionEvent;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;
import com.core.plugin.dialog.HoverHelpDialog;

/**
 * This is the test harness class to test the hover dialog.
 * @author Debadatta Mishra(PIKU)
 *
 */
public class TestHoverHelpDialog 
{
	/**
	 * String message to display as help message.
	 */
	private static String hoverData = "Eclipse plugin development has opened a new vista in the field of hard core java development";
	
	public static void main(String[] args) 
	{
		final Display display = new Display ();
		final Shell shell = new Shell (display, SWT.DIALOG_TRIM); 
		
		//Button to show the hover dialog
		Button btn = new Button( shell , SWT.PUSH );
		btn.setText("Press to see the Hover dialog");
		btn.setBounds(90, 10, 200, 30);
		
		btn.addSelectionListener( new SelectionAdapter()
		{
			public void widgetSelected(SelectionEvent se) 
			{
				new HoverHelpDialog( new Shell() , hoverData).open();
			}
		}
		);
		
		shell.setSize(400, 200);
		shell.open ();
		while (!shell.isDisposed ()) 
		{
			if (!display.readAndDispatch ()) display.sleep ();
		}
		display.dispose ();
	}
}

Assumptions I assume that reader of this article has Exposure to eclipse plugin development Knowledge on Java language Knowledge on running programs in Eclipse editor Test Case details I have tested the above program in the following conditions. OS Name : Windows Vista Eclipse API : 3.2 Java : 1.6.0_16 Java Editor : Eclipse 3.2 Conclusion I hope that you will enjoy my article. This article does not bear any commercial significance , it is only meant for learning and for novice developers. In case of any problem or errors , feel free to contact me in the email debadatta.mishra@gmail.com .