(c) University of Washington07-1 CSC 143 Introduction to Graphical Interfaces in Java: AWT and Swing Reading: Ch. 17.

Slides:



Advertisements
Similar presentations
Introduction to Java 2 Programming
Advertisements

2D Graphics Drawing Things. Graphics In your GUI, you might want to draw graphics E.g. draw lines, circles, shapes, draw strings etc The Graphics class.
Graphics Programming. Introduction GOAL: Build the Indexer Client Event-driven vs. Sequential programs Terminology – Top-level windows are called “frame.
Graphic User Interfaces Layout Managers Event Handling.
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
CSE 331 Software Design & Implementation Hal Perkins Winter 2013 Java Graphics & GUIs 1.
GUI and Swing, part 2 The illustrated edition. Scroll bars As we have previously seen, a JTextArea has a fixed size, but the amount of text that can be.
1 Chapter 7 Graphics and Event Handling. 2 Overview The java.awt and javax.swing packages and their subpackages support graphics and event handling. Many.
Graphics Programming With Applets Feb 23, Applets There are three different types of executable java code. –Standalone application, which has main()
Graphics Programming. In this class, we will cover: The difference between AWT and Swing Creating a frame Frame positioning Displaying information in.
Advanced Java Class GUI – part 1. Intro to GUI GUI = Graphical User Interface -- “Gooey” Just because it’s “gooey” does not mean you may write messy code.
GUI and Event-Driven Programming Recitation – 3/6/2009 CS 180 Department of Computer Science, Purdue University.
1 GUI Elements in Java Nelson Padua-Perez Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.
1 CMSC 132: Object-Oriented Programming II Nelson Padua-Perez William Pugh Department of Computer Science University of Maryland, College Park.
CS 112 GUI 06 May 2008 Bilkent. Java GUI API Containers: ◦ contain other GUI components. E.g, Window, Panel, Applet, Frame Dialog. Components: ◦ Buttons,
Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.
Unit 11 Object-oriented programming: Graphical user interface Jin Sa.
PROGRAMMING REVIEW Lab 2 EECS 448 Dr Fengjun Li and Meenakshi Mishra.
Java Programming Chapter 10 Graphical User Interfaces.
20-753: Fundamentals of Web Programming Copyright © 1999, Carnegie Mellon. All Rights Reserved. 1 Lecture 16: Java Applets & AWT Fundamentals of Web Programming.
Chapter 13 Advanced GUIs and Graphics. Chapter Objectives Learn about applets Explore the class Graphics Learn about the class Font Explore the class.
Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
CIS 068 Welcome to CIS 083 ! Introduction to GUIs: JAVA Swing.
JAPPLET.
Learn about the types of Graphics that are available Develop a basic Graphics applet Develop a basic Graphics application Review the Java API and use.
Applets and Frames CS 21a: Introduction to Computing I First Semester,
CSE 219 Computer Science III Graphical User Interface.
Adding Graphics to a Frame Application Applets: Can generate drawings by overriding paint Frame: Do not draw directly on a frame. Draw graphics on a JPanel.
3461A Readings from the Swing Tutorial. 3461A Overview  The follow is the Table of Contents from the trail “Creating a GUI with JFC/Swing” in the “The.
Java Programming: Advanced Topics 1 Common Elements of Graphical User Interfaces Chapter 6.
Field Trip #19 Animations with Java By Keith Lynn.
 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.
– Advanced Programming P ROGRAMMING IN Lecture 21 Introduction to Swing.
1 Outline 1 Introduction 2 Overview of Swing Components 3 JLabel 4 Event Handling 5 TextFields 6 How Event Handling Works 7 JButton 8 JCheckBox and JRadioButton.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
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.
Object Oriented programming Instructor: Dr. Essam H. Houssein.
Creating Your Own Widgets CompSci 230 S Software Construction.
Object Oriented Programming Engr. M. Fahad Khan Lecturer, Software Engineering Department University of Engineering & Technology, Taxila.
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.
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
CS324e - Elements of Graphics and Visualization Java GUIs - Event Handling.
University of Limerick1 Software Architecture Java Layout Managers.
Lec.10 (Chapter 8 & 9) GUI Jiang (Jen) ZHENG June 27 th, 2005.
3461 Laying Out Components Interior Design for GUIs.
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.
Intro to Applets. Applet Applets run within the Web browser environment Applets bring dynamic interaction and live animation to an otherwise static HTML.
1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces (GUIs)
Introduction to Java Chapter 9 - Graphical User Interfaces and Applets1 Chapter 9 Graphical User Interfaces and Applets.
Review_6 AWT, Swing, ActionListener, and Graphics.
Basics of GUI Programming Chapter 11 and Chapter 22.
Creating a Window. A basic window in Java is represented by an object of the class Window in the package java.awt.
Graphical User Interface (GUI) Two-Dimensional Graphical Shapes.
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
Graphical User Interface (GUI)
Introduction to GUI Programming in Java: Frames, Simple Components, and Layouts.
Getting Started with GUI Programming Chapter 10 CSCI 1302.
Introduction to Swing Mr. Crone. What is Swing? a collection of pre-made Java classes used to create a modern graphical user interface.
Object-Orientated Analysis, Design and Programming
Graphical User Interfaces
Chapter 9: Graphical User Interfaces
Java Swing.
Tim McKenna Layout Mangers in Java Tim McKenna
Creating Graphical User Interfaces
Introduction to Graphical Interfaces in Java: AWT and Swing
Graphical User Interface
Presentation transcript:

