Chapter 12
Download
1 / 69

Chapter 12 - PowerPoint PPT Presentation


  • 239 Views
  • Updated 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 l.jpg
Chapter 12

Graphical User Interfaces


Slide2 l.jpg

Figure 1

A Program with

Four Buttons


Use panels to organize buttons l.jpg
Use Panels to Organize Buttons

  • JPanel buttonPanel = new JPanel();

  • buttonPanel.add(upButton);buttonPanel.add(downButton);. . .

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


Slide4 l.jpg

Figure 2

Containers with

Separate Layout

Managers


Layout managers l.jpg
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 l.jpg

Figure 3

The Border Layout Grows

Components


Flowlayout doesn t grow content l.jpg
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 l.jpg

Figure 4

Grid Layout


Grid layout l.jpg
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 l.jpg

Figure 5

Buttons with Labels and

Icons


Buttons l.jpg
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 l.jpg

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 l.jpg

}

}

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

/**

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 l.jpg

Figure 6

A Frame with a Text Area

and a Text Field


Text components l.jpg
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 l.jpg
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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

}

/**

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 l.jpg

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 l.jpg

Figure 7

A Combo Box, Radio

Buttons, and Check

Boxes


Radio buttons l.jpg
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 l.jpg
Check Boxes

  • Similar to radio button, not mutually exclusiveJCheckBox it = new JCheckBox("Italic");

  • Test if selectedif (it.isSelected()) . . .


Borders l.jpg
Borders

  • Use border to group related components

  • Add border to panel holding components

  • panel.setBorder(new TitledBorder(new EtchedBorder(), "Title"));


Slide32 l.jpg

Figure 8

An Opened Combo Box


Combo boxes l.jpg
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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

// 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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Figure 9

Pulldown Menus


Menus l.jpg
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 l.jpg
Menu items

  • Add menu items to the menuJMenuItem fileNew = new JMenuItem("New");

  • Add action listener to the menu itemActionListener l = ...;fileNew.addActionListener(l);


Slide46 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

/**

Moves the rectangle to a random position.

*/

public void randomize()

{ Random generator = new Random();

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

generator.nextInt(getHeight()));

repaint();

}


Slide55 l.jpg

/**

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 l.jpg

Figure 10

A Color Mixer


Slide57 l.jpg

Figure 11

A Demonstration Application from

the Java Development Kit


Exploring the documentation l.jpg
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 l.jpg

Figure 12

A Mysterious Entry in the JSlider

Documentation


How to construct a slider l.jpg
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 l.jpg
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 l.jpg
How to get slider setting

  • Look at all methods that start with “get”:int getValue()Returns the slider's value


Slide63 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Figure 13

Visual Programming Environment


ad