Swing week date Day 1 (Mon/Tues) Day 2 (Tues/Wed) Day 3 - PowerPoint PPT Presentation

Swing week date Day 1 (Mon/Tues) Day 2 (Tues/Wed) Day 3 (Thurs/Fri) 1 Jan 9 Intro Ariane 5 More Software Disasters 2 Jan 16 Software Quality Requirements Requirements (assn 1 due Friday) 3 Jan 23 Assignment Discussion Requirements Testing overflow 4 Jan 30 Test Plans Usability Java/UML (assn 2 due Thursday) 5 Feb 6 Java/UML Swing Swing 6 Feb 13 Swing Swing Swing 7 Feb 27 Swing Midterm Review no class! Midterm: Wed. p.m. (assn 3 due Tuesday) 8 Mar 6 Design Patterns Design Patterns Design Patterns 9 Mar 13 Software Testing Software Testing Software Testing 10 Mar 20 Software Testing Software Testing Software Process (assn 4 due Tuesday) 11 Mar 27 Software Process Software Process Guest lecture 12 Apr 3 overflow overflow Overflow (assn 5 due Thursday) CISC 323 winter 2006, Swing 1

New Topic: GUIs GUI = Graphical User Interface Up to now : line-by-line programs: computer displays text user types text With a GUI: computer displays information all over screen (text, pictures, symbols, etc.) user enters information by clicking buttons, choosing menu options, typing text into special boxes, etc. Advantages of GUIs: prettier, more fun more user-friendly CISC 323 winter 2006, Swing 2

Why Study GUIs Now? 1. Good OOP practice 2. Useful (CISC 323 & later) 3. Fun / motivating 4. Learn about event-driven programming CISC 323 winter 2006, Swing 3

Goals & Readings This is a big topic – can't learn it all in 2 weeks! Goals : • learn the basics • lay a foundation so you can look up more Required Reading : chapter in courseware Optional Extra Readings : • listed on web, mostly Java Tutorial if you want more details, extra examples CISC 323 winter 2006, Swing 4

Sub-Topics 1. Basics (getting a Frame up & running) 2. Layouts (how to put things into your Frame) 3. Actions (making your components do things) 4. More kinds of components 5. Making your Frame pretty: colors, fonts, icons 6. Changing frames 7. Dialogs CISC 323 winter 2006, Swing 5

GUI Libraries Early GUIs: write your own, huge amount of work Common style emerged: buttons, text boxes, menus Libraries to help you write GUI programs X-Windows for Unix/Linux Microsoft Foundation Classes (MFC) for Windows something else for Macs none portable AWT = Abstract Windows Toolkit part of Java API classes for writing portable GUI programs easier to use than MFC CISC 323 winter 2006, Swing 6

Swing Extension to AWT : part of Java API in versions 1.2 & later • some new features (file & color choosers, fancier graphics features) • replaced some items with improved versions • some improvements to existing features (double buffering) • most Swing class start with "J": • JButton • JFrame • etc. Still use parts of AWT that Swing hasn't replaced: same old layout managers, basic graphics commands CISC 323 winter 2006, Swing 7

Tasks in GUI Programming 1. Getting your screen to look the way you want it to. (laying out components – buttons, text boxes, etc.) 2. Getting the program to do what you want it to. (functionality) These tasks are fairly independent. Common order: 1. get screen looking right, no functionality 2. add functionality Another possibility: 1. put components on screen, quick & sloppy 2. add functionality, debug 3. improve appearance CISC 323 winter 2006, Swing 8

Kinds of Components Task for Assignment 3: design user interface What kinds of components can you use? • buttons • text fields • labels • pop-up windows (JOptionPane & dialogs) • combo boxes (drop-down list of choices) • optional: different fonts & colours, icons CISC 323 winter 2006, Swing 9

Getting a Window Running First Swing class to learn: JFrame A frame is a window with: • a border • a title • menu bar (optional) • minimize, maximize, close buttons • inner area for contents CISC 323 winter 2006, Swing 10

The Basics: Creating a Frame First practical task : get a window up on your screen and be able to exit gracefully "baby" demos Purpose : show how to get a simple frame onto the screen Summary : • convention is to subclass JFrame • must explicitly make the frame visible • must set size or get tiny frame • must specify window-closing behavior Programs are on the web for your reference CISC 323 winter 2006, Swing 11

