Java AppletJava Applet

Presented byPresented by

Fitsum OkubuFitsum Okubu

IntroductionIntroduction

• GraphicsGraphics

• Methods and VariablesMethods and Variables

• EventsEvents

• Decision – if clauseDecision – if clause

• Creating and using of buttons and Creating and using of buttons and textfields.textfields.

• Repetition – while, for and doRepetition – while, for and do

• Objects and ClassesObjects and Classes

Java applet and applicationJava applet and application

– Java programs are of two distinct types:Java programs are of two distinct types:

• applicationsapplications• applets applets • Both types are programs.Both types are programs.• The difference is that an application is a completely The difference is that an application is a completely

free-standing program. That means it is not part of free-standing program. That means it is not part of any other program and it doesn’t need any other any other program and it doesn’t need any other program to launch it. In contrast an applet is program to launch it. In contrast an applet is invoked as part of a Web page and therefore invoked as part of a Web page and therefore needs either a Web browser or an applet viewer to needs either a Web browser or an applet viewer to invoke it. invoke it.

GraphicsGraphics• Graphics Graphics • Applet can be used to display animated imagesApplet can be used to display animated images• Java graphics are based on pixels. Java graphics are based on pixels. • Each pixel is identified by a pair of numbers (its coordinates), starting Each pixel is identified by a pair of numbers (its coordinates), starting

from zero.from zero.– The horizontal position is, often referred to as x in mathematics (and The horizontal position is, often referred to as x in mathematics (and

in java documentation) – this value increases from left to right.in java documentation) – this value increases from left to right.– The vertical postion, often referred to as y – increases downwards.The vertical postion, often referred to as y – increases downwards.Java provides us with facilities for drawing:Java provides us with facilities for drawing:

• drawRectdrawRect– the horizontal value of the top left corner.the horizontal value of the top left corner.– the vertical value of the top left corner.the vertical value of the top left corner.– the with of the rectangle.the with of the rectangle.– the height of the rectangle.the height of the rectangle.drawOvaldrawOval– Imagine the oval squeezed inside a rectangle. Imagine the oval squeezed inside a rectangle.

the horizontal value of the top left corner of the the horizontal value of the top left corner of the rectangle.rectangle.

the vertical value of the top left corner of the rectangle.the vertical value of the top left corner of the rectangle. the width of the rectangle.the width of the rectangle. the height of the rectangle. the height of the rectangle.

Example1Example1Example1Example1import java.awt.*;import java.awt.*;import java.applet.Applet;import java.applet.Applet;public class Example1 extends Applet{public class Example1 extends Applet{

public void paint (Graphics g){public void paint (Graphics g){g.drawRect(30,30,80,40);g.drawRect(30,30,80,40);g.drawOval(120,30, 50,50);g.drawOval(120,30, 50,50);g.setColor(Color.blue);g.setColor(Color.blue);g.fillRect(30,100, 80,40);g.fillRect(30,100, 80,40);g.setColor(Color.orange);g.setColor(Color.orange);g.fillOval(120,100,50,50);g.fillOval(120,100,50,50);g.drawLine(30,160,130,170);g.drawLine(30,160,130,170);

}}}}

<title> Example1 </title><title> Example1 </title><applet code="Example1.class"<applet code="Example1.class" width= 300 height=200></applet>width= 300 height=200></applet>

Methods and ParametersMethods and Parameters• Large programs can be complex, with the result that they can be difficult to understand and debug. The most significant technique for Large programs can be complex, with the result that they can be difficult to understand and debug. The most significant technique for

reducing complexity is to split a into isolated sections called reducing complexity is to split a into isolated sections called methods.methods.

