gtk3
Używanie Glade z API Builder

[C ++] przy użyciu Gtk :: Builder w gtkmm

Przegląd

Gtk + obsługuje przepływ pracy, w którym zadania związane z projektowaniem interfejsu użytkownika i programowaniem są rozdzielone. Chociaż elementy interfejsu użytkownika, takie jak przyciski, menu, układ itp. Można dodawać bezpośrednio z kodu, takie podejście nie tylko zaśmieca kod, ale także utrudnia zmianę interfejsu użytkownika dla każdego oprócz programisty. Poza tym niektóre elementy interfejsu są używane tylko do utrzymania struktury układu i nie muszą brać udziału w logice, dodanie ich z kodu tylko wydłuża. Zamiast tego można użyć Glade do wygenerowania opisu interfejsu użytkownika, ponieważ do załadowania interfejsu użytkownika i działania na nim można użyć interfejsu API Gtk + Builder API.

Przepływ pracy

1. Projektuj elementy interfejsu w Glade za pomocą przeciągania i upuszczania. Glade generuje plik XML, który zawiera opisy interfejsu użytkownika. Można to również zrobić ręcznie, pisząc odpowiednią składnię XML i zapisując ją z rozszerzeniem .glade .
2. Załaduj interfejs z pliku bezpośrednio za pomocą

   auto ui = Gtk::Builder::create_from_file("ui.glade");
   

3. Uzyskaj dostęp do poszczególnych elementów interfejsu użytkownika

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

Przykład

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

Wynik

Korzystanie z Gio :: Resource

Ładowanie interfejsów użytkownika bezpośrednio z plików .glade jest szybkie i łatwe. Jednak po spakowaniu aplikacji opisy interfejsu użytkownika, ikony i inne obrazy można łączyć w pakiety zasobów . Najpierw należy utworzyć opis zasobu jako plik 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>

Następnie utwórz osobny plik .gresource lub plik .c zawierający zasoby jako dane łańcuchowe do połączenia w ramach aplikacji.

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

Następnie z kodu aplikacji załaduj pakiet zasobów

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

Z elementów interfejsu użytkownika wczytywania pakietu zasobów

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