想先了解SimpleBrowse的大概情况,请看“SimpleBrowse -- 简洁易用的图片浏览器(源码公开)”。

自己动手制作一款简洁实用的图片浏览器(如左图所示),要编写多少行代码?

不超过100行!

DIY!自己动手制作一款简洁实用的图片浏览器

-- SimpleBrowse制作手记 --

DIY,Do It Yourself的缩写,意思是自己动手。有时侯,东西虽好,但价钱太贵,你会选择DIY;也有一些发烧友,本领高强,不屑于现成东西,为了追求完美,也会选择DIY。于是便有了音响DIY,音响发烧友;电脑DIY,电脑发烧友。时常想起那些DIY的日子,紧张刺激,令人回味无穷。特别是经过千辛万苦之后,你DIY的东西终于可以按你想象的那样工作了,你不由得豪气顿生:Yes,I can do it!心中充满了成就感,飘然若醉。

上面只是提了音响DIY和电脑DIY,但你是否试过,软件也可以DIY?

软件DIY,说白了就是利用现有的类库、组件,快速构造出自己的程序出来。就象你找来各种电脑配件,然后把它们装配成整机一样;但也有不一样的地方,电脑配件即使是旧的二手配件,怎么说也得花一点钱,而软件的类库、组件,你有时侯可以免费得到。

我想要DIY的,是一款简洁实用的图片浏览器。众所周知,ACDSee是最流行的图片浏览器,确实很不错。但作为一名程序员,我想,要是我也能制作出一款简洁实用的图片浏览器,可以在我开发的软件中有图片浏览功能,那该多好。

而我确实DIY出了这么一个图片浏览器,她简洁实用,小巧玲珑,取名为:SimpleBrowse。现将制作过程介绍如下,与大家分享,并期望能起到抛砖引玉的作用。

第一步:定规格

1.样子要象ACDSee一样,左边是目录树,右边是文件列表,显示图片文件的缩图。

2.缩图要好看,浏览速度要快,能浏览的图片格式要多。

3.简洁实用,制作难度不要太大。

4.在Win98,WinNT下都能用。

第二步:选材料

由于界面主要分为两大部分,即左边的目录树和右边的文件列表,故材料也就主要是这两大件。

1.左边目录树

从http://www.codejockeys.com/kstowell/上,我们可以得到一个免费的MFC扩展类库CJ60Lib.dll,这个类库包含有许多用于界面设计的类,其中有一个CShellTree类,可以显示和Windows Explorer左边目录树一样的效果,正好符合我想要的,选定了它。

2.右边文件列表

这是关键的部分,它要求能创建、显示、管理图片文件的缩图,要求能浏览多种格式的图片文件,要求有较精美的缩图显示效果和较快的浏览速度,要求易于使用难度不大。泰来影像科技有限公司在图像处理应用软件开发方面有较深的造诣,推出了一个MFC扩展类库thl.dll,其中有一个CThumbListCtrl类,正是用来创建、显示图片缩图用的,选定了它,从http://www.thalia.com.cn/上获取之。

第三步:生成程序框架

象开发其他程序一样,用VC++6.0 AppWizard生成程序框架。

1.选菜单项File->New,到Projects面板,选取MFC AppWizard(exe),Project name为SimpleBrowse。OK确定后,进入一个向导中,共有6步。

2.Step 1,选single document,其它不动,用缺省值。

3.Step 2 of 6,不动,用缺省值。

4.Step 3 of 6,不动,用缺省值。

5.Step 4 of 6,选Internet Explorer ReBars,其它不动,用缺省值。

6.Step 5 of 6,选Windows Explorer,其它不动,用缺省值。

7.Step 6 of 6,不动,用缺省值。Finish确定后,即生成程序框架。

第四步:使用类库、组件

1.左边的目录树对应的类是CLeftView,修改之。

class CLeftView : public CView/*CTreeView*/
{
...
// Attributes
public:
    CShellTree m_TreeCtrl;        // use shell tree control
...
// Generated message map functions
protected:
    //{{AFX_MSG(CLeftView)
    afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);
    afx_msg void OnSize(UINT nType, int cx, int cy);
    afx_msg void OnItemexpanding(NMHDR* pNMHDR, LRESULT* pResult);
    afx_msg void OnSelchanged(NMHDR* pNMHDR, LRESULT* pResult);
    //}}AFX_MSG
    DECLARE_MESSAGE_MAP()
