GUI and event-driven programming An introduction.

Slides:



Advertisements
Similar presentations
Chapter 14 Advanced GUI ©TheMcGraw-Hill Companies, Inc. Permission required for reproduction or display.
Advertisements

Unit 121 A layout manager is an object that determines the manner in which components are arranged in a container. Each layout manager implements one of.
Graphical User Interfaces
Java Software Development Paradigm Lecture # 12. Basics of GUI.
CMSC 341 Building Java GUIs. 09/26/2007 CMSC 341 GUI 2 Why Java GUI Development? Course is about Data Structures, not GUIs. We are giving you the opportunity.
Corresponds with Chapter 12
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie COMP 14 Introduction to Programming Adrian Ilie July 20, 2005.
Java Swing Recitation – 11/(20,21)/2008 CS 180 Department of Computer Science, Purdue University.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Chapter 7 Event-Driven Programming and Basic GUI Objects.
GUI and Event-Driven Programming Recitation – 3/6/2009 CS 180 Department of Computer Science, Purdue University.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 14 GUI and Event-Driven Programming.
Chapter 14 Advanced GUI. Topics Mouse Events –MouseListener –MouseMotionListener JPanels Layout Managers –Flow Layout –Border Layout –GridLayout –BoxLayout.
1 GUI Elements in Java Nelson Padua-Perez Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.
COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004.
Unit 11 Object-oriented programming: Graphical user interface Jin Sa.
Contructing GUI’s in Java Implemented in the Swing API Imported into your programs by: import javax.swing.*; Most Swing programs also need the AWT packages.
Java Programming Chapter 10 Graphical User Interfaces.
OOP (Java): Layout/ OOP Objectives – –describe the basic layout managers for GUIs Semester 2, GUI Layout.
Java Software Solutions Lewis and Loftus Chapter 10 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphical User Interfaces --
Applets and Frames CS 21a: Introduction to Computing I First Semester,
CSE 219 Computer Science III Graphical User Interface.
Introduction to GUI in Java 1. Graphical User Interface Java is equipped with many powerful,easy to use GUI component such as input and output dialog.
Java GUI building with Swing. 2 AWT (Abstract Window Toolkit) Present in all Java implementations Described in (almost) every Java textbook Adequate for.
Java Programming: Advanced Topics 1 Common Elements of Graphical User Interfaces Chapter 6.
Ch 3-4: GUI Basics Java Software Solutions Foundations of Program Design Sixth Edition by Lewis & Loftus Coming up: GUI Components.
 2002 Prentice Hall, Inc. All rights reserved Introduction Graphical User Interface (GUI) –Gives program distinctive “look” and “feel” –Provides.
1 CSC111H Graphical User Interfaces (GUIs) Introduction GUIs in Java Understanding Events A Simple Application The Containment Hierarchy Layout Managers.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -1 Lecture 3 - Graphical User Interfaces r GUI toolkits in Java API r JFrame r GUI components.
Timer class and inner classes. Processing timer events Timer is part of javax.swing helps manage activity over time Use it to set up a timer to generate.
Object Oriented programming Instructor: Dr. Essam H. Houssein.
Applets and Frames. Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L14: GUI Slide 2 Applets Usually.
GUI Basics. What is GUI? A graphical user interface (GUI) is a type of user interface item that allows people to interact with programs in more ways than.
Creating Windows. How can we use Java to create programs that use windows (GUI applications)? How can we use Java to create programs that use windows.
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
The Abstract Window Toolkit (AWT) supports Graphical User Interface (GUI) programming. AWT features include: a rich set of user interface components; a.
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
Computer Science 209 GUIs Model/View/Controller Layouts.
Basics of GUI Programming Chapter 11 and Chapter 22.
Java Swing One of the most important features of Java is its ability to draw graphics.
1 Layout Managers Layout managers –Provided for arranging GUI components –Provide basic layout capabilities –Processes layout details –Programmer can concentrate.
Graphical User Interface (GUI) Two-Dimensional Graphical Shapes.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7-3 ( Book Chapter 14) GUI and Event-Driven Programming.
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
Graphical User Interface (GUI)
Applets. 9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L12: Applets Slide 2 Applets Usually.
Introduction to GUI in 1 Graphical User Interface 3 Nouf Almunyif.
Introduction to GUI Programming in Java: Frames, Simple Components, and Layouts.
5-1 GUIs and Events Rick Mercer. 5-2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces to respond.
Getting Started with GUI Programming Chapter 10 CSCI 1302.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7 ( Book Chapter 14) GUI and Event-Driven Programming.
©TheMcGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter 7 Event-Driven Programming and Basic GUI Objects.
Unit 131 GUI Layout Managers Learning Outcomes oList and distinguish between the four most common, standard layout managers in Java. oUse these and other.
Chapter 7 A First Look at GUI Applications Layout Managers.
A Quick Java Swing Tutorial
Graphical User Interfaces
Swing JComponents.
Modern Programming Language Java
Tim McKenna Layout Mangers in Java Tim McKenna
A Quick Java Swing Tutorial
Chap 7. Building Java Graphical User Interfaces
Graphical User Interfaces -- Introduction
Tim McKenna Layout Mangers in Java Tim McKenna
Creating Graphical User Interfaces
Chapter 7-3 (Book Chapter 14)
Chapter 7 (Book Chapter 14)
A Quick Java Swing Tutorial
Graphical User Interface
Presentation transcript:

