수색…


[C ++] gtkmm에서 Gtk :: Builder 사용하기

개요

Gtk +는 사용자 인터페이스 디자인 작업과 프로그래밍 작업이 분리되는 워크 플로우를 지원합니다. 버튼, 메뉴, 레이아웃 등과 같은 사용자 인터페이스 요소는 코드에서 직접 추가 할 수 있지만이 방법은 코드를 혼란시킬뿐만 아니라 프로그래머를 제외한 모든 사람의 UI를 변경합니다. 게다가 일부 인터페이스 요소는 레이아웃 구조를 유지하는 데에만 사용되며 논리에 참여할 필요가 없으므로 코드에서 추가하면 더 길어집니다. 대신 Glade를 사용하여 XML로 UI 설명을 생성 할 수 있으며 Gtk + Builder API를 사용하여 UI를로드하고 조작 할 수 있습니다.

워크 플로

  1. 드래그 앤 드롭을 사용하여 Glade의 UI 요소를 디자인하십시오. Glade는 UI 설명이 포함 된 XML 파일을 생성합니다. 적절한 XML 구문을 작성하고 .glade 확장명으로 저장하여 수동으로 수행 할 수도 있습니다.
  2. 파일에서 직접 UI로드
    auto ui = Gtk::Builder::create_from_file("ui.glade");
    
  3. 개별 UI 요소 액세스
    // when element doesn't need to be added to another UI element
    auto ui_elem = Glib::RefPtr<Gtk::Button>::cast_dynamic(
        ui->get_object("button_UI_id")
    );
    // when element needs to be added to another widget
    Gtk::Button *btn = nullptr;
    ui->get_widget<Gtk::Button>("button_UI_id", btn);
    

Glade UI

UI 예제 : simple.glade

simple.glade

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.20.0 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <object class="GtkBox" id="cont">
    <property name="width_request">200</property>
    <property name="height_request">200</property>
    <property name="visible">True</property>
    <property name="can_focus">False</property>
    <property name="orientation">vertical</property>
    <child>
      <object class="GtkLabel" id="display_label">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="wrap">True</property>
        <attributes>
          <attribute name="weight" value="bold"/>
          <attribute name="scale" value="5"/>
          <attribute name="foreground" value="#a4a400000000"/>
        </attributes>
      </object>
      <packing>
        <property name="expand">True</property>
        <property name="fill">True</property>
        <property name="position">0</property>
      </packing>
    </child>
    <child>
      <object class="GtkButton" id="display_button">
        <property name="label" translatable="yes">Display Message</property>
        <property name="visible">True</property>
        <property name="can_focus">True</property>
        <property name="receives_default">True</property>
      </object>
      <packing>
        <property name="expand">False</property>
        <property name="fill">True</property>
        <property name="position">1</property>
      </packing>
    </child>
  </object>
</interface>

simple.cpp

#include <gtkmm/application.h>
#include <gtkmm/applicationwindow.h>
#include <gtkmm/button.h>
#include <gtkmm/label.h>
#include <gtkmm/box.h>
#include <gtkmm/builder.h>

class HelloWindow : public Gtk::ApplicationWindow {
    Gtk::Box *cont;
    Glib::RefPtr<Gtk::Label> display_label;
    Glib::RefPtr<Gtk::Button> display_btn;
    Glib::RefPtr<Gtk::Builder> ui;
public:
    HelloWindow()
    : ui{Gtk::Builder::create_from_file("simple.glade")} {
        if(ui) {
            ui->get_widget<Gtk::Box>("cont", cont);
            display_label = Glib::RefPtr<Gtk::Label>::cast_dynamic(
                ui->get_object("display_label")
            );
            display_btn = Glib::RefPtr<Gtk::Button>::cast_dynamic(
                ui->get_object("display_button")
            );
            if(cont && display_label && display_btn) {
                display_btn->signal_clicked().connect(
                [this]() {
                    display_label->set_text("Hello World");
                });
                add(*cont);
            }
        }
        set_title("Simple Gtk::Builder demo");
        set_default_size(400, 400);
        show_all();
    }
};

int main(int argc, char *argv[]) {
    auto app = Gtk::Application::create(
        argc, argv, 
        "org.gtkmm.example.HelloApp"
    );
    HelloWindow hw;
    return app->run(hw);
}

산출

산출

Gio :: Resource 사용하기

.glade 파일에서 UI를 직접로드하는 것은 쉽고 빠릅니다. 그러나 응용 프로그램을 패키지화하면 UI 설명, 아이콘 및 기타 이미지를 리소스 번들 에 함께 넣을 수 있습니다. 먼저 자원 설명을 XML 파일로 작성해야합니다.

resources.xml

<gresources>
    <gresource prefix="/unique/prefix/">
        <file>icon.png</file>
        <!-- text files such as XML can be compressed to save memory -->
        <file compressed="true">ui.glade</file>
    </gresource>
</gresources>

그런 다음 별도의 .gresource 파일이나 자원을 포함하는 .c 파일을 응용 프로그램의 일부로 링크 할 문자열 데이터로 만듭니다.

# generates separate resource file
glib-compile-resources --target=ui.gresource resources.xml
# generates .c file
glib-compile-resources --generate-source resources.xml

그런 다음 응용 프로그램 코드에서 자원 번들을로드하십시오.

// from separate file
auto resource_bundle = Gio::Resource::create_from_file("ui.gresource");
// from stream of bytes in .c file
auto resource_bundle = Glib:wrap(draw_resource_get_resource());
resource_bundle.register_global();

자원 번들로드 UI 요소에서

auto ui = Gtk::Builder::create_from_resource("/unique/prefix/ui.glade");


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow