Tutorial Tutorial Step 07

Step 6: Add a ColorChooser dialog and attach menu item events to it

Let's hook up the Foreground Color and Background Color menu items now.

  1. Switch the AppBrowser back to the Design tab if necessary.
  2. Select a ColorChooser from the Dialogs tab of the Palette and drop it in the Component Tree or in the UI Designer.
  3. Set its frame property to this. We will be using this same ColorChooser for setting both text and background colors, so we won't set its caption here. We'll set its caption in the respective event handlers.
  4. Select the second menu item in the Tree under Edit (menuItem6, which should have "Foreground Color" as its label).
  5. Double-click on the actionPerformed event in the Inspector, then double-click again on its value to go to the source of the following event handling method created by JBuilder:

    void menuItem6_actionPerformed(ActionEvent e) {
    }
    
  6. Insert the following code (including comments if you wish) into the stub of the event handler:
     // Handle the "Foreground Color" menu item
    
     // Pick up the existing text (foreground) color from the TextArea
     // and put it into the ColorChooser before showing
     // the ColorChooser, so that we are editing the
     // existing text color.
     colorChooser1.setValue(textArea1.getForeground());
    
     // Before showing it, set the title of the dialog for its
     // particular use in this event (for setting the text color)
     colorChooser1.setTitle("Set Text Color");
    
     // Show the ColorChooser.
     // Since the ColorChooser is modal by default,
     // the program will not return from the call
     // to show until the user dismisses the ColorChooser
     // using OK or Cancel.
     colorChooser1.show();
    
    
     // Now that the user has dismissed the ColorChooser,
     // obtain the new color from the ColorChooser's
     // value property. First test the result property to see if the
     // user pressed OK.
     if (colorChooser1.getResult() == ColorChooser.OK) {
       // set the foreground of textArea1 to the color
       // value that can be obtained from the
       // value property of colorChooser1.  This
       // color value is what the user set
       // before pressing the OK button
       textArea1.setForeground(colorChooser1.getValue());
     }
    
    
  7. Select the third menu item in the Tree under Edit (menuItem7, which should have "Background Color" as its label). Repeat Steps 4 and 5 above for the Background Color menu item's actionPerformed event, except in this case, to manipulate the background property, insert the following uncommented code into the body of menuItem7's actionPerformed event:
     colorChooser1.setValue(textArea1.getBackground());
     colorChooser1.setTitle("Set Background Color");
     colorChooser1.show();
     if (colorChooser1.getResult() == ColorChooser.OK) {
       textArea1.setBackground(colorChooser1.getValue());
     }
    
    Note: You do not need to add another ColorChooser dialog component. You are simply using the same one you added before, but using it for background color in this event handler.

  8. Save your file, then choose Alt+R+R to compile and run your application. Type in some text and play around with the foreground and background colors. Here is what it looks like if you set the foreground to white and the background to black:

    TextEdit UI

    If you don't see a dialog appear when expected, double-check that you've set its frame property to this. You can also choose View|Execution log to check to see if exceptions have been thrown.

Tutorial Tutorial Step 07