gtk3
बिल्डर एपीआई के साथ ग्लेड का उपयोग करना

[C ++] Gtk :: gtkmm में बिल्डर का उपयोग करना

अवलोकन

Gtk + एक वर्कफ़्लो का समर्थन करता है जहाँ उपयोगकर्ता इंटरफ़ेस डिज़ाइन का कार्य और प्रोग्रामिंग का कार्य अस्वीकृत हो जाता है। यद्यपि उपयोगकर्ता इंटरफ़ेस तत्व जैसे बटन, मेनू, लेआउट आदि को सीधे कोड से जोड़ा जा सकता है, यह दृष्टिकोण न केवल कोड को अव्यवस्थित करता है, बल्कि किसी के लिए भी यूआई को बदलना कठिन बनाता है, लेकिन प्रोग्रामर कठिन है। इसके अलावा, कुछ इंटरफ़ेस तत्वों का उपयोग केवल लेआउट संरचना को पकड़ने के लिए किया जाता है और तर्क में भाग लेने की आवश्यकता नहीं होती है, उन्हें केवल कोड से जोड़ने से यह अधिक लंबा हो जाता है। इसके बजाय Glade का उपयोग UI विवरण उत्पन्न करने के लिए किया जा सकता है क्योंकि XML और Gtk + बिल्डर API का उपयोग UI लोड करने और उस पर काम करने के लिए किया जा सकता है।

कार्यप्रवाह

1. ग्लेड में यूआई तत्वों को खींचें और ड्रॉप का उपयोग करके डिज़ाइन करें। ग्लेड XML फ़ाइल बनाता है जिसमें UI विवरण होते हैं। यह मैन्युअल रूप से उचित 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);
   

उदाहरण

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

उत्पादन

जियो का उपयोग करना :: संसाधन

.glade फ़ाइलों से सीधे 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 फ़ाइल .gresource जिसमें स्ट्रिंग डेटा के रूप में संसाधन हों जो अनुप्रयोग के एक भाग के रूप में जुड़ा हो।

# 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");