tutorial:gui
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
tutorial:gui [2019/01/28 13:11] admin |
tutorial:gui [2019/03/14 10:58] (current) admin |
||
|---|---|---|---|
| Line 3: | Line 3: | ||
| GUI Application ถือว่าเป็นไม้เด็ดจาก Lazarus IDE เพราะ สร้างได้ไม่ยาก ไม่ซับซ้อน ใช้งานได้รวดเร็ว ซึ่งในบทนี้ผมจะมาสอนวิธีการเขียน GUI Application อย่างง่ายให้ดูครับ | GUI Application ถือว่าเป็นไม้เด็ดจาก Lazarus IDE เพราะ สร้างได้ไม่ยาก ไม่ซับซ้อน ใช้งานได้รวดเร็ว ซึ่งในบทนี้ผมจะมาสอนวิธีการเขียน GUI Application อย่างง่ายให้ดูครับ | ||
| + | |||
| + | ก่อนที่เราจะไปยังขั้นตอนต่อไป มีศัพท์หลายตัวที่เราต้องรู้ก่อน ดังนี้ครับ | ||
| + | |||
| + | ==== Event ==== | ||
| + | Event คือ Procedure หรือ Sub-program รูปแบบหนึ่ง ซึ่งถูกเรียกเมื่อมีเหตุการณ์ที่เกี่ยวข้องกับ Event นั้นๆ สิั่งที่เรียกว่า Event นี้ มีอยู่ในเฉพาะ GUI Application เท่านั้น | ||
| + | |||
| + | สำหรับ Console Application จะทำงานตามคำสั่งทีละบรรทัดไปเรื่อยๆ แต่สำหรับ GUI Application จะถูกออกแบบให้ทำงานบน Event ต่างๆแทน เช่น ขณะเปิดโปรแกรมมา ในขณะที่กำลังสร้าง Form ขึ้น จะมีการเรียก Event ที่ชื่อว่า OnCreate หลังจากนั้น จึงเป็น Event อื่นตามลำดับ เช่น หากเราคลิ๊กไปที่ Button จะมีการรัน Event ที่ชื่อว่า OnClick ของ Button นั้นขึ้น | ||
| + | |||
| + | |||
| =====Program#1 HelloWorld on Form1: ===== | =====Program#1 HelloWorld on Form1: ===== | ||
| Line 45: | Line 54: | ||
| เพื่อความสะดวกในการทำงาน เราควร Save Project นี้ไว้ใน Folder ที่เราเตรียมไว้ | เพื่อความสะดวกในการทำงาน เราควร Save Project นี้ไว้ใน Folder ที่เราเตรียมไว้ | ||
| - | 2. กดเลือก LCL ที่ชื่อ TButton (ข้างบนเหนือ Source Editor) แล้วมาคลิ๊กที่ Form1 จะเป็นการแปะ Button1 ลงไปบน Form1 ให้นำ TLabel มาแปะใต้ Button1 จัดตำแหน่งและปรับขนาดให้เหมาะสม ให้สังเกตว่า Source Code จะเปลี่ยนแปลง เนื่องจากมีการเพิ่ม Source Code ที่เกี่ยวกับ TButton และ TButton เข้ามาใน Form1 | + | 2. กดเลือก LCL ที่ชื่อ TButton (ข้างบนเหนือ Source Editor) แล้วมาคลิ๊กที่ Form1 จะเป็นการแปะ Button1 ลงไปบน Form1 สำหรับ TLabel ให้ทำในแบบเดียวกันโดยนำมาแปะใต้ Button1 จัดตำแหน่งและปรับขนาดให้เหมาะสม ให้สังเกตว่า Source Code จะเปลี่ยนแปลง เนื่องจากมีการเพิ่ม Source Code ที่เกี่ยวกับ TButton และ TButton เข้ามาใน Form1 |
| - | 3. เปลี่ยนคำที่แสดงบน Button1 ให้เป็นคำว่า "Show Hello" | + | 3. เปลี่ยนคำที่แสดงบน Button1 ให้เป็นคำว่า "Show Hello" (คือ Property ที่ขื่อว่า Caption) ซึ่งทำได้ 2 วิธีดังนี้ |
| + | * **__วิธีที่ 1__ : แกใขใน Object Inspector** - โดยคลิ๊กเลือก Button1 แล้วเข้าไปแก้ใข Property ใน Object Inspector ที่ชื่อว่า Caption วิธีนี้เป้นวิธีที่ค่อนข้างง่าย สะดวกรวดเร็วสำหรับมือใหม่ | ||
| + | * **__วิธีที่ 2__ : เพิ่ม code เข้าไปใน Form1** - โดยการพิมพ์คำสั่ง Button1.Caption:='Show Hello'; เข้าไปใน Form1 ผ่าน Event ที่ชื่อว่า Form1.OnCreate | ||
| + | วิธีที่ เป็นวิธีที่ผมใช้บ่อย เพราะถ้าสังเกตดีๆจะเห็นว่า Caption ของ Control ทั้งหลาย จะถูกตั้งตามชื่อของมัน การที่ใช้วิธีนี้จะทำให้เรายังคงเห็นชื่อของ Control ผ่าน Caption ในขณะ Design Time | ||
tutorial/gui.1548655883.txt.gz · Last modified: 2019/01/28 13:11 by admin
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
