Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

JavaWorld Daily Brew
Home ยป Debadatta Mishra's blog

Animation with Eclipse Shell - A simplistic approach

Submitted by Debadatta Mishra on Tue, 12/29/2009 - 12:35.
 
.

Animation with Eclipse Shell - A simplistic approach
An article by Debadatta Mishra
Introduction
While designing web page screens or desktop screens, it also matters how attractive is the screen design.In case of web page design, there are many APIs to enhance the beauty of the screens. However in case of modern screen design, animation in a screen plays a vital role. In case of desktop application, we can also provide better screen design with a bit of screen animation to impress the user. In this article I will show you how you can provide animated screens using Eclipse API in a simple manner.

Technicalities
As per the technicalities involved in SWT and Jface, there is no default animation effect API. All the API provided by Eclipse is generic and you can model your UI design in various ways. You can achieve the movement of a shell by dynamically setting the size of the shell. You have to understand certain methods like "setBounds()","setLocation()" and "setSize()" provided by Eclipse API. Let us have a look into the following code structures for better understanding.

Code for AnimatedShell.java

package com.core.plugin.shell;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.SelectionAdapter;
import org.eclipse.swt.events.SelectionEvent;
import org.eclipse.swt.graphics.Rectangle;
import org.eclipse.swt.layout.RowLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
* This class is used to display the minimal animation
* effect in a shell in a very simple manner.
* @author Debadatta Mishra(PIKU)
*
*/
public final class AnimatedShell
{
/**
* This method is used to move down the shell
* in the monitor area. Here the key point is
* X coordinate is constant and Y coordinate
* increases slowly to bring the effect.
* @param shell of type {@link Shell}
* @author Debadatta Mishra(PIKU)
*/
private static void moveDown( final Shell shell )
{
int x = shell.getBounds().x;
int y = shell.getBounds().y;
//X constant and Y increases
while( y < 1000 )
{
try
{
shell.setLocation(x, y++);
Thread.sleep(2);
}
catch( Exception e )
{
e.printStackTrace();
}
}
}

/**
* This method is used to move up the shell
* in the monitor area. Here the key point is
* X coordinate is constant and Y coordinate
* decreases slowly to bring the effect.
* @param shell of type {@link Shell}
* @author Debadatta Mishra(PIKU)
*/
private static void moveUp( final Shell shell )
{
int x = shell.getBounds().x;
int y = shell.getBounds().y;
//X constant and Y decreases
while( y > -200 )
{
try
{
shell.setLocation(x, y--);
Thread.sleep(2);
}
catch( Exception e )
{
e.printStackTrace();
}
}
}

/**
* This method is used to move right up the shell
* in diagonal of the right side of monitor area.
* Here the key point is
* X coordinate increases and Y coordinate
* decreases slowly to bring the effect.
* @param shell of type {@link Shell}
* @author Debadatta Mishra(PIKU)
*/
private static void moveRightDiagonalUp( final Shell shell )
{
int x = shell.getBounds().x;
int y = shell.getBounds().y;
//X increases and Y decreases
while( y > -200 )
{
try
{
shell.setLocation(x++, y);
shell.setLocation(x++, y--);
Thread.sleep(2);
}
catch (Exception e)
{
e.printStackTrace();
}
}
}

/**
* This method is used to move up the shell
* in the left side of monitor area. Here the key point is
* X coordinate decreases and Y coordinate
* decreases slowly to bring the effect.
* @param shell of type {@link Shell}
* @author Debadatta Mishra(PIKU)
*/
private static void moveLeftDiagonalUp( final Shell shell )
{
int x = shell.getBounds().x;
int y = shell.getBounds().y;
//X decreases and Y decreases
while( y > -200 )
{
try
{
shell.setLocation(x--, y);
shell.setLocation(x--, y--);
Thread.sleep(2);
}
catch (Exception e)
{
e.printStackTrace();
}
}
}

/**
* This method is used to move down the shell
* in the left side of monitor area. Here the key point is
* X coordinate decreases and Y coordinate
* increases slowly to bring the effect.
* @param shell of type {@link Shell}
* @author Debadatta Mishra(PIKU)
*/
private static void moveLeftDiagonalDown( final Shell shell )
{
int x = shell.getBounds().x;
int y = shell.getBounds().y;
//X decreases and Y increases
while( x > -200 )
{
try
{
shell.setLocation(x--, y);
shell.setLocation(x--, y++);
Thread.sleep(2);
}
catch (Exception e)
{
e.printStackTrace();
}
}
}

/**
* This method is used to move down the shell
* in the right side of monitor area. Here the key point is
* X coordinate increases and Y coordinate
* decreases slowly to bring the effect.
* @param shell of type {@link Shell}
* @author Debadatta Mishra(PIKU)
*/
private static void moveRightDiagonalDown( final Shell shell )
{
int x = shell.getBounds().x;
int y = shell.getBounds().y;
//X increases and Y decreases
while( y < 700 )
{
try
{
shell.setLocation(x++, y);
shell.setLocation(x++, y++);
Thread.sleep(2);
}
catch (Exception e)
{
e.printStackTrace();
}
}
}

/**
* This method is used to place the shell in
* the centre of the monitor area.
* @param shell of type {@link Shell}
* @author Debadatta Mishra(PIKU)
*/
private static void setShellLocation( Shell shell )
{
Rectangle monitorArea = shell.getDisplay().getPrimaryMonitor().getBounds();
Rectangle shellArea = shell.getBounds();
int x = monitorArea.x + (monitorArea.width - shellArea.width)/2;
int y = monitorArea.y + (monitorArea.height - shellArea.height)/2;
shell.setLocation(x,y);
}

//Method to execute class
public static void main(String[] args)
{
Display display = new Display();
final Shell shell = new Shell(display,SWT.TITLE);
shell.setLayout( new RowLayout());
shell.setSize(200, 200);

Button b = new Button(shell, SWT.PUSH);
b.setText("Animate");

b.addSelectionListener( new SelectionAdapter()
{
public void widgetSelected(SelectionEvent se)
{
/*
* Uncomment the following methods one by one
* to the animation effect of the shell.
*/
//Move up the shell
// moveUp(shell);
//Move down the shell
// moveDown(shell);
//Move up in the right diagonal up
// moveRightDiagonalUp(shell);
//Move left diagonal up
// moveLeftDiagonalUp(shell);
//Move left diagonal down
// moveLeftDiagonalDown(shell);
//Move right diagonal down
moveRightDiagonalDown(shell);
shell.dispose();
}
}
);
shell.open();
setShellLocation(shell);
while (!shell.isDisposed())
{
if (!display.readAndDispatch())
display.sleep();
}
display.dispose();
}
}

