FIT1002 2006 1 FIT1002 Computer Programming Unit 21-22 Basic GUI Programming.

download FIT1002 2006 1 FIT1002 Computer Programming Unit 21-22 Basic GUI Programming.

of 55

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of FIT1002 2006 1 FIT1002 Computer Programming Unit 21-22 Basic GUI Programming.

  • Slide 1
  • FIT1002 2006 1 FIT1002 Computer Programming Unit 21-22 Basic GUI Programming
  • Slide 2
  • FIT1002 2006 2 Objectives By the end of this lecture, students should: understand event-driven programming understand the basic structure of a Swing program understand container-hierarchies in GUIs know the most fundamental Swing classes be able to implement a simple GUI in Swing (single-threaded)
  • Slide 3
  • FIT1002 2006 3 Cross-Platform Programming Java Design Goals platform independence web-based programs the GUI must be independent of the platform the GUI toolkit is an integral part of Java this is (almost) a novelty in Java: Smalltalk had the same property, but Java is the first mainstream language that has GUI capabilities built in.
  • Slide 4
  • FIT1002 2006 4 A Swing GUI Example Java GUIs are built from pre-defined GUI objects: Windows, Buttons, TextFields, Menus etc.
  • Slide 5
  • FIT1002 2006 5 Event-Driven Programming GUI programs are usually event-driven the flow of control is not directed by a single algorithm Instead actions are triggered by events (e.g. a button click) In response to an event a pre-defined action is triggered An event if fired by a particular object (e.g. a button) The event is then sent to the reacting object which handles it The reacting object is called a Listener It must be registered as a listener with the object that fires the events in order to receive events from it. component listener event
  • Slide 6
  • FIT1002 2006 6 Container Hierarchies GUIs are usually organized in a hierarchical fashion with containers inside other containers. Example: The top-level window contains a menu-bar which in turn contains menu elements Container a component that can hold other components Component GUI element that can fire events Panel standard container used for grouping objects Frame a window with a title and menus
  • Slide 7
  • FIT1002 2006 7 Every component must be ina container to be displayed unless it is a top-level object (JFrame) Each top-level container has a content pane A Frame Example Frame Content Pane Menu Bar Label
  • Slide 8
  • FIT1002 2006 8 Containment Hierarchy The containment hierarchy for the example of the previous slide: JFrame content panemenu bar JLabel...
  • Slide 9
  • FIT1002 2006 9 Swing Class Hierarchy object java.awt.Component java.awt.Container java.awt.Window java.awt.Frame javax.swing.JFrame javax.swing.JComponent javax.swing.JPanel javax.swing.JLabel javax.swing.JTextComponent
  • Slide 10
  • FIT1002 2006 10 Swing Class Hierarchy
  • Slide 11
  • FIT1002 2006 11 Swing Class Hierarchy
  • Slide 12
  • FIT1002 2006 12 Swing Container Class Every program using the Swing GUI must have at least one top-level Swing container class. Commonly used top-level Swing container classes are: JFrame: implements a single main window JDialog: implements a window for a temporary dialog (e.g. a short Quit without save? confirmation) JApplet: implements an applet within a browser window Need to import the Swing package: import javax.Swing.*;
  • Slide 13
  • FIT1002 2006 13 Common Swing Components JButton JCheckBox JRadioButton JList JMenu JTextField etc.
  • Slide 14
  • FIT1002 2006 14 JFrame As your top-level window you need a JFrame You add components to a JFrame using the add command add(myLabel); You need to make the JFrame visible explicitly setVisible(true);
  • Slide 15
  • FIT1002 2006 15 JLabel A JLabel is a component used to display some text. It is passive, for displaying only: it cannot be used for input. The text in a JLabel can be set in the constructor Jlabel myLabel=new Jlabel(Hello); and can be changed with a method call myLabel.setText(new Text); The JLabel must be added to some visible container to appear JFrame myFrame = new Jframe(); myFrame.add(myLabel);
  • Slide 16
  • FIT1002 2006 16 Example: Hello World import java.awt.*; import javax.swing.*; public class Hello0 extends JFrame { public Hello0() { JLabel l = new JLabel("Hello World!"); add(l); setVisible(true); }
  • Slide 17
  • FIT1002 2006 17 Example: Hello World (Complete) import java.awt.*; import javax.swing.*; public class Hello1 extends Jframe { public Hello1() { setTitle("Hello World"); setSize(100, 75); setLocation(200,200); setDefaultCloseOperation(EXIT_ON_CLOSE); Container contentPane = getContentPane(); JLabel l = new JLabel("Hello World!"); contentPane.add(l); setVisible(true); }
  • Slide 18
  • FIT1002 2006 18 Notes on Hello World A JFrame object is a basic window that may include a border, title, menu bar as well as buttons for minimizing the window, changing the size of the window and closing the window, etc. You can subclass JFrame to define a new kind of window object The size of the window is set with setSize(width, height) The initial window position is set with setLocation(x, y) Units are measured using pixels. Normally should not add a component to the JFrame directly Instead you add to its content pane This is a default container for the visible area of the frame. You get access to the content pane using Container contentPane = getContentPane();
  • Slide 19
  • FIT1002 2006 19 Exiting from a GUI program To exit from a GUI program you need to use System.exit(0) If you do not perform an explicit exit, the program will keep running. You can initialize a JFrame so that it automatically performs an exit when the close button is clicked. setDefaultCloseOperation(EXIT_ON_CLOSE);
  • Slide 20
  • FIT1002 2006 20 Layout Managers If a container has more than a single object in it the arrangement (layout) of the objects needs to be defined. This is (usually) not defined in absolute terms, because the windows are (usually) resizable. Instead relative positions are defined. The exact layout is then calculated by a Layout Manager. There are several different pre-defined Layout Manager classes: FlowLayout BorderLayout, etc
  • Slide 21
  • FIT1002 2006 21 Flow Layout Managers The FlowLayout manager is the simplest layout manager It arranges components one after the other, going from left to right Components are fitted in the order in which they are added. To use flow layout 1.create a flow layout manager 2.set it as the layout manager for the container user resizes window FlowLayout changes
  • Slide 22
  • FIT1002 2006 22 Flow Layout Example public class Hello1x2flow extends Jframe { public Hello1x2flow() { Container contentPane = getContentPane(); contentPane.setLayout(new FlowLayout()); JLabel l1 = new JLabel("Hello World!"); contentPane.add(l1); JLabel l2 = new JLabel("How are you?"); contentPane.add(l2); setVisible(true); }
  • Slide 23
  • FIT1002 2006 23 The BorderLayout manager is somewhat more flexible. It allows the programmer to arrange the components in five regions. To use border layout 1.create a border layout manager 2.set it as the layout manager for the container 3.define the region for each component in the call to add To achieve complex layout you can nest containers with different layout managers. BorderLayout
  • Slide 24
  • FIT1002 2006 24 Border Layout Example public class Hello1x2flow extends Jframe { public Hello1x2flow() { Container contentPane = getContentPane(); contentPane.setLayout(new BorderLayout()); JLabel l1 = new JLabel("Hello World!"); contentPane.add(l1, BorderLayout.NORTH); JLabel l2 = new JLabel("How are you?"); contentPane.add(l2, BorderLayout.SOUTH); setVisible(true); }
  • Slide 25
  • FIT1002 2006 25 Pop-up Dialogs Pop-up Dialogs are used for short-lived windows, for example a quick yes-no confirmation. To generate a dialog you need to 1.create a JOptionPane a dialog method for the appropriate type of dialog
  • Slide 26
  • FIT1002 2006 26 Notes on Pop-up Dialogs All pop-up Dialogs are modal, i.e. they block other windows while they are displayed. The first parameter of the show dialog methods is the parent frame you can set this to null if you do not want the dialog to depend on another window. JOptionPane p = new JOptionPane(); String answer = p.showInputDialog(null, "Who are you?");
  • Slide 27
  • FIT1002 2006 27 Buttons A button is any item that can be pressed or clicked. Before you can add a button to a container, you will need to create a button component of class JButton: JButton newButton = new JButton(Hello); The argument to the constructor is the string that will appear on the button when it is displayed. You add the button to a container using the add method: add(newButton);
  • Slide 28
  • FIT1002 2006 28 Hello with Button Container contentPane = getContentPane(); contentPane.setLayout(new BorderLayout()); JLabel l = new JLabel("Hello World!"); l.setHorizontalAlignment(SwingConstants.CENTER); contentPane.add(l, BorderLayout.NORTH); JButton b = new JButton("Hello!"); contentPane.add(b, BorderLayout.CENTER);
  • Slide 29
  • FIT1002 2006 29 Button Events and Listeners How do we make a button react? When a button is clicked it fires an event. To program the function of the button you need to define a reaction to this event. For this you need a Listener object that processes this even. To program a response to a button being clicked you need to: 1.Define an appropriate listener class which conforms to a standard listener int