Objectives:

Students will be able to:

• Implement a small window using the window components of Frame, Panel, RadioButton and Button of the Swing class.
• Use the Color class of the AWT package
• Implement action listeners appropriate for the RadioButton and Button objects.
• Differentiate between one action listener with multiple actions and one action listener per object.
• Use the Java APIs to obtain information about the components and color
• Demonstrate their completed project for the lab instructors.

Materials:

• JMUColorFactory.java

References:

• Color - http://docs.oracle.com/javase/7/docs/api/java/awt/Color.html
• JLabel - https://docs.oracle.com/javase/7/docs/api/javax/swing/JLabel.html
• JPanel - http://docs.oracle.com/javase/7/docs/api/javax/swing/JPanel.html
• JButton-http://docs.oracle.com/javase/7/docs/api/javax/swing/JButton.html
• JRadioButton-http://docs.oracle.com/javase/7/docs/api/javax/swing/JRadioButton.html
• ButtonGroup-http://docs.oracle.com/javase/7/docs/api/javax/swing/ButtonGroup.html
  

Introduction - From the orginal lab

"In this lab, we will be creating a graphical user interface (GUI) to allow the user to select a button that will change the color of the center panel and radio buttons that will change the color of the text in the center panel. We will need to use a variety of Swing components to accomplish this task. We will build two panels, a top panel containing three buttons and a bottom panel containing three radio buttons. Layouts will be used to add these panels to the window in the desired positions. A label with instructions will also be added to the window. Listeners will be employed to handle the events desired by the user. Our final GUI should look something like the following."

Note that in the lab, the purple and gold buttons will be solid. On other OSs they may appear more like this picture.

Part 1 - Getting started

1. Download a copy of each of the provided files in Materials above.
2. Open JMUColorFactory.java.

Part 2 - Adding the color constants for JMU purple and gold

1. If you recall from the CSColor lab, colors on the computer consist of different values of red light, green light, and blue light. The java.awt class has a Color class that has a constructor that takes in those three values.
2. JMU Purple has the three RGB values of 69, 0, and 132. Define a public Color constant class attribute named PURPLE and construct the Color object using the three values.
3. JMU Gold has the three RGB values of 203, 182, and 119. Create a public Color constant class attribute named GOLD and construct the Color object using the three values.

Part 3 - Declaring the component objects needed for our Window.

Each of these should be declared private and should be instance variables. We will need:

1. 1 Container object named contentPane.
2. 2 JPanel objects named topPanel and bottomPanel.
3. 3 JButton objects named purpleButton, goldButton, whiteButton.
4. 3 JRadioButton objects named purpleRButton, goldRButton, and blackRButton.
5. 1 ButtonGroup object named radioButtonGroup.
6. 1 JLabel object named message.

Part 4 - Creating the basic window in the Constructor

1. Set the title of the window to "JMU Color Factory". setTitle("JMU Color Factory");
2. Set the window size to WIDTH and HEIGHT. setSize(WIDTH, HEIGHT);
3. Set the default close operation. setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
4. Set the window to visible. setVisible(true);
5. Test your window.

Part 5 - Building the top panel in buildTopPanel

In the buildTopPanel method, we will instantiate the objects that we need for the top panel.

1. First, instantiate the JPanel object topPanel. topPanel = new JPanel();
2. The, setBackground to the Color constant WHITE. topPanel.setBackground (Color.WHITE);

Layouts are ways we have of laying out the objects onto the panel. In the case of hte top panel we will use the FlowLayout. FlowLayout lets the components "flow" to match the size of the container.

3. Set the layout for this JPanel to FlowLayout. topPanel.setLayout(new FlowLayout());

Next we will build each of the buttons. The first button will be done with all of the detail. The next two you should build based on what you did for the first button.

4. Instantiate purpleButton, naming it "Purple". purpleButton = new JButton("Purple");
5. Set its foreground property to the constant color, GOLD. purpleButton.setForeground(GOLD);
6. Set its background property to the constant color, PURPLE. purpleButton.setBackground(PURPLE);
7. OPT - (You may need to do this step, but it is not necessary on the lab machines.) Set its opacity to true. purpleButton.setOpaque(true);
8. Set the action command name to "P". purpleButton.setActionCommand("P");

