อ.วิวัฒน์ ชินนาทศิริกุล

งานนำเสนอเรื่อง: "อ.วิวัฒน์ ชินนาทศิริกุล"— ใบสำเนางานนำเสนอ:

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

2 GUI คืออะไร 1. High Level API 2. Low Level API
GUI (Graphic user interface) คือส่วนที่ใช้ติดต่อกับผู้ใช้งาน เช่น การแสดงผล การรับข้อมูล การตรวจสอบเหตุการณ์ต่างๆ GUI มี 2 ประเภท 1. High Level API 2. Low Level API

3 High Level API เป็นอินเทอร์เฟซ สำหรับการรับและแสดงผลข้อมูล เช่น กล่องข้อความ (textbox) รายการ (List) High Level API มีลักษณะคล้าย Control ของ Visual Basic ซึ่งสามารถเลือกมาสร้างเป็นอ็อบเจกต์ใช้งานใน MIDlet ได้ทันที คลาสของ High Level API เป็นคลาสที่สืบทอดมากคลาส Screen

4 ข้อเสียของการใช้ High Level API
ผู้พัฒนาโปรแกรมไม่สามารถควบคุม หรือเปลี่ยนแปลงลักษณะบางอย่างของอ็อบเจกต์ได้ เช่น ขนาด ตำแหน่ง สี รูปแบบตัวอักษร ข้อดีของการใช้ High Level API ผู้พัฒนาโปรแกรมไม่ต้องกังวลเรื่องการแสดงผลในอุปกรณ์ที่แตกต่างกัน เพราะ High Level API มีตัวจัดการเรื่องการแสดงผล ทำให้ผู้พัฒนาสร้างและใช้อินเตอร์เฟซ อย่างอิสระโดยไม่ขึ้นกับฮาร์ดแวร์ หรืออุปกรณ์ที่จะรัน MIDlet

5 Low Level API ออกแบบมาสำหรับ MIDlet ที่ต้องการแสดง หรือจัดการเกี่ยวกับกราฟิกโดยตรง เช่น แสดงข้อความ วาดเส้นตรง วงกลม หรือการตรวจสอบเหตุการณ์ต่างๆในระดับต่ำ เช่น สถานะการกดปุ่ม คลาสของ Low Level API สืบทอดมาจากคลาส Canvas ในการใช้ Low Level API หากนำ MIDlet ไปรันในอุปกรณ์ที่แตกต่างกัน อาจทำให้ได้ผลการทำงานที่แตกต่างกัน เช่น ถ้าออกแบบหน้าจอไว้ที่ขนาด 100x90 พิกเซล แล้วนำ MIDlet ไปรันในอุปกรณ์ที่มีขนาดเล็กกว่า ก็จะทำให้เกิดปัญหาในการแสดงผล

6 อ็อบเจกต์ Display ในการทำงานของ MIDlet ไม่ว่าจะใช้ High Level API หรือ Low Level API ก่อนที่อ็อบเจกต์ต่างๆ จะแสดงออกมาให้เห็นทางจอภาพได้ ตัว MIDlet จะต้องติดต่อกับจอภาพของอุปกรณ์ผ่านตัวจัดการจอภาพ ซึ่งใน MIDlet คืออ็อบเจกต์ที่ชื่อ Display ตัวอย่างโค้ด Display display; … display=Display.getDisplay(this);

7 Displayable Class Displayable Canvas Screen Alert Form List Textbox
Low-Level API High-Level API Item StringItem ImageItem TextField DateField Gauge ChoiceGroup

8 คลาส Screen Screen เป็นคลาสสำหรับ GUI แบบ High Level API ซึ่งมีคลาสย่อยอีก 4 คลาส คือ 1. Alert 2. Textbox 3. List 4. Form

9 จะแสดงผลข้อมูลที่หน้าจอต้องทำอย่างไร
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

10 คลาส TextBox รูปแบบของ TextBox
TextBox ใน MIDlet เป็นช่องรับข้อความขนาดใหญ่จำนวน 1 ช่อง (ปกติจะมีขนาดเท่ากับหน้าจอมือถือ) รูปแบบของ TextBox TextBox(String title,String text,int Maxsize,int Constraints)

11 Constraints เป็นรูปแบบการรับข้อมูลของ TextBox มีดังนี้
TextField.ANY TextField. ADDR TextField.NUMERIC TextField.PASSWORD TextField.PHONENUMBER TextField.URL

12 ตัวอย่าง การสร้าง TextBox รับข้อมูล

13 ผลการรันโปรแกรม

14 คลาส Command รูปแบบคำสั่งในการสร้าง Command
Command(String label,int commandType, int priority) โดยที่ label คือ ข้อความ CommandType คือ รูปแบบของ Command priority คือ ลำดับความสำคัญของ Command

15 CommandType เป็นตัวกำหนดรูปแบบของ Command มีดังนี้
Command.OK Command.CANCEL Command.STOP Command.EXIT Command.BACK Command.HELP Command.ITEM Command.SCREEN

