tutorial:gui
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
|
tutorial:gui [2019/01/28 12:33] admin |
tutorial:gui [2019/01/28 16:19] admin |
||
|---|---|---|---|
| Line 5: | Line 5: | ||
| =====Program#1 HelloWorld on Form1: ===== | =====Program#1 HelloWorld on Form1: ===== | ||
| - | ตัวอย่างนี้เป็นการสร้างโปรแกรมที่มี LCL ชนิดที่เป็น Form และ Button อย่างละ 1 ตัว โดยตัวโปรแกรมจะทำงานเมื่อเรากดปุ่ม "Show Hello" และแสดงคำว่า "Hello World" บน Form1 | + | ตัวอย่างนี้เป็นการสร้างโปรแกรมที่มี LCL ชนิดที่เป็น Form, Button และ Label อย่างละ 1 ตัว โดยตัวโปรแกรมจะทำงานเมื่อเรากดปุ่ม "Show Hello" และแสดงคำว่า "Hello World" บน Form1 |
| 1. เปิดโปรแกรม Lazarus IDE ขึ้นมา จะเจอ Project ที่เป็น Form Application ซึ่ง คือ Form1 และ Source Code เริ่มต้นดังนี้ \\ | 1. เปิดโปรแกรม Lazarus IDE ขึ้นมา จะเจอ Project ที่เป็น Form Application ซึ่ง คือ Form1 และ Source Code เริ่มต้นดังนี้ \\ | ||
| __**หมายเหตุ**__ - ถ้าไม่เจอสามารถสร้างขึ้นเองได้จากการเลือกเมนู Project >> New Project .. >> Application) | __**หมายเหตุ**__ - ถ้าไม่เจอสามารถสร้างขึ้นเองได้จากการเลือกเมนู Project >> New Project .. >> Application) | ||
| + | {{tutorial:lazarus_gui_app1_1.png}} | ||
| + | <hidden Initial Source Code - Unit1> | ||
| + | <sxh delphi;> | ||
| + | unit Unit1; | ||
| - | จะสังเกตว่า Form1 ของเรา อยู่ในรูปแบบของ Unit นั่นเอง ไม่ใช่รูปแบบ Program | + | {$mode objfpc}{$H+} |
| + | interface | ||
| - | 2. กดเลือก LCL ที่ชื่อ TButton (ข้างบนเหนือ Source Editor) แล้วมาคลิ๊กที่ Form1 จะเป็นการแปะ Button1 ลงไปบน Form1 ให้สังเกตว่า Source Code จะเปลี่ยนแปลง เนื่องจากมีการเพิ่ม Source Code ที่เกี่ยวกับ TButton เข้ามาใน Form1 | + | uses |
| + | Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs; | ||
| + | |||
| + | type | ||
| + | TForm1 = class(TForm) | ||
| + | private | ||
| + | |||
| + | public | ||
| + | |||
| + | end; | ||
| + | |||
| + | var | ||
| + | Form1: TForm1; | ||
| + | |||
| + | implementation | ||
| + | |||
| + | {$R *.lfm} | ||
| + | |||
| + | end. | ||
| + | </sxh> | ||
| + | </hidden> \\ | ||
| + | |||
| + | จะสังเกตว่า Form1 ของเรา อยู่ในรูปแบบของ Unit นั่นเอง ไม่ใช่รูปแบบ Program | ||
| + | เพื่อความสะดวกในการทำงาน เราควร Save Project นี้ไว้ใน Folder ที่เราเตรียมไว้ | ||
| + | |||
| + | 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.txt · Last modified: 2019/03/14 10:58 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
