Last week, we led you through the construction of a simple Java program in order to give you some familiarity with the MetroWerks programming environment and an introduction to the programming process.
This week we will concentrate on increasing your understanding of the programming process itself. We will again lead you through the construction of a simple program. This time, however, we won't tell you exactly what Java instructions you need to type. We will explain what methods are needed and what each method should do in English. Your job will be to translate our English descriptions of the methods into Java.
In addition to giving you the experience of writing Java instructions of your own, this week's lab is also designed to give you some experience using a few examples of the two main mechanisms used within applets to interact with the users of an applet: graphics drawing primitives and primitives for constructing user interface components. Many of the details you will need to work with these Java mechanisms are not included in this document. Instead, they have been discussed in class and can be found in a separate "Java Programming with JavaTools" handout. The following link will take you to this JavaTools documentation . Printed copies of this handout will also be made available to you before lab. The handout describes all of the Java graphics primitives and user interface components. You will only be concerned with the graphics primitives for drawing text and rectangles of various colors and the "Slider" user interface component.
The applet you construct in this lab will implement a tool that might be of use to a web page designer. The applet will provide controls to allow its user to select potential background colors for a web page by using scrollbars to vary the mixture of red, green and blue in the background color of the applet.
A working version of the completed applet is included to the right so that you can understand its functionality.
The applet displays three scrollbars. Each scrollbar can be used to increase or decrease the amount of one color included in the mix that produces the color displayed. Although they are not labeled (to keep your task simple), the top scrollbar controls the amount of red used in the background, the middle scrollbar contains green and the bottom scrollbar controls blue.
In addition, the applet displays three numbers between 0 and 255 at the bottom of the applet screen region indicating the amount of each color used in the current background color. To help the user know which number is associated with each color, the numbers are drawn within rectangles of the colors to which they correspond.
In constructing this applet you should recognize that you will also get
a sense of the programming steps that are involved in the construction
of pieces of "real software" you have used. For example, the PhotoShop
"Color" options palette provides a mechanism for mixing colors using
scrollbars very similar to the applet you will produce.
If you have questions about the instructions for this lab, you are encouraged to ask them through the discussion area for this lab in the course discussion forum.
To prepare for this lab, you should first carefully read the handout I have prepared describing the drawing primitives and user interface components relevant to the completion of this applet. As mentioned above, this documentation is available on-line and will be available in printed form during the lab.
Next, be sure to read completely through this handout and do your best to sketch out the Java code you will type in during lab. The more you think the details through ahead of time, the better prepared you will be to get everything completed during lab while we are around to help you if you get into trouble. Putting in the time before lab can save you a lot of time trying to finish things off on your own after lab.
Since we will be working with MetroWerks again this week, we will again have to deal with the incompatibility of MetroWerks with CS bull and/or PC formatted floppy disks. So, before you come to lab, either make sure you know your Netware account (and have logged off from that account if you have a machine in your room) or find a Macintosh formatted floppy disk (or a floppy with nothing important on it so that we can reformat it at the beginning of lab).
Once you get to lab, connect to your Netware account or insert and if necessary format your floppy disk. (From now on, I'll just say "your disk" to refer to either you Netware account or your floppy disk.) Then, go to the "CS 105" folder on Cider Press and copy the "ColorMixerStarter" folder to your disk. Open the folder and double-click on the "ColorMixer" project file to start MetroWerks. Once MetroWerks is running, double-click on the name "ColorMixer.java" to prepare to add your code.
You will notice that unlike last week's "starter" applets, the ".java" file in "ColorMixerStarter" does not contain skeletal definitions for many event handling methods. You will need to add your own method declarations as necessary this week. You will also need to add variable declarations so that you can associate names with components your applet will manipulate.
Your first step in this lab should be to add instructions to the body of the "begin" method to create the scrollbars that form the applet's interface. This will include three scrollbars, one for each of the computer's "primary" colors.
When you complete this step the components should all be displayed in the applet. The applet display will look something like:
In fact, at the end of this step, the scrollbars you have created will even respond to mouse actions. Manipulating them with the mouse will have little effect, however, until you add event handling methods later in the lab.
The body of the "begin" method you construct at this point should look a bit repetitive. It will contain groups of nearly identical instructions for each of the scrollbars. In each group of instructions, you should create a Slider using "new", then "add" the new component to the applet.
Since you will need to refer to the scrollbars by name in other parts of this applet, you will first need to declare three variables of type "Slider". Pick some appropriate names like "redControl", "greenControl" and "blueControl" or "redslider", "greenslider", and "blueslider" or .... The exact names you choose won't matter but it is best if they sound like names of scrollbars so that you can remember what they are for. The text of these variable declarations should appear before all of your method definitions since these variable names will be shared among several methods.
When you create the Sliders you will associate each "new" Slider with one of these variables in an assignment statement within the "begin" method. Each of these sliders should have a range from 0 to 255 and an initial value of 255 (to reflect the fact that the background will initially be white = 255,255,255).
You can and should test the behavior of your applet by selecting "Run" from the MetroWerks project menu frequently as you go along. For example, it would make sense to make sure that you have the correct instructions to create one scrollbar before typing in the nearly identical code for the other two scrollbars. You can do this by running your applet as soon as you have added the code to include the first Slider. If it works, make sure that you like the way the Slider looks. If necessary, adjust the size of the Slider so that it fits the window well. Then move on to add two modified copies of the instructions that worked for the first Slider. All you should have to modify is the name of the variable each new Slider is associated with
Now, you should write a new method that knows how to draw the display that the scrollbars are supposed to control. This display includes a background drawn in the color determined by the scrollbars and three rectangles painted in red, green and blue each containing the number describing the amount of that color used in the background.
We want you to define a new "private" method containing the Java instructions required to produce this display because there will be two places in the final applet where you will need to instruct the computer to draw or redraw the display. First you will need to tell the machine to draw the display in the "begin" method so that the applet shows more than the scrollbars when any web page containing the applet is first visited. Second, the method that handles the event that a scrollbar has been changed by the user will also need to tell the computer to draw the display to reflect the change. If you don't put the instructions to draw the display in a method of their own, you will need to put one copy of the instructions in the "begin" method and another in the method that handles scroll events. If you create a method to draw the display, you will only need a single line to invoke the display drawing method in each of the "begin" and the event handling method.
You get to choose a name for this method. Something like "drawDisplay" would be apropos.
When it is used, this method will require three pieces of information in order to correctly update the display: the red, green and blue values currently associated with the scrollbars. These values will be provided to your method as parameters just as the x and y coordinates of a point you click on are provided to the "mouseDown" method. You may choose whatever names appeal to you for these parameters, but something like "redness", "greenness", "blueness" (or even "r", "g", and "b" if you don't like typing) would be appropriate.
So, at this point, type in the header for your method. It should look like the header for "begin" except:
It is a good idea to also type a matching pair of braces ("{" and "}") on the two following lines. These braces which will eventually include the method body.
Now, lets fill in the body in three steps.
Drawing the background is actually quite easy. The "fillRect" command associated with the pen will fill the whole background of the applet screen region for you if you just omit the first four parameters usually used to specify the location and size of the rectangle to be filled. The only trick is you have to get the color right.
You can't just type in a color name (like "Red") for the background color. The color to be used has to be "mixed" using a "new Color(...)" constructor. As you type in the program, however, the numbers to use for the red, green and blue value parameters expected by the "new Color(...)" constructor aren't known. They will have to vary as the applet runs to reflect the setting of the scrollbars.
That is why we had you define your drawing method to expect the three color numbers as parameters. Within the drawing method you can use the parameter names as placeholders for the numbers that correspond to the scrollbar setting.
So, add to your drawing method's body an invocation of the pen's "fillRect" method that will paint the background in the color corresponding to the parameter values.
To see if you got it right, you should run your applet. Try it, and once you fix any typing or grammatical errors in your program you will discover that all that appear are the three scollbars you added earlier. The reason for this is simple. By defining your drawing method you have told the computer what to do if it ever is told to redraw the background, but you never told it when it actually needs to do this.
As we said earlier, one of the places it needs to do this is in the "begin" method. So, you should add a line to the body of your begin method after the lines that add the scrollbars to actually invoke your method to draw the background.
In your background drawing method's heading you indicated to Java that the method would expect three parameters. As a result, Java won't let you invoke the method unless you provide three numbers it can use to use in place of the "placeholder" parameter names while following the instruction(s) within your background drawing method. Eventually, the value you would like to use should come from the scrollbars. We don't want to get into that yet. So, at the end of your "begin" method add an invocation of your drawing method with parameters like "200, 0, 200". Then, run your applet. Once it works it should display a nice purple background.
Now that it is somewhat hooked into your applet, we can proceed to complete the method that draws the background. The missing pieces are the instructions that draw the red, green and blue rectangles and the color numbers that appear within them.
For this next step, don't worry about the numbers, just get the three colored rectangles drawn. This should be done by adding three invocations of "fillRect" to the end of your background drawing applet. The first of the "fillRect" invocations should use the color "Red", the second "Green" and the last "Blue". The trick part is that in these "fillRect" invocations you can not leave out the four parameters that specify the location and size of the rectangles. The applet screen region is 200 pixels wide. So, each of your rectangles should be 66 pixels high and about 66 pixels wide. Remember that the y axis is upside down, so the y coordinate of each rectangle will be about 134 (= 200 - 66). With this much information, you should be able to add the needed parameters to the "fillRect" invocations.
Again, to avoid wasting time typing incorrect Java code, you should probably first just add the "fillRect" invocation you think will draw the "Red" rectangle. Then, "Run" the applet until it works as it should. Then, make two copies of the original "fillRect", modify the colors and coordinates as needed and run it again until it works.
The last things to add to the background drawing method are the instruction to draw the numbers representing the red, green and blue values in the corresponding rectangles on the screen. The "drawString" method will do the job (from the computer's point of view any list of symbols from the keyboard that you want displayed on the screen is a "string" whether made up of alphabetic characters, digits, punctuation, etc). The hard part will be getting the x and y coordinates right for each drawString.
You will use the parameter names as placeholders for the actual values to be displayed.
Again, it probably makes sense to get the instruction for the "red" number to work first and then copy and alter it for the other two values.
To make the scrollbars control the color of the background displayed, you will need to first define one additional "public" method to handle scrolling events. The event handling interface requires that you use the name "scroll" for this method. This method will be invoked by the browser each time any of the scrollbars you created in "begin" is changed by the user. The browser will not pass it any parameters. So, its header should look just like the header for "begin" except for the name.
Type a header for the "scroll" method between the "begin" method and the background drawing method already contained in your applet. After the header type two lines with matching braces to contain the body of the method.
All you need to do when the user changes a scrollbar is redraw the background. You already defined a method to do that. So, all you need to include in the body of the "scroll" method is a single line to invoke your background drawing method. The tricky part is figuring out what parameters to include in the line within "scroll" that invokes your background drawing method.
The values you pass as parameters should be those corresponding to the positions of the scroll bars after whatever the user did to cause the browser to invoke your "scroll" handling method. As you write the applet, you can't know what these values will be. Since the "scroll" method has no parameters, you don't have any names for them either. Fortunately, the "Sliders" themselves are capable of telling you their current values.
If "redControl" is the name of one of your Slides, then the method invocation:
will tell you the current setting of the Slider. You should use three such invocations to specify the parameter to your background drawing method within the "scroll" method.redControl.getvalue()
When you think you have it write, run the applet, move the scrollbars and see what happens.
To test you background drawing method when you were first constructing it, we suggested you add a line to the "begin" method to invoke your drawing method with parameters "200,0,200". This make a nice shade of purple, but this does not correspond correctly with the initial positions of the scrollboxes with the scrollbars you created. So, replace the "200,0,200" by "255,255,255" to make your applet start with a white background. Also, now that you are finished you should change the name of the folder containing your work from "ColorMixerStarter" to just "ColorMixer".
Now that your applet works, you must copy the folder containing its code from your disk into your "www" folder on CS bull. Then, make a link from your cs105labs page to the "DisplayApplet.html" file within the "ColorMixer" folder in your "www" folder. Use PageSpinner rather than MetroWerks to make these changes.
As usual, when you are done, be sure to test these links and your applet using "http" style URLs through Navigator rather than simply using the PageSpinner preview mechanism.