Lesson Duration: 2-3 weeks
Course Title: Advanced Computer Programming
Session Title: Graphical User Interfaces
Performance Objective:
Upon completion of this assignment, the student will be able to:
•
identify the core Graphical User Interface components,
•
design user interfaces using Graphical User Interface components,
•
identify the characteristics of event driven programming,
•
employ interface techniques, and
•
implement Graphical User Interfaces
Specific Objectives:
•
Define Graphical User Interface components
•
Implement programs that use Graphical User Interface Components
•
Identify characteristics of Event driven programs
Preparation
TEKS Correlations: 130.277 (c)
•
5.C
– apply language specific programming techniques;
•
7.A
– use principals of system design such as structured, object-oriented, and eventdriven processes;
•
7.D
– design system input, output, processing and interfaces;
•
7.E
– identify the characteristics and uses of data processing such as batch, interactive, event driven and object oriented;
•
7.M
– employ interface techniques;
•
8.C
– articulate the concept of data representation.
Instructor/Trainer
References:
•
Horstmann, Cay S. Big Java . Hoboken, NJ: Wiley, 2010. Print.
Instructional Aids:
Presentation:
Graphical User Interfaces
Quiz (KEY is provided):
Graphical User Interface Quiz
Labs (KEY is provided):
Event Listeners Lab Handout
Buttons, Fields, Labels Lab Handout
Menus, TextAreas Lab Handout
Student Files:
ConcertForm.java, Editor.java, MouseFinder.java

Lab Key Files:
ConcertForm.java, Editor.java, MouseFinder.java
Materials Needed:
Copies of Labs:
Event Listeners Lab Handout
Buttons, Fields, Labels Lab Handout
Menus, TextAreas Lab Handout
Copies of Quiz
Student Files may be loaded on student computers, or provided in some manner.
It is useful to have copies of the Student Files, but not necessary if the students use the files from the computer.
Equipment Needed:
Each student will require a computer with a java compiler with a java JDK version of 1.5 or newer as well as the Java API Documentation.
Learner
The learner should be familiar with object oriented design, interfaces, calling methods on objects, the java API documentation and be fluent in basic programming.
Introduction
MI Introduction (LSI Quadrant I):
What would it be like if you had to enter all information from a command line interface? What conveniences do Windows and graphical user interfaces afford us?
How does having a graphical interface make using a computer easier for you? What would it be like to have to use a computer without a graphical interface?
Outline
MI Outline (LSI Quadrant II):
•
Graphical User Interface Basics
•
Event Driven Programming
•
Graphical User Interface Libraries
Instructor Notes:
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
2

MI
Graphical User Interface Components
•
Frame
•
Canvas
•
Panel
•
Button
•
Label
•
TextField
•
TextArea
•
Menu
•
Radio Buttons
•
CheckBoxes
Application
Guided Practice (LSI Quadrant III):
Students enter the Student File code or discuss the contents of the code files in groups. Students explain how each of the components works together and identify how the events are triggered and how the events affect the GUI components.
MI Independent Practice (LSI Quadrant III):
Following the presentation, students should be provided with the labs to complete on their own.
Summary
MI Review (LSI Quadrants I and IV):
Students will incorporate the concepts introduced by completing the hands on labs.
It would also be a good idea to have the students keep an observation journal to record observations of common errors they encounter and what kinds of results they are getting.
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
3

Evaluation
MI
MI
Informal Assessment (LSI Quadrant III):
Students discuss the contents of the code files in groups. Students explain how each of the components work together and identify how the events are triggered and how the events affect the GUI components.
Formal Assessment (LSI Quadrant III, IV):
MI
Instructor may use any or all of the following instruments for formal assessment:
Graphical User Interface Quiz
Event Listeners Lab
Buttons, Fields, Labels Lab
Menus, TextAreas Lab
Extension
Extension/Enrichment (LSI Quadrant IV):
Students may pursue more advanced Graphical User Interface projects and look at other components not addressed here such as Sliders, ProgressBars, Lists, Combo
Boxes and numerous others. Some suggestions for projects are: an employment application, and 1040EZ tax form.
Students interested in graphics may want to combine this lesson with a lesson on
Concurrency to created animated programs such as movies or video games.
Combining this lesson with networking, students can create transactional programs such as inventory control systems or online video games.
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
4

