3461 - Fall 2003 - Section B
User Interfaces

Instructor: William Soukoreff, CSB2022
Lectures: Tuesday and Thursday, 4:00 PM - 5:30 PM, in SC 302.
Office Hours: Tuesday and Thursday, 11:00 AM - 12:00 PM (noon)
E-Mail:

Main Website for 3461

Announcements


December 15 The final grades have been posted on "courseInfo". Happy Holidays!

November 29 A couple of people have asked how to setup a panel inside a scroll pane where the inside panel uses the "flow" layout, but which prefers to only scroll in the vertical direction. I've put together an example using some free code from Berkley. The files you need are onewayscroll.java and FlowScrollLayout.java.

I will be holding office hours next week, but not at the usual times. My hours next week will be:

      Monday, December 1st, from 12:00 (noon) - 1:00 PM
      Thursday, December 4th, from 12:00 (noon) - 1:00 PM
Don't forget that there is no COSC3461 class on Tuesday, December 2nd, because classes that day are to follow the Monday schedule.

November 27 The marks for Assignment #2 have been posted - use the command "courseInfo 3461B" to see your marks. Note! Please double-check all of your marks. The marks listed in courseInfo are your official marks, please make-sure they match the marks the TA e-mailed to you.

Some information regarding the Final Exam is now available.


November 27 The last set of notes are available for download. 14.pdf

November 25 There is an extension for Assignment 3. Assignment 3 is now due on Monday, December 1, by 9:00 AM.

The TA is going to hold more office hours this week. His office is CSB3017. The hours will be:
    Thursday, November 27, 12:00 - 13:00
    Friday, November 28, 11:00 - 12:00


November 20 The next set of notes are available for download. 13.pdf

Also, note that the last reading (Chapter 1 of Doing Psychology Experiments) is available for download as a large (15 MB) ".pdf" file from the main course webpage. Here is a link to it.

The TA is going to hold more office hours next week. His office is CSB3017. The hours will be:
    Monday, November 24, 16:00 - 18:00
    Tuesday, November 25, 14:00 - 16:00


November 18 The next set of notes are available for download. 12.pdf

Professor MacKenzie will be lecturing for section B today. Note also that I will not be available during my normal office hours.


November 13 The next set of notes are available for download. 11.pdf

November 11 Assignment #3 has been posted.

Also, note that I've changed the slides for the current module (10.pdf). You might want to download them again if you retrieved them before 2:00 pm.


November 11 The next set of notes are available for download. 10.pdf

November 6 Here are the programs from today's class:
DemoTableModel3.java DemoTableModel3-1.gif DemoTableModel3-2.gif

DemoTableModel4.java DemoTableModel4-0.gif DemoTableModel4-1.gif DemoTableModel4-2.gif DemoTableModel4-3.gif

DemoInputValidation3.java

DemoTable3.java DemoTable3-1.gif DemoTable3-2.gif DemoTable3-3.gif

DemoCustomButtonUI.java DemoCustomButtonUI-1.gif DemoCustomButtonUI-2.gif DemoCustomButtonUI-3.gif

DemoTree.java DemoTree-1.gif DemoTree-2.gif

DemoTree2.java DemoTree2-1.gif DemoTree2-2.gif DemoTree2-3.gif

Don't forget that Assignment #2 is due tomorrow (Friday the 7th) by midnight.


November 6 The next set of notes are available for download. 09.pdf

November 4 Here are the programs from today's class:
DemoButtonModel.java DemoButtonModel-1.gif
DemoTableModel.java
DemoTableModel2.java DemoTableModel2-1.gif

October 30 Next class (Tuesday November 4th) we will start Module 8 - The Model View Controller. Please read the following article: A swing architecture overview: The inside story on JFC component design. This is an excellent article that provides a good foundation for our discussions on the Model View Controller (MVC) architecture.

Here are the programs from today's class:
DemoImageSizePosition.java DemoImageSizePosition-1.gif DemoImageSizePosition-2.gif
For DemoImageSizePosition you'll also need: tbBigger.gif tbDown.gif tbLeft.gif tbNarrower.gif tbRight.gif tbShorter.gif tbSmaller.gif tbTaller.gif tbUp.gif tbWider.gif teamcanada.gif

DemoFontMetrics.java DemoFontMetrics-1.gif

DemoList3.java DemoList3-1.gif

DemoTimer.java DemoTimer-1.gif DemoTimer-2.gif
For DemoTimer you'll also need: clouds-1.gif spaceship-1.gif spaceship-2.gif


October 30 The next set of notes are available for download. 08.pdf

