Download Creating a graphical user interface using the

Creating a graphical user interface using the
Eclipse Visual Editor
Prerequisites:
Java JDK is installed
Eclipse 3.2 is installed
Eclipse Modeling Framework is installed
Eclipse Graphical Editing Framework is installed
Eclipse Visual Editor is installed
The Eclipse components can be downloaded from public.clunet.edu/~reinhart
CSC405 (ADEP) link or from www.eclipse.org. The Java JDK can be downloaded
from java.sun.com.
1. Create a new Java project called BasicGraphics
2. Create a new Visual Class
a. Give the visual class a name (e.g. BasicFrame), select Swing/Frame as the
Style, and make sure the public static void main (String[] args) option is
checked
3. The source file should now display in the Eclipse editor with a split pane (top is
the visual editor, bottom is the java editor)
4. Left mouse click on the blue area of the frame in the visual editor window and
then in the Property window change the title of the JFrame to CSC405 Basic
Frame
5. Resize the JFrame by dragging one of the corner handles
6. Select the inner panel of the JFrame by left-clicking inside it (the gray area) with
the mouse
7. In the Property window left-click on BorderLayout and scroll up to null, then leftclick (on null)
8. Select Swing Containers – JPanel from the palette
9. Left-click on the inner panel of the JFrame to create a panel and then accept the
bean name offered.
10. Resize and position the JPanel by dragging a corner handle or border handle.
11. Run BasicFrame as a Java Application. You should see the following window.
12. Close the BasicFrame source file
13. Create another new Visual Class (as above) called BasicPanel and style set to
Swing Panel. Do not check the public static void main box.
14. Add the following paintComponent method. You will have to type this in by hand
somewhere within the class using the java editor portion of the IDE.
protected void paintComponent(Graphics g)
{
// -- cast Graphics argument to Graphics2D
Graphics2D g2d = (Graphics2D)g;
// -- retrieve the size of the drawing area
Rectangle bounds = this.getBounds();
// -- erase to a black background
g2d.setColor(Color.black);
g2d.fillRect(0, 0, bounds.width, bounds.height);
}
You’ll also need to add the following import statements at the top of the file:
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
15. Open the BasicFrame source file with the Java editor
16. Edit the member variable declaration line (this assumes the visual class you just
created was named BasicPanel)
private JPanel jPanel = null;
to read
private BasicPanel jPanel = null;
17. Edit the getJPanel method
private JPanel getJPanel() {
if (jPanel == null) {
jPanel = new JPanel();
jPanel.setBounds(15, 16, 346, 345);
}
return jPanel;
}
to read
private BasicPanel getJPanel() {
if (jPanel == null) {
jPanel = new BasicPanel();
jPanel.setBounds(15, 16, 346, 345);
}
return jPanel;
}
18. Run BasicFrame as a Java application. You should see the following window.
You may now add method invocations from the Graphics2D API to the BasicPanel
paintComponent method. For example:
protected void paintComponent(Graphics g)
{
// -- cast Graphics argument to Graphics2D
Graphics2D g2d = (Graphics2D)g;
// -- retrieve the size of the drawing area
Rectangle bounds = this.getBounds();
// -- erase to a black background
g2d.setColor(Color.black);
g2d.fillRect(0, 0, bounds.width, bounds.height);
// -- draw white diagonals
g2d.setColor(Color.white);
g2d.drawLine(0, 0, bounds.width, bounds.height);
g2d.drawLine(bounds.width, 0, 0, bounds.height);
// -- draw a centered red square 40x40
g2d.setColor(Color.red);
g2d.drawRect(bounds.width / 2 - 20,
bounds.height / 2 - 20,
40, 40);
// -- draw a centered yellow ellipse 100x50
g2d.setColor(Color.yellow);
g2d.drawOval(bounds.width / 2 - 50,
bounds.height / 2 - 25,
100, 50);
}
results in the following display
Note 0: If your methods have runtime errors such as null references then your Visual
Editor may not function properly. Make sure that all of your member variables are
initialized to proper values.
Note 1: There are many ways to create a GUI in Java and Eclipse. This is only one of
them and happens to be the one that I prefer. Another way is to create a Visual
Class when creating the new class of step 1 and telling the system to inherit from
JFrame. There are pros and cons to each approach. If you know of other
techniques or choose not to use Eclipse at all, so be it. You should choose the
method with which you are most comfortable but, at the same time, do not be shy
about learning new approaches.