深入浅出CChart 每日一课——快乐高四第五十二课 旧梦重温，天上人间之炫彩界面库

早在第十七课，就已经介绍了CChart在炫彩界面库中的使用方法。不过呢，那里的方法有一点小问题，就是我们有点霸道，占用了整个客户区。一般情况下，这样是不太合适的，因此，笨笨一直有重写一个炫彩教程的想法。

但是，炫彩是一个收费的软件，其设计器的价格不便宜，笨笨囊中羞涩，根本买不起。但没有设计器的话，炫彩的布局xml文件比较难写，所以这事就一直搁置下了。

但炫彩界面库有一个早期的v2.1.1版有免费版本的设计器，虽然功能受限，但也是勉强能用的，笨笨尝试了一下，也就写下了这一课教程。

由于炫彩界面库更新很快，其接口函数有不断有所变化，目前版本已经到v3.1了，因此这一课的代码需要根据升级情况加以修改才能适合新版本，不过基本的编程框架和编程思想是完全没有问题的。

A52.1 界面布局文件

各类DirectUI界面库，其最主要的功能，就是利用xml文件（或类似的文件）进行界面布局，实现界面和逻辑分离，简化编程。

炫彩界面库的xml布局文件，当然可以用手撸，但这个有点难度。因为炫彩的商业化程度比较高，主推其收费的炫彩界面设计器，加上更新频繁，很难找到xml布局文件的详细文档。因此，这里我们用免费的v2.1.1版本界面设计器进行界面布局设计。

如图所示，我们建立了一个非常简单的布局工程，工程名为Simple。虽然简单，也可以代表大多数应用场景了。

炫彩界面库的标题栏是空的，没有常见的三个标准按钮，我们加了一个buttonUI按钮控件，标题是“关闭”，用于关闭程序，不然不好退出程序。

这个按钮的ID设为数字121。

 其实ID直接设置为数字是没有办法的事，因为免费版的界面设计器无法把ID保存到资源文件resource.res文件中。这里加的控件很少，用数字也没有什么问题。

在客户区首先添加一个layoutObject控件，充满整个客户区。

然后再在这个控件里面添加两个layoutObject控件。第一个控件高度方向充满父控件，宽度设置为100。第二个控件高度方向充满父控件，宽度设置为”:1”，即占用剩余空间。

在左边的layoutObject控件里放置一个buttonUI按钮控件，内容属性修改为“信息按钮”，ID设置为数字122。

在右边的layoutObject控件里放置一个基础元素elementUI控件，ID设置为数字151，我们的图就准备画在这个控件上。

下面就是我们添加的所有控件之间的隶属关系。

 

A52.2 代码编写

利用Visual Studio 2010建立一个空的Win32项目LessonA52。

 

新建一个cpp文件，并加入项目。 

 从炫彩界面库的文档中拷贝一个加载界面布局文件的模板，放在这个文件里面，全部代码如下。

#include "stdafx.h"
#pragma comment(lib, "XCGUI.lib")
#include "xcgui.h"
 
class CMyWindowDemo
{
public:
    HWINDOW m_hWindow;
 
    CMyWindowDemo()
    {
        Init();
    }
    void Init()
    {
        XC_LoadResource(L".\\resource.res");  //加载资源文件
        HXCGUI hXCGUI=XC_LoadLayout(L".\\layout.xml"); //加载布局文件
        if(XC_IsHWINDOW(hXCGUI))
        {
            m_hWindow=(HWINDOW)hXCGUI;
            //XC_GetObjectByID(m_hWindow, 100); //获取指定ID对象
            //XC_GetObjectByName(L"name") //获取指定name对象
            //XC_ShowLayoutFrame(TRUE); //显示布局边界
 
			XWnd_AdjustLayout(m_hWindow);
            XWnd_ShowWindow(m_hWindow,SW_SHOW);
        }else
        {
            //错误
        }
};
 
int WINAPI wWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)
{
    XInitXCGUI(FALSE);
    CMyWindowDemo  MyWindow;
    XRunXCGUI();
    XExitXCGUI();
    return 0;
}

直接编译，发现一个编译错误。

c:\program files (x86)\microsoft visual studio 10.0\vc\atlmfc\include\afx.h(24): fatal error C1189: #error :  Building MFC application with /MD[d] (CRT dll version) requires MFC shared dll version. Please #define _AFXDLL or do not use /MD[d]

对项目配置进行一点调整。

这下编译正常了。

把前面建立好的布局文件连同其所在的Simple文件夹一起，拷贝到LessonA52的内层文件夹里面。

在Init()函数里正确设置布局文件的路径。

        XC_LoadResource(L".\\Simple\\resource.res");  //加载资源文件
        HXCGUI hXCGUI=XC_LoadLayout(L".\\Simple\\layout.xml"); //加载布局文件

现在编译，运行程序如图。

 在Init()函数里面添加这句话可以让关闭按钮起到预期的作用。

			HELE hCloseBtn = (HELE)XC_GetObjectByID(m_hWindow, 121);
			XBtn_SetType(hCloseBtn,button_type_close);

添加CChart和数学库的引用。

#include "Chart.h"
#if defined(_UNICODE) || defined(UNICODE)
#	pragma comment(lib,"CChartu.lib")
#else
#	pragma comment(lib,"CChart.lib")
#endif
using namespace NsCChart;
 