October 28 Here are the programs from today's class:
DemoPaintPanel3.java
DemoPassword.java DemoPassword-1.gif DemoPassword-2.gif
DemoMouseInk.java DemoMouseInk-1.gif

DemoMouseUnistrokes.java DemoMouseUnistrokes-1.gif DemoMouseUnistrokes-2.gif
For DemoMouseUnistrokes you'll also need: StrokeDef.class Unistroke.class

DemoImage.java DemoImage.gif
DemoImage2.java DemoImage2.gif
For DemoImage you'll also need: varihall.jpg

Also, please note that the course evaluation will take place during the final 15 minutes of our class on November 25.


October 28 The marks for the Midterm and Assignment #1 have been posted. Use the command "courseInfo 3461B" on Ariel (Prism) to see your marks. No doubt some of you will have concerns about your marks, so we have arranged for the TA to hold some office hours this week. He will be available in CSE3017 on Thursday and Friday (the 30th and 31st of October) from 12:00 noon - 2:00 pm. Andriy will be away at a conference next week (Nov 3-7). While he is away, he cannot respond to student emails, nor can he hold office hours. Please use these office hours for questions about Assignment #2 as well as questions about the marks for Assignment #1 and the midterm exam.

I will return the midterms during class today. If you miss this class then you can get your exams from me during my office hours.


October 23 Here's the programs we discussed in class recently:
DemoPaintPanel.java DemoPaintPanel-1.gif
DemoPaintPanel2.java DemoPaintPanel2-1.gif DemoPaintPanel2-2.gif
For DemoPaintPanel2 you will also need: logo.gif

Here's the solutions to the Programming Challenges:
PC_SizeProperties.java PC_SizeProperties-1.gif
PC_LayoutExample.java PC_LayoutExample-1.gif PC_LayoutExample-2.gif

There are a couple of good on-line resources on painting, Amy Fowler's article Painting in AWT and Swing and the lesson Working with Graphics in the Swing tutorial.

See you at the midterm!


October 21 The next set of notes are available for download. 07.pdf

October 17 Assignment #2 has been posted.

October 16 Here is the program we saw today in class:
DemoSizeControl.java DemoSizeControl-1.gif DemoSizeControl-2.gif DemoSizeControl-3.gif DemoSizeControl-4.gif DemoSizeControl-5.gif

The midterm is one week from today. It covers everything up to and including today's lecture.

Programming Challenges
There are two programming challenges described in the notes for module 6. I'll show solutions for both on Tuesday.


October 14 Here are the programs we saw today in class:
DemoList.java DemoList-1.gif
DemoList2.java DemoList2-1.gif
DemoListMultiple.java DemoListMultiple-1.gif
DemoTable.java DemoTable-1.gif DemoTable-2.gif DemoTable-3.gif
DemoTable2.java

DemoSizeProperties.java DemoSizeProperties-1.gif
DemoSize.java DemoSize-1.gif DemoSize-2.gif DemoSize-3.gif
DemoPosition.java
DemoAbsolute.java DemoAbsolute.gif
DemoBorderLayout.java DemoBorderLayout-1.gif DemoBorderLayout-2.gif
DemoFlowLayout.java DemoFlowLayout-1.gif DemoFlowLayout-2.gif
DemoGridLayout.java DemoGridLayout-1.gif DemoGridLayout-2.gif
DemoBoxLayout.java DemoBoxLayout-1.gif DemoBoxLayout-2.gif DemoBoxLayout-3.gif

You'll also need the following text files:
quotations.txt
worldrecordsmen.txt
worldrecordswomen.txt


October 14 The next set of notes are available for download. 06.pdf

October 10 Several of you were asking how to enforce maximum and minimum sizes on a JFrame. (To constrain the sizes that the user can stretch or shrink the JFrame to when resizing.) I've put together a little program that demonstrates how to accomplish this. Have a look at framedemo2.java.

October 9 Here are the programs we saw today in class:
DemoMessageBox.java DemoMessageBox.gif
DemoInputValidation1.java DemoInputValidation1-1.gif
DemoInputValidation2.java
DemoTextField.java DemoTextField.gif
DemoTextField2.java
DemoComboBox2.java DemoComboBox2-1.gif DemoComboBox2-2.gif DemoComboBox2-3.gif
DemoFileChooser.java DemoFileChooser-1.gif
DemoMenu2.java DemoMenu2-1.gif
DemoCustomDialog.java DemoCustomDialog-0.gif DemoCustomDialog-1.gif DemoCustomDialog-2.gif DemoCustomDialog-3.gif
DemoSliderBB.java DemoSliderBB-1.gif
DemoSlider.java DemoSlider-1.gif
DemoScrollBarBB.java DemoScrollBarBB-1.gif
DemoScrollPane.java DemoScrollPane-1.gif
DemoScrollPane2.java DemoScrollPane2-1.gif

