다음 이전 차례

3. GLADE를 이용한 텍스트 에디터 개발 - 단계적 접근

GLADE를 실행시키면 위에서 설명한 바와 같이 세개의 창이 뜬다. 여기에서는 이런 상황에서 다음과 같은 단계별 접근으로 위에서 정의된 기능을 가진 텍스트 에디터를 개발하는 모습을 살피도록 한다:

3.1 개발 첫번째 단계 - 바탕 윈도우

바탕 윈도우 - 생성

우선 텍스트 에디터의 바탕이 되는 창을 만들어야 한다. 그럴려면 위젯 팔레트 윈도우에서 다음 그림의 왼쪽 상단의 위젯을 클릭해서 만들 수 있다.

윈도우 위젯

그러면 다음 그림과 같은 바탕 창을 얻는다. 이 그림을 자세히 보면 사선 격자들이 촘촘히 회색으로 그려져 있는 것을 볼 수 있다. 이런 표시는 앞으로도 나오겠지만 무언가를 붙일 수 있는 곳이라는 얘기이다. 마치 접착식 앨범의 비닐을 들어 올리면 나타나는 접착제 사선과 같은 것이라고 생각할 수 있겠다.

바탕 윈도우

이제는 여기에다 필요한 위젯들을 붙여야 되겠다. 먼저 필요한 것들을 생각해보면 메뉴, 툴바, 텍스트 박스, 그리고 상태 바가 있겠다. 이것을 그냥 하나씩 하나씩 붙일 수 있을까. 바로 위의 그림을 자세히 보면 붙일 수 있는 접착제 부분은 커다랗지만 구획이 나누어져 있지 않다. 즉 하나의 객체만을 붙일 수 있다는 얘기가 된다. 그러므로 어떻게 해야 할 까?

바탕 윈도우 - 메뉴바 위젯 붙이기

답은 위에서 언급한 바 있는, 다음 그림과 같은 수직 박스라는 위젯을 사용하면 된다. 이것을 붙이면 그 그 위에 여러개의 접착 가능한 구획이 생기게 되어 여러가지 위젯들을 붙일 수 있게 된다.

수직 박스 위젯

이것을 클릭하면 마우스가 십자가 모양으로 바뀐다. 이 때 이 마우스 커서를 바탕 윈도우에 대고 클릭하면 다음 그림과 같이 몇 개의 수직 박스를 만들 것인가를 묻는 대화상자가 나타난다.

수직 박스 위젯 개수를 묻는 대화상자

여기서 우리는 4를 입력하자. 왜냐면 바탕 창에 붙이고자 하는 객체가 4개이기 때문이다. OK를 누르면 다음과 같이 바탕 창이 평등 분할되어 나타날 것이다.

수직 박스를 붙인 후의 바탕 윈도우 모습

자 이제는 이 네개의 구획 각각에다 메뉴바, 툴바, 텍스트 박스, 그리고 상태 바를 붙여 보도록 하자. 먼저 메뉴바를 붙이려면 다음 그림과 같이 생긴 메뉴바 widget을 위젯 팔레트 윈도우에서 클릭하여 선택한다.

메뉴 위젯

그리고 바탕 창 네 구획 중 가장 위에 있는 구획을 클릭한다. 그러면 바탕 화면은 다음과 같이 변한다.

메뉴 위젯을 붙인 후의 바탕 윈도우

이것을 자세히 보면 접착제가 발라져 있는 부분은 3개로 줄어든 것을 알 수 있다. 조금 전에 최상단에 붙인 메뉴 부분은 접착제가 아닌 것을 또한 알 수 있다. 그러나 이부분은 별로 메뉴 같아 보이지 않다. 왜냐면 실제로 메뉴를 입력하지 않았기 때문이다. 그렇다면 메뉴를 이제 넣어 보자.

바탕 윈도우의 조금 전에 붙인 메뉴를 클릭하면 프로퍼티 윈도우가 다음 그림처럼 나타난다. 이곳을 자세히 보면 다른 위젯을 클릭해서 선택할 때와는 다르게 메뉴 편집(Edit Menus...)이라는 버튼이 하나 더 있다. 이것을 클릭하자.

메뉴 편집 버튼

그러면 위에서 본 그림 5와 같은 화면이 뜬다. 여기에 다음 그림처럼 편집해서 넣도록 하자. 단 모두 기본적으로 제공되는 Stock Item을 사용해서 만든 것이다. 먼저 Add 버튼을 눌러서 하나의 아이템을 만든 뒤에 Stock Item 콤보 박스를 클릭해서 미리 마련된 아이템을 선택하면 조금 전에 만들어진 것이 원하는 것으로 바뀐다. 그리고 Name이 한글로 나올 경우, 이것은 나중에 알게 되겠지만 소스 생성 후 소스 내부에서 모두 깨지거나 밑줄로 표기되어 뭐가 뭔지 모르게 된다. 이 때는 Name을 적절한 것으로 바꾸자. 즉 새로운이라면 New으로 바꾸자. 그러면 자동으로 그 아래에 있는 Handler가 바뀐다. 정말 좋다. 그리고 왼쪽 리스트 창에 있는 Label에 해당하는 것들은 그 아래에 있는 방향성 있는 화살표 등으로 제어되는 것으로써 메뉴의 깊이 및 계층 구조를 꾸밀 때 사용된다.

메뉴 편집 예제

바탕 윈도우 - 툴바 위젯 붙이기

