gtk3
Usando Glade con Builder API

[C ++] usando Gtk :: Builder en gtkmm

Visión general

Gtk + admite un flujo de trabajo en el que la tarea de diseño de la interfaz de usuario y la tarea de programación se desacoplan. Si bien los elementos de la interfaz de usuario, como botones, menús, diseño, etc., pueden agregarse directamente desde el código, este enfoque no solo desordena el código, sino que también dificulta el cambio de la interfaz de usuario para cualquier persona, excepto para el programador. Además, algunos elementos de la interfaz se usan solo para mantener la estructura del diseño y no necesitan participar en la lógica, agregarlos desde el código solo hace que sea más largo. En su lugar, se puede usar Glade para generar la descripción de la interfaz de usuario como XML y Gtk + Builder API se puede usar para cargar la interfaz de usuario y operar en ella.

Flujo de trabajo

1. Diseñar elementos de la interfaz de usuario en Glade usando arrastrar y soltar. Glade genera un archivo XML que contiene descripciones de UI. Esto también puede hacerse manualmente escribiendo la sintaxis XML adecuada y guardándola con una extensión .glade .
2. Cargar UI desde el archivo directamente con

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

3. Acceder a elementos individuales de la interfaz de usuario

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

Ejemplo

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

Salida

Usando Gio :: Recurso

Cargar interfaces de usuario directamente desde archivos .glade es rápido y fácil. Pero cuando la aplicación está empaquetada, las descripciones de la interfaz de usuario, los iconos y otras imágenes se pueden agrupar en paquetes de recursos . Primero se debe crear una descripción de recurso como archivo XML.

recursos.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>

Luego cree un archivo .gresource separado o un archivo .c que contenga recursos como datos de cadena para vincularlos como parte de la aplicación.

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

Luego desde el código de la aplicación cargar el paquete de recursos

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

Desde el paquete de recursos, cargar elementos de la interfaz de usuario

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