Next Sub-Topic: Layouts 1. Basics (creating a Frame with one button) � ← 2. Layouts (how to put things into your Frame) 3. Actions (making your components do things) 4. More kinds of components 5. Making the Frame pretty: colors, fonts, icons 6. Changing frames 7. Dialogs CISC 323 winter 2006, Swing 12

Layout Managers Layout manager decides: • position of each component in frame • size of each component • what changes when window is resized Programmer's job : give layout manager some general instructions CISC 323 winter 2006, Swing 13

Different Kinds of Layout Managers We will concentrate on three: • BorderLayout • FlowLayout • GridLayout Each has different purpose, different layout algorithms. Real power comes from combining them -- different parts of frame. CISC 323 winter 2006, Swing 14

Sizes of Components Every component has a " preferred size " For buttons and labels, based on the text and the font Sometimes layout managers " stretch " components Button at preferred size: Same button, stretched : CISC 323 winter 2006, Swing 15

BorderLayout Default layout manager for frames Frame has 5 positions: North, South, East, West, Center Demo.... Rules : • max of 1 component in each position • north & south stretched horizontally to fit frame • east & west stretched vertically • center stretched both ways CISC 323 winter 2006, Swing 16

GridLayout Lays out components in a rectangular grid Demo... Rules : • components are stretched to fill frame • all components are stretched to exactly the same size • specify number of rows OR number of columns CISC 323 winter 2006, Swing 17

FlowLayout Adds components left to right Demo.... Rules : • components always at preferred sizes, never stretched • breaks into multiple rows if necessary • can specify alignment CISC 323 winter 2006, Swing 18

Combining Layouts Now we know about 3 kinds of layouts Each fairly limited by itself Can sub-divide frame into sections, lay each out individually (each section called a "panel“) Java class: JPanel • a component which is also a Container • can add other components to a JPanel • to create: new JPanel(new GridLayout(2,0)); or: new JPanel(); // default is FlowLayout CISC 323 winter 2006, Swing 19

Panel Example Suppose we want to put 6 buttons in a frame like this: on web: SimplePanelDemo.java CISC 323 winter 2006, Swing 20

Calculator Example (1) CISC 323 winter 2006, Swing 21

Calculator Example (2) First job : layout 3 Second job : functionality How to lay out? 1 Identify 3 sections of screen Section 1 : 12 buttons in panel with 4x3 grid layout Section 2 : 5 buttons in panel 2 5x1 grid Section 3 : text field Use BorderLayout to lay these sections out on JFrame CISC 323 winter 2006, Swing 22

Next Sub-Topic: Actions � 1. Basics (creating a frame with one button) � 2. Layouts (how to put things into your frame) ← 3. Actions (making your components do things) 4. More kinds of components 5. Making your frame pretty: colors, fonts, icons 6. Changing frames 7. Dialogs CISC 323 winter 2006, Swing 23

Events GUI programs are " event-driven " many kinds of events in a GUI program: • user clicks button • user types a key • window is re-sized • user chooses menu item • etc. Programmer chooses which types of events program will react to and how CISC 323 winter 2006, Swing 24

Event-Driven Programming Normal line-oriented program: • Program specifies exactly what will happen. • Knows when input will arrive. • Makes decision on the basis of the input. Event-Driven GUI Program: set things up, then programmer’s responsibility in infinite loop: wait for a event Swing’s responsibility react to the event CISC 323 winter 2006, Swing 25

ActionEvent Class describes a simple event like a button click or menu choice methods: getSource() : returns the component that "caused" the event (button that was clicked) getActionCommand() : returns the label from the component as a String CISC 323 winter 2006, Swing 26

Event Handlers Event Handler = method that reacts to an event. For every possible event that you care about: • write an event handler: takes an ActionEvent object as a parameter • " register " the handler with a component: "please call this method when someone clicks this button." In Java, an event handler is packaged inside an object called a "listener". CISC 323 winter 2006, Swing 27

ActionListener interface public interface ActionListener { void actionPerformed(ActionEvent e); } This is the event handler method Program can register an action listener for a button. Meaning : when button is clicked, call actionPerformed in this listener CISC 323 winter 2006, Swing 28