Introduction to Programming Java Language

บทท่ี 11: GUI และ Event Handling intro. to Java (FEU.faa)

ภาพที่ 11.29 แสดงขอ มูลเม่อื ผูใ ชเลือก jRadioButton2 (Weight)

ขน้ั ตอนตอไปก็คือการสนองตอบตอ เหตุการณใ น JTextField และ JScrollBar โดยในขัน้ แรกนี้
เราจะเร่ิมจาก JTextField กอน
เรมิ่ ตน ดวยการเลอื ก jTextField1 กดปมุ ขวาบน mouse เลือก Events Æ Action Æ
actionPerformed เรากจ็ ะได method actionPerformed() ทไ่ี มมี code และเราตองใส code
ดงั นี้

private void jTextField1ActionPerformed(java.awt.event.ActionEvent evt) {
value = Double.parseDouble(jTextField1.getText());
jScrollBar1.setValue((int)value);
actionMtoU(value);

}

เราดึงเอาขอมูลออกจาก jTextField1 แลวนาํ ไปเกบ็ ไวใน value (เราประกาศใหเปน class
variable) หลังจากนน้ั เรากก็ าํ หนดใหค าใน jScrollBar1 เปนคาเดียวกนั กับคาที่เขา มาจาก
keyboard ดวยการเรียกใช method setValue() แตเนอ่ื งจากวาเราสามารถกาํ หนดคา จาก int
เทาน้นั เราจงึ ตอ งเปล่ยี นคา value จากเดิมทเี่ ปน double ใหเ ปน int
เราตอ งไมล ืมวา ผูใชตอ งกดปมุ Enter กอ นการสนองตอบเหลานี้จึงเกดิ ขนึ้ สวนสําคญั ทีเ่ ราตอง
ทาํ ตอไปก็คอื เปล่ยี นขอมลู ทผ่ี ูใชใ สเขา มาใหเปน อีกหนว ยหนึง่ ใน jTextField2 โดยกําหนดให
เรียก method actionMtoU()

private void actionMtoU(double value) {
char type;
if(jRadioButton1.isSelected())
type = 'D';
else if(jRadioButton2.isSelected())
type = 'W';
else
type = 'T';
int index1 = jComboBox1.getSelectedIndex();
int index2 = jComboBox2.getSelectedIndex();
result = convertMtoU(value, type, index1, index2);
jTextField2.setText(String.valueOf(result));

}

เราตอ งตรวจสอบใหด วี าคา ใน component ตา ง ๆ สมั พนั ธก ัน ทัง้ นก้ี เ็ พื่อใหก ารเปลี่ยนหนว ย
ถกู ตองกบั การวดั ทผ่ี ูใชเ ลอื ก เชน จาก Centimeters Æ {Inches, Feet, Yards, Miles} โดยเรา
กาํ หนดให 'D' เปน ระยะทาง 'W' เปน นํา้ หนกั และ 'T' เปนอณุ หภูมิ การเปล่ียนหนว ยเกิดข้ึนใน
method convertMtoU() ซ่ึงเปน method ทใี่ ชต วั แปร value, type, index1 และ index2 เปน
parameter ซ่ึงมกี ารทาํ งานดงั นี้

397

เรม่ิ ตน การเขียนโปรแกรมดวย Java intro. to Java (FEU.faa)

private double convertMtoU(double value, char type, int i, int j) {
double multiplier = 0;
double result = 0;
switch(type) {
case 'D': multiplier = mdUnit[i].getMultiplier() /
udUnit[j].getMultiplier();
result = value * multiplier;
break;
case 'W': multiplier = mwUnit[i].getMultiplier() /
uwUnit[j].getMultiplier();
result = value * multiplier;
break;
case 'T': result = value * 9 / 5 + 32;
break;
}
return result;

}

คาทไี่ ดจ ากคาํ นวณใน method convertMtoU() กจ็ ะถูกนาํ ไปแสดงใน jTextField2 ตอไป

การสนองตอบเม่ือผูใชใ สขอ มลู ใน jTextField2 กค็ ลาย ๆ กบั ที่เราทําใน jTextField1 ตางกัน
ตรงท่ีเราเรยี กใช method actionUtoM() และ method convertUtoM() แทนซึ่งมี code ดงั นี้