자 이제는 바탕 윈도우에 다음 그림과 같이 위젯 팔레트에 있는 툴바 위젯을 붙여 보도록 하자.

툴바 위젯

이것을 클릭하면 마우스 커서가 십자가 모양으로 변한다. 이것을 우리가 원하는 위치인 위에서 두번째 칸에 놓고 클릭한다. 그러면 다음과 같이 몇개의 툴바를 원하는가하는 대화 상자가 뜬다.

툴바의 버튼 수를 묻는 대화상자

여기에 원하는 개수(이 경우는 4개)를 입력하고 OK를 클릭하면 다음 그림 처럼 두번째 행이 4개의 새로운 접착판을 가진 것으로 변경되는 것을 볼 수 있다.

툴바를 붙인 후의 바탕 윈도우

자 이제는 이 새로 생긴 조그만 4개의 접착판에다 툴바버튼들을 집어 넣어야 한다. 그럴려면 다음 그림과 같이 위젯 팔레트에서 버튼 위젯을 선택해야 한다.

버튼 위젯

이것을 선택한 후 마우스를 바탕 윈도우 두번째 행 첫번째 접착판으로 가져 가면 커서가 십자가 모양으로 변한다. 이것을 클릭하면 다음과 같이 바탕 화면이 변한다.

한개의 버튼을 붙인 후의 바탕 윈도우

이 때 변경된 프로퍼티 윈도우를 자세히 보면 Icon 옆에 아래를 가르키는 콤보박스 버튼이 있다. 이것을 누르면 다음과 같은 미리 정의된 Stock Icon들이 나온다.

미리 준비된 버튼들

여기에 보이는 것 말고도 아래로 스크롤 하면 정말 많고 예쁜 아이콘들이 준비되어 있음에 놀랄 것이다. 이 중에 하나를 선택하자. 그리고 프로퍼티에서 Label 부분을 아이콘에 맞추어 바꾸도록 하자.. 그리고서 나머지 세개의 접착판들에 원하는 것을 넣으면 되겠다. 그러면 다음 그림과 같은 것을 얻는다.

툴바에 모든 버튼들을 붙인 후의 바탕 윈도우

바탕 윈도우 - 텍스트 박스 위젯 붙이기

다음은 세번째 행에다 다음과 같이 위젯 팔레트 윈도우에 있는 텍스트 박스 위젯을 선택하여 붙여 보도록 하자.

텍스트 박스 위젯

이것을 클릭한 후 마우스를 예의 바탕 윈도우 세번째 행으로 옮기면 커서가 십자가로 바뀐다. 클릭하자 그러면 다음 그림처럼 바탕 윈도우가 변한다.

텍스트 박스 위젯을 붙인 후의 바탕 윈도우

그런데 프로퍼티 윈도우를 보면 Editable이 디폴트로 No으로 되어 있다. 이것은 Yes로 변경해야만 나중에 텍스트를 입력할 수 있다. 그런데 전체적인 크기가 마음에 들지 않을 수 있다. 그런데 내부의 위젯 크기를 변경하는 것보다 바깥 바탕 윈도우의 크기를 조정하는 것이 좋다. 다음 그림 처럼 바탕 윈도우의 크기 속성을 변경하도록 하자. 그러면 나중에 실행 결과가 이에 맞춰질 것이며 나머지 이 바탕 윈도우가 품고 있는 객체들의 크기는 적절하게 배분될 것이다.

바탕 윈도우의 크기 조정

바탕 윈도우 - 상태바 위젯 붙이기

자 이제는 마지막으로 바탕 윈도우에 다음 그림과 같은 위젯 팔레트 윈도우에 있는 상태바 위젯을 선택해서 상태바 위젯을 붙여 보도록 하자.

상태바 위젯

이것을 선택한 후 마지막 남은 접착판 위에 마우스를 가져가면 마찬가지로 십자가 모양으로 커서가 변경된다. 클릭하면 다음과 같이 바탕 윈도우가 변한다.

모든 위젯들을 붙인 후의 바탕 윈도우

바탕 윈도우 - 만든 것을 저장하고 소스 생성 그리고 실행

이로써 우리는 바탕 윈도우를 만들고 이 위에 몇가지 GUI 객체들을 붙이고 약간의 조정을 해보았다. 어떤가? 그럴듯하지 않는가. 이제는 다음 그림 처럼 GLADE의 File메뉴에 있는 Save를 선택해보자.

GLADE의 파일 메뉴

그러면 다음 그림과 같은 Project Options라는 대화상자가 뜬다. 여기에 적절한 값을 입력하고 OK를 누르면 프로젝트가 저장된다. 단, 생성될 언어로는 C를 선택하도록 하자.

GLADE의 프로젝트 옵션 대화상자

그리고 위에서 본 File 메뉴의 Build Source Code을 선택하면 눈에 보이지 않지만 소스가 생성된다. 위의 프로젝트를 저장하는 곳에서 지정한 디렉토리에 가보면 src라는 디렉토리가 있는 데 여기에 모든 소스가 생성된다. 아쉽게도 바로 뭔가를 클리해서 생성된 소스를 가지고 실행 파일을 만드는 방법은 아직 없다. 그래서 어쩔수 없이 쉘을 통해서 실행 파일을 만들수밖에 없다. 프로젝트의 루트 디렉토리를 ls로 출력해보고 여기에 마련된 autogen.sh를 실행하면 환경 설정이 이루어진다.

ls명령과 autogen.sh실행 화면

