Programming Languages and Techniques (CIS120e)

Similar documents
Control Flow: Overview CSE3461. An Example of Sequential Control. Control Flow: Revisited. Control Flow Paradigms: Reacting to the User

Programming Languages and Techniques (CIS120)

GUI Program Organization. Sequential vs. Event-driven Programming. Sequential Programming. Outline

CSEN401 Computer Programming Lab. Topics: Graphical User Interface Window Interfaces using Swing

Example Programs. COSC 3461 User Interfaces. GUI Program Organization. Outline. DemoHelloWorld.java DemoHelloWorld2.java DemoSwing.

Graphical Interfaces

Java Graphical User Interfaces AWT (Abstract Window Toolkit) & Swing

Graphical Interfaces

Programming Language Concepts: Lecture 8

Systems Programming Graphical User Interfaces

Window Interfaces Using Swing Objects

Introduction to the JAVA UI classes Advanced HCI IAT351

11/7/12. Discussion of Roulette Assignment. Objectives. Compiler s Names of Classes. GUI Review. Window Events

G51PRG: Introduction to Programming Second semester Applets and graphics

MIT AITI Swing Event Model Lecture 17

The JFrame Class Frame Windows GRAPHICAL USER INTERFACES. Five steps to displaying a frame: 1) Construct an object of the JFrame class

Swing from A to Z Some Simple Components. Preface

Window Interfaces Using Swing Objects

GUI Basics. Object Orientated Programming in Java. Benjamin Kenwright

BM214E Object Oriented Programming Lecture 13

Programming Languages and Techniques (CIS120)

CSE 143. Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT

Topic 9: Swing. Swing is a BIG library Goal: cover basics give you concepts & tools for learning more

Topic 9: Swing. Why are we studying Swing? GUIs Up to now: line-by-line programs: computer displays text user types text. Outline. 1. Useful & fun!

Graphical User Interface (GUI)

CS 251 Intermediate Programming GUIs: Components and Layout

Chapter 1 GUI Applications

Java - Applications. The following code sets up an application with a drop down menu, as yet the menu does not do anything.

The AWT Event Model 9

Programmierpraktikum

Graphic User Interfaces. - GUI concepts - Swing - AWT

Frames, GUI and events. Introduction to Swing Structure of Frame based applications Graphical User Interface (GUI) Events and event handling

GUI Programming: Swing and Event Handling

Chapter 14. More Swing

CSE 8B Intro to CS: Java

The Abstract Windowing Toolkit. Java Foundation Classes. Swing. In April 1997, JavaSoft announced the Java Foundation Classes (JFC).

An array is a type of variable that is able to hold more than one piece of information under a single variable name.

Outline. Topic 9: Swing. GUIs Up to now: line-by-line programs: computer displays text user types text AWT. A. Basics

CSE 331. Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT

CPS122 Lecture: Graphical User Interfaces and Event-Driven Programming

Introduction. Introduction

COMPSCI 230. Software Design and Construction. Swing

Command-Line Applications. GUI Libraries GUI-related classes are defined primarily in the java.awt and the javax.swing packages.

(Incomplete) History of GUIs

Tool Kits, Swing. Overview. SMD158 Interactive Systems Spring Tool Kits in the Abstract. An overview of Swing/AWT

PIC 20A GUI with swing

Datenbank-Praktikum. Universität zu Lübeck Sommersemester 2006 Lecture: Swing. Ho Ngoc Duc 1

Example: CharCheck. That s It??! What do you imagine happens after main() finishes?

Graphical User Interface (GUI)

