CSE 132 (Spring 2009)
Studio 1: The Percenterator

Review studio procedures before starting.

Some guidelines for this week's studio:


On Thursday we will use the work of this studio to control picture color using some Swing components. For today, focus on the following.

  1. Open eclipse (if you're new to this stuff, ask a student to help you), and create a new project CSE132, asking it to keep source and object files in the same folder (ask a student for help if you need it).
  2. Create a package percent and let's do our work in that package.
  3. Cut and paste the following code into a class Controller in your percent package (file also available here):
    package percent;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    import javax.swing.*;
    // import javax.swing.event.ChangeEvent;
    // import javax.swing.event.ChangeListener;
    public class Controller extends JPanel {
    	public Controller() {
    		this.add(new JLabel("Controller"));
                    // add other things you want to see here:
    	public static void main(String[] args) {
    		Controller panel = new Controller();
    		// What you see below is what YOPS did for you
    		JFrame frame = new JFrame();

  4. Run Controller as an application. You should see a frame pop up with the label in it.
  5. Add some more JLabel instances just to get used to doing this kind of thing. Run the application and make sure you see what you expect.
  6. In class, you were shown an OpinionModel that managed an integer in the range of 0 to 10. Write a similar Java class PercentModel that works like OpinionModel but allows integers from 0 to 100. The integer value represents a percentage, whose initial value should be 100 percent.

    Your PercentModel class must have the following method:

    public int computePercentOf(int n)
    The method takes in n and returns this.getValue() percent of n.

    In your group, discuss how to write computePercentOf so that it performs arithmetic using the appropriate types.

  7. Here is a JUnit test to make sure things are working; try it now:
    package percent;
    import static org.junit.Assert.*;
    import org.junit.Test;
    public class PercentTest {
    	public void test() {
    		PercentModel pm = new PercentModel();
    		int checkType = pm.computePercentOf(0);
    		// initially, pm at 100%
    		assertEquals(40, pm.computePercentOf(40));
    		// try 50%
    		assertEquals(20, pm.computePercentOf(40));
    		// try 50% again (make sure it's not cummulative)
    		assertEquals(20, pm.computePercentOf(40));
    		// try 0%
    		assertEquals(0, pm.computePercentOf(40));
    		// try 300% which should be same as 100%
    		assertEquals(40, pm.computePercentOf(40));
    		// try -300% which should be same as 0%
    		assertEquals(0, pm.computePercentOf(40));

  8. You were shown in class how to extend JSlider (we called the extension ViewAsSlider) and hook an instance of the extension to a model. Do the same for yourself in your Controller, and configure it so it looks and works the way you wish.

    Instantiate a couple of sliders hooked to the same model and watch them work in concert.

    Show this to a TA and to other groups as needed.

  9. You were shown the ViewAsText text field associated with a model in class. Do the same for yourself and arrange for the slider and the text field to show up in your demo. When one changes, so should the other.

    Show this to a TA and to other students as needed.

  10. Add a String parameter to the Controller constructor and arrange for it to show up as the label in the Swing JPanel instead of the Controller label.
  11. Next, investigate some other Swing component that will have some effect on your Controller. You can use any one you want, but it should be used for some reasonable purpose. For example, a JButton might be used to reset the percentage to 0 or 100 percent.
  12. Let's take JButton as an example. You will want to add one or two JButtons to the Controller JPanel. To discover when one has been pushed, start with the following code and let eclipse help you fill in what's missing:
      JButton reset = new JButton("reset");
      // or maybe you'd like a Benjamin Button
      // ...
    It's the last line above that will cause eclipse to suggest some things to you. Get help as you need it. There is a description of JButton here, but you only need the bold stuff. You can see how the action events are handled there at least.
  13. Add at least two things to the panel (they can both be JButtons) and make them do something useful. Show the TAs this.
That's it for today. Mail the resulting code to members of your group and you'll use this for a simple lab exercise Thursday.

Last modified 20:10:58 CST 11 January 2010 by Ron K. Cytron