Example2Example2import java.awt.*;import java.awt.*;import java.applet.Applet;import java.applet.Applet;public class Example2 extends Applet{public class Example2 extends Applet{

public void paint(Graphics g){public void paint(Graphics g){drawHouse(g, 50,50,70,30);drawHouse(g, 50,50,70,30);drawHouse(g, 100,50,60,20);drawHouse(g, 100,50,60,20);

}}

private void drawTriangle(Graphics g, int bottomX, int bottomY, private void drawTriangle(Graphics g, int bottomX, int bottomY, int base, int height){int base, int height){

g.drawLine(bottomX, bottomY, bottomX+base, bottomY);g.drawLine(bottomX, bottomY, bottomX+base, bottomY);g.drawLine(bottomX+base, bottomY, bottomX + base/2, bottomY-height);g.drawLine(bottomX+base, bottomY, bottomX + base/2, bottomY-height);g.drawLine(bottomX+base/2, bottomY-height,bottomX, bottomY);g.drawLine(bottomX+base/2, bottomY-height,bottomX, bottomY);

}}

private void drawHouse(Graphics g, int bottomX, int bottomY,private void drawHouse(Graphics g, int bottomX, int bottomY, int width, int height){int width, int height){g.setColor(Color.cyan);g.setColor(Color.cyan);

g.drawRect(bottomX, bottomY-height, width, height);g.drawRect(bottomX, bottomY-height, width, height);g.setColor(Color.orange);g.setColor(Color.orange);drawTriangle(g, bottomX, bottomY-height, width, height/2);drawTriangle(g, bottomX, bottomY-height, width, height/2);

}}}}HTML code to invoke the programHTML code to invoke the program<title> Example2 </title><title> Example2 </title><applet code="Example2.class"<applet code="Example2.class" width= 300 height=200></applet>width= 300 height=200></applet>

EventsEventsIn programming an event is (in most cases) an In programming an event is (in most cases) an

action taken by the user.action taken by the user.

• Scrollbar events - Scrollbar events - AdjustmentListenerAdjustmentListener

• First we need to state that we are going to First we need to state that we are going to implement a listener for scrollbar events, implement a listener for scrollbar events, which are classified in AdjustmentListener. which are classified in AdjustmentListener. We then register our program as a listener by We then register our program as a listener by using the using the addAdjustmentListener addAdjustmentListener method, method, which is in effect causes our simple program, which is in effect causes our simple program, our our adjustmentValueChanged adjustmentValueChanged method method simply fetches the new value from the simply fetches the new value from the scrollbar, and arranges for it to be painted on scrollbar, and arranges for it to be painted on the screen.the screen.

Example3(Creating scrollbars)Example3(Creating scrollbars)import java.awt.*;import java.awt.*;import java.applet.Applet;import java.awt.event.*;import java.applet.Applet;import java.awt.event.*;

public class Colors extends Applet implements AdjustmentListener { public class Colors extends Applet implements AdjustmentListener { private Scrollbar red; private Scrollbar green; private Scrollbar red; private Scrollbar green; private Scrollbar blue; private Scrollbar blue; private int redValue = 0; private int redValue = 0; private int greenValue = 0; private int greenValue = 0; private int blueValue = 0; private int blueValue = 0; public void init() { public void init() { Label l1, l2, l3; Label l1, l2, l3; l1 = new Label("Red:"); l1 = new Label("Red:"); l2 = new Label("Green:"); l2 = new Label("Green:"); l3 = new Label("Blue:"); l3 = new Label("Blue:"); red = new Scrollbar(Scrollbar.VERTICAL, 0, 0, 0, 256); red = new Scrollbar(Scrollbar.VERTICAL, 0, 0, 0, 256); green = new Scrollbar(Scrollbar.VERTICAL, 0, 0, 0, 256); green = new Scrollbar(Scrollbar.VERTICAL, 0, 0, 0, 256); blue = new Scrollbar(Scrollbar.VERTICAL, 0, 0, 0, 256); blue = new Scrollbar(Scrollbar.VERTICAL, 0, 0, 0, 256); add(l1); add(l1); add(red); add(red); add(l2); add(l2); add(green); add(green); add(l3); add(l3); add(blue); add(blue); red.addAdjustmentListener(this); red.addAdjustmentListener(this); green.addAdjustmentListener(this); green.addAdjustmentListener(this); blue.addAdjustmentListener(this); blue.addAdjustmentListener(this); } } public void adjustmentValueChanged(AdjustmentEvent e) { public void adjustmentValueChanged(AdjustmentEvent e) { Color c1; Color c1; redValue = red.getValue(); redValue = red.getValue(); greenValue = green.getValue(); greenValue = green.getValue(); blueValue = blue.getValue(); blueValue = blue.getValue(); showStatus("Red is: " + redValue + "; Green is: " + greenValue + "; Blue is: " + showStatus("Red is: " + redValue + "; Green is: " + greenValue + "; Blue is: " +

blueValue); blueValue); c1 = new Color(redValue, greenValue, blueValue); c1 = new Color(redValue, greenValue, blueValue); setBackground(c1); setBackground(c1); }}}}//html code<title> Example3 </title>//html code<title> Example3 </title>

