CIS 234: Graphics & Applets

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

CIS 234: Graphics & Applets