그리고 나서 make을 실행하면 원하는 실행 파일을 얻을 수 있다. make의 결과는 src에 프로젝트 이름을 가진 실행 파일이 생기는 것이다. 이것을 실행한 결과는 다음과 같다.

첫번째 실행 결과

바탕 윈도우 - 실행 후 죽이기

이제 종료해보자. 보통 하듯이 오른쪽 위에 있는 닫기 버튼을 눌러도 우리가 만든 어플리케이션은 죽지 않는다. 아뿔사. 우리는 불사신을 만들어낸 것이다. 이제 이 불사신을 죽여보도록 하자. 그럴러면 이전에 얘기한 GTK 튜터리얼 섹션에 있는 시그널을 알아야 하고 가장 기본적인 delete_event라는 시그널을 알아야 한다. 이것은 다른 것이 아니고 실행 파일의 close 메뉴

이것은 창관리자가 붙인 메뉴를 말한다. 이것은 우리가 만든 어플리케이션의 메뉴와 다르다
를 선택하거나 title bar에서 닫기를 선택하면 X 윈도우 관리자가 실행 파일에게 전하는 이벤트이다. 이것을 받아서 처리하려면 다음 그림과 같이 바탕 윈도우의 프로퍼티 윈도우의 여러 탭들 중에서 시그널 탭에서 시그널 핸들러 이름과 함께 등록해주어야 한다.

바탕 윈도우 window1의 delete_event

그러면 다음 그림과 같이 등록될 것이다.

등록 후의 모습

여기서 우리는 자동으로 시그널 핸들러 이름이 on_window1_delete_event가 되는 것을 볼 수 있다. 이것을 그대로 쓰자. 이것까지 그리고 생성될 내부 소스에 시그널과 시그널 핸들러를 연결시켜주는 것까지는 GLADE가 해주는 것이다. 자 이제 위의 스텝처럼 소스를 생성해보자. 그리고 이 시그널 핸들러 안에서 우리는 해야 할 일을 해보도록 하자. 다른 것은 아니고 다음과 같이 src/callbacks.c안에 있는 위의 on_window1_delete_event 함수 내부에 다음과 같이 입력하면 된다. 

gboolean
on_window1_delete_event (GtkWidget *widget, GdkEvent *event, 
                gpointer user_data)
{
        gtk_exit( 0 );
        return FALSE;
}
그리고서 make하고(다시 autoget.sh를 실행할 필요는 없다. 그러나 한번 소스를 재생성할 때마다 make시 모든 코드가 재컴파일될 것이다) 실행해보도록 하자. 이제 종료하면 제대로 종료될 것이다.

앞으로 우리는 GLADE 의 작업 대상이 되는 객체를 폼, 또는 템플릿이라고 부르자. 그리고 실제 실행된 후의 결과는 그 결과의 속성대로 부르기로 하자. 예를 들어서 바탕 윈도우 폼 에서 무엇 무엇을 작업하면 바탕 윈도우에 어떤 어떤 효과가 나타날 것이다라는 식으로 표현하기로 하자.

3.2 개발 두번째 단계 - about 대화상자

많은 gnome 프로그램들은 표준화된 룩앤필을 갖는다. 이 중에서도 메뉴, 툴바, 상태바, 그리고 about 대화 상자가 두드러진다. 물론 다른 것도 있다. 예를 들면 색상표 대화 상자, 파일 선택기(윈도우즈의 File Open, Save, Save As와 유사) 등이 그것이다. 우리는 여기서 about 대화 상자를 만들고 이것을 넣어 보도록 하자.

about 대화상자 - 대화상자 만들기

대화 상자를 만들 때 GTK+가 제공하는 대화상자 위젯을 그대로 사용해서 그 위에 다른 여러 위젯들을 붙여서 만들어도 되고, gnome이 제공하는 다음과 같은 위젯을 사용하여 더 쉽게 만들 수도 있다. 우리는 이것을 택해보도록 하자.

GNOME의 About 대화상자 위젯

이것을 선택하면 다음고 같은 대화상자가 나타난다.

GNOME의 About 대화상자 초기 모습

우리는 이 때, 같이 변한 프로퍼티 윈도우의 Copyright, Author, Comments, 그리고 Logo를 바꾸어서 이 about 대화상자를 단장시켜 보도록 하자. 먼저 Copyright와 Author, Comments는 다음 그림처럼 변경한다.

GNOME의 About 대화상자 손질후의 모습

실제 똑같이 해보시면 알겠지만 이들 내용이 많아지면 대화상자의 전체 크기 등이 자동으로 늘어들었다 줄어들었다 한다.

그리고 마지막으로 Logo를 지정해보도록 하자. 이렇게 하려면 Logo 옆의 편집박스에 직접 패스를 입력해도 되고 그 옆에 있는 생략형을 클릭해서 파일 선택 대화상자를 불러 이것을 통해서 선택해도 된다.

GNOME의 About 대화상자에 로고를 넣은 모습

자 이제 프로젝트를 저장한다.

about 대화상자 - 대화상자 띄우기

프로젝트를 저장한 뒤 소스를 만들어 다시 make를 해도 우리는 이상한 결과를 만난다. 즉 바탕 윈도우와 조금 전에 만든 about 대화상자가 동시에 튀어 나온다는 것이다. 어떻게 하면 되겠는가? 어디엔가에서 우리가 원치 않는 이런 액션을 수행하는 코드가 있을 것이다. 다름 아닌 main.c의 main() 함수 내이다. 그렇다면 이곳을 보고 다음 세 라인을 없애 보자(지워도 되고 C comment처럼 막아도 된다.) 

