COSC3461 - Assignment 3 - Build your own GUI Builder

COSC3461 - Winter 2005 - Assignment 3

Build your own GUI Builder

Your goal for this assignment is to develop a "GUI Builder". A GUI Builder is a program that translates a visual representation of an interface into Java source code. The visual representation is 'sketched' by the user with a pointing device, using clicking and dragging actions.
Your GUI Builder will run on a desktop computer with mouse. The intended user of your software is a typical computer-science undergraduate student (in other words, yourself). What you are building is desktop software intended for use by experts.
The minimum functionality required for this assignment consists of three parts: (a) the GUI Interface Sketcher, (b) load and save functionality, and (c) Java source-code generation.

The GUI Interface Sketcher
The foundation of this application is the GUI Interface Sketcher. You have at your disposal the various menus (see here too), toolbars, and, graphical interactions available on a desktop computer with mouse.
You must provide a means for the user to design a GUI interface using your program. This will require a graphical display so the user can see, interact with, and verify their design. You are encouraged to carefully consider and plan the nature of the interaction for your program. For example, what mouse actions, (clicking, dragging, right-button-clicking, etc.) should be used for what purposes? How will you make it clear to the user what actions are available to them? You may find it useful to review the sections of the the Java Tutorial on the Glass Pane and the Layered Pane.
To aid in constructing the GUI Interface Sketcher, a skeleton program is provided for you. See a3.java. (Note that you don't have to use the Skeleton program if you don't want to.)

Figure 1. The Skeleton Program

This program provides much of the functionality your Sketcher will need including customising a JPanel for painting, interacting with the user via the mouse, and storing the widgets for later redrawing of the panel. This program uses absolute positioning of components in a JPanel to accomplish this. (The skeleton program is essentially a combination of two of the demo programs we have looked at in class, DemoPaintPanel3.java and DemoAbsolute.java.)
The GUI widgets that you must support are JLabel, JButton, JCheckBox, JRadioButton, JTextField, and JTextArea. Your software must also allow the user to insert an empty JPanel.
Your software should allow the user to view and adjust or modify the various parameters of these GUI widgets. For example, the user should be able to change the text of a JLabel or on buttons. Similarly, buttons and text fields can be enabled or disabled, radio buttons and check boxes can be selected or not selected. The user should also be able to change the sizes and positions of the widgets.
Your program should make some effort to aid the user in creating valid interfaces (i.e., help the user avoid overlapping buttons, or widgets that extend out of the bounds of the JPanel).

Load and Save
The user must be able to save their GUI design to a file, and be able to retrieve the design from the file afterward. It would be wise to plan your file format before starting to code it. A human-readable file format is definitely advantageous for debugging and ease-of-use reasons. I recommend a format that looks something like the following example, but it's up to you.

Figure 2. Suggested File Format

