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

<p>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. </p>

<p>The second big topic you can introduce here, assuming you haven't already, is Design Patterns, both programming and architecture patterns. Understanding the <a href="https://en.wikipedia.org/wiki/Observer_pattern" rel="nofollow noreferrer">Observer</a> 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. </p>

<p>Moreover, if you discuss Observer in some detail you have an entry into the <a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller" rel="nofollow noreferrer">Model-View-Controller</a> architectural pattern (MVC). So it is quite rich. MVC is also used in the Web architecture as well, of course. </p>

<p>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. </p>

CC BY-SA 3.0
2017-07-19T12:24:36.867Z
For MVC I might as well introduce JavaFX (which I intend to, but that's a different question).
ItamarG3
CC BY-SA 3.0
2017-07-19T12:32:30.963Z
Yes, I didn't want to suggest JavaFX since you seemed to already have focused on Swing. But my comments apply there as well, I think.
Buffy
CC BY-SA 3.0
2017-07-19T12:21:19.467Z
2017-07-19T12:21:19.467Z
Buffy
<p>You could extend (heh) your lesson to include <a href="https://docs.oracle.com/javase/tutorial/uiswing/painting/" rel="nofollow noreferrer">custom painting</a>.</p>

<p>Basically, you do this by extending <code>JComponent</code> or <code>JPanel</code> and overriding the <code>paintComponent()</code> 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 <a href="http://happycoding.io/examples/java/swing/circle-button" rel="nofollow noreferrer">circular buttons</a> (disclaimer: I wrote this example).</p>

<p>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.</p>

<p>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.</p>

CC BY-SA 3.0
2017-07-19T16:44:50.357Z
2017-07-24T21:33:10.920Z
2017-07-24T21:33:10.920Z
Kevin Workman
<p>The lesson looks pretty good to me. First, the last part, extending the lesson to show how the power of <code>JFrame</code> class is harnessed in the backend. Don't. 1) The students are presumed to already understand the OOP involved, and how the <code>extends</code> 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.</p>

<p>The only thing I can think of to make it <em>possibly</em> 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</p>

CC BY-SA 3.0
2017-07-19T16:47:18.883Z
I forgot to say thanks! This already helped me a bit (both parts of the answer).
ItamarG3
CC BY-SA 3.0
2017-07-19T11:17:11.933Z
2017-07-19T11:17:11.933Z
Gypsy Spellweaver
<h3>Background:</h3>
<p>This lesson should give a firm foundation for graphics in <code>Swing</code> in java to students in high school who know OOP in java (<code>extends</code>, <code>implements</code> and <code>abstract</code>, 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)</p>
<h3>What I have:</h3>
<p>Currently the lesson plan is as follows:</p>
<p><em>Purpose:</em> To teach the basics of creating GUI in java, for the students' final project.</p>
<p><em>Needed knowledge:</em> Object Oriented Programming, as taught in previous grade (In the previous grade they were taught the concepts listed in the Background section)</p>
<p><em>Needed materials:</em> Computers, preferably one per student (Students can bring their laptops), Internet connection.</p>
<p><em>Procedure:</em></p>
<ol>
<li><p>Explain the basic objects inside the <code>Swing</code> library: <code>JFrame</code>, <code>JPanel</code> etc.</p>
</li>
<li><p>Explain the <code>Container</code> object in <code>AWT</code>, and elaborate on how <code>Swing</code> is <strong>heavily</strong> dependent on <code>AWT</code>. All* objects in <code>Swing</code> are children of objects in <code>AWT</code>. Also explain the <code>Component</code> class object.</p>
</li>
<li><p>Show that <code>Container</code> essentially <em>contains</em> (hence the fancy name) other <code>Component</code>s and that creates a GUI.</p>
</li>
<li><p>Show the students a simple GUI for a chat application (<strong>no server-client, just the gui!</strong>) which composes of a <code>JButton</code>, <code>JTextField</code> (for entering messages), <code>JTextPane</code> (chat history) and <code>JLabel</code>. This step includes showing them the code.</p>
</li>
<li><p>let them work for the remaining time (45 mins plus <code>45-time_it_took_to_get_to_this_step</code>) on creating a gui of their own, of their choosing, which can have <em>any</em> <code>Swing</code> object they find. The GUI <strong>must</strong> have <code>JLabel</code>, <code>JButton</code> and <code>JTextField</code>. Other than that, go wild.</p>
</li>
</ol>
<h3>My problem:</h3>
<p>This lesson shows absolutely <em>nothing</em> about what Java does in the background for the GUI. I am talking about the intensive OOP the goes on in the <code>JFrame</code> class, and the incredible flexibility with everything extending <code>JContainer</code> (allows <code>JButton</code>, <code>JLabel</code> and many others to be treated almost identically).</p>
<p>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?</p>
<hr />
<p><sub>*Haven't checked, but never seen one that isn't.</sub></p>

CC BY-SA 3.0
2017-07-19T07:19:45.327Z
This question has been entered into [the -review question contest](https://cseducators.meta.stackexchange.com/questions/210/topic-challenge-01-the-review-spew).
ItamarG3
CC BY-SA 3.0
2017-07-19T15:47:15.417Z
Swing?  Why not JavaFX?  It is a far better framework.
ncmathsadist
CC BY-SA 3.0
2017-07-19T15:49:45.283Z
@ncmathsadist don't blame me :P. That's the school's curriculum and I am fighting teeth and nail to have it changed to JavaFX. I have posted [some](https://cseducators.stackexchange.com/questions/1430/the-impact-of-switching-to-java-9) [questions](https://cseducators.stackexchange.com/questions/638/introducing-the-mvc-pattern-along-with-javafx) [meant](https://cseducators.stackexchange.com/questions/1373/lambda-expressions-exercises-and-practice) [to prepare](https://cseducators.stackexchange.com/questions/612/how-to-explain-lambda-expressions) for this change. (each word is a different link)
ItamarG3
CC BY-SA 3.0
2017-07-20T02:04:51.240Z
They are foolish. Here is an opportunity to see why CSS and XML are very cool. It is also what phone dev looks like these days.  You do layout in XML with Android.
ncmathsadist
CC BY-SA 3.0
2017-07-20T02:05:21.723Z
We went FX at NCSSM a while ago.  Message me for access to some materials.
ncmathsadist
CC BY-SA 3.0
2017-07-21T04:53:21.103Z
@ncmathsadist I too would be curious to see what you have for JavaFX. I was just shown Swing at a conference and found it simple and accessible, so I am getting ready to teach it to myself. However, if there's something better to show students, I'm all for it. I'd love any/all resources you'd be willing to share.
Peter
<java><introductory-lesson><lesson-review>
Lesson plan for teaching java graphics
# Lesson plan for teaching java graphics

(Asked by: username_0 on 2017-07-19)

### 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 `Component`s 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.

**Tags:** java, introductory-lesson, lesson-review

> **Comments:**
> **username_0**: This question has been entered into [the -review question contest](https://cseducators.meta.stackexchange.com/questions/210/topic-challenge-01-the-review-spew).  
> **username_1**: Swing?  Why not JavaFX?  It is a far better framework.  
> **username_0**: @username_1 don't blame me :P. That's the school's curriculum and I am fighting teeth and nail to have it changed to JavaFX. I have posted [some](https://cseducators.stackexchange.com/questions/1430/the-impact-of-switching-to-java-9) [questions](https://cseducators.stackexchange.com/questions/638/introducing-the-mvc-pattern-along-with-javafx) [meant](https://cseducators.stackexchange.com/questions/1373/lambda-expressions-exercises-and-practice) [to prepare](https://cseducators.stackexchange.com/questions/612/how-to-explain-lambda-expressions) for this change. (each word is a different link)  
> **username_1**: They are foolish. Here is an opportunity to see why CSS and XML are very cool. It is also what phone dev looks like these days.  You do layout in XML with Android.  
> **username_1**: We went FX at NCSSM a while ago.  Message me for access to some materials.  
> **username_2**: @username_1 I too would be curious to see what you have for JavaFX. I was just shown Swing at a conference and found it simple and accessible, so I am getting ready to teach it to myself. However, if there's something better to show students, I'm all for it. I'd love any/all resources you'd be willing to share.  

---

## 3 answers

### Answer by username_4 on 2017-07-19. Score: 5 | Accepted answer

You could extend (heh) your lesson to include [custom painting](https://docs.oracle.com/javase/tutorial/uiswing/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](http://happycoding.io/examples/java/swing/circle-button) (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 by username_5 on 2017-07-19. Score: 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

> **Comments:**
> **username_0**: I forgot to say thanks! This already helped me a bit (both parts of the answer).  

---

### Answer by username_3 on 2017-07-19. Score: 1

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](https://en.wikipedia.org/wiki/Observer_pattern) 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](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) 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.

> **Comments:**
> **username_0**: For MVC I might as well introduce JavaFX (which I intend to, but that's a different question).  
> **username_3**: Yes, I didn't want to suggest JavaFX since you seemed to already have focused on Swing. But my comments apply there as well, I think.  

---

