UID – Swing and Graphics Chris Coleman

Slides:



Advertisements
Similar presentations
G5BUID - Java Swing What is Swing? A part of The Java Foundation Classes Swing Look and feel Accessibility Java 2D (Java 2 onwards) Drag and Drop.
Advertisements

Custom Painting Gestione della Grafica customizzata Vedi anche:
Applets and Graphics.
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.
Fun with Swing Chapter 9. Overview Swing vs. AWT Creating windows and panels. Displaying formatted text in panels. Drawing graphics (lines, circles, etc.)
Computer Science 209 Images and GUIs. Working with Java Colors The class java.awt.Color includes constants, such as Color.red, for some commonly used.
Web Design & Development Lecture 19. Java Graphics 2.
1 More on Applets Overview l Changing Colors l Changing Fonts & Styles l Applet Life-Cycle l Input using Dialog Window l Input using HTML parameters l.
Frame Windows A frame object is used to create a graphical frame window. This frame is used to show information in a graphical application. The JFrame.
Graphics You draw on a Graphics object The Graphics object cannot directly be created by your code, instead one is generated when the method paintComponent.
Graphics Chapter 16.  If you want to draw shapes such as a bar chart, a clock, or a stop sign, how do you do it?
Cosc 5/4730 Blackberry Drawing. Screen size With Blackberry devices, they have a known screen size in pixels. If you are programming for specific device.
Graphics Programming. Introduction GOAL: Build the Indexer Client Event-driven vs. Sequential programs Terminology – Top-level windows are called “frame.
PHY-102 SAPIntroductory GraphicsSlide 1 Introductory Graphics In this section we will learn how about how to draw graphics on the screen in Java:  Drawing.
LAB SESSION 7 Graphical user interface Applet fundamentals Methods in applets Execution of an applet Graphics class.
1 Drawing C Sc 335 Object-Oriented Programming and Design Rick Mercer.
Applets Graphical Java programs Run inside web browser Platform-neutral Easy deployment--loads when needed Secure.
Chapter 4 (Horstmann’s Book) Interface Types and Polymorphism: Graphics, Timer, Animation Hwajung Lee.
Graphics Programming. In this class we will cover: Drawing lines, rectangles, and ellipses Copying an area Drawing an image.
Multithreading : animation. slide 5.2 Animation Animation shows different objects moving or changing as time progresses. Thread programming is useful.
Graphical User Interface Bonus slides Interaction Between Components & Drawing.
Draw Shapes Introduction to simple graphics. What is a graphics context? An instance of the Graphics class Graphics is ABSTRACT! You can extend Graphics.
More Java Drawing in 2D Animations with Timer. Drawing Review A simple two-dimensional coordinate system exists for each graphics context or drawing surface.
UID – Swing and Graphics Boriana Koleva
User Interface Programming in C#: Graphics
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.
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.
1 Applets Chapter 1 To understand:  why applets are used to extend the capabilities of Web pages  how an applet is executed and know about the restrictions.
DrawingPaint What is DrawingPaint ? DrawingPaint operations. What are benefits of DrawingPaint ? Jason Hoang June 2, 2005.
CS 112 GUI 06 May 2008 Bilkent. Java GUI API Containers: ◦ contain other GUI components. E.g, Window, Panel, Applet, Frame Dialog. Components: ◦ Buttons,
Java Review Structure of a graphics program. Computer Graphics and User Interfaces Java is Object-Oriented A program uses objects to model the solution.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Java Swing - Lecture 1 An Introduction Milena Radenkovic slides originally by Chris Coleman.
Chapter 16: Graphics. Objectives Learn about the paint() and repaint() methods Use the drawString() method to draw String s using various fonts and colors.
1 Interface Types & Polymorphism & introduction to graphics programming in Java.
20-753: Fundamentals of Web Programming Copyright © 1999, Carnegie Mellon. All Rights Reserved. 1 Lecture 16: Java Applets & AWT Fundamentals of Web Programming.
Java Software Solutions Lewis and Loftus Chapter 7 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphics -- Introduction The.
Graphics and Multimedia Part #2
CIS 068 Welcome to CIS 083 ! Introduction to GUIs: JAVA Swing.
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.
Chapter 17: Applets, Images, and Sound. Objectives Learn about applets Write an HTML document to host an applet Use the init() method Work with JApplet.
CSE 219 Computer Science III Images. HW1 Has been posted on Blackboard Making a Game of Life with limited options.
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.
Session 27 Swing vs. AWT. AWT (Abstract Window ToolKit) It is a portable GUI library for stand-alone applications and/or applets. The Abstract Window.
Java Graphics. Review 3 kinds of elements in components API? Layout managers Events Extend vs. Implement.
-Sai Phalgun Tatavarthy. Outline What is a “Graphing Calculator”? Graphics, Graphics2D classes Methods of Graphics object Custom Painting The paintComponent()
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
CSE 219 Computer Science III Image Manipulation. HW 1 Has been posted on Blackboard Making a Game of Life with limited.
Creating Your Own Widgets CompSci 230 S Software Construction.
1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces (GUIs)
Agenda Java Coordinate Systems. Graphics Class. Drawing on Panels. Drawing Shapes.
(C) 2010 Pearson Education, Inc. All rights reserved.  Class Graphics (from package java.awt) provides various methods for drawing text and shapes onto.
The Abstract Window Toolkit (AWT) supports Graphical User Interface (GUI) programming. AWT features include: a rich set of user interface components; a.
Deliver Information, not Just Data Design displays carefully –Visual order and user focus (control contrast) –Match the medium (mixed metaphors) –Attention.
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)
Graphics basic 1. 2 Objectives Understand Java coordinate systems. Draw things using the methods in the Graphics class. Override the paintComponent method.
Painting (Chapter 12) Java Certification Study Group January 25, 1999 Mark Roth.
Java Dynamic Graphics.
Creating Graphics in Java CSE301 University of Sunderland Harry R Erwin, PhD.
Graphics and Java2D Chapter Java Coordinate System Origin is in _____________ corner –Behind title bar of window X values increase to the ________.
Object-Oriented Software Engineering Using Threads and simple Animation.
1 Drawing C Sc 335 Object-Oriented Programming and Design Rick Mercer.
CPCS 391 Computer Graphics Lab One. Computer Graphics Using Java What is Computer Graphics: Computer graphics are graphics created using computers and,
Graphics JavaMethods An Introduction to Object-Oriented Programming Maria Litvin Gary Litvin Copyright © 2003 by Maria Litvin, Gary Litvin, and Skylight.
10/20/2005week71 Graphics, mouse and mouse motion events, KeyEvent Agenda Classes in AWT for graphics Example java programs –Graphics –Mouse events –Mouse.
Chapter 14 JavaFX Basics Dr. Clincy - Lecture.
4.14 GUI and Graphics Case Study: Creating Simple Drawings (Cont.)
Graphics -- Introduction
Presentation transcript:

