<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="guide" style="task" id="combobox.js" xml:lang="ko">

  <info>

  <title type="text">ComboBox(JavaScript)</title>

    <link type="guide" xref="beginner.js#menu-combo-toolbar"/>

    <link type="seealso" xref="GtkApplicationWindow.js"/>

    <link type="seealso" xref="comboboxtext.js"/>

    <link type="seealso" xref="messagedialog.js"/>

    <link type="seealso" xref="treeview_simple_liststore.js"/>

    <revision version="0.1" date="2012-07-09" status="draft"/>

    <credit type="author copyright">

      <name>Taryn Fox</name>

      <email its:translate="no">jewelfox@fursona.net</email>

      <years>2012</years>

    </credit>

    <desc>개별 설정 가능한 드롭 다운 메뉴</desc>

    <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>ComboBox</title>

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

  
ComboBox는 완전 지멋대로 고칠 수 있는 드롭다운 메뉴입니다. 드롭다운 메뉴를 누르면 <link xref="treeview_simple_liststore.js">TreeView</link> 위젯을 나타내고, 행열에 무엇이 들어있는지 알려주는 ListStore(기본적인 스프레드시트) 위젯으로 끝내는 것과 동일한 구조를 지닙니다. 이 예제에서 ListStore에는 한 칸에 각 옵션의 이름을 넣고 스톡 아이콘 이름을 다른 곳에 넣으며, 각 콤보박스에서 각 옵션의 아이콘을 나타내게 하겠습니다.

  
우선 한번에 수평 줄 하나를 선택하기에 아이콘은 개별 옵션으로 취급하지 않습니다. 아이콘과 텍스트 한 묶음이 여러분이 누를 수 있는 옵션 하나를 이룹니다.

  <note style="tip">
ListStrore를 다루는 과정은 시간이 좀 걸릴 수 있습니다. 간단하게 텍스트만 있는 드롭다운 메뉴를 원하면 <link xref="comboboxtext.js">ComboBoxText</link> 사용을 고려하십시오. 구성에 시간이 별로 오래 걸리지 않을 뿐더러 다루기도 쉽습니다.
</note>

    <links type="section"/>

  <section id="imports">

    <title>가져올 라이브러리</title>

#!/usr/bin/gjs

imports.gi.versions.Gtk = '3.0';

const GObject = imports.gi.GObject;

const Gtk = imports.gi.Gtk;

]]>

    
이 프로그램을 실행할 때 가져올 라이브러리입니다. 시작 부분에 항상 gjs가 필요함을 알리는 줄을 작성해야 함을 기억하십시오.

  </section>

  <section id="applicationwindow">

    <title>프로그램 창 만들기</title>

class ComboBoxExample {

    // Create the application itself

    constructor() {

        this.application = new Gtk.Application ({

            application_id: 'org.example.jscombobox'});

        // Connect 'activate' and 'startup' signals to the callback functions

        this.application.connect('activate', this._onActivate.bind(this));

        this.application.connect('startup', this._onStartup.bind(this));

    }

    // Callback function for 'activate' signal presents windows when active

    _onActivate() {

        this._window.present ();

    }

    // Callback function for 'startup' signal builds the UI

    _onStartup() {

        this._buildUI ();

    }

]]>

    
이 예제의 모든 코드는 ComboBoxExample 클래스에 넣었습니다. 위 코드에서는 위젯과 창을 담아둘 <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>을 만들었습니다.

    // Build the application's UI

    _buildUI() {

        // Create the application window

        this._window = new Gtk.ApplicationWindow  ({

            application: this.application,

            window_position: Gtk.WindowPosition.CENTER,

            title: "Welcome to GNOME",

            default_width: 200,

            border_width: 10 });

]]>

    
_buildUI 함수는 프로그램 사용자 인터페이스를 만드는 모든 코드를 넣는 곳입니다. 첫 단계에서는 모든 위젯을 우겨넣을 새 <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link>를 만듭니다.

  </section>

  <section id="liststore">

    <title>ListStore 만들기</title>

        // Create the liststore to put our options in

        this._listStore = new Gtk.ListStore();

        this._listStore.set_column_types ([

            GObject.TYPE_STRING,

            GObject.TYPE_STRING]);

    