Lecture, discussion, journal writing, cooperative learning, word origins
Problem solving, number games, critical thinking, classifying and organizing,
Socratic questioning
Mind-mapping, reflective time, graphic organizers, color-coding systems, drawings, designs, video,
DVD, charts, maps
Use music, compose songs or raps, use musical language or metaphors
Use manipulatives, hand signals, pantomime, real life situations, puzzles and board games, activities, roleplaying, action problems
Reflective teaching, interviews, reflective listening,
KWL charts
Cooperative learning, roleplaying, group brainstorming, cross-cultural interactions
Natural objects as manipulatives and as background for learning
Socratic questions, real life situations, global problems/questions
Reading, highlighting, outlining, teaching others, reciting information
Organizing material logically, explaining things sequentially, finding patterns, developing systems, outlining, charting, graphing, analyzing information
Developing graphic organizers, mindmapping, charting, graphing, organizing with color, mental imagery (drawing in the mind’s eye)
Creating rhythms out of words, creating rhythms with instruments, playing an instrument, putting words to existing songs
Moving while learning, pacing while reciting, acting out scripts of material, designing games, moving fingers under words while reading
Reflecting on personal meaning of information, studying in quiet settings, imagining experiments, visualizing information, journaling
Studying in a group, discussing information, using flash cards with other, teaching others
Connecting with nature, forming study groups with like minded people
Considering personal relationship to larger context
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
5

Name: _________________________ Date: ___________________ Period: __________
Graphical User Interfaces Quiz
1. Which of the following is an event a GUI might respond to? a. Moving the mouse b. Typing on the keyboard c. Selecting a checkbox on the screen d. All of the Above
2. Which java library would you use to draw pictures on a window? a. java.awt.* b. java.awt.event.* c. javax.swing.* d. None of the Above
3. Which java library would you use to get input from a mouse? a. java.awt.* b. java.awt.event.* c. javax.swing.* d. None of the Above
4. Which java library would you use to display buttons and textfields in a window? a. java.awt.* b. java.awt.event.* c. javax.swing.* d. None of the Above
5. What GUI component must all Java applications have? a. Panel b. Frame c. Canvas d. None of the Above
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
6

6. What GUI component should you use to organize other components in a window? a. Panel b. Canvas c. Organizer d. None of the Above
7. What GUI component would you use to input text from a window? a. Radio button b. TextField c. Panel d. None of the Above
8. What GUI component would you use to select one choice from many options? a. Radio button b. Checkbox c. Button d. None of the Above
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
7

Name: _________________________ Date: ___________________ Period: __________
Graphical User Interfaces Quiz KEY
1. Which of the following is an event a GUI might respond to? a. Moving the mouse b. Typing on the keyboard c. Selecting a checkbox on the screen d. All of the Above
2. Which java library would you use to draw pictures on a window? a. java.awt.* b. java.awt.event.* c. javax.swing.* d. None of the Above
3. Which java library would you use to get input from a mouse? a. java.awt.* b. java.awt.event.* c. javax.swing.* d. None of the Above
4. Which java library would you use to display buttons and textfields in a window? a. java.awt.* b. java.awt.event.* c. javax.swing.* d. None of the Above
5. What GUI component must all Java applications have? a. Panel b. Frame c. Canvas d. None of the Above
6. What GUI component should you use to organize other components in a window? a. Panel b. Canvas c. Organizer d. None of the Above
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
8

7. What GUI component would you use to input text from a window? a. Radio button b. TextField c. Panel d. None of the Above
8. What GUI component would you use to select one choice from many options? a. Radio button b. Checkbox c. Button d. None of the Above
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
9

Name: _________________________ Date: ___________________ Period: __________
Graphical User Interfaces: Event Listeners – Lab
Purpose: To identify the features of event listeners and be able to modify code to use event listeners
Materials: You will require a java compiler and editor, the MouseFinder.java student source code file and the documents for this lab.
Directions:
1. Open the MouseFinder.java file and compile it.
2. Run the MouseFinder program. Describe what you see on the screen.
3. Examine the source code for MouseFinder. What class does it extend? What interface does it implement?
4. What two functions must be in a class that implements MouseMotionListener (check the
JavaDocs if you are not sure)?
5. In the mouseMoved() method, x and y are set to 0. They should be set to the position of the mouse. Check the JavaDocs for MouseEvent to determine how to retrieve the x and y position of the mouse. What are the necessary functions? Implement them.
6. With the mouseMoved() fixed, run the program to determine what the approximate coordinates of the two points where the two circles intersect.
7. Look at the JavaDocs for Graphics to find more drawing commands. Add more shapes to the window to draw an interesting picture.
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
10