UID – Swing and Graphics Chris Coleman

Today Graphics When / Why ? Painting What can be done Java 2D Full Screen API

Graphics – A big topic Could run a whole lecture course on how to use the various graphics capabilities that Swings APIs provide. Use the Tutorials and API docs at:

When do I need to use graphics? (1) Avoid using graphics if possible You may well only need icons labels and buttons borders styled text areas JEditorPane JTextPane

When do I need to use graphics? (2) May need graphics if Wish to drastically change appearance of an existing component Draw shapes to screen Draw text to screen Animation Invent / customise your own component

Painting (1) Component painting repaint() automatically called when necessary. Eg Window unhidden revalidate() automatically called before repaint when needed. Eg when component sizes or position have changed Threads and painting painting on the event-dispatching thread repaint() and revalidate() are thread safe

Painting (2) Double buffering Painting performed to off screen buffer, then flushed to screen when finished. Opaque components Improves performance. Time not spent painting behind components. Shape of painting areas always rectangular non-opaque (transparent) components can appear any shape, although need to use glass panes to mask hit detection area

Painting order Visibility based on containment hierarchy Background (if opaque) Custom painting Border Child components repaints if transparent component repaints, all components under it must also repaint. This is costly, therefore use opaque when possible

What graphics tools are available in Swing? Java AWT Graphics Basic but usually enough Shapes Text Images Java 2D graphics Extends the AWT graphics to provide much more, eg gradients, textures etc

