- - - - - - - - - - - - - - ผู้ให้การสนับสนุน- - - - - - - - - - - - - -

บทที่ 4 MIDP GUI Programming

บทที่ 4 MIDP GUI Programming

• แนะนำ MIDP user interface
• ติดตั้ง Nokia Series 60 MIDP SDK
  • ติดตั้ง Nokia Series 60 MIDP SDK กับ J2ME Wireless Toolkits
  • ติดตั้ง Nokia Series 60 MIDP SDK กับ Sun ONE Studio 4 update 1, Mobile Edition
• High-level class
• โครงสร้าง และการทำงานร่วมกับ Event ของ J2ME
  
  

แนะนำ MIDP user interface

รูปที่ 22 แสดง User Interface ของหน้าจอรุ่นต่างๆของ Nokia

• high-level API ,เป็นส่วนของ class ที่สืบทอดจาก class Screen ใช้สำหรับ การแสดงและเรียกใช้ class อื่นๆที่เป็น control ต่างๆ
• low-level API ,เป็นส่วนของ class ที่สืบทอดจาก class Canvas หรือ Graphic ใช้สำหรับสร้าง control ที่มีลักษณะที่ นักพัฒนา ต้องการ
  

รูปที่ 23 แสดง แผนผังโครงสร้าง Class ของ MIDP

คลาส Displayable เป็น class ที่สามารถแสดงออกที่หน้าจอ (Display) ได้ ซึ่งมีอยู่ 2 ชนิดคือ

• Canvas ,เป็น Low-level object ที่ทำให้โปรแกรมสามารถแสดง Graphic และ จัดการการทำงาน กับคำสั่งจากผู้ใช้
• Screen ,เป็น High-level object ทำหน้าที่ให้โปรแกรมสามารถแสดง control ต่างๆที่สืบทอด จาก class Screen ตัวอย่างเช่น class Alert, List, TextBox และ Form

ในเนื้อหาต่อไป เราก็จะมาทดลองเขียนโค้ด โดยนำเอา class ต่อละตัวมาทดลองใช้กัน แต่ก่อนอื่นก่อนใด เราก็จะทำการ ติดตั้งโปรแกรม Emulator สำหรับมือถือ ที่เราต้องการ ซึ่งในบทเรียนนี้ ผมจะเสนอ Nokia 7650 เป็นตัวอย่างหลักครับ

ติดตั้ง Nokia Series 60 MIDP SDK

ในการติดตั้งโปรแกรม Nokia Series 60 MIDP SDK คุณจำเป็นจะต้องสมัคร เป็นสมาชิกของ Nokia Forum แล้วค่อย Login เข้าสู่ระบบ แล้วเข้าไปที่ เมนู Tools and SDKs และทำการดาว์นโหลด Series 60 MIDP SDK 1.0 for Symbian OS, Nokia edition ดังรูป คุณจะได้ไฟล์ nS60_jme_sdk_v1_0.zip ,ให้คุณทำการคลี่ไฟล์ดังกล่าว แล้วทำการติดตั้ง

รูปที่ 24 แสดง link สำหรับการดาว์นโหลด Series 60
MIDP SDK 1.0 for Symbian OS, Nokia edition

สำหรับ Tools and SDKs ต่างๆที่อยู่ใน Nokia Forum นั้น มีอยู่มากมาย ที่ใช้ในการพัฒนา ซึ่งคุณอาจทดลอง ดาว์นโหลด มาใช้งานกันได้ แต่สำหรับขั้นตอนต่อไป ที่จะได้กล่าวถึงคือ การติดตั้งSeries 60 MIDP SDK ให้กับ J2ME Wireless Toolkits และ Sun ONE Studio 4 update 1, Mobile Edition ซึ่งในการติดตั้ง คุณจะเป็นจะต้องป้อน Username และ Password ของ Nokia Forum เพื่อจะขอ Serial Number จากทาง Nokia ผ่านทาง e-mail ที่เราได้ลงทะเบียนไว้ เมื่อเราได้รับ e-mail จากทาง Nokia แล้ว ก็ให้นำ Serial Number ที่ได้ มาใช้ในการติดตั้ง ในขั้นตอนต่อๆไป

