演示环境说明:本机使用Windows 11 家庭版本搭载 Ubuntu 22.04.4 LTS 子系统,同时并安装Ubuntu桌面虚拟化软件XLaunch。
如果没有搭建好上述问题,请参考:windows11子系统Ubuntu 22.04.4子安装图形化界面
Glade是什么?
glade是一个RAD(rapid application develop,快速应用开发)工具,能够为gtk+工具包和gnome桌面环境快速而简单地开发用户界面。Glade中设计的用户界面保存为XML,通过使用GtkBuilder GTK +对象,应用程序可以根据需要动态加载这些界面。通过使用GtkBuilder,Glade XML文件可以用于多种编程语言,包括C,C ++,C#,Vala,Java,Perl,Python等。Glade是根据GNU GPL许可证发布的自由软件。
Ubuntu 快速搭建Glade 开发环境
#安装 devhelp GTK文档查看程序
sudo apt-get install devhelp#安装 gtk/glib 的API参考手册及其它帮助文档
sudo apt-get install libglib2.0-doc libgtk-3-doc#安装基于GTK的界面GTK是开发Gnome窗口的c/c++语言图形库
sudo apt-get install glade libgtk-3-dev
Ubuntu 运行Glade
1、打开Ubuntu 系统控制台,输入glade 命令,图形界面软件打开后如下截图所示。
Glade 项目实例
功能要求:设计一个简单的登入窗口页面。
原型设计:
第一步:创建UI项目文件夹
- 创建一个项目,点击图标
- 点击保存按钮
- 弹出一个对话框,创建项目文件夹,点击图标
- 在顶部名称栏中输入自定义的名称
- 点击右下角的保存按钮,项目创建完成
第二步:设置用户登入界面窗口
1.在Glade中创建顶层窗口,如图
2.更改窗口ID
我们现在可以选择更改窗口ID。这是将在C代码中引用窗口的名称。在下图中,它从GtkWindow的默认名称更改为window_main。在Glade窗口右侧的“常规”窗格中进行更改。
3.更改默认窗口大小
可以选择更改窗口的默认大小。这将是由C程序创建时窗口的大小。如需自定义窗口大小,如下图,下图显示窗口大小已更改为640像素宽x 480像素高。
4.将回调函数连接到destroy 信号
当C程序显示当前在glade中设计的窗口时,当窗口关闭时,它将发出destroy 信号。回调函数需要连接到destroy 信号,关闭窗口时,将运行的destroy 信号。
如图,点击“信号”标签,向下滚动,找到GtkWidget ,点击展开项,向下滚动找到destroy。点击<Type here>标签,输入on,软件会给推荐的处理函数名称,选择如图所示的名称,按Enter键确认。
5.更改窗口标题,如图提示操作,输入标题名称
6.保存glade文件,点击右上角按钮
第三步:设置登入界面窗口内元素
1、选择布局控件GtkBox(盒子/水平布局),设置4行并且间隔设置为10 元素。
2、在GtkBox(盒子/水平布局)第一行放置一个普通文本用来显示"标题 "
3、 在GtkBox(盒子/水平布局)第二行放置一个GtkGride(表格控件),设置一行两列
左边放置普通文本设置默认值为"username", 设置默认宽度和高度
右边设置输入文本框,设置ID 为"username", 设置输入框提示语, 设置默认宽度和高度。
4、请重复第三步,将普通文本显示默认值修改为"password",
将输入文本框的ID修完passwd
5、在GtkBox(盒子/水平布局)第四行放置一个GtkGride(表格控件),设置一行两列。
左边放置普通按钮设置标题为"login", 设置默认宽度和高度, 并设置点击响应事件(on_login_clicked)。
右边放置普通按钮设置标题为"cancel", 设置默认宽度和高度, 并设置点击响应事件(on_cancel_clicked)。
第四步:GTK 程序与Glade 图形化设计页面集成
第一步:创建gtk_demo30.c文件,使用名为his_login.glade的XML文件创建你上面步骤设计的登入窗口。建议:将此文件保存到包含已创建的glade文件的同一目录或文件夹中。代码如下所示:
#include<stdio.h>
#include<gtk-3.0/gtk/gtk.h>static void on_login_clicked(GtkButton *button, gpointer user_data){GtkEntry *username = GTK_ENTRY(gtk_builder_get_object(GTK_BUILDER(user_data), "username"));GtkEntry *passwd = GTK_ENTRY(gtk_builder_get_object(GTK_BUILDER(user_data), "passwd"));const gchar *username_text = gtk_entry_get_text(username);const gchar *passwd_text = gtk_entry_get_text(passwd);printf("用户输入的用户名:%s, 密码:%s\n",username_text, passwd_text);printf("点击按钮触发\n");
} static void on_cancel_clicked(GtkButton *button, gpointer user_data){printf("取消按钮触发\n");
}int main(int argc, char *argv[]) {GtkBuilder *builder;GtkWidget *window;GtkWidget *login;GtkWidget *cancel;GtkWidget *username;GtkWidget *passwd;gtk_init(&argc, &argv); // gtk 初始化builder = gtk_builder_new();// 创建新的builder 对象gtk_builder_add_from_file(builder, "his_login.glade", NULL);// 组件实例化window = GTK_WIDGET(gtk_builder_get_object(builder,"window_main")); // gtk 窗口实例化login = GTK_WIDGET(gtk_builder_get_object(builder,"login")); //登入按钮实例化cancel = GTK_WIDGET(gtk_builder_get_object(builder,"cancel")); //取消按钮实例化username = GTK_WIDGET(gtk_builder_get_object(builder,"username")); //账户输入文本框passwd = GTK_WIDGET(gtk_builder_get_object(builder,"passwd")); //密码输入文本框//组件事件绑定 g_signal_connect (login, "clicked", G_CALLBACK (on_login_clicked), builder);g_signal_connect (cancel, "clicked", G_CALLBACK (on_cancel_clicked), builder);gtk_builder_connect_signals(builder, NULL);//g_object_unref(builder);gtk_widget_show(window); // 显示windows 窗口包含的所有gtk 组件gtk_main(); //gtk 主事件循环开启return 0;}
总结
1、glade 声明ID和回调函数,必须在*c 文件中必须一一对应上.
2、glade 组件实例化是通过builder 构建器完成,不在是通过gtk 相关组件头文件调用实现。
编译代码,在编译代码之前,请确保已安装GTK+3开发库。在Ubuntu 命令窗口中输入编译命令:
gcc `pkg-config --cflags gtk+-3.0` -o gtk_demo30 gtk_demo30.c `pkg-config --libs gtk+-3.0`
运行应用程序,输入./gtk_demo30,效果如下图:
Glade 项目运行中遇到的问题
第一:绘制完his_login.glade 文件,编写完gtk_demo30.c 执行完编译命令,执行./gtk_demo30 程序,窗口提示:
Gtk-CRITICAL **: gtk_builder_get_object: assertion `GTK_IS_BUILDER (builder)' failed
Google 一下,国外网友给出的解决办法:
以下是原文截图:
解决办法:
大致意思是:移除g_object_unref(G_OBJECT(builder))
原因:由于g_object_unref(G_OBJECT(builder)) 导致无法使用builder构建器访问其他的组件,因此需要被移除。