(c) University of Washington07-1 CSC 143 Introduction to Graphical Interfaces in Java: AWT and Swing Reading: Ch. 17

(c) University of Washington07-2 Overview Roadmap Today: introduction to Java Windows and graphical output Future: event-driven programs and user interaction Topics A bit of history: AWT and Swing Some basic Swing components: JFrame and JPanel Java graphics Reading: Textbook: Ch. 17 Online: Sun Java Swing tutorial (particularly good for picking up details of particular parts of Swing/AWT); Swing API javadoc web pages

(c) University of Washington07-3 Graphical User Interfaces GUIs are a hallmark of modern software Hardly existed until Mac's came along Picked up by PC's and Unix later User sees and interacts with “controls” or “components” menus scrollbars text boxes check boxes buttons radio button groups graphics panels etc.

(c) University of Washington07-4 Opposing Styles of Interaction “Algorithm-Driven” When program needs information from user, it asks for it Program is in control Typical in non-GUI environments “Event Driven” When user wants to do something, he/she signals to the program Moves or clicks mouse, types, etc. These signals come to the program as “events” Program is interrupted to deal with the events User has more control Typical in GUI environments

(c) University of Washington07-5 A Bit of Java History Java 1.0: AWT (Abstract Windowing Toolkit) Java 1.1: AWT with new event handling model Java 1.2 (aka Java 2): Swing Greatly enhanced user interface toolkit built on top of AWT Same basic event handling model as in Java 1.1 AWT developed originally on top of Java 1.1, standard in Java 1.2 Java 1.3, 1.4, 1.5 Incremental changes; no major revolution Naming Most Swing components start with J. No such standard for AWT components

(c) University of Washington07-6 Bit o' Advice 1.Use Swing whenever you can 2.Use AWT whenever you have to

(c) University of Washington07-7 Components & Containers Every GUI-related component descends from Component, which contains dozens of basic methods and fields common to all AWT/Swing component "Atomic" components: labels, text fields, buttons, check boxes, icons, menu items, … Some components are Container s – components like panels that can contain other subcomponents Component Container JComponent JPanelJFileChooser tons of J components various AWT containers Lots of AW componjents

(c) University of Washington07-8 Types of Containers Top-level containers: JFrame,JDialog, JApplet Often correspond to OS Windows Mid-level containers: panels, scroll panes, tool bars, … can contain certain other components JPanel is best for general use An Applet is a special kind of container Specialized containers: menus, list boxes, combo boxes... Technically, all J components are containers

(c) University of Washington07-9 JFrame – A Top-Level Window Top-level application window JFrame win = new JFrame(“Optional Window Title”); Some common methods setSize(int width, int height);// frame width and height setBackground(Color c);// background color show( );//make visible (for the first time) repaint( );// request repaint after content change setPreferredSize(Dimension d);// default size for window; also can set min // and max sizes dispose( );// get rid of the window when done Look at project GUIs to see some of these at work

(c) University of Washington07-10 JPanel – A General Purpose Container Commonly added to a window to provide a space for graphics, or collections of buttons, labels, etc. JPanels can be nested to any depth Many methods in common with JFrame (since both are ultimately instances of Component) setSize(int width, int height); setBackground(Color c); setPreferredSize(Dimension d); Bit o' advice : Can't find the method you're looking for? Check the superclass.

(c) University of Washington07-11 Adding Components to Containers Swing containers have a “content pane” that manages the components in that container [Differs from original AWT containers, which managed their components directly] To add a component to a container, get the content pane, and use its add method JFrame jf = new JFrame( ); JPanel panel = new JPanel( ); jf.getContentPane( ).add(panel); or Container cp = jf.getContentPane( ); cp.add(panel);