...
};

(1)将其父类由CTreeView改为CView,原因后述。

(2)加入CShellTree类的成员变量m_TreeCtrl,目录树的具体内容就是由它实现的。

(3)增加消息响应函数OnCreate(),在其中把m_TreeCtrl创建起来。

(4)增加消息响应函数OnSize(),使m_TreeCtrl总是占满CLeftView的区域。

(5)增加消息响应函数OnItemexpanding(),在此响应展开目录的操作。如果CLeftView的父类是CTreeView的话,将不能得到希望的结果,这就是(1)中把父类改为CView的原因。

(6)增加消息响应函数OnSelchanged(),在此响应点击目录的操作。

具体修改请看源文件leftview.h和leftview.cpp,都很简单。

2.右边的文件列表对应的类是CSimpleBrowseView,修改之。

class CSimpleBrowseView : public CView/*CListView*/
{
...
// Attributes
public:
    CThumbListCtrl m_ThumbListCtrl;         // use thumb list control
// Operations
public:
    void FormatList(CString csPath);

// Overrides
    // ClassWizard generated virtual function overrides
    //{{AFX_VIRTUAL(CSimpleBrowseView)
    protected:
    virtual void OnInitialUpdate(); // called first time after construct
    //}}AFX_VIRTUAL
...
// Generated message map functions
protected:
    //{{AFX_MSG(CSimpleBrowseView)
    afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);
    afx_msg void OnSize(UINT nType, int cx, int cy);
    //}}AFX_MSG
    DECLARE_MESSAGE_MAP()
...
};

(1)将其父类由CListView改为CView,原因和上面的类似。

(2)加入CThumbListCtrl类的成员变量m_ThumbListCtrl,文件列表的具体内容就是由它实现的。

(3)增加消息响应函数OnCreate(),在其中把m_ThumbListCtrl创建起来,并初始化为缩图显示风格。

(4)增加消息响应函数OnSize(),使m_ThumbListCtrl总是占满CSimpleBrowseView的区域。

(5)在OnInitialUpdate()中创建文件列表的栏目,调用CThumbListCtrl::BuildColumns()。

(6)增加函数FormatList(),它被CLeftView::OnSelchanged()调用,它则转而调用CThumbListCtrl::BrowseFolder()。点击左边的目录树,右边的文件列表跟着改变,就是通过这一个函数来实现的。

具体修改请看源文件simplebrowseview.h和simplebrowseview.cpp,都很简单。

3.其它事项

CShellTree和CThumbListCtrl都是在MFC扩展类库中实现的,要使用它们,必须:在编译阶段要有相应的.h文件,在连接阶段要有相应的.lib文件,在运行阶段要有相应的.dll文件。因此还要做一些配置:在leftview.h中加入#include "ShellTree.h",在simplebrowseview.h中加入#include "ThumbListCtrl.h";选菜单项Project->Settings,转到Link面板,在Object/library modules中加入CJ60Lib.lib和thl.lib;将CJ60Lib.dll,thl.dll和simplebrowse.exe放在同一目录下,注意thl.dll又使用到其它dll如Convert20.dll,JPEG.dll,TIFF60.dll等,也要放在同一目录下。

第五步:编译、运行

Rebuild All,Execute SimpleBrowse.exe,一款简洁实用的图片浏览器浮出水面...

大功告成!

(注意:一开始,我编译的是SimpleBrowse的Debug版本,发现不能正确运行,后来改为编译Release版本,就能正确运行了。可能是因为CJ60Lib.lib和thl.lib是Release版本的MFC扩展类库,需要配套的缘故。)

制作心得:

我对这款图片浏览器的评价是:简洁,实用,值得一玩。

说其简洁,是因为我编写的代码不超过100行,调用的函数不超过10个。这得归功于CJ60Lib.dll和thl.dll,它们都内置有强大的功能,而外壳封装却十分简单。

说其实用,是因为这款图片浏览器实现了图片浏览的基本功能,缩图相当好看,浏览速度够快,能浏览的图片格式也挺多。

用不超过100行的代码就搞出了这么一款简洁实用的图片浏览器,DIY,乐趣无穷!