<applet code="Example3.class"<applet code="Example3.class" width= 300 height=200></applet> width= 300 height=200></applet>

Decisions – if (Example4)Decisions – if (Example4)import java.awt.*;import java.awt.*;import java.applet.Applet;import java.applet.Applet;import java.awt.event.*;import java.awt.event.*;public class Example4 extends Applet implements AdjustmentListener{public class Example4 extends Applet implements AdjustmentListener{

private Scrollbar tom, jerry;private Scrollbar tom, jerry;private int tomValue= 0, jerryValue = 0;private int tomValue= 0, jerryValue = 0;

public void init(){public void init(){Label toms = new Label("Tom");Label toms = new Label("Tom");add(toms);add(toms);tom = new Scrollbar(Scrollbar.HORIZONTAL, 0,1,0,100);tom = new Scrollbar(Scrollbar.HORIZONTAL, 0,1,0,100);add(tom);add(tom);tom.addAdjustmentListener(this);tom.addAdjustmentListener(this);

Label jerrys = new Label("Jerry:");Label jerrys = new Label("Jerry:");add(jerrys);add(jerrys);jerry = new Scrollbar(Scrollbar.HORIZONTAL, 0,1,0,100);jerry = new Scrollbar(Scrollbar.HORIZONTAL, 0,1,0,100);add(jerry);add(jerry);jerry.addAdjustmentListener(this);jerry.addAdjustmentListener(this);

}}public void paint(Graphics g){public void paint(Graphics g){

g.drawString("Tom", 5, 70);g.drawString("Tom", 5, 70);g.fillRect(40,60,tomValue,10);g.fillRect(40,60,tomValue,10);g.drawString("Jerry", 5, 85);g.drawString("Jerry", 5, 85);g.fillRect(40, 75, jerryValue, 10);g.fillRect(40, 75, jerryValue, 10);

if (tomValue > jerryValue)if (tomValue > jerryValue)g.drawString("Tom is bigger", 50,50);g.drawString("Tom is bigger", 50,50);

elseelseg.drawString("Jerry is bigger", 50,50);g.drawString("Jerry is bigger", 50,50);

}}

Continuation of Example4Continuation of Example4public void adjustmentValueChanged(AdjustmentEvent public void adjustmentValueChanged(AdjustmentEvent

event){event){tomValue = tom.getValue();tomValue = tom.getValue();jerryValue = jerry.getValue();jerryValue = jerry.getValue();repaint();repaint();

}}}}

HTML code to invoke the programHTML code to invoke the program<title> Example4 </title><title> Example4 </title><applet code="Example4.class"<applet code="Example4.class" width= 300 height=200></applet>width= 300 height=200></applet>

ButtonsButtons

• As with scrollbars, use of buttons is accomplished As with scrollbars, use of buttons is accomplished using methods on one of the Java libraries, the AWT using methods on one of the Java libraries, the AWT (Abstract Window Toolkit) library.(Abstract Window Toolkit) library.

• The are six steps to setting up a button:The are six steps to setting up a button: - State that the class implements ActionsListener.- State that the class implements ActionsListener. - Declare a button variable, giving it a name.- Declare a button variable, giving it a name. - Create a new button, giving it a label.- Create a new button, giving it a label. - Add the button to the window- Add the button to the window - Inform the button that this object will respond to - Inform the button that this object will respond to button events, using button events, using addActionListeneraddActionListener.. - Provide a method called - Provide a method called actionPerformed actionPerformed to be to be invoked when a button click event occurs.invoked when a button click event occurs.

