gtk3
Använda Glade med Builder API

[C ++] med Gtk :: Builder i gtkmm

Översikt

Gtk + stöder ett arbetsflöde där uppgiften för användargränssnittsdesign och programmeringsuppgiften kopplas bort. Även om användargränssnittselementen som knappar, menyer, layout etc. kan läggas direkt från koden, kommer detta tillvägagångssätt inte bara att koda, utan gör också att användargränssnittet för någon annan än programmeraren blir hårt. Dessutom används vissa gränssnittselement bara för att hålla layoutstrukturen och behöver inte delta i logiken, att lägga till dem från koden gör det bara längre. Istället kan Glade användas för att generera UI-beskrivning eftersom XML och Gtk + Builder API kan användas för att ladda UI: n och driva den.

Workflow

1. Designa UI-element i Glade med dra och släpp. Glade genererar XML-fil som innehåller UI-beskrivningar. Detta kan också göras manuellt genom att skriva korrekt XML-syntax och spara den med en .glade förlängning.
2. Ladda UI från filen direkt med

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

3. Få åtkomst till enskilda UI-element

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

Exempel

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

Produktion

Använda Gio :: Resource

Ladda användargränssnitt direkt från .glade filer är snabbt och enkelt. Men när applikationen är paketerad kan UI-beskrivningar, ikoner och andra bilder sättas samman i resurspaket . Först måste en resursbeskrivning skapas som XML-fil.

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 en separat .gresource fil eller en .c fil som innehåller resurser som strängdata som ska länkas som en del av applikationen.

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

Ladda sedan resurspaketet från applikationskoden

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

Från resurspaketbelastade UI-element

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