Transcript GUI ของ MIDP - ผศ.วิวัฒน์ ชินนาทศิริกุล

GUI ของ MIDP
อ.วิวฒ
ั น์ ชินนาทศิริกุล
GUI คืออะไร


GUI (Graphic user interface)
คือส่วนที่ใช้ติดต่อกับผูใ้ ช้งาน เช่น การ
แสดงผล การรับข้อมูล การตรวจสอบเหตุการณ์ต่างๆ
GUI มี 2 ประเภท
1. High Level API
2. Low Level API
High Level API



เป็ นอินเทอร์เฟซ สาหรับการรับและแสดงผลข้อมูล เช่น กล่องข้อความ
(textbox) รายการ (List)
High Level API มีลก
ั ษณะคล้าย Control ของ Visual Basic ซึ่ง
สามารถเลือกมาสร้างเป็ นอ็อบเจกต์ใช้งานใน MIDlet ได้ทนั ที
คลาสของ High Level API เป็ นคลาสที่สืบทอดมากคลาส Screen
ข้อเสียของการใช้ High Level API
 ผูพ
้ ฒ
ั นาโปรแกรมไม่สามารถควบคุม หรือเปลี่ยนแปลงลักษณะบางอย่าง
ของอ็อบเจกต์ได้ เช่น ขนาด ตาแหน่ ง สี รูปแบบตัวอักษร
ข้อดีของการใช้ High Level API
 ผูพ
้ ฒ
ั นาโปรแกรมไม่ตอ้ งกังวลเรื่องการแสดงผลในอุปกรณ์ที่แตกต่างกัน
เพราะ High Level API มีตวั จัดการเรื่องการแสดงผล ทาให้ผพู้ ฒ
ั นา
สร้างและใช้อินเตอร์เฟซ อย่างอิสระโดยไม่ขึ้นกับฮาร์ดแวร์ หรืออุปกรณ์ที่
จะรัน MIDlet
Low Level API



ออกแบบมาสาหรับ MIDlet ที่ตอ้ งการแสดง หรือจัดการเกี่ยวกับกราฟิ ก
โดยตรง เช่น แสดงข้อความ วาดเส้นตรง วงกลม หรือการตรวจสอบ
เหตุการณ์ต่างๆในระดับตา่ เช่น สถานะการกดปุ่ ม
คลาสของ Low Level API สืบทอดมาจากคลาส Canvas
ในการใช้ Low Level API หากนา MIDlet ไปรันในอุปกรณ์ที่แตกต่าง
กัน อาจทาให้ได้ผลการทางานที่แตกต่างกัน เช่น ถ้าออกแบบหน้าจอไว้ที่
ขนาด 100x90 พิกเซล แล้วนา MIDlet ไปรันในอุปกรณ์ที่มีขนาดเล็ก
กว่า ก็จะทาให้เกิดปั ญหาในการแสดงผล
อ็อบเจกต์ Display


ในการทางานของ MIDlet ไม่วา่ จะใช้ High Level API หรือ Low
Level API ก่อนที่อ็อบเจกต์ต่างๆ จะแสดงออกมาให้เห็นทางจอภาพได้
ตัว MIDlet จะต้องติดต่อกับจอภาพของอุปกรณ์ผ่านตัวจัดการจอภาพ ซึ่ง
ใน MIDlet คืออ็อบเจกต์ที่ชื่อ Display
ตัวอย่างโค้ด
Display display;
…
display=Display.getDisplay(this);
Displayable Class
Displayable
Low-Level
API
Canvas
Alert
StringItem
High-Level
API
ImageItem
Screen
Textbox
TextField
List
DateField
Form
Gauge
Item
ChoiceGroup
คลาส Screen

