CS313: Object-Oriented Programming บทที่ 9: Applet

บทที่ 9 Applet

Applet เปนโปรแกรมซึ่งออกแบบใหประมวลผลผาน web browser หรือผาน applet viewer โดยทั่ว

ไป applet เปนที่นิยมในงานที่ตองประมวลผลผานทาง Internet

โครงสรางของโปรแกรม applet มีดังนี้

import java.applet.*;
การ import class ที่จําเปน
import java.awt.*;
class AppletName extends Applet {
member variable declarations

public void init() { … }

public void start() { … }
วงจรชีวิตของ Applet
public void stop() { … }
public void destroy() { … }

public void pain (Graphics g) { … } Method หลักของ applet สําหรับวาดรูปบน

Applet
method declarations
}

โปรแกรมประเภท applet ตองเปน sub-class ของ class Applet ซึง่ กําหนดไวใน package
java.applet

9.1 วงจรชีวิตของ applet

applet มีวงจรชีวิตดังแสดงในแผนภาพตอไปนี้

init() start() stop() destroy()

2/2545 1
CS313: Object-Oriented Programming บทที่ 9: Applet

รายละเอียดของแตละขั้นตอนมีดังนี้
1. Constructor stage ขัน้ ตอนนี้ไมปรากฏในวงจรชีวิตของ applet แตเปนขั้นตอนปกติของการ
เขียนโปรแกรมเชิงวัตถุทั่วๆ ไป แมโปรแกรมที่เขียนจะไมมีคําสั่ง new โดยตรงในการสราง object
แตเมื่อโปรแกรม applet เริม่ ตนทํางาน super-class ของโปรแกรมที่เขียนขึ้นจะสราง object ของ
โปรแกรมโดยอัตโนมัติ และเริ่มประมวลผล
2. Initialisation method init() จะถูกเรียกประมวลผลโดยอัตโนมัติ เชนเดียวกับ constructor
stage ในการเขียนโปรแกรมโดยทั่วไป ถาไมมีการเปลี่ยนแปลงคาตัวแปร หรือ ผานคาตัวแปรจาก
HTML แลว ก็ไมมีความจําเปนที่จะตองเขียนชุดคําสั่งใดๆ ใน method นี้ แตถาตองการผานคา
จาก HTML หรือมีการกําหนดคาเริ่มตนบางรายการ สราง object การกําหนดสี background
หรือ load รูปภาพหรือตัวอักษร ซึ่งงานเหลานี้จะทําเพียงครั้งเดียวเมื่อ applet ถูกเรียกประมวล
ผล ดังนัน้ งานอะไรก็ตามที่ตองการทําเพียงครั้งเดียวควรเขียนใน method init()
3. Starting งานทีต่ องทําตอจาก init() และเปนงานที่ตองการทําซํ้า โดยเฉพาะงานดานภาพ
เคลือ่ นไหว หรือรอกิจกรรมโตตอบจากผูใชบริการ
4. Stopping เมื่อ applet ไมอยูในสภาพที่จะมองเห็น หรือไปประมวลผลที่ background งานตางๆ
ทีต่ องทําในขั้นตอน start() สามารถที่จะหยุดไดชั่วคราว จนกวา applet กลับมา run ใหม ก็จะ
เรียก start() กลับมาทํางานอีกรอบ
5. Destroying เมือ่ ผูใชไมตองการประมวลผล applet นัน้ ๆ อีกตอไป โปรแกรมควรมีการคืน
resource ตางๆ ในกับระบบ
6. paint() เปน method ทีแ่ สดงผลทางจอภาพ ซึ่ง applet จะเรียกประมวลผลโดยอัตโนมัติ ในการ
เขียนโปรแกรมทั่วๆ ไป ผูเขียนจะไมเรียก method paint() โดยตรง หากมีความจําเปนตองเปลี่ยน
แปลงขอมูลบนจอภาพ การเขียนโปรแกรมจะตองเรียกประมวลผลผาน method repaint() หรือ
update()
ตัวอยาง
import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class LifeCycle extends Applet implements ActionListener {

Label messageInit = new Label(“init()”);
Label messageStart = new Label(“start()”);
Label messageDisplay = new Label(“display()”);
Label messageAction = new Label(“actionPerformed()”);
Label messageStop = new Label(“stop()”);
Label messageDestroy = new Label(“destroy()”);
Button pressButton = new Button(“Press”);

int countInit=0, countStart=0, countDisplay=0, countAction=0, countStop=0;

int countDestroy=0;

public void init() {

++countInit;
add(messageInit);
add(messageStart);
add(messageDisplay);

2/2545 2
CS313: Object-Oriented Programming บทที่ 9: Applet

ตัวอยาง (ตอ)
add(messageAction);
add(messageStop);
add(messageDestroy);
add(pressButton);
pressButton.addActionListener(this);
}

public void start() {

++countStart;
display();
}

public void display() {

++countDisplay;
messageInit.setText(“init() ”+countInit);
messageStart.setText(“start() “+countStart);
messageDisplay.setText(“display() “+countDisplay);
messageAction.setText(“actionPerformed() ” + countAction);
messageStop.setText(“stop() ”+countStop);
messageDestroy.setText(“destroy() “+countDestroy);
}

public void stop() {

++countStop;
display();
}

public void destroy() {

++countDestroy;
display();
}

public void actionPerformed(ActionEvent e) {

++countAction;
display();
}
}