GUI and event-driven programming An introduction

AWT and Swing In Java, GUI-based programs are implemented by using classes from the javax.swing and java.awt packages. The AWT (abstract windowing toolkit) is the older of the two, and uses elements from the local platform’s operating system. The Swing classes provide greater compatibility across different operating systems. –They are fully implemented in Java, and behave the same on different operating systems. –Swing classes support many new functionalities not supported by AWT counterparts.

Examples of GUI objects from the Swing library

Event-driven programming An event occurs when the user interacts with a GUI object –Usually this means a mouse movement or click –Keyboard actions are also events In event-driven programs, we program objects to respond to these events by defining event-handling methods.

Inheritance Inheritance is a feature we use to define a more specialized class from an existing class. The existing class is the superclass and the specialized class is the subclass. Every method of a superclass is inherited by its subclass. Because the subclass-superclass relationships are formed into an inheritance hierarchy, a subclass inherits all methods defined in its ancestor classes

Hierarchy of API objects We have already used several Swing objects in past programs. The illustration below, from the Java API documentation, depicts the inheritance hierarchy of the JOptionPane class

Inheritance and JFrame To create a customized user interface, we often define a subclass of the JFrame class. The JFrame class contains rudimentary functionalities to support features found in any frame window.

Creating a subclass of JFrame To define a subclass of another class, we declare the subclass with the reserved word extends. class JFrameEx1 extends JFrame {... } In the class’s default constructor, we set such characteristics as the frame’s title, size, and screen position

