<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="topic" id="image-viewer.vala" xml:lang="ko">

  <info>

  <title type="text">그림 보기(Vala)</title>

    <link type="guide" xref="vala#examples"/>

    <desc>간단한 "Hello world" GTK+ 프로그램에 약간의 무언가가 더 들어갑니다.</desc>

    <revision pkgversion="0.1" version="0.1" date="2011-03-18" status="review"/>

    <credit type="author">

      <name>그놈 문서 프로젝트</name>

      <email its:translate="no">gnome-doc-list@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Johannes Schmid</name>

      <email its:translate="no">jhs@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Philip Chimento</name>

      <email its:translate="no">philip.chimento@gmail.com</email>

    </credit>

    <credit type="editor">

     <name>Tiffany Antopolski</name>

     <email its:translate="no">tiffany.antopolski@gmail.com</email>

    </credit>

  <credit type="editor">

    <name>Marta Maria Casetti</name>

    <email its:translate="no">mmcasetti@gmail.com</email>

    <years>2013</years>

  </credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>조성호</mal:name>

      <mal:email>shcho@gnome.org</mal:email>

      <mal:years>2017</mal:years>

    </mal:credit>

  </info>

<title>그림 보기</title>

<synopsis>

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

  <list type="numbered">

    <item>
<link xref="getting-ready">안주타 IDE</link>로 기본 프로젝트를 설정하는 방법.
</item>

    <item>
Vala 프로그래밍 언어로 <link href="http://developer.gnome.org/platform-overview/stable/gtk">Gtk 프로그램</link>을 작성하는 방법
</item>

    <item>
<link href="http://developer.gnome.org/gobject/stable/">GObject</link> 프로그래밍 일부 기본 개념
</item>

  </list>

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

  <list>

    <item>
<link href="https://live.gnome.org/Vala/Tutorial">Vala</link> 프로그래밍 언어 기본 지식.
</item>

    <item>
<app>안주타</app> 설치 사본.
</item>

    <item>
이 따라하기 지침서에선 별로 필요하지 않지만 쓸만한 <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link> API 참고서를 찾아보시는 것도 좋습니다.
</item>

  </list>

</synopsis>

<media type="image" mime="image/png" src="media/image-viewer.png"/>

<section id="anjuta">

  <title>안주타에서 프로젝트 만들기</title>

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

  <steps>

    <item>

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

    </item>

    <item>

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

   	</item>

    <item>

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

     <note>
<link xref="guitar-tuner.vala">기타 조율 프로그램</link> 따라하기 지침서에서 인터페이스 빌더 사용법을 배웁니다.
</note>

    </item>

    <item>

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

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;

	}

}

    </item>

  </steps>

</section>

<section id="build">

  <title>첫 코드 작성</title>

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

  <list>

    <item>

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

    </item>

    <item>

      
Main 클래스의 생성자는 (비어 있는) 새 창을 만들고 창을 닫을 때 프로그램을 빠져나갈 <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">시그널</link>을 연결합니다.

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

    </item>

    <item>

      
static main 함수는 Vala 프로그램을 시작할 때 기본으로 실행하는 함수입니다. Main 클래스를 만들고 설정한 다음 프로그램을 실행하는 몇가지 함수를 호출합니다. <link href="http://valadoc.org/gtk+-3.0/Gtk.main.html">Gtk.main</link> 함수는 사용자 인터페이스를 실행하고 이벤트(마우스 단추 누름과 키 누름) 대기를 시작하는 GTK <link href="http://en.wikipedia.org/wiki/Event_loop">메인 루프</link>를 시작합니다.

    </item>

  </list>

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

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

</section>

<section id="ui">

  <title>사용자 인터페이스 만들기</title>

  
