FC47 Python编程
出自Full Circle 中文项目主页
如果你已经跟着我学习了一段时间，你可能还能回想起第5和6部分。我们讨论过用Boa Constructor去设计GUI应用程序。那么，这次我们将要使用Glade Designer来进行设计。两者虽然不同，但还是非常相似的。你可以从Ubuntu软件中心安装它：搜索“glade”并安装GTK+ 2 User Interface Builder。
只想让你知道，我们这个应用的教程会包含多个部分。终极目标是为我们的mp3和其他媒体文件建立一个播放列表。今天的教程将着重于设计部分。下期，我们将会统一处理GUI的所有代码。
现在开始设计我们的应用程序。第一次打开Glade designer时，你将看到一个首选项窗口（如上图）。选择Libglade和“inside toplevels”，然后点关闭。designer的主窗口就会出现了。
让我们来看看主窗口（右图）。左边是工具箱，中间是设计区，右边是属性和继承关系区。
在工具箱区域里，找到标记为“Toplevels”的工具组，并点击第一个（如果将鼠标悬停在上面，它应该会显示“Window”）。一个空白的“canvas”窗口将会呈现在我们眼前，我们将在这上面进行我们的工作。
请注意，在继承关系区，你将在控件区下面看到window1。现在将眼光移动到属性部分，把window1的名字改为MainWindow，并设置窗口的标题为“Playlist Maker v1.0”。把这些保存为“PlaylistMaker.glade”。在我们继续之前，先在属性区的General标签里找到 Window Position 折叠菜单并把它设置为Center。点击“Defualt Width”复选框，并设置为650。按照同样的方法将默认高度设为350。接着，点击Common标签并往下滚动到标记着“Visible”这项。确保把它设置为“YES”——否则你的窗口将不会显示。最后，选择Signals标签，往下滚动到GtkObject部分，并点击向右的箭头。关于destroy这项，点击Handler这列的下拉框并选择“on_MainWindow_destroy”。它将产生一个当用户点击窗口标题栏的“X”时调用的事件。提醒一句...在我们设置完destroy事件后，点击它上面或者下面某些地方使这个改变生效。这好像是Glade Deisgner的一个bug。再次保存我们的工程。
就像以前一样，我们在做GUI设计的时候，需要把控件放到vboxes和hboxes里。这是在我们做GUI编程的时候最容易忘记的事情。我们将在这个窗口里添加一个纵向的盒子来存放我们的控件，因此，在工具箱中的Containers下，选择Vertical Box（从左数第一排的第二个图标），并在设计区点击我们的空白窗口。一个询问你需要多少槽或项目的弹窗将会呈现。默认值为3，但我们需要5个。关于布局，从上到下先是一个工具条，然后是一个树形列表控制区域，放标签、按钮和文本输入框的两个水平区，以及一个状态条。
现在我们可以开始添加控件了。首先，从工具箱里添加一个工具条。它是（在我的设置里）containers下第二行的第四个图标。点击vbox最上面的槽。那个槽会收缩直至几乎消失。别担心，几分钟后我们就会把它弄回来。
接着，我们要在下个槽上添加一个Scrolled Window 放入整个树形列表。这样我们就能在树形列表中进行滚动操作了。所以，得从工具箱的Containers区下找到Scrolled Window图标（在我的设置里是第五行的左起第二个），点击放入vbox的第二个槽。接下来，我们将添加两个水平的盒子，依次放到下面的槽中。每一个盒子需要三个槽。最后，在底部的槽中添加一个状态条。它在工具箱中靠近底部的控制和显示区下面。现在你的设计器界面应该差不多和下图一样了。
最后，将工具箱中控制和显示区下的一个树状视图控件添加到滚动窗口控件中。你将看到一个弹窗问你想要使用哪个树形视图模型。现在只需要点击"OK"按钮就行了。我们将在后面对它进行设置。
现在我们要把注意力集中在Scroll Window一小会儿了。在继承关系区点击它。在General标签向下滚动到标记为“Horizontal Scrollbar Policy”的选项。把它改为'Always'并按相同的方式设置“Vertical Scrollbar Policy”。再次保存。
好了，现在让我们集中精神看看工具条吧。这个区域在我们应用程序的标题栏下方右侧。它将为我们存放各类能够完成绝大部分功能的按钮。在工具条里我们将放置11个按钮，从左至右，依次是： Add, Delete, Clear List, 一个Separator, Move To Top, Move Up, Move Down, Move to bottom, 另一个 Separator, About, 还有 Exit.
在继承关系区上方，点击“toolbar1”。它会高亮显示。在Glade Designer顶部有一个看起来像铅笔的东西。点击它。工具条编辑器就出现了。点击Hierarchy标签。你看到的将会像下面这样：（Ps：排版同学注意这里是一个图片P10右下角的图片） 我们从这儿来添加工具条的所有按钮。步骤如下：
• 点击Add按钮。
• 改变按钮的名字。
• 修变按钮的标签。
• 选择图片。
创建这11个控件的方法是完全一样的。就是，点Add，接着在名字框中输入“tbtnAdd”。往下拉到编辑标签的部分并在标签框里输入“Add”，然后在Edit Image稍下的Stock ID文本框里利用下拉框选择“Add”。那将作用于我们的Add按钮。将它命名为“tbtnAdd”，以便我们可以在今后的代码中使用。“tbtn”是'Toolbar Button'得缩写。这种方式不仅方便我们在代码里查找控件而且也清楚地表明了这个控件的类别。
现在，我们需要添加工具条里剩下的控件。添加一个“Delete”按钮。这个控件将被命名为（正如你所想到的）“tbtnDelete”。同样的，设置标签和图标。接着，添加另一个叫“tbtnClearAll”的按钮并使用Clear图标。现在我们需要一个分隔符。因此，点击Add，在名字那栏输入“Sep1”然后往下拉设置类型，选择Separator。
添加剩下的控件并命名它们为“tbtnMoveToTop”, “tbtnMoveUp”, ”tbtnMoveDown”, ”tbtnMoveToBottom”, “Sep2”, “tbtnAbout” 和 “tbtnQuit”。我肯定你能找到相应的图标。一旦你做完了，就可以退出继承关系窗口并保存你的工作。这时它看起来应该像下图所示的那样。
现在，需要设置我们所创建按钮的事件处理。在继承区，选择tbtnAdd控件。继承的输入和按钮本身都应该高亮显示。回到属性区域，选择Signals标签，并展开GtkToolButton来显示点击事件。在点击事件的处理器下，像之前一样，选择“on_tbtnAdd_clicked”，然后点击其上方或下方促使它改变。为我们所创建的其它按钮做同样的操作——选择“on_tbtnDelete_clicked”事件等等。记住点击周围区域促使它改变，并且保存你的项目。我们的分隔符不需要事件，所以无需对其操作直接跳过就行了。
接下来，我们需要填充hboxs。顶部的hbox将包含（从左至右）一个标签，一个文本控件，以及一个按钮。在工具箱里，选择标签控件（不要选蓝色的那个），并把它放入左边的槽中。现在把文字输入控件放入中间的槽中，一个按钮放入右边的槽中。对下一个hbox做同样的事。
现在该为我们刚添加的控件设置属性了。在继承区，选择hbox1下面的label1。在属性区，选择General标签，往下拉到“Edit label appearance”区域，并设置标签为“Path to save file:”。接着移到Packing标签并设置Expand属性为“No”。你可能记得上个月关于封装的讨论吧。把padding设为4，这将在标签的左边和右边留出一些空间。现在选择button1并把Packing标签下的Expand属性也设为“No”。回到General标签并设置把按钮的名字设为“btnGetFolder”。注意因为它不是一个工具条按钮，我们就不必在它的名字前加一个前缀't'。往下拉到Lable项并输入“Folder...”。接着点击Signals标签并设置GtkButton/clicked的按钮事件为“on_btnGetFolder_clicked”。在设置下一个hbox中的下一个控件集合的属性之前，我们还需再做一件事。在继承区选择hbox1并设置Packing标签下的expand为“No”。这会使得hbox占用更少的空间。最后，设置文本输入控件的名字为“txtPath”。
现在，对hbox2做同样的事情，设置它的Expand属性为“No”，接着设置标签的文本为“Filename:”，expand为“No”，padding值为4。设置按钮的名字为“btnSavePlaylist”，它的文本为“Save Playlist File...”，Expand属性为“No”，创建它的点击事件，以及文本输入控件的名字为“txtFilename”。再次保存所有操作。
于是现在我们的窗口应该看起来像左下方的这张图片了。
所有的东西看起来都非常棒，但我们究竟做了什么？我们不能把它当作一个程序来运行，因为我们没有任何代码。我们所做的其实只是创建了一个叫“playlistmaker.glade”的XML文件。别让这个扩展名欺骗了。它确实是一个XML文件。如果你不相信，可以用喜欢的编辑器（我的最爱是gedit）打开来看看。
你将清楚地看到描述我们的窗口以及每一个控件属性的文本。例如，让我们看看主控件（实际上就是窗口本身）的代码。
你可以看到控件的名字为“MainWindow”，它的标题为“Playlist Maker v1.0”，事件处理器等等。
让我们来看一个工具条按钮的代码吧（下图所示）。
希望从这之后的内容对你是有意义的。现在，我们需要来写一点代码看看我们的之前的辛苦工作有什么价值。打开你的代码编辑器并开始这样写...
于是，我们已经像上个月那样创建了imports。注意我们导入了“sys”和并从从mutagen.mp3中导入“MP3”。我们在第9部分时就已经安装了mutagen，所以如果你的系统没有的话，回头参考那篇文章进行安装。下次我们需要mutagen进行导入操作，导入sys是为了设置使系统能在产生异常时正常退出。
下来，我们需要创建一个定义窗口的类。具体内容在右上方。
和我们之前的操作非常像。注意这儿的最后两行。我们正在定义glade文件（self.gladfile）的名字为我们在Glade designer中创建的文件名。也请注意我们没有包含一个路径，只有一个文件名。如果你的glade文件与你的当前的代码不在同一个文件夹下，你就必须添加一个路径。不过，把他们放在一起总是明智的。接着，定义我们的窗口为self.wTree。我们将在每次需要引用窗口的时候引用它。我们也会说那个文件是个XML文件，而我们将用到的窗口是一个叫“MainWindow”的窗口。你可以在一个glade文件中定义多个窗口。关于这个我们另找时间再讲。-->
现在我们需要处理事件了。上个月我们采用调用button.connect或window.connect来引用我们的事件处理例程。这次我们要做点不同的事儿。我将会用到一个字典。字典就像一个数组，但它的元素是和关键字的关联而不是索引。关键字和数据。这儿的代码可能会使它更容易理解。我在这里只给你两个事件的例子（如下所示）...
我们有两个事件：“on_MainWindow_destroy” 和 “on_tbtnQuit_clicked”是我们字典里的关键字。而字典里与它俩对应的数据则是“gtk.main_quit”。任何时候一个事件被我们的GUI程序触发，系统会利用这个事件去寻找字典里的关键字，然后就知道该调用哪个例程了——通过数据字段。接着我们需要将字典与窗口的信号句柄进行连接。我们用下面这行代码来实现。
self.wTree.signal_autoconnect(dict)
我们几乎就要好。但我们仍然需要如下的主程序代码：
if __name__ == "__main__":
plm = PlayListMaker()
gtk.main()
把这个文件保存为“playlistmaker.py”。现在你就可以运行它了（见右上图）。
除了能正常的打开和关闭之外，它并不具备任何功能。剩下留到以后再讲。在下一期里，我们将讨论TreeView, Dialog boxes的用法，还要添加一连串的代码。因此期待下一期吧。