In the above program, I have written many methods for the movement of the Shell. A shell can have movement effect
from any corner of the monitor display. Here the location of the Shell is changed dynamically and it appears to the
user that shell is moving.

Code for ShrinkShellAnimation.java

package com.core.plugin.shell;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.ShellAdapter;
import org.eclipse.swt.events.ShellEvent;
import org.eclipse.swt.graphics.Point;
import org.eclipse.swt.graphics.Rectangle;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
* This class is used to show the animation
* by closing the shell.
* @author Debadatta Mishra(PIKU)
*
*/
public final class ShrinkShellAnimation
{
/**
* This method is used to place the shell in
* the centre of the monitor area.
* @param shell of type {@link Shell}
* @author Debadatta Mishra(PIKU)
*/
private static void setShellLocation( Shell shell )
{
Rectangle monitorArea = shell.getDisplay().getPrimaryMonitor().getBounds();
Rectangle shellArea = shell.getBounds();
int x = monitorArea.x + (monitorArea.width - shellArea.width)/2;
int y = monitorArea.y + (monitorArea.height - shellArea.height)/2;
shell.setLocation(x,y);
}

/**
* This method is used to show the animation
* by decreasing the x and y coordinates and
* by setting the size dynamically.
* @param shell of type {@link Shell}
*/
private static void doAnimation( Shell shell )
{
Point shellArea = shell.getSize();
int x = shellArea.x;
int y = shellArea.y;
while( x != -200 )
{
try
{
shell.setSize(x--, y--);
}
catch( Exception e )
{
e.printStackTrace();
}
}
}

//Main method to execute the test.
public static void main(String[] args)
{
final Display display = new Display();
final Shell shell = new Shell( display , SWT.CLOSE );
shell.setText("Close and see the efffect");
//Add the shell listener to handle the animated close event
shell.addShellListener( new ShellAdapter()
{
public void shellClosed(ShellEvent se)
{
doAnimation(shell);
}
}
);
shell.setSize(400, 200);
setShellLocation(shell);
shell.open ();
while (!shell.isDisposed ())
{
if (!display.readAndDispatch ()) display.sleep ();
}
display.dispose ();
}
}

In the above program, the size of the shell is decreased dynamically.

Code for TestShellAnimation.java

package com.core.plugin.shell;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.SelectionAdapter;
import org.eclipse.swt.events.SelectionEvent;
import org.eclipse.swt.graphics.Point;
import org.eclipse.swt.layout.RowLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Event;
import org.eclipse.swt.widgets.Listener;
import org.eclipse.swt.widgets.Shell;

/**
* This class is used to show the simplest animation
* while opening the shell.
* @author Debadatta Mishra(PIKU)
*
*/
public class TestShellAnimation
{
/**method used to increase the shell rapidly
* @param shell of type Shell
*/
private static void doAnimation( Shell shell )
{
for( int i = 21 ; i < 501 ; i++ )
{
shell.setSize(20+i, 20+i);
}
}

/**Method used to open the shell and then display
* the animation with the shell by increasing
* the shell size dynamically.
* @param shell of tyep {@link Shell}
*/
private static void openAnimation( Shell shell )
{
try
{
shell.open();
doAnimation(shell);
}
catch( Exception e )
{
e.printStackTrace();
}
}

/**
* This method is used to show the animation
* by decreasing the x and y coordinates and
* by setting the size dynamically.
* @param shell of type {@link Shell}
*/
private static void shrinkClose( Shell shell )
{
Point shellArea = shell.getSize();
int x = shellArea.x;
int y = shellArea.y;
while( x != -200 )
{
try
{
shell.setSize(x--, y--);
}
catch( Exception e )
{
e.printStackTrace();
}
}
}
//Main method to execute
public static void main(String[] args)
{
Display display = new Display();
final Shell shell = new Shell(display);
shell.setLayout( new RowLayout());
shell.setSize(20, 20);
Button b = new Button(shell, SWT.BORDER | SWT.BOLD);
b.setText("Close me");

b.addSelectionListener( new SelectionAdapter()
{
public void widgetSelected(SelectionEvent se)
{
shrinkClose(shell);
shell.dispose();
}
}
);
openAnimation(shell);
shell.addListener(SWT.Close, new Listener()
{
public void handleEvent(Event arg0)
{
shrinkClose(shell);
}
}
);
while (!shell.isDisposed())
{
if (!display.readAndDispatch())
display.sleep();
}
display.dispose();
}
}

In the above program, a Shell will be animated and the size will be increased dyanmically while opening.

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 .