!1 !2
IS311 Programming Concepts Abstract Window Toolkit
The Abstract Window Toolkit (AWT) package contains all the classes for creating user interfaces and for painting graphics and images. Abstract Window Toolkit (part 1: Drawing Simple Graphics) A user interface object such as a button or scrollbar in AWT terminology is called a component.
!3 !4 Graphics The Java Graphics System
คลาสAนฐาน+ห-บการเ9ยนภาพกราฟ6ก Java provides a set of graphic commands that allow programmer to: Graphics เ"นคลาส(ใ*+ห-บการวาดภาพ กราฟ6กเ7นลากเ8น เ9ยน;ปทรง?าง ๆ – Display graphical shapes on the screen • size shape location are under programmers control Color Represent a color – Display strings Font Represent a font Graphics Used for painting basic shapes like • size, font, style are under programmers control lines rectangles and for painting FontMetrics Used for determining information images. – Display images Color Represent a color. about a font Font Represents a font. – Color these objects Image Represent an image FontMetrics Used for determining information about a font. – Move these objects Image Represents an image.
MediaTracker Used for preloading images.
!5 !6 Coordinate Systems Java Graphic Coordinate System
Origin (0,0) • Java’s coordinate system is not like the X coordinate system you will use in physics and general math classes • The Origin is in the upper left hand corner • X increases to the right • Y increases downward • The dimensional unit is a pixel Y
!7 !8 Java Graphic Coordinate System EXERCISE Each pixel has a coordinate (x,y) Let width and height be odd. What
(0,0) (width-1,0) (width-1,height-1) are the coordinates of the middle pixel?
x y
(0,height-1) !9 !10 SOLUTION Geometry width = 3, height = 3 answer = (1,1) Dimension Used for specifying the size of a rectangle (width and height) answer = ((width-1)/2,(height-1)/2) Insets Used for specifying the insets of a rectangle (top, left, bottom, and right) Point Used for specifying a point x, y coordinates. CาความกEาง และความHงIJาเ"นเลขLละ จะNนวณอQางไร?
answer = (#!width / 2$", #!height / 2$") Polygon Used for holding an array of points.
answer = (width/2,height/2) Rectangle Used for specifying the location and size of a rectangle (x, y; width; and height).
!11 !12 Drawn and Filled Shapes Displaying Things
• Java lets you draw lines and shapes • First we need a Graphics context • Java shape drawing methods come in two styles – That portion of the screen to draw upon – those where the outline only is shown • How do we obtain a graphics context? • drawShape() draw(shapeClass) – We get one as the argument to paint() – those where the center is filled • Be careful about passing the graphics context around, • fillShape() fill(shapeClass) – it may not always be 'in context' • Java provides the ability to display predefined • Java is state driven images – Things tend to stay they way they are until they are • Java provides the ability to display widgets changed • Once we set a color it will stay that way !13 !14 Some Graphical things Drawing Lines • Line segments (เ8นตรง) • Connected line segments (ลากเ8นตรงหลายเ8น?อ • The 1.1 AWT provides three methods for drawing lines: เTองUน) – Straight Line Segments • Rectangles (;ปVเหWยม) drawLine(...) • Ellipse (;ปวงX) – Connected Line Segments • Arcs (เ8นโZง) drawPolyline(…) – Portions of an Ellipse • Rectangles with rounded corners (VเหWยม[ม drawArc(…) มล) • Polygon (;ปหลายเหWยม)
!15 !16 Line Segments The drawLine method
• The command is of the form: GraphicsObject.drawLine(int xStart, int yStart, int xStop, int yStop) • Draws a line from position point (xStart, yStart) to (xStop, yStop) !17 !18 Example of drawLine() Drawing and Filling Rectangles public void paint( Graphics g ){ • Drawing Rectangles void drawRect(int x, // upper left x coordinate g.drawLine( 10, 10, 50, 30 ); int y, // upper left y coordinate int width, // bounding box width } int height) // bounding box height • Draws an outline of a rectangle bounded whose upper left
(10,10) hand corner is defined at the point (x,y), and is width wide, and height tall. • To draw a solid rectangle we use the fillRect() method with the same arguments (50,30)
!19 !20 The drawRect Method Example Rectangles
public void paint(Graphics g) { g.setColor(Color.red); g.drawRect(10,20,50,30); g.setColor(Color.blue); g.fillRect(20,30,75,30); ! fillRect เติมสีลงในสี่เหลี่ยม กําหนด พารามิเตอร์เช่นเดียวกับ drawRect } 50 Wide 75 Wide
(10,20) 30 Tall 30 Tall
(20,30) 30 Tall !21 !22 Rectangles with Rounded Corners The drawRoundRect method
• We can combine our approach for drawing rectangles void drawRoundRect(int x, // First four int y, // parameters and drawing ellipses into a a shape which is a int width, //are as in a rectangle with rounded corners or curved ends. int height,// rectangle • The Java API command drawRoundRect() int arcWidth, combines the complexity of rectangles with the int arcHeight) //horizontal and vertical difficulty of ellipses. // ‘diameter’ at the // at the corners
!23 !24 More rounded rectangle stuff The drawRoundRect method • The first four parameters are exactly the same as those for the rectangle. – If we put zeros in for the last two parameters, you will have a rectangle drawn exactly as before. • We use the fifth argument in the drawRoundRect() method as we do the third argument in the drawOval() method. – This describes the horizontal 'diameter' of the arc. • The sixth argument in the drawRoundRect() method corresponds to the fourth argument in the drawOval() method. – This describes the vertical 'diameter' of the arc. • Of course, there is a fillRoundRect() for filling in our rectangle with a solid color. !25 !26 Example Rounded Rectangles Drawing Ellipses public void paint(Graphics g) { g.setColor(Color.blue); g.fillRoundRect(10,20,60,30,5,5); void drawOval(int x, // upper left x coordinate g.setColor(Color.green); int y, // upper left y coordinate g.fillRoundRect(40,30,60,30,15,15); int width, // bounding box width int height) // bounding box height } • This draws an outline of an ellipse bounded by the rectangle whose upper left hand corner is defined at the point (x,y), and is width wide, and Hง 30 pixel height tall. – Note that the point (x,y) does not actually fall on our arc. กEาง 60 pixel
!27 !28 The drawOval method Example Ellipses
public void paint(Graphics g) { g.setColor(Color.red); (100,20) g.drawOval(10,20,60,30); g.setColor(Color.green); Width 60 Width 30 g.fillOval(100,20,30,30); } (10,20)
Height 30 !29 !30 Circles, & Fills Drawing Arcs
• The JDK does not provide a method to draw a circle. To • We can draw smooth curves as a portion of an ellipse do that we must set our bounding box to be a square, • The drawArc() command draws an arc bounded by the (the width and the height are the same size). rectangle whose upper left hand corner is defined at the point • To draw a solid, we use the fillOval() method. (x,y), and is width wide, and height tall. The fillOval() takes exactly the same arguments • If we were to draw a complete circle, it would touch the as the drawOval(). centers (midpoints) of each of the sides of our bonding box. – However, we define our curve to be drawn from startAngle to an arc of sweepAngle degrees.
!31 !32 Angle Measurements in Java The drawArc method
• Angles are measured counter clockwise from the horizontal x axis. void drawArc(int x, // bounding box, x – In Java, 0 degrees is at the 3-o'clock position. – Positive angles indicate counter-clockwise rotations, negative angles are drawn // upper left corner clockwise. int y, // bounding box, y // upper left corner int width, // width of // bounding box int height, // height of 120º // bounding box int startAngle, // in degrees 20º int sweepAngle) // extent [มกราด (sweep angle) X
Y สามารถใช้ fillArc()เพื่อระบายเสี้ยวของวงรีได้ !33 !34 The drawArc method Example drawArc()
public void paint(Graphics g) { g.drawArc(10,20,30,40,30,80); มุมกราด (Sweep Angle) 80 องศา }
(10,20)
ความสูง (Height) ของสี่เหลี่ยม สมมติ 40 pixel มุมเริ่มต้น (Start Angle) 30 องศา
ความกว้าง (Width) ของสี่เหลี่ยม สมมติ 30 pixel
!35 !36 The drawPolyline method Polygons drawPolyline( int[] xPoints, // array of x values • Like the polyline method, this accepts an array int[] yPoints, // array of y values of x's and y's. int nPoints // number of points – However, unlike the polyline method, the polygon ) will create the line that connects the last point in polygon to the first point in the polygon. example • As in the polyline, you must be certain that the int [] xPoints = { 1,2,3,4, 5, 6, 7, 8, 9}; number of points specified is equal to or smaller int [] yPoints = { 3,4,5,7,10,15,20,27,35}; than the smallest number of points in ether of the arrays. g.drawPolyline(xPoints, yPoints, xPoints.length); !37 !38 drawPolygon() Example Polygon
• One form of the drawpoly command: public void paint(Graphics g) { void drawPolygon(Polygon p) Polygon poly = new Polygon(); poly.addPoint(10,10); poly.addPoint(20,20); • Uses a polygon object: poly.addPoint(30,10); poly.addPoint(10,20); – We must first create a polygon object: (p, above). g.drawPolygon(poly); – To do this we would declare and instantiate a polygon: } Polygon p = new Polygon(); 2: (30,10) – We then add points to the polygon: 0: (10,10) p.addPoint(x,y); p.translate(dx, dy); ย้ายตําแหน่ง 3: (10,20) 1: (20,20)
!39 !40 The drawString method Fonts and Strings void drawString( String s, // string to be drawn • Java provides a flexible system for displaying strings int x, // base line x coordinate – We can change the type face int y // base line y coordinate – We can change the size ) – We can change the weight or style
g.drawString(“Hello World!”, 10, 10); !41 !42 Consider the Following Baseline Observations
• Notice that nearly all the letters do not extend below an imaginary line String – except the letter 'g'? Base Line • This imaginary line is called the base line. • Our reference (anchor) point for a string in the y dimension Second String is this base line. – Unlike any of the other graphics objects, • In the x direction, we start the string on the left hand side. Base Line
!43 !44 Font Dimensions Font Definitions: Ascent
• font ascent: This is the distance from the base line to the top of the letter. Ascent Line Height String – In our example above, this is the distance from bottom to Descent the top of the letter 'S'. Leading – When we want to know about a specific font, we're probably interested in the maximum height for all Second String characters we can display in this font, this is provided by the method getMaxAscent().
Line Height = Ascent + Descent + Leading !45 !46 Font Definitions: Decent Definitions: Leading & Height
• font descent: This is the distance below the line to • leading: The distance between base lines in strings is the bottom of the letter. called the leading distance. – In our example above, this is the distance from the bottom – In our example above, this is the distance between the of the 'S' to the bottom of the 'g'. bottom of the 'g' and the top of the 'S' below. – As with the ascent, we're probably more interested in the • line height: The sum of these three distances. Maximum Descent. getMaxDescent()
!47 !48 The Use of the Leading dimension Doing things with fonts
• We are not required to use the leading and font height • We can set fonts dimensions to place our strings on the screen. graphicsObject.setFont( Font f ) • You may have a very good reason to use a different • We can find out what the current font is dimension for leading that what is provided to you . graphicsObject.getFont() – You might want a double space effect. • We can use the font • However, these are dimensions that are graphicsObject.drawString( 'recommended by the experts.' String s, int x, int y) • All of these need a graphics object – Such as that provided with paint() !49 !50 Setting Fonts Font Names
• To set a font we need a Font object • Java 1.1(Java 1.0) – Monospaced (Courier), Dialog, Dialog Input, • To create a Font object we will create one like any SanSerif(Helvetica), Serif (Times Roman), Symbol other Java object • MS Windows new Font (String fontName, , MS San Serif, MS San Serif , int fontStyle, int fontSize) – Courier New Arial, Times New Roman, WingDings • The Font Name is one of several predefined constants • The Font Style is selected from 3 constants • Macintosh • The Font Size is (roughly) the number of pixels used for the – Courier, Geneva, Geneva, Helvetica, Times font height Roman, Symbol
!51 !52 Font Styles Obtaining Font Dimensions
To get the detailed dimensions about a font we’ll get a • In the setFont method, we can set font styles: Font Metrics object. Font.PLAIN – (Need a current Graphics object) • Bold FontMetrics FM_object = Font.BOLD graphics_object.getFontMetrics(Font f); • Italics Font.ITALIC • Combination Font.BOLD + Font.ITALIC !53 !54 Working with Font Metrics Finding the Width of a String
• We can then get our maximum height above the base • To find the width of a string we use the line FontMetrics method stringWidth. FM_object.getMaxAscent() – We pass this method the string we want to find the length for as its argument. • We can get the maximum descent below the base line with the following method. FM_object.stringWidth( myString ) FM_object.stringWidth("Static String") FM_objet.getMaxDescent() • We can get line hight with the following method. FM_object.getHight() Message W
!55 !56 \วอQาง]ดแสดงสต^ง_ดขวา EXERCISE CาIสต^งความยาว m pixels `องการแสดง_ดaานขวา CาIสต^งความยาว m pixels `องการแสดงไEกลางbน ของbนโดcหdอ applet eงIความกEาง w pixels จะN โดcหdอ applet eงIความกEาง w pixels จะNนวณ นวณfแหgงของ x (จะ drawString ไaอQางไร fแหgงของ x (จะ drawString ไaอQางไร x m Message x m Message
W
NนวณหาJา x ไaจาก x = w - m W !57 !58 SOLUTION String Centering Details Centering a String
x m • Assume you have the following Message – Window width, w // version dependent – A String, msg – Graphics object, g – Font object, f W FontMetrics fm = g.getFontMetrics( f ); x = ( w - fm.stringWidth(msg) ) / 2; Answer x = ( w - m ) / 2 g.drawString(msg, x, y);
!59 !60 Color The pre-defined colors
Java gives us control over the color we draw things in – We set the color black, blue, cyan, gray, dark graphicsContext.setColor(Color c) – We can use the pre-defined colors gray, light gray, green, Color c = Color.colorName – We can create our own magenta orange, pink, red, Color c = new Color(…); white, yellow !61 !62 Creating our own colors The Three Primary Colors
• On computers, we generally create colors using Red Light Green Light Blue Light three components of light. – Our component colors are Red, Green and Blue. Red Color 100% 0% 0% • Note this is not the same as with pigment colors, where the Green Color 0% 100% 0% primary colors are Red, Blue and Yellow Blue Color 0% 0% 100% • Using our light color model: – Black is the absence of any of the three colors. – White is the presence of all three at full intensity
!63 !64 Variations of the Primary Colors Specifying New Colors
Red Light Green Light Blue Light Color myColor = new Color( … ) Medium Red Color 75% 0% 0% • Three forms: Dark Green Color 0% 50% 0% Color( float red_fraction, float green_fraction, Navy Blue Color 0% 0% 25% float blue_fraction) • All other colors can be obtained by are combinations of the where the fraction is from 0.0 to 1.0 these basic three colors in various proportions and Color( int red_part, int green_part, intensities. int blue_part) • Gray is an equal proportion of all three colors at an intensity where the values are from 0 to 255 somewhere between white (100%) and black (0%). Color(int RGBvalue)
RGBvalue = red_part * 256 * 256 + green_part*256 + blue_part !65 !66 Changing Colors Java Applets
Color.darker() Java applets provide for client-side programming Color.brighter() ▪ compiled into Java byte code, then downloaded as part of a Web page • We can even combine these: ▪ executed by the JVM embedded within the Web browser Color.darker().darker().darker(); ▪ unlike JavaScript, Java is full-featured with extensive library Color.darker().brighter() support ▪ Java and its APIs have become industry standards ➢the language definition is controlled by Sun, ensures compatibility ➢Applications Programming Interfaces standardize the behavior of useful classes and libraries of routines
!67 Java Applets (cont.) First Java applet import java.awt.*; import java.applet.*; /** important point: Java applets & applications look different! * This class displays "Hello world!" on the applet window. ▪if you want to define a stand-alone application, make an application */ public class HelloWorld extends Applet requires public static void main method { ▪if you want to embed the code in a Web page, make an applet public void paint(Graphics g) { requires public void paint, public void init, … g.drawString("Hello world!", 10, 10); // writes string at (10,10) ▪can define dual-purpose programs, but tricky } }
libraries: Java provides extensive library support in the form of classes ▪ libraries are loaded using import java.awt: contains Abstract Window Toolkit (for GUI classes & routines) java.applet: contains the applet class definition 73 First Java applet Embedding an applet in HTML to include an applet in a Web page, use either ▪ APPLET tag (deprecated) CODE specifies applet name, HEIGHT and WIDTH specify window size text between the APPLET tags is displayed if unable to execute (e.g., Java not enabled) ▪ OBJECT tag preferred for HTML 4, but not universally supported
Applet parameters Parameters in HTML import java.awt.*; import java.applet.*; // This class displays a message based on parameters.
public class HelloWorld1 extends Applet