private void actionUtoM(double value) {
char type;
if(jRadioButton1.isSelected())
type = 'D';
else if(jRadioButton2.isSelected())
type = 'W';
else
type = 'T';
int index1 = jComboBox1.getSelectedIndex();
int index2 = jComboBox2.getSelectedIndex();
result = convertUtoM(value, type, index2, index1);
jTextField1.setText(String.valueOf(result));

}

private double convertUtoM(double value, char type, int i, int j) {
double multiplier = 0;
double result = 0;
switch(type) {
case 'D': multiplier = udUnit[i].getMultiplier() /
mdUnit[j].getMultiplier();
result = value * multiplier;
break;
case 'W': multiplier = uwUnit[i].getMultiplier() /
mwUnit[j].getMultiplier();
result = value * multiplier;
break;
case 'T': result = (value - 32) * 5 / 9;
break;
}
return result;

}

สวนสุดทา ยทีเ่ ราตองทาํ ก็คือการเขยี น code รองรับถาผูใชเ ลือกเปลยี่ นขอ มูลใน JScrollBar
(ดว ยการเลอ่ื นไปมา)

ข้ันตอนกค็ อื เลือก Events Æ Adjustment Æ adjustmentValueChanged บน jScrollBar1
เรากจ็ ะได method (เชน เดยี วกันกบั code ทเ่ี กิดข้ึนโดยอตั โนมัติในการดักฟงเหตกุ ารณอ ืน่ ๆ –
นั่นก็คอื ไมม ี code! - ตองเขยี นเอง)

private void jScrollBar1AdjustmentValueChanged(
java.awt.event.AdjustmentEvent evt) {
double scbValue = (double)jScrollBar1.getValue();
jTextField1.setText("" + scbValue);
actionMtoU(scbValue);

}

398

บทที่ 11: GUI และ Event Handling

Code ท่อี ยภู ายในกไ็ มมีอะไรซบั ซอ นเราแคด ึงคา ออกจาก jScrollBar1 สงออกไปยัง
jTextField1 เรยี กใช method actionMtoU() ดว ยคาใน jScrollBar1 น้ีคา ในสว นอ่ืน ๆ ทีม่ ีการ
ดกั จับเหตกุ ารณก จ็ ะทําหนาทใี่ นการเปล่ียนคา ตามทต่ี วั เองรบั ผดิ ชอบ

ภาพที่ 11.30 คาที่เปลี่ยนไปใน jTextField1 และ jTextField2 ถาผใู ชเ ล่อื นปุม ใน jScrollBar1 intro. to Java (FEU.faa)

เชน เดยี วกนั การเขยี น code รองรบั การเปล่ยี นของ jScrollBar2 ก็คลายกนั เราเพียงแตเ ปลี่ยน
code ใหเปน

private void jScrollBar2AdjustmentValueChanged(
java.awt.event.AdjustmentEvent evt) {
double scbValue = (double)jScrollBar2.getValue();
jTextField2.setText("" + scbValue);
actionUtoM(scbValue);

}

หนา ตาของโปรแกรมทผ่ี ูอา นไดอ าจไมคอยเหมือนกบั ท่ีเห็นน้ี ทง้ั นกี้ ็อาจขน้ึ อยูกบั font ทีใ่ ช
ขนาดหรอื การเปลยี่ นแปลงอื่น ๆ ใน Properties ของ component นั้น ๆ ผอู านสามารถทดสอบ
ดวยการเปล่ียน properties เหลานี้เอง

ณ จดุ นี้ผูอา นอาจจะสงสยั วา ทาํ ไมไมมอี ะไรแสดงเลยหลังจากท่ี compile และ run โปรแกรม
ยงั ไมจบครบั เรายงั ตองไปเขียน code อีกสกั สองหรอื สามบรรทดั ภายใน Main ท่ี Netbeans
สรางขึ้น ดังนี้

public static void main(String[] args) {
//sets Java's LAF
JFrame.setDefaultLookAndFeelDecorated(true);

ConversionForm cfr = new ConversionForm();
cfr.setVisible(true);
}

การ compile และ run โปรแกรมทที่ าํ ไดง า ย ๆ กค็ ือ กดปุมใน tool bar

Build Main Project Run Main Project

Clean & Build Main Project

399

เร่ิมตนการเขียนโปรแกรมดว ย Java intro. to Java (FEU.faa)

ในสว นของตวั แปร (global variables) ทเ่ี ราใชมดี ังน้ี (ประกาศตามหลังตวั แปรที่ Netbeans
สรา งข้นึ ใน ConversionForm.java)

