深入浅出CChart 每日一课——快乐高四第三课 巨人的垫脚石，DirectUI之DuiLib篇

在前面第十七课，笨笨已经给大家展示了CChart在国产开源DirectUI库炫彩界面库中的使用方法。炫彩界面库的确不错，但从目前看来，另一款国产开源DirectUI库DuiLib更加火，华为、百度、腾讯、金山、360好像都在用，所以笨笨又当了一回小学生，学习了一把DuiLib。这要感谢Alberl大神，写了一篇通俗易懂的教程，教程网址http://www.cnblogs.com/Alberl/p/3341956.html。

学完之后，发现CChart在DuiLib中应用非常容易，下面笨笨就给大家交流这回当小学生的心得。

笨笨一向离不开VC6，不过这次发现，DuiLib真的是不支持VC6，想了很多招都不行。没办法，只好抛却糟糠妻，拥抱白富美，拿起了VS2010。更白更富更美的VS2012笨笨没法消受，因为系统是Xp，装不了。

A3.1 编译DuiLib动态库

按照Alberl大神的方法，用SVN下载了最新的DuiLib，并用VS2010打开DuiLib.sln编译。

为方便，编译完成后，笨笨把4个Dll文件DuiLib.dll、DuiLib_d.dll、DuiLib_u.dll、DuiLib_ud.dll和4个导入库文件DuiLib.lib、DuiLib_d.lib、DuiLib_u.lib、DuiLib_ud.lib集中放置在一个目录中，同时把下载得到的一个DuiLib子目录里面的内容也拷贝到这个目录中，在保持目录结构的同时，删除掉除了.h文件以外的所有文件。这样，笨笨就得到了一个可以独立使用的DuiLib了。

笨笨给大家确认一下，刚才这个目录里面现在有四个lib文件，四个dll文件，一个UIlib.h文件，四个子目录（Control、Core、Layout、Utils），现在笨笨把这个目录命名为DuiLib。

A3.2 CChart编程

第一步，利用VS2010建立一个Win32 Application，名字为LessonA03，在向导中选择Empty Project。

第二步，拷贝刚才建立的DuiLib目录到内层的LessonA03目录。

第三步，拷贝CChart库的Library目录到内层的LessonA03目录，并把这个目录改名为CChart。

第四步，建立一个LessonA03.cpp文件并添加到工程中。

第五步，修改LessonA03.cpp的内容如下。

#pragma once
#include "DuiLib\UIlib.h"
using namespace DuiLib;

#ifdef _DEBUG
#   ifdef _UNICODE
#       pragma comment(lib, "DuiLib\\DuiLib_ud.lib")
#   else
#       pragma comment(lib, "DuiLib\\DuiLib_d.lib")
#   endif
#else
#   ifdef _UNICODE
#       pragma comment(lib, "DuiLib\\DuiLib_u.lib")
#   else
#       pragma comment(lib, "DuiLib\\DuiLib.lib")
#   endif
#endif

#include "CChart\Chart.h"
#ifdef _DEBUG
#	if defined(_UNICODE) || defined(UNICODE)
#		pragma comment(lib, "CChart\\PlotDll_ud.lib")
#	else
#		pragma comment(lib, "CChart\\PlotDll_d.lib")
#	endif
#else
#	if defined(_UNICODE) || defined(UNICODE)
#		pragma comment(lib, "CChart\\PlotDll_u.lib")
#	else
#		pragma comment(lib, "CChart\\PlotDll.lib")
#	endif
#endif

class CWndUI: public CControlUI
{
public:
CWndUI(): m_hWnd(NULL){}

virtual void SetInternVisible(bool bVisible = true)
{
__super::SetInternVisible(bVisible);
::ShowWindow(m_hWnd, bVisible);
}

virtual void SetPos(RECT rc)
{
__super::SetPos(rc);
::SetWindowPos(m_hWnd, NULL, rc.left, rc.top, rc.right - rc.left, rc.bottom - rc.top, SWP_NOZORDER | SWP_NOACTIVATE);
}

BOOL Attach(HWND hWndNew)
{
if (! ::IsWindow(hWndNew))
{
return FALSE;
}

m_hWnd = hWndNew;
return TRUE;
}

HWND Detach()
{
HWND hWnd = m_hWnd;
m_hWnd = NULL;
return hWnd;
}

protected:
HWND m_hWnd;
};