ListStore는 <link xref="treeview_simple_liststore.js">TreeView</link> 예제에서 사용했던 것과 비슷하게 동작합니다. ListStore에 문자열을 저장하는 두 칸을 확보했는데요, 이 중 하나는 <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">스톡 gtk 아이콘</link> 이름이 들어갑니다.

    
그놈에 내장하지 않은 자체 보유 아이콘을 사용한다면, 대신 <file>gtk.gdk.Pixbuf</file> 형식을 사용해야합니다. 여러분이 사용할 수 있는 몇가지 기타 형식을 알려드리겠습니다:

    <list>

      <item>
<file>GObject.TYPE_BOOLEAN</file> -- 참/거짓
</item>

      <item>
<file>GObject.TYPE_FLOAT</file> -- 소수(소수점 하나 들어감)
</item>

      <item>
<file>GObject.TYPE_STRING</file> -- 문자, 숫자로 이루어진 문장
</item>

    </list>

    <note style="tip">
GObject 형식을 사용할 수 있게 하려면, 우리가 예제에서 했던 것처럼 프로그램 코드 시작 부분에 <file>const GObject = imports.gi.GObject;</file> 를 넣으세요.
</note>

        // This array holds our list of options and their icons

        let options = [{ name: "Select" },

            { name: "New", icon: Gtk.STOCK_NEW },

            { name: "Open", icon: Gtk.STOCK_OPEN },

            { name: "Save", icon: Gtk.STOCK_SAVE }];

        // Put the options in the liststore

        for (let i = 0; i < options.length; i++ ) {

            let option = options[i];

            let iter = this._listStore.append();

            this._listStore.set (iter, [0], [option.name]);

            if ('icon' in option)

                this._listStore.set (iter, [1], [option.icon]);

        }

    
여기서 각각의 아이콘과 텍스트 옵션에 대한 배열을 만들고, <link xref="treeview_simple_liststore.js">TreeView</link>  ListStore와 매우 동일한 방식으로 ListStore에 배열을 넣겠습니다. 옵션 배열에 실제로 아이콘이 있을 경우에만 아이콘을 넣을테니 우선 확인부터 해보겠습니다.

    <note style="tip">
"선택"은 ComboBox에서 마우스로 누르게 하는 것인 만큼 진짜 옵션은 아니니까, 아이콘이 필요가 없습니다.
</note>

  </section>

  <section id="combobox">

    <title>ComboBox 만들기</title>

        // Create the combobox

        this._comboBox = new Gtk.ComboBox({

            model: this._listStore});

    
각 ComboBox에는 자체 옵션을 가진 기반 "모델"이 있습니다. ComboBox에 별개 분기 옵션을 넣고 싶다면 TreeStore를 사용할 수 있죠. 지금 같은 경우는, 그냥 이미 만든 ListStore를 사용하겠습니다.

        // Create some cellrenderers for the items in each column

        let rendererPixbuf = new Gtk.CellRendererPixbuf();

        let rendererText = new Gtk.CellRendererText();

        // Pack the renderers into the combobox in the order we want to see

        this._comboBox.pack_start (rendererPixbuf, false);

        this._comboBox.pack_start (rendererText, false);

        // Set the renderers to use the information from our liststore

        this._comboBox.add_attribute (rendererText, "text", 0);

        this._comboBox.add_attribute (rendererPixbuf, "stock_id", 1);

에

    
이 부분에서는 다시 말하지만, CellRenderer를 만들고 <link xref="treeview_simple_liststore.js">TreeView</link>의 칸에 넣는 식으로 손이 많이 가고 있죠. 큰 차이점이 있다면 ComboBox의 칸을 별개 객체로 만들 필요가 없다는겁니다. 그냥 CellRenderer를 보여주고 싶은 대로 감싸넣고, ListStore에서 정보를 가져오게 하는거죠(그리고 기대하던 정보 형식도요).

    
텍스트를 보여줄 때 CellRendererText를 사용하고, CellRendererPixbuf로 아이콘을 보여주겠습니다. 아이콘 스톡 이름은 문자열로 입력하여 저장할 수 있지만은, 화면에 표시할 때는 그림을 보여주도록 설계한 CellRenderer가 필요합니다.

    <note style="tip">
