190 likes | 586 Vues
CIS 234: Graphics & Applets Dr. Ralph D. Westfall February, 2002 Graphics back in the "good old days," computers only worked with text no images no input boxes no mouse Palo Alto Research Center (PARC) created first GUI in 1970s, Apple copied it in 1980s, Microsoft copied in 1990s
E N D
CIS 234: Graphics & Applets Dr. Ralph D. Westfall February, 2002
Graphics • back in the "good old days," computers only worked with text • no images • no input boxes • no mouse • Palo Alto Research Center (PARC) created first GUI in 1970s, Apple copied it in 1980s, Microsoft copied in 1990s
Advantages of Graphics • easier to work with • click "icon" rather than type program name • less training required • more fun to use programs with graphics • more fun to write graphics programs
Java Graphics & the Internet • can use Java graphics in regular Java applications • (may be) easier to start using graphics with Java that runs in a web browser • to run in a browser, Java needs to be coded into an Applet that runs in a HTML web page
What Is HTML? • Hyper Text Markup Language • hyper means much greater • hypertext has hotlinks to other material • markup language • tells computer how/where to display material • word processing programs use their own markup languages • formerly visible (show codes), now hidden
HTML Tags • markup information is enclosed in angle brackets, such as <p> [paragraph] • brackets + content = tag • control appearance of page or text • not visible in browser • can see if use View>Source • frequently work in pairs • <b> some text etc. </b> [bold]
Java Applet • a Java class that runs in a window in a HTML page in a web browser instead of in a DOS window • HTML has special tags for applets • also has tags for parameters (arguments) that can be used as inputs to the applet
Java Graphics Capabilities • place text on an Applet • draw geometric figures: straight line, curve, rectangle, oval, etc. • add color to graphic items
Applet Graphics Methods • applets use an init() method rather than main method at start • could be implicit (not visible) • in addition to init() etc., all Applets have • paint method – puts graphics objects on the Applet • repaint method – "refreshes" Applet to reflect any changes (possibly implicit)
Coordinates • values to identify position on screen • x (first) how many pixels to right • y (2nd) how many pixels down • 0, 0 is upper left corner • 800, 600 is toward lower right • actual position depends on width/height of screen (e.g., is in middle of 1600 x 1200 screen)
Using Java with HTML • <applet code = "MyApplet.class" width = 250 height = 200> • </applet> • displays MyApplet in window in browser • window = 250 pixels wide, 200 pixels high • can change width and height • most screens are 800 x 600 or larger
drawString Method • puts a String (text) on Applet • 3 arguments: string, x, y (coordinates) • can use it in a paint method • public void paint(Graphics g) // g {g.drawString("Hi", 10, 20);} // g • Java automatically supplies a graphics object; can call it g or anything else
setFont Method • declaring • Font myFont = new Font("Helvetica", Font.ITALIC, 24); • Courier, Helvetica and TimesRoman • BOLD, ITALIC or PLAIN • # of points (10 or 12 typical in Word doc) • using in a paint method • g.setFont(myFont);
Setting Colors • Color class has 13 constants (p. 160) • Color.blue, Color.red, Color.darkGrey, etc. • setColor sets foreground color • setBackground sets Applet background • using in a paint method • g.setColor(Color.green); // graphics object • this.setBackground(Color. yellow); • // this = Applet
Creating a Graphics Object • paint method automatically gets a graphic object • most other methods don't get a graphics object • need to use getGraphics method to create graphics object within other methods • Graphics g = getGraphics(); g.drawString("Hello", 5, 50);
drawLine Method • arguments are 2 pairs of coordinates • x, y for 1 point and x, y for other end • g.drawLine(10, 10, 40, 10); // ? • g.drawLine(10, 10, 10, 40); // ? • g.drawLine(10, 10, 40, 40); // ?
Rectangle Methods • arguments are upper left corner coordinates (x, y), and width and height • g.drawRect(10, 100, 80, 30); // outline • corner = 10, 100; width = 80; height= 30 • g.fillRect(100,100,30,80); // solid color • g.clearRect(105, 105, 20, 70); // inside is same color as background
Rounded Rectangles • takes 6 arguments: corner coordinates, rectangle width and height, plus width and height of corner ovals • with larger widths and heights, corners get more rounded • g.drawRoundRect(5, 5, 30, 30, 2, 2); • g.drawRoundRect(5, 5, 30, 30, 4, 6);
Ovals • oval methods draw ovals that would fit in a rectangle of same size • g.drawOval(10, 10, 80, 30); // outline • g.fillOval (10, 10, 30, 80); // solid color • g.clearOval(10, 10, 80, 30); // inside is same color as background