Presentation is loading. Please wait.

Presentation is loading. Please wait.

Page w16.1 – Spring 2010Steffen Vissing Andersen SDJ I1 subjects, Spring 2010 Agenda – Week 16, 2010 GUI.

Similar presentations


Presentation on theme: "Page w16.1 – Spring 2010Steffen Vissing Andersen SDJ I1 subjects, Spring 2010 Agenda – Week 16, 2010 GUI."— Presentation transcript:

1 Page w16.1 – Spring 2010Steffen Vissing Andersen SDJ I1 subjects, Spring 2010 Agenda – Week 16, 2010 GUI

2 Page w16.2 – Spring 2010Steffen Vissing Andersen GUI - elements Which GUI elements can you recognize here?

3 Page w16.3 – Spring 2010Steffen Vissing Andersen Components used JFrame JLabel JTextField JButton TitleBorder JCheckBoxJRadioButtonButtonGroup

4 Page w16.4 – Spring 2010Steffen Vissing Andersen What is a GUI? Has at least one window A Frame The window has at least one container The content pane All visible components are added to a container A container is an invisible component that holds other components and containers

5 Page w16.5 – Spring 2010Steffen Vissing Andersen Top Level Containers Top-level containers To appear on a screen, every GUI component must be part of a containment hierarchy. A containment hierarchy is a tree of components that has a top-level container as its root Can hold a menu bar Types of Top Level Contaniers JFrame Normal window with Caption bar JDialog JApplet

6 Page w16.6 – Spring 2010Steffen Vissing Andersen JFrame – the Window The topmost GUI component A standalone application with a Swing-based GUI has at least one containment hierarchy with a JFrame as its root Components are added to the Frames content pane getContentPane() returns the default content pane of the Frame setContentPane(contentPane) adds another kind of Content Pane

