BasicGUIObjects

Part 1:
JFrame, Container, JButton, JLabel, JTextField, and JPanel

CSSE 120
Fundamentals of Software Development I

Rose-Hulman Institute of Technology
Computer Science & Software Engineering

Winter term, 2003-2004

Learning objectives:

After completing this project, you should be able to:
  • Define a subclass of the JFrame class, using inheritance.
  • Write graphical user interface (GUI) application programs, using JButton, JLabel, and JTextArea objects from the javax.swing package.
  • Write GUI application programs with menus, using menu objects from the javax.swing package.
  • Write event-driven programs using Java's delegation-based event model.

Items in red are learning objectives for this part of the project.

Instructions:

Group work

BasicGUIObjects report

  • When you see a question prefaced by
        Question: blah blah blah ...
    put your answer in your BasicGUIObjectsReport.txt report (more on this shortly).

Time limit

  • Most students complete this exercise in ? to ? minutes after seeing their instructor demonstrate the ideas.
  • If you find yourself spending much more time than that on this exercise, please see your instructor.

    Preliminaries

  1. Make sure that you're following the instructions above (in particular, you should be working with somebody new).
  2. Create a new project using the Basic Console Application template and the project name BasicGUIObjects.
  3. Create a file called BasicGUIObjectsReport.txt, placing it in the docs subfolder of your BasicGUIObjects project.
  4. Open your BasicGUIObjectsReport.txt file. You will use it to record your answers to the questions in all of the parts of this exercise. Start the report with an appropriate title, your names, the date, and a heading to indicate the beginning of Part 1.
  5. Skim this document. Then return to this point.
  6. Question: About how many minutes do you think it will take you to complete Part 1 of BasicGUIObjects?
  7. Question: What time is it now?
  8. Creating the CVS Module

  9. Create a new module for your BasicGUIObjects project, calling the module BasicGUIObjects, spelled just like that.
  10. Add your report and the initial contents of your BasicGUIObjects project to your new CVS module.
  11. Documenting the Project

  12. Write JavaDoc comments based on the planned behavior of the project. Include all of the required tags. Ensure that you can generate the HTML documentation correctly.
  13. The JFrame Class

  14. Modify your class definition so that it extends the JFrame class. Add the necessary import statement so that the project compiles.
  15. Question: Explain what it means that the BasicGUIObjects extends JFrame. What is the inheritance hierarchy of the JFrame class (Use JDK Help)?
  16. Within the main method, declare and initialize a new BasicGUIObjects object called mainFrame. This is the last change that you should make to the main method for Part 1 of this exercise.
  17. Question: The mainFrame object has many methods, including setVisible, setDefaultCloseOperation, setTitle, setSize, setLocation, and getContentPane. Where are those five methods defined?
  18. Add a BasicGUIObjects constructor with no parameters.
  19. Include a statement that will cause the object being constructed to become visible.
  20. Question: Where does the window appear?
  21. Set the default close operation so that the program exits gracefully when the window closes.
  22. Change the window title to "CSSE 120 Acrobat Project -- Winter 2003-2004 Version".
  23. Add the following code to your class (before the constructor and main method):
          // Estimated height in pixels of the title bar
          public static final int TITLE_BAR_HEIGHT = 20; 
          
          // Height in pixels of the panel with the add controls
          public static final int ADD_PANEL_HEIGHT = 40;
          
          // Height in pixels of the panel with the exit button
          public static final int EXIT_PANEL_HEIGHT = 40;
          
          // Number of supported types of Acrobats
          public static final int ACROBAT_TYPES = 5;
          
          // Total height in pixels of the application's window
          public static final int FRAME_HEIGHT = 
          TITLE_BAR_HEIGHT
          + ADD_PANEL_HEIGHT
          // + ACROBAT_TYPES * AcrobatPanel.ACROBAT_PANEL_HEIGHT
          + EXIT_PANEL_HEIGHT
          + ( ACROBAT_TYPES + 3 ) * ( new FlowLayout() ).getVgap();
          
          // Width in pixels of the application's window
          public static final int FRAME_WIDTH = 450;    
    
  24. Change the height of the window to FRAME_HEIGHT, and the width to FRAME_WIDTH.
  25. Change the initial position of the window so that it appears somewhere near the center of your screen. If the window flashes briefly in the upper left corner of the screen before appearing in the center, move the statement that makes the window visible so that the initial appearance is in the correct location. In general, make the window visible only after all of the initial properties are set.
  26. The Container Class

  27. A frame's content pane designates the area of the frame that excludes the title and menu bars and the border. It is the area we can use to display the content (text, image, etc.). Get the content pane and store it in a new Container object
  28. Add the appropriate import statement. In earlier versions of Java, the AWT classes were used exclusively for GUI applications. The Swing classes were added in Java 2 SDK 1.2. They provide improved portability and greater functionality. In general, if a Swing class can do what you need, you should use it. Only use AWT classes for things that don't have Swing counterparts.
  29. Change the background of the window to red. The Color class has public fields red and RED. Either one will work. Note that the window will be sort of ugly for now, but it will look better by the time you're finished.
  30. The JButton Class

  31. Create a new JButton object called exitButton. Initialize it with the String "Exit".
  32. Add exitButton to the content pane.
  33. Question: How big is the exit button?
  34. Add the following statement:
          pane.setLayout(new FlowLayout( )); 
  35. Question: How big is the exit button after you've changed the layout of the Container to which you're adding it?
  36. Add another button with the label "Add Acrobat".
  37. The JLabel Class

  38. Create a new JLabel object. Initialize it with the String "Acrobat Name:".
  39. Add the JLabel object to the content pane.
  40. The JTextField Class

  41. Create a new JTextField object. Initialize it to have 10 columns.
  42. Add the JTextField object to the content pane.
  43. The JPanel Class

  44. Create a new class called AddPanel that extends the JPanel class.
  45. In the constructor of your BasicGUIObjects class, create a new AddPanel object and add it to the content pane.
  46. Give the AddPanel class a constructor with no parameters.
  47. Add the following statement to the AddPanel constructor:
          this.setPreferredSize( 
             new Dimension( 
                BasicGUIObjects.FRAME_WIDTH, 
                BasicGUIObjects.ADD_PANEL_HEIGHT 
                ) 
             );
  48. Set the background color to white.
  49. Move the statements that create the label, text field, and "Add Acrobat" button to the AddPanel constructor. Instead of adding the objects to the content pane (which is not visible in the AddPanel constructor), add them to the AddPanel object (i.e. instead of pane.add use this.add). If necessary, rearrange statements so that the label appears to the left of the text field, which then appears to the left of the button.
  50. Declare a constant called ACROBAT_NAME_LENGTH with the value 10, and use it to control the size of the text field.
  51. Create a new class called AcrobatPanel that extends the JPanel class. Give it a constructor with a String parameter called theLabel.
  52. Declare a constant called ACROBAT_PANEL_HEIGHT with the value 100.
  53. Set the size of the panel using the following statement:
          this.setPreferredSize( 
             new Dimension( BasicGUIObjects.FRAME_WIDTH, ACROBAT_PANEL_HEIGHT) 
             );
  54. Question: What happens if you use setSize instead of setPreferredSize? Isn't that annoying?
  55. Set the background color of the panel to white.
  56. Create a new JLabel object. Initialize it with theLabel, and add it to the panel.
  57. Create a new AcrobatPanel object with the label: "BasicAcrobat Objects". Add it to the content pane between the AddPanel object and the exit button. Do the same for DoublingAcrobat, ProudAcrobat, AcrobatWithBuddy, and Choreographer objects. Uncomment the line in the middle of the definition of the constant FRAME_HEIGHT.
  58. The FlowLayout defaults to centering objects left-to-right within the container. Change the AcrobatPanel class so that it left justifies it's objects:
          this.setLayout( new FlowLayout( FlowLayout.LEFT ));
  59. Submitting the Project

  60. Make any final changes that you want to your project.
  61. Generate the HTML documentation for your project.
  62. Commit your changes to your CVS module (be sure to include your source file, your report, and your HTML documentation).
  63. Tag your CVS module BasicGUIObjects1.
  64. Summary

  65. Question:
  66. Question: How much time did you spend on Part 1 of BasicGUIObjects? Compare your answer to how much time you had estimated that you would spend. You receive full credit no matter how far off your estimate is!