งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

GUI ของ MIDP อ. วิวัฒน์ ชินนาทศิ ริกุล. GUI คืออะไร GUI (Graphic user interface) คือส่วนที่ใช้ติดต่อกับ ผู้ใช้งาน เช่น การแสดงผล การรับข้อมูล การ ตรวจสอบเหตุการณ์ต่างๆ.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "GUI ของ MIDP อ. วิวัฒน์ ชินนาทศิ ริกุล. GUI คืออะไร GUI (Graphic user interface) คือส่วนที่ใช้ติดต่อกับ ผู้ใช้งาน เช่น การแสดงผล การรับข้อมูล การ ตรวจสอบเหตุการณ์ต่างๆ."— ใบสำเนางานนำเสนอ:

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

2 GUI คืออะไร 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 StringItemImageItemTextFieldDateFieldGaugeChoiceGroup

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 จะปรากฏที่บริเวณด้านล่างของจอภาพ รูปแบบคำสั่งในการสร้าง Command Command(String label,int commandType, int priority) โดยที่ label คือ ข้อความ CommandType คือ รูปแบบของ Command priority คือ ลำดับความสำคัญของ Command

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

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

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

18 จากนั้นจึงนำอ็อบเจกต์ 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 ที่เมธอด commandAction public void commandAction(Command c, Displayable d) { if(c==ok){ …. }else if(c==quit){ …. } } การตรวจสอบการทำงานของ Command ( ต่อ )

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 แล้ว ดัดแปลงตัวอย่างในสไลด์ ดังนี้เมื่อผู้ใช้งานป้อน ข้อมูลลง TextBox แล้ว กดปุ่ม OK ให้แสดงข้อมูลที่ป้อนด้วยหน้าต่าง Alert 2. ให้นักศึกษา สร้าง MIDlet ใหม่ตั้งชื่อ HW_TextBox2 แล้ว ดัดแปลงตัวอย่างในสไลด์ ดังนี้เมื่อผู้ใช้งานป้อน ข้อมูลลง TextBox แล้ว กดปุ่ม OK ให้แสดงข้อมูลที่ป้อนที่ TextBox อีกตัว หนึ่ง

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


ดาวน์โหลด ppt GUI ของ MIDP อ. วิวัฒน์ ชินนาทศิ ริกุล. GUI คืออะไร GUI (Graphic user interface) คือส่วนที่ใช้ติดต่อกับ ผู้ใช้งาน เช่น การแสดงผล การรับข้อมูล การ ตรวจสอบเหตุการณ์ต่างๆ.

งานนำเสนอที่คล้ายกัน


Ads by Google