The lab today is a bit different, since it includes less actual programming than usual. On the other hand, it does involve more reading, so it would be a good idea to read through it before coming to lab. What programming there is involves creating some subroutines, but there is not too much new code to write. Instead, the main point of the lab is to preview some of the core ideas of GUI programming with objects, components, and events (without asking you to understand everything that is going on at this point). There is also more information about creating Web pages and posting applets on the Web.
You should be able to finish at least parts 1 and 2 during the lab period. Remember that your first programming project is due on Friday of this week. After you finish parts 1 and 2, you can work on part 3 or you can work on your programming project. All three parts of the lab are due, as usual, at next week's lab.
To begin the lab, you should start up Eclipse, begin a new project, and import the following files from the directory /classes/s06/cs124/lab7: ArtSubroutinesApplet.java, ArtSubroutinesFrame.java, and ArtSubroutinesPanel.java. As usual, you will only have to work on the "Panel" class, ArtSubroutinesPanel.java. You can run the "Frame" class, ArtSubroutinesFrame.java, as an application. And the "Applet" class, ArtSubroutinesApplet.java, is only needed when you post your work to a Web page.
The program that you will be working on is a new version of the RandomArt program from Lab 5. The previous version drew a new work of "art" every five seconds. In the new version, creation of art is under the control of the user: A work of "art" is created when the user clicks a button. There will be four buttons along the bottom, corresponding to the four different types of art. Instead of using a switch statement to draw the four different types of art, the new version will use four separate subroutines. Here is an applet showing my completed version of the program:
Exercise: The exercise is to complete the ArtSubroutines program, as described below in parts 1 and 2 of the lab, and to create a CS124 web site that includes the ArtSubroutines program as an applet, as described below in part 3.
A GUI (graphical user interface) is typically made up of a number of components such as buttons, text-input boxes, and menus. Windows and applets are also considered to be components, and "panels" are a generic sort of component that can serve either as a drawing area or as a container for other components. In particular, panels can contain other panels, which makes it possible build up very complex GUIs.
Panels in Java are represented as objects belonging to the JPanel class or to a subclass of JPanel. The ArtSubroutines program uses a panel as a drawing area. This panel actually belongs to a class named ArtPanel that is defined as a subclass of JPanel. (ArtPanel is actually defined as a nested class inside the ArtSubroutinesPanel class.) The ArtSubroutinesPanel GUI uses several buttons. In Java, a button is represented as an object belonging to the class JButton. Less obviously, it uses another JPanel as a container to hold the buttons. The ArtSubroutinesPanel itself is defined as a subclass of JPanel to hold the drawing area panel and the button panel.
The GUI is actually created in the constructor of the ArtSubroutinesPanel class. A constructor is a special type of subroutine that is called automatically whenever an object is created. The purpose of the constructor is to initialize the object. In this case, it creates the display area and buttons and adds them to the interface. Unlike other subroutines, a constructor does not have a return type. The name of a constructor is the same as the name of the class. If you look inside the constructor in ArtSubroutinesPanel.java, you'll see that it declares some variables of type JButton to represent the three buttons:
JButton pollockButton, kandinskyButton, mondrianButton;
Then the buttons themselves are created and added to the interface. For pollackButton, for example, this is done in the following three lines:
pollockButton = new JButton("Pollock?");
buttonBar.add(pollockButton);
pollockButton.addActionListener(this);
There is a lot going on here. The first line creates the button object. Simply declaring a variable does not create an object. The object is created with the new operator, which calls the constructor from the JButton class to create the object. The constructor has a parameter that specifies the text that will appear on the button. So, saying new JButton("Pollock?") creates a button that will display "Pollack?" as its text. The second line adds the button to the panel that contains the buttons. The third line requires some explanation...
The action in a modern graphical user interface is mostly based on events. An event is something that happens outside the control of the program. (It is asynchronous.) Many events are generated by user actions such as typing a character, selecting a menu item, or clicking a button. In particular, clicking a JButton generates a type of event known as an Action event. When such an event occurs, the system wants to call a subroutine to "handle" the event, but it has to be told which subroutine to call. The line pollockButton.addActionListener(this); tells the system essentially, "When the user clicks pollackButton, call the action-event handler subroutine in 'this' class." The subroutine is called actionPerformed and can be found later in the file. The subroutine is meant to be called by the system in response to an action event; it is said to "listen" for those events.
You will be relieved to know that you don't have to understand all this at this point. However, you should understand it well enough to be able to add another button to the applet by imitating the code that is already there. Remember that you have four types of art in your old RandomArt program, but so far there are only three buttons. Add another button to the applet corresponding to your own original contribution to the art world. Adding this button is part 1 of the lab. Once you've done it, run the program to make sure that the button appears and that clicking on it has an effect. The text from the button should appear in the drawing area.
It can be hard to follow the flow of control in an event-driven program, since there is no way to know what order the events will occur in. It is helpful to think in terms of the state of the program. The state is the information stored in member variables. When an event occurs, the state can change. When the state changes, the appearance of the applet might have to change in response. In addition, the response to future events might be different because of the change in the state.
The major piece of the state of the ArtSubroutines program is represented in the member variable named artType. This variable records which type of the art the user has selected. Its value changes when the user clicks one of the buttons. It is a variable of type String. Its value is "None" when the program starts, and when the user clicks on a button, its value is reset to be the text from the button that was clicked. (This is done in the actionPerformed subroutine.) The actual drawing of the art is done in the subroutine
private void createArt(Graphics g, int width, int height)
Clicking a button triggers a call to this subroutine as a side effect so that the new art work can be drawn. The createArt subroutine can check the value of the artType member variable to decide which type of art to draw. So, everything is quite logical, but subtle and maybe confusing at first: Clicking a button triggers a change in state (in the value of artType) and a call to createArt that can respond to the new state by drawing an art work of the correct type. The user controls when things happen by clicking the button; the programmer says what happens by creating subroutines that will respond to the events generated by the user.
Part 2 of the lab is to make createArt draw the same four types of art as in Lab 5. Furthermore, you must write a separate subroutine for each type of art, and the subroutines that you write must be called from createArt. If you did not complete Lab 5, you can use my solution, which can be found in the file RandomArtPanel.java in the directory /classes/s06/cs124. To complete this part of the lab...
private void drawPollock(Graphics g, int width, int height) {
}
You should now have a fully working program.
Java programs can be either applications or applets. You have already posted one applet on the web, in Lab 3. However, in that case you did so simply by copying some files into the www directory in your account. For this lab, you will also have to edit some HTML files.
HTML is a language that is used to describe web pages. Your web browser acts as an "interpreter" for HTML. That is, it reads an HTML source code file and creates the page that is described by that file. HTML code consists of the text that appears on the page, along with "mark up" commands that add other elements such as images and applets to the page and describe how the whole page is laid out. For a short introduction to the basic features of HTML, you can read Section 6.2 of our textbook. (If you want to learn more, you can find a lot of information on-line at web sites such as WebMonkey.com.)
As part of this course, you will be creating a Web portfolio containing some of the work that you do for the course. To get you started, there is a small sample web site that you will copy from /classes/s06/cs124 into your own www directory. (It is also available on-line as a zip archive, java_web_site.zip.) You have two options. You can copy the entire java folder into www. In that case, the Web address for your java site will be http://math.hws.edu/~zz9999/java/ (with zz9999 replaced with your own user name). Or, you can copy all the files inside the java folder into www. In that case, the Web address will be http://math.hws.edu/~zz9999/. (If you've already been using your www directory, be sure that you don't accidently overwrite files that already exist with new files of the same name.)
You can use the GUI interface to drag-and-drop the files that you want to copy. Alternatively, you can open a terminal window and use the command line. To copy the entire java folder, use the following command, working from your home directory:
cp -r /classes/s06/cs124/java www
Or, to copy all the individual files, use:
cp /classes/s06/cs124/java/* www
Unfortunately, the applets that you write in this course require Java 1.5 or higher. Not everyone has Java on their computer, and not everyone who has it has a new enough version. So, not everyone who visits your web site will be able to see your applets. When Java was introduced, applets were considered to be an important part of the language, but since then, support for applets and interest in them has waned and Java applications have become more important. It's still nice, though, to be able to put your work on the Web for those who can see it.
The structure of the web site was cribbed from my About Linux pages. It uses an HTML feature known as "frames" which allows several HTML source files to be shown in different areas of the screen. The blue menu strip down the left side of the page is one example of this; the content of this side of the page is defined by the file menu.html. The largest part of the page is occupied by the file main.html when you first open the site. However, clicking on the Random Art link in the menu strip will replace the page with Art.html, which displays the original ArtSubroutines starter program as it was before you started working on it. Any time that you want to add a new HTML page to the site, you will have to edit the menu.html file to add a link to the new page. You can just imitate the link to Art.html that is already there.
After you've finished Parts 1 and 2 of this lab, you need to replace the old ArtSubroutines applet in the web site with your own version. To do this, you should export three .class files, ArtSubroutinesApplet.class, ArtSubroutinesPanel.class, and ArtSubroutines$ArtPanel.class, from your Eclipse project:
(You could also simply copy-and-paste or drag-and-drop the .class files from your eclipse-workspace directory.)
Your web site should now contain your own applet. Check it out on the Web to make sure it worked. Next, you should add the applet from Lab 3 to your new site. Your www directory should already contain the files cs124_lab3.html, BasicAnimationApplet.class and BasicAnimationPanel.class from that lab. If your new web site is in a java folder, move or copy those files into that folder. Edit the file menu.html to include a link to cs124_lab3.html. The link will be similar to the link to Art.html. For example:
<p><a href="cs124_lab3.html" target="mainframe">Simple Animation</a></p>
If you now reload your web page, the menu should include the new link, and clicking on the link should load your animation applet into the main frame of the page. Finally, you will want to edit main.html to say more about your site, and possibly more about yourself. You might also want to personalize the individual applet pages.
Remember that if you need help with any of this, you should visit my office to get it. Also, you might want to consult with me about other changes you could make to the site, such as using different colors, adding pictures, or using a different graphic as a title at the top of the page.