private Unit[] mdUnit;
private Unit[] udUnit;
private Unit[] mwUnit;
private Unit[] uwUnit;
private double value;
private double result;

โปรแกรมตัวอยา งท่เี ราแสดงใหดเู ปนตัวอยา งงา ย ๆ ทแ่ี สดงใหเหน็ ถึงความสามารถของ
Netbeans ในการสรา ง GUI ทม่ี หี นา ตาดูแลว สวยงาม ใชเ วลานอ ยในการสรา ง (ไมเหมอื นกับ
การสรา งดวยการเขยี น code เชนทที่ ํากอ นหนา น)ี้ ผอู านสามารถลดเวลาในการพัฒนาโปรแกรม
ท่มี ีความซบั ซอ นลงไดอยา งมาก ทาํ ใหมเี วลาในการพฒั นาสว นที่เปน logic ของโปรแกรมมาก
ขึ้น
[Run โปรแกรมภายนอก Netbeans IDE]
ถงึ ตอนนเ้ี รา run โปรแกรมไดเพยี งแคผ านทาง IDE ของ Netbeans เทาน้นั ซ่ึงอาจไม
สนองตอบตอความตอ งการของบางคนไดด ีพอ ดงั นัน้ เพื่อใหโปรแกรมทีเ่ ราสรางข้ึนสามารถ run
ในท่ีอนื่ ๆ ไดเ รากเ็ พยี งแคหาไฟลส าํ คญั ๆ ท่ี Netbeans สรา งข้ึนโดยมขี ้ันตอนดังนี้

1. หา folder: dist ใน path ทีเ่ ราสรา ง project ของเรา
2. run โปรแกรมดว ยคําสัง่ java –jar conversion.jar
ถาเราตอ งการทจี่ ะ run ไฟลข องเราในท่อี ืน่ เรากต็ อ งเอาไฟลท ุกตวั ใน folder น้ีไป วธิ กี ารท่ีงา ย
ที่สดุ กค็ ือการบบี อดั (zip) เพือ่ นาํ ไปขยายในทอี่ ่นื ที่เราตอ งการ run โปรแกรม ภาพที่ 11.31
แสดงไฟลท ุกตวั ใน project conversion ทส่ี รา งขึ้นโดย Netbeans ผอู า นจะเห็นไฟล
conversion.jar ไฟล README.TXT และไฟล swing-layout-1.0.jar ซ่งึ เปนไฟลที่ Netbeans
ใชใ นการจดั วาง component ใหเราเพราะฉะนน้ั เราตอ งเอาไฟลต วั นี้ไปดวย

ภาพท่ี 11.31 dist folder และไฟลท ่อี ยภู ายใน (มองผาน Files tab ของ Netbeans)

ขัน้ ตอนสน้ั ๆ เพียงเทานี้กท็ ําใหเราสามารถทจี่ ะ run โปรแกรมทเ่ี ราสรา งขน้ึ จาก Netbeans ใน
ท่ีอ่นื ๆ ท่ีไมใชภ ายใน IDE ได
ถา ผูอ านอยากรวู า ไฟลท มี่ ีอยใู น conversion.jar มีอะไรบางก็ใชค าํ สั่ง jar xvf conversion.jar
เพ่อื ทําการแตกไฟลออก

400

บทที่ 11: GUI และ Event Handling

ภาพที่ 11.32 การขยาย (extract) ไฟล conversion.jar intro. to Java (FEU.faa)

เราคงไมพ ูดถงึ กระบวนการสรา ง jar ไฟลในทน่ี ้ี ผอู า นสามารถหาดูไดจ ากหนังสือหรอื web site
ตา ง ๆ ไดอ ยา งงาย ๆ ภาพดา นบนนี้แสดงถงึ ไฟลตาง ๆ ทจ่ี าํ เปน ในการ run project ทีเ่ ราสรา ง
ขึน้ โดย Netbeans จะทําการบีบอดั ไฟลเหลา นใี้ หเ ราเองเมอ่ื เราทําการ build project ภายในตวั
IDE เองทนี่ าสนใจอีกอนั หนงึ่ ก็คือขอ มูลทมี่ ีอยูในไฟล MANIFEST.MF

Manifest-Version: 1.0
Ant-Version: Apache Ant 1.6.5
Created-By: 1.5.0_06-b05 (Sun Microsystems Inc.)
Main-Class: edu.fec.it.conversion.Main
Class-Path: lib/swing-layout-1.0.jar
X-COMMENT: Main-Class will be added automatically by build