COMP-202 Unit 10: Basics of GUI Programming (Non examinable) (Caveat: Dan is not an expert in GUI programming, so don't take this for gospel :) )

Graphical User Interfaces. Comp 152

Java. GUI building with the AWT

PROGRAMMING DESIGN USING JAVA (ITT 303) Unit 7

Packages: Putting Classes Together

Graphical User Interface (Part-1) Supplementary Material for CPSC 233

Building a GUI in Java with Swing. CITS1001 extension notes Rachel Cardell-Oliver

Programming Languages and Techniques (CIS120)

Handout 14 Graphical User Interface (GUI) with Swing, Event Handling

Part 3: Graphical User Interface (GUI) & Java Applets

SD Module-1 Advanced JAVA

Jonathan Aldrich Charlie Garrod

University of Cape Town ~ Department of Computer Science. Computer Science 1016S / 1011H ~ November Exam

SD Module-1 Advanced JAVA. Assignment No. 4

Swing from A to Z Using Focus in Swing, Part 2. Preface

Lab 4. D0010E Object-Oriented Programming and Design. Today s lecture. GUI programming in

Class 16: The Swing Event Model

1005ICT Object Oriented Programming Lecture Notes

7. Program Frameworks

Course: CMPT 101/104 E.100 Thursday, November 23, 2000

G51PGP Programming Paradigms. Lecture 008 Inner classes, anonymous classes, Swing worker thread

Eclipsing Your IDE. Figure 1 The first Eclipse screen.

Programming Languages and Techniques (CIS120)

Introduction to Graphical Interface Programming in Java. Introduction to AWT and Swing

Graphical interfaces & event-driven programming

1 of :32:42

Agenda. Container and Component

GUI Design. Overview of Part 1 of the Course. Overview of Java GUI Programming

Building Graphical User Interfaces. GUI Principles

Building Graphical User Interfaces. Overview

Starting Out with Java: From Control Structures Through Objects Sixth Edition

GUI DYNAMICS Lecture July 26 CS2110 Summer 2011

AP CS Unit 11: Graphics and Events

Graphics programming. COM6516 Object Oriented Programming and Design Adam Funk (originally Kirill Bogdanov & Mark Stevenson)

GUI and its COmponent Textfield, Button & Label. By Iqtidar Ali

Lecture 5: Java Graphics

CSE 331. Event- driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT

Overview. Building Graphical User Interfaces. GUI Principles. AWT and Swing. Constructing GUIs Interface components GUI layout Event handling

Original GUIs. IntroGUI 1

กล ม API ท ใช. Programming Graphical User Interface (GUI) Containers and Components 22/05/60

Introduction to GUIs. Principles of Software Construction: Objects, Design, and Concurrency. Jonathan Aldrich and Charlie Garrod Fall 2014

Java Swing. based on slides by: Walter Milner. Java Swing Walter Milner 2005: Slide 1

11/6/15. Objec&ves. RouleQe. Assign 8: Understanding Code. Assign 8: Bug. Assignment 8 Ques&ons? PROGRAMMING PARADIGMS

Graphical User Interfaces. Swing. Jose Jesus García Rueda

User interfaces and Swing

FORMAS DE IMPLEMENTAR LOS OYENTES. A).- El oyente en una clase independiente con el constructor con un argumento y usando el método getactioncommand.

JRadioButton account_type_radio_button2 = new JRadioButton("Current"); ButtonGroup account_type_button_group = new ButtonGroup();

Graphics. Lecture 18 COP 3252 Summer June 6, 2017

Java Swing. Recitation 11/(20,21)/2008. CS 180 Department of Computer Science, Purdue University

Programming Languages and Techniques (CIS120)

CompSci 125 Lecture 17. GUI: Graphics, Check Boxes, Radio Buttons

Transcription:

Programming Languages and Techniques (CIS120e) Lecture 29 Nov. 19, 2010 Swing I

Event- driven programming Passive: ApplicaHon waits for an event to happen in the environment When an event occurs, the applicahon responds to the event, and then waits for the next event. The program s flow of control is dictated by the stream of events arriving from the outside Examples: A graphical, window- based user interface Web server Control system (thermostat, robot) 2

Why study GUIs (again) Most common example of event- based programming Heavy and effechve use of OO inheritance Nice opportunity to compare our hand- rolled objects in OCaml with those supported by Java s rich object system Case study of library organizahon 3

Swing Java library for GUI development javax.swing.* Built on exishng library: AWT java.awt.* If there are two versions of something, use Swing s. (e.g., java.awt.bu_on vs. javax.swing.jbu_on) The Jxxx version is usually the one you want, rather than xxx. Portable Communicates with OS's nahve window system Same Java program looks slightly different when run on your PC and my Mac. 4

Background Reading Java Tutorial on CreaHng a GUI With JFC/Swing For starters: Geeng Started with Swing Using Swing Components 5

Swing: Two Types of Components Atomic components Containers 6

Swing: Two Types of Components Atomic components Interact directly with user Examples: Bu_ons Checkboxes TextFields RadioBu_ons 7

Fundamental class: JComponent Stores a_ributes common to GUI elements size (height/width) preferred size minimum/maximum size locahon font foreground/background color border what is visible many more 8

Swing: Two Types of Components Containers Hold and posihon other components 1. Top- level containers Lays out screen real estate JFrame, JDialog! 2. Intermediate containers Organize and posihon other components JPanel! 9

JFrame Represents a top- level window Displayed directly by OS (Mac, PC, etc.) Title Border Therefore, Not a subclass of JComponent Displayed by Java within window menu bar (ophonal) user- specified components (in content pane) Can be moved, resized, iconified, closed. 10

