การเขียนโปรแกรมด้วย PocketC# ตอนที่4

สวัสดีครับ เพื่อน ๆ ทุกคน ในตอนที่ 3 เราได้สร้างฟอร์มหน้าจอ มีปุ่มกด ข้อความ และ TextBox โดยเขียนโปรแกรมตามแนวทางคือ สร้างฟอร์มเปล่า กำหนด Controls ที่ต้องการใช้ กำหนดคุณสมบัติของ Controls แต่ละตัว วาง Controls ลงบนหน้าจอ เรียบร้อยแล้ว คงเหลือส่วนสุดท้าย คือกำหนดหน้าที่ของ controls เพื่อติดต่อกับผู้ใช้งาน

Controls ที่มีหน้าที่แสดงผลที่หน้าจอ คือ Label ส่วน Controls ที่มีหน้าที่รับข้อมูลจากผู้ใช้ คือปุ่มกด ซึ่งจะรับข้อมูลด้วย TouchScreen และ Controls ที่มีหน้าที่ทั้งรับข้อมูล และแสดงผล ในขณะเดียวกันได้ คือ TextBox โดยจะรับข้อมูลจาก Keyboard

เราลองมากำหนดหน้าที่ของ ปุ่มกด หรือ Button กันก่อน

ในปุ่มกดของเรามีข้อความว่า “ออก” ดังนั้น เราจะกำหนดหน้าที่ให้กดปุ่มแล้ว เป็นการปิดโปรแกรม เหมือนปุ่ม ok ที่อยู่มุมบนขวาของฟอร์ม การกำหนดหน้าที่ของ Controls เรียกว่าการกำหนด Events หรือเหตุปัจจัยต่าง ๆ ที่เกี่ยวกับ controls นั้น ๆ

ขอให้เพื่อน ๆ เพิ่มเติมคำสั่งนี้ในบรรทัดต่อจาก //Add Control Events ดังนี้

button1.Click+=new System.EventHandler(button1_Click);

คำสั่งนี้เป็นการกำหนดหน้าที่หรือ Event เมื่อมีการกดหรือ Click ปุ่ม button1 โดยเมื่อกดปุ่มก็จะสั่งให้โปรแกรมไปทำงานที่ method button1_Click();

และเพิ่ม method button1_Click() ต่อจาก method iami() ของเราดังนี้ครับ

private void button1_Click(object sender,EventArgs evArgs)

{

Application.Exit();

}

เมื่อมีการกดปุ่ม button1 จะมีการส่งข้อมูลมาให้ method button1_Click() นี้ ซึ่งก็จะพบคำสั่ง Application.Exit() คือ ออกจากโปรแกรม

ลอง build และ run ดู เมื่อกดปุ่มออก ก็จะเป็นการออกจากโปรแกรมครับ ปุ่มออกหรือปิดโปรแกรมนี่ มีใช้เกือบทุกโปรแกรม เพื่อความสะดวกแก่ผู้ใช้ในการปิดโปรแกรมครับ

คราวนี้เราจะลองใส่คำสั่งอื่นๆ บ้าง ขอให้เพื่อน ๆ ใส่เครื่องหมาย // ที่ข้างหน้า Application.Exit(); เพื่อละคำสั่งนี้ไว้ก่อน

คำสั่งที่เราจะใส่ต่อไปนี้ เป็นการบังคับให้เปลี่ยนแปลงแก้ไขคุณสมบัติของ controls อื่น ๆ หรือแม้แต่ตัวของมันเอง เมื่อผู้ใช้สั่งการ เช่น เปลี่ยนข้อความของ Label เปลี่ยนขนาดของ Textbox ซึ่งจะช่วยในการโต้ตอบกับผู้ใช้ได้แปลก ๆ อีกทางหนึ่งนอกเหนือจากการใช้ MessageBox ที่เราคุ้นเคยกันแล้ว

การจะเปลี่ยนแปลงคุณสมบัติของ Controls ที่กำหนดไว้แล้วได้นั้น ต้องมีการย้ายเส้นเอ็นเปลี่ยนกระดูกกันนิดหน่อยครับ โดยการย้ายส่วนของ การประกาศ Controls คือส่วน//Controls Declaration ทั้งหมด ออกไปนอก method iami() โดยให้ไปลอยอยู่ใน class เหนือ method ต่าง ๆ แทน โดยขอให้เพื่อน ๆ ตัดส่วน //Controls Declaration 4 บรรทัดนี้ออก แล้วไปแปะไว้ ใต้วงเล็บปีกกาถัดจากชื่อ class iami : Form ครับ

…

class iami : Form

