본문 바로가기
오픈소스 읽기 (OLD)/리눅스 어플리케이션 만들기 - Gtk4

3-3. WYSIWYG로 UI 구성하기 - Glade

by 커널패닉 2021. 4. 21.
반응형
현재 시점(2021.04.24)에서는 Glade가 Gtk4를 지원하지 않는다. (Gtk3까지만 지원)

 

WYSIWYG는 What You See Is What You Get의 준말로, 말 그대로 화면에 표시되는 모습을 그래도 결과물로 얻을 수 있는 것을 의미한다. 대표적인 WYSIWYG 프로그램으로 MS오피스 제품군이 있다. Gtk에서도 Glade를 사용하면 WYSIWYG로 UI를 구성할 수 있다. Glade는 Gnome 재단에서 공식적으로 지원하는 UI 개발 툴이다.

출처: https://glade.gnome.org/

3.3.1 간단한 Glade 사용법

Glade 사용법을 설명하기에 앞서 고백할 것이 있다. 나는 Glade를 잘 사용하기 못한다. 물론 UI 틀을 구성할 때는 대안이 없기 때문에 Glade를 사용하기는 하지만, 기초적인 기능 외에는 잘 사용하지 않는다. 대신 Gtk API를 이용해서 메뉴얼로 프로퍼티를 설정하는 것을 더 선호하는 편이다. 따라서 이번 포스트에서는 Glade에 대한 기초적인 사용법과 Gtk 라이브러리와 통합해서 사용하는 방법에 대해서 다룬다.

우선 Glade를 열면 아무것도 없는 빈 페이지가 나온다. 기존에 진행중인 프로젝트가 있으면, 좌상단의 Open 탭에서 열 수 있다. 신규 프로젝트를 만드려면, 아래 이미지에서 마우스가 위치한 아이콘을 클릭하면 새로운 프로젝트는 생성할 수 있다.

신규 프로젝트를 생성하거나, 기존 프로젝트를 열면 위와 같은 UI가 보인다. 숫자가 표시된 각각의 영역은 다음과 같은 일을 수행한다.

  1. 현재 생성된 위젯들 리스트가 출력된다.
  2. 위젯을 검색해서 생성할 수 있다.
  3. UI 프리뷰를 제공한다.
  4. 위젯에 대한 상세 설정을 할 수 있다.

Glade에서 설정 가능한 위젯의 설정들은 모두 Gtk API를 이용해서 설정가능하고, 반대로 Gtk API로 설정 가능한 설정들고 대부분 Glade를 사용해서 설정 가능하다.

Glade를 이용해 제작한 결과물은 XML 형태로 저장된다. 위의 이미지를 그대로 저장하면 다음과 같은 XML 파일이 생성된다.

