พูดถึง winforms 2

เมื่อตอนแรกกล่าวถึง winforms แบบเห็นโค้ดยังไงบอกไปอย่างนั้นแล้วรู้สึกว่ายังไม่โอเค เนื่องจากพอทำงานจริง ก็ยังมองรูปแบบไม่ออกนัก ดังนั้น วันนี้จะค่อยๆ เจาะรายละเอียดสำหรับการออกแบบ ลึกขึ้น

อย่างแรกเลย จะกล่าวถึงหน้า designer

หน้า designer จะเป็นหน้าที่ให้เราเห็น UI ที่แสดงออกจริงๆ แทนที่จะเป็น code (ปกติ code จะถูกนำไป execute และแปลงเป็น UI ให้เห็น) ทำให้เราสามารถมองภาพรวมของ application ที่รันจริงๆได้ และง่ายต่อการเสริม เติม แต่ง แก้ไข กำหนดค่าต่างๆ เนื่องจาก มี UI tool ให้ใช้งานแบบ drag & drop รวมถึงการ set property ต่างๆ แบบเข้าใจง่าย ไม่ต้อง code ให้ยุ่งยาก

จากรูปด้านบน จะเห็นส่วนการแสดงผล UI ของ app. จริงๆ ด้านซ้ายมือ กล่องขวามือล่างคือ กล่องสำหรับกำหนด property ให้กับ component นั้นๆ เช่น ขนาด สี event โดยหากเรากด toolbox ซ้ายมือ จะพบกับกล่องที่เต็มไปด้วย component ให้สามารถ drag&drop มาวางได้ (หากไม่พบ ให้กด view → toolbox)

เมื่อลองลากวาง component ลงบน form ของเรา และคลิก focus ที่ component นั้นจะปรากฏกล่อง properties ด้านขวามือล่าง

โดย field ที่สำคัญๆ ก็จะมี

• Name สำหรับผูกกับชื่อตัวแปรใน code
• Size สำหรับกำหนดขนาด
• Color สำหรับกำหนดสีต่างๆ
• อื่นๆ จะเป็นการกำหนดตำแหน่ง ระยะ การซูม

หากเราสังเกตด้านบน จะเห็นสัญลักษณ์ สายฟ้า เมื่อคลิกเข้าไปจะเจอกับ event

โดยเราสามารถกำหนดชื่อ method ให้กับ event นั้นๆเพื่อทำการ binding ว่าหากเกิดเหตุการณ์ดังกล่าว จะให้ไปทำงานที่ส่วนไหน ตัวอย่างในรูป คือ หากมีการคลิกที่ component (ในที่นี้คือปุ่ม) จะทำการเรียก method ButtonSend_Click ที่สร้างขึ้น (ชื่อตั้งตามแบบที่เคยกล่าวไปใน พูดถึง winforms)

สรุป หน้า designer สำหรับ winforms ทำให้เราเห็น UI ของ app โดยสามารถสร้าง component และกำหนดค่าต่างๆ ให้กับ component เหล่านั้นได้ง่าย โดยไม่ต้อง code