Name: _________________________ Date: ___________________ Period: __________
Graphical User Interfaces: Event Listeners – Lab KEY
Purpose: To identify the features of event listeners and be able to modify code to use event listeners
Materials: You will require a java compiler and editor, the MouseFinder.java student source code file and the documents for this lab.
Directions:
1. Open the MouseFinder.java file and compile it.
2. Run the MouseFinder program. Describe what you see on the screen.
In yellow, top left corner (0,0)
Two circles intersecting, one cyan, the other magenta
3. Examine the source code for MouseFinder. What class does it extend? What interface does it implement?
Canvas; MouseMotionListener
4. What two functions must be in a class that implements MouseMotionListener (check the
JavaDocs if you are not sure)? mouseMoved() and mouseDragged()
5. In the mouseMoved() method, x and y are set to 0. They should be set to the position of the mouse. Check the JavaDocs for MouseEvent to determine how to retrieve the x and y position of the mouse. What are the necessary functions? Implement them. getX() and getY()
6. With the mouseMoved() fixed, run the program to determine what the approximate coordinates of the two points where the two circles intersect.
About (216,350) and (380,124)
7. Look at the JavaDocs for Graphics to find more drawing commands. Add more shapes to the window to draw an interesting picture.
Inspect program
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
11

Name: _________________________ Date: ___________________ Period: __________
Graphical User Interfaces: Buttons, Fields, Labels – Lab
Purpose: To identify the features of buttons, text fields and labels and be able to modify code to use buttons, text fields and labels
Materials: You will require a java compiler and editor, access to JavaDocs, the
ConcertForm.java student source code file and the documents for this lab.
Directions:
1. Open the ConcertForm.java file, compile it, then run it.
2. Check the select box for the CD and type the name “Bob” in the text field. Press Submit.
What was printed to the output window?
3. Examine the source code. What interface does the class implement?
4. What is the line that creates the TextField (line number and statement)?
5. What does the number in the parameter mean (look in the JavaDocs if you are not sure)?
6. What is the code that creates the two Radio Buttons?
7. Why does the stadium Radio button have true as one of its parameters?
8. Add a Radio button to offer “backstage passes”. a. Add a declaration and initialization for the backstage pass. b. In the seating panel, change the GridLayout to GridLayout(3,1). c. In the addSeatingPanel(), add the third choice to the choices ButtonGroup. d. In the addSeatingPanel(), add the third choice to the panel. e. In printTicket(), add a conditional statement to print out the choice. f. Compile and run the program to ensure your change works.
9. Add a Checkbox to offer a “souvenir t-shirt”. a. Add a declaration and initialization for the shirt. b. In the addExtrasPanel(), add the shirt option to the panel. c. In printTicket(), add a conditional statement to print out the option. d. Compile and run the program to ensure your change works.
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
12

Name: _________________________ Date: ___________________ Period: __________
Graphical User Interfaces: Buttons, Fields, Labels – Lab KEY
Purpose: To identify the features of buttons, text fields and labels and be able to modify code to use buttons, text fields and labels
Materials: You will require a java compiler and editor, access to JavaDocs, the
ConcertForm.java student source code file and the documents for this lab.
Directions:
1. Open the ConcertForm.java file, compile it, then run it.
2. Check the select box for the CD and type the name “Bob” in the text field. Press Submit.
What was printed to the output window?
Bob
Stadium Seating
CD purchased
3. Examine the source code. What interface does the class implement?
ActionListener
4. What is the line that creates the TextField (line number and statement)?
7 private JTextField nameField = new JTextField(20);
5. What does the number in the parameter mean(look in the JavaDocs if you are not sure)?
There are 20 columns in the textfield
6. What is the code that creates the two Radio Buttons? private JRadioButton choice1 = new JRadioButton("stadium",true); private JRadioButton choice2 = new JRadioButton("pit");
7. Why does the stadium radio button have true as one of its parameters?
It selects it as the default choice
8. Add a Radio Button to offer “backstage passes”. a. Add a declaration and initialization for the backstage pass. b. In the seating panel, change the GridLayout to GridLayout(3,1). c. In the addSeatingPanel(), add the third choice to the choices ButtonGroup. d. In the addSeatingPanel(), add the third choice to the panel. e. In printTicket(), add a conditional statement to print out the choice. f. Compile and run the program to ensure your change works.
Check the program for functionality.
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
13