{

//controls declaration

Button button1=new Button();

TextBox textBox1=new TextBox();

Label lbl1=new Label();

static void Main()

{

Application.Run(new iami());

}

…

จากนั้นเพิ่มเติมคำสั่งใน method button1_Click() เพื่อทดลองแก้ไขคุณสมบัติของ controls ด้วยการกดปุ่มออกของเรา

private void button1_Click(object sender,EventArgs evArgs)

{

//Application.Exit();

lbl1.Text=”Button Pressed”;

lbl1.BackColor=Color.Yellow;

button1.Text=”Press!”;

textBox1.Text=”Text Changed”;

textBox1.Size=new Size(100,40);

}

เมื่อลอง Build และ Run กดปุ่มดู จะเห็นว่าข้อความใน Label และ TextBox เปลี่ยนไปตามที่เรากำหนด นี่ก็เป็นตัวอย่างการทำงานของ Event ปุ่มกด และแสดงผลทาง Label และ TextBox

เราลองมากำหนดหน้าที่ของ TextBox ในการรับข้อมูลจาก Keyboard กันบ้าง

ตามที่เราได้ทดลองให้ TextBox ทำหน้าที่แสดงผลไปแล้ว คราวนี้มาลองให้ TextBox ทำหน้าที่รับข้อมูลจาก Keyboard บ้างครับ

TextBox จะรับข้อมูลในรูปแบบ string หรือข้อความ โดยป้อนจาก keyboard แต่เนื่องจากหน้าฟอร์มที่เราสร้างขึ้น ไม่มีแถบเมนูด้านล่าง สำหรับแสดง keyboard ดังนั้น เราจึงต้องสร้างแถบเมนูก่อนครับ เพื่อสามารถเลือกใช้ keyboard ได้

การเพิ่มเมนู ทำได้ง่ายมากครับ เพียงแต่เพิ่มคำสั่งเรียกใช้เมนู ใน method iami() ของเรา ต่อจากการกำหนดหน้าที่ของ Controls โดยเริ่มด้วยส่วนของ //Add MainMenu

……

//Add control Events

button1.Click+=new System.EventHandler(button1_Click);

//Add MainMenu

MainMenu mainMenu=new MainMenu();

Menu=mainMenu;

…

 

แค่นี้เองครับ พอ Build และ Run จะเห็นหน้าจอพร้อมกับแถบเมนูด้านล่าง ซึ่งก็จะมี Keyboard ปรากฏอยู่ครับ ขอให้เพื่อน ๆ ลองเรียก Keyboard ขึ้นมา แล้วแตะที่ช่อง TextBox แล้วใช้ Keyboard พิมพ์เพื่อเปลี่ยนแปลงข้อความใน TextBox ของเรา จะเห็นว่าข้อความใน TextBox สามารถแก้ไขได้ตามที่เราต้องการ คราวนี้เรามาลองเอาข้อความใน TextBox ที่เราพิมพ์ลงไป ไปใช้งาน โดยลองให้ label นำข้อความจาก TextBox ไปแสดงผลเมื่อเรากดปุ่ม โดยแก้ไขคำสั่งใน button1_Click() ดังนี้

private void button1_Click(object sender,EventArgs evArgs)

{

//Application.Exit();

//lbl1.Text=”Button Pressed”;

lbl1.Text=textBox1.Text;

lbl1.BackColor=Color.Yellow;

//textBox1.Text=”Text Changed”;

textBox1.Size=new Size(100,40);

}

เราใช้เครื่องหมาย // ละคำสั่งกำหนดข้อความให้ lbl1.Text แล้วเพิ่มคำสั่งให้ lbl1.Text=textBox1.Text คือ รับข้อมูลที่เรากรอกลงไปใน TextBox มาแสดงผลนั่นเอง

สรุปโครงสร้างของฟอร์มในการใช้งาน

เริ่มจากกำหนด class และระบุว่าจะใช้ Form

ประกาศ Controls ที่ต้องการจะใช้ใน Form

method Main() เพื่อเรียกใช้ method ของ Form ขึ้นมา Run

method ของ Form โดยภายในจะต้องมีการกำหนด คุณสมบัติของ controls กำหนดวาง controls ลงในForm และกำหนดหน้าที่หรือ Event ของ Controls แต่ละตัว

method รับ Event มาทำงานตามที่เราต้องการ

เขียนเป็นโครงสร้างง่าย ๆ ดังนี้ครับ

class iami : Form

{ //เริ่มต้น class

//Controls Declaration

static void Main()

{

Application.Run(new iami());

}

iami()

{

//Form Header

//Controls Properties

//Add Controls

//Control EventHandler

}

private void button1_Click()

{

คำสั่งย่อยตามที่ต้องการ

}

}//จบ class

คราวหน้าตอนที่ 5 เราจะมาลองเล่นกับ control เกี่ยวกับรูปภาพกันบ้าง นั่นคือ PictureBox ครับ ซึ่งจะเกี่ยวข้องกับการเปิดไฟล์ต่างๆ และ graphics อีกเล็กน้อย สนุกมากครับ

ขอให้สนุกครับ

[email protected]

6 สิงหาคม 2550

 

 

 

 

 

 

Hosted by www.Geocities.ws

1