今天介绍一下利用clayui制作界面的工作流程，包含以下内容：
1. 使用clayui编辑系统制作一个简单的界面，
2. 添加鼠标消息响应，并制作对应的互动动画效果
3. 输出界面文件，皮肤文件，布局文件
4. 建立一个MFC的对话框工程，使用clayui开发库里提供的函数导入界面文件，皮肤与布局，并将界面显示在MFC的对话框里
5. 添加消息响应函数，对各种界面消息进行处理
先看一下最终效果：
皮肤.cncskin；点布局库标签，打开布局文件：布局001.cnclayoutedit
2. 点击添加，添加一个窗体，取名为：testwin，
然后选中刚创建的testwin，点击控件标签，再点击勾选框，为testwin添加一个子窗体，
勾选框，在左侧的属性栏里将标识修改为：back，
将属性栏往下拉，找到“是否使用布局”，勾上，然后将布局名选为“flexwin"，
此时，back有了一个”flexwin"的布局，现在可以在窗体设计区，调整back的高宽，使back与testwin完全重合，如下图：
确保back是选中的情况下，可以在属性栏的最下面，修改“文字”以及“水平对齐”属性，来调整标题文字。
在属性栏里找到“对齐方式”属性，将对齐方式修改为“中心对齐”，然后将“冻结”打勾，此时，back将不能被选中，只能选中testwin，而当你调整"testwin"的大小时，会发现back的尺寸会随着"testwin"的改变而改变，这就是“中心对齐”的效果。其他的对齐效果，大家可以自己操作体会一下。效果如下图：
3. 点击控件标签，选中testwin，添加2个文本，
1个下拉框，修改标识为“年龄”
修改标识为“姓名”
修改标识为“确定”，“取消”，排列如下：
编辑框的布局选择editbox，下拉框的布局选择combox，勾选框布局选择check1
选中文本后，可以直接键盘输入文字，
为了让文字的效果更好，可以给文字添加阴影：先选中文本，在左侧的属性栏里找到滤镜，选择“阴影”，目前只有阴影这一个滤镜，半径设为4，最大为5，x，y偏移设为4，刚开始阴影是透明的，需要点一下颜色，出现颜色修改滚动条，调节a，也就是透明度，为125%，颜色参数可以依照自己的喜好设置，如下图：
另外利用阴影滤镜还可以达到文字描边的效果，如下图：
4. 现在为界面添加一个互动动画效果，选中testwin，或者testwin的任何一个子窗口，然后点击动画层标签，可以看到动画层里只有有一个INIT，并且处于选中状态，
在clayui里，动画都需要有一个消息来触发，而每个窗体创建时，都会自动生成一个动画层，也就是INIT，意思就是初始化完毕后会触发的动画，在第一篇教程里，我们的动画都是创建在初始化的动画层里，所以测试的时候，窗体创建完毕就会立即播放动画。
好的，那么，现在我们为确定按钮添加一个鼠标滑进，鼠标滑出的动画，
选择“触发消息”为：onmousein，“消息类型”为：子FRAME消息，参数不填，“目标窗体”选为：确定，然后点“增加”，此时可以看到动画层里增加了一栏：onmousein%确定，同样为“确定”按钮添加一个onmouseout消息，如下图：
动画层其实也可以看做是一个关键桢，现在可以点击刚创建的动画层，会发现窗体编辑区里发生了变化：窗体编辑区里除了testwin之外，其他子窗体都没有了，这是因为我们只是创建一个“空白关键桢”而已。
滑入”确定“按钮时，让按钮有一个放大的动画效果，而当鼠标滑出时，让按钮有一个缩小的动画效果。
”添加到动画层“，再在下拉框里选择 onm ouseout%确定，然后点击”添加到动画层“，现在，点击动画层列表里的onmousein%确定，onmouseout%确定，会发现窗体编辑区的testwin里出现了确定按钮，如下图：
现在动画层里选中 onm ousein%确定 ，然后在窗体编辑区里选中“确定”按钮，按住shift 拖出一个动画对象，选中动画对象，在属性栏里将x缩放系数，y缩放系数修改为1.2，1.2，持续时间改为2000，缩放缓动方式改为弹性，并将忽略位移，忽略旋转，忽略颜色打上勾，如下图：
现在点一下测试看一下，将鼠标移动到“确定”按钮上，“确定”按钮会有一个弹性的放大动画，这样，界面就有了那么一点交互的感觉了。
然后在窗体编辑区里选中“确定”按钮，按住shift 拖出一个动画对象，选中动画对象，在属性栏里将x缩放系数，y缩放系数修改为1，1，持续时间改为2000，缩放缓动方式改为弹性，并将忽略位移，忽略旋转，忽略颜色打上勾
现在可以再点测试，将鼠标移动到“确定”按钮上，然后再移出，“确定”按钮会有一个放大缩小的交互动画效果，界面变得更加动感了。
此时可以保存下testwin窗体，保存的时候会出现一个选择框，选择要保存的窗体，由于现在只有testwin一个窗体，直接点OK，然后点保存就可以了，如下图：
按照相同的方式，可以为取消也添加一个这样的动画效果。
下面再实现一个点击“确定”后的动画效果：点击确定后，窗体上的控件都以动画方式分散开，并且渐渐变得透明。
先选中testwin，然后将动画层里的 “触发消息“ 选为LCLICK（左键点击消息），”消息类型“选为”子FRAME消息“，”目标窗体“选为 确定 ，点”增加“，动画层会增加一个 LCLICK%确定 的动画层，
选中动画层里的INIT，切换到INIT层，然后在窗体编辑区选中”姓名“，将”添加到动画层“下的下拉框选为”LCLICK%确定“，然后点”添加到动画层“，将”姓名“添加到 LCLICK%确定 这个动画层，依次将”年龄“，编辑框，下拉框，确定，取消，都添加到 LCLICK%确定 动画层，然后分别为子窗体添加动画对象，将动画对象的alpha值修改0%，并修改等待时间为别为：0，100，200，300，400，500，按照以下方式排列，如下图：
现在可以点测试，点确定按钮，如果参数无误的话，将会看到所有控件依次向左飞出，并渐渐消失。
5. 将做好的窗体，皮肤，布局输出成clayui可以读取的资源文件
点输出，然后选择testwin，OK后填写文件名与后缀，这里对文件名与后缀没有硬性规定，可以随便写，我这里就输出成testwin.ci文件，如下图：
输出皮肤文件：点皮肤库标签，点”导出皮肤“，保存文件名填写fui1.cncskinex，如下图：
输出布局文件：点布局库标签，点”导出布局库“，保存成 fui1.cnclayout，如下图：
操作无误的话，最后会得到testwin.ci，fui1.cncskinex，fui1.cnclayout，这三个文件
下面介绍如何在VC里使用clayui导入界面，并显示：
1. 新建一个MFC对话框工程，工程名为：Clayui_demo1，在工程里加入clayui的include和lib路径，将clayui_ext文件夹复制到工程目录，并将clayui_ext目录下的所有文件添加到工程里
clayui_ext下的类和函数是一些辅助类与函数，帮助你快速创建初始化clayui，以及减少一些代码量
为工程添加RTTI支持，并选择Debug MultiThreaded DLL（debug模式），或者MultiThreaded DLL（ Release模式），如下图：
在stdafx里加上：#include "clayui_ext/config_clayui.h"
LINK里添加：clayui_D.lib imm32.lib
2. 在CClayui_demo1Dlg里添加如下变量：
CClayuiManager负责clayui的初始化，以及销毁
CClayuiRootWin负责管理clayui的窗口，绘图区，消息循环
3. 在CClayui_demo1Dlg::OnInitDialog()里添加如下代码：
这里可以看到，m_clayuimgr载入了皮肤，布局文件，接在路径名后面的参数是皮肤和布局的名称，名称可以在编辑器里看到，如下图：
里设置了绘图区的大小，为800，600，后面的islayeredwindow如果设为1，会将当前的MFC窗口变成一个layeredwindow，效果会更好
注意：设成layeredwindow时，需要将MFC的对话框的Border设为NONE，如下图：
后面的看代码就很明白了，先创建一个clayui的窗口，然后载入我们刚做好的testwin.ci界面文件，然后将窗口指针传给m_rootwin.
CTestWin是一个派生自CLAYUI_BFRAME的自定义类。
4. 为CClayui_demo1Dlg添加一个WM_TIMER消息处理函数，并重载PreTranslateMessage(MSG* pMsg) ，代码如下：
view plain
1. void CClayui_demo1Dlg::OnTimer(UINT
2. {
3. // TODO: Add your message handler code here and/or call default
4. m_rootwin.Step(GetSafeHwnd());
5. CDialog::OnTimer(nIDEvent);
6. }
7.
8. BOOL
9. {
10. // TODO: Add your specialized code here and/or call the base class
11. this, pMsg->message, pMsg->lParam, pMsg->wParam);
12. return
13. }
这时候可以点f5来运行一下程序，别忘记将clayui_d.dll，clayui.dll，testwin.ci，fui1.cnclayout，fui1.cncskinex与执行程序放到一个目录，如果没有意外的话，将会出现刚才做好的界面，将鼠标移动到“确定”按钮上试试，并点击“确定”按钮试试，是不是有动感效果呢？
5. 添加消息处理函数，clayui的消息处理函数与MFC类似，在MFC里是重载PreTranslateMessage函数，那么在clayui里则是重载UserAction(CLAYUI_MSGINFO *msginfo, int x, int y, DWORD msg)函数
UserAction(CLAYUI_MSGINFO *msginfo, int x, int y, DWORD msg)函数，如下
view plain
1. void CTestWin::UserAction(CLAYUI_MSGINFO *msginfo, int x, int y, DWORD
2. {
3. if(msg == CLAYUI_LCLICK)
4. {
5. this);
6. if(FrameNamecmp(frame, "取消"))
7. {
8. CClayui_demo1Dlg* dlg = (CClayui_demo1Dlg*)AfxGetApp()->m_pMainWnd;
9. dlg->m_rootwin.m_isquit = TRUE;
10. PostQuitMessage(0);
11. }
12. }
13. }
代码很简单，可以看出是响应了LCLICK消息，
CLAYUI_FRAME* frame = msginfo->GetFrame(this); 这句是得到消息的来源窗口，然后利用窗口的标识来判断是哪个子窗口发来的消息，这里判断是否是“取消”按钮发送的消息，如果是，就结束整个程序。
然后，我们用代码来为testwin加上一个初始动画，演示下使用代码来创建动画效果。先为CTestWin重载LoadFromMem(BYTE *filebuffer, DWORD filesize, BOOL isMemMgr)函数，如下：
view plain
1. void CTestWin::LoadFromMem(BYTE *filebuffer, DWORD filesize, BOOL
2. {
3. CLAYUI_BFRAME::LoadFromMem(filebuffer, filesize, isMemMgr);
4.
5. AlphaTo(0);
6. ScaleTo(0, 0, 1);
7.
8. "twscale", this, 1000, 0, 1, 1, this, 0);
9. "twalpha", this, 1000, 0, 100, this, 0);
10. }
当CTestWin加载完布局后，会调用
LoadFromMem
函数
LoadFromMem函数里，先将窗口的透明值设为0，x，y缩放系数设为0，然后为CTestWin添加缩放动画与alpha动画，让CTestWin有一个渐显，放大的动态效果。
在config_clayui.h里还有其他的SetXXXAnimation系列的函数，这里说明一下里面的参数：
CLAYUI_BFRAME* parent：这个是指动画对象创建以后，会放到哪个窗口里管理，如果parent被销毁了，动画对象也会被销毁。
CLAYUI_FRAME* target：目标窗口，这里注意一下，parent和target可以是2个毫不相干的窗口，parent只是管理动画，而目标窗口是发生动画的窗口。
short isdie：动画播放完毕后，是否销毁目标窗口
short isendmsg：动画播放完毕后，是否发送一个动画播放完毕的消息CLAYUIMSG_ANIMATIONEND给target的父窗口，这里再说明下，target的父窗口是target->GetParent()，与传给动画的parent参数没有任何关系。
short loopmode：动画的循环方式：0-只播放一次，1-循环，2-定格在最后一桢
好的，这次就讲解到这里了，下次会继续介绍clayui的各种功能。