ทดลอง run โปรแกรมนี้โดยใช appletviewer แลวลอง minimize, restore และ maximize window
ของโปรแกรมนี้ สังเกตการเปลี่ยนแปลง และทดลอง run โปรแกรมนี้ดวย browser อืน่ ๆ จะเห็นวาบาง
browser ไมไดใหผลเหมือนกัน

9.2 หลักการในการเขียนโปรแกรมดวย Applet

การเขียนโปรแกรมแบบ Applet จะเปนการทํางานในรูปของ GUI (Graphical User Interface) ใน

การเขียนโปรแกรมแบบนี้ ตองพิจารณาสิ่งตางๆ ตอไปนี้

2/2545 3
CS313: Object-Oriented Programming บทที่ 9: Applet

1. พิจารณา class ทีจ่ ะนํามาใชงานเปน class member หรือ instance member หากเปนการใช
งาน instance member จะตองมีการสราง object ดวยคําสั่ง new เพือ่ ที่จะไดเรียกใช method
ตางๆ ได ซึ่งการสราง object เหลานี้ จะปรากฎบนจอภาพได ก็ตอเมื่อใชคําสั่ง add() เพื่อเพิ่ม
object เขาไปใน container ซึง่ เปนพื้นที่ที่ใชในการแสดง object ตางๆ ของ applet กอน
2. ตองคํานึงถึงภาพลักษณที่จะปรากฏบนจอภาพ วาจะใหอยูในรูปแบบใด
3. object ทีจ่ ะสรางขึ้น จะใหอยูในชวงชีวิตใดของ Applet
4. การประมวลผลที่ตองการให object ติดตอกับผูใชเปนแบบใด วิธีที่งายที่สุดคือ เรียกใช method
actionPerformed() ซึง่ เปน method ของ class แบบ interface ชื่อ ActionListener ดังนั้นตอง
ประยุกตใชแบบ implements โดยตอทาย extends Applet ในสวนของการประกาศ class

9.3 การสราง component และนําไปแสดงที่จอภาพ

Component คือ object ทีป่ รากฏอยูบนหนาจอ window เชน ปุม (button) สวนสําหรับแสดงขอ
ความ (label) ในการสราง component ประกอบไปดวย 2 ขั้นตอนหลัก คือ
1. สราง object ของ component ทีต่ องการ
2. เพิ่ม object ทีถ่ กู สราง ลงในสวนของ container ดวยคําสั่ง add() ( add() เปน method ใน
class Container ซึง่ จัดเปน Applet ประเภทหนึ่ง )

ในสวนของการเพิ่ม object ทีต่ อ งการใหปรากฏใน container เมือ่ เริ่มโปรแกรม ควรทําใน method init
() ซึง่ เปนสวนที่ Applet จะเริม่ ตนทํางาน หากมีการตอบสนองตอผูใช ใหทําการกําหนดขั้นตอนการประมวล
ผลในสวนของ Listener และตอง overload method actionPerformed() ดังเชนตัวอยางที่ผานมา

9.4 การเปลี่ยนแปลงรูปแบบบนจอภาพ

การเปลี่ยนแปลงรูปแบบ เชน สี background สีของตัวอักษร ขนาดของตัวอักษร สามารถทําไดโดย

การเรียกใช method ทีอ่ ยูใน class AWT method ทีใ่ ชในการเปลี่ยนแปลงรูปแบบจอภาพ ที่ใชกันสวนใหญ
สามารถสรุปไดดังนี้

