ruby-****@sourc*****
ruby-****@sourc*****
2009年 3月 3日 (火) 02:38:35 JST
-------------------------
REMOTE_ADDR = 74.15.84.244
REMOTE_HOST =
URL = http://ruby-gnome2.sourceforge.jp/hiki.cgi?tut-gtk2-dynui-glade
-------------------------
TITLE = tut-gtk2-dynui-glade
KEYWORD =
= Dynamic User Interfaces Built With Glade
{{link "tut-gtk2-dynui", "tut-gtk2-dynui", "tut-gtk", "tut-gtk2-dynui-xxx"}}
== The Glade User Interface Builder
One factor that can make or break a GUI toolkit is weather it can be used to rapidly deploy applications. While the user interface is extremely important to the success of an application, it should not represent the most consuming aspect of the development process.
{{image_left("glade-logo.png")}}
Glade is a tool that allows you to quickly and efficiently design graphical user interfaces, so that you can move on to other aspects of your code. User interfaces are saved as XML files. You load these files into your application with the help of Libglade. This makes your user interface independent of a programming language. Moreover, often it may allow you to modify your user interface without the need to modify your program and for those that use compiled languages without the need to recompile your application. Here is ((<Glade Home page|http://glade.gnome.org/index.html>))
:Note:
Previous versions of Glade allowed you to generate source code instead of saving the user interface in an XML file. This method is deprecated, because it is difficult to manage when you want to change your user interface. Therefore you should you should get accustomed to the method described here.
You need to realize from the start what Glade is and what it is not. Glade is used to design the user interface of an application, set up signals that will be associated with callbacks implemented in your code, and take care of common widget properties. However, Glade is not a code generator or code editor, or an IDE. The files it outputs must be loaded by your application, and you must implement all of the callbacks in your code. Glade is just meant to simplify the process of initializing your application's graphical user interface and connecting signals.
:Tip:
Glade 3, the version used in our tutorials, now allows IDE's such as ((<Anjuta IDE|http://www.anjuta.org/>)), to embed it into their user interface. These IDEs provide a complete, start-to-finish solution for developing GTK+ applications.
Another advantage of Glade is that, since the user interfaces are stored as XML files, they are independent of the language. Any language that has wrapped the functionality provided by Libglade can load user interfaces. This means that the same graphical user interface designer can be used regardless of the programming language you choose.
:Install Glade and Libglade
If you are running examples while reading this tutorial, you will need Glade and Libglade installed on your system. On most Linux systems you will be able to install it from your Software Package Managers, on Windows check out the ((<gladewin32|URL:http://sourceforge.net/projects/gladewin32>)). Once you have Glade installed check also out: ((<"Ruby/Libglade">)).
Also, you should make sure to follow along and create the application, we call ((*browser*)), while reading the rest of the chapter. This will give you a chance to learn your way around the Glade 3 application so you can get as much practise as possible while you use this tutorial (Andrew Klause's GTK+ book) as a guide. For your convenience and confidence I also include the ((*browser.glade*)) file which you should save in your working folder, so you can open it with Glade and check out details you may miss during the session.
:Note:
We will not discuss the contents of the ((*browser.glade*)) file, nor should you be concerned about it in this tutorial. It is included here only to be downloaded and loaded into Glade so, when the time comes, you can verify your work against it.
((*browser.glade*))
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE glade-interface SYSTEM "glade-2.0.dtd">
<!--Generated with glade3 3.0.2 on Tue Dec 5 20:08:42 2006 by user ＠ chewy-->
<glade-interface>
<widget class="GtkWindow" id="window">
<property name="height_request">500</property>
<property name="title" translatable="yes">File Browser</property>
<signal name="destroy" handler="gtk_main_quit"/>
<child>
<widget class="GtkVBox" id="vbox">
<property name="visible">True</property>
<child>
<widget class="GtkHandleBox" id="handlebox">
<property name="visible">True</property>
<child>
<widget class="GtkToolbar" id="toolbar">
<property name="visible">True</property>
<property name="toolbar_style">GTK_TOOLBAR_BOTH</property>
<property name="show_arrow">False</property>
<child>
<widget class="GtkMenuToolButton" id="back">
<property name="visible">True</property>
<property name="stock_id">gtk-go-back</property>
<signal name="clicked" handler="on_back_clicked"/>
</widget>
</child>
<child>
<widget class="GtkMenuToolButton" id="forward">
<property name="visible">True</property>
<property name="stock_id">gtk-go-forward</property>
<signal name="clicked" handler="on_forward_clicked"/>
</widget>
</child>
<child>
<widget class="GtkSeparatorToolItem" id="separator">
<property name="visible">True</property>
</widget>
</child>
<child>
<widget class="GtkToolButton" id="up">
<property name="visible">True</property>
<property name="stock_id">gtk-go-up</property>
<signal name="clicked" handler="on_up_clicked"/>
</widget>
</child>
<child>
<widget class="GtkToolButton" id="refresh">
<property name="visible">True</property>
<property name="stock_id">gtk-refresh</property>
<signal name="clicked" handler="on_refresh_clicked"/>
</widget>
</child>
<child>
<widget class="GtkToolButton" id="home">
<property name="visible">True</property>
<property name="stock_id">gtk-home</property>
<signal name="clicked" handler="on_home_clicked"/>
</widget>
</child>
<child>
<widget class="GtkSeparatorToolItem" id="separator2">
<property name="visible">True</property>
</widget>
</child>
<child>
<widget class="GtkToolButton" id="delete">
<property name="visible">True</property>
<property name="stock_id">gtk-delete</property>
<signal name="clicked" handler="on_delete_clicked"/>
</widget>
</child>
<child>
<widget class="GtkToolButton" id="info">
<property name="visible">True</property>
<property name="stock_id">gtk-dialog-info</property>
<signal name="clicked" handler="on_info_clicked"/>
</widget>
</child>
</widget>
</child>
</widget>
<packing>
<property name="expand">False</property>
</packing>
</child>
<child>
<widget class="GtkHBox" id="hbox">
<property name="visible">True</property>
<property name="border_width">5</property>
<property name="spacing">5</property>
<child>
<widget class="GtkLabel" id="label_location">
<property name="visible">True</property>
<property name="label" translatable="yes"><b>Current Location:</b></property>
<property name="use_markup">True</property>
</widget>
<packing>
<property name="expand">False</property>
</packing>
</child>
<child>
<widget class="GtkEntry" id="location">
<property name="visible">True</property>
<signal name="activate" handler="on_location_activate"/>
</widget>
<packing>
<property name="position">1</property>
</packing>
</child>
<child>
<widget class="GtkButton" id="go">
<property name="visible">True</property>
<property name="relief">GTK_RELIEF_NONE</property>
<signal name="clicked" handler="on_go_clicked"/>
<child>
<widget class="GtkHBox" id="hbox2">
<property name="visible">True</property>
<property name="spacing">3</property>
<child>
<widget class="GtkImage" id="image">
<property name="visible">True</property>
<property name="stock">gtk-jump-to</property>
</widget>
</child>
<child>
<widget class="GtkLabel" id="label">
<property name="visible">True</property>
<property name="label" translatable="yes">Go</property>
</widget>
<packing>
<property name="position">1</property>
</packing>
</child>
</widget>
</child>
</widget>
<packing>
<property name="expand">False</property>
<property name="position">2</property>
</packing>
</child>
</widget>
<packing>
<property name="expand">False</property>
<property name="position">1</property>
</packing>
</child>
<child>
<widget class="GtkScrolledWindow" id="scrolledwindow">
<property name="visible">True</property>
<property name="hscrollbar_policy">GTK_POLICY_AUTOMATIC</property>
<property name="vscrollbar_policy">GTK_POLICY_AUTOMATIC</property>
<child>
<widget class="GtkTreeView" id="treeview">
<property name="visible">True</property>
<signal name="row_activated" handler="on_row_activated"/>
</widget>
</child>
</widget>
<packing>
<property name="position">2</property>
</packing>
</child>
<child>
<widget class="GtkStatusbar" id="statusbar">
<property name="visible">True</property>
</widget>
<packing>
<property name="expand">False</property>
<property name="position">3</property>
</packing>
</child>
</widget>
</child>
</widget>
</glade-interface>
=== The Glade Interface
When you launch Glade 3 for the first time, you will see three panes in the main window: The widget palette on the left, the canvas window on the middle, and the widget property editor on the right.
{{image_left("glade-fig-10-00-glade.png")}}
=== Main Glade window with its menus.
The main window with its menu facilitates Glade project management. The menu contains standard menu options such as File, Edit, and View, which will serve you when save new or modified projects, load existing ones or use many other options that will help you when working with projects. The Project menu shows a list of currently opened projects, allowing you to switch among them.
=== The Palette
{{image_left("glade-fig-10-00-view-menu.png")}}{{image_left("glade-fig-10-00-palette-2.png")}}
The palette pane lists all the available widgets which you can use to design your applications. You can customize the layout of palette through the View menu to display (1) Text beside icons (2) Icons only, or (3) Text only. Switching the view may be useful for a beginner user, who often needs additional hints identifying and mapping icons to the widgets they represent.
{{br}}
{{image_left("glade-fig-10-00-palette-1-s1.png")}}
By default there are four categories of widgets displayed in the palette: (1) top-level widgets, (2) containers, (3) widgets used for control and display, and (4) deprecated widgets. You should not use the deprecated widgets in new applications, because they may be removed in the future releases. In addition to the to the default categories of widgets, you may find other categories that include additional widget libraries, such as GNOME and other custom widget libraries.
{{br}}
{{image_right("glade-fig-10-00-propNtree-s1.png")}}
To create a new top-level widget, all you need to do is click the icon of the desired widget in the Toplevels section in the palette. A new top-level widget will immediately be displayed in the middle pane and also added to the tree view above the Properties in the right hand-side pane.