เราจะเหน็ ไฟล Main และ swing-layout-1.0.jar ซ่ึงเปน ไฟลสําคญั ทงั้ สองตัวโดยตัวแรกจะเปน
จดุ เริม่ ตน (entry point) ในการ run และตวั ท่สี องเปน layout ทีถ่ ูกใชโ ดย Netbeans ในการจัด
วาง component ตา ง ๆ ใหเรา

[เปลย่ี น Main.class ใหเ ปน ชอ่ื ท่ีเราตอ งการ]

ในตอนแรกท่เี ราสรา ง project: conversion น้นั เราใชช ื่อท่ี Netbeans กาํ หนดใหเราคือ Main
แตถา เราไมต อ งการใชช ่อื น้เี รากส็ ามารถเปลย่ี นใหเ ปนอยา งอืน่ ตามทเี่ ราตองการได วิธีการกง็ า ย
ๆ คือ เปล่ยี นชอื่ จาก Main ใหเ ปน ช่อื ท่ีเราตองการตอนเร่มิ ตน project

เปล่ยี นชอื่ จาก Main ให
เปนชื่อท่เี ราตองการ เชน
SomeClass ดงั ทเี่ หน็ น้ี

ภาพท่ี 11.33 เปลี่ยนชื่อ class จาก Main ใหเปนชอื่ ทีเ่ ราตองการ

401

เรมิ่ ตนการเขยี นโปรแกรมดว ย Java intro. to Java (FEU.faa)

[ใสลูกเลนใหก ับโปรแกรม conversion]
เราอยากทจี่ ะใหโ ปรแกรม conversion ของเรามกี ารแสดงเวลาขณะทีโ่ ปรแกรมกําลงั run อยู
ทางดา นขวาลางของ form เชน ทีเ่ หน็ จากภาพน้ี

ภาพท่ี 11.34 โปรแกรม conversion ทีม่ ีการแสดงเวลา

กระบวนการในการทาํ กไ็ มย าก เราเพียงแตเพม่ิ class TimeOfDay เขา สู class
ConversionForm ดังนี้ (ใหเ ปน inner class)

class TimeOfDay implements ActionListener {
public void actionPerformed(ActionEvent e) {
SimpleDateFormat tf = new SimpleDateFormat("hh:mm:ss", getLocale());
String st = tf.format(new Date());
jLabel1.setText(st);
}

}

ภายใน constructor ของ ConversionForm เรากเ็ พ่มิ code

time = new TimeOfDay();
timer = new Timer(1000, time);
timer.start();

โดยเราจะใช jLabel1 เปนตวั แสดงเวลาทเี่ ปลยี่ นไปทุก ๆ หนงึ่ วนิ าที ผา นทาง class Timer ที่
ถกู เรยี กใน constructor ผานทาง method start()
[เปลีย่ นโปรแกรม conversion ใหพดู ภาษาไทย]
การกาํ หนดใหข อความทอ่ี ยใู นโปรแกรมใหใชภาษาไทยเปน ภาษาในการสอ่ื ถึงผใู ชน้ัน ทําไดงา ย
ๆ ดวยการกําหนด properties ไฟลใ หกับตวั โปรแกรมของเรา เพื่อใหเหน็ ถงึ ตัวอยางเราจะ
เปล่ียนขอความทีแ่ สดงในหนา ตา งหลัก ใหเปน

ภาพที่ 11.35 เปล่ียนขอ ความในหนาตา งใหใ ชภ าษาไทย

ขน้ั ตอนแรกทีเ่ ราตองทํากค็ อื สราง properties ไฟล
1. เลือก File Æ New File
2. เลอื ก Properties File จาก Other category เสร็จแลวกดปุม Next

402

บทท่ี 11: GUI และ Event Handling

3. กาํ หนดให properties ไฟลมชี ื่อเปน Bundle โดยกาํ หนดใหอ ยภู ายใต path ท่เี ราใช
ในโปรแกรมของเรา (ใช Browse ในการหา)

4. กดปมุ OK intro. to Java (FEU.faa)
การกําหนดใหม ภี าษาไทยใชใ นโปรแกรมน้นั เราจะเรมิ่ ตน ดว ยการเลือก component ท่เี รา
ตองการแสดงใน form หลกั ของเรา (ConversionForm)

1. เลอื ก Distance ในพืน้ ทข่ี องการออกแบบ
2. ในหนาตา ง Properties กดปุม … ของ Text property เรากจ็ ะไดห นา ตา ง pop-up