- void setForeground(Color c)
การกําหนดสีพื้นหนา เชน setForeground(Color.red) เปนการกําหนดสีพื้นหนาเปนสีแดง
- void setBackground(Color c)
กําหนดสีพื้นหลัง เชน setBackground(Color.white) เปนการกําหนดสีพื้นหลังเปนสีขาว
- void setFont(Font f)
เปนการกําหนดรูปแบบและขนาดตัวอักษร เชน กําหนดตัวอักษรแบบ TimesRoman ตัวหนา
ขนาด 24 point สามารถเขียนไดเปน setFont(new Font(“TimesRoman”,Font.BOLD,24);
- void setLocation(int x, int y)

2/2545 4
CS313: Object-Oriented Programming บทที่ 9: Applet

กําหนดพิกัดตําแหนงที่จะแสดง component บนจอภาพ เชน กําหนดให object แสดงที่พิกัด

(50,50) คือ object.setLocation(50,50);
- Color(int r, int g, int b)
เปน class ทีใ่ ชในการกําหนดสี ซึ่งจะเปน object ทีต่ องสงผานไปยัง method setBackground
() และ setForeground() setColor() สามารถใชคาคงที่ของ class Color เชน Color.red,
Color.green, Color.black, Color.white, Color.blue, Color.yellow เปนตน
- Font(String name, int Style, int size)
เปน class ทีใ่ ชสราง object ทีก่ าหนดรู
ํ ปแบบและขนาดของตัวอักษร ในสวนของ Style จะมีให
เลือก 3 แบบ คือ Font.PLAIN, Font.ITALIC และ Font.BOLD
ตัวอยาง

import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class HelloWorld extends Applet implements ActionListener {

Button redBttn = new Button(“Red”);
Button greenBttn = new Button(“Green”);
Button blueBttn = new Button(“Blue”);
Button bigFont = new Button(“Bigger Font”);
Button smallFont = new Button(“Smaller Font”);
int fontSize = 24;
Color textColor = Color.green;
Font textFont = new Font(“Serif”, Font.BOLD, fontSize);

public void init() {

setBackground(Color.lightGray);
setForeground(Color.read);
setFont(textFont);
add(redBttn);
redBttn.addActionListener(this);
add(greenBttn);
greenBttn.addActionListener(this);
add(blueBttn);
blueBttn.addActionListener(this);
add(bigFont);
bigFont.addActionListener(this);
add(smallFont);
smallFont.addActionListener(this);
}

public void paint(Graphics g) {

g.setColor(textColor);
g.setFont(new Font(“Serif”, Font.ITALIC,fontSize));
g.drawString(“Hello World !”, 80, 100);
showStatus(“This is show Status Window”);
}

2/2545 5
CS313: Object-Oriented Programming บทที่ 9: Applet

ตัวอยาง (ตอ)
public void actionPerformed(ActionEvent e) {
System.out.println(e);
System.out.println(e.getActionCommand());
if (e.getActionCommand().equals(“Red”))
textColor = Color.red;
else if (e.getActionCommand().equals(“Blue”))
textColor = Color.blue;
else if (e.getActionCommand().equals(“Green”))
textColor = Color.green;
else if (e.getActionCommand().equals(“Bigger Font”))
fontSize += 5;
else if (e.getActionCommand().equals(“Smaller Font”))
fontSize -= 5;

repaint();
}
}

9.5 การเขียนโปรแกรมรับขอมูลทาง keyboard แบบ Applet

การเขียนโปรแกรมเพื่อรับขอมูลผาน keyboard แบบ Applet ตองเลือกใช class TextField หรือ

TextArea สําหรับ class TextField มีการจัดการดังนี้
1. การกําหนดให cursor พรอมรับขอมูล ณ text field ทําไดดวย method requestFocus()
2. การผานคาขอมูลที่ผูใชบริการไดบันทึกใน TextField มายังโปรแกรมเพื่อประมวลผล ทําไดโดยใช
method getText()
3. การแสดงผลที่ TextField ทําไดโดยใช method setText()
ตัวอยาง
import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class CalculateArea extends Applet implements ActionListener {

Label lb1 = new Label(“Please Enter the radius of the circle”);
Label lb2 = new Label(“Radius: “);
Label lb3 = new Label(“Area: “);
TextField txt1 = new TextField(10);
TextField txt2 = new TextField(10);
String t1;

Font bigFont = new Font(“TimesRoman”, Font.ITALIC, 24);

Font font1 = new Font(“TimesRoman”, Font.ITALIC, 16);
Button calculate = new Button(“Calculate”);
Button reset = new Button(“Reset”);

public void init() {

lb1.setFont(bigFont);
lb1.setLocation(20,20);
add(lb1);

2/2545 6
CS313: Object-Oriented Programming บทที่ 9: Applet

ตัวอยาง (ตอ)
lb2.setFont(font1);
lb2.setLocation(20, 40);
add(lb2);
add(txt1);
lb3.setFont(font1);
lb3.setLocation(20, 60);
add(lb3);
add(txt2);
add(calculate);
calculate.setBounds(20,250,80,25);
add(reset);
calculate.addActionListener(this);
reset.addActionListener(this);
txt2.requestFocus();
}

public void start() {

calculate.addActionListener(this);
reset.addActionListener(this);
txt2.requestFocus();
}

public void actionPerformed(ActionEvent thisEvent) {

if (thisEvent.getActionCommand().equals(“Reset”));
txt1.setText(“ “);
txt2.setText(“ “);
txt2.requestFocus();
}
else {
t1 = txt1.getText().trim();
Double x = new Double(t1);
double r = x.doubleValue();
double area = Math.PI*r*r;
txt2.setText(“ “+area);
}
}
}