GtkWidget *about1;
.......
about1 = create_about1 ();
gtk_widget_show (about1);

원하는 대로 about 대화상자가 실행 파일을 실행하자 마자 뜨는 일은 없어졌다. 그래도 문제는 남는다. 어떻게 원할 경우 즉, 사용자가 메뉴나 툴바를 통해서 about를 선택할 경우 우리의 about 대화상자를 띄우는 방법은 무엇인가? 다음과 같은 코드를 비어 있는 메뉴 About에 대한 핸들러 on_About_activate(callbacks.c에 존재) 안에 넣어 주면 된다. 

GtkWidget *about1;

about1 = create_about1_dialog ();
gtk_widget_show (about1);
위에서 지웠던 코드이다. 이것을 원하는 곳에 옮긴거나 다름없다. 자 프로젝트를 저장하고 make한 후 실행 파일을 만들어 확인해보자. About 버튼을 눌렀을 경우에도 이와 동일한 효과를 얻으려면 바탕 윈도우의 툴바에서 About 버튼을 선택한 뒤 프로퍼티 윈도우의 시그널 탭에서 위와 같이 시그널 핸들러를 등록하자(다음 그림 참조). 그리고 나서 이 핸들러 안에 메뉴와 동일한 코드를 넣어 주면 된다(아니면 공통 함수를 만들어 이를 호출해도 되고).

About 버튼의 시그널

그런데 이 것이 제대로 실행된다 하더라도 이상한 점이 있다. 즉 우리가 넣었던 로고가 제대로 출력되지 않는다는 것이다. 왜 그럴까? GLADE는 만들어지는 어플리케이션의 pixmap 디렉토리의 디폴트를 "/usr/share/pixmaps" 아래 어플리케이션 이름으로 설정한다. 정확하게 말하면 gnome-config --datadir의 결과값을 얻어서

이것은 대개 "/usr/share" 이다
여기에 "pixmaps" 와 어플리케이션 이름을 덧붙인 것이 로고 등 그림 파일이 저장되는 위치가 된다.

그러므로 사용자가 복사를 하든지 아니면 루트 권한으로서 make install 하면 로고 등 그림 파일들이 위의 디레토리로 복사한다. 그러면 여기에 있는 파일이 사용되어 About 대화상자의 그림이 보이게 될 것이다.

about 대화상자 - 대화상자 없애기

이렇게 해서 만들어진 about 대화상자는 사용자가 메뉴나 툴바를 통해서 띄울 수 있다. 그리고 이 대화상자의 확인 버튼을 누르면 언제든지 닫을 수 있다.

3.3 개발 세번째 단계 - file open 대화상자

먼저 다음 파일 선택 대화상자 위젯을 "위젯 윈도우"-"GTK+ Basic 패널" 에서 클릭하면 프로젝트에 추가된다.

파일 선택 대화상자 컨틀롤

이렇게 하면 자동으로 "src/interface.c"에 create_fileselection1 라는 함수가 생기고 여기에 ok_button1와 cancel_button1 버튼들이 만들어져 붙여진다.

이 대화상자가 적절한 사용자 요구에 대해서 화면에 디스플레이되도록 설정하려면 다음과 같이 하자.

메뉴와 연결하기

바탕 윈도우 폼에서 메뉴를 선택하자. 그러면 프로퍼티 윈도우의 Widget 탭에 Edit Menus... 라는 버튼이 보일 것이다. 이것을 클릭하여 Menu Editor 윈도우를 부른 뒤 File 메뉴의 Open 서브 메뉴에 대한 핸들러 이름을 확인한다. 대개 on_Open_activate 일 것이다. 우리는 이 핸들러

callbacks.c 에 있다
안에 file open 대화 상자를 부르는 코드를 넣어야 한다. 다음과 같이 하자. 
void
on_Open_activate  ( GtkMenuItem   *menuitem,
                    gpointer      user_data)
{
    /* 추가 시작 */
    GtkWidget *open_file;
    open_file = create_fileselection1();
    gtk_widget_show (open_file);
    /* 추가 끝   */
}

툴바 버튼과 연결하기

메인 윈도우의 Open 버튼을 클릭하여 선택한 후 속성 윈도우의 Signals 탭에서 clicked 핸들러를 등록한다. 그리고 Build 버튼을 누른다. 그러면 callbacks.c 에 해당 핸들러 함수의 바디만 추가될 것이다. 대개 Open 버튼은 툴바에서 두번째이므로 on_button2_clicked()

이것도 callbacks.c 에 있다
이 될 것이다. 여기에도 위의 항목과 같은 세 라인을 추가하자.

그러면 Open 버튼을 클릭할 때마다 다음과 같은 파일 선택 대화상자가 나올 것이다.

실행후 파일 선택 대화상자

자 이제는 이 대화 상자와 인터페이스를 해야 한다. 사용자가 확인 버튼을 누르면 입력된 파일을 가져오고 대화상자를 종료하며, 취소 버튼을 누르면 그냥 대화상자를 종료하자.

자 이제 각 버튼 시그널 핸들러들을 등록해보자.