ข้นึ มา
3. เลือก Resource Bundle ใน combo box: Select Mode ซึ่งจะทาํ ให editor

เปลย่ี นเปน resource bundle
4. ภายใน Bundle Name field ใหหาไฟล Bundle.properties

5. ใสค า Distance ใน fields: Key และ Value

6. กดปมุ OK
7. ทาํ แบบเดยี วกนั น้ีกบั Weight และ Temperature
[กาํ หนด Locale ใหม (ไทย)]
1. กดปุมขวาบน mouse ของ node: Bundle.properties ในหนา ตาง Projects
2. เลือก Add Locale
3. ใส th ใน Language code (หรอื เลือกจาก list)
4. ใส TH ใน Country Code
5. กดปุม OK เรากจ็ ะได locale ใหมภ ายใน Bundle.properties

6. ภายในหนาตาง Projects กดปุมขวาบน Bundle.properties เลือก Open
7. เปลี่ยนคาในหนา ตา งใหเปนไปตามทเ่ี ราตอ งการ

403

เรมิ่ ตน การเขยี นโปรแกรมดวย Java intro. to Java (FEU.faa)

[ทดสอบ locale ใหมท เ่ี รากําหนดขนึ้ ]
1. ในหนาตา ง Projects กดปุมขวาบน conversion เลอื ก Properties
2. ภายใต Categories เลือก Run
3. ใส –Duser.language=th –Duser.country=TH ในชอ ง VM Options
4. กดปมุ OK
5. กดปุม ขวาบน project: conversion เลอื ก Run

เรากจ็ ะไดห นา ตางทมี่ ภี าษาไทยใน JRadioButton แทนภาษาองั กฤษดงั ทไ่ี ดแ สดงใหด กู อ น
หนานี้
ผูอา นตอ งอยา ลืมกาํ หนดใหภาษาทแี่ สดงใน Windows เปนภาษาไทย (ทําผา น control panel)
กอ นจึงจะทําใหโ ปรแกรมของเราทาํ งานในแบบภาษาไทยได (กําหนดใหภ าษาไทยเปน default
locale)
[กาํ หนดการใชภ าษาไทยในขณะทีโ่ ปรแกรมกาํ ลัง execute]
ตัวอยา งการใชภ าษาไทยในตวั อยางกอนหนา นเ้ี ปนการทาํ ในชว งเวลาของการออกแบบ (เขยี น)
โปรแกรม ซ่ึงสว นใหญจ ะเปน การเปล่ยี นคา ของ string ทแ่ี สดงขอ ความสื่อถึงผใู ชใ นรูปแบบตาง
ๆ ในบางคร้งั เราตองการกาํ หนดคาของ string เหลานี้ ณ เวลาทีโ่ ปรแกรมกาํ ลัง execute อยู
เชน กาํ หนดคา ของขอ มลู ใน combo box ดงั ท่เี ราทาํ ในโปรแกรม conversion
โปรแกรมตวั อยา งทเ่ี ราจะแสดงใหด เู ปนการกาํ หนดการใชภ าษาดว ยการใช resource bundle
จาก locale ทกี่ าํ หนดจากโปรแกรม ดังทแ่ี สดงใหด ใู นภาพที่ 11.36 นี้

ภาพที่ 11.36 หนาตา งเริ่มตนเม่อื run โปรแกรม

โปรแกรมตัวอยา งนจี้ ะกาํ หนดใหม ขี อ มูลใน combo box หลังจากทผี่ ใู ชไดก ดปุม Thai โดยจะ
กําหนดใหเปน เดือนในภาษาไทยจาก มกราคมไปจนถึงธันวาคม พรอมกบั เปลีย่ นขอ ความบนปุม
ใหเ ปน English ซึ่งเมอื่ ผูใชกดปมุ อกี ครั้งขอมลู ใน combo box กจ็ ะเปลยี่ นเปน เดือน January
ไปจนถงึ เดือน December และทกครั้งทม่ี กี ารกดปุม หรอื เลอื กขอ มูลใน combo box เราก็จะ
แสดงขอมลู น้นั ใน text area ดานลา ง

404

บทท่ี 11: GUI และ Event Handling intro. to Java (FEU.faa)

ภาพท่ี 11.37 ผลลัพธบ างสว นหลังจากผใู ชกดปุม (และเลือกเดือน)