Screen
เป็ นคลาสสาหรับ GUI แบบ High Level API ซึ่งมีคลาสย่อย
อีก 4 คลาส คือ
1. Alert
2. Textbox
3. List
4. Form
จะแสดงผลข้อมูลที่หน้าจอต้องทาอย่างไร
1.
สร้างอ็อบเจกต์ของคลาส Display
เช่น Display display;
หรือ Display d;
2. ใช้เมธอด getDisplay() คลาสของ Display กาหนดค่าให้อ็อบเจกต์
เช่น display=Display.getDisplay(this);
4. สร้างอ็อบเจกต์ของคลาส Screen ที่ตอ้ งการใช้งาน
3. ส่งอ็อบเจกต์ของคลาส Screen หรือ คลาส Canvas ไปแสดงผลด้วย
เมธอดsetCurrent()
เช่น display.setCurrent(alert); เมื่อ alert เป็ นอ็อบเจกต์ของคลาส Alert
display.setCurrent(t); เมื่อ alert เป็ นอ็อบเจกต์ของคลาส TextBox
คลาส TextBox

TextBox
เป็ นกล่องรับข้อความ ใช้สาหรับข้อมูลที่ผใู้ ช้งานป้อนทางปุ่ มมือ
ถือ


ใน MIDlet เป็ นช่องรับข้อความขนาดใหญ่จานวน 1 ช่อง
(ปกติจะมีขนาดเท่ากับหน้าจอมือถือ)
รูปแบบของ TextBox
TextBox
TextBox(String title,String text,int Maxsize,int Constraints)

Constraints เป็ นรูปแบบการรับข้อมูลของ TextBox
TextField.ANY
TextField.EMAILADDR
TextField.NUMERIC
TextField.PASSWORD
TextField.PHONENUMBER
TextField.URL
มีดงั นี้
ตัวอย่าง การสร้าง TextBox รับข้อมูล
ผลการรันโปรแกรม
คลาส Command


Command
เป็ นคลาสสาหรับสร้างเมนู เช่น บันทึกข้อมูล ลบข้อมูล เมนู
ที่สร้างขึ้ นจากคลาส Command จะปรากฏที่บริเวณด้านล่างของจอภาพ
รูปแบบคาสัง่ ในการสร้าง Command
Command(String label,int commandType, int priority)
โดยที่ label คือ ข้อความ
CommandType คือ รูปแบบของ Command
priority คือ ลาดับความสาคัญของ Command
CommandType เป็ นตัวกาหนดรูปแบบของ Command มีดงั นี้
1.
2.
3.
4.
5.
6.
7.
8.
Command.OK
Command.CANCEL
Command.STOP
Command.EXIT
Command.BACK
Command.HELP
Command.ITEM
Command.SCREEN


รูปแบบที่ได้ของ Command จะขึ้ นอยูก่ บั อุปกรณ์ที่รนั MIDlet เมื่อ
MIDlet ทางาน อุปกรณ์บางตัวจะนา Command ไปผูกกับปุ่ ม Soft key
ด้านซ้าย แต่อุปกรณ์บางตัวจะนา Command ไปผูกกับปุ่ ม Soft key
ด้านขวา
กรณีที่มี Command มากกว่า 2 ตัว ค่า Priority ที่กาหนดจะมีผล โดย
อุปกรณ์จะนา Command ที่มีค่าความสาคัญมากที่สุดไปผูกกับ Soft
key ส่วน Command ที่เหลือจะถูกรวมอยูใ่ นเมนู
Command Class (ต่ อ)

