一步步实现cnblogs博客采集工具实现主界面布局

欢迎继续关注开源项目CnblogsFan, 如果你是首次看到这个项目, 点击此处查看有关该项目的详细介绍。

 

　　按照项目实现的一般流程, 在对项目完成详细设计后的下一步就是进入编码阶段了。 由于目前依然是一个人在在每天得空闲时间负责这个小项目, 在编码上, wid采用的是由易到难, 逐步深入的方式。 所以, 今天第一步要实现的就是在主界面的布局。

 

在继续阅读以下随笔之前, 你应该具备的知识:

　　1>. Python的基本语法

　　2>. 能够使用WxPython创建一个窗口

如果你还没有接触过Python语言并且想要了解它, 点击这里;

 

　　我们知道, 在WxPython中, 可以使用尺寸器sizer对窗口控件进行智能布局, 这是在WxPython中实现对窗口控件布局管理的常用方法, 但是wid最近在学习C语言Windows程序设计, 不知在这里有没有能够对窗口控件实现智能布局的API, 经过一番考虑后, 所以在这个小项目中, 决定不使用sizer对窗口进行智能布局, 而是根据取得上一个控件的RECT结构对下一个控件进行布局, 对于这种布局管理, 首先有个弊端, 在进行调整窗口大小时, 窗口中的控件位置以及大小不能根据窗口的大小而变化, 如果要实现像sizer尺寸器中那样能够根据窗口的大小自动调整控件位置以及大小的话, 可以根据一个wx.SIZE消息来调整控件的大小以及相对坐标。为了避免将这个弊端体现出来, 所以在窗口的样式上调整为不可调整大小的窗口。

 

声明: CnblogsFan中所使用的所有图标文件均来自互联网, 并遵循相关的使用协议, 关于图标的来源记录以及使用协议如下, 如果您也要使用以下图标请认真阅读:

图标来源记录及使用协议
======================

*该项目中使用的所有图标资源均来自互联网, 通过图标搜索引擎**http://www.easyicon.cn**获取, 图标有关记录如下:
******
*文件名: CnblogsFan_Spider.png
>尺寸: 48x48
>作者: Alessandro Rei
>作者网站: http://www.kde-look.org/usermanager/search.php?username=mentalrey
>使用协议: GPL
******
*文件名: CnblogsFan_Single.png
>尺寸: 48x48
>作者: Oliver Scholtz (and others)
>作者网站: http://linux.softpedia.com/developer/Oliver-Scholtz-93.html
>使用协议: GPL
******
*文件名: CnblogsFan_Classify.png
>尺寸: 48x48
>作者: codefisher
>作者网站: http://codefisher.org
>使用协议: Creative Commons (Attribution-Noncommercial-Share Alike 3.0 Unported)
******
*文件名: CnblogsFan_Setting.png
>尺寸: 48x48
>作者: Pavel InFeRnODeMoN
>作者网站: http://www.kde-look.org/usermanager/search.php?username=InFeRnODeMoN
>使用协议: GPL
******
*文件名: ICON_CnblogsFan.ico
>尺寸: 48x48
>作者: Kyo Tux
>作者网站: http://kyo-tux.deviantart.com
>使用协议: Creative Commons (Attribution-Noncommercial-Share Alike 3.0 Unported)

 

 

　　在对UI设计部分进行介绍之前, 为了能够对设计中提到的各个控件的位置有个大致的把握,  首先预览下该代码在Windows XP下与Linux (Ubuntu)下运行的实际效果图:

一、在Windows XP下运行:

 

 

二、在Linux (Ubuntu)下运行

 

 

 

　　接下来开始开始对项目的UI设计部分进行介绍, 采用贴出完整代码的形式, 说明均在注释中。

#!/usr/bin/python
#coding:utf-8
#-------------------------------------------------------------------------------
# Name:        CnblogsFan_MainFrame.py
# Purpose:
#
# Author:      Mr.Wid
#
# Created:     13-10-2012
# Copyright:   (c) Mr.Wid 2012
# Licence:     GNU GPL
#-------------------------------------------------------------------------------

import wx

