# 그림 보기(Vala)

간단한 "Hello world" GTK+ 프로그램에 약간의 무언가가 더 들어갑니다.
그놈 문서 프로젝트
gnome-doc-list@gnome.org
Johannes Schmid
jhs@gnome.org
Philip Chimento
philip.chimento@gmail.com
Tiffany Antopolski
tiffany.antopolski@gmail.com
Marta Maria Casetti
mmcasetti@gmail.com 2013
조성호
shcho@gnome.org 2017-2019.

# 그림 보기

      이 따라하기 지침서에서는 그림 파일을 열고 보여주는 프로그램을 만듭니다. 다음을 배워나갑니다:

        안주타 IDE로 기본 프로젝트를 설정하는 방법.
        Vala 프로그래밍 언어로 Gtk 프로그램을 작성하는 방법
        GObject 프로그래밍 일부 기본 개념

      이 지침을 따라갈 수 있으려면 다음이 필요합니다:

        Vala 프로그래밍 언어 기본 지식.
        안주타 설치 사본.
        이 따라하기 지침서에선 별로 필요하지 않지만 쓸만한 gtk+-3.0 API 참고서를 찾아보시는 것도 좋습니다.

# 안주타에서 프로젝트 만들기

코딩을 시작하기 전에 안주타에서 새 프로젝트를 설정해야합니다. 이 프로그램은 빌드에 필요한 모든 파일을 만들고 그 다음 코드를 실행합니다. 또한 이 모든 상태를 유지 관리하는데 쓸만합니다.

안주타 를 시작하고 새 프로젝트 만들기 또는 파일새로 만들기프로젝트 를 눌러 프로젝트 마법사를 여십시오.

Vala 탭에서 GTK+ (단순)을 선택하고 계속을 누른 다음, 나타난 페이지에서 몇가지 자세한 내용을 입력하십시오. 프로젝트 이름과 디렉터리에 image-viewer를 입력하십시오.

따라하기 지침을 통해 사용자 인터페이스를 직접 만들 예정이므로 사용자 인터페이스에 GtkBuilder 사용 설정을 껐는지 확인하십시오.

기타 조율 프로그램 따라하기 지침서에서 인터페이스 빌더 사용법을 배웁니다.

계속을 누르고 적용을 누르면 프로젝트를 만들어줍니다. 프로젝트나 파일탭에서 src/image_viewer.vala 파일을 여십시오. 다음 코드가 나타납니다:

using GLib; using Gtk;

public class Main : Object {

public Main () { Window window = new Window(); window.set_title ("Hello World"); window.show_all(); window.destroy.connect(on_destroy); }

public void on_destroy (Widget window) { Gtk.main_quit(); }

static int main (string[] args) { Gtk.init (ref args); var app = new Main ();

Gtk.main ();

return 0; } }

# 첫 코드 작성

이 코드는 (빈) 창을 사용자 인터페이스 설명 파일에서 불러오고 화면에 나타냅니다. 자세한 내용은 아래에 있습니다. 기본을 이해하셨다면 이 부분은 넘어가셔도 됩니다:

상단의 `using` 줄 두 줄에서는 이름 영역을 임포팅하여 해당 이름을 코드상에서 굳이 언급할 필요가 없게 해줍니다.

`Main` 클래스의 생성자는 (비어 있는) 새 창을 만들고 창을 닫을 때 프로그램을 빠져나갈 시그널을 연결합니다.

시그널 연결은 단추를 누르거나 어떤 동작을 취할 때 처리할 일을 정의하는 방식입니다. 여기서 창을 닫을 때 `destroy` 함수를 호출(하고 앱을 끝내기)합니다.

`static main` 함수는 Vala 프로그램을 시작할 때 기본으로 실행하는 함수입니다. `Main` 클래스를 만들고 설정한 다음 프로그램을 실행하는 몇가지 함수를 호출합니다. `Gtk.main` 함수는 사용자 인터페이스를 실행하고 이벤트(마우스 단추 누름과 키 누름) 대기를 시작하는 GTK 메인 루프를 시작합니다.

이 코드를 사용할 준비가 됐으니 빌드프로젝트 빌드(또는 Shift F7 키 누름)를 눌러 코드를 컴파일할 수 있습니다.