You'll also need the following GIF images:
hockeyplayer.gif logo.jpg map.gif

Don't forget that Assignment #1 is due tomorrow (Friday the 10th) by midnight.


October 7 Here are the programs we saw today in class:
DemoButtons.java DemoButtons.gif
DemoIconButton.java DemoIconButton-1.gif
DemoDisabledButton.java DemoDisabledButton-1.gif DemoDisabledButton-2.gif
DemoHTMLButton.java DemoHTMLButton-1.gif
DemoToolBar.java DemoToolBar.gif

You'll also need the following GIF images:
left.gif right.gif bigger.gif smaller.gif red.gif green.gif blue.gif italic.gif bold.gif underline.gif restore.gif incrementIcon.gif incrementIcon-disabled.gif decrementIcon.gif decrementIcon-disabled.gif

Additionally, at the beginning of class I demonstrated the testsetpage.java program that uses a JTextPane to display HTML.

Some of you wanted to know about buttons that have both text and an icon. The fancybutton.java program demonstrates this.

I've had a few of you ask how to make it so that the user cannot resize windows. Disabling resizing is accomplished with the setResizable(); member function of JFrame. You could put frame.setResizable(false); in the main part of the program, or just setResizable(false); in your frame's constructor.

Programming Challenge
Add some features to DemoFileMenu.java, including:

  1. (Easy) - On 'New', 'Open', and 'Exit' the program should check whether the user has changed the file in memory (in other words, is "dataChanged" true), and ask the user if they want to save the file before continuing.

    The "close" menu option already does this.

  2. (Medium) - There is a bug in the program concerning two of the "Option Dialogs" used by the program. The "okToReplace" and "changesShouldBeSaved" functions are used to query the user by displaying a "Yes / No / Cancel" dialog box. The bug is that the cancel option is not correctly handled. "Cancel" should not be the same as "No", as in the current implementation. Fix the program so that "cancel" has the correct behavior.

  3. (Harder) - The "Save" menu option should be disabled, unless the user has changed the file in memory.

October 2 Here are the programs we saw Tuesday and today in class:

DemoMenu.java DemoMenu-1.gif
DemoMenu2.java DemoMenu2-1.gif

DemoLookAndFeel.java DemoLookAndFeel-1.gif DemoLookAndFeel-2.gif DemoLookAndFeel-3.gif DemoLookAndFeel-4.gif

DemoFileMenu.java DemoFileMenu-1.gif DemoFileMenu-2.gif

You'll also need the following GIF images:
triangle.gif
yikes.gif

Don't forget about the Java Swing Tutorial. It's a great resource, with lots of examples. It's available on the main course website and here.


September 30 The next set of notes are available for download. 05.pdf

I've arranged for the TA to hold some office hours during the week that the assignment is due. Here's the relevent information:
Andriy Pavlovych
Office: CSE 3017
Tuesday, October 7, 12:00 (noon) - 2:00 pm
Wednesday, October 8, 1:00 pm - 3:00 pm
E-mail: ta3461@yahoo.ca


September 25 Here's the program we saw today in class:
DemoCursorControl.java DemoCursorControl-1.gif

You'll also need the following GIF image:
cursor-box.gif

I had a couple of questions at the end of class that make me want to clarify my comments about the stuff at the end of chapter 2 in Don Norman's "The Design of Everyday Things". The point of the Seven Stages of Action is not to overly analyse the psychological process of operating some device. When an action is performed, all of these seven things occur, but Norman isn't arguing that the human mind follows these seven stages, separately and sequentially. The seven stages are best thought of as a cycle, starting with the goals of the user. Goals lead to actions, the results of which are evaluated, leading to further goals:

   goals -> actions -> evaluation -> more goals -> more actions -> ...

The point you should take away from this is that to maximise the usability of your software, you should make the following two things clear to the user:

  1. What operations are possible?
  2. And what was the effect of the previous action?
The two "gulfs" that Norman discusses affect the actions and evaluation stages of the cycle. The "Gulf of Evaluation" represents the difficulty that a user encounters when trying to figure-out what effect their last action had on the system. The "Gulf of Execution" represents the difficulty in getting the system to do what the user wants (i.e., "What should I try next?").

Anyway, the seven stages are useful in evaluating the design of your software. Consider the questions posed in the box on page 53 (the last page of the chapter). The seven stages give rise to the seven questions posed there, which form a useful tool for you to use when evaluating your own software designs. The four "Principles of Good Design" are great guidelines to follow, but the seven questions provide a way for you to see how useable your design actually is.