Example5 (creating and using Buttons)Example5 (creating and using Buttons)import java.applet.Applet;import java.applet.Applet;import java.awt.*;import java.awt.*;import java.awt.event.*;import java.awt.event.*;public class Example5 extends Applet implements ActionListener{public class Example5 extends Applet implements ActionListener{

private int diameter = 20;private int diameter = 20;private Button little, large;private Button little, large;

public void init(){public void init(){little = new Button("Little");little = new Button("Little");add(little);add(little);little.addActionListener(this);little.addActionListener(this);large = new Button("Large");large = new Button("Large");add(large);add(large);large.addActionListener(this);large.addActionListener(this);

}} public void paint(Graphics g){public void paint(Graphics g){ g.setColor(Color.blue); g.setColor(Color.blue); g.fillOval(25, 25, diameter, diameter);g.fillOval(25, 25, diameter, diameter); }} public void actionPerformed(ActionEvent event){public void actionPerformed(ActionEvent event){ if (event.getSource() == little)if (event.getSource() == little)

diameter = diameter - 10;diameter = diameter - 10;if (event.getSource()== large)if (event.getSource()== large)

diameter = diameter + 10;diameter = diameter + 10;repaint();repaint();

}}}}<title> Example5 </title><title> Example5 </title><applet code="Example5.class"<applet code="Example5.class" width= 300 height=200></applet>width= 300 height=200></applet>

Creating and Using Text FieldsCreating and Using Text Fieldsimport java.applet.*;import java.applet.*;import java.awt.*;import java.awt.*;import java.awt.event.*;import java.awt.event.*;public class Example6 extends Applet implements ActionListener{public class Example6 extends Applet implements ActionListener{

private Button ageB;private Button ageB;private TextField ageField;private TextField ageField;private int age;private int age;

public void init(){public void init(){ageField = new TextField(10);ageField = new TextField(10);add(ageField);add(ageField);ageField.addActionListener(this);ageField.addActionListener(this);

ageB = new Button("MyAge");ageB = new Button("MyAge");add(ageB);add(ageB);ageB.addActionListener(this);ageB.addActionListener(this);

}}

public void actionPerformed(ActionEvent event){public void actionPerformed(ActionEvent event){ if (event.getSource() == ageB)if (event.getSource() == ageB)

age = Integer.parseInt(ageField.getText());age = Integer.parseInt(ageField.getText()); repaint();repaint();

}}

public void paint(Graphics g){public void paint(Graphics g){ setBackground(Color.orange);setBackground(Color.orange);

g.drawString("Age is " + age, 50, 50);g.drawString("Age is " + age, 50, 50);if (age >= 18)if (age >= 18)

g.drawString("You can vote", 50, 100);g.drawString("You can vote", 50, 100);elseelse

g.drawString("You can not vote", 50,100)g.drawString("You can not vote", 50,100)}}

}}<title> Example6 </title><title> Example6 </title><applet code="Example6.class"<applet code="Example6.class" width= 300 height=200></applet>width= 300 height=200></applet>

Repetitions – while, for and doRepetitions – while, for and do• While loop (While loop (Example7) Example7) import java.awt.*;import java.awt.*;import java.applet.Applet;import java.applet.Applet;public class Example7 extends Applet{public class Example7 extends Applet{

public void paint(Graphics g){public void paint(Graphics g){int counter, x =5;int counter, x =5;counter = 0;counter = 0;while (counter < 8){while (counter < 8){ setBackground(Color.blue);setBackground(Color.blue);

g.drawString("*", x, 20);g.drawString("*", x, 20);x = x + 10;x = x + 10;counter++;counter++;

}} }}} } HTML code to invoke the programHTML code to invoke the program<title> Example7 </title><title> Example7 </title><applet code="Example7.class"<applet code="Example7.class" width= 300 height=200></applet>width= 300 height=200></applet>

For LoopFor Loop

In the for loop, many of the ingredients of the while loop are bundled up together in In the for loop, many of the ingredients of the while loop are bundled up together in the statement itself.the statement itself.

Example8 Example8 (how to use a for loop)(how to use a for loop)import java.awt.*;import java.awt.*;import java.applet.Applet;import java.applet.Applet;public class Example8 extends Applet{public class Example8 extends Applet{

public void paint(Graphics g){public void paint(Graphics g){int n = 0;int n = 0;int x = 20;int x = 20;int y = 20;int y = 20;for (int i = 0; i < 8; i++){for (int i = 0; i < 8; i++){ setBackground(Color.cyan);setBackground(Color.cyan);

g.drawLine(x, y, x + 100, y);g.drawLine(x, y, x + 100, y);y = y + 10;y = y + 10;n++;n++;

}}}}

}}HTML code to invoke the programHTML code to invoke the program<title> Example8 </title><title> Example8 </title><applet code="Example8.class"<applet code="Example8.class" width= 300 height=200></applet>width= 300 height=200></applet>