설정을 기본으로 바꾸고 실행을 눌러 빌드 디렉터리를 설정하십시오. 처음 빌드 때 한 번만 실행하면 됩니다.

# 사용자 인터페이스 만들기

이제 비어있는 창에 숨결을 불어넣겠습니다. GTK는 다른 위젯을 넣을 수 있고 다른 컨테이너도 넣을 수 있는 `Gtk.Container`로 사용자 인터페이스를 모아둡니다. 여기서는 여러가지 컨테이너 중 가장 간단한 `Gtk.Box`를 사용하겠습니다.

`Main` 클래스 상단에 다음 줄을 추가하십시오:

private Window window; private Image image;

이제 현재 생성자를 아래 내용으로 바꾸겠습니다:

public Main () {

window = new Window (); window.set_title ("Image Viewer in Vala");

// Set up the UI var box = new Box (Orientation.VERTICAL, 5); var button = new Button.with_label ("Open image"); image = new Image ();

box.pack_start (image, true, true, 0); box.pack_start (button, false, false, 0); window.add (box);

// Show open dialog when opening a file button.clicked.connect (on_open_image);

window.show_all (); window.destroy.connect (main_quit); }

처음 두 줄은 하나 이상의 메서드에서 접근할 GUI 부분입니다. 이 부분을 여기에 선언하여 메서드를 만든 부분에서만 쓰는게 아니라 전 클래스에 걸쳐 쓸 수 있게 합니다.

생성자 처음 줄에서는 빈 창을 만듭니다. 다음 줄에서는 우리가 쓰려는 위젯을 만듭니다. 그림을 여는 단추, 그림 보기 위젯 자체, 컨테이너로 쓸 상자 위젯이 있습니다.

`pack_start` 호출로 박스에 두 위젯을 추가하고 동작을 정의합니다. 그림은 활용 가능한 공간만큼 충분히 확장하고, 단추는 필요한 만큼만 커집니다. 위젯의 크기를 분명하게 설정하지 않음을 알아채셨을 겁니다. GTK에서는 창 크기가 달라져도 보기 좋은 배치를 쉽게하기에 직접 설정할 필요가 없습니다. 이 과정이 끝나면 박스를 창에 추가합니다.

단추를 사용자가 눌렀을 때 어떤 일이 일어날 지 정해야합니다. GTK는 시그널 개념을 활용합니다.

Button을 누르면, 어떤 동작(콜백 메서드에 정의)을 연결할 수 있는 `clicked` 시그널을 내보냅니다.

사용자가 단추를 누르면 (아직 정하지 않은) `on_image_open` 콜백 메서드를 호출하여 그림을 이 함수의 인자로 전달하라고 GTK에 지시할 때 `connect` 메서드를 사용하면 됩니다. 다음 섹션에서 콜백을 정의하겠습니디.

콜백 함수에서 `window`위젯과 `image` 위젯에 접근해야합니다. 이게 바로 클래스 상단에서 전용 멤버 인스턴스로 설정한 이유입니다.

마지막으로 `connect` 호출에서는 창을 닫았을 때 프로그램을 끝낼지 확인합니다. 안주타에서 만든 코드는 `Gtk.main_quit`를 호출하는 `on_destroy` 콜백 메서드를 호출하지만, 시그널을 `main_quit`에 바로 연결하는게 더 쉽습니다. `on_destroy` 메서드를 지울 수 있습니다.

# 그림 표시

앞서 언급한 단추의 `clicked` 시그널을 처리할 시그널 핸들러를 정의하겠습니다. 이 코드를 생성자 다음에 추가하십시오:

public void on_open_image (Button self) { var filter = new FileFilter (); var dialog = new FileChooserDialog ("Open image", window, FileChooserAction.OPEN, Stock.OK, ResponseType.ACCEPT, Stock.CANCEL, ResponseType.CANCEL); filter.add_pixbuf_formats (); dialog.add_filter (filter);

switch (dialog.run ()) { case ResponseType.ACCEPT: var filename = dialog.get_filename (); image.set_from_file (filename); break; default: break; } dialog.destroy (); }

