1-5 glade

1-5 glade

对于图形编程，控件窗口的布局，信号的触发，事件的处理，以及多线程等等，是必须要了解的，
布局可以通过代码，进行处理，不过比较抽象，如果在qt上，或者mfc，c#上，都可以直接拖入控件，进行处理
gtk的大体流程如下:

1）创建主窗口，根据需要设置窗口的相应属性
2）创建布局容器
3）把布局容器添加到窗口里
4）根据需要创建相应的控件，根据需要设置控件的相应属性
5）把控件添加到布局容器里
6）根据需要处理控件的信号
7）显示所有的控件

glade是GTK+界面的辅助设计工具，通过拖入控件的方式快速设计出用户界面，这样的优势在于设计时可以直观的看到界面上的控件，随时调整界面上的控件

安装
Linux环境搭建

测试是否安装成功，在终端敲 glade 即可：
windows：
https://glade.gnome.org/

安装即可
需要注意的是，如果是windows版本的glade设计界面，保存的时候有 2 种格式，Libglade ( gtk2.12前的版本 ), GtkBuilder( 新版的，现在用的是这个版本 )，格式不一样，最终使用的库函数不一样。如图：

glade的整体框图：

常用控件选择区：列举了常用的控件，常用的有三类：顶层(主窗口等)，容器(各种布局容器等)，控制和显示(按钮、便签、图片控件等)

当鼠标放在控件时，会自动显示控件的中文文字，同时，还能人为设置，如下图：


界面编辑区：把控件拖放在这进行进行相应的布局
控件监视区：能够看到界面上所有的控件，同时，选中这个控件，可以看到这个控件的具体类型

属性编辑区：编辑选中控件的常用属性，如窗口设置标题、窗口类型、屏幕上显示位置等。
工具栏：常用的有以下几个按钮
新建：新建一个glade文件
打开：打开一个已经存在的glade文件
保存：保存一个glade文件
选择：按了这个按钮， 才能选择控件
拖拽调整大小：按了这个按钮，才能移动控件的位置，改变控件的大小

现在开始学习Glade的操作。
选择控件时，一定要先按工具栏的“选择”按钮
操作时，支持撤销(Ctrl+z)和恢复(Ctrl+y)等window的快捷键
操作的流程和布局的过程是一致的：
1）选择主窗口，根据需要设置窗口的相应属性
2）选择布局容器
3）根据需要选择相应的控件，根据需要设置控件的相应属性
第一步：选择主窗口，根据需要设置窗口的相应属性
1）选择窗口


2）设置窗口标题：我们一起学习Glade；固定窗口大小；设置窗口位置：中心

3）设置窗口的宽度和高度

第二步：选择布局容器(固定布局能允许用户任意布局，所以我们选择此布局)


第三步：根据需要选择相应的控件，根据需要设置控件的相应属性（每个控件的设置方法都差不多，这里以“按钮”为例）
1）选择两个按钮



2）调整按钮的位置以及其大小(有两种方法可以设置)
A）在界面编辑区里通过拖拽方式进行调整

B）通过属性编辑区进行设置(先设置起点坐标，再设置其宽度和高度)
a) 设置控件的起点坐标

b）设置控件的宽度和高度


4）设置按钮的属性
A）第一个按钮作为带文本内容的普通按钮


B）第二按钮为没边框的按钮
按钮去边框


其它控件的操作方法也是差不多的，这里就不一一列举。
在代码操作时，我们需要关心的是，如何通过代码获得这个界面的控件，如本例子中的(主窗口，按钮)，而在界面里，每个控件都有一个标识名称，这个标识名称就是在控件监视区的名字，我们代码里就通过这个标识名称来获取界面里的控件：

这个标识名称是可以修改的，如下图


到这里，我们的界面就已经设置好了（一个主窗口里放了一个固定布局，布局里还放了2个按钮），保存这个界面即可使用，保存的时候选择合适路径以默认方式保存即可，文件的后缀名可以任意，为了易于辨别文件，我们最好以 .glade 后缀，这里保存为test.glade。
代码操作
可以简单分为两步：
1）读取glade文件

    builder := gtk.NewBuilder()       //新建builder

// 读取test.glade文件的信息
 builder.AddFromFile("test.glade") //读取glade文件

2）获取glade文件里的控件

// 获取窗口控件指针，注意"window1" 要和glade里的标志名称匹配

 window := gtk.WindowFromObject(builder.GetObject("window1"))
    b1 := gtk.ButtonFromObject(builder.GetObject("button_previous")) //获取按钮1
    b2 := gtk.ButtonFromObject(builder.GetObject("button_next"))     //获取按钮2 

通过上面的例子，利用 glade 工具, 我们可以通过拖放控件的方式快速设计出用户界面，可以很直观地进行相应的布局。但是，如果我们要想实现更多的功能，如给窗口设置背景图，让按钮做相应操作，我们还得通过代码实现。glade只是辅助我们设计窗口，它不是万能的。

package main

import (
	"fmt"
	"os"

	"github.com/mattn_diy/go-gtk/gtk"
)

func main() {
	gtk.Init(&os.Args)
	builder := gtk.NewBuilder()         // 新建Builder
	builder.AddFromFile("1_test.glade") // 读取glade文件
	window := gtk.WindowFromObject(builder.GetObject("window1"))
	b1 := gtk.ButtonFromObject(builder.GetObject("btn1"))
	b2 := gtk.ButtonFromObject(builder.GetObject("button2"))

	// 信号处理
	b1.Connect("clicked", func() {
		fmt.Println("button txt : ", b1.GetLabel())
	})

	b2.Connect("clicked", func() {
		fmt.Println("button txt : ", b2.GetLabel())
		gtk.MainQuit() // 关闭窗口
	})
	//按窗口关闭按钮，自动触发"destroy"信号
	window.Connect("destroy", gtk.MainQuit)
	window.ShowAll()
	gtk.Main()
}