chapter 12
Download
Skip this Video
Download Presentation
Chapter 12

Loading in 2 Seconds...

play fullscreen
1 / 69

Chapter 12 - PowerPoint PPT Presentation


  • 239 Views
  • Uploaded on

Chapter 12. Graphical User Interfaces. Figure 1 A Program with Four Buttons. Use Panels to Organize Buttons. JPanel buttonPanel = new JPanel(); buttonPanel.add(upButton); buttonPanel.add(downButton); . . . contentPane.add(buttonPanel, "South");. Figure 2 Containers with

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Chapter 12' - Roberta


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
chapter 12
Chapter 12

Graphical User Interfaces

slide2

Figure 1

A Program with

Four Buttons

use panels to organize buttons
Use Panels to Organize Buttons
  • JPanel buttonPanel = new JPanel();
  • buttonPanel.add(upButton);buttonPanel.add(downButton);. . .
  • contentPane.add(buttonPanel, "South");
slide4

Figure 2

Containers with

Separate Layout

Managers

layout managers
Layout Managers
  • BorderLayout (center, south, north, east, west)
  • FlowLayout (left-to-right)
  • GridLayout (rectangular grid)
  • Default: Content pane has border layout
  • Default: Panels have flow layout
  • Change default: panel.setLayout(new GridLayout(4, 3));
slide6

Figure 3

The Border Layout Grows

Components

flowlayout doesn t grow content
FlowLayout doesn\'t grow content
  • The border layout and grid layout grow buttons etc. to fit the entire area of the border or grid
  • Remedy: put button(s) inside panel with flow layout
slide8

Figure 4

Grid Layout

grid layout
Grid Layout
  • Add buttons left-to-right/top-to-bottompanel.add(button7);panel.add(button8);panel.add(button9);panel.add(button4);. . .panel.add(buttonCE);
slide10

Figure 5

Buttons with Labels and

Icons

buttons
Buttons
  • Specify label and optional icon in constructorJButton leftButton = new JButton("left");leftButton = new JButton("left", new ImageIcon("left.gif"));
  • Add action listener to handle “button click” event
slide12

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();

slide13

}

}

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);

slide14

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);

slide15

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();

slide16

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);

}

}

}

slide17

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);

}

slide18

/**

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;

}

slide19

Figure 6

A Frame with a Text Area

and a Text Field

text components
Text Components
  • Specify number of rows/characters in constructor:tf = new TextField(5);ta = new TextArea(10, 40);
  • Turn edit mode off if you want to display textta.setEditable(false);
  • Set text programmaticallytf.setText("Hello");
labels
Labels
  • Use a label to tag a text fieldJLabel label = new JLabel("Name", SwingConstants.RIGHT);
  • Add label to panel: panel.add(label);panel.add(nameField);
slide22

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();

slide23

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());

// construct components

inputArea = new JTextArea();

resultField = new JTextField(20);

resultField.setEditable(false);

slide24

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

slide25

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;

slide26

}

/**

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;

slide27

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);

}

}

private class WindowCloser extends WindowAdapter

{ public void windowClosing(WindowEvent event)

{ System.exit(0);

}

}

}

slide28

Figure 7

A Combo Box, Radio

Buttons, and Check

Boxes

radio buttons
Radio Buttons
  • Radio buttons are mutually exclusive
  • Button group turns one button off when the next one is turned onsButton = new JRadioButton("Small");mButton = new JRadioButton("Medium"); lButton = new JRadioButton("Large");buttonGroup.add(sbutton);buttonGroup.add(mbutton);buttonGroup.add(lbutton)
  • Still need to add to panel
check boxes
Check Boxes
  • Similar to radio button, not mutually exclusiveJCheckBox it = new JCheckBox("Italic");
  • Test if selectedif (it.isSelected()) . . .
borders
Borders
  • Use border to group related components
  • Add border to panel holding components
  • panel.setBorder(new TitledBorder(new EtchedBorder(), "Title"));
slide32

Figure 8

An Opened Combo Box

combo boxes
Combo boxes
  • Use less space than radio buttons
  • Users can type other values
  • “Combo” between list selection and text field
  • JComboBox faceName = new JComboBox();faceName.addItem("Serif");faceName.addItem("SansSerif");. . .
  • Get user selectionsel= (String)faceName.getSelectedItem();
slide34

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;

slide35

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);

addWindowListener(new WindowCloser());

// construct components

slide36

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);

slide37

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);

slide38

// 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

slide39

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.

*/

slide40

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;

slide41

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();

}

slide42

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();

}

}

private class WindowCloser extends WindowAdapter

{ public void windowClosing(WindowEvent event)

{ System.exit(0);

}

}

}

slide43

Figure 9

Pulldown Menus

menus
Menus
  • Add menu bar to frameJMenuBar bar = new JMenuBar();frame.setJMenuBar(bar);
  • Add menus to the menu barJMenu fileMenu = new JMenu("File");bar.add(fileMenu);
menu items
Menu items
  • Add menu items to the menuJMenuItem fileNew = new JMenuItem("New");
  • Add action listener to the menu itemActionListener l = ...;fileNew.addActionListener(l);
slide46

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;

slide47

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);

addWindowListener(new WindowCloser());

// add drawing panel to content pane

slide48

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);

slide49

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);

slide50

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;

slide51

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);

slide52

else if (source == rightMenuItem)

panel.moveRectangle(1, 0);

else if (source == randomizeMenuItem)

panel.randomize();

}

}

private class WindowCloser extends WindowAdapter

{ public void windowClosing(WindowEvent event)

{ System.exit(0);

}

}

}

class RectanglePanel extends JPanel

{ public RectanglePanel()

{ rect = new Rectangle(0, 0, RECT_WIDTH, RECT_HEIGHT);

}

slide53

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();

}

slide54

/**

Moves the rectangle to a random position.

*/

public void randomize()

{ Random generator = new Random();

rect.setLocation(generator.nextInt(getWidth()),

generator.nextInt(getHeight()));

repaint();

}

slide55

/**

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;

}

slide56

Figure 10

A Color Mixer

slide57

Figure 11

A Demonstration Application from

the Java Development Kit

exploring the documentation
Exploring the Documentation
  • Don\'t try to understand all methods
  • Focus on what you need to do your job
    • How do I construct a slider?
    • How can I get notified when the user has moved it?
    • How can I tell what the user has set it to?
  • When you complete the basics, look again
    • How about those “tick marks”?
slide59

Figure 12

A Mysterious Entry in the JSlider

Documentation

how to construct a slider
How to construct a slider
  • JSlider()Has range (0,100)
  • JSlider(int min, int max, int value)Can specify range and initial value
  • JSlider(BoundedRangeModel m)appears to be some internal mechanism
how to get notifications
How to get notifications
  • Look for “addXxxListener”:void addChangeListener(ChangeListener l)
  • What is a change listener? It has a single methodvoid stateChanged(ChangeEvent e)
  • Plan: Add a change listener, read slider state and update color in that method
how to get slider setting
How to get slider setting
  • Look at all methods that start with “get”:int getValue()Returns the slider\'s value
slide63

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;

slide64

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);

addWindowListener(new WindowCloser());

// construct components

colorPanel = new JPanel();

slide65

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));

slide66

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.

*/

slide67

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;

slide68

private class ColorListener implements ChangeListener

{ public void stateChanged(ChangeEvent event)

{ setSampleColor();

}

}

private class WindowCloser extends WindowAdapter

{ public void windowClosing(WindowEvent event)

{ System.exit(0);

}

}

}

slide69

Figure 13

Visual Programming Environment

ad