SwingDemo

Your instructor will demo the entire exercise. Try to follow along as your instructor does the demo.
Ask questions of your instructor, student assistants and classmates as desired.

Goals

The goals of this exercise are to:

Create basic GUIs.
Learn to avoid some of the pitfalls in GUI creation.

The Demo and Exercise: Work with your instructor to create a basic GUI.

Start by reading the main steps of the IEP. Then create a UML design for the project. Then start implementing according to the following Iterative Enhancement Plan (IEP). An IEP is a list of user stories that shows a plan for the order in which they could be developed:

Stage 1. The 400x300 frame appears

Open Eclipse.
Create a new project called SwingDemo.
Create a new class called Main with the usual main method.
Create a new class called Main with the usual main method.
In main, construct a new SwingDemoFrame()
Create a SwingDemoFrame class. (Use Quick Fix!) Make it extend JFrame.

Create a no-parameter constructor in SwingDemoFrame that contains the following statements:
this.setSize(new Dimension(400, 300)); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setTitle("Swing Demo"); this.setLayout(new FlowLayout()); this.setVisible(true);

What questions do you have about the above statements or the process so far?

Stage 2. A label that says "Hello" appears, along with a button that says "Press me"

To get a component to appear, you need to construct it, then add it to the component on which it is to appear. So:

In SwingDemoFrame's constructor, construct and add a new JLabel whose text is "Hello".
Also construct and add a new JButton whose text is "Press me".

Stage 1: Label and button appear on frame

Do you understand what add does? What kinds of things have an add method? What kinds of things can the add method take as its argument?
Do you understand how FlowLayout lays out components? (Try resizing the application after it starts, especially making it very narrow.)
What questions do you have about the process so far?

Stage 3. A red panel appears vertically between the button and the label

To your SwingDemoFrame, construct and add a new ColoredPanel, where ColoredPanel extends JPanel.
The panel should set its size to 200 x 200, using its setPreferredSize method.
- Pitfall: Using the setSize method on a JPanel. Use setSize only for JFrame's.
The panel should set its background color to red.
- Hint: As usual, type this followed by a dot and examine your options. One will look very appropriate!
To get the vertical layout, change the frame's LayoutManager to BorderLayout, and use statements like the following to lay out the three components as pictured to the right.
this.add(BLAH, BorderLayout.PAGE_START);

Do you understand how to use this followed by a dot to figure out how to get your components to look/behave as you wish?
Do you understand how BorderLayout lays out components? (Try resizing the application after it starts.)
What questions do you have about the process so far?

Stage 4. A circle appears inside the panel

You can't paint within a frame, you need to paint inside a panel. This is done using the paintComponent method. So:

In ColoredPanel, override JPanel's method:
public void paintComponent(Graphics g)

The first line of the paintComponent method should ALWAYS be a call to JPanel's paintComponent(graphicsObject) method. (How?)
Next, cast the g object to Graphics2D to recover 2D drawing ability.
call graphics2D's draw() method using an appropriate size and location.
BONUS: how could you get it to show up in the middle of the screen?

Stage 5. Another shape appears in the panel

Please draw or fill at least one other type of shape on the panel. You could try experimenting with text with different size fonts, colors, and stroke widths.

Stage 6. Something else novel appears on the screen

If you finish early, please experiment with adding another type of component to the screen. The tutorial on Swing in the Java Tutorial is very good.

Stage 7. Clicking the button causes the color of the panel to change to green

For this, you will add an ActionListener:

The component that will respond to the event (call it responder) must implement ActionListener.
The component that will listen for the event (call it listener) must add the ActionListener like this: listener.addActionListener(responder)

Example 1: a panel responds to a button's clicks:
this.button.addActionListener(this)
Example 2: A button responds to its own mouse clicks:
this.addActionListener(this)

Stage 8. Instead of a label, there is a text field at the top of the screen that changes the panel back to red when someone presses "enter"

Handle this the same way that you did the button, but now the panel will need to know what component generated the event. Use conditions like this:
if (event.getSource() == this.button) // then it was the button that was clicked