Example import javax.swing.*; import java.awt.*; public class JFrameEx1 extends JFrame { public JFrameEx1 () { setTitle("I've been framed!"); setSize(300, 200); setLocation(150, 250); setDefaultCloseOperation(EXIT_ON_CLOSE); } public static void main(String[] args) { JFrameEx1 frame = new JFrameEx1(); frame.setVisible(true); }

The Content Pane The placement of objects in a JFrame is accomplished by accessing the object’s content pane, an instance of class JPanel, which is itself a kind of window We access the content pane by calling the frame’s getContentPane method.

Adding objects to the frame There are two approaches to placing GUI objects on a frame’s content pane. One approach uses a layout manager, an object that controls the placement of the objects. The other approach uses absolute positioning to explicitly specify the position and size of objects on the content pane. We used the latter approach with the drawing programs we have done so far

Layout Managers and Panels For building practical GUI-based Java programs, we must learn how to use layout managers effectively. We will begin by covering the three basic managers: –FlowLayout –BorderLayout –GridLayout

FlowLayout The most basic layout is java.awt.FlowLayout. In this layout, GUI components are placed in left-to-right order. As a default, components on each line are centered. When the frame containing the component is resized, the placement of the components is adjusted accordingly.

Adding the layout manager We first assign the desired layout manager to the container in the frame’s constructor. Container contentPane = getContentPane(); contentPane.setLayout(new FlowLayout()); A container has a default layout manager assigned to it, but it is safer to explicitly assign the desired layout manager ourselves.

Adding objects to the content pane We can now add objects to the content pane For example, the code below would add five (so far non-functional) buttons to the content pane: JButton button1, button2, button3, button4, button5;... button1 = new JButton(“button1”);... contentPane.add(button1);...

BorderLayout The second layout manager is java.awt.BorderLayout. This manager divides the container into five regions: –Center –North –South –East –West

BorderLayout We set the BorderLayout as contentPane.setLayout(new BorderLayout()); And place GUI components with the second argument specifying the region: contentPane.add(button1,BorderLayout.NORTH); contentPane.add(button2,BorderLayout.SOUTH);

BorderLayout example

BorderLayout The default of BorderLayout has no gaps between the regions. We can specify the amount of vertical and horizontal gaps between the regions in pixels. contentPane.setLayout(new BorderLayout(10, 20));

GridLayout The third layout manager is java.awt.GridLayout. This manager places GUI components on equal-sized N × M grids. Components are placed in top-to-bottom, left-to-right order.

GridLayout To create a GridLayout object, we pass two arguments: –Number of rows –Number of columns contentPane.setLayout(new GridLayout(2, 3)); We then place GUI components in the manner analogous to the one used for FlowLayout. If the rows value is nonzero, the value we specify for the number of columns is irrelevant. The layout will create the specified number of rows and adjust the columns so that all components will fit in the designated rows.

GridLayout example

Layout Managers and Panels The default content pane of a frame is an instance of JPanel. We can place a JPanel inside another JPanel. Each of these nesting panels may be assigned a different layout manager. The capability of nesting panels with different layout managers presents opportunities for creating intricate layouts on a frame.

Nested Panels It is possible, but very difficult, to place all GUI components on a single JPanel or other types of containers. A better approach is to use multiple panels, placing panels inside other panels. To illustrate this technique, we will create two sample frames that contain nested panels. The samples will provide the interface for playing Tic Tac Toe and HiLo

Example 1 – using nested panels The topmost panel is the content pane of the frame. It has a border layout. The content pane’s center region contains an instance of programmer-defined class TicTacToePanel called gamePanel. The east region is occupied by an instance of another JPanel named controlPanel. A border layout is used for this panel. –The north region of controlPanel is occupied by another JPanel named scorePanel. –The south region is occupied by a JButton. The layout for scorePanel is set to a grid layout with four grids, each occupied by a JLabel object.

Using Nested Panels – BorderFactory class When we nest panels, it is useful to mark their borders. The BorderFactory class contains many different border formats, such as –titled border –lowered bevel border –line border –etc.

BorderFactory We create a titled border by calling the class method createTitledBorder of the BorderFactory class. scorePanel.setBorder(BorderFactory.createTitledBorder(“Scores: ”)); gamePanel.setBorder(BorderFactory.createLoweredBevelBorder()); Following is the program listing that creates the visual aspect of the program (i.e., there is no code for handling events or game logic).

Example Code import javax.swing.*; import java.awt.*; import java.awt.event.*; public class NestedPanels1 extends JFrame { public static void main(String[] args) { NestedPanels1 frame = new NestedPanels1(); frame.setVisible(true); } public NestedPanels1() { Container contentPane; TicTacToePanel gamePanel; JPanel controlPanel; JPanel scorePanel; setSize (500, 350); setTitle (“Tic Tac Toe"); setLocation (150,250);

Example continued contentPane = getContentPane( ); contentPane.setLayout(new BorderLayout(10, 0)); gamePanel = new Ch14TicTacToePanel(); gamePanel.setBorder(BorderFactory.createLoweredBevelBorder()); controlPanel = new JPanel(); controlPanel.setLayout(new BorderLayout( )); contentPane.add(gamePanel, BorderLayout.CENTER); contentPane.add(controlPanel, BorderLayout.EAST); scorePanel = new JPanel(); scorePanel.setBorder(BorderFactory.createTitledBorder("Scores:")); scorePanel.setLayout(new GridLayout(2, 2)); scorePanel.add(new JLabel("Player 1:")); scorePanel.add(new JLabel(" 0")); scorePanel.add(new JLabel("Player 2:")); scorePanel.add(new JLabel(" 0")); controlPanel.add(scorePanel,BorderLayout.NORTH); controlPanel.add(new JButton("New Game"), BorderLayout.SOUTH); setDefaultCloseOperation( EXIT_ON_CLOSE ); }