9. Add a Checkbox to offer a “souvenir t-shirt”. a. Add a declaration and initialization for the shirt. b. In the addExtrasPanel(), add the shirt option to the panel. c. In printTicket(), add a conditional statement to print out the option. d. Compile and run the program to ensure your change works.
Check the program for functionality.
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
14

Name: _________________________ Date: ___________________ Period: __________
Graphical User Interfaces: Menus, TextAreas – Lab
Purpose: To identify the features of menus and text areas and be able to modify code to use menus and text areas
Materials: You will require a java compiler and editor, the Editor.java student source code file and the documents for this lab.
Directions:
1. Open the Editor.java file and compile it.
2. Run the Editor program. Open the “File” menu. List what options are there. Are all of the options enabled (can you select all the options)
3. Examine the source code for the Editor program. On what line is the TextArea created?
What is the line? What do the parameters mean (use the JDK help if you aren’t sure)?
4. Most programs have an exit or quit option. Add a quit option to the menu. a. Add a quit JMenuItem attribute b. In the menu listeners, add a menu listener for the quit item. c. In the createMenuBar() method, add the quit menu item to the menu bar. d. In the actionPerformed() method, add a conditional statement to check for the quit item. The action to perform when quit is selected is
System.exit(0);
e. Compile and run the program. Try selecting quit. The window should close.
5. The program can only save a document that has been opened, but you can type text in the edit window without opening a document. Also, you cannot change the filename of the document to be saved. Add a “Save As” command to the File menu. a. Add a SaveAs JMenuItem attribute b. In the menu listeners, add a menu listener for the SaveAs item. c. In the createMenuBar() method, add the SaveAs menu item to the menu bar. d.
In the actionPerformed() method, add a conditional statement to check for the
SaveAs item. The actions to perform when SaveAs is selected is: e.
filechooser.setApproveButtonText("Save"); f.
if(setFilename()) g. save();
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
15

h. Compile and run the program. Try selecting Save As. You should be presented with a file choice menu, and if you select a file or type in a file name, it should save the text in the window to a file of the name chosen.
6. What does the command: filechooser.setApproveButtonText("Save"); do?
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
16

Name: _________________________ Date: ___________________ Period: __________
Graphical User Interfaces: Menus, TextAreas – Lab KEY
Purpose: To identify the features of menus and text areas and be able to modify code to use menus and text areas
Materials: You will require a java compiler and editor, the Editor.java student source code file and the documents for this lab.
Directions:
1. Open the Editor.java file and compile it.
2. Run the Editor program. Open the “File” menu. List what options are there. Are all of the options enabled (can you select all the options?)
Open and Save
Save is not enabled
3. Examine the source code for the Editor program. On what line is the TextArea created?
What is the line? What do the parameters mean (use the JDK help if you aren’t sure)?
14 JTextArea document = new JTextArea(32,80);
Number of rows, Number of columns
4. Most programs have an exit or quit option. Add a quit option to the menu. a. Add a quit JMenuItem attribute. b. In the menu listeners, add a menu listener for the quit item. c. In the createMenuBar() method, add the quit menu item to the menu bar. d. In the actionPerformed() method, add a conditional statement to check for the quit item. The action to perform when quit is selected is
System.exit(0);
e. Compile and run the program. Try selecting quit. The window should close.
5. The program can only save a document that has been opened, but you can type text in the edit window without opening a document. Also, you cannot change the filename of the document to be saved. Add a “Save As” command to the File menu. a. Add a SaveAs JMenuItem attribute b. In the menu listeners, add a menu listener for the SaveAs item. c. In the createMenuBar() method, add the SaveAs menu item to the menu bar. d.
In the actionPerformed() method, add a conditional statement to check for the
SaveAs item. The actions to perform when SaveAs is selected is:
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
17

e.
filechooser.setApproveButtonText("Save"); f.
if(setFilename()) g. save(); h. Compile and run the program. Try selecting Save As. You should be presented with a file choice menu, and if you select a file or type in a file name, it should save the text in the window to a file of the name chosen.
6. What does the command: filechooser.setApproveButtonText("Save"); do?
Sets the text of the button to “Save”
IT: Advanced Computer Programming : Graphical User Interfaces Lesson Plan
Copyright © Texas Education Agency, 2013
18