Chapter9

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() { … } public void stop() { … } public void destroy() { … } public void pain (Graphics g) { … }

วงจรชีวิตของ Applet

Method หลักของ applet สําหรับวาดรูปบน Applet

method declarations } โปรแกรมประเภท applet ตองเปน sub-class ของ class Applet ซึง่ กําหนดไวใน package java.applet 9.1 วงจรชีวิตของ applet applet มีวงจรชีวิตดังแสดงในแผนภาพตอไปนี้ init()

2/2545

start()

stop()

destroy()

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 ทีใ่ ชในการเปลี่ยนแปลงรูปแบบจอภาพ ที่ใชกันสวนใหญ สามารถสรุปไดดังนี้ -

2/2545

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) 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 เทานั้น AudioClip และ method ในการประมวลผลเสียงประกอบดวย void loop() : ใหเลนแฟมขอมูลเสียงโดยไมมีการหยุด void play() : เริม่ เลนแฟมขอมูลเสียง และจะเลนเพียงครั้งเดียว void stop() : หยุดเลน

ไฟลเสียงจะมี class เปน

ชุดคําสั่งในการอานและประมวลผลแฟมขอมูลเสียงมีดังนี้ 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 CODE=”YourApplet.class” WIDTH=350 HEIGHT=300>

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); } } <APPLET CODE=”SampleApplet2.class”>

2/2545

9