📄 howtodiy.htm
字号:
<html>
<head>
<title>SimpleBrowse</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<p>想先了解SimpleBrowse的大概情况，请看“<a href="simplebrowse.htm" target="_blank">SimpleBrowse
-- 简洁易用的图片浏览器（源码公开）</a>”。</p>
<table width="100%" border="0">
<tr>
<td width="36%"><img src="simplebrowse_ui_240.jpg" width="240" height="169"></td>
<td width="64%">
<p>自己动手制作一款简洁实用的图片浏览器（如左图所示），要编写多少行代码？</p>
<p>不超过100行！</p>
</td>
</tr>
</table>
<h1 align="center">DIY!自己动手制作一款简洁实用的图片浏览器</h1>
<h2 align="center"> -- SimpleBrowse制作手记 --</h2>
<p>DIY，Do It Yourself的缩写，意思是自己动手。有时侯，东西虽好，但价钱太贵，你会选择DIY；也有一些发烧友，本领高强，不屑于现成东西，为了追求完美，也会选择DIY。于是便有了音响DIY，音响发烧友；电脑DIY，电脑发烧友。时常想起那些DIY的日子，紧张刺激，令人回味无穷。特别是经过千辛万苦之后，你DIY的东西终于可以按你想象的那样工作了，你不由得豪气顿生：Yes，I
can do it！心中充满了成就感，飘然若醉。 </p>
<p>上面只是提了音响DIY和电脑DIY，但你是否试过，软件也可以DIY？ </p>
<p>软件DIY，说白了就是利用现有的类库、组件，快速构造出自己的程序出来。就象你找来各种电脑配件，然后把它们装配成整机一样；但也有不一样的地方，电脑配件即使是旧的二手配件，怎么说也得花一点钱，而软件的类库、组件，你有时侯可以免费得到。
</p>
<p>我想要DIY的，是一款简洁实用的图片浏览器。众所周知，ACDSee是最流行的图片浏览器，确实很不错。但作为一名程序员，我想，要是我也能制作出一款简洁实用的图片浏览器，可以在我开发的软件中有图片浏览功能，那该多好。
</p>
<p>而我确实DIY出了这么一个图片浏览器，她简洁实用，小巧玲珑，取名为：SimpleBrowse。现将制作过程介绍如下，与大家分享，并期望能起到抛砖引玉的作用。
</p>
<h3>第一步：定规格</h3>
<p>1.样子要象ACDSee一样，左边是目录树，右边是文件列表，显示图片文件的缩图。 </p>
<p>2.缩图要好看，浏览速度要快，能浏览的图片格式要多。 </p>
<p>3.简洁实用，制作难度不要太大。 </p>
<p>4.在Win98，WinNT下都能用。 </p>
<h3>第二步：选材料</h3>
<p>由于界面主要分为两大部分，即左边的目录树和右边的文件列表，故材料也就主要是这两大件。 </p>
<p>1.左边目录树 </p>
<p>从http://www.codejockeys.com/kstowell/上，我们可以得到一个免费的MFC扩展类库CJ60Lib.dll，这个类库包含有许多用于界面设计的类，其中有一个CShellTree类，可以显示和Windows
Explorer左边目录树一样的效果，正好符合我想要的，选定了它。 </p>
<p>2.右边文件列表 </p>
<p>这是关键的部分，它要求能创建、显示、管理图片文件的缩图，要求能浏览多种格式的图片文件，要求有较精美的缩图显示效果和较快的浏览速度，要求易于使用难度不大。泰来影像科技有限公司在图像处理应用软件开发方面有较深的造诣，推出了一个MFC扩展类库thl.dll，其中有一个CThumbListCtrl类，正是用来创建、显示图片缩图用的，选定了它，从http://www.thalia.com.cn/上获取之。
</p>
<h3>第三步：生成程序框架</h3>
<p>象开发其他程序一样，用VC++6.0 AppWizard生成程序框架。 </p>
<p>1.选菜单项File->New，到Projects面板，选取MFC AppWizard(exe)，Project name为SimpleBrowse。OK确定后，进入一个向导中，共有6步。
</p>
<p>2.Step 1，选single document，其它不动，用缺省值。 </p>
<p>3.Step 2 of 6，不动，用缺省值。 </p>
<p>4.Step 3 of 6，不动，用缺省值。 </p>
<p>5.Step 4 of 6，选Internet Explorer ReBars，其它不动，用缺省值。 </p>
<p>6.Step 5 of 6，选Windows Explorer，其它不动，用缺省值。 </p>
<p>7.Step 6 of 6，不动，用缺省值。Finish确定后，即生成程序框架。 </p>
<h3>第四步：使用类库、组件</h3>
<p>1.左边的目录树对应的类是CLeftView，修改之。 </p>
<p>class CLeftView : public CView/*CTreeView*/<br>
{<br>
...<br>
// Attributes<br>
public:<br>
CShellTree m_TreeCtrl; // use
shell tree control<br>
...<br>
// Generated message map functions<br>
protected:<br>
//{{AFX_MSG(CLeftView)<br>
afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);<br>
afx_msg void OnSize(UINT nType, int cx, int cy);<br>
afx_msg void OnItemexpanding(NMHDR* pNMHDR, LRESULT* pResult);<br>
afx_msg void OnSelchanged(NMHDR* pNMHDR, LRESULT* pResult);<br>
//}}AFX_MSG<br>
DECLARE_MESSAGE_MAP()<br>
...<br>
};<br>
</p>
<p>(1)将其父类由CTreeView改为CView，原因后述。 </p>
<p>(2)加入CShellTree类的成员变量m_TreeCtrl，目录树的具体内容就是由它实现的。 </p>
<p>(3)增加消息响应函数OnCreate()，在其中把m_TreeCtrl创建起来。 </p>
<p>(4)增加消息响应函数OnSize()，使m_TreeCtrl总是占满CLeftView的区域。 </p>
<p>(5)增加消息响应函数OnItemexpanding()，在此响应展开目录的操作。如果CLeftView的父类是CTreeView的话，将不能得到希望的结果，这就是(1)中把父类改为CView的原因。
</p>
<p>(6)增加消息响应函数OnSelchanged()，在此响应点击目录的操作。 </p>
<p>具体修改请看源文件leftview.h和leftview.cpp，都很简单。</p>
<p>2.右边的文件列表对应的类是CSimpleBrowseView，修改之。 </p>
<p>class CSimpleBrowseView : public CView/*CListView*/<br>
{<br>
...<br>
// Attributes<br>
public:<br>
CThumbListCtrl m_ThumbListCtrl;
// use thumb list control<br>
// Operations<br>
public:<br>
void FormatList(CString csPath);<br>
<br>
// Overrides<br>
// ClassWizard generated virtual function overrides<br>
//{{AFX_VIRTUAL(CSimpleBrowseView)<br>
protected:<br>
virtual void OnInitialUpdate(); // called first time after
construct<br>
//}}AFX_VIRTUAL<br>
...<br>
// Generated message map functions<br>
protected:<br>
//{{AFX_MSG(CSimpleBrowseView)<br>
afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);<br>
afx_msg void OnSize(UINT nType, int cx, int cy);<br>
//}}AFX_MSG<br>
DECLARE_MESSAGE_MAP()<br>
...<br>
};
<p>(1)将其父类由CListView改为CView，原因和上面的类似。 </p>
<p>(2)加入CThumbListCtrl类的成员变量m_ThumbListCtrl，文件列表的具体内容就是由它实现的。 </p>
<p>(3)增加消息响应函数OnCreate()，在其中把m_ThumbListCtrl创建起来，并初始化为缩图显示风格。 </p>
<p>(4)增加消息响应函数OnSize()，使m_ThumbListCtrl总是占满CSimpleBrowseView的区域。 </p>
<p>(5)在OnInitialUpdate()中创建文件列表的栏目，调用CThumbListCtrl::BuildColumns()。 </p>
<p>(6)增加函数FormatList()，它被CLeftView::OnSelchanged()调用，它则转而调用CThumbListCtrl::BrowseFolder()。点击左边的目录树，右边的文件列表跟着改变，就是通过这一个函数来实现的。
</p>
<p>具体修改请看源文件simplebrowseview.h和simplebrowseview.cpp，都很简单。</p>
<p></p>
<p>3.其它事项 </p>
<p>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等，也要放在同一目录下。
</p>
<h3>第五步：编译、运行</h3>
<p>Rebuild All，Execute SimpleBrowse.exe，一款简洁实用的图片浏览器浮出水面...</p>
<p>大功告成！ </p>
<h3></h3>
<p>（注意：一开始，我编译的是SimpleBrowse的Debug版本，发现不能正确运行，后来改为编译Release版本，就能正确运行了。可能是因为CJ60Lib.lib和thl.lib是Release版本的MFC扩展类库，需要配套的缘故。）</p>
<h3>制作心得：</h3>
<p>我对这款图片浏览器的评价是：简洁，实用，值得一玩。 </p>
<p>说其简洁，是因为我编写的代码不超过100行，调用的函数不超过10个。这得归功于CJ60Lib.dll和thl.dll，它们都内置有强大的功能，而外壳封装却十分简单。
</p>
<p>说其实用，是因为这款图片浏览器实现了图片浏览的基本功能，缩图相当好看，浏览速度够快，能浏览的图片格式也挺多。 </p>
<p>用不超过100行的代码就搞出了这么一款简洁实用的图片浏览器，DIY，乐趣无穷！ </p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -