tag:blogger.com,1999:blog-48826603361372171812011-04-22T00:59:38.825+07:00การเขียนโปรแกรมด้วย Delphi ง่ายอย่างกับปอกกล้วยสิงห์ โอสถhttp://www.blogger.com/profile/04271725299315748942noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-4882660336137217181.post-47398539621862587242007-12-02T15:55:00.000+07:002007-12-04T19:23:28.090+07:00<strong>ในการเขียนโปรแกรมด้วย Delphi นั้น เป็นการเขียนโปรแกรมแบบที่เรียกกว่า Event Driven หรือแปลเป็นไทยง่ายๆ ว่า การเขียนโปรแกรมแบบควบคุมเหตุการณ์</strong><br /><br />อย่างเช่น กดปุ่มแล้วเครื่องระเบิด ^-^<br /><br />เมื่อรัน Delphi หน้าตาโปรแกรมก็จะประมาณนี้<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Delphi Skin" src="http://lalulatee.googlepages.com/delphi-skin.gif" /><br /><br /><strong>ในการเขียนโปรแกรมแรกนั้น ผมจะให้ทุกท่านได้เข้าใจ การเขียนโปรแกรมแบบ Event Driven อย่างชัดเจน และเห็นภาพรวมๆของการเขียนโปรแกรม<br /></strong><br />ในการเขียนโปรแกรมด้วย Delphi นั้น เราจะออกแบบโปรแกรมลงบนต่างต่าง Form Designer<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Form Designer" src="http://lalulatee.googlepages.com/form-designer.gif" /><br /><br />โดยนำสิ่งที่เป็นองค์ประกอบของโปรแกรม ที่เรียกว่า Component มาวางไว้บนForm<br />ซึ่ง Component เหล่านี้ จะอยู่รวมกันข้างบนตรงที่เรียกว่า Component Palette<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Component Palette" src="http://lalulatee.googlepages.com/component-palette.gif" /><br /><br />ในโปรแกรมที่เรากำลังจะเขียนนี้ เราจะใช้ Component 3 ตัว คือ<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Label" src="http://lalulatee.googlepages.com/Label.gif" /> Label ป้ายข้อความ<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Edit" src="http://lalulatee.googlepages.com/edit.gif" /> Edit กล่องข้อความ<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Button" src="http://lalulatee.googlepages.com/button.gif" /> Button ปุ่ม<br /><br />เมื่องนำมาวางเรียบร้อยแล้ว component ที่อยู่บน Form จะเรียกว่า Object<br /><br />ต่อไปก็จัดตำแหน่ง Object ให้อยู่ตามที่เราต้อง<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Form เมื่อจัดวาง Component" src="http://lalulatee.googlepages.com/form-ex1-1.gif" /><br /><br />เมื่อจัดการกับรูปแบบ จนได้ตามเราต้องการแล้ว เราก็จะมาจัดการกับรายละเอียดใน Object แต่ละตัวที่อยู่บน Form โดยรายละเอียดทั้งหมดของ Object แต่ละตัวจะปรากฎให้เราแก้ไขได้ผ่านทาง Object Inspector ซึ่งรายละเอียดเหล่านี้เราเรียกว่า Properties<br /><br /><img alt="การเขียนโปรแกรมด้วย Delphi - Object Inspector" src="http://lalulatee.googlepages.com/Object-inspector.gif" /><br /><span style="font-size:78%;">*หลายๆครั้ง จะมีบางท่านเผลอปิดหน้าต่างนี้ไป ท่านสามารถ เรียกขึ้นมาใหม่ได้โดยไปที่เมนู View> Object Inspector</span><br /><br /><strong>ผมจะแนะนำให้ท่านรู้จักกับ Properties ที่เกี่ยวข้องกับ โปรแกรมนี้</strong><br /><br /><img alt="การเขียนโปรแกรมด้วย Delphi - Label" src="http://lalulatee.googlepages.com/Label.gif" /> Label ป้ายข้อความ<br />caption คือ ข้อความที่ปรากฎอยู่บนLabel<br /><br /><img alt="การเขียนโปรแกรมด้วย Delphi - Edit" src="http://lalulatee.googlepages.com/edit.gif" /> Edit กล่องข้อความ<br />text คือ ข้อความที่อยู่บนกล่องข้อความ<br /><br /><img alt="การเขียนโปรแกรมด้วย Delphi - Button" src="http://lalulatee.googlepages.com/button.gif" /> Button ปุ่ม<br />caption คือ ข้อความที่ปรากฎอยู่บนButton<br /><br />อ่อ! เดี๋ยวจะลืมกันนะครับ Form ก็มี Properties นะครับ<br />Form<br />Caption คือ ข้อความที่แสดงอยู่ตรง Title Bar ข้างบน Form<br /><br /><strong>ในโปรแกรมนี้ผมจะเปลี่ยน Properties ดังนี้</strong><br />Form Caption เปลี่ยนเป็น "พ่อผมใหญ่ ใครอย่ายุ่ง"<br />Label Caption เปลี่ยนเป็น "ชื่อพ่อผม"<br />Edit Caption เปลี่ยนเป็น "กรุณาใส่ชื่อพ่อของท่าน"<br />Button Caption เปลี่ยนเป็น "คลิกเพื่อเชิดชูพ่อ"<br /><br />เมื่อเราปรับเปลี่ยนเรียบร้อย ก็จะเป็นเช่นนี้<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Form เมื่อ ปรับเปลี่ยน Properties" src="http://lalulatee.googlepages.com/form-ex1-2.gif" /><br /><br />เสร็จแล้ว โปรแกรมของเราถูกออกแบบเรียบร้อยแล้วครับพี่น้องประชาชน<br /><br />ต่อจากตรงนี้ไปเนี้ยแหละครับ ที่จะเขียนได้ว่า เขียนโปรแกรมจริงๆ ซึ่งเราเรียกขั้นนี้ว่า Coding<br /><br />การเขียนโปรแกรมตรงนี้ เราจะเขียน Code ลงในหน้าต่างที่เรียกว่า Code editor<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Code editor" src="http://lalulatee.googlepages.com/Code-editor.gif" /><br /><br />แต่เราไม่ได้ ดุ่ยๆลุยไปเขียน Code เลยนะครับ เราจะต้องไปเลือก อีก Event ก่อนว่า<br />เราจะให้ Code ที่เราจะเขียนโปรแกรมนี้ ทำงานตอนไหน เช่น ให้ทำงานตอนกดปุ่ม<br /><br />ซึ่งเราจะเลือก Event จาก Object Inspector ใน Tab ที่เขียนว่า Events<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Object Inspector ใน Tab Events" src="http://lalulatee.googlepages.com/Object-inspector-2.gif" /><br /><br />โดยในโปรแกรมนี้ เราจะมาเขียนโปรแกรมที่จะทำงานตอนคลิกปุ่ม<br />เพราะฉะนั้น ก็ต้องเขียนโปรแกรมที่ Event OnClick<br /><br />วิธีเลือกก็ง่ายๆ ด้วยการดับเบิ้ลคลิกที่ ช่องว่างข้างๆช่องที่เป็นชื่อของ Event<br />สำหรับโปรแกรมนี้คือ OnClick<br /><br />เมื่อดับเบิ้ลคลิกแล้ว จะแสดงหน้า Code editor ขึ้นมา พร้อมกับ สร้าง Code ส่วนหนึ่งขึ้นมา<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Code Editor เมื่อเลือก Event" src="http://lalulatee.googlepages.com/code-ex1-1.gif" /><br />สังเกตส่วนหัวของ Code จะเหมือนกับตรง Event<br /><br />ในส่วนตรงนี้แหละครับ ที่เราจะเริ่มเขียนโปรแกรมกัน<br />โปรแกรมส่วนที่เราต้องการให้ทำงาน เมื่อคลิกปุ่มนั้น เราจะเขียนลงตรงระหว่าง Begin ถึง End;<br /><br />โปรแกรมนี้ เราจะเขียนโปรแกรมให้เมื่อกดปุ่ม แล้ว Label แสดงประโยคว่า<br />"พ่อผมชือ(ชื่อของคุณพ่อ) ผมรักพ่อมากครับ "<br />โดยรับชื่อพ่อมาจาก กล่องข้อความ<br /><br />เช่น พิมพ์ชื่อพ่อลงไปว่า "สมยศ" เมื่อกดปุ่ม โปรแกรมก็จะแสดงประโยคว่า<br />"พ่อผมชื่อสมยศ ผมรักพ่อมากครับ"<br /><br />มาเขียน Code กันเลย<br /><br />Code มีอยู่ว่า<br />Label1.cation := 'พ่อผมชือ'+ Edit1.text +' ผมรักพ่อมากครับ';<br /><br /><img alt="การเขียนโปรแกรมด้วย Delphi - Code Editor ขณะเขียน Code" src="http://lalulatee.googlepages.com/code-ex1-2.gif" /><br /><br />ขณะเขียนโปรแกรมอยู่ ท่านอาจตกใจ อ้าว! พิมพ์ภาษาไทย กลายเป็นต่างดาวได้ไง<br />ไม่ต้องตกใจครับ พิมพ์ไปแล้วอาจจะเป็นภาษาต่างดาว แต่เวลาแสดงผลบนโปรแกรมเป็นภาษาไทยครับ<br /><br />ผมเองก็ไม่มีวิธีแก้เหมือนกัน ทำยังไงมันก็เป็นภาษาต่างดาวครับ<br /><br />เอาล่ะมา อธิบาย Code นิดนึง<br /><br />ในการเขียนโปรแกรมเราเรียกชื่อของ Object<br />จาก Properties Name ซึ่งเป็นชื่อซึ่งใช้อ้างอิงในการควบคุม<br /><br />จาก<br />Label1.cation := 'พ่อผมชือ'+ Edit1.text +' ผมรักพ่อมากครับ';<br /><br />หมายความว่า ให้ค่า caption ของ Label1 แสดงประโยค "พ่อผมชื่อ+ข้อความในค่า text ของ Edit1+ ผมรักพ่อมากครับ"<br /><br />เมื่อเขียนโปรแกรมเสร็จแล้ว เราก็ต้อง Run โปรแกรมกันหน่อย<br /><br />โดยคลิกที่ปุ่ม สามเหลี่ยมเขียว ด้านบน เพื่อนรันโปรแกรม<br /><img alt="การเขียนโปรแกรมด้วย Delphi - ปุ่ม Run" src="http://lalulatee.googlepages.com/run-button.gif" /><br /><br />เมื่อรันแล้วหน้าตาจะเป็นอย่างงี้<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Form เมื่อ Run" src="http://lalulatee.googlepages.com/form-ex1-3.gif" /><br /><br />ลองใส่ชื่อลงไป แล้วคลิกปุ่มดู<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Form เมื่อ Run" src="http://lalulatee.googlepages.com/form-ex1-4.gif" /><br /><br />โอ้ !!! เย้ !!! โปรแกรมของฉัน มันทำงานได้แล้ว<br /><br />เห็นไหมครับการเขียนโปรแกรมง่ายแค่ไหน<br /><br />เขียนเสร็จแล้วอย่าลืมเก็บเอาดูนะครับ<br />การ Save โปรแกรม ให้กด Save All นะครับ<br /><br />เพราะว่า โปรแกรมที่เขียนขึ้นมาไม่ได้มี ไฟล์แค่อันเดียว<br /><img alt="การเขียนโปรแกรมด้วย Delphi - Files ของ Project" src="http://lalulatee.googlepages.com/files1-1.gif" /><br /><br />เนี้ยแหละครับ Files ทั้งหมด<br /><br />ถ้าคุณกด Save เฉยๆ มันจะ Save เฉพาะ File ที่กำลังทำงาน ซึ่งอาจจะเป็น Form หรือ Code อันใดอันหนึ่งเท่านั้น<br /><br />ส่วน File นามสกุล .exe นั้น เกิดจากการรัน โปรแกรมเมื่อกี้นะครับ<br /><br />ถ้าท่านอยากดู Code ตัวอย่างจากผม ก็สามารถ <a title="การเขียนโปรแกรมด้วย Delphi - Code ตัวอย่าง" href="http://lalulatee.googlepages.com/Ex1.zip">Download</a> ได้ ขนาดไฟล์ 204 kB<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/4882660336137217181-4739853962186258724?l=singha-delphi.blogspot.com' alt='' /></div>สิงห์ โอสถhttp://www.blogger.com/profile/04271725299315748942noreply@blogger.com3