Chapter 12: Graphical User Interfaces 1 ©2000, John Wiley & Sons, Inc. Horstmann/Java Essentials,...

©2000, John Wiley & Sons, Inc.Horstmann/Java Essentials, 2/e

1

Chapter 12: Graphical User Interfaces1

Chapter 12

Graphical User Interfaces

JAVA


2


Structure

• Predefined structure– Jbutton– Jpanel– Jframe– contentPane– Container


3


Figure 1A Program withFour Buttons

contentPane with border layout

Panel with flow layout


4


Layout Management

• JAVA Swing• Add buttons

– contentPane.add(upButton, “South”);

– contentPane.add(downbutton, “South”); //error• Jpanel buttonPanel = new Jpanel();

• buttonPanel.add(upButton);

• buttonPanel.add(downButton);

• buttonPanel.add(leftButton);

• buttonPanel.add(rigtButton);

• contentPane.add(buttonPanel, “South”);


5


Layout Management

• Border layout• Flow layout• Grid layout• Build up user interfaces by adding components

into containers.• The content pane is a container (Jpanel)• Content pane (default: border layout)• Panel (default: flow layout)


6


Layout Management

• Border layout: grows each component to fill all available space in its area.

• The flow layout leaves each component at its preferred size.

• The grid layout arranges components in a grid with a fixed number of rows and columns, resizing each of the component.


7


Border Layout Panel

• Jpanel panel = new Jpanel();

• panel.setLayout(new BorderLayout());


8


Figure 2Containers withSeparate LayoutManagers


9


Figure 3The Border Layout GrowsComponents


10


Grid Layout

• Jpanel numberPanel = new Jpanel();

• numberPanel.setLayout(new GridLayout(4,3));

• numberPanel.add(button7);




• …


11


Figure 4Grid Layout


12


Buttons

• When a button is clicked, it sends an action event.

• You need an action listener. • leftButton = new JButton(“Left”);

• leftButton = new JButton(new ImageIcon(“left.gif”));

• leftButton = new(“Left, new ImageIcon(“left.gif”));


13


Figure 5Buttons with Labels andIcons


14


Listener

• Individual listener• upButton =new Jbutton(“UP”);

• ActionListener listener = new UpListener();

• upButton.addActionListener(listener);

• Jbutton upButton; private class UpListener implements …

• Unified listener– actionPerformed method

– getSource method of the ActionEvent parameter


15


Program ButtonTest.java

import java.awt.Container;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.Rectangle;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JPanel;

public class ButtonTest{ public static void main(String[] args) { ButtonFrame frame = new ButtonFrame(); frame.setTitle("ButtonTest"); frame.show();


16


}}

class ButtonFrame extends JFrame{ public ButtonFrame() { final int DEFAULT_FRAME_WIDTH = 300; final int DEFAULT_FRAME_HEIGHT = 300; setSize(DEFAULT_FRAME_WIDTH,DEFAULT_FRAME_HEIGHT);

addWindowListener(new WindowCloser());

// construct components

panel = new RectanglePanel(); JPanel buttonPanel = new JPanel();

ActionListener listener = new DirectionListener();

upButton = new JButton("Up"); upButton.addActionListener(listener);


17


downButton = new JButton("Down");downButton.addActionListener(listener);

leftButton = new JButton("Left");leftButton.addActionListener(listener);

rightButton = new JButton("Right");rightButton.addActionListener(listener);

// add components to content pane

Container contentPane = getContentPane();contentPane.add(panel, "Center");

buttonPanel.add(upButton);buttonPanel.add(downButton);buttonPanel.add(leftButton);buttonPanel.add(rightButton);


18


contentPane.add(buttonPanel, "South");}

private RectanglePanel panel;private JButton upButton;private JButton downButton;private JButton leftButton;private JButton rightButton;

// inner class definition

private class DirectionListener implements ActionListener{ public void actionPerformed(ActionEvent event) { // find the button that was clicked

Object source = event.getSource();


19


if (source == upButton) panel.moveRectangle(0, -1); else if (source == downButton) panel.moveRectangle(0, 1); else if (source == leftButton) panel.moveRectangle(-1, 0); else if (source == rightButton) panel.moveRectangle(1, 0); } }

private class WindowCloser extends WindowAdapter { public void windowClosing(WindowEvent event) { System.exit(0); } }}


20


class RectanglePanel extends JPanel{ public RectanglePanel() { rect = new Rectangle(0, 0, RECT_WIDTH, RECT_HEIGHT);}

public void paintComponent(Graphics g){ super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; g2.draw(rect);}


21


/** Moves the rectangle and repaints it. The rectangle is moved by multiples of its full width or height. @param dx the number of width units @param dy the number of height units */ public void moveRectangle(int dx, int dy) { rect.translate(dx * RECT_WIDTH, dy * RECT_HEIGHT); repaint(); }

private Rectangle rect; private static final int RECT_WIDTH = 20; private static final int RECT_HEIGHT = 30;}


