Glade

Gladeの概要

Gladeは、GTKアプリケーションのGUIを視覚的に設計できるツールです。UIデザインをXMLファイルとして保存し、プログラムから読み込むことができます。

インストール方法

# Debian/Ubuntu
sudo apt-get install glade

# Fedora
sudo dnf install glade

# Arch Linux
sudo pacman -S glade

基本的な使用方法

Gladeファイルの読み込み（Python）

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk

class MainWindow:
    def __init__(self):
        # Builderオブジェクトの作成
        self.builder = Gtk.Builder()
        
        # Gladeファイルの読み込み
        self.builder.add_from_file("interface.glade")
        
        # シグナルの自動接続
        self.builder.connect_signals(self)
        
        # メインウィンドウの取得
        self.window = self.builder.get_object("main_window")
        self.window.connect("destroy", Gtk.main_quit)
        
        # ウィジェットの表示
        self.window.show_all()

    def on_button1_clicked(self, button):
        print("Button clicked!")

app = MainWindow()
Gtk.main()

ウィジェットの設計と配置

基本的なレイアウト構造

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk+" version="3.0"/>
  <object class="GtkWindow" id="main_window">
    <property name="title">My Application</property>
    <child>
      <object class="GtkBox">
        <property name="orientation">vertical</property>
        <property name="spacing">6</property>
        <child>
          <object class="GtkLabel">
            <property name="label">Welcome!</property>
          </object>
        </child>
        <child>
          <object class="GtkButton" id="button1">
            <property name="label">Click Me</property>
            <signal name="clicked" handler="on_button1_clicked"/>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

シグナルとハンドラの設定

シグナル接続の実装例

class SignalHandler:
    def on_window_destroy(self, window):
        Gtk.main_quit()
    
    def on_button1_clicked(self, button):
        dialog = Gtk.MessageDialog(
            parent=window,
            flags=0,
            message_type=Gtk.MessageType.INFO,
            buttons=Gtk.ButtonsType.OK,
            text="Button Clicked!"
        )
        dialog.run()
        dialog.destroy()

builder = Gtk.Builder()
builder.add_from_file("interface.glade")
builder.connect_signals(SignalHandler())

高度なウィジェット設定

ListStoreとTreeViewの設定

<object class="GtkListStore" id="liststore1">
  <columns>
    <column type="gchararray"/>
    <column type="gchararray"/>
    <column type="gint"/>
  </columns>
  <data>
    <row>
      <col id="0">John</col>
      <col id="1">Developer</col>
      <col id="2">30</col>
    </row>
  </data>
</object>

<object class="GtkTreeView" id="treeview1">
  <property name="model">liststore1</property>
  <child>
    <object class="GtkTreeViewColumn">
      <property name="title">Name</property>
      <child>
        <object class="GtkCellRendererText"/>
        <attributes>
          <attribute name="text">0</attribute>
        </attributes>
      </child>
    </object>
  </child>
</object>

カスタムウィジェットの作成

カスタムコンポーネント定義

@Gtk.Template(filename="custom_widget.glade")
class CustomWidget(Gtk.Box):
    __gtype_name__ = 'CustomWidget'
    
    label = Gtk.Template.Child()
    button = Gtk.Template.Child()
    
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        
    @Gtk.Template.Callback()
    def on_button_clicked(self, button):
        self.label.set_text("Button was clicked!")

データバインディングとプロパティ

GtkBuilder XMLでのバインディング

<object class="GtkEntry" id="name_entry">
  <property name="text" bind-source="person" bind-property="name" bind-flags="bidirectional"/>
</object>

レスポンシブデザイン

GtkStack使用例

<object class="GtkStack" id="stack">
  <property name="transition-type">slide-left-right</property>
  <child>
    <object class="GtkBox" id="page1">
      <property name="name">page1</property>
      <!-- ページ1のコンテンツ -->
    </object>
  </child>
  <child>
    <object class="GtkBox" id="page2">
      <property name="name">page2</property>
      <!-- ページ2のコンテンツ -->
    </object>
  </child>
</object>

CSSスタイリング

スタイル定義

.custom-button {
    background-color: #4CAF50;
    color: white;
    border-radius: 4px;
    padding: 8px;
}

.header-label {
    font-size: 18px;
    font-weight: bold;
}

スタイルの適用

<object class="GtkButton">
  <property name="label">Styled Button</property>
  <style>
    <class name="custom-button"/>
  </style>
</object>

ベストプラクティス

プロジェクト構造

project/
├── src/
│   ├── main.py
│   └── handlers.py
├── ui/
│   ├── main_window.glade
│   └── custom_widget.glade
└── css/
    └── style.css

リソース管理

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
  <gresource prefix="/org/example/app">
    <file preprocess="xml-stripblanks">ui/main_window.glade</file>
    <file>css/style.css</file>
  </gresource>
</gresources>

エラー処理

try:
    builder = Gtk.Builder()
    builder.add_from_file("interface.glade")
except GLib.Error as e:
    print(f"Error loading UI file: {e.message}")
    sys.exit(1)

Gladeを使用することで、GTKアプリケーションのUI開発が大幅に効率化されます。視覚的なデザインツールとプログラムコードの分離により、メンテナンス性も向上します。