16 รูปแบบที่ได้ของ Command จะขึ้นอยู่กับอุปกรณ์ที่รัน MIDlet เมื่อ MIDlet ทำงาน อุปกรณ์บางตัวจะนำ Command ไปผูกกับปุ่ม Soft key ด้านซ้าย แต่อุปกรณ์บางตัวจะนำ Command ไปผูกกับปุ่ม Soft key ด้านขวา กรณีที่มี Command มากกว่า 2 ตัว ค่า Priority ที่กำหนดจะมีผล โดยอุปกรณ์จะนำ Command ที่มีค่าความสำคัญมากที่สุดไปผูกกับ Soft key ส่วน Command ที่เหลือจะถูกรวมอยู่ในเมนู

17 Command Class (ต่อ) การสร้างอ็อบเจกต์ของคลาส Command จะต้องส่งค่าพารามิเตอร์ไปให้ 3 ตัวคือ 1. Label 2. Type 3. Priority เช่น ok=new Command(“ok",Command.OK,1); cancel=new Command("cancel",Command.CANCEL,2);

18 Command Class (ต่อ) จากนั้นจึงนำอ็อบเจกต์ Command ไปใส่อ็อบเจกต์ของคลาส Canvas หรือคลาส Screen ด้วยเมธอด addCommand() เช่น นำ Command ok ไปใส่อ็อบเจกต์ TextBox ใช้คำสั่ง textbox.addCommand(ok);

19 ตัวอย่าง การเพิ่ม Command ใส่ TextBox

20 ผลการรันโปรแกรม

21 การตรวจสอบการทำงานของ Command
เมื่อต้องการ ตรวจสอบว่าผู้ใช้งานมีการเลือก Command อะไร ให้เพิ่มคำสั่ง implements CommandListener ที่คลาส เช่น public class Example extends MIDlet implements CommandListener{ } กำหนดเมธอด setCommandListen() ให้อ็อบเจกต์ของคลาส High Level API ที่มี อ็อบเจกต์ Command อยู่ เช่น textbox.setCommandListener(this); และเพิ่มเมธอด commandAction() ที่มีการรับค่าพารามิเตอร์ 2 ตัวคือ command และ displayable แล้วนำพารามิเตอร์ command ไปตรวจสอบ

22 การตรวจสอบการทำงานของ Command (ต่อ)
ตัวอย่างการตรวจสอบการเลือก Command ที่เมธอด commandAction public void commandAction(Command c, Displayable d) { if(c==ok){ …. }else if(c==quit){ }

23 ตัวอย่าง การตรวจสอบการเลือก Command

24 ตัวอย่าง การตรวจสอบการเลือก Command (ต่อ)

25 ผลการรันโปรแกรม ผลลัพธ์ที่หน้าต่าง Output

26 คลาส Alert คลาส Alert ใช้สำหรับแสดงข้อความแจ้งผู้ใช้งาน เช่น เตือนเมื่อมีการป้อนข้อมูลผิด รูปแบบ Alert(String title, String alertText, Image alertImage, AlertType alertType) โดยที่ title คือ ข้อความ title ของ Alert alertText คือ ข้อความของ Alert ที่แสดงออกมา

27 alertImage คือ รูปกราฟิกที่จะแสดง หากไม่มีใช้คำว่า null
alertType คือ รูปแบบของ Alert มีดังนี้ 1. AlertType.ALARM 2. AlertType.CONFIRMATION 3. AlertType.ERROR 4. AlertType.INFO 5. AlertType.WARNING

28 เมื่อสร้างอ็อบเจกต์ Alert แล้วต้องการสั่งให้แสดงผลทางหน้าจอภาพ ให้ส่งอ็อบเจกต์ Alert ให้ Display ผ่านเมธอด setCurrent() เช่น display.setCurrent(alert); ปกติ Alert จะแสดงออกมาทางหน้าจอภาพ ประมาณ 1-2 วินาทีแล้วจะหายไป หากต้องการให้ Alert ปรากฏนาน ต้องกำหนดระยะเวลาด้วย เมธอด setTimeout() ซึ่งมีหน่วยเป็นมิลลิวินาที เช่น alert.setTimeout(5000);

29 ตัวอย่าง แสดงข้อความด้วย Alert

30 ตัวอย่าง แสดงข้อความด้วย Alert (ต่อ)

31 ผลการรันโปรแกรม

32 แบบฝึกหัด 1. ให้นักศึกษา สร้าง MIDlet ใหม่ตั้งชื่อ HW_TextBox1 แล้ว
กดปุ่ม OK ให้แสดงข้อมูลที่ป้อนด้วยหน้าต่าง Alert 2. ให้นักศึกษา สร้าง MIDlet ใหม่ตั้งชื่อ HW_TextBox2 แล้ว กดปุ่ม OK ให้แสดงข้อมูลที่ป้อนที่ TextBox อีกตัวหนึ่ง

33 เอกสารอ้างอิง เก่ง J2ME ให้ครบสูตร โดย ทรงเกียรติ ภาวดี