XOR Mode

To use XOR mode, you call the setXORMode() method, passing in a "swap" color. What actually happens when you paint, however, is kind of strange.

• When you paint an object [either a geometric shape or an image] for the first time, it won't appear in the correct color. The actual color used is unpredictable and changes from platform to platform.
• When you paint the same object the second time, in the same location, the original state of your drawing is restored [on all platforms.]

Back to Top

Step-By-Step Instructions 

Step 1

Download the Scrawler source code, and compile it. Once your program compiles make the following changes:

1. Change the name of the applet to SuperScrawler. You'll have to change the class name as well as the name of the source-code file. Using Java 1.1 code, change the cursor to use the hand or cross-hair cursor.
2. Find three GIF or JPG images or your own [don't use mine] and place them in the same directory as your applet. In the init() method, locate the place where the Choice object named theImgFile is initialized, and replace the names of my GIF files with your own.

Once you've reached this step, create an HTML file and run SuperScrawler. You should be able to load and display images, and your cursor should change to a hand or cross-hair when it moves over your applet.

Click here to see how your program should look.

Step 2

Create the toolbar that appears at the top of the applet. The toobar will contain four radio-buttons for selecting the pen color, as well as a button field named clearBtn and a checkbox field named XOR. Here are the tasks to complete to create the toolbar.

Task 1: Add Fields

In the attributes section of your program, add the following fields:

1. Create a CheckboxGroup object named colorGroup. Create four Checkbox objects attached to colorGroup named redBtn, blueBtn, greenBtn, and blackBtn.
   1. Make sure redBtn is initially selected.
2. Create the Button field clearBtn.
3. Create the Checkbox field named XORBtn.

Task 2: The makeTopBar() Method

Add a method named makeTopBar() to your applet. The method takes no arguments and returns no values. Inside the  makeTopBar() method: 

1. Create a Panel object named p. Set the Panel's layout to a 2x2 GridLayout
2. Add the four radio button fields, redBtn, etc.,  to the Panelp
3. Add the first Panel , p, to the field topBar, and then add the fields clearBtn, and XOR to the field topBar as well. Hook up the clearBtn by using addActionListener(this).
4. Hook up the four radio buttons by using addItemListener(this).

Task 3: Modify the Scrawler Methods

You will have to make changes to several of the methods in SuperScrawler.java. Here are the changes you should make:

1. Modify the applet's init() method to call makeTopBar() before adding topBar to the applet. Modify the applet's loadImage() method so that it checks the value of the XORBtn field and uses XOR painting mode to draw the offscreen image if XORBtn is checked. Use penColor as the "swap" color for setXORMode() Add an actionPerformed() method to your applet. This means you have to add the ActionListener to the list of interfaces implemented by the applet. Inside the actionPerformed() method, call loadImage() if the clearBtn is pressed. Note that this means that the Clear button clears the drawing, not the image.
2. In the itemStateChanged() method you'll have to check to see if the target was one of the radio button objects, and set the penColor variable accordingly. (That means that the method now needs a series of if-else statements, instead of a single if statement.)

Compile and test your program to make sure that it:

• Repaints the image if you press the Clear button. Note that the Clear button is used to restore an image to its "unscribbled" state, not to erase the canvas. Changes the pen color when a different radio button is selected.
• Repaints the image in different colors if the XOR button is checked. [Try checking different pen colors and see what happens when you clear.]

Click here to see what your applet should look like at this point.

Back to Top

Step 3

Create the toolbar that appears at the bottom of the applet. This requires you to modify the Panel that appears at the bottom of your applet. The bottomBar field currently has a Choice object that is used to select the image to display; you're going to add a Choice object to pick the thickness of the drawing pen as well. Here are the tasks to complete:

1. In the fields section of your program create a Choice called thickness Create a method called makeBottomBar() that acts like makeTopBar(); that is, it modifies the Panel named bottomBar. Initialize the Choice named thickness inside this method. Use the Strings " 1 Pixel", " 2 Pixels", " 4 Pixels",  " 8 Pixels", " 16 Pixels" and "32 Pixels". Note the single space in front of 1, 2, 4, and 8. Since the default drawing width is 4-pixels, make sure that thickness initially displays this value. Hook up events for thickness by using addItemListener(this). Move the code that initializes and adds the Choice object named theImgFile from the init() method into your makeBottomBar() method. Add theImgFile to your bottomBar Panel inside the method. In the init() method, call makeBottomBar() before you add bottomBar to the applet. This goes in place of the line that formerly added theImgFile.
2. In the itemStateChanged() method, check to see if the target was the thickness Choice, then set the penWidth variable accordingly.

Compile and test to make sure your code runs correctly. You should now be able to draw with different pen widths.

Click here to see the applet after this step.

Back to Top

Step 4

Write code to enable different drawing "modes". To do this you'll add a List object, containing different drawing modes so that the user can select between freehand drawing, line drawing, or shape drawing. Here are the different tasks you need to complete:

• In the fields section of your program add a List called figures
• Create a method called makeSideBar() that works similar to makeTopBar() and makeBottomBar() that modifies the Panel named sideBar. Add the following items to your List: 

  "1. Freehand" "2. Lines"

  "3. Rectangles"

  "4. Filled Rectangles"

  "5. Ovals"

  "6. Filled Ovals"
   

• Select the first item in your figures List. Hook up the List by sending it the addItemListener(this) message. In the init() method, call makeSideBar() before. Add the resulting Panel to the right side of your applet.
• In the itemStateChanged() method, if the figures. List triggered the event, set the drawMode variable accordingly. In addition, use showStatus() to display the current drawing mode when it is changed.

Finishing Up 

Back to Top