การใช้ Option Dialog

หลังจากที่เรารู้จักกับ Alert Dialog ไปแล้ว ก็​มาถึง Dialog อีกประเภทหนึ่งที่ถูกเรียกใช้งานค่อนข้างบ่อย นั่นก็คือ Option Dialog นั่นเองครับ หน้าตาของ Option Dialog เป็นแบบนี้ครับ
Opton Dialog
วิธีการเรียกใช้ ก็​เรียกไม่ยากครับ คล้าย ๆ กับ Alert Dialog นั่นเองครับเราสามารถสร้าง  Option Dialog ได้ ด้วยคำสั่งแบบนี้ครับ
var optDlg = Titanium.UI.createOptionDialog({ options : ['One','Two','Three'] });
เมื่อสร้างเสร็จก็ เรียกให้ทำการแสดงด้วยคำส่ัง show ครับ optDlg.show();
ก็จะได้ ตามภาพ
 

ในส่วนของ Property ของ Option Dialog นั่น ผมขอยกมาเฉพาะที่น่าจะต้องใช้งานกันบ่อย ๆ ซึ่งได้แก่
  • options  ระบุ Option ที่จะแสดงใน Dialog ซึ่งจะอยู่ในรูปแบบ Array List
  • title ระบุ Title ของ  Dialog
  • cancel ระบุตำแหน่องของ ปุ่ม  Cancel
  • destructive ระบุตำแหน่งปุ่มที่ เป็นลักษณะของการ ทำให้ปุ่มนั้น ๆ เป็น สีแดง *** เฉพาะ iOS  เท่านั้น
จาก Property อาจจะยังไม่เห็นภาพ ถ้าอย่างนั้นเราไปสร้างกันเลยดีกว่าครับ
var optDlg = Titanium.UI.createOptionDialog({ options : ['One','Two','Three','Cancel'], title : 'Please Select ' , cancel : 3 , destructive : 2 });
หลังจากที่สั่ง open ก็จะพบกับ Dialog แบบนี้ครับ


ผลจากการที่รันออกมาจะสังเกตุได้ว่า หน้าตาของ Option Dialog นั้น จะมีหน้าตาไม่เหมือนกัน โดยเฉพาะ บน Android นั้น เราสามารถ เอา Cancel ออกได้ เนื่องจากการ Cancel  หรือ การปิด  Dialog นี้สามารถทำได้ โดยการที่ ผู้ใช้ กดที่ปุ่ม  Back  บนเครื่องเอง แต่หากต้องการให้ มี Dialog ลักษณะคล้ายกับ iOS ก็​สามารถทำได้ ด้วยการใช้ Alert Dialog แล้วทำการ สร้าง View ที่มีลักษณะเป็น Table แล้วนำเข้าไปใส่ใน Alert Dialog ด้วย Property androidview แบบนี้
var optDlg = Titanium.UI.createAlertDialog({ buttonNames : ['Cancel'], androidView :  view });
ก็จะสามารถแสดงผลโดยที่มีปุ่ม  Cancel บนหน้าจอเช่นเดียวกับ  iOS แล้ว หล่ะครับ

เป็นอย่างไรกันบ้างครับ กับ Option Dialog  มาถึงตรงนี้จะเริ่มเห็นได้ว่า การเขียน Application ในลักษณะ  Cross Platform นั้นจะมีข้อจำกัดอยู่บ้าง แต่ก็ไม่ได้ยากเกินกว่าที่เราจะทำให้มันเกิดขึ้นมาได้ อาจจะต้องมีการพลิกแพลง หรือ การปรับเปลี่ยนเล็ก ๆ น้อย ๆ เพื่อให้สามารถทำงานได้ทั้ง 2 Platform  แต่จะมีการแยกแยะอย่างไร ติดตามกันต่อได้ใน บทความต่อ ๆ ไปนะครับ สำหรับบทความนี้ก็จะขอจบลงตรงนี้ ก่อนนะครับ ยังไงก็ ติดตามกันต่อได้นะครับ แล้วก็​สามารถติชมได้นะครับ หากมีอะไรผิดพลาดประการใดก็​ขออภัยมา ณ​ ที่นี้ด้วยครับ

0 ความคิดเห็น:

โพสต์ความคิดเห็น