ขน้ั ตอนการสรางก็คลา ยกบั ที่เราไดท าํ มากอนหนา น้ี ตางกันตรงท่วี า เราตองสรา ง properties file
ใน Source Packages และเรยี กใช Resource Bundle ภายในโปรแกรม ภาพที่ 11.38 แสดง
ตาํ แหนงของ properties file (ตาํ แหนงจะตา งกบั โปรแกรม conversion)

ภาพท่ี 11.38 ตาํ แหนงของ properties file ท่เี ราตองสราง

โดยเราจะกําหนดใหมี locale สองตัวคอื en_US และ th_TH ซง่ึ มีขอ มลู ดงั นี้

การกาํ หนดการสนองตอบตอ event ทเ่ี กดิ ข้ึนทาํ สองที่ คือ เมอ่ื ปุมถูกกด และเม่อื combo box
ถูกเลือก ซึ่งมี code ดงั น้ี

405

เรม่ิ ตน การเขียนโปรแกรมดวย Java intro. to Java (FEU.faa)

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
String caption = jButton1.getText();
if(caption.equalsIgnoreCase("Thai")) {
jButton1.setText("English");
ResourceBundle f = ResourceBundle.getBundle("Months", thLocale);
populateComboBox(f);
}
else {
jButton1.setText("Thai");
ResourceBundle f = ResourceBundle.getBundle("Months", usLocale);
populateComboBox(f);
}

}

private void populateComboBox(ResourceBundle f) {
jComboBox1.removeAllItems();
jComboBox1.addItem(f.getString("Jan"));
jComboBox1.addItem(f.getString("Feb"));
jComboBox1.addItem(f.getString("Mar"));
jComboBox1.addItem(f.getString("Apr"));
jComboBox1.addItem(f.getString("May"));
jComboBox1.addItem(f.getString("Jun"));
jComboBox1.addItem(f.getString("Jul"));
jComboBox1.addItem(f.getString("Aug"));
jComboBox1.addItem(f.getString("Sep"));
jComboBox1.addItem(f.getString("Oct"));
jComboBox1.addItem(f.getString("Nov"));
jComboBox1.addItem(f.getString("Dec"));

}

private void jComboBox1ActionPerformed(java.awt.event.ActionEvent evt) {
String month = (String) jComboBox1.getSelectedItem();
if(month != null)
jTextArea1.append(month + "\n");

}

ทุกครัง้ ทผ่ี ูใ ชก ดปมุ (ซ่งึ อาจเปน "Thai" หรอื "English") เราก็จะดึงเอาคาที่อยบู นปมุ ออกเพื่อ
ตรวจสอบวา เราตองกาํ หนดขอ มลู ใน combo box วาควรเปน ภาษาไทยหรอื ภาษาองั กฤษ และ
เม่อื ไดแ ลว เราก็เรยี กใช properties ท่ีเราเขยี นขึ้นผานทาง resource bundle เชน

ResourceBundle f = ResourceBundle.getBundle("Months", usLocale);

Java กจ็ ะไปคนหา properties ไฟลท ี่ขนึ้ ตน ดวย Months ตามดว ย locale: th_TH หรอื en_US
ท่เี ราไดกําหนดไวจ ากการเรียก หลงั จากน้ัน (ถาหาไฟลเจอ) เรากท็ าํ การกาํ หนดคา ใหก บั
combo box ดว ย

jComboBox1.removeAllItems();
jComboBox1.addItem(f.getString("Jan"));

โดยเราเรม่ิ ตน ดว ยการลบคา เกา ท่อี ยอู อกกอ น หลงั จากนนั้ จงึ ทาํ การใสขอมลู ท่ดี ึงออกมาจาก
properties ไฟลต ามคา ของ key ผานทาง method getString() ของ resource bundle

เนอื่ งจากวาเราทําการกาํ หนดคาของขอ มลู ใน combo box จากการกดปุม ซงึ่ การกระทาํ ดงั กลา ว
จะทาํ ใหเ กดิ event ขน้ึ ใน combo box ดังนน้ั ขอ มูลกจ็ ะถกู สง ไปยงั text area ดวย เพราะฉะนนั้
ทกุ คร้ังของการกดปมุ เราก็จะเหน็ เดอื นที่อยดู า นบนสดุ ของ combo box แสดงออกทาง text
area (January หรอื มกราคม) เสมอ

[การใช Internationalization Wizard]

