/
evo
/
Gtk4-tutorial
Обзор
Документация
Войти
/
evo
/
Gtk4-tutorial
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
docs/sec9.html
601 строка
55 KB
Chaim Halbert
sec9: suggest jq for quoting ui xml
12 дек 2025, 20:53
12 дек 2025, 20:53
5d3bf2b
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="generator" content="pandoc" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>GTK 4 tutorial</title> <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} pre{overflow: visible;} pre > code.sourceCode { white-space: pre; position: relative; } pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span:empty { height: 1.2em; } code.sourceCode > span { color: inherit; text-decoration: inherit; } div.sourceCode { margin: 1em 0; } pre.sourceCode { margin: 0; } @media screen { div.sourceCode { overflow: auto; } } @media print { pre > code.sourceCode { white-space: pre-wrap; } pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; } } pre.numberSource code { counter-reset: source-line 0; } pre.numberSource code > span { position: relative; left: -4em; counter-increment: source-line; } pre.numberSource code > span > a:first-child::after { content: counter(source-line); position: relative; left: -1em; text-align: right; vertical-align: baseline; border: none; display: inline-block; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 0 4px; width: 4em; color: #aaaaaa; } pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; } div.sourceCode { } @media screen { pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } } code span.al { color: #ff0000; font-weight: bold; } /* Alert */ code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ code span.at { color: #7d9029; } /* Attribute */ code span.bn { color: #40a070; } /* BaseN */ code span.bu { } /* BuiltIn */ code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ code span.ch { color: #4070a0; } /* Char */ code span.cn { color: #880000; } /* Constant */ code span.co { color: #60a0b0; font-style: italic; } /* Comment */ code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ code span.do { color: #ba2121; font-style: italic; } /* Documentation */ code span.dt { color: #902000; } /* DataType */ code span.dv { color: #40a070; } /* DecVal */ code span.er { color: #ff0000; font-weight: bold; } /* Error */ code span.ex { } /* Extension */ code span.fl { color: #40a070; } /* Float */ code span.fu { color: #06287e; } /* Function */ code span.im { } /* Import */ code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ code span.kw { color: #007020; font-weight: bold; } /* Keyword */ code span.op { color: #666666; } /* Operator */ code span.ot { color: #007020; } /* Other */ code span.pp { color: #bc7a00; } /* Preprocessor */ code span.sc { color: #4070a0; } /* SpecialChar */ code span.ss { color: #bb6688; } /* SpecialString */ code span.st { color: #4070a0; } /* String */ code span.va { color: #19177c; } /* Variable */ code span.vs { color: #4070a0; } /* VerbatimString */ code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ div.sourceCode { margin: 10px; padding: 16px 10px 8px 10px; border: 2px solid silver; background-color: ghostwhite; overflow-x:scroll} pre:not(.sourceCode) { margin: 10px; padding: 16px 10px 8px 10px; border: 2px solid silver; background-color: ghostwhite; overflow-x:scroll} table {margin-left: auto; margin-right: auto; border-collapse: collapse; border: 1px solid;} th {padding: 2px 6px; border: 1px solid; background-color: ghostwhite;} td {padding: 2px 6px; border: 1px solid;} img {display: block; margin-left: auto; margin-right: auto;} figcaption {text-align: center;} </style> </head> <body style="padding-top: 70px;"> <div class="container"> <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary"> <div class="container-fluid"> <span class="navbar-brand">Gtk4 tutorial</span> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="sec8.html">Prev: section8</a> </li> <li class="nav-item"> <a class="nav-link" href="sec10.html">Next: section10</a> </li> </ul> </div> </div> </nav> <div class="row justify-content-center"> <div class="col-xl-10 col-xxl-9"> <h1 id="gtkbuilder-and-ui-file">GtkBuilder and UI file</h1> <h2 id="new-open-save-and-close-buttons">New, Open, Save and Close buttons</h2> <p>We made a very simple editor in the previous section. It reads files at the start and writes them out at the end of the program. It works, but is not so good. It would be better if we had “New”, “Open”, “Save” and “Close” buttons. This section describes how to put those buttons into the window.</p> <figure> <img src="image/screenshot_tfe2.png" alt="Screenshot of the file editor" /> <figcaption aria-hidden="true">Screenshot of the file editor</figcaption> </figure> <p>The screenshot above shows the layout. The function <code>app_open</code> in the source code <code>tfe2.c</code> is as follows.</p> <div class="sourceCode" id="cb1"><pre class="sourceCode numberSource C numberLines"><code class="sourceCode c"><span id="cb1-1"><a href="#cb1-1"></a><span class="dt">static</span> <span class="dt">void</span></span> <span id="cb1-2"><a href="#cb1-2"></a>app_open <span class="op">(</span>GApplication <span class="op">*</span>app<span class="op">,</span> GFile <span class="op">**</span> files<span class="op">,</span> gint n_files<span class="op">,</span> gchar <span class="op">*</span>hint<span class="op">)</span> <span class="op">{</span></span> <span id="cb1-3"><a href="#cb1-3"></a> GtkWidget <span class="op">*</span>win<span class="op">;</span></span> <span id="cb1-4"><a href="#cb1-4"></a> GtkWidget <span class="op">*</span>nb<span class="op">;</span></span> <span id="cb1-5"><a href="#cb1-5"></a> GtkWidget <span class="op">*</span>lab<span class="op">;</span></span> <span id="cb1-6"><a href="#cb1-6"></a> GtkNotebookPage <span class="op">*</span>nbp<span class="op">;</span></span> <span id="cb1-7"><a href="#cb1-7"></a> GtkWidget <span class="op">*</span>scr<span class="op">;</span></span> <span id="cb1-8"><a href="#cb1-8"></a> GtkWidget <span class="op">*</span>tv<span class="op">;</span></span> <span id="cb1-9"><a href="#cb1-9"></a> GtkTextBuffer <span class="op">*</span>tb<span class="op">;</span></span> <span id="cb1-10"><a href="#cb1-10"></a> <span class="dt">char</span> <span class="op">*</span>contents<span class="op">;</span></span> <span id="cb1-11"><a href="#cb1-11"></a> gsize length<span class="op">;</span></span> <span id="cb1-12"><a href="#cb1-12"></a> <span class="dt">char</span> <span class="op">*</span>filename<span class="op">;</span></span> <span id="cb1-13"><a href="#cb1-13"></a> <span class="dt">int</span> i<span class="op">;</span></span> <span id="cb1-14"><a href="#cb1-14"></a> GError <span class="op">*</span>err <span class="op">=</span> NULL<span class="op">;</span></span> <span id="cb1-15"><a href="#cb1-15"></a></span> <span id="cb1-16"><a href="#cb1-16"></a> GtkWidget <span class="op">*</span>boxv<span class="op">;</span></span> <span id="cb1-17"><a href="#cb1-17"></a> GtkWidget <span class="op">*</span>boxh<span class="op">;</span></span> <span id="cb1-18"><a href="#cb1-18"></a> GtkWidget <span class="op">*</span>dmy1<span class="op">;</span></span> <span id="cb1-19"><a href="#cb1-19"></a> GtkWidget <span class="op">*</span>dmy2<span class="op">;</span></span> <span id="cb1-20"><a href="#cb1-20"></a> GtkWidget <span class="op">*</span>dmy3<span class="op">;</span></span> <span id="cb1-21"><a href="#cb1-21"></a> GtkWidget <span class="op">*</span>btnn<span class="op">;</span> <span class="co">/* button for new */</span></span> <span id="cb1-22"><a href="#cb1-22"></a> GtkWidget <span class="op">*</span>btno<span class="op">;</span> <span class="co">/* button for open */</span></span> <span id="cb1-23"><a href="#cb1-23"></a> GtkWidget <span class="op">*</span>btns<span class="op">;</span> <span class="co">/* button for save */</span></span> <span id="cb1-24"><a href="#cb1-24"></a> GtkWidget <span class="op">*</span>btnc<span class="op">;</span> <span class="co">/* button for close */</span></span> <span id="cb1-25"><a href="#cb1-25"></a></span> <span id="cb1-26"><a href="#cb1-26"></a> win <span class="op">=</span> gtk_application_window_new <span class="op">(</span>GTK_APPLICATION <span class="op">(</span>app<span class="op">));</span></span> <span id="cb1-27"><a href="#cb1-27"></a> gtk_window_set_title <span class="op">(</span>GTK_WINDOW <span class="op">(</span>win<span class="op">),</span> <span class="st">"file editor"</span><span class="op">);</span></span> <span id="cb1-28"><a href="#cb1-28"></a> gtk_window_set_default_size <span class="op">(</span>GTK_WINDOW <span class="op">(</span>win<span class="op">),</span> <span class="dv">600</span><span class="op">,</span> <span class="dv">400</span><span class="op">);</span></span> <span id="cb1-29"><a href="#cb1-29"></a></span> <span id="cb1-30"><a href="#cb1-30"></a> boxv <span class="op">=</span> gtk_box_new <span class="op">(</span>GTK_ORIENTATION_VERTICAL<span class="op">,</span> <span class="dv">0</span><span class="op">);</span></span> <span id="cb1-31"><a href="#cb1-31"></a> gtk_window_set_child <span class="op">(</span>GTK_WINDOW <span class="op">(</span>win<span class="op">),</span> boxv<span class="op">);</span></span> <span id="cb1-32"><a href="#cb1-32"></a></span> <span id="cb1-33"><a href="#cb1-33"></a> boxh <span class="op">=</span> gtk_box_new <span class="op">(</span>GTK_ORIENTATION_HORIZONTAL<span class="op">,</span> <span class="dv">0</span><span class="op">);</span></span> <span id="cb1-34"><a href="#cb1-34"></a> gtk_box_append <span class="op">(</span>GTK_BOX <span class="op">(</span>boxv<span class="op">),</span> boxh<span class="op">);</span></span> <span id="cb1-35"><a href="#cb1-35"></a></span> <span id="cb1-36"><a href="#cb1-36"></a> dmy1 <span class="op">=</span> gtk_label_new<span class="op">(</span>NULL<span class="op">);</span> <span class="co">/* dummy label for left space */</span></span> <span id="cb1-37"><a href="#cb1-37"></a> gtk_label_set_width_chars <span class="op">(</span>GTK_LABEL <span class="op">(</span>dmy1<span class="op">),</span> <span class="dv">10</span><span class="op">);</span></span> <span id="cb1-38"><a href="#cb1-38"></a> dmy2 <span class="op">=</span> gtk_label_new<span class="op">(</span>NULL<span class="op">);</span> <span class="co">/* dummy label for center space */</span></span> <span id="cb1-39"><a href="#cb1-39"></a> gtk_widget_set_hexpand <span class="op">(</span>dmy2<span class="op">,</span> TRUE<span class="op">);</span></span> <span id="cb1-40"><a href="#cb1-40"></a> dmy3 <span class="op">=</span> gtk_label_new<span class="op">(</span>NULL<span class="op">);</span> <span class="co">/* dummy label for right space */</span></span> <span id="cb1-41"><a href="#cb1-41"></a> gtk_label_set_width_chars <span class="op">(</span>GTK_LABEL <span class="op">(</span>dmy3<span class="op">),</span> <span class="dv">10</span><span class="op">);</span></span> <span id="cb1-42"><a href="#cb1-42"></a> btnn <span class="op">=</span> gtk_button_new_with_label <span class="op">(</span><span class="st">"New"</span><span class="op">);</span></span> <span id="cb1-43"><a href="#cb1-43"></a> btno <span class="op">=</span> gtk_button_new_with_label <span class="op">(</span><span class="st">"Open"</span><span class="op">);</span></span> <span id="cb1-44"><a href="#cb1-44"></a> btns <span class="op">=</span> gtk_button_new_with_label <span class="op">(</span><span class="st">"Save"</span><span class="op">);</span></span> <span id="cb1-45"><a href="#cb1-45"></a> btnc <span class="op">=</span> gtk_button_new_with_label <span class="op">(</span><span class="st">"Close"</span><span class="op">);</span></span> <span id="cb1-46"><a href="#cb1-46"></a></span> <span id="cb1-47"><a href="#cb1-47"></a> gtk_box_append <span class="op">(</span>GTK_BOX <span class="op">(</span>boxh<span class="op">),</span> dmy1<span class="op">);</span></span> <span id="cb1-48"><a href="#cb1-48"></a> gtk_box_append <span class="op">(</span>GTK_BOX <span class="op">(</span>boxh<span class="op">),</span> btnn<span class="op">);</span></span> <span id="cb1-49"><a href="#cb1-49"></a> gtk_box_append <span class="op">(</span>GTK_BOX <span class="op">(</span>boxh<span class="op">),</span> btno<span class="op">);</span></span> <span id="cb1-50"><a href="#cb1-50"></a> gtk_box_append <span class="op">(</span>GTK_BOX <span class="op">(</span>boxh<span class="op">),</span> dmy2<span class="op">);</span></span> <span id="cb1-51"><a href="#cb1-51"></a> gtk_box_append <span class="op">(</span>GTK_BOX <span class="op">(</span>boxh<span class="op">),</span> btns<span class="op">);</span></span> <span id="cb1-52"><a href="#cb1-52"></a> gtk_box_append <span class="op">(</span>GTK_BOX <span class="op">(</span>boxh<span class="op">),</span> btnc<span class="op">);</span></span> <span id="cb1-53"><a href="#cb1-53"></a> gtk_box_append <span class="op">(</span>GTK_BOX <span class="op">(</span>boxh<span class="op">),</span> dmy3<span class="op">);</span></span> <span id="cb1-54"><a href="#cb1-54"></a></span> <span id="cb1-55"><a href="#cb1-55"></a> nb <span class="op">=</span> gtk_notebook_new <span class="op">();</span></span> <span id="cb1-56"><a href="#cb1-56"></a> gtk_widget_set_hexpand <span class="op">(</span>nb<span class="op">,</span> TRUE<span class="op">);</span></span> <span id="cb1-57"><a href="#cb1-57"></a> gtk_widget_set_vexpand <span class="op">(</span>nb<span class="op">,</span> TRUE<span class="op">);</span></span> <span id="cb1-58"><a href="#cb1-58"></a> gtk_box_append <span class="op">(</span>GTK_BOX <span class="op">(</span>boxv<span class="op">),</span> nb<span class="op">);</span></span> <span id="cb1-59"><a href="#cb1-59"></a></span> <span id="cb1-60"><a href="#cb1-60"></a> <span class="cf">for</span> <span class="op">(</span>i <span class="op">=</span> <span class="dv">0</span><span class="op">;</span> i <span class="op"><</span> n_files<span class="op">;</span> i<span class="op">++)</span> <span class="op">{</span></span> <span id="cb1-61"><a href="#cb1-61"></a> <span class="cf">if</span> <span class="op">(</span>g_file_load_contents <span class="op">(</span>files<span class="op">[</span>i<span class="op">],</span> NULL<span class="op">,</span> <span class="op">&</span>contents<span class="op">,</span> <span class="op">&</span>length<span class="op">,</span> NULL<span class="op">,</span> <span class="op">&</span>err<span class="op">))</span> <span class="op">{</span></span> <span id="cb1-62"><a href="#cb1-62"></a> scr <span class="op">=</span> gtk_scrolled_window_new <span class="op">();</span></span> <span id="cb1-63"><a href="#cb1-63"></a> tv <span class="op">=</span> tfe_text_view_new <span class="op">();</span></span> <span id="cb1-64"><a href="#cb1-64"></a> tb <span class="op">=</span> gtk_text_view_get_buffer <span class="op">(</span>GTK_TEXT_VIEW <span class="op">(</span>tv<span class="op">));</span></span> <span id="cb1-65"><a href="#cb1-65"></a> gtk_text_view_set_wrap_mode <span class="op">(</span>GTK_TEXT_VIEW <span class="op">(</span>tv<span class="op">),</span> GTK_WRAP_WORD_CHAR<span class="op">);</span></span> <span id="cb1-66"><a href="#cb1-66"></a> gtk_scrolled_window_set_child <span class="op">(</span>GTK_SCROLLED_WINDOW <span class="op">(</span>scr<span class="op">),</span> tv<span class="op">);</span></span> <span id="cb1-67"><a href="#cb1-67"></a></span> <span id="cb1-68"><a href="#cb1-68"></a> tfe_text_view_set_file <span class="op">(</span>TFE_TEXT_VIEW <span class="op">(</span>tv<span class="op">),</span> g_file_dup <span class="op">(</span>files<span class="op">[</span>i<span class="op">]));</span></span> <span id="cb1-69"><a href="#cb1-69"></a> gtk_text_buffer_set_text <span class="op">(</span>tb<span class="op">,</span> contents<span class="op">,</span> length<span class="op">);</span></span> <span id="cb1-70"><a href="#cb1-70"></a> g_free <span class="op">(</span>contents<span class="op">);</span></span> <span id="cb1-71"><a href="#cb1-71"></a> filename <span class="op">=</span> g_file_get_basename <span class="op">(</span>files<span class="op">[</span>i<span class="op">]);</span></span> <span id="cb1-72"><a href="#cb1-72"></a> lab <span class="op">=</span> gtk_label_new <span class="op">(</span>filename<span class="op">);</span></span> <span id="cb1-73"><a href="#cb1-73"></a> gtk_notebook_append_page <span class="op">(</span>GTK_NOTEBOOK <span class="op">(</span>nb<span class="op">),</span> scr<span class="op">,</span> lab<span class="op">);</span></span> <span id="cb1-74"><a href="#cb1-74"></a> nbp <span class="op">=</span> gtk_notebook_get_page <span class="op">(</span>GTK_NOTEBOOK <span class="op">(</span>nb<span class="op">),</span> scr<span class="op">);</span></span> <span id="cb1-75"><a href="#cb1-75"></a> g_object_set <span class="op">(</span>nbp<span class="op">,</span> <span class="st">"tab-expand"</span><span class="op">,</span> TRUE<span class="op">,</span> NULL<span class="op">);</span></span> <span id="cb1-76"><a href="#cb1-76"></a> g_free <span class="op">(</span>filename<span class="op">);</span></span> <span id="cb1-77"><a href="#cb1-77"></a> <span class="op">}</span> <span class="cf">else</span> <span class="op">{</span></span> <span id="cb1-78"><a href="#cb1-78"></a> g_printerr <span class="op">(</span><span class="st">"</span><span class="sc">%s</span><span class="st">.</span><span class="sc">\n</span><span class="st">"</span><span class="op">,</span> err<span class="op">-></span>message<span class="op">);</span></span> <span id="cb1-79"><a href="#cb1-79"></a> g_clear_error <span class="op">(&</span>err<span class="op">);</span></span> <span id="cb1-80"><a href="#cb1-80"></a> <span class="op">}</span></span> <span id="cb1-81"><a href="#cb1-81"></a> <span class="op">}</span></span> <span id="cb1-82"><a href="#cb1-82"></a> <span class="cf">if</span> <span class="op">(</span>gtk_notebook_get_n_pages <span class="op">(</span>GTK_NOTEBOOK <span class="op">(</span>nb<span class="op">))</span> <span class="op">></span> <span class="dv">0</span><span class="op">)</span> <span class="op">{</span></span> <span id="cb1-83"><a href="#cb1-83"></a> gtk_window_present <span class="op">(</span>GTK_WINDOW <span class="op">(</span>win<span class="op">));</span></span> <span id="cb1-84"><a href="#cb1-84"></a> <span class="op">}</span> <span class="cf">else</span></span> <span id="cb1-85"><a href="#cb1-85"></a> gtk_window_destroy <span class="op">(</span>GTK_WINDOW <span class="op">(</span>win<span class="op">));</span></span> <span id="cb1-86"><a href="#cb1-86"></a><span class="op">}</span></span></code></pre></div> <p>The function <code>app_open</code> builds the widgets in the main application window.</p> <ul> <li>26-28: Creates a GtkApplicationWindow instance and sets the title and default size.</li> <li>30-31: Creates a GtkBox instance <code>boxv</code>. It is a vertical box and a child of GtkApplicationWindow. It has two children. The first child is a horizontal box. The second child is a GtkNotebook.</li> <li>33-34: Creates a GtkBox instance <code>boxh</code> and appends it to <code>boxv</code> as the first child.</li> <li>36-41: Creates three dummy labels. The labels <code>dmy1</code> and <code>dmy3</code> has a character width of ten. The other label <code>dmy2</code> has the hexpand property set to TRUE. This makes the label expand horizontally to be as long as possible.</li> <li>42-45: Creates four buttons.</li> <li>47-53: Appends these GtkLabel and GtkButton to <code>boxh</code>.</li> <li>55-58: Creates a GtkNotebook instance and sets hexpand and vexpand properties to be TRUE. This makes it expand horizontally and vertically to be as big as possible. It is appended to <code>boxv</code> as the second child.</li> </ul> <p>The number of widget-build lines is 33(=58-26+1). We also needed many variables (<code>boxv</code>, <code>boxh</code>, <code>dmy1</code>, …), and most of them are used only for building the widgets. Is there any good solution to reduce this work?</p> <p>Gtk provides GtkBuilder. It reads user interface (UI) data and builds a window. It reduces this cumbersome work.</p> <h2 id="the-ui-file">The UI File</h2> <p>Look at the UI file <code>tfe3.ui</code> that defines the widget structure.</p> <div class="sourceCode" id="cb2"><pre class="sourceCode numberSource xml numberLines"><code class="sourceCode xml"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu"><?xml</span><span class="ot"> version=</span><span class="st">"1.0"</span><span class="ot"> encoding=</span><span class="st">"UTF-8"</span><span class="fu">?></span></span> <span id="cb2-2"><a href="#cb2-2"></a><<span class="kw">interface</span>></span> <span id="cb2-3"><a href="#cb2-3"></a> <<span class="kw">object</span><span class="ot"> class=</span><span class="st">"GtkApplicationWindow"</span><span class="ot"> id=</span><span class="st">"win"</span>></span> <span id="cb2-4"><a href="#cb2-4"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"title"</span>>file editor</<span class="kw">property</span>></span> <span id="cb2-5"><a href="#cb2-5"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"default-width"</span>>600</<span class="kw">property</span>></span> <span id="cb2-6"><a href="#cb2-6"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"default-height"</span>>400</<span class="kw">property</span>></span> <span id="cb2-7"><a href="#cb2-7"></a> <<span class="kw">child</span>></span> <span id="cb2-8"><a href="#cb2-8"></a> <<span class="kw">object</span><span class="ot"> class=</span><span class="st">"GtkBox"</span>></span> <span id="cb2-9"><a href="#cb2-9"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"orientation"</span>>GTK_ORIENTATION_VERTICAL</<span class="kw">property</span>></span> <span id="cb2-10"><a href="#cb2-10"></a> <<span class="kw">child</span>></span> <span id="cb2-11"><a href="#cb2-11"></a> <<span class="kw">object</span><span class="ot"> class=</span><span class="st">"GtkBox"</span>></span> <span id="cb2-12"><a href="#cb2-12"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"orientation"</span>>GTK_ORIENTATION_HORIZONTAL</<span class="kw">property</span>></span> <span id="cb2-13"><a href="#cb2-13"></a> <<span class="kw">child</span>></span> <span id="cb2-14"><a href="#cb2-14"></a> <<span class="kw">object</span><span class="ot"> class=</span><span class="st">"GtkLabel"</span>></span> <span id="cb2-15"><a href="#cb2-15"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"width-chars"</span>>10</<span class="kw">property</span>></span> <span id="cb2-16"><a href="#cb2-16"></a> </<span class="kw">object</span>></span> <span id="cb2-17"><a href="#cb2-17"></a> </<span class="kw">child</span>></span> <span id="cb2-18"><a href="#cb2-18"></a> <<span class="kw">child</span>></span> <span id="cb2-19"><a href="#cb2-19"></a> <<span class="kw">object</span><span class="ot"> class=</span><span class="st">"GtkButton"</span>></span> <span id="cb2-20"><a href="#cb2-20"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"label"</span>>New</<span class="kw">property</span>></span> <span id="cb2-21"><a href="#cb2-21"></a> </<span class="kw">object</span>></span> <span id="cb2-22"><a href="#cb2-22"></a> </<span class="kw">child</span>></span> <span id="cb2-23"><a href="#cb2-23"></a> <<span class="kw">child</span>></span> <span id="cb2-24"><a href="#cb2-24"></a> <<span class="kw">object</span><span class="ot"> class=</span><span class="st">"GtkButton"</span>></span> <span id="cb2-25"><a href="#cb2-25"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"label"</span>>Open</<span class="kw">property</span>></span> <span id="cb2-26"><a href="#cb2-26"></a> </<span class="kw">object</span>></span> <span id="cb2-27"><a href="#cb2-27"></a> </<span class="kw">child</span>></span> <span id="cb2-28"><a href="#cb2-28"></a> <<span class="kw">child</span>></span> <span id="cb2-29"><a href="#cb2-29"></a> <<span class="kw">object</span><span class="ot"> class=</span><span class="st">"GtkLabel"</span>></span> <span id="cb2-30"><a href="#cb2-30"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"hexpand"</span>>TRUE</<span class="kw">property</span>></span> <span id="cb2-31"><a href="#cb2-31"></a> </<span class="kw">object</span>></span> <span id="cb2-32"><a href="#cb2-32"></a> </<span class="kw">child</span>></span> <span id="cb2-33"><a href="#cb2-33"></a> <<span class="kw">child</span>></span> <span id="cb2-34"><a href="#cb2-34"></a> <<span class="kw">object</span><span class="ot"> class=</span><span class="st">"GtkButton"</span>></span> <span id="cb2-35"><a href="#cb2-35"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"label"</span>>Save</<span class="kw">property</span>></span> <span id="cb2-36"><a href="#cb2-36"></a> </<span class="kw">object</span>></span> <span id="cb2-37"><a href="#cb2-37"></a> </<span class="kw">child</span>></span> <span id="cb2-38"><a href="#cb2-38"></a> <<span class="kw">child</span>></span> <span id="cb2-39"><a href="#cb2-39"></a> <<span class="kw">object</span><span class="ot"> class=</span><span class="st">"GtkButton"</span>></span> <span id="cb2-40"><a href="#cb2-40"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"label"</span>>Close</<span class="kw">property</span>></span> <span id="cb2-41"><a href="#cb2-41"></a> </<span class="kw">object</span>></span> <span id="cb2-42"><a href="#cb2-42"></a> </<span class="kw">child</span>></span> <span id="cb2-43"><a href="#cb2-43"></a> <<span class="kw">child</span>></span> <span id="cb2-44"><a href="#cb2-44"></a> <<span class="kw">object</span><span class="ot"> class=</span><span class="st">"GtkLabel"</span>></span> <span id="cb2-45"><a href="#cb2-45"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"width-chars"</span>>10</<span class="kw">property</span>></span> <span id="cb2-46"><a href="#cb2-46"></a> </<span class="kw">object</span>></span> <span id="cb2-47"><a href="#cb2-47"></a> </<span class="kw">child</span>></span> <span id="cb2-48"><a href="#cb2-48"></a> </<span class="kw">object</span>></span> <span id="cb2-49"><a href="#cb2-49"></a> </<span class="kw">child</span>></span> <span id="cb2-50"><a href="#cb2-50"></a> <<span class="kw">child</span>></span> <span id="cb2-51"><a href="#cb2-51"></a> <<span class="kw">object</span><span class="ot"> class=</span><span class="st">"GtkNotebook"</span><span class="ot"> id=</span><span class="st">"nb"</span>></span> <span id="cb2-52"><a href="#cb2-52"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"hexpand"</span>>TRUE</<span class="kw">property</span>></span> <span id="cb2-53"><a href="#cb2-53"></a> <<span class="kw">property</span><span class="ot"> name=</span><span class="st">"vexpand"</span>>TRUE</<span class="kw">property</span>></span> <span id="cb2-54"><a href="#cb2-54"></a> </<span class="kw">object</span>></span> <span id="cb2-55"><a href="#cb2-55"></a> </<span class="kw">child</span>></span> <span id="cb2-56"><a href="#cb2-56"></a> </<span class="kw">object</span>></span> <span id="cb2-57"><a href="#cb2-57"></a> </<span class="kw">child</span>></span> <span id="cb2-58"><a href="#cb2-58"></a> </<span class="kw">object</span>></span> <span id="cb2-59"><a href="#cb2-59"></a></<span class="kw">interface</span>></span></code></pre></div> <p>The is an XML file. Tags begin with <code><</code> and end with <code>></code>. There are two types of tags, the start tag and the end tag. For example, <code><interface></code> is a start tag and <code></interface></code> is an end tag. The UI file begins and ends with interface tags. Some tags, for example object tags, can have class and id attributes in their start tag.</p> <ul> <li>1: XML declaration. It specifies that the XML version is 1.0 and the encoding is UTF-8.</li> <li>3-6: An object tag with <code>GtkApplicationWindow</code> class and <code>win</code> id. This is the top level window. It defines three properties: the <code>title</code> property is “file editor”, the <code>default-width</code> property is 600, and the <code>default-height</code> property is 400.</li> <li>7: Child tag means a child widget. For example, line 7 tells us that GtkBox object is a child widget of <code>win</code>.</li> </ul> <p>Compare this ui file and the lines 26-58 in the <code>app_open</code> function of <code>tfe2.c</code>. Both build the same window with its descendant widgets.</p> <p>You can check the ui file with <code>gtk4-builder-tool</code>.</p> <ul> <li><code>gtk4-builder-tool validate <ui file name></code> validates the ui file. If the ui file includes some syntactical error, <code>gtk4-builder-tool</code> prints the error.</li> <li><code>gtk4-builder-tool simplify <ui file name></code> simplifies the ui file and prints the result. If the <code>--replace</code> option is given, it replaces the ui file with the simplified one. If the ui file specifies the default value of a property, that property will be removed. For example, the default orientation is horizontal so the simplification removes line 12. Some values are simplified too. For example, “TRUE” and “FALSE” become “1” and “0”, respectively. However, “TRUE” and “FALSE” are better for maintenance.</li> </ul> <p>It is a good idea to check your ui file before compiling.</p> <h2 id="gtkbuilder">GtkBuilder</h2> <p>GtkBuilder builds widgets based on a ui file.</p> <div class="sourceCode" id="cb3"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a>GtkBuilder <span class="op">*</span>build<span class="op">;</span></span> <span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a></span> <span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a>build <span class="op">=</span> gtk_builder_new_from_file <span class="op">(</span><span class="st">"tfe3.ui"</span><span class="op">);</span></span> <span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a>win <span class="op">=</span> GTK_WIDGET <span class="op">(</span>gtk_builder_get_object <span class="op">(</span>build<span class="op">,</span> <span class="st">"win"</span><span class="op">));</span></span> <span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a>gtk_window_set_application <span class="op">(</span>GTK_WINDOW <span class="op">(</span>win<span class="op">),</span> GTK_APPLICATION <span class="op">(</span>app<span class="op">));</span></span> <span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a>nb <span class="op">=</span> GTK_WIDGET <span class="op">(</span>gtk_builder_get_object <span class="op">(</span>build<span class="op">,</span> <span class="st">"nb"</span><span class="op">));</span></span> <span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a>g_object_unref<span class="op">(</span>build<span class="op">);</span></span></code></pre></div> <p>The function <code>gtk_builder_new_from_file</code> reads the file <code>tfe3.ui</code>. Then, it builds the widgets and creates a GtkBuilder object. All the widgets are connected based on the parent-children relationship described in the ui file. We can retrieve objects from the builder object with the <code>gtk_builder_get_object</code> function. The top level window, which has an id of “win” in the ui file, is taken and assigned to the variable <code>win</code>. The window’s application property is set to <code>app</code> with the <code>gtk_window_set_application</code> function. The GtkNotebook, which has the id “nb” in the ui file, is also taken and assigned to the variable <code>nb</code>. After the window and application are connected, we no longer need the GtkBuilder instance. It is released with the <code>g_object_unref</code> function.</p> <p>The ui file reduces lines in the C source file.</p> <pre><code>$ cd tfe; diff tfe2.c tfe3.c 59a60 > GtkBuilder *build; 61,104c62,66 < GtkWidget *boxv; < GtkWidget *boxh; < GtkWidget *dmy1; < GtkWidget *dmy2; < GtkWidget *dmy3; < GtkWidget *btnn; /* button for new */ < GtkWidget *btno; /* button for open */ < GtkWidget *btns; /* button for save */ < GtkWidget *btnc; /* button for close */ < < win = gtk_application_window_new (GTK_APPLICATION (app)); < gtk_window_set_title (GTK_WINDOW (win), "file editor"); < gtk_window_set_default_size (GTK_WINDOW (win), 600, 400); < < boxv = gtk_box_new (GTK_ORIENTATION_VERTICAL, 0); < gtk_window_set_child (GTK_WINDOW (win), boxv); < < boxh = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0); < gtk_box_append (GTK_BOX (boxv), boxh); < < dmy1 = gtk_label_new(NULL); /* dummy label for left space */ < gtk_label_set_width_chars (GTK_LABEL (dmy1), 10); < dmy2 = gtk_label_new(NULL); /* dummy label for center space */ < gtk_widget_set_hexpand (dmy2, TRUE); < dmy3 = gtk_label_new(NULL); /* dummy label for right space */ < gtk_label_set_width_chars (GTK_LABEL (dmy3), 10); < btnn = gtk_button_new_with_label ("New"); < btno = gtk_button_new_with_label ("Open"); < btns = gtk_button_new_with_label ("Save"); < btnc = gtk_button_new_with_label ("Close"); < < gtk_box_append (GTK_BOX (boxh), dmy1); < gtk_box_append (GTK_BOX (boxh), btnn); < gtk_box_append (GTK_BOX (boxh), btno); < gtk_box_append (GTK_BOX (boxh), dmy2); < gtk_box_append (GTK_BOX (boxh), btns); < gtk_box_append (GTK_BOX (boxh), btnc); < gtk_box_append (GTK_BOX (boxh), dmy3); < < nb = gtk_notebook_new (); < gtk_widget_set_hexpand (nb, TRUE); < gtk_widget_set_vexpand (nb, TRUE); < gtk_box_append (GTK_BOX (boxv), nb); < --- > build = gtk_builder_new_from_file ("tfe3.ui"); > win = GTK_WIDGET (gtk_builder_get_object (build, "win")); > gtk_window_set_application (GTK_WINDOW (win), GTK_APPLICATION (app)); > nb = GTK_WIDGET (gtk_builder_get_object (build, "nb")); > g_object_unref(build); 138c100 < app = gtk_application_new ("com.github.ToshioCP.tfe2", G_APPLICATION_HANDLES_OPEN); --- > app = gtk_application_new ("com.github.ToshioCP.tfe3", G_APPLICATION_HANDLES_OPEN); 144a107 > </code></pre> <p><code>61,104c62,66</code> means that 44 (=104-61+1) lines are changed to 5 (=66-62+1) lines. Therefore, 39 lines are reduced. Using a ui file not only shortens C source files, but also makes the widgets’ structure clear.</p> <p>Now I’ll show you the <code>app_open</code> function in the C file <code>tfe3.c</code>.</p> <div class="sourceCode" id="cb5"><pre class="sourceCode numberSource C numberLines"><code class="sourceCode c"><span id="cb5-1"><a href="#cb5-1"></a><span class="dt">static</span> <span class="dt">void</span></span> <span id="cb5-2"><a href="#cb5-2"></a>app_open <span class="op">(</span>GApplication <span class="op">*</span>app<span class="op">,</span> GFile <span class="op">**</span> files<span class="op">,</span> gint n_files<span class="op">,</span> gchar <span class="op">*</span>hint<span class="op">)</span> <span class="op">{</span></span> <span id="cb5-3"><a href="#cb5-3"></a> GtkWidget <span class="op">*</span>win<span class="op">;</span></span> <span id="cb5-4"><a href="#cb5-4"></a> GtkWidget <span class="op">*</span>nb<span class="op">;</span></span> <span id="cb5-5"><a href="#cb5-5"></a> GtkWidget <span class="op">*</span>lab<span class="op">;</span></span> <span id="cb5-6"><a href="#cb5-6"></a> GtkNotebookPage <span class="op">*</span>nbp<span class="op">;</span></span> <span id="cb5-7"><a href="#cb5-7"></a> GtkWidget <span class="op">*</span>scr<span class="op">;</span></span> <span id="cb5-8"><a href="#cb5-8"></a> GtkWidget <span class="op">*</span>tv<span class="op">;</span></span> <span id="cb5-9"><a href="#cb5-9"></a> GtkTextBuffer <span class="op">*</span>tb<span class="op">;</span></span> <span id="cb5-10"><a href="#cb5-10"></a> <span class="dt">char</span> <span class="op">*</span>contents<span class="op">;</span></span> <span id="cb5-11"><a href="#cb5-11"></a> gsize length<span class="op">;</span></span> <span id="cb5-12"><a href="#cb5-12"></a> <span class="dt">char</span> <span class="op">*</span>filename<span class="op">;</span></span> <span id="cb5-13"><a href="#cb5-13"></a> <span class="dt">int</span> i<span class="op">;</span></span> <span id="cb5-14"><a href="#cb5-14"></a> GError <span class="op">*</span>err <span class="op">=</span> NULL<span class="op">;</span></span> <span id="cb5-15"><a href="#cb5-15"></a> GtkBuilder <span class="op">*</span>build<span class="op">;</span></span> <span id="cb5-16"><a href="#cb5-16"></a></span> <span id="cb5-17"><a href="#cb5-17"></a> build <span class="op">=</span> gtk_builder_new_from_file <span class="op">(</span><span class="st">"tfe3.ui"</span><span class="op">);</span></span> <span id="cb5-18"><a href="#cb5-18"></a> win <span class="op">=</span> GTK_WIDGET <span class="op">(</span>gtk_builder_get_object <span class="op">(</span>build<span class="op">,</span> <span class="st">"win"</span><span class="op">));</span></span> <span id="cb5-19"><a href="#cb5-19"></a> gtk_window_set_application <span class="op">(</span>GTK_WINDOW <span class="op">(</span>win<span class="op">),</span> GTK_APPLICATION <span class="op">(</span>app<span class="op">));</span></span> <span id="cb5-20"><a href="#cb5-20"></a> nb <span class="op">=</span> GTK_WIDGET <span class="op">(</span>gtk_builder_get_object <span class="op">(</span>build<span class="op">,</span> <span class="st">"nb"</span><span class="op">));</span></span> <span id="cb5-21"><a href="#cb5-21"></a> g_object_unref<span class="op">(</span>build<span class="op">);</span></span> <span id="cb5-22"><a href="#cb5-22"></a> <span class="cf">for</span> <span class="op">(</span>i <span class="op">=</span> <span class="dv">0</span><span class="op">;</span> i <span class="op"><</span> n_files<span class="op">;</span> i<span class="op">++)</span> <span class="op">{</span></span> <span id="cb5-23"><a href="#cb5-23"></a> <span class="cf">if</span> <span class="op">(</span>g_file_load_contents <span class="op">(</span>files<span class="op">[</span>i<span class="op">],</span> NULL<span class="op">,</span> <span class="op">&</span>contents<span class="op">,</span> <span class="op">&</span>length<span class="op">,</span> NULL<span class="op">,</span> <span class="op">&</span>err<span class="op">))</span> <span class="op">{</span></span> <span id="cb5-24"><a href="#cb5-24"></a> scr <span class="op">=</span> gtk_scrolled_window_new <span class="op">();</span></span> <span id="cb5-25"><a href="#cb5-25"></a> tv <span class="op">=</span> tfe_text_view_new <span class="op">();</span></span> <span id="cb5-26"><a href="#cb5-26"></a> tb <span class="op">=</span> gtk_text_view_get_buffer <span class="op">(</span>GTK_TEXT_VIEW <span class="op">(</span>tv<span class="op">));</span></span> <span id="cb5-27"><a href="#cb5-27"></a> gtk_text_view_set_wrap_mode <span class="op">(</span>GTK_TEXT_VIEW <span class="op">(</span>tv<span class="op">),</span> GTK_WRAP_WORD_CHAR<span class="op">);</span></span> <span id="cb5-28"><a href="#cb5-28"></a> gtk_scrolled_window_set_child <span class="op">(</span>GTK_SCROLLED_WINDOW <span class="op">(</span>scr<span class="op">),</span> tv<span class="op">);</span></span> <span id="cb5-29"><a href="#cb5-29"></a></span> <span id="cb5-30"><a href="#cb5-30"></a> tfe_text_view_set_file <span class="op">(</span>TFE_TEXT_VIEW <span class="op">(</span>tv<span class="op">),</span> g_file_dup <span class="op">(</span>files<span class="op">[</span>i<span class="op">]));</span></span> <span id="cb5-31"><a href="#cb5-31"></a> gtk_text_buffer_set_text <span class="op">(</span>tb<span class="op">,</span> contents<span class="op">,</span> length<span class="op">);</span></span> <span id="cb5-32"><a href="#cb5-32"></a> g_free <span class="op">(</span>contents<span class="op">);</span></span> <span id="cb5-33"><a href="#cb5-33"></a> filename <span class="op">=</span> g_file_get_basename <span class="op">(</span>files<span class="op">[</span>i<span class="op">]);</span></span> <span id="cb5-34"><a href="#cb5-34"></a> lab <span class="op">=</span> gtk_label_new <span class="op">(</span>filename<span class="op">);</span></span> <span id="cb5-35"><a href="#cb5-35"></a> gtk_notebook_append_page <span class="op">(</span>GTK_NOTEBOOK <span class="op">(</span>nb<span class="op">),</span> scr<span class="op">,</span> lab<span class="op">);</span></span> <span id="cb5-36"><a href="#cb5-36"></a> nbp <span class="op">=</span> gtk_notebook_get_page <span class="op">(</span>GTK_NOTEBOOK <span class="op">(</span>nb<span class="op">),</span> scr<span class="op">);</span></span> <span id="cb5-37"><a href="#cb5-37"></a> g_object_set <span class="op">(</span>nbp<span class="op">,</span> <span class="st">"tab-expand"</span><span class="op">,</span> TRUE<span class="op">,</span> NULL<span class="op">);</span></span> <span id="cb5-38"><a href="#cb5-38"></a> g_free <span class="op">(</span>filename<span class="op">);</span></span> <span id="cb5-39"><a href="#cb5-39"></a> <span class="op">}</span> <span class="cf">else</span> <span class="op">{</span></span> <span id="cb5-40"><a href="#cb5-40"></a> g_printerr <span class="op">(</span><span class="st">"</span><span class="sc">%s</span><span class="st">.</span><span class="sc">\n</span><span class="st">"</span><span class="op">,</span> err<span class="op">-></span>message<span class="op">);</span></span> <span id="cb5-41"><a href="#cb5-41"></a> g_clear_error <span class="op">(&</span>err<span class="op">);</span></span> <span id="cb5-42"><a href="#cb5-42"></a> <span class="op">}</span></span> <span id="cb5-43"><a href="#cb5-43"></a> <span class="op">}</span></span> <span id="cb5-44"><a href="#cb5-44"></a> <span class="cf">if</span> <span class="op">(</span>gtk_notebook_get_n_pages <span class="op">(</span>GTK_NOTEBOOK <span class="op">(</span>nb<span class="op">))</span> <span class="op">></span> <span class="dv">0</span><span class="op">)</span> <span class="op">{</span></span> <span id="cb5-45"><a href="#cb5-45"></a> gtk_window_present <span class="op">(</span>GTK_WINDOW <span class="op">(</span>win<span class="op">));</span></span> <span id="cb5-46"><a href="#cb5-46"></a> <span class="op">}</span> <span class="cf">else</span></span> <span id="cb5-47"><a href="#cb5-47"></a> gtk_window_destroy <span class="op">(</span>GTK_WINDOW <span class="op">(</span>win<span class="op">));</span></span> <span id="cb5-48"><a href="#cb5-48"></a><span class="op">}</span></span></code></pre></div> <p>The whole source code of <code>tfe3.c</code> is stored in the src/tfe directory.</p> <h3 id="using-ui-string">Using ui string</h3> <p>GtkBuilder can build widgets with a string. Use <code>gtk_builder_new_from_string</code> instead of <code>gtk_builder_new_from_file</code>.</p> <div class="sourceCode" id="cb6"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="dt">char</span> <span class="op">*</span>uistring<span class="op">;</span></span> <span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a></span> <span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a>uistring <span class="op">=</span></span> <span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a><span class="st">"<interface>"</span></span> <span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a> <span class="st">"<object class=</span><span class="sc">\"</span><span class="st">GtkApplicationWindow</span><span class="sc">\"</span><span class="st"> id=</span><span class="sc">\"</span><span class="st">win</span><span class="sc">\"</span><span class="st">>"</span></span> <span id="cb6-6"><a href="#cb6-6" aria-hidden="true" tabindex="-1"></a> <span class="st">"<property name=</span><span class="sc">\"</span><span class="st">title</span><span class="sc">\"</span><span class="st">>file editor</property>"</span></span> <span id="cb6-7"><a href="#cb6-7" aria-hidden="true" tabindex="-1"></a> <span class="st">"<property name=</span><span class="sc">\"</span><span class="st">default-width</span><span class="sc">\"</span><span class="st">>600</property>"</span></span> <span id="cb6-8"><a href="#cb6-8" aria-hidden="true" tabindex="-1"></a> <span class="st">"<property name=</span><span class="sc">\"</span><span class="st">default-height</span><span class="sc">\"</span><span class="st">>400</property>"</span></span> <span id="cb6-9"><a href="#cb6-9" aria-hidden="true" tabindex="-1"></a> <span class="st">"<child>"</span></span> <span id="cb6-10"><a href="#cb6-10" aria-hidden="true" tabindex="-1"></a> <span class="st">"<object class=</span><span class="sc">\"</span><span class="st">GtkBox</span><span class="sc">\"</span><span class="st">>"</span></span> <span id="cb6-11"><a href="#cb6-11" aria-hidden="true" tabindex="-1"></a> <span class="st">"<property name=</span><span class="sc">\"</span><span class="st">orientation</span><span class="sc">\"</span><span class="st">>GTK_ORIENTATION_VERTICAL</property>"</span></span> <span id="cb6-12"><a href="#cb6-12" aria-hidden="true" tabindex="-1"></a><span class="op">...</span> <span class="op">...</span> <span class="op">...</span></span> <span id="cb6-13"><a href="#cb6-13" aria-hidden="true" tabindex="-1"></a><span class="op">...</span> <span class="op">...</span> <span class="op">...</span></span> <span id="cb6-14"><a href="#cb6-14" aria-hidden="true" tabindex="-1"></a><span class="st">"</interface>"</span><span class="op">;</span></span> <span id="cb6-15"><a href="#cb6-15" aria-hidden="true" tabindex="-1"></a></span> <span id="cb6-16"><a href="#cb6-16" aria-hidden="true" tabindex="-1"></a>build <span class="op">=</span> gtk_builder_new_from_string <span class="op">(</span>uistring<span class="op">,</span> <span class="op">-</span><span class="dv">1</span><span class="op">);</span></span></code></pre></div> <p>This method has an advantage and disadvantage. The advantage is that the ui string is written in the source code. So, no ui file is needed at runtime. The disadvantage is that writing the C string is a bit bothersome, as the xml needs quoting and special characters need escaping. If you want to use this method, you should write a script that transforms ui files into C-strings.</p> <ul> <li>Replace backslashes with two backslashes.</li> <li>Add a backslash before each double quote.</li> <li>Add double quotes at the left and right of the string in each line.</li> </ul> <p>Or, if you have <code>jq</code> installed, you can use <code>jq -R < tfe3.ui</code> to do the quoting and escaping for you.</p> <h3 id="gresource">Gresource</h3> <p>A Gresource is similar to a string, except that a Gresource is compressed binary data, not text data. The <code>glib-compile-resources</code> program compiles ui files into Gresources. It can compile not only text files but also binary files such as images, sounds and so on. After compilation, it bundles them up into one Gresource object.</p> <p>An xml file is necessary for the resource compiler <code>glib-compile-resources</code>. It describes resource files.</p> <div class="sourceCode" id="cb7"><pre class="sourceCode numberSource xml numberLines"><code class="sourceCode xml"><span id="cb7-1"><a href="#cb7-1"></a><span class="fu"><?xml</span><span class="ot"> version=</span><span class="st">"1.0"</span><span class="ot"> encoding=</span><span class="st">"UTF-8"</span><span class="fu">?></span></span> <span id="cb7-2"><a href="#cb7-2"></a><<span class="kw">gresources</span>></span> <span id="cb7-3"><a href="#cb7-3"></a> <<span class="kw">gresource</span><span class="ot"> prefix=</span><span class="st">"/com/github/ToshioCP/tfe3"</span>></span> <span id="cb7-4"><a href="#cb7-4"></a> <<span class="kw">file</span>>tfe3.ui</<span class="kw">file</span>></span> <span id="cb7-5"><a href="#cb7-5"></a> </<span class="kw">gresource</span>></span> <span id="cb7-6"><a href="#cb7-6"></a></<span class="kw">gresources</span>></span></code></pre></div> <ul> <li>2: <code>gresources</code> tag can include multiple gresources (gresource tags). However, this xml has only one gresource.</li> <li>3: The gresource has a prefix <code>/com/github/ToshioCP/tfe3</code>.</li> <li>4: The name of the gresource is <code>tfe3.ui</code>. The resource will be pointed with <code>/com/github/ToshioCP/tfe3/tfe3.ui</code> by GtkBuilder. The pattern is “prefix” + “name”. If you want to add more files, insert them between line 4 and 5.</li> </ul> <p>Save this xml text to <code>tfe3.gresource.xml</code>. The gresource compiler <code>glib-compile-resources</code> shows its usage with the argument <code>--help</code>.</p> <pre><code>$ glib-compile-resources --help Usage: glib-compile-resources [OPTION..] FILE Compile a resource specification into a resource file. Resource specification files have the extension .gresource.xml, and the resource file have the extension called .gresource. Help Options: -h, --help Show help options Application Options: --version Show program version and exit --target=FILE Name of the output file --sourcedir=DIRECTORY The directories to load files referenced in FILE from (default: current directory) --generate Generate output in the format selected for by the target filename extension --generate-header Generate source header --generate-source Generate source code used to link in the resource file into your code --generate-dependencies Generate dependency list --dependency-file=FILE Name of the dependency file to generate --generate-phony-targets Include phony targets in the generated dependency file --manual-register Don't automatically create and register resource --internal Don't export functions; declare them G_GNUC_INTERNAL --external-data Don't embed resource data in the C file; assume it's linked externally instead --c-name C identifier name used for the generated source code -C, --compiler The target C compiler (default: the CC environment variable)</code></pre> <p>Now run the compiler.</p> <pre><code>$ glib-compile-resources tfe3.gresource.xml --target=resources.c --generate-source</code></pre> <p>Then a C source file <code>resources.c</code> is generated. Modify <code>tfe3.c</code> and save it as <code>tfe3_r.c</code>.</p> <div class="sourceCode" id="cb10"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="pp">#include </span><span class="im">"resources.c"</span></span> <span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a><span class="op">...</span> <span class="op">...</span> <span class="op">...</span></span> <span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a><span class="op">...</span> <span class="op">...</span> <span class="op">...</span></span> <span id="cb10-4"><a href="#cb10-4" aria-hidden="true" tabindex="-1"></a>build <span class="op">=</span> gtk_builder_new_from_resource <span class="op">(</span><span class="st">"/com/github/ToshioCP/tfe3/tfe3.ui"</span><span class="op">);</span></span> <span id="cb10-5"><a href="#cb10-5" aria-hidden="true" tabindex="-1"></a><span class="op">...</span> <span class="op">...</span> <span class="op">...</span></span> <span id="cb10-6"><a href="#cb10-6" aria-hidden="true" tabindex="-1"></a><span class="op">...</span> <span class="op">...</span> <span class="op">...</span></span></code></pre></div> <p>The function <code>gtk_builder_new_from_resource</code> builds widgets from a resource.</p> <p>Then, compile and run it.</p> <pre><code>$ comp tfe3_r $ ./a.out tfe2.c</code></pre> <p>A window appears and it is the same as the screenshot at the beginning of this page.</p> <p>Generally, resources are best for C programs. If you use other languages like Ruby, strings are better than resources.</p> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html>