22


Common Errors of the Button

• Do not identify components by their label text.

• Forgetting to attach a listener.


23


Text Components

• JTextArea class• Both JTextField and JTextArea are

subclasses of the JTextComponent class.• Number of characters

– JTextFiled interestRateField = new JTextField(5);

• Rows and columns– JTextArea resultArea = new JTextArea(10, 40)


24


Text Components

• setEditalbe – JTextField result = new JTextField();– result.setEditable(false);

• setFont method


25


Figure 6A Frame with a Text Areaand a Text Field


26


Program TextTest.java

import java.awt.Container;import java.awt.GridLayout;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent;import java.util.StringTokenizer;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JPanel;import javax.swing.JTextArea;import javax.swing.JTextField;

public class TextTest{ public static void main(String[] args) { TextFrame frame = new TextFrame();


27


frame.setTitle("TextTest"); frame.show(); }}

class TextFrame extends JFrame{ public TextFrame() { final int DEFAULT_FRAME_WIDTH = 300; final int DEFAULT_FRAME_HEIGHT = 300; setSize(DEFAULT_FRAME_WIDTH, DEFAULT_FRAME_HEIGHT); addWindowListener(new WindowCloser());


inputArea = new JTextArea();

resultField = new JTextField(20);resultField.setEditable(false);


28


calcButton = new JButton("Calculate");calcButton.addActionListener(new ButtonListener());

// add components to content pane

Container contentPane = getContentPane();contentPane.add(inputArea, "Center");

// arrange the label and text field in a panel

JPanel resultPanel = new JPanel();resultPanel.add(new JLabel("Average:"));resultPanel.add(resultField);

// place the button in a panel

JPanel buttonPanel = new JPanel();buttonPanel.add(calcButton);

// stack up these two panels in another panel


29


JPanel southPanel = new JPanel(); southPanel.setLayout(new GridLayout(2, 1)); southPanel.add(resultPanel); southPanel.add(buttonPanel);

contentPane.add(southPanel, "South");}

/** Reads numbers from a string that contains a sequence of floating-point numbers separated by white space. @param input the string containing the numbers @return the numbers that were found in the string*/public static double[] getData(String input){ StringTokenizer tokenizer = new StringTokenizer(input); double[] data = new double[tokenizer.countTokens()]; for (int i = 0; i < data.length; i++) data[i] = Double.parseDouble(tokenizer.nextToken()); return data;


30


}

/** Computes the average of an array of floating-point numbers. @param data the numbers to average @return the average, or 0 if the array was empty*/

public static double average(double[] data){ if (data.length == 0) return 0; double sum = 0; for (int i = 0; i < data.length; i++) sum = sum + data[i]; return sum / data.length;}

private JTextArea inputArea;private JTextField resultField;private JButton calcButton;


31


private class ButtonListener implements ActionListener { public void actionPerformed(ActionEvent event) { // get user input from text area

double[] data = getData(inputArea.getText());

// compute average and display in result field

double avg = average(data); resultField.setText("” + avg); } }



32


Choices

• Radio Buttons (mutually exclusive)

• Check boxes (not mutually exclusive)

• Combo Boxes


33


Figure 7A Combo Box, RadioButtons, and CheckBoxes


34


Figure 8An Opened Combo Box


35


Program ChoiceTest.java

import java.awt.Container;import java.awt.Font;import java.awt.GridLayout;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent;import javax.swing.ButtonGroup;import javax.swing.JButton;import javax.swing.JCheckBox;import javax.swing.JComboBox;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JPanel;import javax.swing.JRadioButton;import javax.swing.JTextField;import javax.swing.border.EtchedBorder;import javax.swing.border.TitledBorder;


36


public class ChoiceTest{ public static void main(String[] args) { ChoiceFrame frame = new ChoiceFrame(); frame.setTitle("ChoiceTest"); frame.show(); }}

class ChoiceFrame extends JFrame{ public ChoiceFrame() { final int DEFAULT_FRAME_WIDTH = 300; final int DEFAULT_FRAME_HEIGHT = 300; setSize(DEFAULT_FRAME_WIDTH, DEFAULT_FRAME_HEIGHT);




37


sampleField = new JTextField ("Computing Concepts with Java Essentials");sampleField.setEditable(false);

ChoiceListener listener = new ChoiceListener();

facenameCombo = new JComboBox();facenameCombo.addItem("Serif");facenameCombo.addItem("SansSerif");facenameCombo.addItem("Monospaced");facenameCombo.setEditable(true);facenameCombo.addActionListener(listener);

italicCheckBox = new JCheckBox("Italic");italicCheckBox.addActionListener(listener);

boldCheckBox = new JCheckBox("Bold");boldCheckBox.addActionListener(listener);


38


smallButton = new JRadioButton("Small");smallButton.setSelected(true);smallButton.addActionListener(listener);

mediumButton = new JRadioButton("Medium");mediumButton.addActionListener(listener);

largeButton = new JRadioButton("Large");largeButton.addActionListener(listener);

// add radio buttons to button group

ButtonGroup sizeGroup = new ButtonGroup();sizeGroup.add(smallButton);sizeGroup.add(mediumButton);sizeGroup.add(largeButton);


39


// add components to panels

JPanel facenamePanel = new JPanel();facenamePanel.add(facenameCombo);

JPanel sizeGroupPanel = new JPanel();sizeGroupPanel.add(smallButton);sizeGroupPanel.add(mediumButton);sizeGroupPanel.add(largeButton);sizeGroupPanel.setBorder (new TitledBorder(new EtchedBorder(), "Size"));

JPanel styleGroupPanel = new JPanel();styleGroupPanel.add(italicCheckBox);styleGroupPanel.add(boldCheckBox);styleGroupPanel.setBorder (new TitledBorder(new EtchedBorder(), "Style"));

// line up component panels


40


JPanel southPanel = new JPanel(); southPanel.setLayout(new GridLayout(3, 1)); southPanel.add(facenamePanel); southPanel.add(sizeGroupPanel); southPanel.add(styleGroupPanel);

// add panels to content pane

Container contentPane = getContentPane(); contentPane.add(sampleField, "Center"); contentPane.add(southPanel, "South");

setSampleFont();}/** Gets user choice for font name, style, and size and sets the font of the text field.*/


41


public void setSampleFont(){ // get font name

String facename = (String)facenameCombo.getSelectedItem();

// get font style

int style = 0; if (italicCheckBox.isSelected()) style = style + Font.ITALIC; if (boldCheckBox.isSelected()) style = style + Font.BOLD;

// get font size

final int SMALL_SIZE = 12; final int MEDIUM_SIZE = 16; final int LARGE_SIZE = 24;


42


int size = 0; if (smallButton.isSelected()) size = SMALL_SIZE; else if (mediumButton.isSelected()) size = MEDIUM_SIZE; else if (largeButton.isSelected()) size = LARGE_SIZE;

// set font of text field

sampleField.setFont(new Font(facename, style, size)); sampleField.repaint();}


43


private JTextField sampleField; private JCheckBox italicCheckBox; private JCheckBox boldCheckBox; private JRadioButton smallButton; private JRadioButton mediumButton; private JRadioButton largeButton; private JComboBox facenameCombo;

private class ChoiceListener implements ActionListener { public void actionPerformed(ActionEvent event) { setSampleFont(); } }



44


Menus

• Add a listener to each menu item.


45


Figure 9Pulldown Menus


46


Program MenuTest.java

import java.awt.Container;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.Rectangle;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent;import java.util.Random;import javax.swing.JFrame;import javax.swing.JMenu;import javax.swing.JMenuBar;import javax.swing.JMenuItem;import javax.swing.JPanel;


47


public class MenuTest{ public static void main(String[] args) { MenuFrame frame = new MenuFrame(); frame.setTitle("MenuTest"); frame.show(); }}

class MenuFrame extends JFrame{ public MenuFrame() { final int DEFAULT_FRAME_WIDTH = 300; final int DEFAULT_FRAME_HEIGHT = 300; setSize(DEFAULT_FRAME_WIDTH, DEFAULT_FRAME_HEIGHT);


// add drawing panel to content pane


48


panel = new RectanglePanel();Container contentPane = getContentPane();contentPane.add(panel, "Center");

// construct menu

JMenuBar menuBar = new JMenuBar();setJMenuBar(menuBar);

JMenu fileMenu = new JMenu("File");menuBar.add(fileMenu);

MenuListener listener = new MenuListener();

newMenuItem = new JMenuItem("New");fileMenu.add(newMenuItem);newMenuItem.addActionListener(listener);


49


exitMenuItem = new JMenuItem("Exit");fileMenu.add(exitMenuItem);exitMenuItem.addActionListener(listener);

JMenu editMenu = new JMenu("Edit");menuBar.add(editMenu);

JMenuItem moveMenu = new JMenu("Move");editMenu.add(moveMenu);

upMenuItem = new JMenuItem("Up");moveMenu.add(upMenuItem);upMenuItem.addActionListener(listener);

downMenuItem = new JMenuItem("Down");moveMenu.add(downMenuItem);downMenuItem.addActionListener(listener);


50


leftMenuItem = new JMenuItem("Left"); moveMenu.add(leftMenuItem); leftMenuItem.addActionListener(listener);

rightMenuItem = new JMenuItem("Right"); moveMenu.add(rightMenuItem); rightMenuItem.addActionListener(listener);

randomizeMenuItem = new JMenuItem("Randomize"); editMenu.add(randomizeMenuItem); randomizeMenuItem.addActionListener(listener);}

private JMenuItem exitMenuItem;private JMenuItem newMenuItem;private JMenuItem upMenuItem;private JMenuItem downMenuItem;private JMenuItem leftMenuItem;private JMenuItem rightMenuItem;


51


private JMenuItem randomizeMenuItem;private RectanglePanel panel;

private class MenuListener implements ActionListener{ public void actionPerformed(ActionEvent event) { // find the menu that was selected

Object source = event.getSource();

if (source == exitMenuItem) System.exit(0); else if (source == newMenuItem) panel.reset(); else if (source == upMenuItem) panel.moveRectangle(0, -1); else if (source == downMenuItem) panel.moveRectangle(0, 1); else if (source == leftMenuItem) panel.moveRectangle(-1, 0);


52


else if (source == rightMenuItem) panel.moveRectangle(1, 0); else if (source == randomizeMenuItem) panel.randomize(); } }


class RectanglePanel extends JPanel{ public RectanglePanel() { rect = new Rectangle(0, 0, RECT_WIDTH, RECT_HEIGHT); }


53


public void paintComponent(Graphics g){ super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; g2.draw(rect);}

/** Resets the rectangle to the top left corner.*/public void reset(){ rect.setLocation(0, 0); repaint();}


54


/** Moves the rectangle to a random position.*/public void randomize(){ Random generator = new Random(); rect.setLocation(generator.nextInt(getWidth()), generator.nextInt(getHeight())); repaint();}


55


/** Moves the rectangle and repaints it. The rectangle is moved by multiples of its full width or height. @param dx the number of width units @param dy the number of height units */ public void moveRectangle(int dx, int dy) { rect.translate(dx * RECT_WIDTH, dy * RECT_HEIGHT); repaint(); }

private Rectangle rect; private static int RECT_WIDTH = 20; private static int RECT_HEIGHT = 30;}


56


Figure 10A Color Mixer


57


Program SliderTest.java

import java.awt.Color;import java.awt.Container;import java.awt.GridLayout;import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JPanel;import javax.swing.JSlider;import javax.swing.SwingConstants;import javax.swing.event.ChangeListener;import javax.swing.event.ChangeEvent;


58


public class SliderTest{ public static void main(String[] args) { SliderFrame frame = new SliderFrame(); frame.setTitle("SliderTest"); frame.show(); }}

class SliderFrame extends JFrame{ public SliderFrame() { final int DEFAULT_FRAME_WIDTH = 300; final int DEFAULT_FRAME_HEIGHT = 300; setSize(DEFAULT_FRAME_WIDTH, DEFAULT_FRAME_HEIGHT);



colorPanel = new JPanel();


59


ColorListener listener = new ColorListener();

redSlider = new JSlider(0, 100, 100);redSlider.addChangeListener(listener);

greenSlider = new JSlider(0, 100, 70);greenSlider.addChangeListener(listener);

blueSlider = new JSlider(0, 100, 70);blueSlider.addChangeListener(listener);

// fill content pane

JPanel southPanel = new JPanel();southPanel.setLayout(new GridLayout(3, 2));southPanel.add(new JLabel("Red", SwingConstants.RIGHT));


60


southPanel.add(redSlider); southPanel.add(new JLabel("Green", SwingConstants.RIGHT)); southPanel.add(greenSlider); southPanel.add(new JLabel("Blue", SwingConstants.RIGHT)); southPanel.add(blueSlider);

Container contentPane = getContentPane(); contentPane.add(colorPanel, "Center"); contentPane.add(southPanel, "South");

setSampleColor();}

/** Reads the slider values and sets the panel to the selected color.*/


61


public void setSampleColor(){ // read slider values

float red = 0.01F * redSlider.getValue(); float green = 0.01F * greenSlider.getValue(); float blue = 0.01F * blueSlider.getValue();

// set panel background to selected color

colorPanel.setBackground(new Color(red, green, blue)); colorPanel.repaint();}

private JPanel colorPanel;private JSlider redSlider;private JSlider greenSlider;private JSlider blueSlider;


62


private class ColorListener implements ChangeListener { public void stateChanged(ChangeEvent event) { setSampleColor(); } }



63


Homework

• P12.3

• Calculator with + - * / operations

• Use grid layout and text.

Chapter 12: Graphical User Interfaces 1 ©2000, John Wiley & Sons, Inc. Horstmann/Java Essentials,...

Documents

Transcript of Chapter 12: Graphical User Interfaces 1 ©2000, John Wiley & Sons, Inc. Horstmann/Java Essentials,...