좀 복잡하니 하나씩 살펴보도록 하죠:

시그널 핸들러는 시그널을 어딘가에서 내보냈을 때 콜백 함수를 호출하게 하는 방식입니다. 이 용어는 서로 바꿔서 사용합니다.

콜백 메서드의 첫번째 인자는 항상 시그널을 보낸 위젯입니다. 때로는 뒤 따라오는 다른 인자가 시그널에 관련이 있지만, clicked는 그렇지 않습니다.

이 경우 `button`에서 `on_open_image` 콜백 함수에 연결한 `clicked` 시그널을 내보냅니다:

button.clicked.connect (on_open_image);

`on_open_image` 메서드는 시그널을 방출한 단추를 인저로 취합니다:

public void on_open_image (Button self)

다음 흥미로운 부분은 파일을 선택하는 대화상자를 만드는 부분입니다. `FileChooserDialog`의 생성자는 대화 상자 제목, 대화 상자의 상위 창, 단추 갯수와 각각의 값 같은 몇가지 옵션을 취합니다.

직접 "취소" 또는 "열기"라고 입력하는 대신, Gtk에서 가져온 stock 단추 이름을 사용하고 있음을 참고하십시오. 스톡 이름을 사용하면 사용자의 언어로 이미 번역한 단추 레이블을 사용합니다.

다음 두 줄은 열기 대화 상자에서 GtkImage로만 열 수 있는 파일을 표시하도록 제한합니다. 필터 객체를 우선 만듭니다. 그 다음 `Gdk.Pixbuf`에서 지원하는 파일 종류(PNG와 JPEG 같은 대부분의 그림 형식)를 필터에 추가합니다. 마지막으로 이 필터를 열기 대화 상자의 필터로 설정합니다.

`dialog.run`은 열기 대화 상자를 표시합니다. 대화 상자는 사용자의 그림 선택을 기다립니다. 사용자가 그림을 선택하면 `dialog.run` 에서 `ResponseType.ACCEPT` 값을 반환합니다(취소를 누르면 `ResponseType.CANCEL` 값을 반환합니다). `switch` 구문에서는 어떤 값을 반환했는지 확인합니다.

사용자가 열기를 눌렀다고 한 상황에서, 다음 줄에서 사용자가 선택한 그림의 파일 이름을 가져오고, `GtkImage` 위젯으로 선택한 그림을 불러오고 화면에 표시합니다.

이 메서드의 마지막 줄에서는 열기 대화상자는 더 이상 필요 없으니 해체합니다.

해체할 때는 대화상자를 자동으로 숨깁니다.

# 프로그램 빌드 및 실행

모든 코드를 실행할 준비가 됐습니다. 빌드프로젝트 빌드를 눌러 프로젝트 전체를 다시 빌드하고, 실행실행을 눌러 프로그램을 시작하십시오.

아직 끝나지 않았다면, 대화상자에 나타난 src/image-viewer 프로그램을 선택하십시오. 마지막으로 실행을 선택하고 즐기시지요!

# 참조 구현체

지침서를 따라하는 실행하는 과정에 문제가 있다면, 참조 코드와 여러분의 코드를 비교해보십시오.

# 다음 단계

여기 간단한 시험 프로그램에 여러분이 추가로 넣을 수 있는 몇가지 아이디어가 있습니다:

창을 열었을 때 지정 크기로 시작하도록 설정하십시오. 예를 들면 200 X 200 픽셀 크기입니다.

파일을 선택하기 보단 디렉터리를 선택하게 하고, 디렉터리의 모든 그림을 보여줄 수 있는 컨트롤을 제어 기능을 제공합니다.

사용자가 그림을 불러오고 수정한 그림을 저장할 때 임의 필터와 효과를 그림에 적용하십시오.

GEGL에서는 강력한 그림 편집 기능을 제공합니다.

네트워크 공유, 스캐너, 다른 복잡한 공급원에서 그림을 불러올 수 있습니다.

네트워크 파일 전송 같은 동작을 처리할 때 GIO를 사용할 수 있습니다. 그리고 스캐너를 다룰 때는 그놈 스캔을 활용하시면 됩니다.