First GUI Program using Eclipse and WindowBuilder
COMP 310    Java Resources  Eclipse Resources

Before starting this exercise, be sure that Java, Eclipse and all its plugins are properly installed, including having set all the preferences in Eclipse and its plug-ins!

Here, we will build a simple graphical user interface ("GUI") program using Eclipse and its WindowBuilder plugin.

Make sure that before you start, that you have all the necessary Eclipse plug-ins installed and properly configured, i.e. the preferences are properly set for Eclipse and all its plug-ins!

High level development view:

  1. Make an Eclipse workspace -- typically this only needs to be done once as all one's course work would be in the same workspace.
  2. Make an Eclipse project in the workspace -- Do this for every assignment and lab
  3. Commit the project to source control.
  4. Set up the overall MVC (Model-View-Controller) architecture
  5. Create a simple JFrame for the main view component.
  6. Create a simple Controller class with a main() method to instantiate the system, e.g. the JFrame initially.
  7. Build the model part of the system and attach it to the view component(s).
  8. Commit the code often and early!

Note that some of the formal steps to create the MVC architecture outlined above are abbreviated below for simplicity. See the references section below for detail discussions.

 

Detailed Development Steps:

  1. Make a Comp310 Labs workspace folder
    1. In your Comp310 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 Comp310 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".
      3. Note: Normally one would also create the "model" and "controller" packages for one's MVC architecture at this point but we will forego that for now for simplicity's sake. In the end, we will need to migrate the code to a normal MVC architecture.
    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" 
  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("Comp310 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.
    6. If your project is connected to source control, e.g. you're working in a homework project, don't forget to commit (and push, if using Git) your code!
      1. See the course-specific directions on how to commit your to the remote repository.

 

Addtional program modifications:

 

References:

 

 

© 2020 by Stephen Wong