문제 및 사전 지식

  1. 바탕 윈도우에서 새로운 대화상자를 위의 코드처럼 생성하였는 데, 그 결과 위젯에 대한 정보, 즉 위젯 포인터를 따로 저장하지 않았다. 이 것을 알아야 바탕 윈도우나 핸들러에서 대화상자를 닫거나 선택된 파일에 대한 정보를 얻어 올 수 있다. 결과적으로 대화상자에 대한 조작을 처리할 때, 전역변수 다른 방법을 통해서 대화상자 포인터를 알아내야 한다.
  2. 선택된 파일은 gtk_file_selection_get_filename (GTK_FILE_SELECTION(widget_pointer))) 의 리턴값인 문자열이다.
  3. gtk_signal_connect() 함수로 시그널과 시그널 핸들러를 연결할 때 마지막 파라미터로 void *를 말하는 gpointer 형 값을 줄 수 있고 받는 쪽, 즉 시그널 핸들러 쪽에서도 gpointer 형의 값을 받는다.
  4. 시그널과 시그널 핸들러를 연결할 때 gtk_signal_connect_object 를 쓸 수도 있다. 이 함수는 다른 객체의 콜백 함수를 시그널 핸들러로 연결할 때 사용된다. 그리고 이 함수는 표준 함수(예: gtk_widget_show 등)를 시그널 핸들러로 연결할 때 유용하다. 이 함수의 네번째 파라미터는 연결되는 시그널 핸들러의 첫번째 파라미터로 전달된다.
  5. GLADE 는 대화상자의 버튼에 대한 핸들러를 개발자가 추가할 때 Data 또는 Object 를 쓰지 않으면 gtk_signal_connect() 라는 함수만을 써서, 마지막 파라미터로는 무조건 NULL 을 주고서 등록한다. 그러나 Data 를 사용하면 마지막 파라미터로써 지정된 값을 사용하여 생성하며 Object 를 사용하면 gtk_signal_connect_object() 함수를 쓰며 마지막 파라미터로 Object 에서 지정한 것을 쓴다. 그리고 After 버튼을 클릭하면 gtk_signal_connect_after() 를 사용하여 시그널을 등록한다.
  6. GLADE 는 취소 버튼을 디폴트로 만든다.

확인 버튼 시그널 핸들러

먼저 대화상자(여기서는 fileselection1) 템플릿이 화면에 떠있지 않으면 GLADE 메인 윈도우에서 해당 대화상자를 더블클릭하여 화면에 띄운다. 그리고 프로퍼티 윈도우를 띄운뒤, 대화상자의 확인 버튼을 누르면 이 버튼에 대한 프로퍼티를 보여줄 것이다. 이 프로퍼티 윈도우의 시그널 탭에서 다음 그림처럼 핸들러를 추가하자. 그리고 Data 부분에 fileselection1 을 넣도록 하자(다음 그림 참조). 그러면 gtk_signal_connect() 함수 네번째 파라미터에 이 값을 GLADE 가 넣을 것

물론 GLADE 메인 윈도우에서 Build 를 클릭해야 한다
이다.

확인 버튼 시그널 핸들러 등록

이후 interface.c 에 다음과 같은 라인이 추가됨을 확인할 수 있다. 

gtk_signal_connect (GTK_OBJECT (ok_button1), "clicked",
                    GTK_SIGNAL_FUNC(on_ok_button1_clicked),
                    fileselection1);

취소 버튼 시그널 핸들러

취소 버튼 시그널 핸들러는 확인 버튼 시그널 핸들러와 비슷하게 등록하되 프로퍼티 윈도우/시그널 탭의 시그널 핸들러 등록 콤보(다음 그림 참조)를 클릭하여 gtk_widget_destroy() 라는 스톡(표준, 내장) 핸들러를 선택하여 등록하자. 그리고 Object 부분에는 fileselection1 을 넣도록 하자(다음 그림 참조). 이렇게 하면 gtk_signal_connect() 함수 대신에 gtk_signal_connect_object() 라는 함수를 사용하며 이 함수의 네번째 파라미터에 NULL 아닌 조금 전에 넣어준 값을 GLADE 가

물론 GLADE 메인 윈도우에서 Build 를 클릭해야 한다
넣는다.

취소 버튼에 대한 핸들러 등록

위의 그림은 내용이 다 보이라고 디폴트로 나오는 것을 조금 늘린 것이다.

그러면 interface.c 에 다음과 같은 라인이 추가됨을 확인할 수 있다. 

gtk_signal_connect_object (GTK_OBJECT (cancel_button1), "clicked",
                           GTK_SIGNAL_FUNC (gtk_widget_destroy),
                           fileselection1);

취소 버튼의 경우는 그대로 놔두어도 무방하지만 확인 버튼의 경우 시그널 핸들러에 조금 코드를 추가하여야 사용자가 무엇을 선택했는지를 파악할 수 있다. 다음과 같이 추가하면 된다: 

void
on_ok_button1_clicked (GtkButton *button,
                       gpointer user_data )
{
    /* 추가 시작 */
    GtkWidget *open_file = (GtkWidget *)user_data;
    g_print ("%s\n", gtk_file_selection_get_filename (GTK_FILE_SELECTION
             (open_file)));
    gtk_widget_destroy( (GtkWidget *)open_file );
    /* 추가 끝   */
}

우선은 선택된 파일을 텍스트로 터미널에 출력하는 것으로 이 섹션의 얘기를 끝내도록 하자. 나중에 이 값을 활용하기로 하고.

3.4 개발 네번째 단계 - font selection 대화상자