You have just built the Purple button and have gotten it ready for work.

9. Repeat these steps for Gold, reversing the foreground and background colors and setting the ActionCommand property to "G".
10. Repeat these steps for White, making the foreground color BLACK and setting the ActionCommand property to "W". (We're setting the color to black for visibility, but the JButton should say "White").
11. Set the opaque property if you need to for both objects.

Now add the three buttons to the panel.

12. Add the buttons in the order of purpleButton, then goldButton, then whiteButton. topPanel.add(purpleButton);

Part 6 - Create the main container and add the top panel.

For the main part of the screen, we are going to use the BorderLayout. The BorderLayout has 5 positions, NORTH, SOUTH, EAST, WEST, and CENTER. For this project we will use NORTH, SOUTH, and CENTER.

13. Return to the constructor.
14. After the statement that sets the default close operation, add in the code to get a contentPane from the window object. contentPane = getContentPane();
15. Set the layout to the border layout. contentPane.setLayout(new BorderLayout());
16. After the build a panel comment, call the buildTopPanel method.
17. Add the topPanel to the contentPane to the NORTH border. contentPane.add(topPanel, BorderLayout.NORTH);
18. Test your window by running the program. No, the buttons will not yet work, we've not made the action listener.

Part 7 - Finish up the bottom panel and add it to the container.

The radio buttons have all been created and their foreground colors set. Now we need to make the radioButtonGroup.

19. Instantiate the radioButtonGroup variable to be a new ButtonGroup. (The constructor takes no parameters).
20. Add the radio button objects to the button group. (The add method is common to all kinds of containers including ButtonGroups).
21. Now add to the bottom panel the individual radio buttons.
22. Go back to the constructor and call the buildBottomPanel method.
23. Add the bottomPanel to the SOUTH border.
24. Test your window.

Part 8 - Add in the text.

25. Instantiate message which is a JLabel. The JLabel constructor is passed the String representing the label for that object. Use the String "Top buttons change the panel color and "
    + "bottom radio buttons change the text color" to instantiate message.
26. Add the message to the contentPane puting it into the CENTER border.
27. Test your window.

Part 9 - Activate the ActionListeners.

Remember the setActionCommand from the top panel buttons? We will now use that feature to build the action listener action.

Go down to the inner class ButtonListener. It implements ActionListener. ActionListener requires that this class have an actionPerformed method accepting an ActionEvent object as a parameter. This code has been written for you. The String whichButton will get the action command from the event that is being passed to the actionPerformed method. This code has been written for you.

28. Create an if statement that will examine whichButton. If whichButton is "P" set the background of the contentPane to PURPLE; if "G", then set the background of the contentPane to GOLD; and if "W" set the background of the contentPane to WHITE. (You are free to choose any color you wish for this lab).
29. In the buildTopPanel method, after each set of code for the different buttons, to each button add an ActionListener which will be an instantiate of the new ButtonListener that you just made. This is the purpleButton to use as an example. purpleButton.addActionListener(new ButtonListener()); Do the same for gold and white buttons.
30. Test your window. If you click on the buttons, do you see the screen change color?

Part 10 - Now let's finish up with the radio buttons

31. Move to the RadioButtonListener inner class which also implements an ActionListener.
32. In the prior step, we used the actionCommand to get the correct button to use. In this example, we will get the source of the event (or the name of the object that triggered the ActionEvent.)
33. Create an if statement that will check the event source to see if it is the purple button (conditional expression provided as a model). event.getSource() == purpleRButton If this condition is true, we should set the message's foreground to purple (the message is our JLabel object).

(Note the use of the == sign. getSource returns the object that is the source of the event. What do you think we are comparing?

34. Now finish the if, one for the goldRButton and one for the blackRButton.
35. Attach this new ActionListener to each of your radio buttons.
36. Test your window.

Demonstrate this lab for the lab instructors.