Java code generation
You must provide a generate source-code function that produces a Java program that implements the desired interface. The Java source code your software produces should follow the format used in the demo programs, and should create a JPanel that implements the interface and is set as the content pane of a JFrame.
User-specified object names (so that in the final source code the widgets aren't just named JCheckBox01, JCheckBox02, etc.), and, similarly, a user-specified name of the top-level JPanel would be useful to the user.
How you achieve the widget positioning in the generated program is up to you, but you could always use Absolute positioning within a JPanel. For example, executing the "generate source-code function" for the interface described by the file appearing in Figure 2 (above) should produce Java source code similar to the following.
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class output
{
   public static void main(String[] args)
   {
      outputFrame frame = new outputFrame();
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.setTitle("output");
      frame.pack();
      frame.show();
   }
}

class outputFrame extends JFrame
{
   // Define the widgets here...

   private JTextField InputText;
   private JLabel L01;
   private JCheckBox Name;

   // constructor

   public outputFrame()
   {
      // ----------------------------------
      // construct and configure components
      // ----------------------------------

      // Instantiate and configure the widgets here...

      InputText = new JTextField("");
      InputText.setBounds(30, 60, 150, 20);

      L01 = new JLabel("Enter some text here...");
      L01.setLocation(40, 30);
      L01.setSize(L01.getPreferredSize());

      Name = new JCheckBox("CheckBox");
      Name.setLocation(60, 90);
      Name.setSize(Name.getPreferredSize());
      Name.setEnabled(true);

      // ------------------
      // arrange components
      // ------------------

      // put panels in a content pane panel

      // Create and Customise the JPanel...

      JPanel outputPane = new JPanel(null);   // Absolute layout
      outputPane.setPreferredSize(new Dimension(210, 140));

      // Add widgets to JPanel...

      outputPane.add(InputText);
      outputPane.add(L01);
      outputPane.add(Name);
      
      // make panel this JFrame's content pane

      this.setContentPane(outputPane);
   }
}
      
Inspirational Ideas
Although not required for this assignment, there are several additional features that would be useful to the user, such as:

Right-button-click properties on objects

Undo

Support for more widgets, for example, JComboBox, JTabbedPane, JPasswordField, JScrollPane, JSlider, etc.

Allowing the user to specify the colours or fonts of the widgets, the size of the JPanel, and the "look and feel" of the interface

Borders (possibly with text or an edging of some kind) for JPanels

Support other layout managers in addition to absolute layout

Support for a resizable interface (difficult) using either grid bag layout or spring layout

A "run" option that saves, compiles, and executes the generated program (perhaps using Runtime.exec("javac ...")).

Grid alignment functionality that allows the user to easily align widgets according to a common grid (like the "snap to grid" feature in Microsoft products) or to each other

Enhanced Java source code generation features that allow the interface to be saved as a JDialog instead of a JPanel within a JFrame-based application

Allow the user to indicate what listeners they desire for each widget, and generate the appropriate code in the generated Java source code. This could include the code to add listeners, and the listener functions as well, using if statements with getSource() for every widget registered to that listener. Some listeners should probably be automatically added for some widgets, for example, action-listeners for all regular buttons

Default actions could be provided for buttons, so if the user indicates they want an "Exit" button, "System.exit(0)" could be inserted at the correct place in the action-listener code. Other types of automatic actions for buttons include choosing a colour, choosing a filename, or "Ok" and "Cancel" buttons in a JDialog

Some notes:

Your goal is to create a robust application with a good user interface. Make appropriate use of the various GUI components and features supported in JFC/Swing (e.g., menus, dialog boxes, buttons, text components, graphic icons). Consider the organization, presentation, interaction, and over-all usability of your program.

Don't forget who the target users of your software are.

Your source code should be well organised and documented.

You must do this assignment in groups of three.

This assignment is due on Friday, April 1, at midnight. Late assignments will not be accepted.

Only one person from each group needs to submit the assignment, but you should agree in advance who the submitter is going to be to ensure the submission is in on time.

Do not use the york package, or the Type package.

You must hand-code the interface, you may not use a GUI builder.

Your programs must compile and run on the Prism computers.

Be sure to read and follow the instructions given below on what to submit, and the format for the top of the intro file.

The assignments will be awarded letter grades, according to the university's letter grade standard. A program that simply fulfils the requirements described here will be awarded a 'C'. To get a higher grade, we want to see "an excellent job and originality" in your assignment solutions.

Name your program 'a3.java'. Submit it on Prism with 'submit 3461 a3 a3.java'. Additional files, if required, may be submitted using the same command, with the filename as the last argument. (Use 'man submit' for further details on using the submit command.)
Also submit a text file named 'intro' in which you describe the motivation behind your software design. Why did you use the JFC/Swing components that you did, and why did you organise them that way? Briefly justify your design. If your implementation includes any special features, make sure you describe these and provide appropriate instructions.
The intro text file should also contain a record of your group meetings. Include the date and time of each meeting, the people present, and the topics discussed. If other forms of communication were used (e.g., e-mail, phone), indicate the type and extent. Also include in your intro file a record of the tasks assigned and performed by each member of the team.
The first three lines of the intro file must contain the following four comma-delimited fields, with nothing following the fourth field.
      LoginID, StudentID, LastName, FirstName(s)
      LoginID, StudentID, LastName, FirstName(s)
      LoginID, StudentID, LastName, FirstName(s)
   