7 Page w16.7 – Spring 2010Steffen Vissing Andersen An Example: A simple window (compostition) import javax.swing.JFrame; public class ASimpleWindow1 { private JFrame win; public ASimpleWindow1() { win = new JFrame("A Simple window"); win.setSize(400, 300); win.setVisible(true); // Specify what happens when the window are closed // Exit the application win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }

8 Page w16.8 – Spring 2010Steffen Vissing Andersen An Example: A simple window (inheritance) import javax.swing.JFrame; public class ASimpleWindow2 extends JFrame { public ASimpleWindow2() { super("A Simple window 2"); setSize(300, 200); setVisible(true); // Specify what happens when the window are closed setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }

9 Page w16.9 – Spring 2010Steffen Vissing Andersen Content Pane Content pane typical a JPanel Here the visual components are placed Can have its own layout Can be added as a component to other containers (JPanel’s etc.) JPanel mainPanel = new JPanel(); JPanel subPanel1 = new JPanel(); JPanel subPanel2 = new JPanel(); mainPanel.add(subPanel1); mainPanel.add(subPanel2); add(mainPanel); mainPanel subPanel1 subPanel2

10 Page w16.10 – Spring 2010Steffen Vissing Andersen Panels used JPanel w. BoarderLayout JPanel w. BoxLayout JPanel w. GridLayout JPanel’s w. FlowLayout JPanel w. FlowLayout

11 Page w16.11 – Spring 2010Steffen Vissing Andersen User event How does the program reacts on user event?

12 Page w16.12 – Spring 2010Steffen Vissing Andersen How to react on user action A user can manipulate with all the GUI components every time the GUI is visible! How to implement a program that can handle this? We need to look at the way a program is executed

13 Page w16.13 – Spring 2010Steffen Vissing Andersen Normal program flow method 2 method 1 method 3

14 Page w16.14 – Spring 2010Steffen Vissing Andersen Event driven programming Your applications have until now been executed by following the program structure you have implemented A GUI is an event driven program User event are the trigger for executing small parts of your application Event and Action listeners These listeners are added to the individual GUI components

15 Page w16.15 – Spring 2010Steffen Vissing Andersen Event driven program flow

16 Page w16.16 – Spring 2010Steffen Vissing Andersen Components ready to use Take a look at this link: http://java.sun.com/docs/books/tutorial/ui/features/components.html

17 Page w16.17 – Spring 2010Steffen Vissing Andersen Layout Managers Used to help us with the layout of components in a container We will take a look at a few of them here

18 Page w16.18 – Spring 2010Steffen Vissing Andersen FlowLayout The components are put in a row until the right border and then continue on the next row This is the default layout of JPanel

19 Page w16.19 – Spring 2010Steffen Vissing Andersen GridLayout The components are put in rows and columns You decide the number of rows and columns

20 Page w16.20 – Spring 2010Steffen Vissing Andersen BorderLayoyt Components are put in five different areas North East South Center West

21 Page w16.21 – Spring 2010Steffen Vissing Andersen Layout’s used BoarderLayout

22 Page w16.22 – Spring 2010Steffen Vissing Andersen Layout’s used JPanel w. FlowLayout JPanel w. BorderLayout

23 Page w16.23 – Spring 2010Steffen Vissing Andersen Layout’s used JPanel w. FlowLayout

24 Page w16.24 – Spring 2010Steffen Vissing Andersen Layout’s used JPanel w. BoxLayout

25 Page w16.25 – Spring 2010Steffen Vissing Andersen Layout’s used JPanel w. GridLayout

26 Page w16.26 – Spring 2010Steffen Vissing Andersen Layout’s used JPanel w. FlowLayout

27 Page w16.27 – Spring 2010Steffen Vissing Andersen Layout’s used A Frame (or panel) with Borderlayout -A label in north -A Flowlayout panel in center (with 3 panels) -A Boxlayout panel (with labels and checkboxes) -A Gridlayout panel (with radiobuttons) -A Gridlayout panel (with 3 panels) -3 Flowlayout panels (each with a label and a text field) -A Borderlayout panel in south (with a panel in east) -A Flowlayout panel (with 2 buttons)

28 Page w16.28 – Spring 2010Steffen Vissing Andersen Compress your window – pack() Before pack() After pack()

29 Page w16.29 – Spring 2010Steffen Vissing Andersen Temperature conversion – GUI example (1/7) import java.awt.*; import java.awt.event.*; import javax.swing.*; public class FrameTemperature extends JFrame { private JLabel labelTemp; private JTextField textFieldTemp; private JButton buttonToCelcius; private JButton buttonToFahrenheit; public FrameTemperature() { super("Temperature conversion"); createComponents(); initializeComponents(); registerEventHandlers(); addComponentsToFrame(); }

30 Page w16.30 – Spring 2010Steffen Vissing Andersen Temperature conversion – GUI example (2/7) private void createComponents() { textFieldTemp = new JTextField(6); labelTemp = new JLabel("Temperature:"); buttonToCelcius = new JButton("To Celcius"); buttonToFahrenheit = new JButton("To Fahrenheit"); } private void initializeComponents() { setSize(300, 120); // set frame size setVisible(true); setLocationRelativeTo(null); // center of the screen setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); textFieldTemp.setText(""); }

31 Page w16.31 – Spring 2010Steffen Vissing Andersen Temperature conversion – GUI example (3/7) private void registerEventHandlers() { ButtonHandler handler = new ButtonHandler(); buttonToCelcius.addActionListener(handler); buttonToFahrenheit.addActionListener(handler); } Note: Event Handler class ButtonHandler is a private inner class

32 Page w16.32 – Spring 2010Steffen Vissing Andersen Temperature conversion – GUI example (4/7) private void addComponentsToFrame() { JPanel panelDegree = new JPanel(new BorderLayout()); panelDegree.add(labelTemperature, BorderLayout.NORTH); panelDegree.add(textFieldTempe, BorderLayout.SOUTH); JPanel panelButtons = new JPanel(new BorderLayout(0, 5)); panelButtons.add(buttonToCelcius, BorderLayout.NORTH); panelButtons.add(buttonToFahrenheit, BorderLayout.SOUTH); JPanel contentPane = new JPanel(new FlowLayout()); contentPane.add(panelDegree); contentPane.add(panelButtons); setLayout(new FlowLayout()); setContentPane(contentPane); }

33 Page w16.33 – Spring 2010Steffen Vissing Andersen Temperature conversion – GUI example (5/7) private class ButtonHandler implements ActionListener { public void actionPerformed(ActionEvent event) { String msg = textFieldTemp.getText(); double temperature = Double.parseDouble(msg); Temperature temp = new Temperature(); if (event.getSource() == buttonToCelcius) { double t = temp.fahrenheitToCelcius(temperature); msg = String.format("%s Fah = %.2f Celcius", msg, t); } else if (event.getSource() == buttonToFahrenheit) { double t = temp.celciusToFahrenheit(temperature); msg = String.format("%s Celcius = %.2f Fah", msg, t); } JOptionPane.showMessageDialog(null, msg); } We need a class Temperature

34 Page w16.34 – Spring 2010Steffen Vissing Andersen Temperature conversion – GUI example (6/7) public static void main(String[] args) { FrameTemperature frame = new FrameTemperature(); } } // End of class FrameTemperature

35 Page w16.35 – Spring 2010Steffen Vissing Andersen Temperature conversion – GUI example (7/7) // The model class public class Temperature { public double fahrenheitToCelcius(double fahrenheit) { return 5.0/12.0 * (fahrenheit - 32); } public double celciusToFahrenheit(double celcius) { return celcius * 9.0/5.0 + 32; }

36 Page w16.36 – Spring 2010Steffen Vissing Andersen Programming Exercises Create the following GUI – without functionality http://it-engineering.dk/Course/A09/SDJI1A/Exercises/ExercisesSession29.pdf

37 Page w16.37 – Spring 2010Steffen Vissing Andersen GUI step by step 1.Sketch your GUI on paper 2.Divide the GUI into small separate functionalities 3.Implement it part by part in separate classes that inherits (extends) JPanel With own layout (LayoutManager) With own getters for data 4.Implement the Window by inheriting from JFrame With own layout (LayoutManager) 5.Add the panels to the window 6.Add buttons to the window 7.Implement action listeners in inner classes that implements the ActionListener interface

38 Page w16.38 – Spring 2010Steffen Vissing Andersen Sketch your GUI

39 Page w16.39 – Spring 2010Steffen Vissing Andersen Setup Event Handling for a GUI Component Several coding steps are required for an application to respond to events Create a class for the event handler Implement an appropriate event-listener interface Register the event handler Event handler Class Public class declared in a separate file Class declared in the GUI class file (default/no access modifier) Private inner class – declared inside the GUI Class declaration Anonymous inner class – declared inside the argument list in calling the addActionListener method

40 Page w16.40 – Spring 2010Steffen Vissing Andersen Event handler Class The Event handler class implements ActionListener i.e. implements a method with the signature: public void actionPerformed(ActionEvent event) Event handler class can be formed in several ways: 1.Class declared outside the GUI class declaration Public class declared in a separate file Class declared in the GUI class file (default/no access modifier) 2.Private inner class – declared inside the GUI class declaration 3.Anonymous inner class – declared inside the argument list in calling the addActionListener method for a component 4.The GUI class itself if this class implements ActionListener and implements the method actionPerformed

41 Page w16.41 – Spring 2010Steffen Vissing Andersen Event handler class declared outside the GUI class class ButtonHandler implements ActionListener { private GUIClass frame; public ButtonHandler(GUIClass frame) { this.frame = frame; } public void actionPerformed(ActionEvent event) { if (buttonText.toLowerCase().equals("clear")) { frame.initializeComponents(); } Class should be public, if declared in a separate file

42 Page w16.42 – Spring 2010Steffen Vissing Andersen Event handler class as a private inner class public class GUIClass extends JFrame { //... private class ButtonHandler implements ActionListener { public void actionPerformed(ActionEvent event) { if (event.getSource() == buttonClear) { initializeComponents(); } } // end inner class } // end of GUI class

43 Page w16.43 – Spring 2010Steffen Vissing Andersen Event handler class as the GUI class itself public class GUIClass extends JFrame implements ActionListener { //... public void actionPerformed(ActionEvent event) { if (event.getSource() == buttonClear) { initializeComponents(); } } // end of GUI class

44 Page w16.44 – Spring 2010Steffen Vissing Andersen addActionListener – using Event handler class Class declared outside the GUI class declaration ButtonHandler handler = new ButtonHandler(this); // or other arguments button1.addActionListener(handler); Private inner class ButtonHandler handler = new ButtonHandler(); button2.addActionListener(handler); Anonymous inner class button3.addActionListener( new ActionListener(){public void actionPerformed( ActionEvent event){initializeComponents();}}); The GUI class itself button4.addActionListener(this);

45 Page w16.45 – Spring 2010Steffen Vissing Andersen Some Swing Components

46 Page w16.46 – Spring 2010Steffen Vissing Andersen Images – an Example

47 Page w16.47 – Spring 2010Steffen Vissing Andersen Images – an Example ImagePanel ButtonPanel

48 Page w16.48 – Spring 2010Steffen Vissing Andersen ButtonPanel (1/4) import java.awt.*; import java.awt.event.ActionListener; import javax.swing.*; public class ButtonPanel extends JPanel { private JButton[] button; public ButtonPanel(String[] buttonText) { button = new JButton[buttonText.length]; for (int i = 0; i < button.length; i++) button[i] = new JButton(buttonText[i]); addComponentsToPanel(); }

49 Page w16.49 – Spring 2010Steffen Vissing Andersen ButtonPanel (2/4) private void addComponentsToPanel() { if (button.length == 3) { setLayout(new BorderLayout(0, 5)); add(button[0], BorderLayout.NORTH); add(button[1], BorderLayout.CENTER); add(button[2], BorderLayout.SOUTH); } else { setLayout(new BoxLayout(this, BoxLayout.Y_AXIS)); for (int i = 0; i < button.length; i++) { add(button[i]); if (i < button.length - 1) add(Box.createRigidArea(new Dimension(0, 5))); }

50 Page w16.50 – Spring 2010Steffen Vissing Andersen ButtonPanel (3/4) public JButton getButton(String text) { for (int i = 0; i < button.length; i++) if (button[i].getText().equals(text)) return button[i]; return new JButton("No such button"); }

51 Page w16.51 – Spring 2010Steffen Vissing Andersen ButtonPanel (4/4) public void addActionListenerToOneButton(String buttonText, ActionListener listener) { JButton oneButton = getButton(buttonText); oneButton.addActionListener(listener); } public void addActionListenerToAllButtons( ActionListener listener) { if (listener == null) return; for (int i = 0; i < button.length; i++) if (button[i] != null) button[i].addActionListener(listener); } } // End of class ButtonPanel

52 Page w16.52 – Spring 2010Steffen Vissing Andersen ImagePanel (1/2) import java.awt.event.MouseListener; import javax.swing.*; public class ImagePanel extends JPanel { private ImageIcon imageIcon; public ImagePanel(String imagePath) { imageIcon = new ImageIcon(imagePath); addComponentsToPanel(); } public ImagePanel(String imagePath, MouseListener listener) { this(imagePath); registerListener(listener); }

53 Page w16.53 – Spring 2010Steffen Vissing Andersen ImagePanel (2/2) private void addComponentsToPanel() { JLabel imageLabel = new JLabel(imageIcon); add(imageLabel); } private void registerListener(MouseListener listener) { if (listener == null) return; addMouseListener(listener); } } // End of class ImagePanel

54 Page w16.54 – Spring 2010Steffen Vissing Andersen Class ImageGUI (1/6) import java.awt.event.*; import javax.swing.*; public class ImageGUI extends JFrame { private JPanel contentPane; private ImagePanel imagePanel1; private ImagePanel imagePanel2; private ButtonPanel buttonPanel; public ImageGUI() { super("Images"); createComponents(); registerEventHandlers(); addComponentsToFrame(); initialize(); }

55 Page w16.55 – Spring 2010Steffen Vissing Andersen Class ImageGUI (2/6) private void createComponents() { imagePanel1 = new ImagePanel(".\\bob.jpg"); imagePanel2 = new ImagePanel(".\\wendy.jpg"); String buttonStrings[] = {"OK", "Cancel", "Help"}; buttonPanel = new ButtonPanel(buttonStrings); contentPane = new JPanel(); } private void registerEventHandlers() { imagePanel1.addMouseListener(new MouseHandler(“Bob”)); imagePanel2.addMouseListener(new MouseHandler(“Wendy”)); ButtonHandler handler = new ButtonHandler(); buttonPanel.addActionListenerToAllButtons(handler); }

56 Page w16.56 – Spring 2010Steffen Vissing Andersen Class ImageGUI (3/6) private void addComponentsToFrame() { contentPane.add(imagePanel1); contentPane.add(imagePanel2); contentPane.add(buttonPanel); setContentPane(contentPane); } private void initialize() { setLocation(100, 200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); pack(); }

57 Page w16.57 – Spring 2010Steffen Vissing Andersen Class ImageGUI (4/6) private class ButtonHandler implements ActionListener { public void actionPerformed(ActionEvent event) { if (event.getSource() == buttonPanel.getButton(0)) { int q = JOptionPane.showConfirmDialog(null, "Quit?"); if (q == 0) System.exit(0); } else if (event.getSource() == buttonPanel.getButton(1)) { System.exit(0); } else if (event.getSource() == buttonPanel.getButton(2)) { JOptionPane.showMessageDialog(null, "Click on image"); }

58 Page w16.58 – Spring 2010Steffen Vissing Andersen Class ImageGUI (5/6) private class MouseHandler extends MouseAdapter { private String title; public MouseHandler(String title) { this.title = title; } public void mouseClicked(MouseEvent e) { JOptionPane.showMessageDialog(null, title); }

59 Page w16.59 – Spring 2010Steffen Vissing Andersen Class ImageGUI (6/6) public static void main(String[] args) { ImageGUI frame = new ImageGUI(); } } // end of class ImageGUI

60 Page w16.60 – Spring 2010Steffen Vissing Andersen Class MenuFrame – a menu Example (1/7) import java.awt.*; import java.awt.event.*; import java.util.ArrayList; import javax.swing.*; public class MenuFrame extends JFrame { private JLabel label1; private JPanel mainPanel; private JMenuBar menuBar; private JMenu[] menu; private ArrayList menuItem; private Dimension size;

61 Page w16.61 – Spring 2010Steffen Vissing Andersen Class MenuFrame – a menu Example (2/7) public MenuFrame() { createComponents(); createMenu(); initializeComponents(); registerEventHandlers(); addComponentsToFrame(); } private void createComponents() { label1 = new JLabel("This is a test"); mainPanel = new JPanel(); }

62 Page w16.62 – Spring 2010Steffen Vissing Andersen Class MenuFrame – a menu Example (3/7) private void createMenu() { menuBar = new JMenuBar(); menu = new JMenu[3]; menu[0] = new JMenu("File"); menu[1] = new JMenu("Edit"); menu[2] = new JMenu("View"); menuItem = new ArrayList (); JMenuItem[] items = new JMenuItem[3]; items[0] = new JMenuItem("Open"); items[1] = new JMenuItem("Save"); items[2] = new JMenuItem("Exit"); menuItem.add(items); items = new JMenuItem[2]; items[0] = new JMenuItem("Copy"); items[1] = new JMenuItem("Paste");

63 Page w16.63 – Spring 2010Steffen Vissing Andersen Class MenuFrame – a menu Example (4/7) menuItem.add(items); items = new JMenuItem[1]; items[0] = new JMenuItem("Full Screen"); menuItem.add(items); for (int i = 0; i < menu.length; i++) { JMenuItem[] theItem = menuItem.get(i); for (int j = 0; j < theItem.length; j++) { menu[i].add(theItem[j]); } menuBar.add(menu[i]); } } // End of createMenu

64 Page w16.64 – Spring 2010Steffen Vissing Andersen Class MenuFrame – a menu Example (5/7) public void initializeComponents() { setJMenuBar(menuBar); add(mainPanel); setSize(300, 300); setVisible(true); size = getSize(); } private void addComponentsToFrame() { mainPanel.add(label1); setContentPane(mainPanel); }

65 Page w16.65 – Spring 2010Steffen Vissing Andersen Class MenuFrame – a menu Example (6/7) private void registerEventHandlers() { for (int i = 0; i < menu.length; i++) { MenuListener menuListener = new MenuListener(this); JMenuItem[] theItem = menuItem.get(i); for (int j = 0; j < theItem.length; j++) { theItem[j].addActionListener(menuListener); }

66 Page w16.66 – Spring 2010Steffen Vissing Andersen Class MenuFrame – a menu Example (7/7) public JLabel getLabel() { return label1; } public Dimension getFrameSize() { return size; } public static void main(String[] args) { new MenuFrame(); } } // end of class MenuFrame

67 Page w16.67 – Spring 2010Steffen Vissing Andersen Class MenuListener for class MenuFrame (1/3) public class MenuListener implements ActionListener { public MenuFrame frame; MenuListener(MenuFrame frame) { this.frame = frame; } public void actionPerformed(ActionEvent e) { String text = ((JMenuItem) e.getSource()).getText(); frame.getLabel().setText(text); text = text.toLowerCase(); if (text.equals("exit")) System.exit(0);

68 Page w16.68 – Spring 2010Steffen Vissing Andersen Class MenuListener for class MenuFrame (2/3) else if (text.equals("full screen")) { frame.setSize(frame.getToolkit().getScreenSize()); ((JMenuItem) e.getSource()).setText("Restore down"); } else if (menuItemText.equals("restore down")) { frame.setSize(frame.getFrameSize()); ((JMenuItem) e.getSource()).setText("Full Screen"); }

69 Page w16.69 – Spring 2010Steffen Vissing Andersen Class MenuListener for class MenuFrame (3/3) else if (menuItemText.equals("open")) { String path = "C:\\_SVA\\Workspace\\Java"; JFileChooser chooser = new JFileChooser(path); FileNameExtensionFilter filter = new FileNameExtensionFilter( "Text files *.txt, *.java", "txt", "java"); chooser.setFileFilter(filter); int returnVal = chooser.showOpenDialog(frame); if(returnVal == JFileChooser.APPROVE_OPTION) { String msg = "You chose to open this file: " + chooser.getSelectedFile().getName(); frame.getLabel().setText(msg); } } // end of method actionPerformed } // end of class MenuListener

70 Page w16.70 – Spring 2010Steffen Vissing Andersen Class MenuFrame - Output


Download ppt "Page w16.1 – Spring 2010Steffen Vissing Andersen SDJ I1 subjects, Spring 2010 Agenda – Week 16, 2010 GUI."

Similar presentations


Ads by Google