class MainFrame(wx.Frame):              #从wx.Frame类得到继承
    def __init__(self):                 #初始化窗口
        wx.Frame.__init__(
            self,
            parent = None,              #无父窗口
            title = u'CnblogsFan',      #窗口标题:'CnblogsFan',
            size = ( ( 900, 600 ) ),    #窗口大小900x600
            style = wx.SYSTEM_MENU|wx.CAPTION|wx.MINIMIZE_BOX|wx.CLOSE_BOX      #带有最小化与最大化按钮的窗口样式
        )
        self.Center()                                                           #令窗口在屏幕中居中显示

        #-----加载程序图标-----
        self.AppLogo = wx.Icon('src//ICON_CnblogsFan.ico', wx.BITMAP_TYPE_ICO)
        self.SetIcon(self.AppLogo)

        #-----创建窗口面板-----
        self.panel = wx.Panel(self)

        #-----创建状态栏-----
        self.userStatus = self.CreateStatusBar()
        self.userStatus.SetFieldsCount(4)                   #将状态栏分为4部分
        self.userStatus.SetStatusWidths( [-1, -1, -1, -1] ) #划分比例为4等分
        #--
        #状态栏上待显示的文字
        statusLabel = [
            u' 当前状态:',
            u' 采集速度:',
            u' 采集统计:',
            u' 任务统计:',
        ]
        #将文字标签显示在状态栏上
        for i in range( len(statusLabel) ):
            self.userStatus.SetStatusText( statusLabel[i], i )

        #-----创建菜单栏外框StaticBox-----     #这个StaticBox控件为首个控件
        self.groupMenuBox = wx.StaticBox(
            self.panel,
            label = u'菜单',
            pos = (15, 10),                     #在首个控件处使用绝对坐标
            size = (80, 400),                   #框大小为80x400
        )
        #--以下为菜单图标在本地的文件名
        #资源文件在src文件夹下, 使用代码示例时请将src资源文件夹与该.py文件放在同一目录
        self.localImgSrc = [
            'CnblogsFan_Spider.png',
            'CnblogsFan_Single.png',
            'CnblogsFan_Classify.png',
            'CnblogsFan_Setting.png',
            'CnblogsFan_About.png'
        ]
        self.lstMenu = []                   #菜单列表, 用来记录菜单按钮控件
        menuTip = [
            u'采集整个Cnblogs上的随笔.',      #当鼠标放在按钮上的相关提示文字
            u'采集指定博客上的随笔.',
            u'采集Cnblogs首页分类上的随笔.',
            u'设置软件的相关参数.',
            u'关于CnblogsFan的一些信息.'
        ]                                   #菜单按钮下方的文字说明
        menuLabel = [
            u'蜘蛛模式',
            u'指定采集',
            u'分类采集',
            u'软件设置',
            u'关于软件'
        ]
        rect = self.groupMenuBox.Rect       #获取第一个控件self.groupMenuBox的RECT结构

        #x, y用来决定菜单按钮的位置
        #x = 上个控件的x坐标 + (上个控件的x方向宽度 - 一个按钮的宽度) / 2, 这样按钮控件就能够在groupMenuBox框中居中显示了
        #y = 上个控件在y方向上的坐标的三倍
        x, y = rect[0] + ( rect[2]-48 )/2, rect[1] * 3
        for i in range( len(self.localImgSrc) ):        #for 循环生成按钮控件
            tempImg = wx.Image( 'src//'+ self.localImgSrc[i], wx.BITMAP_TYPE_ANY )      #从本地加载图标文件
            w, h = tempImg.GetSize()                    #获取加载到的图标尺寸
            img = tempImg.Scale( w*0.8, h*0.8 )         #将图像缩放至80%
            self.lstMenu.append(                        #创建一个菜单按钮并将其加入到菜单按钮列表中
                wx.BitmapButton(
                    self.panel,
                    bitmap = img.ConvertToBitmap(),     #将缩放后的按钮图片转换为位图
                    pos = ( x, y )
                )
            )
            #--为每个按钮增加标签
            wx.StaticText(
                self.panel,
                label = menuLabel[i],
                pos = ( x, y + 50 )                      #之所以令y再加50是为了能够让每个标签显示在按钮的下方, 而不是上方, 50这个值是经过测量按钮RECT结构的值得到
            )
            y += self.lstMenu[i].Rect[0] + 45
            #--为每个按钮增加按钮提示信息
            self.lstMenu[i].SetToolTipString(menuTip[i])

        #在完成一个控件的创建之后下面的创建算法就同上面的了
        #------创建当前采集用户信息栏-----
        rect = self.groupMenuBox.Rect                   #获取上一个控件RECT结构
        self.groupBlogsUserInfoBox = wx.StaticBox(
            self.panel,
            label = u'当前所在博客博主信息',
            pos = ( rect[0] + rect[2]+ 20, rect[1] ),
            size = ( 500, 100 )
        )
        #--用户信息标签
        adminInfoLabel = [
            u'昵称:',
            u'园龄:',
            u'粉丝:',
            u'关注:',
            u'随笔:',
            u'文章:',
            u'评论:',
            u'地址:'
        ]
        self.lstAdminInfo = []                          #当前采集用户信息列表
        rect = self.groupBlogsUserInfoBox.Rect          #获取self.groupBlogsUserInfoBox的RECT结构
        x, y = rect[0] + 20, rect[1] + 30
        for i in range(len(adminInfoLabel)):            #生成标签控件
            self.lstAdminInfo.append(                   #将标签控件增添到lstAdminInfo列表当中
                wx.StaticText(
                    self.panel,
                    label = adminInfoLabel[i],
                    pos = ( x, y )
                )
            )
            x += 150                #每个用户信息标签直接间隔150个单位
            if x > 450:             #当放够3个标签后换行放置另外3个标签
                x = rect[0] + 20
                y += 20

        #-----创建任务控制栏-----                       #用来控制在任务进行中的暂停/停止动作
        rect = self.groupBlogsUserInfoBox.Rect
        self.groupControlBox = wx.StaticBox(            #创建静态框StaticBox
            self.panel,
            label = u'任务控制',
            pos = ( rect[0] + rect[2]+ 20, rect[1] ),   #位置在当前采集用户的标签的左侧
            size = ( 230, 100 )
        )
        #--控制按钮
        self.btnPauseContinue = wx.Button(              #创建暂停按钮, 当在任务过程中按下"暂停"后, 暂停标签还要能够变成"继续"
            self.panel,
            label = u'暂停',
            size = ( 60, 60 ),                          #按钮大小
            pos = ( rect[0] + rect[2]+ 50, rect[1] + 25 )   #位置
        )
        self.btnPauseContinue.Disable()                 #在未进行任务前将按钮设为不可用
        rect = self.btnPauseContinue.Rect
        self.btnStop = wx.Button(                       #创建"停止"按钮, 用来中途中断任务的进行
            self.panel,
            label = u'停止',
            size = ( 60, 60 ),
            pos = ( rect[0] + rect[2]+ 50, rect[1] )
        )
        self.btnStop.Disable()                          #按钮不可用

        #-----成功采集信息栏-----                       #用于输出成功采集到的随笔信息
        rect = self.groupBlogsUserInfoBox.Rect
        self.groupSucceedBox = wx.StaticBox(            #静态框
            self.panel,
            label = u'成功采集',
            pos = ( rect[0], rect[1] + rect[3] + 20 ),
            size = ( 750, 280 )
        )
        #--成功采集列表
        rect = self.groupSucceedBox.Rect
        self.lstSucceedResults = wx.ListCtrl(           #创建成功采集列表框
            self.panel,
            pos = ( rect[0] + 10, rect[1] + 20 ),
            style = wx.LC_REPORT|wx.LC_HRULES|wx.LC_VRULES,
            size = ( rect[2] - 20, rect[3] - 30 )
        )
        w = self.lstSucceedResults.Rect[2]              #获取列表框x方向宽度
        self.lstSucceedResults.InsertColumn( col = 0, heading = u'随笔名称', width = w * 0.3 )      #创建是三个纵列, 分割比例为3:5:1.5, 为了美观留下0.5给竖直滚动条
        self.lstSucceedResults.InsertColumn( col = 1, heading = u'来源地址', width = w * 0.5 )
        self.lstSucceedResults.InsertColumn( col = 2, heading = u'发布时间', width = w * 0.15 )

         #用来告知用户当前正在进行的动作
        #-----当前动作信息栏-----
        rect = self.groupSucceedBox.Rect
        self.groupActionBox = wx.StaticBox(
            self.panel,
            label = u'当前动作',
            pos = ( rect[0], rect[1] + rect[3] + 20 ),
            size = ( 750, 110 )
        )
        #--动作输出文本框, 使用文本框进行当前动作输出
        rect = self.groupActionBox.Rect
        self.txtFeedback = wx.TextCtrl(
            self.panel,
            size = ( rect[2] - 20, rect[3] - 30 ),
            pos = ( rect[0] +10, rect[1] + 20 ),
            style = wx.TE_MULTILINE | wx.TE_READONLY        #带有竖直方向的滚动条并且将文本框设为只读模式
        )

        #在菜单创建栏的下方还剩一个比较小的角落, 用来作为用户反馈意见的位置
        #-----意见反馈栏-----
        rect = self.groupMenuBox.Rect
        self.groupFeedbackBox = wx.StaticBox(
            self.panel,
            label = u'告诉作者',
            pos = ( rect[0], rect[1] + rect[3] + 20 ),
            size = ( rect[2], 110 ),
        )
        #--创建意见输入文本框
        rect = self.groupFeedbackBox.Rect
        self.txtFeedback = wx.TextCtrl(
            self.panel,
            size = ( rect[2] - 10, rect[3] - 50 ),
            pos = ( rect[0] + 5, rect[1] + 20 ),
            style = wx.TE_MULTILINE
        )
        #--创建提交按钮
        self.txtFeedback.SetMaxLength(1024)
        rect = self.txtFeedback.Rect
        self.btnFeedback = wx.Button(
            self.panel,
            label = u'提交',
            pos = ( rect[0], rect[1] + rect[3] + 5 ),
            size = (rect[2], 20)
        )


def test():
    cnblogsFan = wx.PySimpleApp()
    mainFrame = MainFrame()
    mainFrame.Show()
    cnblogsFan.MainLoop()

if __name__ == '__main__':
    test()

所有项目文件均在GitHub上, 项目地址:  https://github.com/mrwid/CnblogsFan

--------------------

说明: 这里仅仅是实现了主界面的相关布局, 对于相关的采集参数设置对话框, 软件设置对话框、关于软件对话框等相关的窗口的创建过程下次就不再往首页上推了, 创建的过程都是差不多, 只是将这里的从wx.Frame类中继承改为从wx.Dialog类中得到继承, 其他也就是往客户区放相关的控件, 没什么可叙述的。最新的项目进展欢迎关注wid的博客, 或者从GitHub上获得最新的项目代码。

 

wid, 2012.10.15

 

上一篇: 开源->一步步实现cnblogs博客采集工具->详细设计 

 

 

分类: 开源项目案例分析

标签: 开源, CnblogsFan, 项目案例分析