Lesson plan for teaching java graphics

Question

Background:

This lesson should give a firm foundation for graphics in Swing in java to students in high school who know OOP in java (extends, implements and abstract, as well as composition). They are in the school's CS major. This year they need to create a project which is a part of their final grade in the CS major, and part of the requirements are a visible GUI. As of such, a lesson plan was created to teach them one of the ways of making GUI in java. However, this lesson doesn't teach what goes on in the background of java GUI. (unintended pun)

What I have:

Currently the lesson plan is as follows:

Purpose: To teach the basics of creating GUI in java, for the students' final project.

Needed knowledge: Object Oriented Programming, as taught in previous grade (In the previous grade they were taught the concepts listed in the Background section)

Needed materials: Computers, preferably one per student (Students can bring their laptops), Internet connection.

Procedure:

1. Explain the basic objects inside the Swing library: JFrame, JPanel etc.

2. Explain the Container object in AWT, and elaborate on how Swing is heavily dependent on AWT. All* objects in Swing are children of objects in AWT. Also explain the Component class object.

3. Show that Container essentially contains (hence the fancy name) other Components and that creates a GUI.

4. Show the students a simple GUI for a chat application (no server-client, just the gui!) which composes of a JButton, JTextField (for entering messages), JTextPane (chat history) and JLabel. This step includes showing them the code.

5. let them work for the remaining time (45 mins plus 45-time_it_took_to_get_to_this_step) on creating a gui of their own, of their choosing, which can have any Swing object they find. The GUI must have JLabel, JButton and JTextField. Other than that, go wild.

My problem:

This lesson shows absolutely nothing about what Java does in the background for the GUI. I am talking about the intensive OOP the goes on in the JFrame class, and the incredible flexibility with everything extending JContainer (allows JButton, JLabel and many others to be treated almost identically).

How could I extends one (or more) of the above steps, or possibly add a new one, that will teach these parts of java GUI? I find that these parts are important for anyone who wants to make Java GUI. Would simply saying what I have written in the previous paragraph be enough?

---

_{*Haven't checked, but never seen one that isn't.}

Answer 1

You could extend (heh) your lesson to include custom painting.

Basically, you do this by extending JComponent or JPanel and overriding the paintComponent() function. This is how "real" Swing components draw themselves, and it gives students a window into how everything works behind the scenes. You could have them draw basic scenes, animations, or even games. Or you could have them create custom components like circular buttons (disclaimer: I wrote this example).

If you have enough time, you might want to split this into multiple lessons: start with basic Swing, then do a lesson on input listeners, then do a lesson on custom painting. At the end of those lessons they'll have enough knowledge to create some pretty fun programs.

I'd also urge you to stick with functional GUIs instead of using a non-functional chat application. Make a fun calculator that does something like convert dog years, or create a basic game that plays rock-paper-scissors. Encourage students to make these as interesting as possible. IMHO this is much more engaging than a non-functional example gui.

Answer 2

The lesson looks pretty good to me. First, the last part, extending the lesson to show how the power of JFrame class is harnessed in the backend. Don't. 1) The students are presumed to already understand the OOP involved, and how the extends concept works. 2) Give them the remaining time, as you've indicated, to work on the project assigned. 3) Allowing them to explore what they learned, and maybe get a second sense about the power hiding under the hood will make them more receptive, and more curious, about that power, and its source. So, make that a separate lesson for the next class period.

The only thing I can think of to make it possibly better, is to add some structure, or expectations, to the assignment. Possibly present a limited set of GUI templates to reproduce, allowing the students to pick the one they like to implement. Possibly add some constraints, such as that it must include 2 previously undiscussed objects from the library

Answer 3

There are two things you can do (surely more, of course) that will enhance the overall education of your students.

First is to discuss the general situation of nested structures and the relationship to trees and to recursion. The frame contains Panels which contain Panels, which contain... down to some non-recursive things like Buttons. This lesson, when generalized from the specific GUI layout case, is important for understanding modern languages and how they are compiled and processed. It also gives them the background to understand web page layouts, etc.

The second big topic you can introduce here, assuming you haven't already, is Design Patterns, both programming and architecture patterns. Understanding the Observer pattern is essential to Java GUI programming for example. Once they have seen one pattern in some detail (perhaps a truncated version) you have the power to discuss others. The Java libraries are completely full of design patterns since Java and Design Patterns sort of grew up together. The Java i/o libraries depend fundamentally on the decorator pattern, for example and the students likely already know about Iterator, but perhaps not the full structure of it and why it works and other solutions to the problem are sub-optimal.

Moreover, if you discuss Observer in some detail you have an entry into the Model-View-Controller architectural pattern (MVC). So it is quite rich. MVC is also used in the Web architecture as well, of course.

Once you introduce Patterns to your students you have a way to talk about reusable software at a much higher level than just "reusing classes", which has a lot of issues and often leads to ugly and unusable software. Reusing proven designs, however, is a much more important idea.