ComboBoxText(JavaScript)

콤보박스는 드롭 다운 메뉴입니다. ComboBox와 ComboBoxText의 차이점이라면 ComboBoxText는 텍스트만 있는 위젯이고, 완전한 ComboBox는 분기 옵션이나, 각 선택 항목의 그림을 보여주는 ListStore나 TreeStore(기본적으로 스프레드 시트 같음)를 사용하는 위젯입니다.

가져올 라이브러리


#!/usr/bin/gjs

const Gtk = imports.gi.Gtk;
const Lang = imports.lang;

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

프로그램 창 만들기


const ComboBoxTextExample = new Lang.Class ({
    Name: 'ComboBoxText Example',

    // Create the application itself
    _init: function () {
        this.application = new Gtk.Application ({
            application_id: 'org.example.jscomboboxtext'});

        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
    },

    // Callback function for 'activate' signal presents windows when active
    _onActivate: function () {
        this._window.present ();
    },

    // Callback function for 'startup' signal builds the UI
    _onStartup: function () {
        this._buildUI ();
    },

이 예제의 모든 코드는 MessageDialogExample 클래스에 넣었습니다. 위 코드에서는 위젯과 창을 담아둘 Gtk.Application을 만들었습니다.


    // Build the application's UI
    _buildUI: function () {

        // 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 함수는 프로그램 사용자 인터페이스를 만드는 모든 코드를 넣는 곳입니다. 첫 단계에서는 모든 위젯을 우겨넣을 새 Gtk.ApplicationWindow를 만듭니다.

ComboBoxText 만들기


        // Create the combobox
        this._comboBoxText = new Gtk.ComboBoxText();

        // Populate the combobox
        let distros = ["Select distribution", "Fedora", "Mint", "Suse"];
        for (let i = 0; i < distros.length; i++)
            this._comboBoxText.append_text (distros[i]);
        this._comboBoxText.set_active (0);

        // Connect the combobox's 'changed' signal to our callback function
        this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));

ComboBoxText를 만들고 나서 append_text 메서드를 사용하여 텍스트 스트링을 0번부터 시작하는 숫자 ID를 가진 배열에 추가하겠습니다. 단순하게 갖출 목적으로 ComboBoxText 항목을 실제로 배열로 만든 다음에 순서대로 넣고, 넣은 방식대로 for 반복문으로 붙여넣겠습니다.

ComboBoxText를 갖추고 나서 첫번째 항목을 표시하여 ComboBoxText를 누르기 전에 "Select distribution" 줄이 나타나게 하겠습니다. 그 다음 changed 시그널을 _onComboChanged 함수에 연결하여 드롭 다운 메뉴에서 새 항목을 선택할 때마다 호출하도록 하겠습니다.

ComboBoxText에 항목을 추가하려면 insert_text 메서드를 사용할 수 있습니다. 각 항목의 ID를 숫자만이 아닌 텍스트 문자열을 사용하려한다면 append 메서드와 insert 메서드를 사용할 수 있습니다. 활용 방안에 대한 자세한 지침서 내용은 하단 링크를 살펴보시지요.


        // Add the combobox to the window
        this._window.add (this._comboBoxText);

        // Show the window and all child widgets
        this._window.show_all();
    },

마지막으로 ComboBoxText를 창에 추가하고, 창 자신과 위젯을 나타내게 하겠습니다.

선택을 처리하는 함수


    _onComboChanged: function () {

        // The responses we'll use for our messagedialog
        let responses = ["",
            "Fedora is a community distro sponsored by Red Hat.",
            "Mint is a popular distro based on Ubuntu.",
            "SUSE is a name shared by two separate distros."];

배포판 선택 기반으로 메시지를 보여주는 MessageDialog 팝업을 만들려고 합니다. 우선, 사용할 응답 배열을 만들겠습니다. ComboBoxText의 첫 문자열은 그냥 "Select distribution" 메시지니까, 배열의 첫번째 문자열은 비워두겠습니다.


        // Which combobox item is active?
        let activeItem = this._comboBoxText.get_active();

        // No messagedialog if you chose "Select distribution"
        if (activeItem != 0) {
            this._popUp = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                buttons: Gtk.ButtonsType.OK,
                message_type: Gtk.MessageType.INFO,
                text: responses[activeItem]});

            // Connect the OK button to a handler function
            this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));

            // Show the messagedialog
            this._popUp.show();
        }

    },

MessageDialog를 나타내기 전, "Select distribution" 메시지를 선택하지 않았는지 우선 확인해야 합니다. 확인하고 나면 ComboBoxText의 선택 항목과 관련하여 배열의 항목 텍스트를 설정합니다. 선택 항목의 숫자 ID를 반환하는 get_active 메서드를 사용하겠습니다.

append로 할당한 텍스트 ID를 반환하는 get_active_id 메서드 말고도, 선택한 항목의 완전한 텍스트를 반환하는 get_active_text 메서드가 있습니다.

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


    _onDialogResponse: function () {

        this._popUp.destroy ();

    }

});

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


// Run the application
let app = new ComboBoxTextExample ();
app.application.run (ARGV);

마지막으로, 코드 작성을 마무리한 ComboBoxTextExample 클래스의 새 인스턴스를 만들고, 프로그램 실행을 구성하겠습니다.

완전한 코드 예제

#!/usr/bin/gjs

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

class ComboBoxTextExample {

    // Create the application itself
    constructor() {
        this.application = new Gtk.Application ({
            application_id: 'org.example.jscomboboxtext'});

        // 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 combobox
        this._comboBoxText = new Gtk.ComboBoxText();

        // Populate the combobox
        let distros = ["Select distribution", "Fedora", "Mint", "Suse"];
        for (let i = 0; i < distros.length; i++)
            this._comboBoxText.append_text (distros[i]);
        this._comboBoxText.set_active (0);

        // Connect the combobox's 'changed' signal to our callback function
        this._comboBoxText.connect ('changed', this._onComboChanged.bind(this));

        // Add the combobox to the window
        this._window.add (this._comboBoxText);

        // Show the window and all child widgets
        this._window.show_all();
    }

    _onComboChanged() {

        // The responses we'll use for our messagedialog
        let responses = ["",
            "Fedora is a community distro sponsored by Red Hat.",
            "Mint is a popular distro based on Ubuntu.",
            "SUSE is a name shared by two separate distros."];

        // Which combobox item is active?
        let activeItem = this._comboBoxText.get_active();

        // No messagedialog if you chose "Select distribution"
        if (activeItem != 0) {
            this._popUp = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                buttons: Gtk.ButtonsType.OK,
                message_type: Gtk.MessageType.INFO,
                text: responses[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 ComboBoxTextExample ();
app.application.run (ARGV);

자세한 문서

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

Gtk.Application

Gtk.ApplicationWindow

Gtk.ComboBoxText

Gtk.MessageDialog