เราจะใชโ ปรแกรมการสราง GUI ตวั อยา งท่ีมากับ Netbeans 5.0 เปนตวั อยา งการเปลยี่ น string
ท่มี ีอยูในโปรแกรมท้ังหมดใหเ ปนภาษาไทย โดยเราจะใช internationalization wizard เปนตวั
ชว ย

เราจะเร่มิ ตนขนั้ ตอนดงั น้ี

406

บทท่ี 11: GUI และ Event Handling intro. to Java (FEU.faa)

1. เลอื ก File Æ New Project
2. ภายใต Categories เลือก General และเลอื ก GUI Form Example แลว กดปมุ Next
3. ผอู านสามารถเปลี่ยนช่อื project ไดถ าตองการ ในทีน่ เี้ ราจะใชช่ือท่กี าํ หนดมา คือ

GUIFormExamples
เมอ่ื ทาํ เสรจ็ แลว เราก็จะเห็นไฟล readme.txt ซ่ึงเปนไฟลท บี่ อกถงึ สว นประกอบตา ง ๆ ท่ีมอี ยูใน
ตวั อยา ง และเมอ่ื กดดูไฟลใ น project folder เราก็จะเห็นไฟลตา ง ๆ ดังนี้

ขนั้ ตอนตอ ไปก็คอื การสรา ง properties file ใหก บั form ท่ีมอี ยู ซึง่ เราจะทําใหกับ Antenna
และ ContactEditor สวน Find เราจะทง้ิ ไวเฉย ๆ

1. กดปุม ขวาบน examples node ใน Projects Tab เลือก New Æ Properties File
2. ใสช อ่ื ContactEditor แลว กดปมุ Finish
เราจะเห็น Contact.properties ไฟลใ น examples folder ซงึ่ จะถกู เปด ไวใ น Source editor
ดวย (เราจะทาํ อยา งเดยี วกนั นก้ี บั Antenna.properties ไฟลดว ยกไ็ ด)

ตอไปเราจะเรยี ก Internationalization wizard ข้ึนมาทํางาน
1. กดปมุ ขวาบน Source Packages เลอื ก Tools Æ Internationalization Æ
Internationalization Wizard
2. เพอื่ ใหเราไมตอ งกังวลกับการทาํ งาน เราจะลบ examples.Find ออกดวยการเลือก
Find แลวกดปมุ Remove Source(s) (ลบ Antenna ดวยกไ็ ด)

407

เร่มิ ตน การเขยี นโปรแกรมดวย Java intro. to Java (FEU.faa)

3. กดปมุ Next เราก็จะไดห นาจอคลาย ๆ กบั ทีเ่ หน็ น้ี

4. เมื่อทาํ การ save ไฟลแ ลวข้นั ตอนตอไปก็คอื การเพม่ิ locale ท่ตี อ งการ เพอื่ ใหงายขน้ึ
เราจะทําเฉพาะ ContactEditor เทา นน้ั

5. ขั้นตอนทเ่ี หลือกค็ ือการทดสอบ locale เชนทไี่ ดท าํ กอนหนา นี้ (ใส –
Duser.language=th –Duser.country=TH ใน VM Options ของ Run ใน
Properties ของ GUIFormExamples project)

408

บทท่ี 11: GUI และ Event Handling

เรากจ็ ะไดผ ลลพั ธคลาย ๆ กับทเี่ ห็นนี้

ทุกครงั้ ท่ีเราทําการเปลยี่ นแปลง source code เราจะตอ งทาํ การเรยี ก Internationalization intro. to Java (FEU.faa)
Wizard ขนึ้ มาใชเ พือ่ ใหการเปลย่ี นแปลงที่เกดิ ขนึ้ มผี ลตอโปรแกรมของเรา (ถงึ แมวา จะไมม ีการ
เปลย่ี นแปลงตวั properties ไฟลก ต็ าม การเปลี่ยนแคน อ ยนดิ เชน ขนาดของ font กม็ ผี ล ดงั นัน้
เราตองไมล ืมทจี่ ะเรยี ก Internationalization Wizard หลงั การเปล่ยี นแปลงนน้ั ๆ)
Netbeans เปนเครื่องมือทด่ี ที ส่ี ดุ ตัวหน่งึ ในการพัฒนาโปรแกรมทต่ี อ งใช UI ในการโตต อบกับ
ผูใช โปรแกรมตัวอยา งท่ีเราแสดงใหดเู ปน โปรแกรมเล็ก ๆ ทแี่ สดงถึงการใช UI component
ตาง ๆ (บางสว น) ที่ Netbeans มใี ห ผูอ านควรฝกฝนการใช Netbeans ในการสรางโปรแกรมอ่นื
ๆ เพือ่ ใหเกิดความคลองตัวและสามารถใช Netbeans ไดอยา งมปี ระสทิ ธภิ าพตอ ไป
สรปุ
ในบทน้ีเราไดแสดงกระบวนการ และวธิ กี ารเรยี กใช component ตา ง ๆ สําหรับการสรา ง
โปรแกรมงาย ๆ หลายโปรแกรม รวมไปถงึ การใช event listener ตาง ๆ ที่ Java มใี ห นอกจากน้ี
เรายังไดแ สดงวธิ ีการใช Netbeans ในการสรา งโปรแกรมแบบทีเ่ รียกวา visual programming
ซงึ่ เปนการลดขน้ั ตอนในการพฒั นาโปรแกรมในสว นของ UI โดยรวมแลว เราไดพูดถึง
9 การใช JButton, JLabel, JRadioButton, JComboBox, JCheckBox, JTextField,