// example.ui

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.38.2 -->
<interface>
  <requires lib="gtk+" version="3.24"/>
  <object class="GtkWindow">
    <property name="can-focus">False</property>
    <child>
      <!-- n-columns=3 n-rows=3 -->
      <object class="GtkGrid">
        <property name="visible">True</property>
        <property name="can-focus">False</property>
        <child>
          <object class="GtkMenuBar">
            <property name="visible">True</property>
            <property name="can-focus">False</property>
            <child>
              <object class="GtkMenuItem">
                <property name="visible">True</property>
                <property name="can-focus">False</property>
                <property name="label" translatable="yes">_File</property>
                <property name="use-underline">True</property>
                <child type="submenu">
                  <object class="GtkMenu">
                    <property name="visible">True</property>
                    <property name="can-focus">False</property>
                    <child>
                      <object class="GtkImageMenuItem">
                        <property name="label">gtk-new</property>
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
                        <property name="use-underline">True</property>
                        <property name="use-stock">True</property>
                      </object>
                    </child>
                    <child>
                      <object class="GtkImageMenuItem">
                        <property name="label">gtk-open</property>
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
                        <property name="use-underline">True</property>
                        <property name="use-stock">True</property>
                      </object>
                    </child>
                    <child>
                      <object class="GtkImageMenuItem">
                        <property name="label">gtk-save</property>
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
                        <property name="use-underline">True</property>
                        <property name="use-stock">True</property>
                      </object>
                    </child>
                    <child>
                      <object class="GtkImageMenuItem">
                        <property name="label">gtk-save-as</property>
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
                        <property name="use-underline">True</property>
                        <property name="use-stock">True</property>
                      </object>
                    </child>
                    <child>
                      <object class="GtkSeparatorMenuItem">
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
                      </object>
                    </child>
                    <child>
                      <object class="GtkImageMenuItem">
                        <property name="label">gtk-quit</property>
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
                        <property name="use-underline">True</property>
                        <property name="use-stock">True</property>
                      </object>
                    </child>
                  </object>
                </child>
              </object>
            </child>
            <child>
              <object class="GtkMenuItem">
                <property name="visible">True</property>
                <property name="can-focus">False</property>
                <property name="label" translatable="yes">_Edit</property>
                <property name="use-underline">True</property>
                <child type="submenu">
                  <object class="GtkMenu">
                    <property name="visible">True</property>
                    <property name="can-focus">False</property>
                    <child>
                      <object class="GtkImageMenuItem">
                        <property name="label">gtk-cut</property>
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
                        <property name="use-underline">True</property>
                        <property name="use-stock">True</property>
                      </object>
                    </child>
                    <child>
                      <object class="GtkImageMenuItem">
                        <property name="label">gtk-copy</property>
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
                        <property name="use-underline">True</property>
                        <property name="use-stock">True</property>
                      </object>
                    </child>
                    <child>
                      <object class="GtkImageMenuItem">
                        <property name="label">gtk-paste</property>
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
                        <property name="use-underline">True</property>
                        <property name="use-stock">True</property>
                      </object>
                    </child>
                    <child>
                      <object class="GtkImageMenuItem">
                        <property name="label">gtk-delete</property>
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
                        <property name="use-underline">True</property>
                        <property name="use-stock">True</property>
                      </object>
                    </child>
                  </object>
                </child>
              </object>
            </child>
            <child>
              <object class="GtkMenuItem">
                <property name="visible">True</property>
                <property name="can-focus">False</property>
                <property name="label" translatable="yes">_View</property>
                <property name="use-underline">True</property>
              </object>
            </child>
            <child>
              <object class="GtkMenuItem">
                <property name="visible">True</property>
                <property name="can-focus">False</property>
                <property name="label" translatable="yes">_Help</property>
                <property name="use-underline">True</property>
                <child type="submenu">
                  <object class="GtkMenu">
                    <property name="visible">True</property>
                    <property name="can-focus">False</property>
                    <child>
                      <object class="GtkImageMenuItem">
                        <property name="label">gtk-about</property>
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
                        <property name="use-underline">True</property>
                        <property name="use-stock">True</property>
                      </object>
                    </child>
                  </object>
                </child>
              </object>
            </child>
          </object>
          <packing>
            <property name="left-attach">0</property>
            <property name="top-attach">0</property>
            <property name="width">3</property>
          </packing>
        </child>
        <child>
          <placeholder/>
        </child>
        <child>
          <placeholder/>
        </child>
        <child>
          <placeholder/>
        </child>
        <child>
          <placeholder/>
        </child>
        <child>
          <placeholder/>
        </child>
        <child>
          <placeholder/>
        </child>
      </object>
    </child>
  </object>
</interface>

 

3.3.2 Gtk와 통합하기

Gtk 프로그램에서는 Glade를 이용해서 생성한 결과물은 사용해서 UI를 구성할 수 있다. Gtk에서는 GtkBuilder 객체를

Gtk에서 사용 가능하다. 단, 현재 시점(2021.04.21)에서는 Glade가 Gtk4 UI를 지원하지 않는다. 본 내용은 Glade가 Gtk4를 정식으로 지원하면 추가하도록 할 예정이다.

반응형

'오픈소스 읽기 (OLD) > 리눅스 어플리케이션 만들기 - Gtk4' 카테고리의 다른 글

3-4. CSS로 어플리케이션 꾸미기  (0) 2021.04.24
3-2. 간단한 어플리케이션 만들기 (Container)  (0) 2021.04.20
3-1. 간단한 어플리케이션 만들기 (Window, Label, Button)  (0) 2021.04.18
2. Gtk 프로그래밍 개념 잡기  (0) 2021.04.17
1. GTK란 무엇인가?  (2) 2021.04.15

관련글

티스토리툴바