Custom painting (1) Occurs between background and border Extend component and customise JPanel recommended e.g. class myPaintingPanel extends JPanel { can also use atomic components e.g. class myPaintingButton extends JButton { Code goes in overridden paintComponent() method public void paintComponent(Graphics g) {

Custom painting (2) When writing custom painting code should not reproduce painting functionality of any other Swing component Before doing anything else in paintComponent() invoke super.paintComponent() or setOpaque(false)

Painting coordinates Component sizes in pixels (0,0) at top left corner (width-1,height-1) at bottom right corner Border sizes (e.g. a 1-pixel border) (1,1) at top left (width-2, height-2) at bottom right General painting area for b pixel border [ {b,b} : {w-(b+1), h-(b+1)} ]

Getting painting coordinates Use component getWidth() and getHeight() Get border sizes with getInsets() e.g. to get width and height of custom painting area use something like: Insets insets = getInsets(); int currentWidth = getWidth() - insets.left - insets.right; int currentHeight = getHeight() - insets.top - insets.bottom;

Repainting custom paints Calling repaint() method requests a repaint to occur repaint() paints whole component & any others that need it if transparent repaint(int leftx,int lefty,int width,int height); only repaints a specified area Component painted after all pending events dispatched. Painting should be kept short - Done in event thread - slows GUI

Graphics - shapes and text (1) Properties stored in Graphics object. Represents state eg Color, Font, etc Methods of Graphics can draw... Shapes lines, rectangles, 3D rectangles, round-edged rectangles, ovals, arcs, polygons Text Draw string to screen as a graphic

Graphics - shapes and text (2) Drawing a shape on screen Use paintComponent Graphics void paintComponent(Graphics g) { super(g) g.setColor(Color.RED); g.drawRect(x, y, width, height); } shapes: x and y specify upper left

Graphics - shapes and text (3) Drawing a string on screen Use paintComponent Graphics again void paintComponent(Graphics g) { super(g) g.setFont(new Font(Serif, Font.PLAIN, 12)); g.drawSring(Java Swing, x, y); } x and y specify baseline left of text

Graphics - Images Swing Icons by far and away the easiest method of displaying graphics. If more features needed then use the AWT/Graphics functionality Supports GIF, PNG and JPEG NOT BMP Loading and displaying images Image myImage = Toolkit.getDefaultToolkit().getImage(filename); g.drawImage(myImage, x, y, this); g.drawImage(myImage, x, y, width, height,this);

Tracking Images MediaTracker class utility class used to track the status of a number of images for a particular component. Can get information about any errors and associated images ImageObserver interface implemented by all components can use to get notifications about loading progress of image as its constructed.

Java2D API (Graphics2D) Provides enhanced image, graphics and text capabilities Done through extensions to AWT Graphics API Amongst others provides Hit detection on Shapes text and images Complex Printing Support Texture rendering Complex Shapes/lines

Java2D Shapes Rectangle Shapes QuadCurve2D and CubicCurve2D GeneralPath Arbitrary shapes made by connecting lines

Java 2D - Text Often easier to use JLabels since much of the work is done for you Use the drawString method Eg g.drawString(Hello, x, y); To set font use setFont method Create an instance of Font

Java 2D - Images Much more powerful than basic image display Images are best rendered in a Buffer off screen as a BufferedImage Then drawn to screen with call to Graphics2D.drawImage Graphics2D provides variety of image filtering options sharpen/blur, rotate, transform, scale etc

Java 2D – (VERY) Basic use Simply cast the Graphics object to Graphics2D void paintComponent(Graphics g) { super(g); Graphics g2 = (Graphics2D)g.create(); g2.setColor(Color.BLACK); g2.drawRect(x, y, width, height); g2.dispose(); }

The Full Screen API Full Name: Full Screen Exclusive API Introduced in JDK 1.4 Allows programmer to suspend windowing system and draw directly to the screen Good for games, slide shows and dedicated terminal applications Not covered here, but excellent tutorial found here:

Coursework (1) Tips… Remember to relate features you design back to the users you defined. Any design of application is ok SO LONG AS ITS REASONABLY JUSTIFIED WITH REFERENCE TO YOUR USERS AND DESIGN PRINCIPLES Grab images off web to increase niceness of your application

Coursework (2) Finally, if the Swing is a struggle – remember that time spent adding little bits of functionality could also be spent writing the report which is still worth 40% of the total. Its a UID course – NOT a Swing Showcase…

Coursework (3) Not allowed to use JBuilder – sorry… Must code all Swing yourself Deadline 3:30pm Thursday 15th November Plagiarism – (Cheating) and a reminder not to All code is checked against all others, the web and the past couple of years submissions by a very clever computer…

Coursework (3) Support Will answer as much as I can, Try to provide as much info as possible about the problem. Labs Mondays 2-5 A05 Example Code available at:

Summary Swing +ves Swings good because its Platform Independent Swing makes it easy to construct simple GUIs quickly Swing –ves Swing is not always as Platform Independent as it claims Can get confusing when GUIs get BIG, but aided by using an IDE Java - its not the fastest language ever...

The End.