1 / 70

GUI programming

GUI programming. Intro to GUI & events. GUI programming. GUI stands for graphical user interface In Java, two packages are involved in creating GUI programs: AWT (abstract window toolkit), the original suite of GUI classes in Java

lilah-schroeder
Download Presentation

GUI programming

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. GUI programming Intro to GUI & events

  2. GUI programming • GUI stands for graphical user interface • In Java, two packages are involved in creating GUI programs: • AWT (abstract window toolkit), the original suite of GUI classes in Java • Swing, an updated and expanded version of AWT; replaces some but not all of the original AWT classes

  3. Event-driven programming • Style of programming that uses a signal and response approach to control flow, rather than the standard sequential approach • Objects react to events • Programs often proceed in a non-linear fashion

  4. Event-driven programming • Event: an object that is created by an action, such as a mouse click • Listener: an object that performs an action in response to an event • Exception handling follows this model: • A thrown exception is an event • The catch block that corresponds to the event is a listener

  5. Event-driven programming • An event component (such as a button) may have from zero to several listeners • Each listener can respond to a different type of event (such as mouse movement vs. mouse click), or several listeners might be programmed to respond to the same event • Listener objects respond to events by invoking methods called event handlers

  6. How it works • As a programmer, you are not so much concerned with the sequence of events as with the interaction of objects • You create objects (such as buttons) that can fire events, and you create listeners that can respond to events • The events themselves determine the order in which things proceed in your program

  7. How it works • The Swing library makes extensive use of the inheritance mechanism • Certain methods are automatically invoked when events are fired • You will often write methods that are never called by any code you write; instead, the methods are called automatically when triggered by event objects

  8. JFrame – a simple window • The window shown below is an example of a basic Swing object, the JFrame: • The code on the following slide was used to create this window

  9. import javax.swing.*; // note the x! import java.awt.*; public class JFrameEx1 extends JFrame { // class inherits variables, // constants and methods from public JFrameEx1() { // parent class JFrame setTitle("I've been framed!"); setSize(300, 200); // width is 300 pixels, height is 200 pixels setLocation(150, 250); // window appears 150 pixels from the left // and 250 pixels from the top of the screen setDefaultCloseOperation(EXIT_ON_CLOSE); // indicates that the program should end when the close // button is clicked; default is to do nothing, so the window // would close but the program wouldn’t end } public static void main(String[] args) { JFrameEx1 frame = new JFrameEx1(); frame.setVisible(true); // can setVisible(false) to make window } // disappear, if desired }

  10. Adding components to a JFrame • The previous program example displayed an empty window • We can place GUI objects, such as buttons, text areas or sliders in a JFrame window by using the add method, as shown in the next example

  11. import javax.swing.*; import java.awt.*; public class JFrameEx2 extends JFrame { private JButton aButton; public JFrameEx2() { aButton = new JButton(“Click Me”); setTitle("I've been framed!"); setSize(300, 200); setLocation(150, 250); setDefaultCloseOperation(EXIT_ON_CLOSE); add (aButton); } public static void main(String[] args) { JFrameEx2 frame = new JFrameEx2(); frame.setVisible(true); } } Code at left produces the window shown below: You can click the button, but it doesn’t do anything; there is no action listener attached to the button to handle the action event that is created

  12. Buttons that listen • In order for a button to be functional, it must have an action listener associated with it • Each button object possesses an addActionListener method which can be used to make the association • The addActionListener method takes an ActionListener object as its argument • An ActionListener object is an instance of a class that implements the ActionListener interface

  13. The ActionListener Interface • An interface in Java is something like a class with methods specified but not defined • A class that implements an interface provides the definition(s) for any specified method(s) • The ActionListener interface has one method specified: public void actionPerformed(ActionEvent e)

  14. JFrame with working button import javax.swing.*; import java.awt.*; import java.awt.event.*; public class JFrameEx3 extends JFrame implements ActionListener { private JButton aButton; public JFrameEx3 () { aButton = new JButton(“Click Me”); aButton.addActionListener(this); setTitle("I've been framed!"); setSize(300, 200); setLocation(150, 250); setDefaultCloseOperation(EXIT_ON_CLOSE); add(aButton); }

  15. … continued from previous slide public void actionPerformed (ActionEvent e) { aButton.setText(“Thanks”); } public static void main(String[] args) { JFrameEx3 frame = new JFrameEx3(); frame.setVisible(true); } } Before click: After:

  16. Notes on example • The example illustrates some of the principles of event-driven programming discussed earlier • Note that, although the actionPerformed method exists, and we can see that it performs its action, it is never explicitly called anywhere in the program • Keep in mind that an event object is like an exception object: • it only gets created under certain circumstances • like a catch block that matches an exception, the actionPerformed method is invoked automatically when its matching event object appears

  17. More notes on example • In the example, the class defined (JFrameEx3) both inherited from parent class JFrame (using the extends mechanism) and implemented the ActionListener interface • In the first couple of examples in the text, a separate class is defined to implement ActionListener • In either case, the only requirement of a class that implements the interface is that the class provides a definition for the actionPerformed method

  18. Even more notes on example • The reason for having the example class implement the interface was so that the actionPerformed method would have access to the JButton object and its setText method • Note that a third import statement had to be added to the program to make the ActionListener interface available: import java.awt.event.*;

  19. Color and the content pane • The Color class and a set of Color constants is defined in the java.awt package • To set the background color of a JFrame, you must first access the entire inner portion of the window; this part of the window is called the content pane • The content pane is a separate object; it is an instance of the Container class, which, just to keep things interesting, is an ancestor of the JFrame class

  20. Color and the content pane • The content pane of a particular JFrame object is returned by the getContentPane method • For example, we could create a Container object to represent a JFrame’s content pane with the following code: public class Window extends JFrame { Container pane = this.getContentPane();

  21. Color and the content pane • The setBackground() method can be used to add color to a container • The argument to setBackground is an object of type Color; the color constants are such objects • The code below would make a pink window: public class Window extends JFrame { Container pane = this.getContentPane(); … pane.setBackground(Color.PINK);

  22. Color objects • A color object can be constructed using three int parameters, each of which may have a value between 0 and 255 • The first parameter represents the amount of red saturation in the color; the second, the amount of green, the third, the amount of blue • For example, the Color.RED constant is an object constructed as follows: public static final Color RED = new Color(255,0,0); • Other colors can be created by using different combinations of the three numbers

  23. Output examples: import javax.swing.*; import java.awt.*;import java.util.*;public class JFrameEx4 extends JFrame { Container pane; Random rg; public JFrameEx4 () { rg = new Random(); pane = this.getContentPane(); pane.setBackground(new Color(rg.nextInt(256),rg.nextInt(256),rg.nextInt(256))); setTitle("Beauty or the beast?"); setSize(300, 200); setLocation(150, 250); setDefaultCloseOperation(EXIT_ON_CLOSE); } public static void main(String[] args) { JFrameEx4 frame = new JFrameEx4(); frame.setVisible(true); }}

  24. Containers & layout managers • The add method places a component within a JFrame (or other container) • To control the way components are arranged when more than one is added to a container, we employ a layout manager • To add a layout manager to a container, use the setLayout method, which requires: • a Container calling object (a JFrame is a kind of Container) • a LayoutManager object argument

  25. Layout Managers in the Java API • Several layout manager classes are defined in the API; three of them are: • BorderLayout • FlowLayout • GridLayout

  26. BorderLayout • A BorderLayout manager places components in five defined regions of the container to which it is applied • As components are added to a container, the region is specified in the call to the add method

  27. import javax.swing.*; import java.awt.*; public class WinEx extends JFrame { Container pane; public WinEx() { setSize(300,300); pane = this.getContentPane(); pane.setLayout(new BorderLayout()); pane.add (new JButton(“NORTH”), BorderLayout.NORTH); pane.add (new JButton(“SOUTH”), BorderLayout.SOUTH); pane.add (new JButton(“EAST”), BorderLayout.EAST); pane.add (new JButton(“WEST”), BorderLayout.WEST); setDefaultCloseOperation(EXIT_ON_CLOSE); } public static void main (String [] args) { WinEx window = new WinEx(); window.setVisible(); } }

  28. Output The fifth region is represented by the constant BorderLayout.CENTER; this is the largest region, as can be seen in the example It is not necessary to place components in every region; any component placed in the center will occupy any unused space in other regions – see next slide

  29. import javax.swing.*; import java.awt.*; public class WinEx extends JFrame { Container pane; public static void main (String [] args) { WinEx window = new WinEx(); window.setVisible(); } public WinEx() { setSize(300,300); pane = this.getContentPane(); pane.setLayout(new BorderLayout()); pane.add (new JButton(“CENTER”), BorderLayout.CENTER); pane.add (new JButton(“SOUTH”), BorderLayout.SOUTH); setDefaultCloseOperation(EXIT_ON_CLOSE); } }

  30. FlowLayout • With the FlowLayout manager, components are laid out left to right, in the order in which they are added • When no horizontal space remains, a new row begins • The look of the overall layout will vary depending on the size of the window and the size and number of components in it

  31. Variations of FlowLayout with same window contents 300 x 300 window: 200 x 400 window: 400 x 200 window:

  32. Code for FlowLayout Examples import javax.swing.*;import java.awt.*;public class WinEx2 extends JFrame { public WinEx2() { setSize(400,200); this.getContentPane().setBackground(Color.BLUE); setLayout(new FlowLayout()); add (new JButton("button 1")); // other buttons added here … add (new JButton("button")); setDefaultCloseOperation(EXIT_ON_CLOSE); } public static void main (String [] args) { WinEx2 window = new WinEx2(); window.setVisible(true); }}

  33. GridLayout • Using the GridLayout manager, components are laid out in an evenly-spaced grid • The constructor takes two arguments, indicating the number of rows and columns in the grid • Depending on the number and size of components, and the size of the window, there may be some variation: the number of columns will be ignored if it is too small to accommodate the components

  34. GridLayout Examples 6 x 1 grid in 100 x 400 window 3 x 2 grid with 6 buttons in 300 x 200 window 1 x 0 grid in 500 x 100 window

  35. Code for GridLayout examples import javax.swing.*;import java.awt.*;public class WinEx3 extends JFrame { public WinEx3() { setSize(500,100); setLayout(new GridLayout(1,0)); add (new JButton("button 1")); // … other buttons added … add (new JButton("button 6")); setDefaultCloseOperation(EXIT_ON_CLOSE); } public static void main (String [] args) { WinEx3 window = new WinEx3(); window.setVisible(true); }}

  36. Layout managers & containers • Before we started looking at layout managers, we saw some examples of GUI windows that had functional buttons • All of the layout examples contained buttons, but they weren’t functional; they were just a convenient way to illustrate the layout managers • Most GUI windows are laid out using a variety of containers within a larger window, which has a layout manager attached to it • Some or all of the component containers may employ their own layout manager(s)

  37. JPanel objects • A JFrame makes a good overall container, as it has all of the attributes we have come to expect in a window • However, a JFrame contained within a JFrame would be overkill; a better option would be an unadorned window, with just a content pane and no frame or title bar • Such a window can be created with a JPanel object • A single JFrame can contain several JPanels

  38. Example • The next example illustrates the use of this hierarchical layout scheme • The main window is split into two panels (display and buttonArea), which are arranged in the main window using the BorderLayout manager • The buttonArea has a FlowLayout manager attached to it, and it contains a single component, a JButton • The code fragment on the next slide contains that portion of the constructor where the layout managers and components are added; the class and method heading, as well as instructions that set up the main window are omitted for brevity

  39. Example pane = getContentPane(); // content pane of main windowpane.setLayout(new BorderLayout()); // layout manager for main window display = new JPanel(); // upper portion of window: displays colordisplay.setBackground(getNewColor()); // starts with random colorpane.add(display, BorderLayout.CENTER); control = new JButton ("CHANGE IT!"); // button to change to new colorcontrol.addActionListener(this); buttonArea = new JPanel(); // lower portion of window: holds buttonbuttonArea.setLayout(new FlowLayout());buttonArea.setBackground(Color.BLACK);buttonArea.add(control); pane.add(buttonArea, BorderLayout.SOUTH);

  40. Example continued public Color getNewColor() { // returns a new color constructed randomly Random rg = new Random(); int r, g, b; r = rg.nextInt(256); g = rg.nextInt(256); b = rg.nextInt(256); return new Color(r,g,b);}public void actionPerformed (ActionEvent e) { // changes color when // button is activated display.setBackground(getNewColor());} public static void main (String [] args) { ColorPanel06 demo = new ColorPanel06(); demo.setVisible(true);}

  41. Complete program produces output like the examples shown below

  42. Swing Menus • Menus are lists of options from which a user can choose • Three Swing classes are involved in creating a GUI menu interface for a Java program: • JMenuItem: an individual menu entry • JMenu: a collection of JMenuItems • JMenuBar: a container for JMenus

  43. JMenuItem • Like JButtons, JMenuItems generate ActionEvents • We can program the actionPerformed method to respond to an ActionEvent from a specific menu (or a specific button, if we have more than one) by invoking the getActionCommand() method of the ActionEvent object • By default, this method returns the String used to construct the JButton or JMenuItem object

  44. Example • The code fragment below creates a JMenuItem and adds an ActionListener to it: JMenuItem cyan = new JMenuItem("cyan"); cyan.addActionListener(this); • The corresponding code fragment comes from the actionPerformed method: public void actionPerformed (ActionEvent e) { String command = e.getActionCommand(); if (command.equals(“cyan”)) display.setBackground(Color.CYAN));

  45. JMenu and JMenuBar • A JMenu can be thought of as a container for JMenuItems; we place items in the menu by using the set method, as in this example: JMenu other = new JMenu("Others");other.add(cyan); • Similarly, a JMenu can be added to a JMenuBar: JMenuBar menus = new JMenuBar();menus.add(other);

  46. The setActionCommand method • As previously mentioned, the getActionCommand() method, when called from an ActionEvent object, returns a String • by default, this will be the label from the button or menu item that created the event • the setActionCommand method can be used to set a different return String for the button or menu item

  47. Example import javax.swing.*;import java.awt.*;import java.awt.event.*;public class ActionEx extends JFrame implements ActionListener { JButton b1, b2, b3; Container pane; public ActionEx() { setSize(100,200); setLocation(150,150); pane = this.getContentPane(); pane.setLayout(new GridLayout(3,0)); setupButtons(); setDefaultCloseOperation(EXIT_ON_CLOSE); }

  48. Example continued public void setupButtons() { b1 = new JButton("?"); b1.setActionCommand("1"); b1.addActionListener(this); pane.add(b1); b2 = new JButton("??"); b2.setActionCommand("2"); b2.addActionListener(this); pane.add(b2); b3 = new JButton("???"); b3.setActionCommand("3"); b3.addActionListener(this); pane.add(b3);}

  49. Example concluded Effect of running this code in a program; before buttons are activated: public void actionPerformed(ActionEvent e) { String s = e.getActionCommand(); int x = Integer.parseInt(s); switch (x) { case 1: b1.setText("OK"); break; case 2: b2.setText("Oh no!"); break; case 3: b3.setText ("Ouch"); } // end switch } // end method } // end class After all have been pressed:

  50. Labels, Text Fields and Text Areas • Each of the elements listed above describes a way to add text to a GUI window • A label is a static text field; it can’t be changed by the user • A text field is a fixed-size blank for the user to fill in • A text area is basically a larger text field, allowing for multiple lines of input

More Related