After completing the lab in which you used Java to construct a face, you might wonder if there any GUI-based programs to help you with this task. The answer is: "sort of". NetBeans does have a forms constructor that helps you to layout buttons and textfields, though this doesn't really help a lot with "pure" graphical program in which you are placing rectangles and ovals on the screen.
But nonetheless, we are going to show you how to use the forms constructor, because it's often a quick solution for rapid prototype development. Our goal is to produce something like the following Applet which you might have found useful for picking out odd colors for those faces.
We won't be creating projects in the usual way this week, so read carefully.
Start by creating a new project.
When you choose the project this time select a
Java Class Library
within the Standard category.
Call your project ColorPicker
and store it within your
csci/201 directory,
Create a Java file by selecting the category
Java GUI Forms
and the file type JApplet Form.
Name your class ColorPicker
.
When you try to display ColorPicker.java, you'll see that the ColorPicker window has two tabs: Source and Design. For now we're going to work only in the Design pane which presently displays an empty palette.
Java frames and panels have layouts which control how they
display their collections of buttons and sliders.
We're going to set the layout to FlowLayout
.
That's really a rather feeble layout, but it is good enough to
get us through this lab.
Right-click within the palette and then go through the menu choices
Set Layout →
FlowLayout.
Wasn't that exciting.
Now we're gonig to place some stuff on the panel.
First up is a JSlider
.
Right-click on the panel and choose
Add From Palette →
Swing →
JSlider.
Wow! A little sliding bar appears in the palette.
By the way, swing
is the name given to a
collection of Java GUI components.
One down and three to go.
Now add, in order, another JSlider
and then
a JLabel
and finally a JButton
.
The JLabel
and JButton
are near the top of that big long pulldown menu.
If you look at the Inspector,
you'll notice that your buttons and sliders have rather
cryptic names like JSlider2
.
This could become rather confusing.
The sliders will control the red and green components of a
displayed color. Rename them to something reasonable
like GreenSlider
and RedSlider
.
Do this by right-clicking on the component name within
the Inspector panel
and then choose Rename...
from the menu.
We're going to use the JLabel
to display a
word in different colors. So
rename it to something reasonable, like ColorfulWord
.
Since the JButton
resets the color,
rename it to Reset
.
When you are done, your
inspector window should resemble the following:
Go ahead and run your Applet by right-clicking on
ColorPicker.java
and choosing Run File.
Resize the Applet window and notice how the components jump wildly around.
That's because you are using the FlowLayout
manager.
Fortunately, you can fix the Applet size in an HTML file and avoid
this problem as we have done in the Applet below.
You'll notice that you can also move the sliders and press the button, but nothing happens. It will be a while before anything does.
Your computer monitor displays each pixel by mixing red, green, and blue. The intensity of the red, green, and blue is described as a number from 0 to 255. A color can them be characterized as a triple of the red, green, and blue intensities, in that order. Consequently [255, 0, 0] is a pure red and [0, 255, 0] is a pure green.
The mixtures required to generate other common colors can be a bit puzzling for those of us who learned to mix red and yellow to get orange in elementary school. For example, yellow is [255, 255, 0] a mixture of red and green at their full intensities. Orange is something like [255, 144, 0]. If you want to find out the official color names of the MIT Xconsortium take a look a the RGB to Color Name Mapping page of Kevin Walsh.
Stop you applet from running and go back to your panel. It's time to worry about colors and fonts. This part is pure GUI, but it takes a while the first time you try it. Your first time will be customizing the top slider.
Go back to your panel and right-click on the top slider
and then select Properties.
This will bring up a window labeled
RedSlider [JSlider] - Properties.
Properties specialize the display of a component. The names of properties are in the left column. The values of properties are in the right. You can change a property's value by typing directly into the value fields or by clicking on the three little dots at the left end of the property's row. If you type into the value field, you must hit the Enter before you press the Close button. If you don't, your changes will be lost.
Change the background for
RedSlider
to [255, 0, 0], and change
the maximum to 255.
Remember, color intensity ranges from 0 to 255.
GreenSlider
also needs a
maximum of 255,
but its background
should be [0, 255, 0], and change
the
Remember, color intensity ranges from 0 to 255.
This one needs a change of font,
foreground, and
text.
By the way, you really don't have to make all the same choices we do.
Reset
needs a change of
foreground and
text.
Run your applet a second time. This time you have pure vaporware.
It looks pretty and the sliders slide and the buttons butt, but
nothing happens.
NetBeans has been silently generating Java code for you. Press that Source tab in the ColorPicker windows and you'll see about 65 lines of Java code. Scroll through the code and see where your components are created and specialized.
Now if only your program did some work.
Whenever you press a button in Java or move a slider, an event
is generated. For example, when you perform a mouse click on
a button, a MouseEvent
is generated.
It is possible to intercept these events and have them
delivered to methods in your code.
Go back to your form design window and right-click on the red slider.
This time choose
Events →
Change →
stateChanged.
This will immediately flip you over to the Source panel. But notice that NetBeans has created the header for a new
RedSliderStateChanged
method for you.
At this time, the method is empty, but we'll fix that in a minute.
private void RedSliderStateChanged(javax.swing.event.ChangeEvent evt) { // TODO add your handling code here: }
Generate one of these stateChanged
event handlers for GreenSlider
.
ColorfulWord
pays no attention to events, but
Reset
does.
Use the
Events →
Mouse →
mouseClicked
sequence to install a MouseEvent
handler for Reset
.
Finally it's time to type some Java code. First, return to the Source panel and examine the code NetBeans has added to handler events. Notice that some Java statements have a light blue background. These you may not modify. They can be changed only through the Design panel.
However, we must modify some of the Java code with the white background
to get our program to do anything.
For example, if we press the UNCA Blue
button, we want to change the color of
Color Me to be UNCA blue,
[0, 0, 101]. That's pretty easy. All we need do is
call the setForeground
method of ColorfulWord
.
Here's the code to do this.
private void ResetMouseClicked(java.awt.event.MouseEvent evt) { java.awt.Color newColor = new java.awt.Color(0, 0, 101) ; ColorfulWord.setForeground(newColor) ; }
We also need to handle the slider events. This code is still one
statement, but it's a long statement. We need to invoke the
getValue
method of the slider to obtain its present
position. Then we need to use the getForeground
method of ColorfulWord
to determine the present color
along with the getGreen
and getBlue
methods of Color
to obtain the existing
green and blue components of the word's color.
Here's the code for RedSlider
.
private void RedSliderStateChanged(javax.swing.event.ChangeEvent evt) { java.awt.Color oldColor = ColorfulWord.getForeground() ; java.awt.Color newColor = new java.awt.Color( RedSlider.getValue(), oldColor.getGreen(), oldColor.getBlue() ) ; ColorfulWord.setForeground(newColor) ; }
Carefully study this code.
The Color
constructor takes three arguments,
the red, green, and blue intensities, and yields a new color.
The red intensity is taken from the slider, and the green and
blue intensities are taken from the present color.
Later on you'll have to add, within GreenSlideStateChanged
,
the Java code to change the green intensity. In that case,
the green intensity will come from GreenSlider
,
but the red and blue intensities will come from ColorfulWord
.
Keep in mind RGB, red, green, and blue.
The arguments to the Color
constructor must
always be given in that order.
Go ahead and modify your program to handle movements of the
two sliders and presses of the button.
Your code should work something like the following Applet.
Of course, the obvious shorting of the Applet is that it doesn't have
a slider for the blue component. Add one. Remember, you'll have
to add a slider, rename it,
set its properties, and program a ChangeEvent
handler.
Your improved Applet should mimic the one shown below.
Rapid prototypes frequently have minor "bugs". Not surprisingly so does ours.
Its sliders don't always agree with the displayed color.
In particular, even though the initial color is [0, 0, 101],
the sliders are displaying [50, 50, 50].
Even worse, when you press the UNCA Blue
button, the color of the Color Me
label changes, but the sliders do not.
Fix these bugs so that your Applet works like the one below.
If you have to use the getValue
method to get the value of
a slider, guess what method is used to set the value?