Week Two Assignment

How the user interacts with a program is one of the most important parts of a program. Most people use a window for running an interactive program. Where a user interacts with a program is called a GUI (Gooey) which stands for Graphical User Interface. The GUI usually consists of a window that can be minimized, maximized, moved around and closed. Inside the window can be buttons, menus, labels, text fields, etc... These are all called Components. Each of these Components must be included in your program. How these components are created, what they do, in the past used to be typed into your program. Today there are tools to help make this task easier. These tools can be added to eclipse as an extra. These "extras" are called plugins. Lets install a plugin to Eclipse (internet connection required).

Install GUI Builder Plugin for Eclipse:

  1. Open Eclipse and from the menu, select Help -> Software Updates -> Find and Install...
  2. Select the "Search for new features" to install Radio button and hit Next.
  3. Hit the New Remote Site... button.
  4. For Name enter: Jigloo
  5. For URL enter: http://cloudgarden1.com/update-site and hit OK.
  6. Hit Finish.
  7. Check the Jigloo selection and hit Next.
  8. Select the "I accept the terms in the license agreement" radio button (We aren't a commercial organization, so this is a free plugin for us) and hit Next.
  9. Hit Finish.
  10. It will download the plugin (about 5.5 MB)
  11. Hit Install All.
  12. Eclipse may ask to restart, hit Yes.
This plugin comes free from http://www.cloudgarden.com/jigloo/

This plugin allows you to drag and drop components into a window the way you want it to look to the user. Before this drag and drop feature existed, you had to manually type all this stuff into your program and it wasn't fun! Let's create the GUI for the HiLoGame.

Start Eclipse for the first time and configure your workspace

  1. Go into Eclipse and under the HiLoGame Project is a src stands for source folder.
  2. Right click the src folder and select new -> Other...
  3. Expand the "GUI Forms" by hitting the plus.
  4. Expand "swing" and select Jframe and hit Next.
  5. For Package enter "simple"
  6. For Class Name enter "HiLoGame" and hit Finish.
  7. It will now show that you have a program with a window
  8. Click on the Window that it just created and it will select the GUI Properties tab below. Under Basic, find "title" and set it to "Hi Lo Game" and hit Enter. The Window now will have the name in the title bar.
  9. How the components are laid out on your Jframe (Or your window) can get complex. There are several different types of layouts. For now, we'll use my favorite layout GridBag Layout. On the right side of your view is an Outline tab. Right Click on "this - Jframe, Border" and select "Set Layout" and select "GridBag Layout".
  10. In the Form Editor hit the Components tab. And select the label component at the top (put your mouse over the component to see what type of component the icon represents>
  11. Drag it to the top center of the Frame.
  12. For Component Name enter "guessLabel". For Text enter "Guess a number between 1 and 100".
  13. Drag a JText Field to the second column, second row of the GridBag Layout.
  14. For Component Name enter "guessText" and for text leave it blank.
  15. In the Form Editor on the new JText Component is a black down arrow. Hit that.
  16. It will bring up a GridBag Alignment window. You can force the size of that component to take the full width of that cell in the GridBag Layout. Hit the < > button just to the right of the center. This will tell the editor that we want the size of that JText Field to take the full size of that cell.

Homework

In addition to the above exercise. Please read the following webpages:

  1. What is an object?
  2. Variables
  3. Components
  4. Layout Managers

Concepts discussed

Today's exercise has many details. If you have questions please email me!