먼저 다음 폰트 선택 대화상자 위젯을 "위젯 윈도우"-"GTK+ Basic 패널" 에서 클릭하면 프로젝트에 추가된다.

폰트 선택 대화상자 컨틀롤

위에서 본 파일 선택 대화상자와 거의 모든 면에서 동일하기 때문에 많은 부분을 생략한다. 그러나 사용자가 확인이나 적용을 눌렀을 경우 사용자가 선택한 내용을 얻어오는 부분은 여기서 다루기로 한다. 이런 역할을 하는 함수는 파일선택과는 달리 1개가 아니라 3개정도 있다.

  1. gtk_font_selection_dialog_get_font()
  2. gtk_font_selection_dialog_get_font_name()
  3. gtk_font_selection_dialog_get_preview_text()

세번째는 특수한 경우에(예를 들면 사용자가 그림에 넣을 텍스트를 선택하는 경우 등) 쓰일 것으로 보인다. 첫번째와 두번째는 함수 이름들이 가르켜주는 바와 같다. 다만 첫번째는 GdkFont 포인터를 리턴하고 두번째는 이름만 리턴한다.

확인 버튼에 대해서 위의 섹션에서 한 것과 비슷하게 하되 다음과 같이 선택 대상 정보를 얻는 부분을 추가하자. 

void
on_ok_button2_clicked (GtkButton *button,
                               gpointer  user_data)
{
    /* 추가 시작 */
    GtkWidget *font_select = (GtkWidget *)user_data;
    GdkFont *gdk_font = NULL;
    gdk_font = gtk_font_selection_dialog_get_font(
                   GTK_FONT_SELECTION_DIALOG(font_select));
    g_print ("type : %s\n", gdk_font->type ==
             GDK_FONT_FONT ? "font" : ( gdk_font->type ==
             GDK_FONT_FONTSET ?  "fontset" : "unkonwn") );
    g_print ("ascent : %d\n", gdk_font->ascent );
    g_print ("descent : %d\n", gdk_font->descent);
    g_print ( "name = %s\n", 
        gtk_font_selection_dialog_get_font_name( 
            GTK_FONT_SELECTION_DIALOG(font_select)) );
    gtk_widget_destroy( (GtkWidget *)font_select );
    /* 추가 끝  */
}

이 폰트 선택 대화상자를 띄우는 메뉴를 하나 추가하여 이 대화상자를 구동시켜보자( 메뉴 에디터를 활용하자).

실행후 결과는 다음과 같다(오른쪽 터미널에 찍힌 내용을 주목하자).

폰트 선택 대화상자 실행 화면

3.5 개발 다섯번째 단계 - text area 제어

자 이제 텍스트 영역을 제어해보자. 기본적으로 텍스트 영역 위젯 자체가 텍스트 입력 기능, 입력된 텍스트의 선택 기능, 방향키 및 백스페이스 키 기능 등을 지원한다. 그리고 Del 키는 커서 뒤 문자 하나를 지우며 마우스 선택 후 Del 키는 선택된 영역을 모두 지운다. 이것은 GtkText 라는 위젯으로 지원된다. 그리고 이 위젯은 GtkEditable 위젯으로부터 승계된 것이다.

그러면 여기에 복사/자르기/붙이기 기능을 넣어보도록 하자.

복사

우리는 void gtk_editable_copy_clipboard(GtkEditable *editable); 함수를 사용하여 선택된 영역을 클립보드로 복사할 수 있다. 그래서 편집/복사 메뉴를 선택했을 때 구동되는 시그널 핸들러 on_Copy_activate() 안에 다음과 같은 내용을 넣어보자. 

gtk_editable_copy_clipboard( (GtkEditable *)gTextArea );

그러나 먼저 GtkText 포인터형 전역 변수 gTextArea 가 선언되고 우리의 바탕 윈도우에 있는 텍스트 영역을 가리키도록 정의되어 있어야 한다. 그러므로 callbacks.c 에 GtkText *gTextArea 라고 전역 변수 선언을 한다. 그리고 callbacks.c 에 focus_in_event 시그널에 대한 핸들러를 만들고 이 안에 다음과 같은 코드를 추가하자

interface.c 에 위의 전역변수를 선언하거나 이 전역변수 초기화를 넣는다면 문제가 날 수 있다. 왜냐면 GLADE 는 interface.c 는 대개 함수 몸체 코드가 들어 있는 create_xxx 과 같은 함수들을 넣고 이는 개발자가 GLADE 메인 윈도우의 Build 를 누를 때마 새로이 갱신되어 개발자 커스터마이즈 코드가 유실되기 때문이다. 대신 callbacks.c 에 있는 내용들은 주로 시그널 핸들러들이며 interface.c 에 비해서 유실되는 것이 거의 없다. 그래서 추후 GLADE 의 Build 에 의해서 소스가 새로 갱신될 때, 영향을 받지 않는 것을 필요로 한다면 callbacks.c 에 넣는 것이 좋겠다. 그러나 쉽게 하는 방법인 전역 변수를 써야 한다면 Build 하지 않는 방향으로 해도 좋다.
: 

gboolean
on_text1_focus_in_event(GtkWidget *widget,
                        GdkEventFocus *event,
                        gpointer user_data)
{
        /* 추가 시작 */
    g_print( "on_text1_focus_in_event() start\n" );
    if ( gTextArea == NULL )
        gTextArea = (GtkText *)user_data;
        /* 추가 끝   */
    return FALSE;
}