JFrame Components in a frame are stored in its content pane import java.awt.*; import javax.swing.*; class FrameDemo { FrameDemo () { JFrame f = new JFrame( FrameDemo"); JButton b = new JButton("Press"); Container cp = f.getcontentpane(); cp.add(b); f.setvisible(true); 11

Panes Other Panes exist beyond ContentPane We don t care right now. 12

An Example Task: Program an applicahon that displays a bu_on. When the bu_on is pressed, its foreground and background colors are swapped. 13

import java.awt.*; import javax.swing.*; import java.awt.event.*; class OnOffSwitch extends JFrame { public OnOffSwitch () { super("on/off Switch"); // frame title // create button and set its colors JButton button = new JButton("On/Off"); button.setforeground(color.black); button.setbackground(color.red); // add button to content pane this.getcontentpane().add(button); this.setsize(300,300); this.setvisible(true); 14

class OnOffSwitch extends JFrame { public static void main(string[] args { new OnOffSwitch(); Before Amer 15

Making the Bu_on do something So far, pressing the bu_on has no effect at all. We ve created a bu_on, but haven t wired it up to do anything. When the bu_on is pressed, it generates an AcConEvent. We can program the bu_on with an AcConListener to respond to the AcHonEvent. 16

What s an AcHonEvent? AcHonEvents are objects. subclass of abstract class java.awt.awtevent. If user clicks on a bu_on, it generates an ActionEvent. More generally, ActionEvents are generated by the user doing things to the GUI (mouse clicks, keypresses,...) 17

AcHonListener An ActionEvent triggers an ActionListener. Causes the actionperformed method of the ActionListener to be called. Our job is to program the actionperformed method. interface ActionListener { void actionperformed(actionevent e); To achvate, just register listener with the bu_on. button.addactionlistener(listener); 18

Switcher! class Switcher implements ActionListener { public void actionperformed (ActionEvent e) { Component source = (Component)e.getSource(); Color oldforeground = source.getforeground(); Color oldbackground = source.getbackground(); source.setforeground(oldbackground); source.setbackground(oldforeground); Register listener with the bu_on: button.addactionlistener(new Switcher()); 19

Results Before Clicking Bu_on Amer 20

Be_er layout Pueng the bu_on directly in the JFrame makes it fill the whole frame not very a_rachve To let it take its natural size, we create a JPanel that contains the bu_on 21

! JPanel panel = new JPanel(); panel.add(button); this.getcontentpane().add(panel);! 22

More Bu_ons A JPanel can contain many subcomponents The layout of these subcomponents can be specified in very flexible ways By default, subcomponents are filled in lem- to- right, with mulhple rows as necessary 23

Extending the example! // create another button and set its colors JButton button2 = new JButton("On/Off"); button2.setforeground(color.black); button2.setbackground(color.green); // And associate an action button2.addactionlistener(new Switcher()); // Add both buttons to a panel JPanel panel = new JPanel(); panel.add(button); panel.add(button2); this.getcontentpane().add(panel);!! 24

More intereshng achons The AcHonListener a_ached to a bu_on can do things to other components of the GUI For example, let s create a label next to the bu_on that displays its current state (on/off)... Useful facts: Events can trigger mulhple AcHonListeners Events of one component can easily affect other components through Listeners 25

// create button JButton button = new JButton("On/Off"); button.setforeground(color.black); button.setbackground(color.red); // create associated text field JLabel text = new JLabel("off"); // And associate an action button.addactionlistener(new Switcher2(text)); // add to content pane inside a panel JPanel panel = new JPanel(); // panel.setbackground(color.yellow); panel.add(button); panel.add(text); this.getcontentpane().add(panel);!! 26

class Switcher2 implements ActionListener { JLabel mytext; Switcher2 (JLabel l) { mytext = l; public void actionperformed (ActionEvent e) { Component source = (Component)e.getSource(); Color oldforeground = source.getforeground(); Color oldbackground = source.getbackground(); source.setforeground(oldbackground); source.setbackground(oldforeground);!! String current = mytext.gettext(); if (current.equals("off")) mytext.settext("on"); else mytext.settext("off"); 27

Results Before Amer 28

WINDOWLISTENERS 11/10/2010 CIS 120 29

Problem Problem: When window is closed, program does not terminate. How to fix it? Easy way: frame.setdefaultcloseoperation(exit_on_close); 30

More flexible: WindowListener Closing windows creates a WindowEvent React to that event by terminahng program public interface WindowListener extends EventListener { void windowactivated(windowevent e); void windowclosing(windowevent e); void windowclosed(windowevent e); void windowdeactivated(windowevent e); void windowdeiconified(windowevent e); void windowiconified(windowevent e); void windowopened(windowevent e); 31

Terminator class class Terminator implements WindowListener { public void windowclosing(windowevent e) { Window w = e.getwindow(); // delete top-level frame, release OS resources, // generate WindowClosed event w.dispose(); public void windowclosed(windowevent e) { // terminate the application System.exit(0); // other five methods do nothing void windowactivated(windowevent e) { void windowdeactivated(windowevent e){ void windowdeiconified(windowevent e) { void windowiconified(windowevent e) { void windowopened(windowevent e) { 32

Register WindowListener public OnOffSwitch () { super("on/off Switch"); // frame title this.addwindowlistener(new Terminator()); // create button and set its colors JButton button = new JButton("On/Off"); button.setforeground(color.black); button.setbackground(color.white); // create and register button s listener: button.addactionlistener(new Switcher()); // add button to JFrame s content pane: this.getcontentpane().add(button); 33

Problem A window listener must implement all 7 methods of WindowListener interface We only care about 2 of those methods à lots of annoying boilerplate SoluHon: WindowAdapter 34

Adapter classes: Swing provides a collechon of abstract event adapter classes These adapter classes implement listener interfaces with empty, do- nothing methods To implement a listener class, we extend an adapter class and override just the methods we need 35

Terminator class (II) class Terminator extends WindowAdapter { public void windowclosing(windowevent e) { Window w = e.getwindow(); w.dispose(); public void windowclosed(windowevent e) { System.exit(0); 36