GUI Application

ย่อมาจาก Graphic User Interface Application หรือ Form-Based Application คือ โปรแกรมที่มีการแสดงผลบนหน้าจอที่มากกว่า Console Application (หน้าจอมืดๆแบบ DOS) เช่น โปรแกรม Microsoft Office รวมไปถึง โปรแกรมหลายๆโปรแกรมที่เราใช้งานในปัจจุบัน

GUI Application ถือว่าเป็นไม้เด็ดจาก Lazarus IDE เพราะ สร้างได้ไม่ยาก ไม่ซับซ้อน ใช้งานได้รวดเร็ว ซึ่งในบทนี้ผมจะมาสอนวิธีการเขียน GUI Application อย่างง่ายให้ดูครับ

ก่อนที่เราจะไปยังขั้นตอนต่อไป มีศัพท์หลายตัวที่เราต้องรู้ก่อน ดังนี้ครับ

Event คือ Procedure หรือ Sub-program รูปแบบหนึ่ง ซึ่งถูกเรียกเมื่อมีเหตุการณ์ที่เกี่ยวข้องกับ Event นั้นๆ สิั่งที่เรียกว่า Event นี้ มีอยู่ในเฉพาะ GUI Application เท่านั้น

สำหรับ Console Application จะทำงานตามคำสั่งทีละบรรทัดไปเรื่อยๆ แต่สำหรับ GUI Application จะถูกออกแบบให้ทำงานบน Event ต่างๆแทน เช่น ขณะเปิดโปรแกรมมา ในขณะที่กำลังสร้าง Form ขึ้น จะมีการเรียก Event ที่ชื่อว่า OnCreate หลังจากนั้น จึงเป็น Event อื่นตามลำดับ เช่น หากเราคลิ๊กไปที่ Button จะมีการรัน Event ที่ชื่อว่า OnClick ของ Button นั้นขึ้น

ตัวอย่างนี้เป็นการสร้างโปรแกรมที่มี LCL ชนิดที่เป็น Form, Button และ Label อย่างละ 1 ตัว โดยตัวโปรแกรมจะทำงานเมื่อเรากดปุ่ม “Show Hello” และแสดงคำว่า “Hello World” บน Form1

1. เปิดโปรแกรม Lazarus IDE ขึ้นมา จะเจอ Project ที่เป็น Form Application ซึ่ง คือ Form1 และ Source Code เริ่มต้นดังนี้
หมายเหตุ - ถ้าไม่เจอสามารถสร้างขึ้นเองได้จากการเลือกเมนู Project » New Project .. » Application)

unit Unit1;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs;

type
  TForm1 = class(TForm)
  private

  public

  end;

var
  Form1: TForm1;

implementation

{$R *.lfm}

end. 

จะสังเกตว่า 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” (คือ 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