1. Rina Zviel-Girshin @ARC1 System development with Java Instructors: Rina Zviel-Girshin Lecture 9

2. Rina Zviel-Girshin @ARC2 Overview Html Applet Graphics

3. Rina Zviel-Girshin @ARC3 Java and Applet The reason people are excited about Java as more than just another OOP language is because it allows them to write interactive applets on the web.

4. Rina Zviel-Girshin @ARC4 Web Browser In the browser environment the browser acts as an intermediate between the program and the operating system. The JVM resides inside the browser. The program can be simpler. The program has to work in a graphical mode. The program is called “Applet” (a small application).

5. Rina Zviel-Girshin @ARC5 Applets The program has to import two packages: applet.Applet awt The program (the class) has to extend the Applet class, using the following syntax: public class My extends Applet { // your code }

6. Rina Zviel-Girshin @ARC6 Basic applet code The final code looks like this: import java.awt.*; import java.applet.*; public class My extends Applet { // your code }

7. Rina Zviel-Girshin @ARC7 Stages of Writing and Executing Create a java file. Compile this file in the usual way and create.class file. Applet can’t be run directly. Applet has to be run in Browser and by the Browser. Now you need to create an HTML file that will include your applet.

8. Rina Zviel-Girshin @ARC8 HelloWorld import java.applet.Applet; import java.awt.Graphics; public class HelloWorld extends Applet { public void paint(Graphics g) { g.drawString("Hello world!", 50, 25); }

9. Rina Zviel-Girshin @ARC9 Call to applet The call to applet consist of: –the command APPLET –the name of the applet class –the dimensions of the panel in which the applet will run Web browser will run your applet.

10. Rina Zviel-Girshin @ARC10 Example Assuming the name of the applet class is HelloWorld.class the call to applet looks like this: <APPLET CODE = "HelloWorld.class" WIDTH = 150 HEIGHT= 50>

11. Rina Zviel-Girshin @ARC11 HTML The call to applet has to be in HTML file. The file can look as follows: Java applet test page <APPLET CODE="HelloWorld.class" WIDTH=150 HEIGHT=50>

12. Rina Zviel-Girshin @ARC12 Several worlds about HTML HTML is the HyperText Markup Language. HTML files are text files featuring semantically tagged elements. HTML filenames are suffixed with.htm or.html. Elements that are enclosed in angle brackets like,, and are called tags. Tags are case insensitive. means the same thing as as.

13. Rina Zviel-Girshin @ARC13 Several worlds about HTML Most tags are matched with closing tags, and affect the text contained between them. The closing tag syntax: Some tags have attributes. An attribute is a name, followed by an = sign and the value. To learn more about HTML: HTML TutorialHTML Tutorial

14. Rina Zviel-Girshin @ARC14 Execution Assuming the file is called HelloWorld.html 1.The stages common to all, described above. 2.Open the file HelloWorld.html in the Browser. 3.The result is: HelloWorld.htmlHelloWorld.html

15. Rina Zviel-Girshin @ARC15 What is an applet According to Sun "An applet is a small program that is intended not to be run on its own, but rather to be embedded inside another application....The Applet class provides a standard interface between applets and their environment." Additional 4 definitions of the Applet: –A small application –A secure program that runs inside a web browser –A subclass of java.applet.Applet –An instance of a subclass of java.applet.Applet

16. Rina Zviel-Girshin @ARC16 Applet hierarchy Every applet is implemented by creating a subclass of the Applet class. java.lang.Object | +----java.awt.Component | +----java.awt.Container | +----java.awt.Panel | +----java.applet.Applet

17. Rina Zviel-Girshin @ARC17 Applet import declarations The java.applet. and java.awt. prefixes tell the compiler which packages it should search for the Applet and Graphics classes. The java.applet package contains classes that are essential to Java applets. The java.awt package contains the most frequently used classes in the Abstract Window Toolkit (AWT), which provides the Java graphical user interface (GUI).

18. Rina Zviel-Girshin @ARC18 HelloWorld import java.applet.Applet; import java.awt.Graphics; public class HelloWorld extends Applet { public void paint(Graphics g) { g.drawString("Hello world!", 50, 25); } use predefined classes Inherits all functionality of the Applet the main function of our applet an instance of the predefined painter Graphics

19. Rina Zviel-Girshin @ARC19 Applet tag references a source file that is not part of the HTML page. This reference is code=“FileName.class” But if your applet code resides somewhere other than the same directory as the page it lives on you use codebase attribute to specify its location. The codebase attribute is a URL that points at the directory where the.class file is. The code attribute is the name of the.class file itself.

20. Rina Zviel-Girshin @ARC20 Applet tag Browser would try to retrieve the applet from http://www.yarden.ac.il/ip2/HelloWorld.class regardless of where the HTML page was. The formula for retrieving the applet from the URL: codebase + "/" + code.

21. Rina Zviel-Girshin @ARC21 Applet Lifecycle The applet can go through a series of stages in it's lifecycle: –initial loading –starting to perform –suspending (e.g. when the focus shifts to another page) –destruction of the applet (closing the page) For each stage there is a method called: –init() –start() –stop() –destroy()

22. Rina Zviel-Girshin @ARC22 Applet Lifecycle The methods are two symmetrical pairs: –init - destroy –start - stop In some cases we will wish to override the methods. LifeCycle.html example.LifeCycle.html

23. Rina Zviel-Girshin @ARC23 LifeCycle import java.awt.*; import java.applet.*; public class LifeCycle extends Applet{ StringBuffer message; public void init() { message = new StringBuffer(); message.append("Initialised..."); } public void start() { message.append("Started..."); } public void paint(Graphics g) { g.drawString(message.toString(), 0, 25); } }

24. Rina Zviel-Girshin @ARC24 Applet Lifecycle MethodWhen CalledHow manyDescription initupon loading the applet onceinitializations,resource allocation,operations needed once for the lifetime of the applet startafter the init, and each time user returns to the page any number of times updating, calls method update(), which calls paint() to update the screen output, awakens suspended operations stopeach time user leaves the page any number of times suspension of operation destroyupon closing the applet (the page) oncedestruction, release of resources

25. Rina Zviel-Girshin @ARC25 Finding an Applet's Size import java.applet.*; import java.awt.*; public class SizeApplet extends Applet { public void paint(Graphics g) { Dimension appletSize = this.getSize(); int appletHeight = appletSize.height; int appletWidth = appletSize.width; g.drawString("This applet is " + appletHeight + " pixels high by " + appletWidth + " pixels wide.", 15, appletHeight/2); } }

26. Rina Zviel-Girshin @ARC26 Applet's Size Retrieving the applet size is straightforward with the getSize() method. java.applet.Applet inherits this method from java.awt.Component. getSize() returns a java.awt.Dimension object. A Dimension object has two public int fields, height and width. The output file SizeApplet.htmlSizeApplet.html

27. Rina Zviel-Girshin @ARC27 Passing Parameters to Applets Parameters are passed to applets in name=value pairs in tags between the opening and closing APPLET tags. Inside the applet, you read the values passed through the PARAM tags with the getParameter() method of the java.applet.Applet class.

28. Rina Zviel-Girshin @ARC28 DrawStringApplet import java.applet.*; import java.awt.*; public class DrawStringApplet extends Applet { private String defaultMessage = "Hello!"; public void paint(Graphics g) { String inputFromPage = this.getParameter("Message"); if (inputFromPage == null) inputFromPage = defaultMessage; g.drawString(inputFromPage, 50, 25); } }

29. Rina Zviel-Girshin @ARC29 PARAM An applet is not limited to one PARAM. You can pass as many named PARAMs to an applet as you like. An applet does not necessarily need to use all the PARAMs that are in the HTML. The resulting output DrawStringApplet.html. DrawStringApplet.html

30. Rina Zviel-Girshin @ARC30 What applet can do? An applet can: –Draw pictures on a web page –Create a new window and draw in it. –Play sounds. –Receive input from the user through the keyboard or the mouse. –Make a network connection to the server from which it came and can send to and receive arbitrary data from that server.

31. Rina Zviel-Girshin @ARC31 What applet can’t do? Write data on any of the host's disks. Read any data from the host's disks without the user's permission. Delete files Read from or write to arbitrary blocks of memory, even on a non-memory-protected operating system like the MacOS. All memory access is strictly controlled.

32. Rina Zviel-Girshin @ARC32 What applet can’t do? Make a network connection to a host on the Internet other than the one from which it was downloaded. Call the native API directly (though Java API calls may eventually lead back to native API calls). Introduce a virus or trojan horse into the host system. An applet is not supposed to be able to crash the host system. However in practice Java isn't quite stable enough to make this claim yet.

33. Rina Zviel-Girshin @ARC33 Drawing Shapes Let's explore some of the methods of the Graphics class that draw shapes in more detail. A shape can be filled or unfilled, depending on which method is invoked. The method parameters specify coordinates and sizes. Java coordinate system has the origin in the upper left corner. Many shapes with curves, like an oval, are drawn by specifying its bounding box.

34. Rina Zviel-Girshin @ARC34 Graphics class In Java all drawing takes place via a Graphics object. The Graphics class provide methods for drawing a variety of graphical shapes: –lines –rectangles –ovals –circles –polygons

35. Rina Zviel-Girshin @ARC35 Drawing a Line X Y 10 20 150 45 g.drawLine (10, 20, 150, 45); g.drawLine (150, 45, 10, 20); or

36. Rina Zviel-Girshin @ARC36 Draw Line Drawing straight lines with Java is easy. Syntax: g.drawLine(xStart, yStart, xEnd, yEnd); where (xStart, yStart) and (xEnd, yEnd) are the endpoints of your lines and g is the Graphics object you're drawing with. DrawLine.html example.DrawLine.html

37. Rina Zviel-Girshin @ARC37 DrawLine example import java.awt.*; import java.applet.*; public class DrawLine extends Applet { public void paint(Graphics g){ g.drawLine(50,20,50,150); g.drawLine(20,150,200,150); g.drawLine(0,0,200,200); } }

38. Rina Zviel-Girshin @ARC38 Drawing a Rectangle X Y g.drawRect (50, 20, 100, 40); 50 20 100 40

39. Rina Zviel-Girshin @ARC39 Drawing Rectangles Three different types of rectangles can be drawn: –ordinary rectangles –rounded corners rectangles –three-dimensional rectangles with shaded border Ordinary rectangles and rounded corners rectangles can be drawn in outline or filled with color form.

40. Rina Zviel-Girshin @ARC40 Rectangles Ordinary rectangles g.drawRect(xStart, yStart, width, height); Rounded corners rectangles g.drawRoundRect(xStart, yStart, width, height, arcWidth, arcHeight); Three-dimensional rectangles with shaded border g.draw3DRect(xStart, yStart, width, height, raised); where fifth argument - raised - is boolean argument: true value means rectangle is raised, false value means rectangle is indented.

41. Rina Zviel-Girshin @ARC41 Rectangle example import java.awt.*; import java.applet.*; public class Rectangles extends Applet { public void paint(Graphics g) { g.drawRect(20,20,50,50); g.drawRoundRect(120,20,120,80,20,30); g.draw3DRect(20, 120, 50, 75, true); }

42. Rina Zviel-Girshin @ARC42 Filling Rectangles The drawRect() method draws an open rectangle, a box if you prefer. If you want to draw a filled rectangle, use the fill…() method. First you need to specify rectangle color g.setColor(Color) and then use one of the: g.fillRect(xStart, yStart, width, height); g.fillRoundRect(xStart, yStart, width, height, arcWidth, arcHeight); g.fill3DRect(xStart, yStart, width, height, raised); FillRectangles.html example.FillRectangles.html

43. Rina Zviel-Girshin @ARC43 Filling Rectangles import java.awt.*; import java.applet.*; public class FillRectangles extends Applet { public void paint(Graphics g) { g.setColor(Color.blue); g.fillRect(20,20,50,50); g.setColor(Color.red); g.fillRoundRect(120,20,50,50,20,30); g.setColor(Color.lightGray); g.draw3DRect(20, 100, 50, 50, true); g.draw3DRect(120, 100, 50, 50, false); g.fill3DRect(80, 180, 50, 50, false); } }

44. Rina Zviel-Girshin @ARC44 Color Color is a class in the AWT. Individual colors like red or blue are instances of java.awt.Color: Color.red Color.blue You create new colors using the same RGB triples. Syntax Color pureRed = new Color(255, 0, 0) ; Pure white is Color(255, 255, 255). Values of first(red), second(green) and third (blue) arguments can move from 0-255.

45. Rina Zviel-Girshin @ARC45 Clear Rectangle It is also possible to clear a rectangle that you've drawn. Syntax is exactly what you'd expect: public abstract void clearRect(int x, int y, int width, int height) Blink.html uses clearRect() to blink a rectangle on the screen.Blink.html

46. Rina Zviel-Girshin @ARC46 Blink import java.applet.*; import java.awt.*; public class Blink extends Applet { public void paint(Graphics g) { int appletHeight = this.getSize().height; int appletWidth = this.getSize().width; int rheight=appletHeight/3; int rwidth=appletWidth/3; int rectTop = (appletHeight - rectHeight)/2; int rectLeft = (appletWidth - rectWidth)/2; for (int i=0; i < 1000; i++) { g.fillRect(rectLeft, rectTop, rwidth-1, rheight-1); g.clearRect(rectLeft, rectTop, rectWidth-1, rectHeight-1); } }}

47. Rina Zviel-Girshin @ARC47 Drawing an Oval X Y g.drawOval (175, 20, 50, 80); 175 20 50 80 boundingrectangle

48. Rina Zviel-Girshin @ARC48 Ovals Java has methods to draw outlined and filled ovals. g.drawOval(xStart, yStart, width, height); g.fillOval(xStart, yStart, width, height); where width and height are “bounded box” properties. The oval is drawn as large as it can be to touch the “bounded box”’s edges at their centers. Ovals.html example.Ovals.html

49. Rina Zviel-Girshin @ARC49 Oval example import java.awt.*; import java.applet.Applet; public class Ovals extends Applet { public void paint(Graphics g) { int left = 5; int top = 5; // method that outputs series of ovals drawFilledOvals(g, left, top, this.size().width-10, this.size().height-10); }

50. Rina Zviel-Girshin @ARC50 Oval example public void drawFilledOvals(Graphics g, int x, int y, int w, int h) { g.setColor(Color.blue); while (h > 0) { g.fillOval(x, y, w, h); x += 10; y += 10; w -= 20; h -= 20; if (g.getColor() == Color.white) g.setColor(Color.blue); else g.setColor(Color.white); } } }//end of class

51. Rina Zviel-Girshin @ARC51 Any Questions?