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);

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

คลาส 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เป็นกล่องรับข้อความ ใช้สำหรับข้อมูลที่ผู้ใช้งานป้อนทางปุ่มมือถือ • TextBoxใน MIDletเป็นช่องรับข้อความขนาดใหญ่จำนวน 1 ช่อง (ปกติจะมีขนาดเท่ากับหน้าจอมือถือ) • รูปแบบของ 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 มีดังนี้ • 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ให้ครบสูตร โดย ทรงเกียรติ ภาวดี

GUI ของ MIDP