class CDuiFrameWnd : public WindowImplBase
{
public:
virtual LPCTSTR    GetWindowClassName() const   {   return _T("DUIMainFrame");  }
virtual CDuiString GetSkinFile()                {   return _T("duilib.xml");  }
virtual CDuiString GetSkinFolder()              {   return _T("");  }

CChartWnd m_ChartWnd;

virtual CControlUI* CreateControl(LPCTSTR pstrClassName)
{
if (_tcsicmp(pstrClassName, _T("Wnd")) == 0)
{
CWndUI  *pUI  = new CWndUI;
HWND    hWnd  = CreateWindow(_T("BUTTON"), _T("win32"), WS_VISIBLE | WS_CHILD | BS_PUSHBUTTON, 0, 0, 0, 0, m_PaintManager.GetPaintWindow(), NULL, NULL, NULL);
pUI->Attach(hWnd);

m_ChartWnd.Attach(hWnd, kTypeXY);
m_ChartWnd.GetChart()->AddPoint2D(1, 1);
m_ChartWnd.GetChart()->AddPoint2D(2, 2);
m_ChartWnd.GetChart()->AddPoint2D(3, 2);
m_ChartWnd.GetChart()->AddPoint2D(4, 1);

return pUI;
}
//此处原来Alberl大神直接返回NULL，笨笨认为应该修改一下，不知正确否？
//return NULL;
return WindowImplBase::CreateControl(pstrClassName);
}
};

int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)
{
CPaintManagerUI::SetInstance(hInstance);

CDuiFrameWnd duiFrame;
duiFrame.Create(NULL, _T("DUIWnd"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
duiFrame.CenterWindow();
duiFrame.ShowModal();
return 0;
}

 

第六步，编译解决方案，将在外层的LessonA03目录下出现一个Debug目录，里面有编译得到的exe文件。

第七步，建立xml文件，命名为duilib.xml，保存到刚才的Debug目录中。文件内容如下。

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
<!-- 窗口的初始尺寸(宽800，高600)、窗口的最小尺寸(宽600，高400)、标题栏拖拽区域(高32)、可拖拽边框大小(这里添加sizebox后就可以拖拽边框调整大小了) -->
<VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
<!-- 整个窗口的背景色 -->
<!-- 标题栏区 -->
<HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">
<!-- 标题栏背景色 bkcolor、bkcolor2、bkcolor3分别是渐变色的三个值-->
<VerticalLayout />
<!-- 占空位，占据左边所有的空位-->
<VerticalLayout width="77">
<!-- 右边三个控件所占的宽度-->
<Button name="minbtn"   tooltip="最小化" float="true" pos="0,5,22,24"  width="23" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' " pushedimage=" file='SysBtn\MinFocus.bmp' "/>
<Button name="maxbtn"   tooltip="最大化" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' " pushedimage=" file='SysBtn\MaxFocus.bmp' " />
<Button name="restorebtn" visible="false" tooltip="还原" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\StoreNormal.bmp' " hotimage=" file='SysBtn\StoreFocus.bmp' " pushedimage=" file='SysBtn\StoreFocus.bmp' " />
<Button name="closebtn" tooltip="关闭"   float="true" pos="44,5,74,24" width="28" normalimage=" file='SysBtn\CloseNormal.bmp' " hotimage=" file='SysBtn\CloseFocus.bmp' " pushedimage=" file='SysBtn\CloseFocus.bmp' "/>
</VerticalLayout>
</HorizontalLayout>

<!-- 客户区 -->
<HorizontalLayout>
<!--我们的CChart窗口-->
<Wnd float="true" pos="50,50,0,0" width="600" height="400" />
</HorizontalLayout>
</VerticalLayout>
</Window>

第八步，下载标题栏图片资源，网址是Alberl大神提供的，http://download.csdn.net/download/qq316293804/6331813。这个文件也可以找笨笨要。

文件名为SysBtn.zip，把这个文件解压到刚才的Debug目录中，注意解压完后应该只有一层SysBtn目录，不能是两层，也不能没有这个目录。

第九步，把PlotDll_ud.dll和DuiLib_ud.dll拷贝到刚才的Debug目录中。

第十步，现在可以运行程序了，不容易呀。



嘿嘿，效果还是不错哟。

A3.3 代码略解

本节课的代码主要参考了Alberl大神的系列教程“2013 duilib入门简明教程”第16课，“结合win32和MFC”。网址为http://www.cnblogs.com/Alberl/p/3352696.html，如果在duilib方面有不清楚的，请参考大神的教程，笨笨就不班门弄斧了。

DuiLib一般的窗口是没有HWND句柄的。但Alberl大神在这一课里面，讲解了怎样在DuiLib里面加入带HWND句柄的窗口，有了这个HWND句柄，CChart就可以登场了。就这么简单！笨笨也不详细解释了，和前面课程没有什么不同。