This week we will return to working with Java in lab. You will develop a somewhat more sophisticated version of the color mixer applet you created in lab 4.
This week's lab is intended to give you some experience using three new aspects of Java. The most obvious new feature will be a new user interface component, the "Choice." This component allows you to easily add pop-up menus to an applet. The result will be that the final product of this lab will look surprisingly like a useful, functional piece of computer software.
The less obvious but more important new features you will encounter in this lab are the conditional statement or "if statement" and the use of variables to remember aspects of the "state" of your applet.
The applet you construct will again allow its user to vary colors by adjusting redness, greenness and blueness using scrollbars. This time, however, the user will be able vary both the background and text colors used in the applet's screen region so that the user can "design" a pair of foreground and background colors that works well. A working version of the completed applet is included below so that you can understand its functionality.
The applet displays three scrollbars. Initially, changing the positions of the scroll boxes control the color of the background displayed in the area below the scrollbars. Each scrollbar can be used to increase or decrease the amount of one color included in the mix that produces the color displayed.
In addition, the applet displays a choice menu that can be used to select either "Text" or "Background" as the target of the scrollbars. If you select "Text" instead of "Background", changing the scrollbars with the mouse will change the text color rather than the background color.
The text displayed provides the color numbers that would be needed to produce the colors viewed using the Java "new Color(...)" constructor method.
The instructions in the remainder of this handout are intended to guide you rather carefully through the construction of this applet. My goal will be to explain what methods are needed and what each method should do in English. Your job will be to translate my English descriptions of the methods into Java. Many of the Java details you will need to complete this task are not included in this document. Instead, they can be found in the "Java Programming with JavaTools" document. (The following link will take you to this JavaTools documentation .). You should bring the copies of this document I distributed for lab 3 with you when you come to lab this week.
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, 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 with some annoying detail. Putting in the time before lab can save you a lot of time trying to finish things off on your own after lab.
Since MetroWerks and CS Bull still do not get along, you will need to do your Java development work using your Netware account or a Macintosh formatted floppy disk. Once you get to lab, go to the "CS 105" folder on Cider Press and copy the "ColorMatcherStarter" folder to your floppy disk or Netware account
Open the copied folder and double-click on "ColorMatcher" to start Metrowerks. Once Metrowerks is running, double-click on the name "ColorMatcher.java" to prepare adding your code.
You will notice that we have provided the skeletal remains of code that looks like what you might have written for lab 4. Basically, to save you a little time we have left the code to create and add the Sliders and the headers for all the methods you will need to declare in this lab.
Your first step in this lab should be to add instructions to the body of the "begin" method to create the pop-up menu that will eventually be used to determine whether the scrollbars alter the text or background color.
The code to add the "Choice" will have much in common with the code to add the Sliders. You will need to make up a name for the Choice and declare/introduce this name before all the applet's methods as we have declared the names for the Sliders. You will need to create a new Choice using the "new" constructor. This will be a bit easier than it was for the Sliders since the constructor for Choices does not expect any parameters. You will, however, need to include two instructions to add the items "Text" and "Background" to the choice. Finally, as with the Sliders, you will need to "add" the choice to the applet. At this point, you should run you applet to verify that the Choice appears as expected. You should be able to move the scrollbars or select items from the menu. These actions, however, will have no effect on the screen display at this point.
The next step should be to actually make the scrollbars control the color of the background displayed. That is, for now we won't worry about controlling the text color. Instead, just try to get control over the background.
We will split this task into two parts. First, I want you to fill in some of the body of the method named "drawDisplay". Eventually, this method will draw both the text and background in their desired colors. For now, it will just display the background.
While we are not worrying about drawing the text in the right color at this point, the fact that we will eventually want to do this will affect the way we define "drawDisplay". In the similar applet you wrote for lab 4, a method like "drawDisplay" was defined. The method in lab 4 expected three integer parameters that determined the color to be used for the background. The values of these parameters could be determined directly from the scrollbars using the "getValue" method when needed.
In this applet, "drawDisplay" will need to know two colors each time it is invoked: one for the background and one for the foreground. At any time, the current values of the scrollbars will determine the three numbers that describe one of the colors. The scrollbars, however, can not describe two colors at once. Suppose, for example, that the Choice has been set so that the scrollbars currently control the text color. We could use the "getValue" method to get the numbers needed to determine the text color from the scrollbars. We can't use this approach, unfortunately, to determine the three numbers that describe the background color. Instead, we somehow have to remember the values associated with the three scrollbars the last time they were set to control the background color. We will do this by associating these values with variable names.
You should define three "int" variable names that can be associated with the values that describe the background's color. The "scroll" event handler you write shortly will have to associate these names with the values determined by the scrollbars and the "drawDisplay" method will use them to set drawing colors. These variables will need to be declared outside any method, like the names of the Sliders. That way, they can be accessed directly by "drawDisplay" and you will not need to pass any parameters when you invoke "drawDisplay". Pick appropriate names that indicate both the color represented and the fact that the values associated with the names describe the background color because eventually you will need three more variable names for the text color.
Now, fill in the body of the "drawDisplay" method with a single instruction to fill the background with the color described by the three background color variables.
To test that this method works correctly, add assignment statements to set the three color variables to some values between 0 and 255 (200, 0 and 200 worked well in lab 4) to begin. These assignments belong near the end of "begin", just before the invocation of "drawDisplay" we included at the very end of "begin" Finally, run your applet to test that "showDisplay" works correctly.
Once "showDisplay" is working, it should be fairly easy to make the scrollbars control the background color. When any of the scrollbars is changed using the mouse, the "scroll" event handling method will be invoked by the browser. So, all you need to do is to define a "scroll" method that will make sure the three color variables are associated with the new color values described by the updated scrollbars and then invoke "showDisplay". You can do this by assigning the values returned by invoking the "getValue" methods of the sliders to the three variables you declared for the background color.
Once this is done, you should be able to change the background color when your run your applet.
If it works, this would be a good time to change the initial values you assigned to the three variables for the background color from the values used for testing (probably 200,0,200) to the correct initial values (255,255,255).
Now, you should add instructions to your "drawDisplay" method to actually display the numbers used to produce the color of the background on the screen. For now, we will just display this information in black. Later, when you add controls to handle changing the text color this will have to change.
It shouldn't be hard for you to figure out how to place the text:
in the display. The "drawString" method will do the trick. But getting something likeBackground =
where the numbers displayed correspond to the lastest setting of the background color may seem trickier. The secret is that Java gives a special interpretation to the "+" operator when it is used with strings or combinations of strings and numbers. Rather than interpreting "+" as numerical addition, it interprets "+" to mean adding together pieces of text by simply juxtaposing them. If one of the operands of a "+" is a string and the other is a number (int), Java just uses the text that would normally be written to represent the number. As a result, if x and y are integer variables, with current values 25 and 30, the instruction:Background = 200, 0, 200
pen.drawString("( " + x + "," + y + ")" );
on the screen.( 25,30)
Using the "+" operator in this way, add an invocation of "drawString" to "drawDisplay" to include the values of the three color variables that control the background color in the display produced.
Now, to control the color of the text displayed, you will need to first declare three additional integer variables for the red, blue and green components of the text color just as you declared the three variables for the background color. In "begin" these variables should all be associated with the value "0" since the initial color of the text, black, is represented as 0,0,0.
Next, modify the "drawString" invocation you just placed in "drawDisplay" so that the text is displayed in the color described by the values associated with these three variables. Use the "new Color( ... )" method to produce the desired color. You can test that this has been done correctly by temporarily assigning values other than zeros to the text color variables and running your applet.
Finally, add another "drawString" invocation to "drawDisplay" to include the three numbers that describe the text color to the information displayed.
Note that both lines of text should be drawn in the text color even though the content of one of the lines describes the background color.
You would like to arrange things so that when the user changes the choice menu selection from "Background" to "Text" the color of the text can be changed using the scrollbars.. As currently written, your "scroll" routine always uses the current settings of the scrollbars to determine the values of the three variables that describe the background color. We could easily change this method to set the variables that control the text colors, but this isn't quite what we need either. Instead, we need to change the method so that the trio of color variables affected is controlled by the current setting of the "Choice" menu included in the applet.
So, add an "if" structure to test to see if the value of the current setting of the Choice menu is equal to "Background". You can get this value by invoking the "getSelectedItem" method of the Choice. If the Choice's value is "Background", the "if" structure you write should choose to execute the three assignments that you originally included in "scroll". If the value is not equal to "Background", it will have to be equal to "Text". In this case, the "if" structure should choose to execute three new assignments very much like the original ones except that they will change the values of the variables that determine the color of the text.
You can test this change by running the applet and then changing both the setting of the Choice menu and the scrollbars. When the "Text" item in the Choice is selected, moving the scrollbars should change the text color. If you pay careful attention, however, you may notice that the transition that occurs when you change the Choice setting isn't quite right yet.
This is it! The last step. All you have to do is fix one remaining problem (which you may or not have even noticed while you were testing your applet a moment ago).
The one remaining problem is that when the choice is changed, the scrollbars should immediately change to reflect the new color they can be used to modify. Using the sample applet provided above, watch what happens if you just switch the choice selection back and forth between "Text" and "Background". For example, in the initial state of the applet (where the background is white and the text is black), the control boxes in the scrollbars will move from one end to the other as soon as you switch from text to background. When "Background" is selected they move to the far right to indicate all three color components have a value of 255. When "Text" is selected they move to the left to indicate the color component values are all zero.
To incorporate this behavior into your applet, you will need to add an "if" structure to the body of "choiceMade". When the new item selected is "Background" this "if" structure should choose to execute instructions to set the three scrollbar values equal to the values in the three variables that describe the background color. When the item selected is "Text", instructions to set the scrollbars according to the values of the variables that describe the text color should be executed. In either case, the instructions chosen should use the "setValue" method associated with Sliders to accomplish the change.
Within the "choiceMade" method you can determine the current setting of the menu in two ways. You can use "getSelectedItem" just as you did in the "scroll" method. To make your life a little easier, however, the browser passes the Choice's new setting as a parameter to "choiceMade". We have included a declaration for this parameter in the method header we included. The parameter name is "which".
Test this change and your applet is complete.
As usual, when you are done, be sure to incorporate you completed applet into an HTML page and add a link to it from your CS 105 labs page.