이제 비어있는 창에 숨결을 불어넣겠습니다. GTK는 다른 위젯을 넣을 수 있고 다른 컨테이너도 넣을 수 있는 <link href="http://www.valadoc.org/gtk+-2.0/Gtk.Container.html">Gtk.Container</link>로  사용자 인터페이스를 모아둡니다. 여기서는 여러가지 컨테이너 중 가장 간단한 <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.html">Gtk.Box</link>를 사용하겠습니다.

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);

}

  <steps>

    <item>

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

    </item>

    <item>

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

    </item>

    <item>

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

    </item>

    <item>

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

      
<link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html">Button</link>을 누르면, 어떤 동작(<link href="https://live.gnome.org/Vala/SignalsAndCallbacks">콜백</link> 메서드에 정의)을 연결할 수 있는 <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.clicked.html">clicked</link> 시그널을 내보냅니다.

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

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

    </item>

    <item>

      
마지막으로 connect 호출에서는 창을 닫았을 때 프로그램을 끝낼지 확인합니다. 안주타에서 만든 코드는 <link href="http://www.valadoc.org/gtk+-2.0/Gtk.main_quit.html">Gtk.main_quit</link>를 호출하는 on_destroy  콜백 메서드를 호출하지만, 시그널을 main_quit에 바로 연결하는게 더 쉽습니다. on_destroy 메서드를 지울 수 있습니다.

    </item>

  </steps>

</section>

<section id="image">

  <title>그림 표시</title>

  
앞서 언급한 단추의 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 ();

}

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

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

  <list>

    <item>

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

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

        button.clicked.connect (on_open_image);

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

        public void on_open_image (Button self)

    </item>

    <item>

      
다음 흥미로운 부분은 파일을 선택하는 대화상자를 만드는 부분입니다. <link href="http://www.valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html">FileChooserDialog</link>의 생성자는 대화 상자 제목, 대화 상자의 상위 창, 단추 갯수와 각각의 값 같은 몇가지 옵션을 취합니다.

      
직접 "취소" 또는 "열기"라고 입력하는 대신, Gtk에서 가져온 <link href="http://unstable.valadoc.org/gtk+-3.0/Gtk.Stock.html">stock</link> 단추 이름을 사용하고 있음을 참고하십시오. 스톡 이름을 사용하면 사용자의 언어로 이미 번역한 단추 레이블을 사용합니다.

    </item>

    <item>

      
다음 두 줄은 <gui>열기</gui> 대화 상자에서 GtkImage로만 열 수 있는 파일을 표시하도록 제한합니다. 필터 객체를 우선 만듭니다. 그 다음 <link href="http://www.valadoc.org/gdk-pixbuf-2.0/Gdk.Pixbuf.html">Gdk.Pixbuf</link>에서 지원하는 파일 종류(PNG와 JPEG 같은 대부분의 그림 형식)를 필터에 추가합니다. 마지막으로 이 필터를 <gui>열기</gui> 대화 상자의 필터로 설정합니다.

    </item>

    <item>

      
<link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.run.html">dialog.run</link>은 <gui>열기</gui> 대화 상자를 표시합니다. 대화 상자는 사용자의 그림 선택을 기다립니다. 사용자가 그림을 선택하면 dialog.run 에서 ResponseType.ACCEPT 값을 반환합니다(<gui>취소</gui>를 누르면 ResponseType.CANCEL 값을 반환합니다). switch 구문에서는 어떤 값을 반환했는지 확인합니다.

    </item>

    <item>

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

    </item>

    <item>

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

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

    </item>

  </list>

</section>

<section id="run">

  <title>프로그램 빌드 및 실행</title>

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

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

</section>

<section id="impl">

  <title>참조 구현체</title>

  
지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="image-viewer/image-viewer.vala">참조 코드</link>와 여러분의 코드를 비교해보십시오.

</section>

<section id="next">

  <title>다음 단계</title>

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

  <list>

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

   <item>

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

   </item>

   <item>

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

     
<link href="http://www.gegl.org/api.html">GEGL</link>에서는 강력한 그림 편집 기능을 제공합니다.

   </item>

   <item>

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

     
You can use <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link> to handle network file transfers and the like, and <link href="http://library.gnome.org/devel/gnome-scan/unstable/">GNOME Scan</link> to handle scanning.

   </item>

  </list>

</section>

</page>