do loop do loop Example9 Example9 import java.awt.*;import java.awt.*;import java.applet.Applet;import java.applet.Applet;public class Example9 extends Applet{public class Example9 extends Applet{

public void paint(Graphics g){public void paint(Graphics g){ int countOfSquares = 0;int countOfSquares = 0;

int riceOnThisSquare = 1; int riceOnThisSquare = 1; int totalRice = 0;int totalRice = 0;int y=20;int y=20;do{do{ countOfSquares++;countOfSquares++; g.drawString("On Square" + countOfSquares + "are" + g.drawString("On Square" + countOfSquares + "are" +

riceOnThisSquare, 10,y);riceOnThisSquare, 10,y); totalRice = totalRice + riceOnThisSquare;totalRice = totalRice + riceOnThisSquare;

riceOnThisSquare = riceOnThisSquare = riceOnThisSquare * 2;riceOnThisSquare * 2; y=y+20;y=y+20;

}} while (totalRice < 100);while (totalRice < 100);

g.drawString("Number of squares needed is " + countOfSquares, 10, y + g.drawString("Number of squares needed is " + countOfSquares, 10, y + 10);10);}}

}}html code to invoke Example9 classhtml code to invoke Example9 class<title> Example8 </title><title> Example8 </title><applet code="Example8.class"<applet code="Example8.class"width= 300 height=200></applet>width= 300 height=200></applet>

Objects and ClassesObjects and Classes

• Object-oriented programming is about Object-oriented programming is about constructing programs form objects. An constructing programs form objects. An object is a combination of some data object is a combination of some data (variables) and some actions (methods). (variables) and some actions (methods).

• In Object Programming languages a class is In Object Programming languages a class is the specification of for any number of the specification of for any number of objects that are the same. Once a class has objects that are the same. Once a class has been described, a particular object been described, a particular object constructed by creating an constructed by creating an instanceinstance of the of the class.class.

Example10 – Creating a class or ObjectExample10 – Creating a class or Objectimport java.applet.Applet;import java.applet.Applet;import java.awt.*;import java.awt.*;import java.awt.event.*;import java.awt.event.*;public class Example10 extends Applet implements public class Example10 extends Applet implements

