gtk3
Utilisation de Glade avec l'API Builder

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

Vue d'ensemble

Gtk + prend en charge un flux de travail où la tâche de conception de l'interface utilisateur et la tâche de programmation sont découplées. Bien que les éléments de l'interface utilisateur tels que les boutons, les menus, la mise en page, etc. puissent être directement ajoutés à partir du code, cette approche non seulement encombre le code, mais rend également difficile le changement de l'interface utilisateur. En outre, certains éléments d'interface ne sont utilisés que pour contenir la structure physique et n'ont pas besoin de participer à la logique, leur ajout à partir du code ne fait que le rallonger. Au lieu de cela, Glade peut être utilisé pour générer une description de l'interface utilisateur, car les API XML et Gtk + Builder peuvent être utilisées pour charger l'interface utilisateur et y fonctionner.

Workflow

1. Concevez des éléments d'interface utilisateur dans Glade à l' aide du glisser-déposer. Glade génère un fichier XML contenant des descriptions d'interface utilisateur. Cela peut également être fait manuellement en écrivant une syntaxe XML correcte et en l'enregistrant avec une extension .glade .
2. Chargez l'interface depuis le fichier directement avec

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

3. Accéder à des éléments d'interface utilisateur individuels

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

Exemple

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

Sortie

Utiliser Gio :: Resource

Le chargement des interfaces utilisateur directement à partir des fichiers .glade est rapide et facile. Mais lorsque l'application est empaquetée, les descriptions, les icônes et les autres images de l'interface utilisateur peuvent être regroupées dans des ensembles de ressources . Tout d'abord, une description de ressource doit être créée en tant que fichier 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>

Ensuite , soit créer un séparé .gresource fichier ou un .c contenant des ressources fichier en tant que données de chaîne à lier comme une partie de l'application.

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

Ensuite, à partir du code d'application, chargez le regroupement de ressources

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

A partir d'éléments d'interface utilisateur de chargement de regroupement de ressources

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