COMP 504 Fall 2015	Lab01: Software Installations and Getting Started With Eclipse

Sign up for OEDK card access TODAY!    (select "Comp504" for the "Purpose for needing ID Access to the OEDK" question.)

In this lab, we will concentrate on making sure that everyone has the necessary software installed and we can get started on our first lab project.

Comp310 software installation page

1. Install latest Java Development Kit ("JDK")
2. Install latest version of Eclipse
3. Install Eclipse plug-ins.    Note:  Not all plugins shown on installation page are needed!
   1. Install latest Subclipse plugin for Subversion source control
   2. Install latest Yatta "UML Lab" diagramming plug-in
      • Get the key from the Resources library in Owlspace.   You MUST be on-campus and connected to the Rice network when you enter this key!

This week, we will start by making a simple application in Eclipse.

Your First Eclipse Program

The following exercise is a lead-in to HW01 and is based on the materials from lecture.

Reference pages to use while working on this exercise:

• Using the Eclipse Integrated Development Environment
• Using WindowBuilder

Development Steps:

1. Make a Comp504 Labs workspace folder
   1. In your Comp504 folder (make one if you don't already have one), make a folder called "Labs".   We will put all of our lab code into sub-folders in this Labs folder.
   2. It is highly suggested that you also create another, "Assignments" folder in your Comp504 folder to put your homework code.
2. Create an Eclipse workspace -- a workspace is a collection of projects, which is the collection of files needed to make a a specific application (e.g. homework or lab assignment)
   1. Start Eclipse -- the "Workspace Launcher" dialog should show up.   If you have gotten past this point already for some reason, you can get back to it by slecting "File/Switch Workspace/Other..." from the main Eclipse menu.
   2. Click the "Browse" button and browse to  and highlight the Labs folder you made.
   3. Click the "Ok" button twice and Eclipse will restart in your new workspace.
      • If this is the first time you are using the workspace, you will need to click the "Workbench: Go to the workbench" icon in the middle right of the Eclipse screen.
3. Adjust the WindowBuilder settings -- this only needs to be done once ever.
   1. Follow the instructions for setting the WindowBuilder preferences in the Using WindowBuilder resource page.
4. Create a new Java Project -- Sets up a specific Java application to be developed.
   1. Be sure that the upper right corner of the Eclipse window has a little button labeled "Java", indicating that Eclipse is using its default "Java perspective".    If not, click the "Open Perspective" icon in the upper right corner and select the Java perspective.
   2. Click "File/New/Java Project"  from the main Eclipse menu.
      • Project Name = "Lab00"
      • Be sure that the following default values are indeed set:
        • "Use default location" selected
        • Use execution environment JRE = JavaSE-1.8 (or whatever the latest version is)
        • "Create separate folder sfor sources and class files" selected
        • "Add project to working sets" NOT selected.
   3. Click "Finish".    A new folder in Labs called "Lab01" with subfolders, "src" and "bin" should be created.    The .java source files will go in "src" and the .class files will go in "bin".
5. Create a WindowBuilder application - adds a JFrame-based application to the project based on a pre-defined template for a WindowBuilder graphical user interface type (GUI) Java application
   1. Add a new package under the "src" folder:
      1. In the "Package Explorer" tab, right-click the "src" folder and select "New/Package"
      2. Set the "Name" of the new package to "view" and click "Finish".
   2. Be sure that the new "view" package is highlighted  and follow the instructions in the  Using WindowBuilder resource page to "Create a Simple GUI Application" 
      • Be sure to have read the warning about the bug in WindowBuilder!
6. Run your working, albeit not too exciting application!
   1. Highlight the JFrame file in the package explorer that you created (probably "MainAppFrame.java") and click the green "Run" button on the main Eclipse toolbar.
   2. If you haven't already saved all your files a "Save and Launch" dialog will pop up asking you to save any unsaved files.   Click "Select All" and check the box that says "Always save resources before launching" and never be bothered by this again.
   3. A small blank window will appear.   Hooray!
7. Add some GUI components to make your application more interesting
   1. Open the WindowBuilder "What-You-See-Is-What-You-Get" (WSIWYG) GUI editor:
      1. Double-click the JFrame file (probably "MainAppFrame.java") to open it in the editor if it is not already open.  
      2. Click on the "Design" tab at the bottom of the editor pane.    This will open WindowBuilder's
   2. Add a panel to the frame:
      1. In the WindowBuilder component palette, click on the "JPanel" component. 
      2. Holding the mouse (without clicking!) over various locations in the frame will highlight each of the 5 possible locations that the panel can be placed onto the frame.
      3. Click on the top location (the "North" location) to drop the panel into the frame.
      4. Change the name of the variable referencing the new panel by selecting the panel in the frame and going to the WindowBuilder Properties tab.   Under the entry called "Variable", change the value to "pnlControl"  (we are making a "control panel").
         • Note the naming convention being used here.   By prefixing the name with "pnl", one can tell at a glance exactly what sort of component the variable references.   We will use prefixes like "pnl", "lbl", "btn", etc. to indicate panels, labels, button and other components.    This is incredibly useful.   Good naming practices are paramount! 
      5. Be sure that the panel is selected and change the background color of panel by clicking on the ellipses button ("...") next to the "background" entry in the WindowBuilder Properties tab.
      6. Run your application to see your colored panel on the frame.
   3. Add a label to the panel:
      1. In the WindowBuilder component palette, click on the "JLabel" component. 
      2. Select a JLabel from the WindowBuilder component palette and drop it onto the panel you added earlier.
      3. Change the name of the label to something more useful, e.g. "lblInfo".
      4. Enter the text for the label in the "text" entry in the label's Properties.
      5. Run your application to test it.
   4. Add a button to the panel:
      1. Select a JButton from the component palette and add it to the panel.
      2. Change the name of the button to something more useful, e.g. "btnRun".
      3. Set the button's text property to whatever you like (recommendation: something related to the name of the button).
      4. Run your application.    You should be able to click the button but it won't do anything...yet.
      5. Add behavior to the button:
         1. In the WindowBuilder designer, double-click the button.
         2. WindowBuilder will auto-generate the following code (see note on using lambda functions for ActionListeners when hand-coding):
            

            btnRun.addActionListener(new ActionListener() {
            	public void actionPerformed(ActionEvent arg0) {
            				
            	}
            });

         3. Add the following line to the actionPerformed() method:
            

            lblInfo.setText("Comp504 rocks!");
            				

         4. Run your application to test it.    Clicking the button should now change the text of the label.    Woohoo!
   5. Go nuts and have fun!
      1. Experiment around with adding more components and changing their properties.
      2. Challenge:   Add a JTextField to your GUI and have the button change the label's text to whatever you type into the text field.

© 2015 by Stephen Wong