GTK 내부적으로 텍스트 영역의 선택 영역 복사에 대해서 Ctrl-C 를 단축키로 할당해 놓고 있다.

자르기

우리는 void gtk_editable_cut_clipboard(GtkEditable *editable); 함수를 사용해서 선택된 영역을 클립보드로 잘라 넣을 수 있다. 다음과 같이 편집/자르기 메뉴를 선택했을 구동되는 시그널 핸들러 on_Cut_activate() 안에 다음과 같은 내용을 넣어보자. 

gtk_editable_cut_clipboard( (GtkEditable *)gTextArea );

GTK 내부적으로 텍스트 영역의 선택 영역 자르기에 대해서 Ctrl-X 를 단축키로 할당해 놓고 있다.

붙이기

우리는 void gtk_editable_paste_clipboard(GtkEditable *editable); 함수를 사용해서 클립보드에 있는 내용을 현재 커서 위치로 넣을 수 있다. 다음과 같이 편집/붙이기 메뉴를 선택했을 구동되는 시그널 핸들러 on_Paste_activate() 안에 다음과 같은 내용을 넣어보자. 

gtk_editable_paste_clipboard( (GtkEditable *)gTextArea );

GTK 내부적으로 텍스트 영역의 선택 영역 붙이기에 대해서 Ctrl-P 를 단축키로 할당해 놓고 있다.

이제는 파일을 읽어서 텍스트 영역으로 읽어들이고, 파일에 저장해보도록 하자.

파일 읽기

위의 파일 선택 대화 상자 섹션에서 선택된 파일을 읽어서 우리의 어플리케이션 텍스트 영역에다 디스플레이해보자.

다음과 같이 파일 Open 대화상자를 구동한 후 사용자가 확인 버튼을 눌렀을 때 작동되는 시그널 핸들러 on_ok_button1_clicked() 에다 파일을 읽어서 텍스트 영역에 넣는 코드를 추가해보자. 

void
on_ok_button1_clicked (GtkButton *button,
                       gpointer user_data )
{
    /* 추가 시작 */
    GtkWidget *open_file = (GtkWidget *)user_data;
    gchar *file_name =  gtk_file_selection_get_filename 
        (GTK_FILE_SELECTION(open_file));
    FILE *infile = NULL;

    g_print ("%s\n", file_name );
    /* 텍스트 영역 락킹 */
    gtk_text_freeze (GTK_TEXT (text));
    infile = fopen(file_name, "r");
    if (infile) {
        char buffer[1024];
        int nchars;
         
        while (1) {
            nchars = fread(buffer, 1, 1024, infile);
            gtk_text_insert (GTK_TEXT (gTextArea), NULL, NULL,
                NULL, buffer, nchars);
             
            if (nchars < 1024)
                break;
        }
        fclose (infile);
     }

     /* 텍스트 영역 락킹 해제 */
     gtk_text_thaw (GTK_TEXT (text));

     gtk_widget_destroy( (GtkWidget *)open_file );
     /* 추가 끝   */
}

이 코드는 현재 삽입 포인트(current insert point) 뒤에다 텍스트를 추가하는 것이므로 파일 내용을 넣기전에 텍스트 영역에 어떤 내용이 있었다면 그 이후에 파일 내용이 들어갈 것이다.

위에서 새로 사용된 GTK 함수는 다음과 같다.

  1. gtk_text_insert() - 텍스트 영역의 현재 커서 이후에 주어진 버퍼의 내용을 채운다.
  2. gtk_text_freeze(), gtk_text_thaw() - 텍스트 영역을 락킹하고 언락킹한다.

파일 저장

이제는 현재 텍스트 영역의 내용을 파일로 써보자. 그럴려면 텍스트 영역 전체를 추출해야 한다. 텍스트 영역 일부를 추출하는 함수는 gtk_editable_get_chars( GtkText *editable, gint start_pos, gint end_pos); 이다. 여기서 start_pos, end_pos 는 0부터 시작하는 위치 정보이다. 그리고 보조 함수로써 텍스트 영역의 전체 길이를 구하는 함수 gtk_text_get_length( GtkText *gtktext ); 가 있다. 이들을 이용해서 파일에 저장해보기로 하자.

먼저 Save 대화 상자를 위의 파일 선택 대화상자에서 했던 것처럼 추가하자. 그리고 사용자가 확인 버튼을 누르면 구동되는 시그널 핸들러인 on_ok_button3_clicked() 함수 안에 다음과 같은 코드를 넣어 보자: 

    GtkWidget *save_file = (GtkWidget *)user_data;
    gchar *file_name =  gtk_file_selection_get_filename 
        (GTK_FILE_SELECTION(save_file));
    FILE *outfile = NULL; 
    int ntotal = gtk_text_get_length( gTextArea );
    int nchars;
    gchar *buffer = NULL;
    gint nEnd = ntotal > 1024 ? 1024 : ntotal;
    gint nStart = 0;

    g_print ("save file name : %s\n", file_name );
    g_print ("ntotal =  %d\n", ntotal );

    /* 텍스트 영역 락킹 */ 
    gtk_text_freeze (GTK_TEXT (gTextArea));
    outfile = fopen(file_name, "w+");
    if (outfile) {
        buffer = gtk_editable_get_chars( (GtkEditable *)gTextArea, 
                0, nEnd );
        nchars = fwrite(buffer, 1, nEnd, outfile);
        g_free( buffer );
        while (nEnd < ntotal) {
            nStart = nEnd;
            nEnd = (nEnd + 1024) < ntotal ? nEnd + 1024 : ntotal;
            buffer = gtk_editable_get_chars( (GtkEditable *)gTextArea, 
                nStart, nEnd );
            g_print( "when iter : nStart=%d:nEnd=%d:buffer=%s\n", 
                    nStart, nEnd, buffer );
            nchars = fwrite(buffer, 1, nEnd-nStart, outfile);
            g_free( buffer );
        }
        fclose (outfile);
     }
     /* 텍스트 영역 락킹 해제 */
     gtk_text_thaw (GTK_TEXT (gTextArea));

     gtk_widget_destroy( (GtkWidget *)save_file );

