System development with Java

System development with Java Instructors: Rina Zviel-Girshin Lecture 9 Rina Zviel-Girshin @ARC

Overview • Html • Applet • Graphics Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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). Rina Zviel-Girshin @ARC

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 } Rina Zviel-Girshin @ARC

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

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. Rina Zviel-Girshin @ARC

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); } } Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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> </APPLET> Rina Zviel-Girshin @ARC

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

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 <html>, <head>, and <title> are called tags. • Tags are case insensitive. <html> means the same thing as <HTML> as <Html> <HtMl>. Rina Zviel-Girshin @ARC

Several worlds about HTML • Most tags are matched with closing tags, and affect the text contained between them. • The closing tag syntax: </tagName> • Some tags have attributes. • An attribute is a name, followed by an = sign and the value. <applet code=“FileName.class” width=160> </applet> • To learn more about HTML: HTML Tutorial Rina Zviel-Girshin @ARC

Execution Assuming the file is called HelloWorld.html • The stages common to all, described above. • Open the file HelloWorld.html in the Browser. • The result is: HelloWorld.html Rina Zviel-Girshin @ARC

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 Rina Zviel-Girshin @ARC

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 Rina Zviel-Girshin @ARC

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). Rina Zviel-Girshin @ARC

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

Applet tag • <APPLET> 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. Rina Zviel-Girshin @ARC

Applet tag <APPLET CODE="HelloWorld.class" CODEBASE="http://www.yarden.ac.il/ip2" WIDTH=200 HEIGHT=200> </APPLET> • 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. Rina Zviel-Girshin @ARC

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() Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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); } } Rina Zviel-Girshin @ARC

Applet Lifecycle Rina Zviel-Girshin @ARC

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); } } Rina Zviel-Girshin @ARC

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.html Rina Zviel-Girshin @ARC

Passing Parameters to Applets • Parameters are passed to applets in name=value pairs in <PARAM> 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. <APPLET code="DrawStringApplet.class" width=300 height=50> <PARAM name="Message" value=“Hello from Rina!"> </APPLET> Rina Zviel-Girshin @ARC

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); } } Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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 Rina Zviel-Girshin @ARC

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

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. Rina Zviel-Girshin @ARC

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); } } Rina Zviel-Girshin @ARC

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

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. Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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); } } Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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); } } Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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); } }} Rina Zviel-Girshin @ARC

X 80 50 Y Drawing an Oval 175 20 bounding rectangle g.drawOval (175, 20, 50, 80); Rina Zviel-Girshin @ARC

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. Rina Zviel-Girshin @ARC

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); } Rina Zviel-Girshin @ARC

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 Rina Zviel-Girshin @ARC

System development with Java