ActionListener, AdjustmentListener{ActionListener, AdjustmentListener{ private Button grow, shrink, left,right, private Button grow, shrink, left,right,

vertGrow,vertShrink;vertGrow,vertShrink; private Circle myCircle;private Circle myCircle; private Scrollbar red;private Scrollbar red; private Scrollbar green;private Scrollbar green; private Scrollbar blue;private Scrollbar blue; private int redValue;private int redValue; private int greenValue;private int greenValue; private int blueValue; private int blueValue; private Color color;private Color color;

Continuation of Example 10Continuation of Example 10public void init(){public void init(){ grow = new Button("Grow"); grow = new Button("Grow"); add(grow);add(grow); grow.addActionListener(this);grow.addActionListener(this); shrink = new Button("Shrink");shrink = new Button("Shrink"); add(shrink);add(shrink); shrink.addActionListener(this);shrink.addActionListener(this); left = new Button("left");left = new Button("left"); add(left);add(left); left.addActionListener(this);left.addActionListener(this); right = new Button("right");right = new Button("right"); add(right);add(right); right.addActionListener(this);right.addActionListener(this); vertGrow = new Button("Vertical Grow");vertGrow = new Button("Vertical Grow"); add(vertGrow);add(vertGrow); vertGrow.addActionListener(this);vertGrow.addActionListener(this); vertShrink = new Button("Vertical Shrink");vertShrink = new Button("Vertical Shrink"); add(vertShrink);add(vertShrink); vertShrink.addActionListener(this);vertShrink.addActionListener(this); Label l1, l2, l3;Label l1, l2, l3; l1 = new Label("Red:");l1 = new Label("Red:"); l2 = new Label("Green:");l2 = new Label("Green:"); l3 = new Label("Blue:");l3 = new Label("Blue:"); red = new Scrollbar(Scrollbar.HORIZONTAL,0,1,0,1000);red = new Scrollbar(Scrollbar.HORIZONTAL,0,1,0,1000); green = new Scrollbar(Scrollbar.HORIZONTAL,0,1,0,1000);green = new Scrollbar(Scrollbar.HORIZONTAL,0,1,0,1000); blue = new Scrollbar(Scrollbar.HORIZONTAL,0,1,0,1000);blue = new Scrollbar(Scrollbar.HORIZONTAL,0,1,0,1000); add(l1);add(l1); add(red);add(red); add(l2);add(l2); add(green);add(green); add(l3);add(l3); add(blue);add(blue); red.addAdjustmentListener(this);red.addAdjustmentListener(this); green.addAdjustmentListener(this);green.addAdjustmentListener(this); blue.addAdjustmentListener(this);blue.addAdjustmentListener(this); myCircle = new Circle();myCircle = new Circle();}}

Continuation of Example 10Continuation of Example 10

public void adjustmentValueChanged(AdjustmentEvent event){public void adjustmentValueChanged(AdjustmentEvent event){ redValue = red.getValue();redValue = red.getValue(); greenValue = green.getValue();greenValue = green.getValue(); blueValue = blue.getValue();blueValue = blue.getValue(); color = new Color(redValue, greenValue,blueValue);color = new Color(redValue, greenValue,blueValue); showStatus("Red is: " + redValue +showStatus("Red is: " + redValue + "; Green is:" + greenValue +"; Green is:" + greenValue + "; Blue is: " + blueValue);"; Blue is: " + blueValue); repaint();repaint(); }}public void actionPerformed(ActionEvent event){public void actionPerformed(ActionEvent event){ if (event.getSource() == grow )if (event.getSource() == grow ) myCircle.grow();myCircle.grow(); if (event.getSource() == shrink)if (event.getSource() == shrink) myCircle.shrink();myCircle.shrink(); if (event.getSource() == left)if (event.getSource() == left) myCircle.left();myCircle.left(); if (event.getSource() == right)if (event.getSource() == right) myCircle.right();myCircle.right(); if (event.getSource() == vertGrow)if (event.getSource() == vertGrow) myCircle.vertGrow();myCircle.vertGrow(); if (event.getSource() == vertShrink)if (event.getSource() == vertShrink) myCircle.vertShrink();myCircle.vertShrink(); repaint();repaint();}}

Continuation of Example 10Continuation of Example 10public void paint(Graphics g){public void paint(Graphics g){ g.setColor(color); g.setColor(color); myCircle.display(g);myCircle.display(g); }}} } class Circle{class Circle{ private int height = 10;private int height = 10; private int width = 10;private int width = 10; private int xCoord = 20, yCoord = 50;private int xCoord = 20, yCoord = 50; private int red = 0;private int red = 0; private int greeen = 0;private int greeen = 0; private int blue = 0; private int blue = 0; private Color color;private Color color; public void display(Graphics g){public void display(Graphics g){ g.fillOval(xCoord, yCoord,width, height);g.fillOval(xCoord, yCoord,width, height); }} public void left(){public void left(){ xCoord = xCoord - 10;xCoord = xCoord - 10; }} public void right(){public void right(){ xCoord = xCoord + 10;xCoord = xCoord + 10; }} public void grow(){public void grow(){ width = width + 10;width = width + 10; height = height +10;height = height +10; }} public void shrink(){public void shrink(){ width = width - 10;width = width - 10; height = height -10;height = height -10; }} public void vertGrow(){public void vertGrow(){ height = height + 10; height = height + 10; }}

Continuation of Example 10Continuation of Example 10

public void vertShrink(){public void vertShrink(){ height = height - 10;height = height - 10; }} public void newColor(int red, int green,int blue){public void newColor(int red, int green,int blue){

color = new Color(red,green,blue);color = new Color(red,green,blue); }} }}<html><head><html><head><title> Web page Example10 </title><title> Web page Example10 </title></head></head><body><body><applet code = "Example10.class" width=800 height=800 ><applet code = "Example10.class" width=800 height=800 ></applet></applet></body></html></body></html>

Questions?Questions?