slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
1052 Series for Graphics Graphics, Applets Graphical User Interfaces PowerPoint Presentation
Download Presentation
1052 Series for Graphics Graphics, Applets Graphical User Interfaces

Loading in 2 Seconds...

play fullscreen
1 / 267

1052 Series for Graphics Graphics, Applets Graphical User Interfaces - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - 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(; 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 (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.cyan 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 (; 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 (; 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


    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