TreeView처럼, "모델"(이 경우, ListStore)과 "뷰"(이 경우, ComboBox)를 따로 분리합니다. ListStore에서 한가지 순서를 갖춘 열으로 뭔가를 할 수 있고, ComboBox에 다른 순서로 넣은 각각의 열을  CellRenderer에 감싸두기 때문입니다. ListStore에 정보를 저장해서 보여줄 때 ComboBox에 영향을 주지 않고도 TreeView를 만들거나 다른 위젯을 만들 수 있습니다.
</note>

        // Set the first row in the combobox to be active on startup

        this._comboBox.set_active (0);

        // Connect the combobox's 'changed' signal to our callback function

        this._comboBox.connect ('changed', this._onComboChanged.bind(this));

]]>

    
우선 여러 사람이 "선택" 텍스트를 먼저 보게한 후 ComboBox를 누르게 하려고 합니다. 그렇게 해서 "선택"을 활성 항목으로 설정했습니다. 또한 ComboBox의 <file>changed</file> 시그널을 콜백 함수에 연결해서 누군가가 새 옵션을 누를 때, 어떤 일이 일어나게 했습니다. 지금 같은 경우, 간단한 시구를 보여주겠습니다.

        // Add the combobox to the window

        this._window.add (this._comboBox);

        // Show the window and all child widgets

        this._window.show_all();

    }

]]>

    
마지막으로 ComboBox를 창에 추가하고, 창에 창 자신과 창에 들어간 위젯을 보여주게 했습니다.

  </section>

  <section id="function">

    <title>선택을 처리하는 함수</title>

    _selected() {

        // The silly pseudohaiku that we'll use for our messagedialog

        let haiku = ["",

            "You ask for the new\nwith no thought for the aged\nlike fallen leaves trod.",

            "Like a simple clam\nrevealing a lustrous pearl\nit opens for you.",

            "A moment in time\na memory on the breeze\nthese things can't be saved."];

]]>

    
선택한 배포판 이름에 따라 시구 아무거나 보여주는 <link xref="messagedialog.js">MessageDialog</link> 팝업을 만들고 있죠. 우선, 사용할 시구의 배열을 만들고. ComboBox에 처음 나타날 문자열은 "선택" 메시지니, 배열의 첫번째 문자열은 비워두겠습니다.

        // Which combobox item is active?

        let activeItem = this._comboBox.get_active();

        // No messagedialog if you choose "Select"

        if (activeItem != 0) {

            this._popUp = new Gtk.MessageDialog ({

                transient_for: this._window,

                modal: true,

                buttons: Gtk.ButtonsType.OK,

                message_type: Gtk.MessageType.INFO,

                text: haiku[activeItem]});

            // Connect the OK button to a handler function

            this._popUp.connect ('response', this._onDialogResponse.bind(this));

            // Show the messagedialog

            this._popUp.show();

        }

    }

]]>

    
MessageDialog를 보여주기 전에요, "선택" 메시지를 선택하지 못하게 했는지 일단 확인하겠습니다. 그 다음 ComboBoxText의 활성 항목에 따른 배열에 시구 텍스트를 넣겠습니다. 선택 항목의 숫자 ID를 반환하는 <file>get_active</file> 메서드를 사용하여 처리할거구요.

    <note style="tip">
사용할 수 있는 또다른 메서드는 <file>append</file>로 할당한 텍스트 ID를 반환하는 <file>get_active_id</file> 메서드하고, 선택 항목 텍스트 전체를 반환하는 <file>get_active_text</file> 메서드가 있습니다.
</note>

    
MessageDialog를 만들고 나면, _onDialogResponse 함수에 반응 시그널을 연결하고 MessageDialog를 나타내게 하겠습니다.

    _onDialogResponse() {

        this._popUp.destroy ();

    }

};

]]>

    
MessageDialog에는 확인 단추만 있기 때문에 response_id에서 어떤 단추를 눌렀는지 굳이 확인할 필요가 없습니다. 그냥 띄운 창을 닫기만 하면 됩니다.

// Run the application

let app = new ComboBoxExample ();

app.application.run (ARGV);

    
끝으로, ComboBoxExample 클래스의 새 인스턴스를 만들고요, 프로그램 실행을 구성하겠습니다.

  </section>

  <section id="complete">

    <title>완전한 코드 예제</title>

#!/usr/bin/gjs

imports.gi.versions.Gtk = '3.0';

const GObject = imports.gi.GObject;