รูปที่ 25 แสดงหน้าต่างป้อน Account ของ Forum Nokia

รูปที่ 26 แสดงหน้าต่างป้อน Serial Number

ติดตั้ง Nokia Series 60 MIDP SDK กับ J2ME Wireless Toolkits

เมื่อคุณได้ทำการติดตั้ง J2ME Wireless Toolkits ไว้เรียบร้อยแล้ว ดังที่เคยกล่าวถึงการติดตั้ง ไว้ในบทที่แล้ว
ขั้นตอนต่อมา จะเป็นการติดตั้ง Series 60 MIDP SDK 1.0 for Symbian OS, Nokia edition ต่อจากขั้นตอนที่ได้กล่าวไว้ข้างต้น

• ทำการกำหนด path ของการติดตั้ง ให้เป็น <WTK_home>\wtklib\devices เช่น C:\WTK2\wtklib\devices ดังรูป

รูปที่ 27 แสดงหน้าต่างป้อน path

• จากนั้นก็คลิก Next แล้วทำการทำตามขั้นตอนการติดตั้งอื่นๆต่อไป
• ทำการทดสอบ โดยเปิดโปรแกรม J2ME Wireless Toolkits, แล้วเลือก Open Project และเลือก โปรเจ็คที่ชื่อ Demo ,คุณจะเห็นได้ว่าได้มี Emulator เพิ่มขึ้นมา 1 รายการ ดังแสดงในรูปที่ 28 และเมื่อทดสอบ run จะมีผล ดังรูปที่ 29

รูปที่ 28 แสดงหน้าต่าง WTK ที่มีการเพิ่ม Emulator ใหม่เข้าไป

รูปที่ 29 แสดงหน้าต่าง Emulator ที่ run ตัวอย่างโปรเจ็ค

*** ข้อควรระวังอีกอย่างคือ ตัวอย่างโปรแกรมใน J2ME Wireless toolkits นั้น โดยมากจะกำหนดไว้ว่า รองรับกับ MIDP-2.0 ส่วน Series 60 SDK นี้ รองรับกับ MIDP-1.0 ทำให้ไม่สามารถ run บาง project ได้ คุณควรสังเกตุให้ดี

ติดตั้ง Nokia Series 60 MIDP SDK กับ Sun ONE Studio 4 update 1, Mobile Edition

เมื่อคุณได้ทำการติดตั้ง Sun ONE Studio 4 update 1, Mobile Edition ไว้เรียบร้อยแล้ว ดังที่เคยกล่าวถึงการติดตั้ง ไว้ในบทที่แล้ว
ขั้นตอนต่อมา จะเป็นการติดตั้ง Series 60 MIDP SDK 1.0 for Symbian OS, Nokia edition ต่อจากขั้นตอนที่ได้กล่าวไว้ข้างต้น

• ให้คุณทำการติดตั้ง Series 60 MIDP SDK ไปตามขั้นตอน จนสิ้นสุดการติดตั้ง
• ทำการเปิด โปรแกรม Sun ONE Studio 4 update 1, Mobile Edition ขึ้นมา แล้วให้ไปเลือกที่ แท็บ Runtime แล้วทำการคลิกขวาที่ Installed Emulators แล้วเลือก Add Emulator ดังรูปด้านล่าง

รูปที่ 30 แสดงหน้าขั้นตอนการ เพิ่ม Emulator

• ทำการ เลือก path ของ Emulator โดยในที่นี้จะเป็น C:\Nokia\Devices\Series_60_MIDP_SDK_for_Symbian_OS_v_1_0 (หากคุณติดตั้ง ตามค่า default ที่โปรแกรมให้มา) หลังจากนั้นจะปรากฏรายชื่อใหม่ของ Emulator ใน list รายการ, ให้คุณทำการคลิกเมาส์ขวา ที่ Emulator ใหม่ แล้วเลือก Set As Default ดังรูป

รูปที่ 31 แสดงหน้าขั้นตอนการ กำหนด default Emulator

