Welcome to Computer Programming

Graphical User Interface (GUI)

A graphical user interface makes using an application much easier and more visually appealing. As opposed to a text based console program, a gui requires a little more coding. We need to figure out that interface.

In Java, the main library of gui components (like menus, textfields, buttons, etc [See here for a list of them.]) is called Swing. We need to deal with creating and adding the component and also managing events (if someone uses them).

There is a bunch of code additions to our normal applet- I would recommend starting from the example below or the starter code below.

We are going to put them in an applet (because that is easier for you to put online and then for me to see it online). An application would be just as easy.

BLANK STARTER CODE

An example is below

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;


//notice that I say implements actionlistener, this is to say that I will be listening for actions
public class SwingExample extends JApplet implements ActionListener
{
    //We have 3 swing components that we must declare up here, so every method has access to them
    JTextField textField = new JTextField(20);
    JButton lowerCase= new JButton ("To Lower");
    JButton upperCase = new JButton ("To Upper");

    //init is a method that gets called automatically when the applet starts or initializes
    //in init we are adding our swing components to the applet
    public void init()
    {
        Container screen = getContentPane();
        screen.setBackground(Color.white);
        screen.setLayout (new FlowLayout() );
        screen.add(textField);
        screen.add(lowerCase);
        screen.add(upperCase);

        //for all components that i want to listen for an action [like a click of button]
        //I add action listener saying Im going to be listening
        lowerCase.addActionListener(this);
        upperCase.addActionListener(this);
    }

    //in paint I tell it to paint the components and then draw a line
    public void paint (Graphics g)
    {
        super.paint(g);
        g.drawLine(5,200,400,200);
    }

    //now we have to have a method actionPerformed that will be called if an action happens
    //we then see which component had the action on it
    public void actionPerformed(ActionEvent thisEvent)
    {
        Object source = thisEvent.getSource();

        if (source == lowerCase)
        {
            String text=textField.getText();
            String lower=text.toLowerCase();
            textField.setText(lower);
        }
        if (source == upperCase)
        {
            String text=textField.getText();
            String caps=text.toUpperCase();
            textField.setText(caps);
        }
    }
}

Important when you do textField.getText() it returns a String, sometimes we want an int, to convert it you will say:

int theNumber=Integer.parseInt(            textField.getText());

Integer.parseInt(str) takes in a string and returns it as an int (if possible).

Layout

Where the components are placed is a little tricky in Java. See layouts here. Absolute positioning (pixel by pixel is here. It is beyond the scope of the class for us currently.

Create a new project called GUI and create classes for each of the following assignments. (do 3 of 5 in pairs)

1. Use the SwingExample above but rename the class HideGame and instead of toUpper and to lower, the buttons will say hide or show which will hide the word or show the word.
2. Create a gui called PSAccount with 3 textboxes and a button. The first two text boxes will be for first name and then last name. When they hit the submit button, the three textbox will then create a Portland Schools account (which is the first 5 of last name and then the first letter of first name).
3. Create a gui called Counting that will have a textfield and a button. The textfield will start at 0. Everytime they hit the button the number will go up by one.
4. Create a gui called Average with 2 textboxes and a button One textbox will be their grade and one will be their average (which you calculate). Each time they hit the button, it will update their average with that grade. so if they put in 50, and hit the button, average would be 50. If they then put in 100, hit button, average would be 75. If they then put in 60, and hit button, it would average to 70.
5. Create a gui called NextNum that will have a textarea and a button and each time the button is pressed another line is added to the textarea (myTextArea.append("sdfsdf\n"); //where \n is for new line). The line will say "This is line 1" then "This is line 2")
6. Create a gui called DrawCircle that will have a textfield and a button. The textfield will take in how large a circle you will draw and the button will be called draw and it will draw that circle. Advanced, instead of a textfield for size, use a slider. Also use a dropdown for color.
• to access graphics to draw you can say: Graphics g=getGraphics();
• now you can say g.drawLine(.... or anything to g

Some other gui objects if you want to try:

screen.add(new JSlider(JSlider.HORIZONTAL,1,10,1));  //look at bottom to listen to a slider
screen.add(new JTextArea(3,20)); //for a text area
screen.add(new JProgressBar(1,10)); //for a progress bar

//FOR A MENU:
JMenuBar menuBar = new JMenuBar();
menuBar.add(new JMenu("A Menu"));
menuBar.add(new JMenu("Two"));
menuBar.add(new JMenu("Three"));
setJMenuBar(menuBar);