This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
introduction:lazaruside [2019/01/04 08:35] admin [การเริ่ม Project] |
introduction:lazaruside [2019/01/04 12:18] (current) admin [มารู้จักส่วนต่างๆใน IDE] |
||
---|---|---|---|
Line 17: | Line 17: | ||
การติดตั้งโปรแกรม Lazarus IDE ไม่ยากครับ เข้าไปโหลดโปรแกรมจากเวปไซต์หลัก จากนั้นกดรันไฟล์ติดตั้ง เพื่อทำการ Install ได้เลย ตัวโปรแกรมจะมีทั้งแบบ 32 บิท และแบบ 64 บิท เลือกให้ตรงตามระบบปฏิบัติการได้เลย | การติดตั้งโปรแกรม Lazarus IDE ไม่ยากครับ เข้าไปโหลดโปรแกรมจากเวปไซต์หลัก จากนั้นกดรันไฟล์ติดตั้ง เพื่อทำการ Install ได้เลย ตัวโปรแกรมจะมีทั้งแบบ 32 บิท และแบบ 64 บิท เลือกให้ตรงตามระบบปฏิบัติการได้เลย | ||
---- | ---- | ||
- | =====เริ่มต้นใช้งาน===== | + | ======เริ่มต้นใช้งาน====== |
การใช้งาน Lazarus IDE มีหลายสิ่งที่ควรรู้ดังนี้ | การใช้งาน Lazarus IDE มีหลายสิ่งที่ควรรู้ดังนี้ | ||
- | ====การเริ่ม Project==== | + | =====การเริ่ม Project===== |
- | ปกติเมื่อเราเข้าโปรแกรมมาครั้งแรก หลักๆจะปรากฎ Text Editor พร้อมกับ Form เปล่าๆมาคู่กัน สิ่งนี้เราเรียกว่าเป็น Project สำหรับการสร้าง Form-based Application ครับ อย่างไรก็ตาม หากเราต้องการสร้าง Project ใหม่ในรูปแบบอื่นๆ ก็ทำได้โดยการเลือกเมนู | + | ปกติเมื่อเราเข้าโปรแกรมมาครั้งแรก จะปรากฎ Text Editor พร้อมกับ Form เปล่าๆมาคู่กัน สิ่งนี้เราเรียกว่าเป็น Project สำหรับการสร้าง Graphic User Interface (GUI) Application หรือ เรียกอีกอย่างว่า Form-based Application ครับ ซึ่งเป็น Default Project ของ Lazarus IDE อย่างไรก็ตาม หากเราต้องการสร้าง Project ใหม่ในรูปแบบอื่นๆ ก็ทำได้โดยการเลือกเมนู |
- | File >> New ... | + | Project >> New Project ... |
| | ||
จะปรากฎหน้าต่าดังรูปข้างล่างขึ้นมาครับ | จะปรากฎหน้าต่าดังรูปข้างล่างขึ้นมาครับ | ||
- | {{introduction:new_project.png}} | + | {{introduction:new_project2.png}} |
- | สำหรับการสร้าง Project ให้เราดูในกลุ่มชื่อ Project ครับ จากภาพ ในนี้มี Template ที่เราจะอาจได้ใช้บ่อยจริงๆไม่กี่ตัวครับ อาทิ เช่น Application, Simple Program, Program และ Library สำหรับรายละเอียดของแต่ละตัว มีดังนี้ | + | \\ |
+ | จากภาพ ในนี้มี Project ที่เราจะอาจได้ใช้บ่อยจริงๆไม่กี่ตัวครับ อาทิ เช่น Application, Simple Program, Program และ Library สำหรับรายละเอียดของแต่ละตัว มีดังนี้ | ||
- | ^ Template ^ Descriptions ^ | + | ^ Project ^ Descriptions ^ |
- | |Application| คือ การสร้าง Form-based Application นั่นเอง โดยปกติเมื่อเรากดเข้าโปรแกรมมาในตอนแรก Lazarus IDE จะสร้าง Application ตัวนี้ไว้ให้เราเรียบร้อยแล้ว| | + | |Application| คือ การสร้าง GUI Application หรือ Form-based Application นั่นเอง โดยปกติเมื่อเรากดเข้าโปรแกรมมาในตอนแรก Lazarus IDE จะสร้าง Application ตัวนี้ไว้ให้เราเรียบร้อยแล้ว| |
- | |Simple Program|คือ การสร้าง Console Application (หน้าจอเหมือน Dos) แบบเรียบง่าย คือ ไม่มีการใส่ unit หรือ Compiler DIrective ใดๆมาให้เราเลยในตอนเริ่มต้น\\ \\ อย่างไรก็ตาม การสร้าง Project แบบนี้มีข้อดี คือ เหมาะสำหรับการเขียนโปรแกรมเพื่อทดลองงานเล็กๆ หรือเขียนเพื่อเรียนรู้ตาม Tutorial| | + | |Simple Program|คือ การสร้าง Console Application (หน้าจอมืดๆเหมือน Dos) แบบเรียบง่าย คือ ไม่มีการใส่ unit หรือ Compiler Directive ใดๆมาให้เราเลยในตอนเริ่มต้น\\ \\ อย่างไรก็ตาม การสร้าง Project แบบนี้มีข้อดี คือ เหมาะสำหรับการเขียนโปรแกรมเพื่อทดลองงานเล็กๆ หรือเขียนเพื่อเรียนรู้ตาม Tutorial| |
|Program|คือ การสร้าง Console Application คล้ายกับ Simple Program แต่มีการใส่ unit ที่จำเป็นบางตัวมาให้ในตอนเริ่มต้น | | |Program|คือ การสร้าง Console Application คล้ายกับ Simple Program แต่มีการใส่ unit ที่จำเป็นบางตัวมาให้ในตอนเริ่มต้น | | ||
|Library|คือ การสร้าง Shared Library| | |Library|คือ การสร้าง Shared Library| | ||
\\ | \\ | ||
- | **หมายเหตุ** เราสามารถสร้าง Project ใหม่ได้อีกวิธีหนึ่ง นั่นคือการเลือกเมนู Project >> New Project ... \\ \\ | + | **หมายเหตุ** เราสามารถสร้าง Project ใหม่ได้อีกวิธีหนึ่ง นั่นคือการเลือกเมนู |
- | ในส่วนของ Module นั้น คือ การเพิ่ม object เข้ามาใน Project ของเราครับ ซึ่งหลักๆที่ใช้บ่อยก็คือพวก unit หรือ Form เป็นต้น อย่างไรก็ตาม เราสามารถเพิ่ม Unit หรือ Form ได้โดยวิธีที่ง่ายกว่านี้เพียงแค่ใช้เมนู | + | File >> New ... |
+ | |||
+ | จะปรากฎหน้าต่าดังรูปข้างล่างขึ้นมาครับ | ||
+ | |||
+ | {{introduction:new_project.png}} | ||
+ | |||
+ | สำหรับการสร้าง Project ให้เราดูในกลุ่มชื่อ Project ครับ จะมีให้เลือกคล้ายกันกับการสร้างแบบ New Project ... | ||
+ | |||
+ | ---- | ||
+ | =====การเพิ่ม Unit/Form===== | ||
+ | |||
+ | จากภาพข้างบน หลังจากที่เราเลือกเมนู File >> New ... จะสังเกตว่า มี Object อื่นให้สร้างนอกเหนือจาก Project ด้วยเช่นกัน ให้เราขึ้นมาดูในส่วนของ Module ครับ ส่วนนี้คือการเพิ่ม object เข้ามาใน Project ของเราครับ ซึ่งหลักๆที่ใช้บ่อยก็คือพวก unit หรือ Form เป็นต้น อย่างไรก็ตาม เราสามารถเพิ่ม Unit หรือ Form ได้โดยวิธีที่ง่ายกว่านี้เพียงแค่ใช้เมนู | ||
File >> New Unit | File >> New Unit | ||
File >> New Form | File >> New Form | ||
\\ | \\ | ||
- | + | ---- | |
- | ====การตั้งค่าเบื้องต้น==== | + | =====การตั้งค่าเบื้องต้น===== |
การตั้งค่า มี 2 แบบ คือ ตั้งค่าพื้นฐานสำหรับใช้งาน IDE กับตั้งค่าเฉพาะสำหรับ Project นั้นๆ | การตั้งค่า มี 2 แบบ คือ ตั้งค่าพื้นฐานสำหรับใช้งาน IDE กับตั้งค่าเฉพาะสำหรับ Project นั้นๆ | ||
\\ \\ | \\ \\ | ||
Line 63: | Line 75: | ||
{{introduction:project_options.png}} | {{introduction:project_options.png}} | ||
| | ||
- | ทุกครั้งที่เริ่ม Project ที่เป็นแบบ GUI ผมจะเข้ามาตั้งค่าในนี้เสมอครับ ซึ่งการตั้งค่า Project ที่ผมทำเป็นประจำทุกครั้ง สรุปได้ดังนี้ครับ | + | ทุกครั้งที่เริ่ม Project ที่เป็น Application ซึ่งเป็นการสร้าง GUI Application หรือ Form-based Application ขึ้นมานั้น สิ่งที่สำคัญมากๆก่อนการเริ่มใช้งาน ผมจะเข้ามาตั้งค่าในนี้เสมอครับ ซึ่งการตั้งค่า Project ที่ผมทำเป็นประจำทุกครั้ง สรุปได้ดังนี้ครับ |
- | * ในส่วนของ Project Option หน้า Application ตรง DPI Awareness เลือก "On (True)" ตรงนี้สำคัญสำหรับ Form-based Application เพราะระบบปฎิบัติการสมัยใหม่ มักจะทำการ scale up/down หน้าจอ กับโปรแกรมให้เข้ากัน ถ้าไม่มีในส่วนนี้ Form-based Application ของเราจะเบลอครับ และจะต้องไปปรับในการใช้งานอีกที | + | * ในส่วนของ Project Option หน้า Application ตรง DPI Awareness เลือก "On (True)" ตรงนี้สำคัญสำหรับ GUI Application เพราะระบบปฎิบัติการสมัยใหม่ มักจะทำการ scale up/down หน้าจอ กับโปรแกรมให้เข้ากัน ถ้าไม่มีในส่วนนี้ GUI Application ของเราจะเบลอครับ และจะต้องไปปรับในการใช้งานอีกที |
* ในส่วนของ Compiler Option หน้า Path ให้กด 2 ปุ่มตามภาพข้างล่าง จากนั้นให้กดปุ่ม OK | * ในส่วนของ Compiler Option หน้า Path ให้กด 2 ปุ่มตามภาพข้างล่าง จากนั้นให้กดปุ่ม OK | ||
{{introduction:build_mode_click.png}} \\ | {{introduction:build_mode_click.png}} \\ | ||
- | * เมื่อเราออกมาข้างนอก เลือกเมนูที่อยู่ด้านหน้าปุ่ม Run (สีเขียว) จะพบว่าจะมีโหมดในการ Run (Compile) มาให้เลือกภึง 3 โหมด คือ Default, Debug และ Release เหตุผลที่ต้องทำแบบนี้เนื่องจากการใช้งานทั่วไป Compiler จะรันโหมด Default ซึ่งทำให้ไฟล์ .exe ที่ได้นั้นใหญ่มากเนื่องจาก Compiler ได้เก็บข้อมูลการ Debug ไว้ในไฟล์ด้วย ดังนั้นกรณีที่เราไม่ต้องการดูข้อมูลการ Debug และต้องการไฟล์ที่เล็กลง ควรเลือกโหมด Release ในการ Run แทนเพื่อช่วยประหยัดพื้นที่ | + | * เมื่อเราออกมาข้างนอก เลือกเมนูที่อยู่ด้านหน้าปุ่ม Run (สีเขียว) จะพบว่าจะมีโหมดในการ Run (Compile) มาให้เลือกภึง 3 โหมด คือ Default, Debug และ Release เหตุผลที่ต้องทำแบบนี้เนื่องจากการใช้งานทั่วไป Compiler จะรันโหมด Default ซึ่งทำให้ไฟล์ .exe ที่ได้นั้นใหญ่มากเนื่องจาก Compiler ได้เก็บข้อมูลการ Debug ไว้ในไฟล์ด้วย ดังนั้นในกรณีที่เราไม่ต้องการดูข้อมูลการ Debug และต้องการไฟล์ที่เล็กลง ควรเลือกโหมด Release ในการ Run แทนเพื่อช่วยประหยัดพื้นที่ |
{{introduction:3_build_mode.png}} | {{introduction:3_build_mode.png}} | ||
+ | |||
+ | ---- | ||
+ | =====มารู้จักส่วนต่างๆใน IDE===== | ||
+ | แรกเริ่มเมื่อเราเปิดโปรแกรมขึ้นมา จะเจอหน้าต่างแบบนี้ | ||
+ | {{introduction:lazarus_gui_window2_1.png}} | ||
+ | |||
+ | ซึ่งก็คือการสร้าง Project แบบ Application หรือ ที่เป็น GUI Application นั่นเอง ผมขอใช้ภาพนี้ในการอธิบายส่วนประกอบต่างๆที่จำเป็นสำหรับใช้งาน IDE ละกันครับ \\ | ||
+ | |||
+ | ===1. LCL Components=== | ||
+ | LCL ย่อมาจาก Lazarus Component Library ซึ่งคล้ายกับ Visual Component Library (VCL) ของ Delphi นั่นเอง อีกทั้งการตั้งชื่อ หรือการเรียกใช้งาน property, function และ procedure ของ LCL ยังถูกออกแบบให้คล้ายคลึงกับ VCL เพื่อความง่ายสำหรับผู้ที่เคยใช้งาน Delphi มาแล้ว\\ | ||
+ | |||
+ | LCL Components จะถูกใช้สำหรับการสร้าง GUI Application ในส่วนของการใช้งานถือว่าง่ายมากครับ สามารถทำการ click ที่รูปภาพแล้ว ไป click ที่ Form ที่เราต้องการได้เลย เพียงแค่นี้ Component ที่เราเลือก จะถูกนำไปแปะไว้บน Form นั้น \\ | ||
+ | |||
+ | LCL Components มีทั้งแบบ Visual ที่แสดงผลเป็นรูปร่างบน Form และ Non-visual ที่ไม่แสดงบน Form ทั้งนี้ขึ้นอยู่กับการใช้งานของ Component นั้นๆ สำหรับรายละเอียดการใช้งานแต่ละ Component จะกล่าวถึงใน Standard Controls \\ | ||
+ | |||
+ | ===2. Object Inspector=== | ||
+ | เป็นส่วนที่จำเป็นมากสำหรับ GUI Application โดยหน้าต่างนี้ทำให้เราสามารถเข้าถึงและปรับแต่ง Property ต่างๆของ LCL Component ได้ ไม่ว่าจะเป็น ความกว้าง ความสูง ชื่อ เป็นต้น นอกจากนี้ยังสามารถเข้าไปสร้าง Event สำหรับ LCL Component ดังกล่าวได้อีกด้วย\\ | ||
+ | |||
+ | ===3. Form=== | ||
+ | คือ ส่วนที่ใช้ออกแบบหน้าตาของ Form สำหรับ GUI Application โดยเราจะนำ LCL Component ทั้งหลาย มาวางในตำแหน่งต่างๆจนเกิดเป็นหน้าตาโปรแกรมขึ้นมา \\ | ||
+ | |||
+ | ===4. Source Editor=== | ||
+ | คือ ส่วนที่เป็น Text Editor สำหรับ Project ทุกๆ Project \\ | ||
+ | |||
+ | ===5. Massage=== | ||
+ | คือ ส่วนที่รายงานการ Compile ว่ามี Error หรือ คำเตือนอะไรบ้าง ได้ผลการ Compile เป็นเช่นไร จะถูกระบุในส่วนนี้ทั้งหมด \\ | ||
+ | |||
+ | __**หมายเหตุ**__ - สำหรับ Project อื่นๆที่ไม่ใช่ GUI Application เช่น Simple Program หรือ Program เราก็จะไม่ได้ใช้งานในส่วนมที่ 1, 2 และ 3 |