gui midp n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
GUI ของ MIDP PowerPoint Presentation
Download Presentation
GUI ของ MIDP

Loading in 2 Seconds...

play fullscreen
1 / 33

GUI ของ MIDP - PowerPoint PPT Presentation


  • 128 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'GUI ของ MIDP' - elysia


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
gui midp

GUI ของ MIDP

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

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

1. High Level API

2. Low Level API

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

ข้อดีของการใช้ High Level API

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

Display display;

display=Display.getDisplay(this);

displayable class

High-Level API

Displayable

Low-Level API

Canvas

Screen

Alert

Textbox

List

Form

Item

StringItem

ImageItem

TextField

DateField

Gauge

ChoiceGroup

Displayable Class
screen
คลาส Screen
  • Screenเป็นคลาสสำหรับ GUIแบบ High Level API ซึ่งมีคลาสย่อยอีก 4คลาส คือ

1. Alert

2. Textbox

3. List

4. Form

slide9
จะแสดงผลข้อมูลที่หน้าจอต้องทำอย่างไรจะแสดงผลข้อมูลที่หน้าจอต้องทำอย่างไร

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

TextBox(String title,String text,int Maxsize,int Constraints)

slide11
Constraints เป็นรูปแบบการรับข้อมูลของ TextBoxมีดังนี้

TextField.ANY

TextField.EMAILADDR

TextField.NUMERIC

TextField.PASSWORD

TextField.PHONENUMBER

TextField.URL

textbox1
ตัวอย่าง การสร้าง TextBoxรับข้อมูล
command
คลาส Command
  • Command เป็นคลาสสำหรับสร้างเมนู เช่น บันทึกข้อมูล ลบข้อมูล เมนูที่สร้างขึ้นจากคลาส Commandจะปรากฏที่บริเวณด้านล่างของจอภาพ
  • รูปแบบคำสั่งในการสร้าง Command

Command(String label,int commandType, int priority)

โดยที่ labelคือ ข้อความ

CommandTypeคือ รูปแบบของ Command

priorityคือ ลำดับความสำคัญของ Command

slide15

CommandType เป็นตัวกำหนดรูปแบบของ Command มีดังนี้

  • Command.OK
  • Command.CANCEL
  • Command.STOP
  • Command.EXIT
  • Command.BACK
  • Command.HELP
  • Command.ITEM
  • Command.SCREEN
slide16
รูปแบบที่ได้ของ Command จะขึ้นอยู่กับอุปกรณ์ที่รัน MIDlet เมื่อ MIDletทำงาน อุปกรณ์บางตัวจะนำ Commandไปผูกกับปุ่ม Soft keyด้านซ้าย แต่อุปกรณ์บางตัวจะนำ Commandไปผูกกับปุ่ม Soft keyด้านขวา
  • กรณีที่มี Commandมากกว่า 2ตัว ค่า Priority ที่กำหนดจะมีผล โดยอุปกรณ์จะนำ Command ที่มีค่าความสำคัญมากที่สุดไปผูกกับ Soft keyส่วน Commandที่เหลือจะถูกรวมอยู่ในเมนู
command class
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 class1
Command Class (ต่อ)
  • จากนั้นจึงนำอ็อบเจกต์ Command ไปใส่อ็อบเจกต์ของคลาส Canvasหรือคลาส Screen ด้วยเมธอด addCommand()

เช่นนำ Command ok ไปใส่อ็อบเจกต์ TextBox ใช้คำสั่ง

textbox.addCommand(ok);

command1
การตรวจสอบการทำงานของ Command
  • เมื่อต้องการ ตรวจสอบว่าผู้ใช้งานมีการเลือก Commandอะไร ให้เพิ่มคำสั่ง implements CommandListenerที่คลาส เช่น

public class Example extends MIDlet

implements CommandListener{

}

  • กำหนดเมธอด setCommandListen()ให้อ็อบเจกต์ของคลาส High Level APIที่มี อ็อบเจกต์ Commandอยู่ เช่น

textbox.setCommandListener(this);

  • และเพิ่มเมธอด commandAction()ที่มีการรับค่าพารามิเตอร์ 2ตัวคือ commandและ displayableแล้วนำพารามิเตอร์command ไปตรวจสอบ
command2
การตรวจสอบการทำงานของ Command (ต่อ)
  • ตัวอย่างการตรวจสอบการเลือก Commandที่เมธอด commandAction

public void commandAction(Command c, Displayable d) {

if(c==ok){

….

}else if(c==quit){

….

}

}

command3
ตัวอย่าง การตรวจสอบการเลือก Command
command4
ตัวอย่าง การตรวจสอบการเลือก Command (ต่อ)
slide25
ผลการรันโปรแกรม

ผลลัพธ์ที่หน้าต่าง Output

alert
คลาส Alert
  • คลาส Alertใช้สำหรับแสดงข้อความแจ้งผู้ใช้งาน เช่น เตือนเมื่อมีการป้อนข้อมูลผิด
  • รูปแบบ

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

โดยที่

titleคือ ข้อความtitleของ Alert

alertTextคือ ข้อความของ Alertที่แสดงออกมา

slide27
alertImageคือ รูปกราฟิกที่จะแสดง หากไม่มีใช้คำว่า null

alertTypeคือ รูปแบบของ Alertมีดังนี้

1. AlertType.ALARM

2. AlertType.CONFIRMATION

3. AlertType.ERROR

4. AlertType.INFO

5. AlertType.WARNING

slide28
เมื่อสร้างอ็อบเจกต์ Alertแล้วต้องการสั่งให้แสดงผลทางหน้าจอภาพ ให้ส่งอ็อบเจกต์Alertให้ Displayผ่านเมธอด setCurrent()

เช่น

display.setCurrent(alert);

  • ปกติ Alert จะแสดงออกมาทางหน้าจอภาพ ประมาณ 1-2วินาทีแล้วจะหายไป หากต้องการให้ Alert ปรากฏนาน ต้องกำหนดระยะเวลาด้วย เมธอด setTimeout()ซึ่งมีหน่วยเป็นมิลลิวินาที เช่น

alert.setTimeout(5000);

alert1
ตัวอย่าง แสดงข้อความด้วย Alert
alert2
ตัวอย่าง แสดงข้อความด้วย Alert (ต่อ)
slide32
แบบฝึกหัด

1. ให้นักศึกษา สร้าง MIDlet ใหม่ตั้งชื่อ HW_TextBox1แล้ว

ดัดแปลงตัวอย่างในสไลด์ ดังนี้เมื่อผู้ใช้งานป้อนข้อมูลลง TextBoxแล้ว

กดปุ่ม OK ให้แสดงข้อมูลที่ป้อนด้วยหน้าต่าง Alert

2. ให้นักศึกษา สร้าง MIDlet ใหม่ตั้งชื่อ HW_TextBox2แล้ว

ดัดแปลงตัวอย่างในสไลด์ ดังนี้เมื่อผู้ใช้งานป้อนข้อมูลลง TextBoxแล้ว

กดปุ่ม OK ให้แสดงข้อมูลที่ป้อนที่ TextBoxอีกตัวหนึ่ง

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