• จากนั้นก็ให้ทดสอบการติดตั้ง โดยให้เลือกที่แท็บ Filesystems แล้วเลือก MIDletsuit ที่ต้องการ run, คลิกเมาส์ขวา แล้วเลือก Execute ดังรูป

รูปที่ 32 แสดงหน้าขั้นตอนการ Execute MIDletSuit

• ผลการ Execute จะได้ผลดังรูป

รูปที่ 33 แสดงหน้าต่าง Emulator ที่ run MIDletSuit

สำหรับการติดตั้ง Emulator ตัวอื่นๆ ก็เป็นในลักษณะเดียวกันนี้ ซึ่งคุณก็สามารถหา ดาว์นโหลดได้จาก Nokia Forum

แนะนำ: หากคุณต้องการพัฒนาโปรแกรม ให้สามารถรองรับ กับมือถือ Nokia หลายๆรุ่นๆ ผมขอแนะนำให้คุณใช้ Nokia Developer's Suite for the Java(TM) 2 Platform, Micro Edition, Version 2.0 for Windows ซึ่งเป็นเครื่องมือที่มีความสามารถต่างๆ ในการช่วยพัฒนาโปรแกรม

High-level class

เป็นส่วนของ class ที่สืบทอดจาก class Screen ใช้สำหรับ การแสดงและเรียกใช้ class อื่นๆ โดยมีรายละเอียด ดังนี้

• Screen ,เป็น superclass (คลาสแม่) ของคลาสที่เป็น High-level class ทั้งหมด, Screen สามารถแสดง class ต่างๆได้ ซึ่งได้แก่ List, TextBox, Alert และ Form
• Item subclasses, class ย่อยต่างๆ ที่สามารถบรรจุ อยู่บน Form ได้ ซึ่งได้แก่
  • StringItem ใช้แสดงข้อความ
  • ImageItem ใช้แสดงรูปภาพ
    • Constructor : ImageItem(String label, Image img, int layout, String altText)
  • TextField ใช้รับข้อความ
  • DateField ใช้แสดงวันเวลา
    • Constructor : DateField(String label, int mode)
    • Constructor : DateField(String label, int mode, TimeZone timeZone)
  • Gauge ใช้แสดงค่าเป็นกราฟฟิก
    • Constructor : Gauge(String label, boolean interactive, int maxValue, int initialValue)
  • ChoiceGroup ใช้แสดงข้อมูลให้เลือก
    • Constructor : ChoiceGroup(String label, int choiceType)
    • Constructor : ChoiceGroup(String label, int choiceType, String[] stringElements, Image[] imageElements)
    • ChoiceType: IMPLICIT, EXCLUSIVE, MULTIPLE
• Command ,เป็นเมนูคำสั่งที่ คุณสามารถนำไปใส่ไว้ใน class ที่เป็น Displayable โดยอาศัย method ที่ชื่อ addCommand, Command จะเป็น control ที่มีไว้ให้ผู้ใช้เลือก เช่น ผู้ใช้เลือกเมนู Exit เพื่อออกจากโปรแกรม

Constructor : new Command(String label, int CommandType, int Priority)

label : ข้อความที่แสดงบน Command
CommandType : บอกถึงชนิดของเมนู ซึ่งได้แก่ BACK, CANCEL, EXIT, HELP, ITEM, SCREEN, OK, STOP
Priority : ลำดับความสำคัญของ เมนู

• CommandListener ,จะทำงานร่วมกับ Command ซึ่งรอ Event (เหตุการณ์) ของ Command เมื่อมีการเลือก Command นั้นๆ โดยในการใช้งานจะอาศัย method setCommandListener เพื่อกำหนดว่า จะดัก รอ Event จาก class อะไร และมีข้อกำหนดว่า class นั้น จะต้องเรียก implements CommandListener พร้อมทั้งมี method CommandAction อยู่ใน class นั้น

public void CommandAction(Command c, Displayable d)

• TextBox ,เป็นช่องกรอก, แก้ไข ข้อความ

Constructor : TextBox(String title, String text, int maxSize,int constrains)