여기서 한가지 주의할 것은 GTK 계열의 함수들이 한글을 모두 2-byte 문자가 아닌 1-byte 문자로 처리한다는 것이다. 반면에 fwrite 는 2-byte 문자를 2-byte 그대로 처리한다. 그래서 이런 오차로 한글을 파일로 저장하면 유실이 발생한다.

그리고 g_free 함수는 gtk_editable_get_chars() 함수를 호출하여 얻은 gchar 포인터에 대해서 호출하여 리소스를 반환하는 함수로써 반드시 이렇게 리소스를 반환하여야 한다고 한다(GTK 매뉴얼 참조).

마지막으로 폰트를 바꾸어 디스플레이 해보자.

폰트 변경 후 디스플레이

폰트를 변경해서 디스플레이할려면 먼저 폰트 선택 대화상자에서 확인을 눌렀을 경우 이에 대하여 구동되는 시그널 핸들러에서 시작해야 한다. 대략적으로 설명하면 이 핸들러에서 해야 할 일은, 전체 텍스트를 얻고 텍스트 영역을 모두 지운 다음 사용자가 선택한 폰트를 이용해서 gtk_text_insert() 함수를 호출하는 것이다. 이 함수의 폰트 파라미터에다 NULL을 주면 디폴트 폰트를 사용한다. 다음 소스를 시그널 핸들러(예: on_ok_button2_clicked())의 예의 소스(위의 섹션 참조)마지막에 추가하도록 하자: 

        ntotal = gtk_text_get_length( (GtkText *)gTextArea );
    /* 텍스트 획득 */
    text_value = gtk_editable_get_chars( 
            (GtkEditable *)gTextArea, 0, ntotal );
    /* 텍스트 모두 지우기 */
    gtk_editable_delete_text( (GtkEditable *)gTextArea, 0, ntotal );
    gtk_text_insert( (GtkText *)gTextArea, gdk_font, NULL, NULL,
            text_value, ntotal );
    g_free( text_value );

폰트 변경후의 실행화면은 다음과 같다.

폰트 변경 후의 실행화면

이후에 입력되는 모든 텍스트가 지정된 폰트로 디스플레이된다. 단 한가지 문제는 정확한 threshold 값은 모르겠지만 커다란 폰트(예: 72pt)로 디스플레이가 안된다.

3.6 개발 여섯번째 단계 - 상태바 제어

상태바는 GLADE 로 붙이면 GtkStatusbar 라는 위젯이 사용된다. 여기에 메시지를 출력하려면 guint gtk_statusbar_push(GtkStatusbar *statusbar, guint context_id, const gchar *text); 라는 함수를 사용하면 된다. 예를 들어서 마우스가 툴바 버튼 중 Open 버튼 위에 있을 때 상태바에 "파일 읽기" 라는 메시지를 출력해보자. 그리고 마우스가 이 버튼을 떠날 때 상태바에서 메시지를 지우도록 하자.

우선 해야 할일이 몇가지 있다. 첫번재 위의 push 함수의 첫번째 파라미터를 전역변수로 관리해야 한다. 그럴려면 다음과 같이 interface.c 에다 전역변수를 다음과 같이 선언하고, 

GtkStatusBar *gStatusBar = NULL;

create_window1() 함수내에서 상태바 생성 후 생성된 것에다 이 전역변수를 정의하자

솔직히 얘기하면 전역변수를 안쓰고 상태바의 포인터를 획드하는 방법을 찾아야 했으나 게을러서 나중으로 미룬다. 다른 GNOME 기반 소스들을 보면 대개 GLADE를 이용하지 않은 듯 보이고 이들은 전역변수가 아니면 gnome 상태바를 그냥 쓰는 경우가 많았다
. 

gStatusBar = statusbar1;

두번째로 해야 할 일은 마우스 이동을 주시해서 Open 버튼 위로 왔을 때 발생되는 enter 시그널을 잡아 처리하는 시그널 핸들러를 등록해야 한다. 이것은 위에서 많이 해 보았으므로 생략한다. 그리고 마우스가 이 버튼을 떠날 때도 시그널을 잡아 시그널 핸들러를 등록해야 한다. 이것도 역시 생략한다.

두가지 일이 끝났다면 먼저 callbacks.c 에 위의 전역변수를 extern 으로 다음과 같이 선언하자. 

extern GtkStatusbar gStatusBar;

그리고 마우스 enter 시그널 핸들러에다 다음과 같은 코드를 넣자. 

gtk_statusbar_push( gStatusbar, 1, "파일 오픈" );

그리고 leave 시그널 핸들러에다 다음과 같은 코드를 넣자. 

gtk_statusbar_pop( gStatusbar, 1 );

실행 후 상태바에 메시지가 뜨는 모습은 다음과 같다:

실행후 상태바 모습

다음 이전 차례