จากฉบับที่แล้วผมได้พูดถึงความเป็นมาและการทำงานอย่างคร่าวๆของการพัฒนาโปรแกรมบนเครื่อง Pocket PC พร้อมทั้งการใช้ Visual Studio.NET 2003 ในการพัฒนาโปรแกรมเบื้องต้นไปแล้ว มาตอนที่ 2 นี้ ผมจะขอพูดถึงการออกแบบ User Interface หรือส่วนติดต่อกับผู้ใช้นั่นเอง
ในการพัฒนาโปรแกรมด้วย .NET Compact Framework(ต่อไปนี้ขอเรียกว่า .NET CF) นั้น เราสามารถทำการสร้าง User Interface ได้เหมือนกับบน .NET Framework ทุกอย่างแต่อย่างที่ได้กล่าวไปแล้วในฉบับที่แล้วว่า .NET CF นั้น เป็นเพียง subset ของ .NET Framework เท่านั้น จึงทำให้มีบาง Control ที่ .NET CF มาสามารถใช้งานได้ เราจะลองมาดูกันว่า Control และ Function เกี่ยวกับ Form อะไรบ้างที่ .NET CF (version 1.0) ไม่สามารถใช้งานได้บ้างดูตามตารางที่ 1 ครับ
หมายเหตุ : เกี่ยวกับ Control , Form เป็นพื้นฐานในการเขียนโปรแกรมบน .NET framework เป็นเรื่องที่มีรายละเอียดมาก ผู้เขียนไม่ขออธิบายถึงรายละเอียดในบทความนี้ผู้อ่านสามารถหาอ่านได้จากหนังสือเกี่ยวกับ .NET ทั่วไปครับ
Control ที่ .NET CF ไม่ Support
Function ที่ System.Windows.Forms ไม่ support
CheckedListBox
ToolTipAcceptButton
ColorDialog
CancelButton
ErrorProvider
AutoScroll
FontDialog
Anchor
GroupBox
Multiple Document Interface (MDI)
HelpProvider
KeyPreview
LinkLabel
TabIndex
NotificationBubble
Drag and drop
NotifyIcon
TabStop
All Print controls
All printing capabilities
RichTextBox
Hosting ActiveX controls
Splitter
ตารางที่ 1 Control และ Function ที่ .NET CF ไม่สนับสนุนการทำงาน
จะเห็นได้ว่า Function ส่วนใหญ่ที่ .NET CF ไม่ Support นั่นจะเป็น Function ที่ใช้จัดการกับ Control ที่ไม่ Support ด้วยเช่นกันเหตุที่ .NET CF จำเป็นต้องจำกัดการทำงานคงเป็นเพราข้อจำกัดต่างๆของเครื่อง Pocket PC แต่อย่าลืมว่า .NET CF เพิ่งจะพัฒนาเป็น version 1.0 SP3 เท่านั้นทำให้ยังขาดความสมบูรณ์ในด้านต่างๆอีกมากเช่น class ที่สำคัญต่างๆ หรืออื่นๆ ผู้เขียนคาดว่าหลังจากที่ Version ที่ 2 ได้ออกเป็น Version Release แล้วจะทำให้ .NET CF มีความสมบูรณ์ในการพัฒนาโปรแกรมมากขึ้นกว่านี้
หน้าต่าง Form Designer
เมื่อเราต้องการทำการสร้าง User Interface เราสามารถใช้หน้าต่าง Form Designer ซึ่งจะเป็นการทำงานแบบ Visual คือเราไม่จำเป็นต้องเขียน code เพื่อเพิ่ม Control ต่างๆลงไปใน Form เพียงแค่เราทำการลากแล้ววาง Control ต่างๆ จาก toolbox ได้เลยโปรแกรมจะทำการ Generate ในการเพิ่ม Control ต่างๆให้เราเองโดยอัตโนมัติ
หลังจากเราทำการเพิ่ม Control ต่างๆให้กับโปรแกรมของเราเรียบร้อยแล้วเราสามารถกำหนดคุณสมบัติต่างๆ(properties) ของ Control ที่คุณสร้างขึ้นได้โดยคลิกที่ Properties Windows จากนั้นเราก็สามารถจัดการ Event ต่างๆที่จะเกิดขึ้นกับโปรแกรมของเราได้จากตรงนี้เช่นกันซึ่งจะพูดถึงรายละเอียดต่อไป
จากตอนที่แล้วเราได้สร้าง Project เป็นแบบ Smart Device Extension โดยเลือกประเภทเป็น Windows Application จะเห็นได้ว่าโปรแกรมจะเปิด Project เราในหน้า Designer view ดังรูปที่ 1
รูปที่ 1 ส่วนต่างๆของ Visual Studio.NET (1.tiff)
โดยในหน้าจอนี้จะแบ่งออกเป็น 2 ส่วนคือ ส่วนแรกจะอยู่ด้านบนจะแสดง Form และ control ต่างๆตามที่เราจะได้เห็นจริงในหน้าจอโปรแกรมหลังจากที่รันแล้ว(WYSIWYG) ส่วนที่ 2 จะเป็นพื้นที่เล็กๆด้านล่างสำหรับแสดง Control ต่างๆที่ไม่มีการแสดงผลออกมา เช่น MainMenu ,Timer, Context Menu และอื่นๆ
หน้าต่าง Toolbox
เป็นส่วนที่รวม Control ทั้งหมดที่ .NET CF มีและเราสามารถใช้ได้โดยวิธีการใช้งานเพียงแค่ลาก Control ที่เราต้องการเพิ่มมาวางไว้ใน หน้าต่าง Form Desiner เท่านั้น
หน้าต่าง Properties
ส่วนนี้เป็นหน้าต่างที่ใช้ในการจัดการค่าต่างๆของ Control ที่เราได้ทำการเลือกอยู่ในหน้าต่าง Form Designer ในขณะนั้น หรือเรายังสามารถเลือก control ที่เราได้เพิ่มใน Form ของเราทั้งหมดได้จาก Dropdown Listbox อีกครับ
จัดการกับ Events
อีกส่วนหนึ่งที่มีความสำคัญในการเขียนโปรแกรม นั่นก็คือส่วนของ Event Handler ที่จะทำการสร้าง method สำหรับจัดการกับเหตุการณ์ที่เกิดขึ้นกับ Control ประเภทต่างๆซึ่งเป็นหัวใจหลักของการทำงานของโปรแกรมเลยทีเดียว เช่น การกำหนดเหตุการณ์ที่จะให้โปรแกรมทำหลังจากคลิกที่ปุ่ม และอื่นๆเป็นต้น โดยการจัดการกับ Events ให้เราเลือก Control ที่เราต้องการแล้วคลิกที่ไอคอน รูปสายฟ้าที่หน้าต่าง Properties โปรแกรมจะแสดงรายชื่อ Events ต่างๆที่ Control นั้นสามารถทำงานได้ โดยเราสามารถเลือก method ที่จะให้ Events นั้นทำงานจาก Dropdown Listbox ได้เลยหรือทำการ Double click เพื่อสร้าง method ใหม่มารองรับกับเหตุการณ์ที่เกิดขึ้นโดยหากเราสร้าง method ใหม่ขึ้นมารองรับ Visual Studio จะทำการสร้าง code ที่จำเป็นในการผูก Control ที่เราสร้างขึ้นกับ method ที่จะสร้างมารองรับให้เองโดยที่เราไม่ต้อง Coding เองเลย
ถ้าเราลองดูโปรแกรมในรูปแบบ coding เราจะพบว่าโปรแกรมได้ทำการสร้าง code ที่จำเป็นเอาไว้ใน method ชื่อ InitializeComponent จะอยู่ใน label ชื่อว่า"Windows Form Designer generated code” โดยมี
ตัวอย่างดังตารางที่ 2
#region Windows Form Designer generated code
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.mainMenu1 = new System.Windows.Forms.MainMenu();
this.label1 = new System.Windows.Forms.Label();
// label1
//สร้าง Control ชื่อ Label1
this.label1.Location = new System.Drawing.Point(40, 56);
this.label1.Size = new System.Drawing.Size(112, 40);
this.label1.Text = "label1";
//สร้าง EventHandler ให้กับ Control ชื่อ Label1
this.label1.TextChanged += new System.EventHandler(this.label1_TextChanged);
// Form1
this.Controls.Add(this.label1);
this.Menu = this.mainMenu1;
this.Text = "Form1";
}
#endregion
ตารางที่ 2 แสดง code ที่โปรแกรมสร้างให้เอง
หลังจากนั้นสิ่งที่เราต้องทำก็คือเขียนคำสั่งที่เราต้องการใช้เมื่อเกิดเหตุการณ์ที่เราผูกเอาไว้ โดยเขียนเอาไว้ใน method ชื่อ label1_TextChanged ซึ่งโปรแกรมจะทำการสร้าง method นี้ให้เองโดยอัตโนมัติ
ข้อกำหนดในการพัฒนาโปรแกรมบน Pocket PC
· ทุกครั้งที่เราเริ่มสร้าง Pocket PC Project ด้วย Visual Studio.NET จะพบว่าโปรแกรมจะสร้าง Object ชื่อ MainMenu ให้เราทุกครั้งเราสามารถเอา MainMenu นี้ออกได้แต่จะทำให้โปรแกรมของเราไม่มีการแสดง SIP(Soft Input Panel) ที่ด้านล่างขวาของโปรแกรม
· Pocket PC จะสามารถมี Instance ของโปรแกรมที่กำลังทำงานอยู่ได้เพียงแค่ Instance เดียวเท่านั้นซึ่งในส่วนนี้ ตัว .NET CF Runtime จะทำการตรวจสอบและจัดการให้เองโดยที่เราไม่จำเป็นต้องเขียนโปรแกรมเพื่อตรวจสอบ
เพิ่ม Icon ให้ Form ของคุณ
เราสามารถเพิ่ม Icon ได้ โดยคลิกที่เมนู Project -> Properties จากนั้นคลิกที่ Application Icon โปรแกรมจะทำการเปิด Open File Dialog ขึ้นมาให้เราเลือกไฟล์ Icon ซึ่งต้องมีนามสกุล .ico ขนาด 16x16และต้องอยู่ใน Folder เดียวกับ Project นั้นๆ
เริ่มเขียนโปรแกรมกับ Form
Form Control ถือว่า Top-Level Container สำหรับการทำงานทั้งโปรแกรมที่ทำการรวบรวม Control อื่นๆเอาไว้ในตัวเองทั้งหมดโดย Form Control สำหรับ .NET CF มีข้อจำกัดที่แตกต่างจาก .NET Framework ดังนี้
· ไม่สนับสนุนการทำงานแบบลากแล้ววาง (drag-and-drop)
· ไม่สนับสนุนการสั่งงานออกเครื่องพิมพ์
· ไม่สนับสนุนการทำงานกับ ActiveX controls
· การแสดงผลกราฟฟิคมีข้อจำกัด
· สนับสนุน Properties , events , method บางตัวเท่านั้น
Properties ที่สำคัญของ Form Control มีดังนี้(ดูรูปที่ 2 ประกอบการตั้งค่าต่างๆของ Form Control)
รูปที่ 2 Property ของ Form control(2.tiff)
FormBorderStyle property
เป็น Properties สำหรับกำหนดรูปแบบของขอบ(Border) สำหรับ Form ของเราโดยมีค่าที่กำหนดได้ดังนี้
· FormBorderStyle.FixedSingle เป็นค่า Default ของโปรแกรมจะสร้าง Form ที่มีขอบตามปกติโดยที่ไม่สามารถเปลี่ยนแปลงขนาดของ Form ได้
· FormBorderStyle.None จะเป็นการกำหนดให้ Form ที่เราสร้างขึ้นไม่มีขอบเราสามารถเปลี่ยนขนาดของ Form ได้โดยการเขียน code แต่ผู้ใช้ไม่สามารถเปลี่ยนแปลงได้
WindowState property
ใช้สำหรับกำหนดการมองเห็นของ Windows ของเรา
· FormWindowState.Normal จะแสดงหน้าต่างแบบเต็มหน้าจอโดยจะเหลือพื้นที่แสดงผล Start Menu และ main menu เอาไว้ด้วย
· FormWindowState.Maximized จะแสดงหน้าต่างของโปรแกรมแบบเต็มหน้าจอโดยที่ทำการซ่อน Start menu และ main menu เอาไว้
ControlBox property
Control Box คือปุ่มควบคุมหน้าต่างโปรแกรมทั้งหมด(ปุ่ม ok หรือ X ที่อยู่ด้านขวาบน) โดยมีการกำหนดค่าเป็น True / False ถ้าเป็นจริงจะแสดงถ้าเป็น False จะไม่แสดง
MinimizeBox and MaximizeBox properties
เป็นการกำหนดการทำงานของปุ่ม Control Box ว่าจะให้เป็นการปิดโปรแกรมหรือว่าเป็นการย่อโปรแกรมไปเป็น Background โดยเราสามารถกำหนดได้เฉพาะ MinimizeBox Property เท่านั้นเนื่องจากการ maximize จะไม่มีผลสำหรับโปรแกรมบน Pocket PC
Minimize Box มีค่าเป็น True/false ถ้ากำหนดเป็น true ที่มุมขวาบนของโปรแกรมเราจะเป็นปุ่ม X คือการย่อโปรแกรมเป็น Background ถ้ากำหนดเป็น false ที่มุมขวาบนจะแสดงเป็นปุ่ม Ok นั่นหมายถึงการปิดโปรแกรม
Size และ location Properties
Size และ location เป็น Properties สำหรับกำหนดขนาดและตำแหน่งของ Form โดยจะขึ้นอยู่กับค่า FormBorderStyle ด้วยโดยคำสั่งนี้จะทำงานก็ต่อเมื่อ FormBorderStyle ของเรามีค่าเป็น FormBorderStyle.None เท่านั้นถ้ามีค่าเป็น FormBorderStyle.FixedSingle ค่าที่เรากำหนดจะไม่มีผลกับโปรแกรมแต่อย่างใด
โดย size เราสามารถกำหนดขนาดเป็น pixel ได้เลย ส่วน Location เราต้องใส่ ค่า X,Y ที่จะเป็นตำแหน่งเริ่มต้นของ Form ที่มุม ซ้ายบนของโปรแกรม
รูปที่ 3 ทำการสร้าง Form โดยกำหนดค่า FormBoderSytle = FixedSingle , ControlBox = true , WindowState= Normal และ MinimizeBox = false (3.tiff)
รูปที่ 4 คือหน้าตาโปรแกรมที่กำหนด FormBoderSytle = none WindowState=Maximized จะเห็นว่าโปรแกรมแสดงผลแบบเต็มหน้าจอ(4.tiff)
หลังจากที่เราสามารถสร้าง form Control เพื่อกำหนดหน้าตาหลักของโปรแกรมเรียบร้อยแล้วต่อไปเราจะมาดู Control ต่างๆ ที่เราสามารถนำมาใช้งานได้ครับ
Control ต่างๆที่ไม่ใช่ระดับ container คือไม่ใช่ Control ที่เอาไว้รวมรวบ control อื่นๆ จะมี Properties ที่เหมือนกันซะส่วนใหญ่ดังตารางที่ ซึ่งต่อไปจะขอพูดถึง Properties ที่เป็นเอกลักษณ์เฉพาะแต่ละ Control นะครับ
Button Control
คำว่า Button นั้นหมายถึงปุ่มกดสำหรับให้ผู้ใช้คลิกหรือสั่งงานต่างๆ โดย Button Control ทำการ implement มาจาก Class System.Windows.Forms.Button เมื่อผู้ใช้ทำการคลิกที่ Button ด้วย Stylus ตัว Button จะมีการโยน Click Events ออกมาเราก็สามารถเขียน Method เพื่อจัดการกับ Events ต่างๆที่แสดงออกมาได้
โดย Button Control ไม่สนับสนุน Property BackColor, BackGroundImage, Font, ForeColor, และ Image
จากตารางที่ 3 แสดง Code สำหรับการจัดการ Events clicked ที่ Button Control โยนออกมาโดยอันดับแรกให้ทำการลาก Button Control มาวางก่อนแล้วทำการเปลี่ยน ชื่อที่ Property ที่ชื่อ Text จากนั้นทำการ Double Click ที่ Button นั้นโปรแกรมจะทำการสร้าง Method ที่ชื่อ button1_Click ให้เราพิมพ์ code ต่างๆลงไปดังในตาราง
private void button1_Click(object sender, System.EventArgs e)
{
MessageBox.Show(DateTime.Now.ToShortTimeString(),
"เวลาในขณะนี้คือ",
MessageBoxButtons.OK,
MessageBoxIcon.Exclamation,
MessageBoxDefaultButton.Button1);
}
ตารางที่ 3 Code สำหรับ Button Control
จากนั้นให้ลองเรียกคำสั่ง จาก menu Debug -> start without debugging จะได้ผลดังรูปที่ 5 เมื่อเราคลิกที่ Button Time จะมีการแสดง Message Box เป็นเวลาปัจจุบันขึ้นมาครับ
รูปที่5 การทำงานของโปรแกรมButton (5.tiff)
Textbox control
เป็น Control ที่ใช้รับข้อมูลจากผู้ใช้ Textbox Control เป็น Control ที่สนับสนุน BackColor , ForeColor Property ซึ่งมีน้อย Control นักที่สนับสนุน Property นี้ใน .NET CF โดย Textbox ไม่สนับสนุน click Events
Label Control
เป็น Control สำหรับใช้แสดงข้อความสำหรับผู้ใช้มี Properties ที่ใช้งานไม่กี่อย่างคือ Text สำหรับกำหนดข้อความที่ต้องการแสดงและ TextAlignสำหรับจัดตำแหน่งของข้อความ ประกอบด้วย Topleft ,topcenterและ topright สำหรับ Events จะมีการโยน Events textChanged ออกมา
Radio Button Control
เป็น Control สำหรับรับข้อมูลจากผู้ใช้อีกชนิดหนึ่งที่ทำการให้ผู้ใช้เลือกค่าข้อมูล 1 ค่าจากหลายๆค่าโดยในโปรแกรมหนึ่งๆ จะสามารถมีได้หลาย Radio Button โดยต้องทำการแยก แต่ละ Control เอาไว้คนละ Panel กัน (Panel เป็น Control ระดับ Container อีกชนิดหนึ่งซึ่งจะขอกล่าวถึงต่อไป)
โดยมี Events ที่สำคัญๆ 2 อย่างคือ Click จะโยนออกมาเมื่อผู้ใช้ทำการคลิก Radio Button และCheckedChanged จะโยนออกมาเมื่อมีการเปลี่ยนค่าการเลือกปุ่ม Radio
เราลองมาสร้าง Radio button สำหรับการถามตอบคำถามกันนะครับ ให้เราลองลาก Radio Button Control มาวางลงในโปรแกรมของเราแล้วทำการ Double Click ที่ Control ที่มีคำตอบที่ถูกต้องโปรแกรมจะสร้าง method CheckedChanged มาให้ ให้เราลองพิมพ์ code ดังตารางที่ 4 จากนั้นให้ลองทำการรันดูจะได้ผลดังรูปที่
6 โดยถ้าเราคลิกคำตอบที่ถูกต้อง โปรแกรมจะแสดง Messagebox ขึ้นมาดังรูป แต่ถ้าไม่ถูกก็จะไม่แสดงผล
private void radioButton1_CheckedChanged(object sender, System.EventArgs e)
{
if(this.radioButton1.Checked)
MessageBox.Show("Correct!!! You are using Pocket PC Magz");
}
รูปที่ 6 การทำงานของ Radio Button Control (6.tiff)
Checkbox Control
เป็น control ที่คล้ายกับ Radio Button คือโปรแกรมเตรียมค่าต่างๆเอาไว้ให้ผู้ใช้เลือกแต่ผู้ใช้สามารถเลือกค่าที่โปรแกรมเตรียมเอาไว้ได้มากกว่า 1 ค่า โดยแต่ละ Checkbox มี Property ที่สำคัญชื่อว่า CheckState มีค่าที่เป็นไปได้ 3 ค่าคือ checked , unchecked , indeterminate โดย Checked และ unchecked สำหรับกำหนดว่าจะให้มีการเลือก Checkbox นั้นหรือไม่ และ Indeterminate ใช้สำหรับทำให้Checkbox ที่ได้มีการ check แล้วกลายเป็นสีเทานั่นคือมีการ Check แล้วไม่สามารถเอาออกได้ โดยการที่เราจะใช้งานทั้ง 3 สถานะนี้ได้ ต้องทำการกำหนด Property Three state ให้เป็น True ด้วย รูปที่ 7 แสดงการทำงานของ Checkbox
รูปที่ 7 การทำงานและสถานะต่างๆของ Checkbox Control (7.tiff)
Combobox Control
ComboBox เป็น control ที่รวมหลายๆข้อมูลเอาไว้สำหรับเป็นทางเลือกโดย ComboBox จะมีหน้าตาคล้ายกับ TextBox แต่จะมีเครื่องหมายลูกศรชี้ลงแสดงเมื่อเรากดก็มีข้อมูลแสดงออกมา ComboBox นับว่ามีประโยชน์มากสำหรับการเขียนโปรแกรมบนเครื่อง Pocket PC เนื่องจากพื้นที่แสดงผลที่จำกัด
โดยวิธีการเพิ่มข้อมูลเข้าสู่ ComboBox สามารถเพิ่มได้ทั้งช่วง Degisn time และ Runtime โดยในขณะ Design Time เราสามารถเพิ่มได้จาก Property Collection จากหน้าต่าง Property และในเวลา Runtime เราก็สามารถจัดได้ข้อมูลใน ComboBox ด้วย Method 3 อันคือ add ,remove, clear โดย Method นี้จะอยู่ใน Property ที่ชื่อว่า Items add สำหรับการเพิ่มข้อมูลใหม่เข้าสู่ Comboxbox remove คือการลบข้อมูลออกจาก ComboBox และ Clear คือการลบข้อมูลทั้งหมด
จากรูปที่ 8 คือการเพิ่มข้อมูลเข้าสู่ ComboBox โดยใช้ Collection ใน Property โดย 1 แถวหมายถึงข้อมูล 1 ชุด ที่จะแสดงใน โปรแกรม และในรูปที่ 9 คือผลการรันโปรแกรมที่ได้ครับ
รูปที่ 8 การเพิ่มข้อมูลให้กับ ComboBox(8.tiff)
รูปที่ 9 การทำงานของ Combo Box(9.tiff)
ListBox Control
ListBox เป็น Control ที่มี method และ property เหมือนกับ ComboBox เกือบทุกอย่างแต่จะต่างกันในการแสดงผล ListBox จะทำการแสดงผลออกมาทั้งหมดโดยไม่ต้องมีการกด Drop Down ลงมา ดังรูปที่ 10 ครับ
รูปที่ 10 การทำงานของ ListBox Control(10.tiff)
สำหรับฉบับนี้ผมคงต้องจบลงที่ ListBox Control ก่อนนะครับแล้วฉบับหน้าผมจะพูดถึง Controlอื่นๆที่มีความสำคัญในการเขียนโปรแกรมในส่วนติดต่อกับผู้ใช้ต่อไปนะครับ หากมีข้อสงสัยประการใดหรือต้องการแนะนำติชมสามารถส่งเมล์ติดต่อผมได้ที่ Charnsak@pdamobiz.com สวัสดีครับ