9.6 การแสดงรูปและเสียง

การอานและแสดงรูปภาพที่ Applet
1. คําสั่งในการอานแฟมขอมูลรูปภาพ
ตัวอยาง Image the_picture = getImage(getCodeBase(), “image/word1.gif”);
getCodeBase() เปน method ที่ return คาตําแหนงของแฟมขอมูล และสรางเปน URL
(Universal Resource Location) เพือ่ อานแฟมขอมูลที่ตองการ
2. แสดงแฟมขอมูลรูปภาพที่จอของ Applet โดยใช method drawImage และสั่งประมวลผลที่
method paint โดยผาน class Graphics ดังนี้

2/2545 7
CS313: Object-Oriented Programming บทที่ 9: Applet

public void paint (Graphics g) {

…
g.drawImage(the_picture, width, height, this);
…
}

การใสเสียงใน Applet
ไฟลเสียงที่สามารถใชงานได ตองมีรูปแบบขอมูลเปน .au เทานั้น ไฟลเสียงจะมี class เปน
AudioClip และ method ในการประมวลผลเสียงประกอบดวย
void loop() : ใหเลนแฟมขอมูลเสียงโดยไมมีการหยุด
void play() : เริม่ เลนแฟมขอมูลเสียง และจะเลนเพียงครั้งเดียว
void stop() : หยุดเลน

ชุดคําสั่งในการอานและประมวลผลแฟมขอมูลเสียงมีดังนี้
1. อานแฟมขอมูลเสียง
AudioClip getAudioClip(URL)
AudioClip getAudioClip(URL, string)
เชน AudioClip aClip = getAudioClip(getCodeBase(),”sound.au”);

2. การสั่งประมวลผลใหเลนเสียง
void play(URL)
void play(URL, string)
เชน aClip.play();

3. กรณีทตี่ อ งการใหแฟมขอมูลเสียงเลนตอเนื่อง ควรมีการหยุดเลนของเพลงใน method stop() ของ

Applet และสั่งใหเลนใน method start()

9.7 การรับคาตัวแปรผานโปรแกรม Applet

ขอมูลที่สามารถสงให Applet ตองเปนแบบตัวอักษรเทานั้น ชุดคําสั่ง HTML ตองมีการเพิ่มคําสั่ง

PARAM ภายในสวนของ tag <APPLET> .. </APPLET> โดยมีรูปแบบการใชงานดังนี้
<APPLET CODE=”YourApplet.class” WIDTH=350 HEIGHT=300>
<PARAM NAME=”param-name1” VALUE=”param-value1”>
<PARAM NAME=”param-name2” VALUE=”param-value2”>
</APPLET>

2/2545 8
CS313: Object-Oriented Programming บทที่ 9: Applet

โดยที่ param-name1 และ param-name2 เปนตัวแปรที่กําหนดใน class YourApplet นอกจากนี้

คําสั่งของ HTML ยังสามารถระบุตําแหนงของแฟมขอมูล Java class ไดกรณีที่แฟมขอมูล Java class อยูตาง
directory กับแฟมขอมูล HTML เชน
<APPLET CODE=”YourApplet.class” WIDTH=350 HEIGHT=300 CODEBASE=”classdir/”>

ในสวนของ Applet เอง ตองมีคําสั่งในการรับขอมูลที่สงผาน HTML คือ

String getParameter(String name);
name ในที่นี้คือ param-name1 ในสวนของ HTML นัน่ เอง
ตัวอยาง
import java.applet.*;
import java.awt.*;

public class SampleApplet2 extends Applet {

String message = “Hello World!!”;
Color textColor = Color.blue;
String pFntsize;
String sColor;
int fntsize = 24;
Font fnt;

public void init() {

sColor = getParameter(“color”);
pFntsize = getParameter(“font”);
if (pFntsize != null) {
fntsize = Integer.parseInt(pFntsize);
fnt = new Font(“Serif”, Font.BOLD, fntsize);
}
else
fnt = new Font(“Serif”, Font.BOLD,24);
if (sColor.equals(“red”))
textColor = Color.red;
}

public void paint(Graphics g) {

g.setFont(fnt);
g.setColor(textColor);
g.drawString(message, 130, 70);
Graphics2D g2 = (Graphics2D) g;
Rectangle box1 = new Rectangle(40, 10, 60, 30);
g2.draw(box1);
box1.translate(15, 25);
g2.draw(box1);
}
}

<HTML>
<BODY>
<APPLET CODE=”SampleApplet2.class”>
<PARAM NAME = font VALUE=”36”>
<PARAM NAME = color VALUE=”red”>
</APPLET>
</BODY>
</HTML>

2/2545 9