JTextArea, JSlider, JSpinner, JProgressBar, ProgressMonitor, JFileChooser,
JMenuBar, JMenu, JMenuItem
9 การใช layout manager: FlowLayout, GridLayout, BorderLayout
9 การดักฟง event ตา ง ๆ และการสนองตอบตอ เหตุการณน นั้ ๆ
9 การใช Netbeans ในการพฒั นาโปรแกรม
9 การใช internationalization ในโปรแกรม
แบบฝก หดั
1. จงออกแบบ GUI สาํ หรบั โปรแกรมตวั อยาง (Interest.java) ในบททสี่ าม แทนท่ีจะรับขอมูล
แบบเดมิ ใหใ ช JTextField รับขอมูลทงั้ สามตวั แทนและจะประมวลผลเมือ่ ผใู ชก ดปุมเทา นน้ั
การแสดงผลใหใ ช JTextArea

409

เร่ิมตน การเขียนโปรแกรมดวย Java intro. to Java (FEU.faa)

2. จงออกแบบ GUI สาํ หรบั โปรแกรมการหา ตวั หารรว มมาก (GCD) และตัวคณู รว มนอย
(LCM) ของตัวเลขสองตวั ที่รบั เขามาทาง JTextField ใหแสดงผลลัพธอ อกทาง JLabel (ดู
คาํ อธบิ ายเรอ่ื ง GCD และ LCM จากโจทยท า ยบททส่ี าม)

3. จงออกแบบ GUI สาํ หรับโปรแกรม Text Editor อยา งงา ยทยี่ อมใหผ ูใ ช คน หาคําที่ตอ งการ
ได ทําการ cut และ paste ได ลองดโู ปรแกรม Notepad เปนตวั อยาง

4. จงออกแบบ GUI สาํ หรบั โปรแกรมการเปลยี่ นสกลุ เงินตา ง ๆ เชน US Dollar, British
Pound, Japanese Yen โดยมสี กลุ เงนิ ไมนอยกวาหา สกลุ การเปลย่ี นสกลุ จะเกิดขึ้นเมื่อผใู ช
ใสส กุลเงนิ ใดสกลุ หนง่ึ เสรจ็ (หลงั จากการกดปมุ )

5. จงออกแบบ GUI สาํ หรับโปรแกรมเคร่อื งคดิ เลขฐาน ทมี่ คี วามสามารถในการเปลย่ี นเลขฐาน
หลัก ๆ ที่เก่ียวขอ งกบั คอมพวิ เตอร พรอ มท้ังสามารถท่จี ะ บวก ลบ เลขตาง ๆ เหลา นี้ได

6. จงออกแบบ GUI สําหรบั โปรแกรมทที่ ําการ simulate การคํานวณดอกเบ้ียของบัญชีเงิน
ฝากทม่ี ีการนําเงนิ เขาและออกแบบ random การคํานวณตองคาํ นงึ ถงึ คาความถูกตอ งของ
เงนิ ณ เวลาน้ัน ๆ ดวย โปรแกรมควรมีการใช Thread เพือ่ แกปญ หาเรื่อง Critical Section
โปรแกรมควรคดิ ดอกเบี้ยทกุ ครั้งทีม่ กี ารฝากเงนิ ท่มี ากกวา 1000 บาทและหกั คาโสหยุ ทุก
ครงั้ ทม่ี กี ารถอนเงินเกิน 500 บาท

410