const Gtk = imports.gi.Gtk;

class ComboBoxExample {

    // Create the application itself

    constructor() {

        this.application = new Gtk.Application ({

            application_id: 'org.example.jscombobox'});

        // Connect 'activate' and 'startup' signals to the callback functions

        this.application.connect('activate', this._onActivate.bind(this));

        this.application.connect('startup', this._onStartup.bind(this));

    }

    // Callback function for 'activate' signal presents windows when active

    _onActivate() {

        this._window.present ();

    }

    // Callback function for 'startup' signal builds the UI

    _onStartup() {

        this._buildUI();

    }

    // Build the application's UI

    _buildUI() {

        // Create the application window

        this._window = new Gtk.ApplicationWindow  ({

            application: this.application,

            window_position: Gtk.WindowPosition.CENTER,

            title: "Welcome to GNOME",

            default_width: 200,

            border_width: 10 });

        // Create the liststore to put our options in

        this._listStore = new Gtk.ListStore();

        this._listStore.set_column_types ([

            GObject.TYPE_STRING,

            GObject.TYPE_STRING]);

        // This array holds our list of options and their icons

        let options = [{ name: "Select" },

            { name: "New", icon: Gtk.STOCK_NEW },

            { name: "Open", icon: Gtk.STOCK_OPEN },

            { name: "Save", icon: Gtk.STOCK_SAVE }];

        // Put the options in the liststore

        for (let i = 0; i < options.length; i++ ) {

            let option = options[i];

            let iter = this._listStore.append();

            this._listStore.set (iter, [0], [option.name]);

            if ('icon' in option)

                this._listStore.set (iter, [1], [option.icon]);

        }

        // Create the combobox

        this._comboBox = new Gtk.ComboBox({

            model: this._listStore});

        // Create some cellrenderers for the items in each column

        let rendererPixbuf = new Gtk.CellRendererPixbuf();

        let rendererText = new Gtk.CellRendererText();

        // Pack the renderers into the combobox in the order we want to see

        this._comboBox.pack_start (rendererPixbuf, false);

        this._comboBox.pack_start (rendererText, false);

        // Set the renderers to use the information from our liststore

        this._comboBox.add_attribute (rendererText, "text", 0);

        this._comboBox.add_attribute (rendererPixbuf, "stock_id", 1);

        // Set the first row in the combobox to be active on startup

        this._comboBox.set_active (0);

        // Connect the combobox's 'changed' signal to our callback function

        this._comboBox.connect ('changed', this._onComboChanged.bind(this));

        // Add the combobox to the window

        this._window.add (this._comboBox);

        // Show the window and all child widgets

        this._window.show_all();

    }

    _onComboChanged() {

        // The silly pseudohaiku that we'll use for our messagedialog

        let haiku = ["",

            "You ask for the new\nwith no thought for the aged\nlike fallen leaves trod.",

            "Like a simple clam\nrevealing a lustrous pearl\nit opens for you.",

            "A moment in time\na memory on the breeze\nthese things can't be saved."];

        // Which combobox item is active?

        let activeItem = this._comboBox.get_active();

        // No messagedialog if you choose "Select"

        if (activeItem != 0) {

            this._popUp = new Gtk.MessageDialog ({

                transient_for: this._window,

                modal: true,

                buttons: Gtk.ButtonsType.OK,

                message_type: Gtk.MessageType.INFO,

                text: haiku[activeItem]});

            // Connect the OK button to a handler function

            this._popUp.connect ('response', this._onDialogResponse.bind(this));

            // Show the messagedialog

            this._popUp.show();

        }

    }

    _onDialogResponse() {

        this._popUp.destroy ();

    }

};

// Run the application

let app = new ComboBoxExample ();

app.application.run (ARGV);

  </section>

  <section id="in-depth">

    <title>자세한 문서</title>

이 예제는 다음 참고자료가 필요합니다:

<list>

  <item>
<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>
</item>

  <item>
<link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.CellRendererPixbuf.html">Gtk.CellRendererPixbuf</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.CellRendererText.html">Gtk.CellRendererText</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ComboBox.html">Gtk.ComboBox</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ListStore.html">Gtk.ListStore</link>
</item>

  <item>
<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html">Gtk.MessageDialog</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TreeIter.html">Gtk.TreeIter</link>
</item>

</list>

  </section>

</page>