(c) University of Washington07-12 Non-Component Classes Not all classes are GUI components AWT Color, Dimension, Font, layout managers Shape and subclasses like Rectangle, Point, etc. Graphics Swing Borders Further geometric classes Graphics2D Other (in java.awt.Image, javax.swing.Icon, etc…) Images, Icons

(c) University of Washington07-13 Layout Managers What happens if we add several components to a container? What are their relative positions? Answer: each container has a layout manager Several different kinds: FlowLayout (left to right, top to bottom); BorderLayout(“center”, “north”, “south”, “east”, “west”); GridLayout (2-D grid), GridBagLayout (makes HTML tables look simple); others Container state is “valid” or “invalid” depending on whether layout manager has arranged components since last change Default LayoutManager for JFrame is BorderLayout Default for JPanel is FlowLayout

(c) University of Washington07-14 pack and validate When a container is altered, either by adding components or changes to components (resized, contents change, etc.), the layout needs to be updated (i.e., the container state needs to be set to valid) Swing does this automatically more often than AWT, but not always Common methods after changing layout validate( ) – redo the layout to take into account new or changed (sub-)components pack( ) – redo the layout using the preferred size of each (sub-) component

(c) University of Washington07-15 Layout Example Create a JFrame with a button at the bottom and a panel in the center JFrame frame = new JFrame(“Trivial Window”); //default layout: Border JPanel panel = new JPanel( ); JLabel label = new JLabel(“Smile!”); label.setHorizontalAlighment(SwingConstants.CENTER); Container cp = frame.getContentPane( ); cp.add(panel, BorderLayout.CENTER); cp.add(label, BorderLayout.SOUTH);

(c) University of Washington07-16 Graphics and Drawing The windows, panes, and other components supplied with Swing are sufficient for predefined GUI components For more complex graphics, extend a suitable class and override the (empty) inherited method paintComponent that draws its contents public class Drawing extends JPanel {... /** Repaint this Drawing whenever requested by the system */ public void paintComponent(Graphics g) { super.paintComponent(g); // to paint in the right order Graphics2D g2 = (Graphics2D) g; //good idea for Swing components g2.setColor(Color.green); g2.drawOval(40,30,100,100); g2.setColor(Color.red); g2.fillRect(60, 50, 60, 60); } …

(c) University of Washington07-17 paintComponent Method paintComponent is called by the underlying system whenever it needs the window to be repainted Triggered by window being move, resized, uncovered, expanded from icon, etc. Can happen anytime – you don’t control when In AWT days, you overrode paint( ). With Swing, it is best to leave paint alone and override paintComponent If your code does something that requires repainting, call method repaint( ) Requests that paintComponent be called sometime in the future, when convenient for underlying system window manager

(c) University of Washington07-18 Painter's Rules Always override paintComponent( ) of any component you will be drawing on Not necessary if you make simple changes, like changing background color, title, etc. that don't require a graphics object Never call paint( ) or paintComponent( ). Never means never! This is a hard rule to understand. Follow it anyway. Always paint the entire picture, from scratch Don't create a Graphics or Graphics2D object to draw with only use the one given to you as a parameter of paintComponent( ) and, don't save that object to reuse later! This rule is bent in advanced graphics applications

(c) University of Washington07-19 What Happens If You Don't Follow The Rules...

(c) University of Washington07-20 What Happens If You Don't Follow The Rules...

(c) University of Washington07-21 Classes Graphics and Graphics2D The parameter to paintComponent or paint is a graphics context where the drawing should be done Class Graphics2D is a subclass of Graphics, with better features In Swing components, the parameter has static type Graphics, but dynamic type Graphics2D so cast it to a 2D and use that. More procedural-like interface than uwcse.graphics.GWindow Call Graphics methods to draw on the Graphics object [instead of creating new shape objects and adding them to the window]

(c) University of Washington07-22 Drawing Graphical Objects Many graphical objects implement the java.awt.Shape interface When possible, chose a Shape rather than a non-Shape Lots of methods available to draw various kinds of outline and solid shapes and control colors and fonts setColor, setFont, drawArc, drawLine, fillPolygon, drawOval, fillRect, many others

(c) University of Washington07-23 Preparing for Future Projects In reading and experimenting, focus on these classes: JPanel (and ancestors) (interface) Shape Line2D Polygon Graphics2D, especially these methods: draw(Shape) draw(String, int, int) fill(Shape) setColor(Color) There are also methods like drawLine, drawPolygon, etc… i

(c) University of Washington07-24 Roadmap Future Events User interaction GUI components What to do Start reading textbook chs. 19 and 20 Browse the Swing tutorial and Java Swing/AWT documentation from Sun to start to feel your way around Focus on the classes listed previously