버튼 클릭 이벤트 시연 효과

이번 절에서는 버튼에 이벤트를 추가하는 방법을 배웁니다. 버튼을 클릭하면 코드에서 여러 가지 동작을 실행할 수 있습니다. 여기서는 두 가지 예시를 보여드릴 겁니다. 한 버튼을 누르면 버튼 텍스트가 바뀌고, 다른 버튼을 누르면 창을 닫는 방식입니다.

그래픽 인터페이스 프로젝트 새로 만들기

상단 메인 메뉴를 클릭합니다: Project（프로젝트）→ New Project（새 프로젝트）→ Application（응용 프로그램）（File（파일）→ New → Project → Application 경로로도 생성 가능）. 새 GUI 그래픽 프로그램이 생성됩니다.

혹은

생성 후 여러 창이 열립니다. 상단 메인 메뉴바, 왼쪽의객체 검사기(Object Inspector), 화면 대부분을 차지하는코드 편집기(Source Editor)입니다.

폼에 버튼 두 개 추가하기

상단 메뉴바 아래에 컨트롤 분류 탭 바가 있습니다

위 빨간색 네모가 컨트롤 분류 탭 바이며 탭별로 컴포넌트가 나뉘어 있습니다. 첫 번째는 Standard(표준 컨트롤), 두 번째는 Additional…

「Standard(표준 컨트롤)」탭이 선택되지 않았다면 마우스로 클릭해서 전환합니다;

버튼 아이콘(OK 문자가 적힌 직사각형)을 클릭한 뒤 Form1 폼 왼쪽 영역을 클릭하면 Button1이라는 이름의 버튼이 생성됩니다;

다시 표준 탭의 버튼 아이콘을 클릭하고 폼 오른쪽을 클릭하면 두 번째 버튼 Button2가 만들어집니다.

조작 방법이 헷갈린다면 이전 강의 영상을 참고하세요.

위 단계를 따라 버튼 두 개를 추가합니다

Button1 텍스트 설정 및 클릭 이벤트 작성

Button1을 한 번 클릭해서 선택하면 왼쪽 객체 검사기에 해당 컨트롤의 모든 속성이 표시됩니다:

이 설정 패널이 가려졌다면 컨트롤 바 화살표 버튼을 눌러 꺼내면 됩니다(단축키 F12로 폼/코드 화면 전환 가능).

첫 번째 버튼을 선택하면 왼쪽 패널 상단에 현재 선택된 컨트롤이 Button1이라고 표시되고, 패널 하단에는 속성, 이벤트 두 개의 탭이 존재합니다.

속성 탭: 버튼의 외형, 스타일, 크기 등 시각적 설정을 조절하는 곳입니다.

이벤트 탭: 버튼 클릭, 마우스 진입, 마우스 벗어남 등 상호작용 동작을 바인딩하는 곳입니다.

• 상단 Caption(제목) 속성을 찾아 기본값 Button1을 Press로 수정하고 Enter 키를 누르거나 빈 공간을 클릭하면 버튼 텍스트가 즉시 갱신됨;
• 객체 검사기의「Events(이벤트)」탭으로 전환. 여기에 버튼이 트리거할 수 있는 모든 이벤트(클릭, 마우스 진입, 마우스 벗어남 등)가 저장됨;
• OnClick(클릭 이벤트)를 찾고 오른쪽 세 점 ... 버튼을 클릭하면 편집기가 자동으로 코드 페이지로 이동하며 빈 클릭 함수를 생성함:

빈 영역을 클릭해서 수정을 확정하면 폼 위 버튼 텍스트가 변경됩니다.

버튼을 선택한 상태를 유지한 채 Events(이벤트) 탭으로 전환

이 탭에 버튼 기본 내장 모든 이벤트가 나열되며 원하는 동작을 바인딩할 수 있습니다. OnClick을 예로 들면 사용자가 마우스 왼쪽 버튼으로 클릭할 때 바인딩된 이벤트 메서드가 실행됩니다.

OnClick 행을 선택하고 오른쪽 ... 버튼을 클릭하면 빈 이벤트 함수가 생성됩니다.

begin과 end 사이에 한 줄 코드를 추가해 클릭 시 버튼 표시 텍스트를 바꾸는 기능을 구현합니다.

procedure TForm1.Button1Click(Sender: TObject);
begin
  Button1.Caption := 'Press again'; // 이 코드를 입력하세요
end;   Code language: JavaScript (javascript)

프로그램 실행 후 버튼을 클릭하면 상자 안 코드가 실행되고 Pascal 로직 코드 영역으로 진입해 각종 업무 로직을 구현할 수 있습니다. 대부분의 GUI 데스크톱 프로그램은 이 이벤트 기반 개발 방식을 사용합니다.

단축키 F12로 빠르게 폼 디자인 화면으로 돌아갑니다.

Button2 텍스트 설정 및 프로그램 종료 이벤트

Button2를 선택하고 객체 검사기에서 Caption 속성을 Exit로 수정합니다;

동일하게 OnClick 이벤트로 진입한 뒤 ...를 눌러 코드로 이동하고 창 닫기 명령을 작성합니다:

procedure TForm1.Button2Click(Sender: TObject);
begin
  Close; // 창을 닫고 프로그램 종료
end;Code language: JavaScript (javascript)

프로젝트 저장(수시로 저장하세요)

상단 메뉴에서 Project → Save Project As(프로젝트 다른 이름으로 저장)를 선택하고 먼저 폼 유닛 파일(확장자 .pas)을 저장합니다;

그 뒤 팝업 창이 뜨며 프로젝트 설정 파일(확장자 .lpi) 저장을 요청합니다.

주의: 유닛 파일 이름과 프로젝트 이름이 완전히 같으면 컴파일 시 「중복 식별자」 오류가 발생합니다

컴파일 및 프로그램 실행

실행 방식은 두 가지입니다:

• 메뉴 경로: Run(실행) → Run;
• 단축키: 그냥 F9 누르기. IDE가 자동으로 컴파일·링크를 진행하고 문법 오류가 없으면 완성 프로그램을 바로 실행합니다.

실행하면 순수 창이 팝업됩니다(디자인용 격자점 없음), 이것이 소프트웨어 메인 창입니다:

• Press 버튼 클릭 시 버튼 텍스트가 Press again로 바뀜;
• Exit 버튼 클릭 시 창이 닫히고 프로그램이 종료되며 자동으로 격자가 있는 디자인 화면으로 돌아와 코드를 수정할 수 있음.