深入浅出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#endifclass 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; } return NULL; }};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就可以登场了。就这么简单！笨笨也不详细解释了，和前面课程没有什么不同。