11/17/09 - Graphical User Interfaces (GUIs) - Part I

22

11/17/09 - Graphical User Interfaces (GUIs) - Part I

			We're all used to using GUIs to interact with computers. Here's a familiar Web page from Firefox on the Mac:

			Up until now, the programs we've written have used the console command line. Now we see how to use a GUI to make our programs look more up to date.

			Creating a window (called a 'frame' in Java):

			A window with two buttons:

			A window with two buttons specifically positioned:

			A window with a button that responds to events:

			A window with two buttons that responds differently to different events:

			/** * DoubleButtonWindowWithEvents displays a plain window with two buttons. * This version allows specific placement of the buttons and listens * for button clicks and takes different actions depending on which button * is clicked. The program exits when the user clicks the close button. * * @author Chuck Iverson * @version 11/17/09 / import javax.swing.; import java.awt.; import java.awt.event.; public class DoubleButtonWindowWithEvents implements ActionListener { private JPanel panel; private JButton button1; private JButton button2; public static void main(String [] args) { DoubleButtonWindowWithEvents window = new DoubleButtonWindowWithEvents(); } public DoubleButtonWindowWithEvents() { JFrame frame = new JFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(400, 300); // (windowWidth, windowHeight) frame.setTitle("A Simple Frame with Buttons"); panel = new JPanel(); panel.setLayout(null); button1 = new JButton(); button1.setText("Click me!"); button1.setBounds(75,125,100,50); // (x, y, buttonWidth, buttonHeight) button1.addActionListener(this); panel.add(button1); button2 = new JButton(); button2.setText("No, click me!"); button2.setBounds(225,125,100,50); // (x, y, buttonWidth, buttonHeight) button2.addActionListener(this); panel.add(button2); frame.add(panel); frame.setVisible(true); } public void actionPerformed(ActionEvent e) { if (e.getActionCommand().equals("Click me!")) { panel.setBackground(Color.red); button1.setEnabled(false); button2.setEnabled(true); } else { panel.setBackground(Color.blue); button2.setEnabled(false); button1.setEnabled(true); } } }

			A window with labels, text fields and a button that responds to events:

			/** * LabelButtonText displays a window with two labels, a button and two text fields. * This version allows specific placement of the buttons, labels and text fields * and listens for button clicks and takes action when the button is clicked. * The program exits when the user clicks the close button. * * @author Chuck Iverson * @version 11/17/09 / import javax.swing.; import java.awt.; import java.awt.event.; public class LabelButtonText implements ActionListener { private JButton btnAction; private JTextField txtInput; private JTextField txtOutput; public static void main(String [] args) { LabelButtonText window = new LabelButtonText(); } public LabelButtonText() { JFrame frame = new JFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(400, 250); // (windowWidth, windowHeight) frame.setTitle("A Simple Frame with Labels, Textfields and a Button"); frame.setLayout(null); JLabel lblInput = new JLabel("Input text:",SwingConstants.RIGHT); lblInput.setBounds(25,30,100,40); // (x, y, buttonWidth, buttonHeight) frame.add(lblInput); txtInput = new JTextField(); txtInput.setBounds(140,30,200,40); // (x, y, buttonWidth, buttonHeight) frame.add(txtInput); JLabel lblOutput = new JLabel("Output text:",SwingConstants.RIGHT); lblOutput.setBounds(25,90,100,40); // (x, y, buttonWidth, buttonHeight) frame.add(lblOutput); txtOutput = new JTextField(); txtOutput.setBounds(140,90,200,40); // (x, y, buttonWidth, buttonHeight) txtOutput.setForeground(Color.red); txtOutput.setEditable(false); // read-only frame.add(txtOutput); btnAction = new JButton(); btnAction.setText("Copy Text"); btnAction.setBounds(100,150,200,40); // (x, y, buttonWidth, buttonHeight) btnAction.addActionListener(this); frame.add(btnAction); frame.setVisible(true); } public void actionPerformed(ActionEvent e) { if (e.getActionCommand().equals("Copy Text")) { String s = txtInput.getText(); txtOutput.setText(s.toUpperCase()); } } }

			A start for a simple calculator:

			Code for GUI:

			/** * SimpleCalc displays a plain window with three labels, * 3 text fields and a single button. The program * exits when the user clicks the close button. * Class contains an embedded main. * * @author Chuck Iverson * @version 7/13/09 / import javax.swing.; import java.awt.event.; import java.awt.; public class SimpleCalc implements SwingConstants, ActionListener { public static final int WINDOW_WIDTH = 500; // set window dimensions public static final int WINDOW_HEIGHT = 250; private JFrame frame; private JTextField txtNum1; // text fields for input and output private JTextField txtNum2; private JTextField txtResult; SimpleCalcEngine calc = new SimpleCalcEngine(); // instantiate a SimpleCalcEngine public static void main(String[] args) { // embedded main SimpleCalc calc = new SimpleCalc(); } public SimpleCalc() { // constructor frame = new JFrame("A Simple Calculator"); frame.setSize(WINDOW_WIDTH, WINDOW_HEIGHT); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // set close operation buildGUI(); // add components to window frame.setVisible(true); // make window visible } public void buildGUI() { final int X = 40; final int Y = 20; final int ROW_HEIGHT = 40; final int WIDTH = 170; final int HEIGHT = 30; final int BTN_WIDTH = 100; final int BTN_HEIGHT = 60; final int GAP = 20; final Font font = new Font("Serif",Font.BOLD+Font.ITALIC,24); frame.setLayout(null); JLabel lblNum1 = new JLabel("First number:",RIGHT); // labels lblNum1.setFont(font); lblNum1.setBounds(X,Y,WIDTH,HEIGHT); // set x,y, width, height JLabel lblNum2 = new JLabel("Second number:",RIGHT); lblNum2.setFont(font); lblNum2.setBounds(X,Y+ROW_HEIGHT,WIDTH,HEIGHT); JLabel lblResult = new JLabel("Result:",RIGHT); lblResult.setFont(font); lblResult.setBounds(X,Y+2ROW_HEIGHT,WIDTH,HEIGHT); txtNum1 = new JTextField(); // text fields txtNum1.setFont(font); txtNum1.setForeground(Color.red); txtNum1.setBounds(X+WIDTH+GAP,Y,WIDTH,HEIGHT); txtNum1.setToolTipText("Enter first number to add."); txtNum2 = new JTextField(); txtNum2.setFont(font); txtNum2.setForeground(Color.red); txtNum2.setBounds(X+WIDTH+GAP,Y+ROW_HEIGHT,WIDTH,HEIGHT); txtNum2.setToolTipText("Enter second number to add."); txtResult = new JTextField(); txtResult.setFont(font); txtResult.setForeground(Color.red); txtResult.setBounds(X+WIDTH+GAP,Y+2ROW_HEIGHT,WIDTH,HEIGHT); txtResult.setEditable(false); // make read-only JButton btnAdd = new JButton("Add"); // button to add 2 numbers btnAdd.setFont(font); btnAdd.setBounds(WINDOW_WIDTH/2-2BTN_WIDTH-3GAP/2,Y+3*ROW_HEIGHT,BTN_WIDTH,BTN_HEIGHT); btnAdd.setToolTipText("Press button to add two numbers."); btnAdd.addActionListener(this); frame.add(lblNum1); // add components to container frame.add(txtNum1); frame.add(lblNum2); frame.add(txtNum2); frame.add(lblResult); frame.add(txtResult); frame.add(btnAdd); } public void actionPerformed(ActionEvent event) { if (event.getActionCommand().equals("Add")) { String num1 = txtNum1.getText(); String num2 = txtNum2.getText(); String result = calc.add(num1,num2); txtResult.setText(result); } } }

			Code for engine:

			Homework