September 23 Here's the programs we used in class today:
DemoLowLevelEvents.java DemoLowLevelEvents-1.gif
DemoHighLevelEvents.java DemoHighLevelEvents-1.gif
DemoActionEvents.java DemoActionEvents-1.gif
DemoFocusEvents.java
DemoTranslateEnglishGUI2.java DemoTranslateEnglishGUI2-1.gif

Programming Challenge
Your task is to add a button to the DemoSwing.java program that we covered last week. You'll recall that this program presents the user with two buttons, "Press me!" which increments a counter, and "Exit". Add a third button to this program called "Press me too!" that decrements the counter. We'll take up this program in class next Tuesday.


September 23 The next set of notes are available for download. 04.pdf

September 18 Here's the programs we used in class today:
DemoTranslateEnglishGUI.java DemoTranslateEnglishGUI-1.gif
DemoKeyEvents2.java DemoKeyEvents2-1.gif
DemoMouseEvents.java DemoMouseEvents-1.gif
Again, I've included the .gif files referenced in the javadoc comments.

Today there were lots of questions about the buttons in the window frame, and whether they are drawn by Windows or by the Java Swing library. In fact, window frame components can be drawn by either the native window sysem (whatever environment the Java program is running on), or by the Java Swing library. See this section of the page on JFrames we looked at in class.

To quote from this page:

By default, window decorations are supplied by the native window system. However, you can request that the look and feel provide the decorations for a frame. You can even specify that the frame have no window decorations at all, a feature that can be used on its own, or to provide your own decorations, or with full-screen exclusive mode.

The way you request that the Java Swing library draws the frame instead of the native system is by putting: JFrame.setDefaultLookAndFeelDecorated(true); in your program before you create any JFrame objects.

I've put together a little program that demonstrates this. Download framedemo.java (and here's a .gif for the javadoc comments framedemo.gif). Here's what the program looks like when run on my windows laptop:

As you can see, this is clearly not the usual windows frame; this one was drawn by the Swing library. Check-out the source code to see how this is done.


September 16 Here's the programs we used in class today:
DemoHelloWorld.java DemoHelloWorld-1.gif
DemoHelloWorld2.java DemoHelloWorld2-1.gif
DemoSwing.java DemoSwing-1.gif
DemoTranslateEnglishConsole.java DemoTranslateEnglishConsole-1.gif
DemoKeyEvents.java DemoKeyEvents-1.gif
Note that I've included some .gif files - these are referenced in the javadoc comments. As your collection of example programs grows, you should keep your own javadoc pages up to date so you can reference them as needed. (Type javadoc *.java in the directory where you keep these programs, then open the index.html file produced.)

Here are some .gif files referenced by the javadoc comments in the programs I gave you last week. DemoLargestConsole-1.gif DemoLargestGUI-1.gif DemoLargestGUI-2.gif

Here's links to the pages in the Java Tutorial that we talked about today on JFrames, JPanels, and Boarders.

You were interested in the batch file I use to compile and run java programs. The batch file is called j.bat. Put this file in your c:\windows directory (it's in the DOS path). When you use the j program, leave the .java off the Java filename. For example, to compile and run the DemoHelloWorld.java program, type j DemoHelloWorld
For this program to work for you, you need the java and javac programs to be in the DOS path. To see the DOS path under Windows XP, go to the control panel, open System, choose the Advanced tab at the top of the window, and click on the Environment Variables button at the bottom. Next make-sure that the Java binaries path is in the PATH variable at the bottom. The default Java binaries path is c:\j2sdk1.4.2_01\bin


September 16 The next set of notes are available for download. 03.pdf

September 11 Here's the program source code we talked about at the beginning of today's class. fun.java Again, don't worry if the details seem unfamiliar, next lecture we'll start talking about coding GUIs in Java.

Also, note that I've posted my office hours.


September 11 The notes for the the second lecture are available for download. 02.pdf

September 9 Your homework for today is to download the following two programs (these are the ones that I demonstrated in class). Compile and run them, and have a peek at the source code. Don't worry too much about the details of the source code for now.
DemoLargestConsole.java
DemoLargestGUI.java

Also, if you have Java installed on your home machine, don't forget to check the version and upgrade it if necessary. There's a link on the main 3461 page to the Java download page. You can find-out your version of Java by typing java -version. You should have Java 2, build 1.4.2.


September 9 The notes for the first lecture are available for download. 01.pdf

September 4 Welcome COSC3461 students! The first lecture will be on Tuesday, September 9th.

Preliminary versions of my slides will be available for download from this website the morning of each lecture. The source code for programs demonstrated in class will also be made available.