การสร้างอ็อบเจกต์ของคลาส Command จะต้องส่งค่าพารามิเตอร์ไปให้ 3
ตัวคือ
1. Label
2. Type
3. Priority
เช่น
ok=new Command(“ok",Command.OK,1);
cancel=new Command("cancel",Command.CANCEL,2);
Command Class (ต่อ)

จากนั้นจึงนาอ็อบเจกต์ Command ไปใส่อ็อบเจกต์ของคลาส Canvas
หรือคลาส Screen ด้วยเมธอด addCommand()
เช่น นา Command ok ไปใส่อ็อบเจกต์ TextBox ใช้คาสัง่
textbox.addCommand(ok);
ตัวอย่าง การเพิ่ม Command ใส่ TextBox
ผลการรันโปรแกรม
การตรวจสอบการทางานของ Command

เมื่อต้องการ ตรวจสอบว่าผูใ้ ช้งานมีการเลือก Command อะไร ให้เพิ่ม
คาสัง่ implements CommandListener ที่คลาส เช่น
public class Example extends MIDlet
implements CommandListener{
}

กาหนดเมธอด setCommandListen() ให้อ็อบเจกต์ของคลาส High
Level API ที่มี อ็อบเจกต์ Command อยู่ เช่น
textbox.setCommandListener(this);

และเพิ่มเมธอด commandAction() ที่มีการรับค่าพารามิเตอร์ 2 ตัวคือ
command และ displayable แล้วนาพารามิเตอร์ command ไปตรวจสอบ
การตรวจสอบการทางานของ Command (ต่อ)

ตัวอย่างการตรวจสอบการเลือก Command ที่เมธอด commandAction
public void commandAction(Command c, Displayable d) {
if(c==ok){
….
}else if(c==quit){
….
}
}
ตัวอย่าง การตรวจสอบการเลือก Command
ตัวอย่าง การตรวจสอบการเลือก Command (ต่อ)
ผลการรันโปรแกรม
ผลลัพธ์ที่หน้าต่าง Output
คลาส Alert


คลาส Alert ใช้สาหรับแสดงข้อความแจ้งผูใ้ ช้งาน เช่น เตือนเมื่อมีการ
ป้อนข้อมูลผิด
รูปแบบ
Alert(String title, String alertText, Image alertImage, AlertType alertType)
โดยที่
title
คือ ข้อความ title ของ Alert
alertText คือ ข้อความของ Alert ที่แสดงออกมา
alertImage
คือ รูปกราฟิ กที่จะแสดง หากไม่มีใช้คาว่า null
alertType คือ รูปแบบของ Alert มีดงั นี้
1. AlertType.ALARM
2. AlertType.CONFIRMATION
3. AlertType.ERROR
4. AlertType.INFO
5. AlertType.WARNING

เมื่อสร้างอ็อบเจกต์ Alert แล้วต้องการสัง่ ให้แสดงผลทางหน้าจอภาพ ให้
ส่งอ็อบเจกต์ Alert ให้ Display ผ่านเมธอด setCurrent()
เช่น
display.setCurrent(alert);

ปกติ Alert จะแสดงออกมาทางหน้าจอภาพ ประมาณ 1-2 วินาทีแล้วจะ
หายไป หากต้องการให้ Alert ปรากฏนาน ต้องกาหนดระยะเวลาด้วย
เมธอด setTimeout() ซึ่งมีหน่ วยเป็ นมิลลิวินาที เช่น
alert.setTimeout(5000);
ตัวอย่ าง แสดงข้ อความด้ วย Alert
ตัวอย่ าง แสดงข้ อความด้ วย Alert (ต่ อ)
ผลการรันโปรแกรม
แบบฝึ กหัด
1. ให้นักศึกษา สร้าง MIDlet ใหม่ต้งั ชื่อ HW_TextBox1 แล้ว
ดัดแปลงตัวอย่างในสไลด์ ดังนี้ เมื่อผูใ้ ช้งานป้อนข้อมูลลง TextBox แล้ว
กดปุ่ ม OK ให้แสดงข้อมูลที่ป้อนด้วยหน้าต่าง Alert
2. ให้นักศึกษา สร้าง MIDlet ใหม่ต้งั ชื่อ HW_TextBox2 แล้ว
ดัดแปลงตัวอย่างในสไลด์ ดังนี้ เมื่อผูใ้ ช้งานป้อนข้อมูลลง TextBox แล้ว
กดปุ่ ม OK ให้แสดงข้อมูลที่ป้อนที่ TextBox อีกตัวหนึ่ ง
เอกสารอ้างอิง

เก่ง J2ME ให้ครบสูตร โดย ทรงเกียรติ ภาวดี