title : หัวข้อของช่องกรอกข้อความ
text : ข้อความที่แสดง
maxSize : จำนวนข้อความสูงสุด
constraint : ลักษณะของข้อความ ซึ่งได้แก่ ANY, NUMBER, PASSWORD, PHONENUMBER, URL, EMAILADDR

• Alert ,เป็นหน้าต่างแสดงข้อความ ใช้สำหรับรายงานการทำงาน ของโปรแกรม ให้ผู้ใช้ทราบ

  Constructor :

  • Alert(String title)
  • Alert(String title, String alertText, Image alertImage, AlertType alertType)

   

  AlertType: มีหลายชนิด ได้แก่ ALARM, CONFIRMATION, ERROR, INFO, WARNING
  สามารถทำให้แสดงเสียงได้โดยใช้ AlertType.playSound, กำหนดให้แสดงข้อความ ไม่จำกัดเวลา ได้โดยใช้ setTimeout(Alert.FOREVER)

• Ticker, เป็นอักษรวิ่ง เพื่อบอกข้อมูลแก่ผู้ใช้

  Constructor :

• Ticker(String title)

โครงสร้าง และการทำงานร่วมกับ Event ของ J2ME

สำหรับลักษณะการเขียนโค้ดของ J2ME จะอยู่ในลักษณะ ของการเขียน class สืบทอด ซึ่งจะมีโครงสร้าง ดังนี้

  
        import javax.microedition.midlet.*;
         
        public class HelloWorld extends MIDlet implements CommandListener, ItemStateListener  {
       
        public HelloWorld() {       
        }        
        
        public void startApp() {	  	
        }        
        
        public void pauseApp() {
        }
                
        public void destroyApp(boolean unconditional) {
        }
                
        public void commandAction(Command c, Displayable s) {        
        }


        public void itemStateChanged(Item item) {
        }
        
        }

แต่ละส่วนมีรายละเอียดดังนี้

• import ใช้สำหรับเรียกใช้งาน API ต่างๆที่เกี่ยวข้อง
• public class HelloWorld extends MIDlet implements CommandListener, ItemStateListener ,เป็นการประกาศชื่อคลาส ที่ชื่อ HelloWorld โดยสืบทอดจาก MIDlet และมีการ Implements 2 ส่วน คือส่วนของ
  • CommandListener ใช้สำหรับ การทำงานร่วมกับ Event ของ control ทั่วไป
  • ItemStateListener ใช้สำหรับ การทำงานร่วมกับ Event ของ control ที่เป็น items
• public HelloWorld() จะมีการเรียกใช้เมื่อ มีการเรียกใช้โปรแกรม
• public void startApp() จะมีการเรียกใช้เมื่อ มีการเริ่มต้นของโปรแกรม
• public void pauseApp() จะมีการเรียกใช้เมื่อ มีการเรียกสั่งหยุดโปรแกรม
• public void destroyApp(boolean unconditional) จะมีการเรียกใช้เมื่อ มีการทำลาย(ออกจาก)โปรแกรม
• public void commandAction(Command c, Displayable s) จะมีการเรียกใช้เมื่อ มีการกระทำใดๆ กับ control ทั่วไป โดยจะต้องมีการเรียกใช้ setCommandListener เพื่อบอกกับระบบไว้ก่อน
• public void itemStateChanged(Item item) จะมีการเรียกใช้เมื่อ มีการกระทำใดๆ กับ control ที่เป็น items โดยจะต้องมีการเรียกใช้ setItemStateListener เพื่อบอกกับระบบไว้ก่อน

ให้คุณ ทดสอบโค้ดต่างๆ ในภาคปฏิบัติ และสังเกตุโครงสร้าง คำสั่งการทำงานต่างๆ เพื่อเพิ่มความเข้าใจ

ในบทนี้ เราได้ให้ความรู้เกี่ยวกับ ลักษณะการทำงานของ MIDlet และการใช้งาน MIDlet Tool ในการพัฒนา MIDlet สำหรับในเนื้อหาต่อไป เราจะได้เริ่มกล่าวถึง ลักษณะ ของ GUI (Graphic User Interface) ของ MIDP