#include <math.h>

在HWINDOW m_hWindow;一行下面添加一个绘图变量。

CChart m_Chart;

在Init()函数里初始化绘图变量。

		double pi=3.1415926516;
		for(int i=0; i<720; ++i)
		{
			m_Chart.AddPoint2D(i, 1.3*sin(i*2.0*pi/360));
		}
		m_Chart.SetTitle(_T("炫彩界面库"));

在CMyWindowDemo类中编写一个绘图函数，这个函数实现在右边的elementUI控件上绘图。

	int OnPanelDraw(HDRAW hDraw,BOOL *pbHandled)
	{
		 RECT rect;
		 HELE hPanel = (HELE)XC_GetObjectByID(m_hWindow, 151);
		 XEle_GetClientRect(hPanel, &rect);
		 HDC hDC = XDraw_GetHDC(hDraw);
		 XEle_DrawEle(hPanel, hDraw);
		 m_Chart.OnDraw(hDC, rect);
		 
		 *pbHandled=TRUE;
		 return 0;
	}

在Init()函数里面为控件注册这个绘图函数。

			HELE hPanel = (HELE)XC_GetObjectByID(m_hWindow, 151);
			XEle_RegEventCPP(hPanel, XE_PAINT, &CMyWindowDemo::OnPanelDraw);

现在运行，效果如图。

 目前已经实现了在右边的elementUI控件上绘图。

存在的问题是暂没有消息响应，下面就解决这个问题。其实增加消息响应的方法和第17课基本一样。

先编写消息响应函数。

    int OnEleLButtonDown(UINT nFlags,POINT *pPt,BOOL *pbHandled)
    {
          HWND hWnd = XWnd_GetHWND(m_hWindow);
		  if(m_Chart.OnLButtonDown(hWnd, *pPt, 0))
		  {
			  XWnd_RedrawWnd(m_hWindow);
		  }
		  *pbHandled = FALSE;
		  return 0;
	}
	int OnEleLButtonUp(UINT flags,POINT *pPt,BOOL *pbHandled)
	{
		HWND hWnd = XWnd_GetHWND(m_hWindow);
		if(m_Chart.OnLButtonUp(hWnd, *pPt, 0))
		{
			XWnd_RedrawWnd(m_hWindow);
		}
		*pbHandled = FALSE;
		return 0;
	}
 
    int OnEleLButtonDblClk(HWINDOW hWindow,UINT nFlags,POINT *pPt, BOOL *pbHandled)
	{
		HWND hWnd = XWnd_GetHWND(m_hWindow);
		if(m_Chart.OnLButtonDblClk(hWnd, *pPt, 0))
		{
			XWnd_RedrawWnd(m_hWindow);
		}
		*pbHandled = FALSE;
		return 0;
	}
 
    int OnEleRButtonDown(HWINDOW hWindow,UINT nFlags,POINT *pPt, BOOL *pbHandled)
	{
		HELE hPanel = (HELE)XC_GetObjectByID(m_hWindow, 151);
		XEle_PointClientToWndClient(hPanel, pPt);
 
		HWND hWnd = XWnd_GetHWND(m_hWindow);
		ClientToScreen(hWnd, pPt);
		if(m_Chart.OnContextMenu(NULL, hWnd, *pPt))
		{
			XWnd_RedrawWnd(m_hWindow);
		}
		*pbHandled = FALSE;
		return 0;
	}
 
    int OnEleMouseMove(HWINDOW hWindow,UINT nFlags,POINT *pPt, BOOL *pbHandled)
	{
		HWND hWnd = XWnd_GetHWND(m_hWindow);
		if(m_Chart.OnMouseMove(hWnd, *pPt, 0))
		{
			XWnd_RedrawWnd(m_hWindow);
		}
		*pbHandled = FALSE;
		return 0;
	}

再到Init()函数里注册这些响应函数。

			XEle_RegEventCPP(hPanel, XE_LBUTTONDOWN, &CMyWindowDemo::OnEleLButtonDown);
			XEle_RegEventCPP(hPanel, XE_LBUTTONUP, &CMyWindowDemo::OnEleLButtonUp);
			XEle_RegEventCPP(hPanel, XE_LBUTTONDBCLICK, &CMyWindowDemo::OnEleLButtonDblClk);
			XEle_RegEventCPP(hPanel, XE_RBUTTONDOWN, &CMyWindowDemo::OnEleRButtonDown);
			XEle_RegEventCPP(hPanel, XE_MOUSEMOVE, &CMyWindowDemo::OnEleMouseMove);

现在一切正常了！！！

前面创建的布局文件中，客户区左边还添加了一个按钮。其实这个按钮没有什么用，这里随便使用一下吧。

点击按钮的响应函数如下。

	int My_EventDrawBtnClick(BOOL *pbHandled)
	{
		MessageBoxW(XWnd_GetHWND(m_hWindow),L"右半边是绘图区域",L"提示",MB_OK);
		*pbHandled=TRUE;
		return 0;
	}

注册这个响应函数。

			HELE hDrawBtn = (HELE)XC_GetObjectByID(m_hWindow, 122);
			XEle_RegEventCPP(hDrawBtn,XE_BNCLICK,&CMyWindowDemo::My_EventDrawBtnClick); //注册按钮点击事件

点击按钮，就弹出这个窗口。

 OK，收工。