lec17 - 1.00 Lecture 17 Introduction to Swing Reading for...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: 1.00 Lecture 17 Introduction to Swing Reading for next time: Big Java: sections 12.1-12.6 Swing • Package of user interface classes for windows, menus, scroll bars, buttons, etc. • Independent of hardware and operating system (as long as they can paint a window) – Swing gains independence but loses performance by not relying on native drawing calls – Has Windows, Mac, other look and feel options • Supersedes Java Abstract Window Toolkit (AWT) though it still uses many non-drawing classes from that library. You will usually: import java.awt.*; import java.awt.*; javax.swing.*; import javax.swing.*; 1 The 3 Flavors of GUI Objects • Top Level Windows: are containers that are not contained by any other containers; they can be iconified or dragged and interact with the native windowing system – Example: JFrame, JDialog JFrame JDialog • Containers: some JComponents are designed to hold other JComponents components, not to present info or interact with the user – Examples: JPanel , JScrollPane JPanel JScrollPane • JComponents: present information or interact with the user – Examples: labels (JLabel), buttons (JButton), text fields (JTextField) – JFrame and JDialog are not Jcomponents Jcomponents Anatomy of a JFrame JFrame Look and Feel, platform dependent Interacts with the window system JFrame has a contentPane, which is the container that will hold your content 2 Coordinates 0,0 y Screen x y Frame x Submit Clear Measured in pixels (e.g. 640 by 480, 1024 by 768, etc.) By tradition, upper left hand corner is origin (0,0) X axis goes from left to right, y from top to bottom Exercise 1: Empty JFrame // Download, read and run this program // Download, read and run this program javax.swing.*; import javax.swing.*; class public class SwingTest { static void main(String args) public static void main(String args) { Create new frame // Create new frame new JFrame(); JFrame frame= new JFrame(); Tells program to exit when user closes this frame // Tells program to exit when user closes this frame frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Frame has default size; give it size // Frame has 0 default size; give it a size 300); frame.setSize(400, 300); // setSize(int x, int y) Frame invisible by default; make it visible // Frame invisible by default; make it visible frame.setVisible(true); frame.setVisible(true); } main() ends but Swing “thread” stays alive // main() ends but Swing “thread” stays alive } Run the program; see what it draws // Run the program; see what it draws 3 Frames, Panes and Panels paint Component (on panel) y or JLabel (on panel) x JFrame Text message Button contentPane, obtained from frame JPanel (on pane, can be many) JButton (on panel, can be many) Exercise 2: Panel with Color // Download, read and run this program // Download, read and run this program java.awt.*; import java.awt.*; javax.swing.*; import javax.swing.*; class SwingTest2 public class SwingTest2 { static void main(String args) public static void main(String args) { new 1.00”); JFrame frame = new JFrame(“Welcome to 1.00”); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(500,500); contentPane= frame.getContentPane(); No Container contentPane= frame.getContentPane(); // No J We never draw on JFrame. Instead we update // We never draw on a JFrame. Instead we update components that are added to its // components that are added to its contentPane new JPanel(); JPanel panel = new JPanel(); panel.setBackground(Color.pink); panel.setBackground(Color.pink); Add panel to the the // Add panel to the contentPane of the JFrame contentPane.add(panel); contentPane.add(panel); frame.show(); } } 4 More Complex Drawing • The JFrame in the preceding example contained a JFrame simple, colored JPanel JPanel – 13 predefined colors: Color.x where x is Color.x orange, pink, cyan, magenta, yellow, black, blue, orange, pink, cyan, magenta, yellow, black, blue, gray, lightGray, darkGray, red, green white, gray, lightGray, darkGray, red, green – You can create your own colors (see text, section 4.5) • If we want to accomplish more complex drawing, we need to build new UI components. These components are created by extending existing Swing JPanel JComponent classes, like JPanel or JComponent by: – overriding the base class paintComponent() method and/or paintComponent() paintComponent – adding members (JPanel, JButton, etc.) and methods to the JButton base class Frames, Panes and Panels • Top-level window is a Java frame (JFrame) – JFrame is container for user interface elements, primarily panes (contentPane) • Programs draw UI components on panes Container contentPane= getContentPane(); Container contentPane= getContentPane(); new JButton(“Quit”); Buttons, text boxes, etc. JButton q= new JButton(“Quit”); // Buttons, text boxes, etc. contentPane.add(q); contentPane.add(q); – To draw on a pane, use inheritance: • Create a subclass of JPanel or other component to do what you JPanel want • Redefine (override) the paintComponent method in your subclass paintComponent • paintComponent has Graphics object as argument paintComponent Graphics • Graphics object stores data on fonts and colors, and has drawing methods that you can use • Bring up class WelcomePanel in Eclipse: 5 Exercise 3: WelcomePanel // Download WelcomePanel // Download java.awt.*; import java.awt.*; javax.swing.*; import javax.swing.*; class public class WelcomePanel extends JPanel { public void paintComponent(Graphics g) { void Have default operations // Have JPanel paintComponent do default operations such as background color, etc. // such as background color, etc. super.paintComponent(g); super.paintComponent(g); g.drawString(“Welcome to 1.00", 125, 150); 1.00", 125, 150); The last two arguments of // The last two arguments of drawString indicate that the message should be drawn at (x,y) // that the message should be drawn at (x,y) = (125,150) // (125,150) } } Exercise 3: Panel with Text • Modify SwingTest2 main to use this new component. – Change: JPanel new JPanel(); JPanel panel = new JPanel(); – to: WelcomePanel new WelcomePanel(); WelcomePanel panel = new WelcomePanel(); – Remove: panel.setBackground(Color.pink); panel.setBackground(Color.pink panel.setBackground(Color.pink); • Run SwingTest2 main again. – This time we’ll see a JFrame containing our new component. 6 Graphics • Graphics class can draw lines, ellipses, etc. – Very limited: single thickness, no rotation, etc. • Java2D library is much more functional – Uses Graphics2D, not Graphics objects • Some casting is needed (but little thought) – There are two versions of the Java2D library: double and float. Use the double version: • • • • Rectangle2D.Double() Rectangle2D.Double() Line2D.Double(), Line2D.Double(), etc. (Remember these from inner classes?) You can drop the .Double part sometimes; see examples .Double Exercise 4: Drawing • To utilize the Graphics2D package, we’ll create a new UI component, CirclePanel, that uses paintComponent Graphics2D calls in its paintComponent method. • To access the Graphics2D package, we must import the following: import java.awt.geom.*; import java.awt.geom.*; • Bring up class CirclePanel in Eclipse: 7 Exercise 4: Drawing, p.2 import javax.swing.*; import javax.swing.*; java.awt.*; import java.awt.*; java.awt.geom.*; For 2D classes import java.awt.geom.*; // For 2D classes class public class CirclePanel extends JPanel { void public void paintComponent(Graphics g) { super.paintComponent(g); super.paintComponent(g); g2= (Graphics2D) g; Graphics2D g2= (Graphics2D) g; 200, 150, 100, 100; int x = 200, y = 150, w = 100, h = 100; Ellipse: top left corner(x,y), width height // Ellipse: top left corner(x,y), width = height circle= new Ellipse2D.Double(x,y,w,h); Ellipse2D circle= new Ellipse2D.Double(x,y,w,h); g2.setPaint(Color.blue); g2.draw(circle); } } Exercise 4: Drawing, p.3 • Substitute CirclePanel for WelcomePanel in SwingTest2 CirclePanel WelcomePanel SwingTest2 main SwingTest2 • When you run SwingTest2 main, you should see a JFrame JFrame containing a panel that paints a blue outline of a circle. • Add code to CirclePanel’s paintComponent method so CirclePanel paintComponent that it: – Creates one Ellipse2D, Rectangle2D, and Line2D object. Ellipse2D, Rectangle2D Line2D – Makes a different colored object – Makes a filled object – Draws some text using Graphics2D.drawString Graphics2D.drawString 8 Exercise 4: Drawing, p.4 • Constructor Summary: all arguments are doubles, w is width, h is height, x,y are coordinates corresponding to upper left corner – new Ellipse2D.Double(x,y,w,h) Ellipse2D.Double(x,y,w,h) – new Rectangle.Double(x,y,w,h) Rectangle.Double(x,y,w,h) – new Line2D.Double(x1,y1,x2,y2) Line2D.Double(x1,y1,x2,y2) • Code paintComponent in stages: add one 2D object at a time and check if it works as expected – To change the color that objects are painted, invoke the setPaint method on g2, your Graphics2D object. setPaint can take a single Color argument (e.g.,Color.blue) – To draw a ‘filled object,’ invoke the fill method on g2, your Graphics2D object. fill can take a single Ellipse2D or Rectangle2D object as its argument. Fonts • Standard constructor: Font Font myFont = new Font( String name, int style, int size ); Font( String name, ); • Font name: safe approach is to use a logical font name, one of – "SansSerif", "Serif", "Monospaced", SansSerif", "Serif", "Monospaced Monospaced", "DialogInput DialogInput", "Symbol" "Dialog", "DialogInput", "Symbol" • Four font styles are present: Font.y where y is – Font.PLAIN, Font.BOLD, Font.ITALIC Font.BOLD, Font.ITALIC – Font.BOLD + Font.ITALIC Font.ITALIC • Size is point size; 12 corresponds to standard printed text 9 Exercise 5: Font // Download the following program // Download the following program javax.swing.*; import javax.swing.*; java.awt.*; import java.awt.*; class public class FontPanel extends JPanel { Font fonts= private Font fonts= { Font("Monospaced", Font.PLAIN, 24) }; new Font("Monospaced", Font.PLAIN, 24) }; void public void paintComponent(Graphics g) { super.paintComponent(g); super.paintComponent(g); g2= (Graphics2D) g; Graphics2D g2= (Graphics2D) g; baseY= 50; int baseY= 50; f; Font f; (int 0; fonts.length; i++) for (int i= 0; i < fonts.length; i++) { fonts[i]; f= fonts[i]; g2.setFont(f); g2.drawString(f.getFontName() + " " + f.getSize(), 50, baseY); f.getSize(), 50, baseY); f.getSize() 20; baseY += f.getSize() + 20; } } } Exercise 5: Font, p.2 • Substitute FontPanel for CirclePanel in SwingTest2 FontPanel CirclePanel SwingTest2 main SwingTest2 • When you run SwingTest2 main, you should see a JFrame JFrame containing a panel with the text “Monospaced.plain 24” • Add 3 new Font objects to the Font fonts Font Font – Do this using the Font constructor on the previous slide Font with new combinations of Font names, Font styles, and Font sizes. 10 Building with Components • As simple as our first application is, we can build some interesting variations with little additional code. • JLabels can hold images as well as or instead of text. • A contentPane has 5 zones where you can add a component. Components are placed using the BorderLayout class BorderLayout North West Center East South A Simple Image Viewer, 1 import javax.swing.*; import javax.swing.*; java.awt.*; import java.awt.*; java.net.*; import java.net.*; class public class ImageView extends JFrame { URL source; private URL source; String title; private String title; ImageView( String u, String public ImageView( String u, String t ) { t; title = t; try { new URL( ); source = new URL( u ); } catch ( MalformedURLException e ) { System.out.println( "Bad URL source ); System.out.println( "Bad URL " + source ); ); System.exit( 1 ); } 11 A Simple Image Viewer, 2 // Constructor, continued (usual approach in Swing) // Constructor, continued (usual approach in Swing) setDefaultCloseOperation( EXIT_ON_CLOSE ); setDefaultCloseOperation( EXIT_ON_CLOSE ); contentPane= getContentPane(); Container contentPane= getContentPane(); Make label of the image from the URL // Make a label of the image from the URL new ImageIcon( source ); ImageIcon image = new ImageIcon( source ); new JLabel( image, JLabel imageLabel = new JLabel( image, SwingConstants.CENTER ); contentPane.add(imageLabel, contentPane.add(imageLabel, BorderLayout.CENTER ); Make 2nd label of the title // Make a 2nd label of the title new JLabel( title, JLabel titleLabel = new JLabel( title, SwingConstants.CENTER ); contentPane.add( titleLabel, contentPane.add( titleLabel, BorderLayout.SOUTH ); pack(); } A Simple Image Viewer, 3 public static void main( String public static void main( String args ) { String url = "; " server "; title "The New String title = "The New Stata Center"; new ImageView( url, title ); ImageView view = new ImageView( url, title ); view.show(); } } 12 ...
View Full Document

This note was uploaded on 11/29/2011 for the course CIVIL 1.00 taught by Professor Georgekocur during the Spring '05 term at MIT.

Ask a homework question - tutors are online