Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Introduction to GUI Programming
Document related concepts
no text concepts found
Transcript
Introduction to GUI Programming (Part II) 188230 Advanced Computer Programming Asst. Prof. Dr. Kanda Runapongsa Saikaew ([email protected]) Department of Computer Engineering Khon Kaen University 1 Agenda JComponent Methods Graphics and Painting Applets and HTML 2 JComponent Class The Swing components started with “J” are defined by subclasses of the class JComponent, which is itself a subclass of Component Many useful methods are defined in the Component and JComponent classes and so can be used with any Swing component 3 getWidth() and getHeight() comp.getWidth() and comp.getHeight() are functions that give the current size of the component, in pixels One warning: When a component is first created, its size is zero The size will be set later, probably by a layout manager A common mistake is to check the size of a component before that size has been set, such as in a constructor 4 setEnable(true) and isEnable() comp.setEnabled(true) and comp.setEnabled(false) can be used to enable and disable the component When a component is disabled, its appearance might change, and the user cannot do anything with it There is a booleanvalued function, comp.isEnabled() that you can call to discover whether the component is enabled 5 setVisible(true), setFont(font), set Color comp.setVisible(true) and comp.setVisible(false) can be called to hide or show the component comp.setFont(font) sets the font that is used for text displayed on the component comp.setBackground(color) and comp.setForeground(color) set the background andforeground colors for the component 6 setOpaque(true) comp.setOpaque(true) tells the component that the area occupied by the component should be filled with the component’s background color before the content of the component is painted By default, only JLabels are nonopaque. A nonopaque, or “transparent”, component ignores its background color and simply paints its content over the content of its container This usually means that it inherits the 7 background color from its container setToolTipText(string) comp.setToolTipText(string) sets the specified string as a “tool tip” for the component. The tool tip is displayed if the mouse cursor is in the component and the mouse is not moved for a few seconds The tool tip should give some information about the meaning of the component or how to use it 8 setPreferredSize(size) comp.setPreferredSize(size) sets the size at which the component should be displayed, if possible The parameter is of type java.awt.Dimension, where an object of type Dimension has two public integervalued instance variables, width and height A call to this method usually looks something like “setPreferredSize( new 9 Dimension(100,50) )” setPreferredSize(size) The preferred size is used as a hint by layout managers, but will not be respected in all cases Standard components generally compute a correct preferred size automatically, but it can be useful to set it in some cases For example, if you use a JPanel as a drawing surface, it might be a good idea to set a preferred size for it 10 JComponentMethodsDemo JLabel fname = new JLabel("Firstname:"); fname.setPreferredSize(new Dimension(50,50)); JLabel lname = new JLabel("Lastname:"); JTextField fnameInput = new JTextField(15); fnameInput.setToolTipText("input your firstname"); 11 Drawing on a Component Sometimes, however, you do want to draw on a component A JPanel, like any JComponent, draws its content in the method You have to define your own component class and provide a method in that class for drawing the component public void paintComponent(Graphics g) To create a drawing surface, you should define a subclass of JPanel and provide a custom 12 paintComponent() method Method paintComponent() Note that the paintComponent() method has a parameter of type Graphics The Graphics object will be provided by the system when it calls your method You need this object to do the actual drawing. To do any drawing at all in Java, you need a graphics context A graphics context is an object belonging to the class java.awt.Graphics 13 Graphics Objects Instance methods are provided in this class for drawing shapes, text, and images Any given Graphics object can draw to only one location The location will always be a GUI component belonging to some subclass of JPanel The Graphics class is an abstract class, which means that it is impossible to create a graphics context directly, with a constructor 14 Class Graphics The Graphics class is an abstract class, which means that it is impossible to create a graphics context directly, with a constructor When the paintComponent() method of a component is called by the system, the parameter to that method is a graphics context for drawing on the component 15 Drawing in Subclass of JPanel When defining a subclass of JPanel for use as a drawing surface You will almost always want to fill the panel with the background color before drawing other content onto the panel This is traditionally done with a call to super.paintComponent(g) public void paintComponent(g) { super.paintComponent(g); . . . // Draw the content of the component. } 16 Redrawing a Component (1/2) Most components do, in fact, do all drawing operations in their paintComponent() methods What happens if, in the middle of some other method, you realize that the content of the component needs to be changed? You should not call paintComponent() directly to make the change; this method is meant to be called only by the system 17 Redrawing a Component (2/2) Instead, you have to inform the system that the component needs to be redrawn, and let the system do its job by calling paintComponent() You do this by calling the component’s repaint() method The method public void repaint(); is defined in the Component class, and so can be used with any component You should call repaint() to inform the system 18 that the component needs to be redrawn When paintComponent() is called The component first appears on the screen The component is resized The component is covered up by another window and then uncovered The method repaint() is called 19 Coordinates The screen of a computer is a grid of little squares called pixels The color of each pixel can be set individually, and drawing on the screen just means setting the colors of individual pixels 20 Graphics and Coordinates A graphics context draws in a rectangle made up of pixels A position in the rectangle is specified by a pair of integer coordinates, (x,y) The upper left corner has coordinates (0,0) The x coordinate increases from left to right, and the y coordinate increases from top to bottom 21 CoordinateDemoPanel 22 serialVersionUID Class JPanel implements interface Serializable which has attribute serialVersionUID Thus class that its subclass of JPanel is also recommended to set the value of that attribute a serialVersionUID is used during deserialization to verify that the sender and receiver of a serialized object have loaded classes for that object that are compatible with respect to serialization 23 How to Generate serialVersionID Using tool called “serialver” which comes with JDK Syntax serialver <classname> Example 24 CoordinateAppDemo 25 setDefaultCloseOperation window.setDefaultCloseOperation( JFrame.EXI TON CLOSE ); says that When the user closes the window by clicking the close box in the title bar of the window, the program should be terminated This is necessary because no other way is provided to end the program Without this line, the default close operation of the window would simply hide the window when the user clicks the close box, leaving the program 26 running A Font A font represents a particular size and style of text The same character will appear different in different fonts In Java, a font is characterized by a font name, a style, and a size The available font names are system dependent, but you can always use the following four strings as font names: “Serif”, “SansSerif”, “Monospaced”, and “Dialog” 27 Font Style The style of a font is specified using named constants that are defined in the Font class. You can specify the style as one of the four values: Font.PLAIN Font.ITALIC Font.BOLD, or Font.BOLD + Font.ITALIC 28 Font Size The size of a font is an integer Size typically ranges from about 10 to 36, although larger sizes can also be used The size of a font is usually about equal to the height of the largest characters in the font, in pixels, but this is not an exact rule The size of the default font is 12 29 Class java.awt.Font Java uses java.awt.Font for representing fonts You can construct a new font by specifying its font name, style, and size in a constructor: Font plainFont = new Font("Serif", Font.PLAIN, 12); Font bigBoldFont = new Font("SansSerif", Font.BOLD, 24); Every graphics context has a current font, which is used for drawing text You can change the current font with the setFont() 30 method Font Setting Example If g is a graphics context and bigBoldFont is a font, then the command g.setFont(bigBoldFont) will set the current font of g to bigBoldFont The new font will be used for any text that is drawn after the setFont() command is given You can find out the current font of g by calling the method g.getFont(), which returns an object of type Font 31 Color You will probably want to use some color when you draw Java is designed to work with the RGB color system An RGB color is specified by three numbers that give the level of red, green, and blue, respectively, in the color A color in Java is an object of the class java.awt.Color 32 Constructing a RGB Color You can construct a new color by specifying its red, blue, and green components Syntax: Color myColor = new Color(r,g,b); While r, g, and b are integers in the range 0 to 255 33 Referring to Color Names Color class defines several named constants representing common colors: Color.WHITE, Color.BLACK, Color.RED Color.GREEN, Color.BLUE, Color.CYAN Color.MAGENTA, Color.YELLOW, Color.PINK Color.ORANGE, Color.LIGHT_GRAY Color.GRAY,Color.DARK GRAY 34 Getting and Setting Color One of the properties of a Graphics object is the current drawing color, which is used for all drawing of shapes and text If g is a graphics context, you can change the current drawing color for g using the method g.setColor(c), where c is a Color g.setColor(Color.GREEN) To know what the current drawing color is, you can call the function g.getColor(), which returns 35 an object of type Color A HSB Color System In the HSB system, a color is specified by three numbers called the hue, the saturation, and the brightness The hue is the basic color, ranging from red through orange through all the other colors of the rainbow The brightness is pretty much what it sounds like A fully saturated color is a pure color tone In Java, the hue, saturation and brightness are always specified by values of type float in the range from 0.0F to 1.0F Example: Color randomColor = 36 Color.getHSBColor( (float)Math.random(), 1.0F, 1.0F ); Foreground & Background colors Every component has an associated foreground color and background color The component is filled with the background color before anything else is drawn Although some components are “transparent,” meaning that the background color is ignored When a new graphics context is created for a component, the current drawing color is set to the foreground color 37 Setting Foreground & Background Colors The foreground color and background color are properties of the component, not of a graphics context The foreground and background colors can be set by instance methods setForeground(c) setBackground(c) This can be useful if you want them to use colors that are different from the defaults. 38 Graphics and Shapes The Graphics class includes a large number of instance methods for drawing various shapes, such as lines, rectangles, and ovals The shapes are specified using the (x,y) coordinate system They are drawn in the current drawing color of the graphics context which you can set by calling method setColor(color) 39 Drawing String and Line drawString(String str, int x, int y) Draws the text given by the string str The string is drawn using the current color and font of the graphics context x specifies the position of the left end of the string y is the ycoordinate of the baseline of the string drawLine(int x1, int y1, int x2, int y2) Draws a line from the point (x1,y1) to the point (x2,y2) 40 Drawing Rectangle & Oval drawRect(int x, int y, int width, int height) Draws the outline of a rectangle The upper left corner is at (x,y), and the width and height of the rectangle are as specified. drawOval(int x, int y, int width, int height) Draws the outline of an oval The oval is one that just fits inside the rectangle specified by x, y, width, and height. 41 Drawing Round Rectangle drawRoundRect(int x, int y, int width, int height, int xdiam, int ydiam) Draws the outline of a rectangle with rounded corners The basic rectangle is specified by x, y, width, and height, but the corners are rounded The degree of rounding is given by xdiam and ydiam The corners are arcs of an ellipse with horizontal diameter xdiam and vertical diameter ydiam which 42 have typical values as 16 Drawing 3D Rectangle draw3DRect(int x, int y, int width, int height, boolean raised) Draws the outline of a rectangle that is supposed to have a threedimensional effect, as if it is raised from the screen or pushed into the screen The basic rectangle is specified by x, y, width, and height The raised parameter tells whether the rectangle seems to be raised from the screen or pushed into it The 3D effect is achieved by using brighter and darker versions of the drawing color for different edges of the 43 rectangle Drawing Arc drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) Draws part of the oval that just fits inside the rectangle specified by x, y, width, and height The part drawn is an arc that extends arcAngle degrees from a starting angle at startAngle degrees Angles are measured with 0 degrees at the 3 o’clock position (the positive direction of the 44 horizontal axis) Filling Shapes fillRect(int x, int y, int width, int height) fillOval(int x, int y, int width, int height) Draws a filledin rounded rectangle. fill3DRect(int x, int y, int width, int height, boolean raised) Draws a filledin oval. fillRoundRect(int x, int y, int width, int height, int xdiam, int ydiam) Draws a filledin rectangle Draws a filledin threedimensional rectangle. fillArc(int x, int y, int width, int height, int startAngle, int arcAngle) Draw a filledin arc. 45 Graphics2D All drawing in Java is done through an object of type Graphics The Graphics class provides basic commands for such things as drawing shapes and text and for selecting a drawing color These commands are adequate in many cases, but they fall far short of what’s needed in a serious computer graphics program Java has another class, Graphics2D, that 46 provides a larger set of drawing operations Drawings Using Graphics2D Graphics2D is a subclass of Graphics, so all the methods from the Graphics class are also available in a Graphics2D Drawing in Graphics2D is based on shapes, which are objects that implement an interface named Shape Shape classes include Line2D, Rectangle2D, Ellipse2D, Arc2D, and CubicCurve2D, among others All these classes are defined in the package java.awt.geom 47 Shortcomings of the AWT The capabilities of the Graphics object of the AWT are rather limited Shortcomings of the AWT include Limited available fonts Lines drawn with a singlepixel width Shapes painted only in solid colors The inability to properly scale drawings prior to printing 48 Java 2D Java 2D is probably the second most significant addition to the Java 2 Platform surpassed only by the Swing GUI components The Java 2D API provides a robust package of drawing and imaging tools to develop elegant, professional, highquality graphics 49 Java 2D Capabilities Local fonts: all local fonts on the platform are available for drawing text Explicit control of the drawing pen: thickness of lines, dashing patterns, and segment connection styles are available Transformations of the coordinate system— translations, scaling, rotations, and shearing— are available 50 Java 2D Drawing Process: Step 1 Cast Graphics object to Graphics2D public void paintComponent(Graphics g) { super.paintComponent(g); // Typical Swing Graphics2D g2d = (Graphics2D)g; g2d.doSomeStuff(...); ...} All methods that return Graphics in Java return Graphics2D in Java 2 and later paint, paintComponent getGraphics 51 Java 2D Drawing Process: Step 2 Set pen parameters g2d.setPaint(fillColorOrPattern); g2d.setStroke(penThicknessOrPattern); g2d.setComposite(someAlphaComposite); g2d.setFont(someFont); g2d.translate(...); g2d.rotate(...); g2d.scale(...); g2d.shear(...); g2d.setTransform(someAffineTransform); 52 Java 2D Drawing Process: Step 3 Create a Shape object Rectangle2D.Double rect = ...; Ellipse2D.Double ellipse = ...; Polygon poly = ...; GeneralPath path = ...; // Satisfies Shape interface SomeShapeYouDefined shape = ...; Most shapes are in the java.awt.geom package There is a corresponding Shape class for most of the drawXxx methods of Graphics (see next slide) 53 Builtin Shape Classes Arc2D.Double, Arc2D.Float Area (a shape built by union, intersection, subtraction and xor of other shapes) CubicCurve2D.Double, CubicCurve2D.Float Ellipse2D.Double, Ellipse2D.Float GeneralPath (a series of connected shapes), Polygon Line2D.Double, Line2D.Float QuadCurve2D.Double, QuadCurve2D.Float (a spline curve) Rectangle2D.Double, Rectangle2D.Float, Rectangle 54 RoundRectangle2D.Double, RoundRectangle2D.Float Java 2D Drawing Process: Step 4 Draw an outlined or filled version of the Shape g2d.draw(someShape); g2d.fill(someShape); The legacy methods are still supported drawString still commonly used drawLine, drawRect, fillRect still somewhat used 55 Drawing Shapes: Example Code 56 setPaint and getPaint Methods Use setPaint and getPaint to change and retrieve the Paint settings. When you fill a Shape, the current Paint attribute of the Graphics2D object is used. Possible arguments to setPaint are: A Color (solid colorColor implements Paint interface) A GradientPaint (graduallychanging color combination) A TexturePaint (tiled image) A new version of Paint that you write yourself. 57 Paint Classes: Details Color Has the same constants (Color.RED, Color.YELLOW) as the AWT version, plus some extra constructors GradientPaint Constructors take two points, two colors, and optionally a boolean flag that indicates that the color pattern should cycle Colors fade from one color to the other 58 Paint Classes: Details TexturePaint Constructor takes a BufferedImage and a Rectangle2D, maps the image to the rectangle, then tiles the rectangle Creating a BufferedImage from a GIF or JPEG First load an Image normally, get its size, create a BufferedImage that size with BufferedImage.TYPE_INT_ARGB as image type Get the BufferedImage's Graphics object via createGraphics Draw the Image into the BufferedImage using drawImage 59 Gradient Fills: Example Code 60 Working with Images There are a number of common tasks when working with images Loading an external GIF, PNG JPEG image format file into Java 2D™'s internal image representation. Directly creating a Java 2D image and rendering to it Drawing the contents of a Java 2D image on to a drawing surface. Saving the contents of a Java 2D image to an external GIF, PNG, or JPEG image file. 61 Two Main Classes for Images The java.awt.Image class Superclass that represents graphical images as rectangular arrays of pixels. The java.awt.image.BufferedImage class Extends the Image class to allow the application to operate directly with image data (for example, retrieving or setting up the pixel color). Applications can directly construct instances of this class. A cornerstone of the Java 2D immediatemode imaging API 62 Reading/Loading an Image Java 2D™ supports loading these external image formats into its BufferedImage format using its Image I/O API which is in the javax.imageio package Image I/O has builtin support for GIF, PNG, JPEG, BMP, and WBMP Image I/O is also extensible so that developers or administrators can "plugin" support for additional formats. 63 Loading an Image File (1/2) 64 Loading an Image File (2/2) 65 Drawing an Image boolean Graphics.drawImage(Image img, int x, int y, ImageObserver observer); The x,y location specifies the position for the topleft of the image The observer parameter notifies the application of updates to an image that is loaded asynchronously The observer parameter is not frequently used directly and is not needed for the 66 BufferedImage class, so it usually is null Drawing an Image Demo Using setPaint method to set color Using fill method to fill the area with a shape 67 Drawing an Image Demo Result 68 Using Local (SystemSpecific) Fonts Local fonts: Lookup Fonts First Use the getAvailableFontFamilyNames or getAllFonts methods of GraphicsEnvironment. GraphicsEnvironment env = GraphicsEnvironment.getLocalGraphicsEnvironment(); env.getAvailableFontFamilyNames() ; env.getAllFonts(); // Much slower than just getting names! Safest Option: Supply list of preferred font names in order, loop down looking for first match 69 Supply standard font name as backup Example: ListFonts 70 Drawing with Local Fonts 71 What is an Applet? An applet is a program written in the Java programming language that can be included in an HTML page When you use a Java technologyenabled browser to view a page that contains an applet The applet's code is transferred to your system and executed by the browser's Java Virtual Machine (JVM). 72 Class Applet and JApplet An applet must be a subclass of the java.applet.Applet class, which provides the standard interface between the applet and the browser environment Swing provides a special subclass of Applet, called javax.swing.JApplet, which should be used for all applets that use Swing components to construct their GUIs. 73 Life Cycle of Applet (1/2) init This method is intended for whatever initialization is needed for your applet It is called after the param attributes of the applet tag. start This method is automatically called after init method It is also called whenever user returns to the page containing the applet after visiting other pages. 74 Life Cycle of Applet (2/2) stop You can use this method to stop an animation. destroy This method is automatically called whenever the user moves away from the page containing applets This method is only called when the browser shuts down normally Thus, the applet can be initialized only once, started and stopped one or more times in its 75 life, and destroyed only once. When to write Applets vs. Applications An applet runs in the context of a web browser, being typically embedded within an html page A Java application runs standalone, outside the browser Applets are particularly well suited for providing functions in a web page which require more interactivity or animation than HTML A graphical game, complex editing, or interactive data visualization The end user is able to access the functionality 76 without leaving the browser Loading Applets in a Web Page In order to load an applet in a web page, you must specify the applet class with appropriate applet tags. A simple example is below: <applet code=HelloAppletWorld.class width="200" height="200"></applet> For development and testing purposes, you can run your applet using appletviewer application appletviewer HelloAppletWorld.html 77 How to convert an application program into an applet program You need to create a subclass of java.applet.Applet in which you override the init method to initialize your applet's resources The same way the main method initializes the application's resources. init might be called more than once and should be designed accordingly Moreover, the toplevel Panel needs to be added to the applet in init; usually it was added to a Frame in main. 78 HelloWorldApplet Demo 79 Applet Life Cycle Demo (1/2) 80 Applet Life Cycle Demo (2/2) 81 What Applets Can Do Applets can usually make network connections to the host they came from. Applets running within a Web browser can easily cause HTML documents to be displayed. Applets can invoke public methods of other applets on the same page. Applets that are loaded from the local file system (from a directory in the user's CLASSPATH) have none of the restrictions that 82 applets loaded over the network do. What Applets Cannot Do Current browsers impose the following restrictions on any applet that is loaded over the network: An applet cannot load libraries or define native methods It cannot ordinarily read or write files on the host that's executing it It cannot make network connections except to the host that it came from It cannot start any program on the host that's executing it. 83 It cannot read certain system properties. References David J. Eck, ”Introduction to Programming Using Java”, Version 5.0, December 2006 http://math.hws.edu/javanotes/ “Working with Images” from http://java.sun.com/docs/books/tutorial/2d/images/in “Java Tutorials: Applets” from http://java.sun.com/docs/books/tutorial/deployment/ “2D Drawing” from http://courses.coreservlets.com/CourseMaterials/ja 84
