1 / 267

1052 Series for Graphics Graphics, Applets Graphical User Interfaces

1052 Series for Graphics Graphics, Applets Graphical User Interfaces. Outline - Chapter 2. Graphics Applets Drawing Shapes. Introduction to Graphics. The last few sections of each chapter of the textbook focus on graphics and graphical user interfaces

patty
Télécharger la présentation

1052 Series for Graphics Graphics, Applets Graphical User Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 1052 Series for Graphics Graphics, Applets Graphical User Interfaces CLH GUI slides

  2. Outline - Chapter 2 Graphics Applets Drawing Shapes CLH GUI slides

  3. Introduction to Graphics • The last few sections of each chapter of the textbook focus on graphics and graphical user interfaces • A picture or drawing must be digitized for storage on a computer • A picture is made up of pixels (picture elements), and each pixel is stored separately • The number of pixels used to represent a picture is called the picture resolution • The number of pixels that can be displayed by a monitor is called the monitor resolution CLH GUI slides

  4. (0, 0) X Y Coordinate Systems • Each pixel can be identified using a two-dimensional coordinate system • When referring to a pixel in a Java program, we use a coordinate system with the origin in the top-left corner 112 40 (112, 40) CLH GUI slides

  5. X <0, 0> x y <x, y> <width-1, height-1> Y The Coordinate System CLH GUI slides

  6. Outline Graphics Applets Drawing Shapes CLH GUI slides

  7. Applets • A Java application is a stand-alone program with a main method (like the ones we've seen so far) • A Java appletis a program that is intended to transported over the Web and executed using a web browser • An applet doesn't have a main method • Instead, there are several special methods that serve specific purposes CLH GUI slides

  8. Applets • A applet is typically embedded in a Web page and can be run from a browser. • You need a special HTML in the Web page to tell the browser about the applet. CLH GUI slides

  9. Applets • The class that defines an applet extends the JAppletclass • An applet is embedded into an HTML file using a tag that references the bytecode version of the applet • The bytecode version of the program is transported across the web and executed by a Java interpreter that is part of the browser on the receiving site CLH GUI slides

  10. HTML <html> <head> <title> Hi World Applet </title> </head> <body> <applet code="HiWorld.class” width=300 height=200> </applet> </body> </html> CLH GUI slides

  11. The HTML applet Tag <html> <head> <title>The Einstein Applet</title> </head> <body> <applet code="Einstein.class" </applet> </body> </html> CLH GUI slides

  12. Java Applets local computer Java compiler Java source code Java bytecode Web browser remote computer Java interpreter CLH GUI slides

  13. Changing bytecode to machine code • When the bytecode is sent to another computer over the web, • that computer’s browser will interpret the • bytecode with a java compiler on its computer • change it to the machine code of that computer. • This allows applets to used on both MACS and Windows machines and Unix servers CLH GUI slides

  14. Drawing Shapes • A shape can be filled or unfilled, depending on which method is invoked • The method parameters specify coordinates and sizes • Shapes with curves, like an oval, are usually drawn by specifying the shape’s bounding rectangle • An arc can be thought of as a section of an oval CLH GUI slides

  15. Sample Graphics methods • A Graphics context is something you can paint on. • g.drawString(“Hello, World”, 20, 20); • g.drawRect(x, y, width, height); • g.fillRect(x, y, width, height); • g.drawOval(x, y, width, height); • g.fillOval(x, y, width, height); • To set the color that will fill the Oval use: • g.setColor(Color.red); CLH GUI slides

  16. X Y page.drawLine (10, 20, 150, 45); or page.drawLine (150, 45, 10, 20); Drawing a Line 10 150 20 45 CLH GUI slides

  17. X 40 100 Y Drawing a Rectangle 50 20 page.drawRect (50, 20, 100, 40); Where 50,20 are the x and y values where The rectangle will start 100 is the width 40 is the length CLH GUI slides

  18. X 80 50 Y Drawing an Oval 175 20 bounding rectangle page.drawOval (175, 20, 50, 80); We give values for the bounding rectangle – Start the left side of oval at 175,20 CLH GUI slides

  19. public class No_Parking extends applet { public void paintComponent (Graphics page) { page.drawString (Parking”, 50, 50); page.drawOval (45, 24, 43, 43); page.drawLine (82, 30, 51,61); } //method paintComponent } // class No_Parking Appletviewer : No_Parking Class Parking Applet Started CLH GUI slides

  20. Drawing Shapes • Every drawing surface has a background color • Every graphics context has a current foreground color • Both can be set explicitly • See Snowman.java (page103) CLH GUI slides

  21. Representing Color • A black and white picture could be stored using one bit per pixel (0 = white and 1 = black) • A colored picture requires more information; there are several techniques for representing colors • For example, every color can be represented as a mixture of the three additive primary colors Red, Green, and Blue • Each color is represented by three numbers between 0 and 255 that collectively are called an RGB value CLH GUI slides

  22. Object Color.black Color.blue Color.cyan Color.orange Color.white Color.yellow RGB Value 0, 0, 0 0, 0, 255 0, 255, 255 255, 200, 0 255, 255, 255 255, 255, 0 The Color Class • A color in a Java program is represented as an object created from the Color class • The Color class also contains several predefined colors, including the following: CLH GUI slides

  23. public class Snowman extends JApplet { public void paintComponent (Graphics page) { final int MID = 150; final int TOP = 50; setBackground (Color.cyan); page.setColor (Color.blue); page.fillRect (0, 175, 300, 50); // ground page.setColor (Color.yellow); page.fillOval (-40, -40, 80, 80); // sun page.setColor (Color.white); page.fillOval (MID-20, TOP, 40, 40); // head page.fillOval (MID-35, TOP+35, 70, 50); // upper torso page.fillOval (MID-50, TOP+80, 100, 60); // lower torso CLH GUI slides

  24. page.setColor (Color.black); page.fillOval (MID-10, TOP+10, 5, 5); // left eye page.fillOval (MID+5, TOP+10, 5, 5); // right eye page.drawArc (MID-10, TOP+20, 20, 10, 190, 160); // smile page.drawLine (MID-25, TOP+60, MID-50, TOP+40); // left arm page.drawLine (MID+25, TOP+60, MID+55, TOP+60); // right arm page.drawLine (MID-20, TOP+5, MID+20, TOP+5); // brim of hat page.fillRect (MID-15, TOP-20, 30, 25); // top of hat } } CLH GUI slides

  25. Snowman Applet CLH GUI slides

  26. Applet methods • public void init () • public void start () • public void stop () • public void destroy () • public void paint (Graphics g) CLH GUI slides

  27. The paint method is executed automatically when the applet is loaded • The paint method accepts a parameter that is an object of the Graphics class. • It is used to draw shapes and text e.g page.drawRect(x, y, width, width) CLH GUI slides

  28. Why an applet works • You write an applet by extending the class JApplet. CLH GUI slides

  29. public void init ( ) • Invoked when the applet is first loaded and again if the applet is reloaded. • This is the first method to execute • It is an ideal place to initialize variables • It is the best place to define and use buttons, text fields, sliders, layouts, etc. • Even if you do not use it, it is called anyway CLH GUI slides

  30. The init() Method • Other Common functions implemented in this method are: • creating threads, • loading images, • reading images from a file. Init is similar to a constructor in an application CLH GUI slides

  31. public void start ( ) • Not always needed • Automocatically called after init( ) • Called each time the page is loaded and restarted.e.g. after a user leaves and goes to another web page. • Used mostly in conjunction with stop( ) CLH GUI slides

  32. public void stop( ) • Not always needed. Used mostly in conjunction with start(). • Called when the browser leaves the page - invoked when the user moves off the page. • Use stop( ) if the applet is doing heavy computation that you don’t want to continue when the browser is on some other page. • When the user leaves the page, any threads the applet has started—but not completed—will continue to run if stop is not called. CLH GUI slides

  33. public void destroy( ) • Seldom needed • Called after stop( ) • Use to explicitly release system resources (like threads) • System resources are usually released automatically CLH GUI slides

  34. init( ) start( ) do some work stop( ) destroy( ) Applet flow of control CLH GUI slides

  35. Browser Calling Applet Methods CLH GUI slides

  36. public void paint(Graphics g) • Do drawing here. • WE call fillboard () and other methods in paint. • If you want to repaint some image: • Don’t call this paint directly. It’s called automatically. • Call repaint( ) instead. CLH GUI slides

  37. repaint( ) • Call repaint( ) when you have changed something and want your changes to show up on the screen • repaint( ) is a request--it might not happen. CLH GUI slides

  38. Applets are not magic! • Anything you can do in an applet, you can do in an application. • You can do some things in an application that you can’t do easily if at al in an applet such as writing to a file. CLH GUI slides

  39. Graphical User Interfaces - GUI’sA GUI in Java is created with at least three kinds of objects: • Components - textfields, buttons • Events - a button is pressed • Listeners - react to the event CLH GUI slides

  40. Graphical Applications • These components will serve as a foundation for programs that USE graphical user interfaces (GUIs) CLH GUI slides

  41. GUI Components • A GUI component is an object that represents a screen element such as • a button or a text field CLH GUI slides

  42. GUI Containers • A GUI is a container that is used to hold and organize other components e.g. • Containers include: • Panels • Frames • dialog boxes CLH GUI slides

  43. A Container holding components

  44. Containers • A frameis a container that is used to display a GUI-based Java application • A frameis displayed as a separate window with a title bar – it can be repositioned and resized on the screen as needed CLH GUI slides

  45. THE FRAME HOLDS THE PANEL OF IMAGES AND DISPLAYS THE NAME OF THE PROGRAM CLH GUI slides

  46. Containers and Components • A GUI container can be classified as either heavyweight or lightweight • A lightweight container is managed by the Java program itself • A frame is a heavyweight container and a panel is a lightweight container CLH GUI slides

  47. GUI Development • Therefore, to create a Java program that uses a GUI we must: • instantiate and set up the necessary components • implement listener classes for any events we set up. • establish the relationship between listeners and components CLH GUI slides

  48. Some types of components CLH GUI slides

  49. Swing Components • There are various Swing GUI components that we can incorporate into our software: • labels (including images) • text fields and text areas • buttons • check boxes • radio buttons • menus • combo boxes • and many more… CLH GUI slides

  50. Creating components • JLabel lab = new Label (”Hi, Dave!"); • JButton but = new Button ("Click me!"); • JCheckbox toggle = new Checkbox (”toggle"); • JTextField txt = new JTextField (”Initial text.", 20); • JScrollbar scrolly = new Scrollbar (Scrollbar.HORIZONTAL, initialValue, bubbleSize, minValue, maxValue); CLH GUI slides

More Related