(2)炫彩界面库系列教程之360杀毒,XML实现

(2)炫彩界面库系列教程之360杀毒,XML实现

 

 

---

 

概述:

 

        该教程演示如何使用XML实现360杀毒软件界面，通过观察360杀毒软件界面,我们发现该界面没有边框，没有标题栏；三个切换子视图的按钮并不是Tab控件,该界面我们用贴图方式实现;

        快速开发，我们使用体验版的界面设计器辅助工具;

 

炫彩界面设计器,版本:体验版.
炫彩界面库, 版本:1.0.5, 下载地址:www.xcgui.com.QQ技术交流群:2283362

 

 炫彩界面库简介:
    C++软件界面开发框架,采用DirectUI设计思想,在窗口类无子窗口，元素都是一个逻辑上的区域;
    界面效果出众,解决了传统UI子窗口抖动,闪烁,效率低，代码臃肿等问题,不需要其他的库支持，
    炫彩，高效，精简,易学,黄金分割点,快速开发.在这条高速笔直的道路上,炫彩界面库让你一份付出，十倍回报.
    炫彩可视化界面设计器，为您带来飞一样的界面设计速度,快速开发发挥到极致.

 

界面实现:

     1.准备好所需的界面图片，图片文件夹名为"360",

        我们打开界面设计器,新建一个XML文件,文件名叫360,窗口类型为普通窗口;

 

2.在文件视图中, 双击360.xml, 打开可视化设计视图

 

2.1设置窗口属性:

      宽度642, 高度482,图片360/360.bmp;

 

2.2设置按钮:

     从工具箱中选择按钮元素， 然后放入设计视图，移动到适当位置，调整他们的大小；

     共有6个按钮:菜单按钮,最小化按钮,关闭按钮,病毒查杀按钮，实时防护按钮，在线升级按钮;

     设置按钮属性，鼠标离开图片，鼠标停留图片,鼠标按下图片，以及按钮大小，微调按钮x,y坐标;

 

2.3设置子视图

     再从工具箱中增加两个元素到窗口,子视图1实时防护，子视图2在线升级,调整适当大小,把视图的内容图片贴上去

     显示属性设置为false;

 

 注意元素的ID要与代码中定义的ID号一致;

好了现在我们的界面已经设计完成，选择菜单文件保存，界面布局信息已经保存到360.xml中了.

界面设计就这么简单;

     下面我们要为界面按钮添加点击事件处理；

 

3.新建一个Win32项目,编码方式为Unicode;

4.在cpp文件中包含炫彩界面库文件

#include "../include/xc.h" //炫彩界面库文件 #pragma comment(lib,"XCGUI.lib")

 

5.定义元素ID号,这个要与XML中的元素ID一致

#define IDB_BTN1 101 //病毒查杀 #define IDB_BTN2 102 //实时防护 #define IDB_BTN3 103 //产品升级 #define IDB_CLOSE 104 //关闭按钮 #define IDB_MENU 105 //菜单按钮 #define IDB_MIN 106 //最小化按钮 //菜单项ID #define IDM_ID1 106 #define IDM_ID2 107 #define IDM_ID3 108 #define IDM_ID4 109 #define IDM_ID5 110 #define ID_ELE1 111 //实时防护 视图 #define ID_ELE2 112 //产品升级 视图

 

6.派生一个应用程序实例类

class CMyApp : public CXApp //派生一个自己的应用程序实例类 { public: virtual bool Init(); };

 

 7.派生一个自己的窗口类

class CMyWnd : public CXWnd //派生一个自己的窗口类 { public: CXButton m_btn; virtual bool OnLButtonDown(WPARAM wParam, LPARAM lParam); //鼠标按下消息 virtual void EleEventProc(CXEle *pEle,int type,int wParam=0, int lParam=0); //元素事件 };

 

8.在这里应用程序初始化中，加载刚才设计好的XML文件,创建您的第一个窗口

bool CMyApp::Init() //在这里应用程序初始化中，创建您的第一个窗口 { //创建窗口 CMyWnd *pWnd=new CMyWnd; //new一个窗口对象 bool res=LoadXML(L"360.xml",pWnd); //加载XML文件 if(!res) return false; return true; }

 

9.处理鼠标按下消息，以便用户移动窗口

bool CMyWnd::OnLButtonDown(WPARAM wParam, LPARAM lParam) { if(false==CXWnd::OnLButtonDown(wParam,lParam)) { ::PostMessage(m_hWnd,WM_NCLBUTTONDOWN,HTCAPTION,0); } return true; }

 

10.处理按钮事件, 以及子视图切换

void CMyWnd::EleEventProc(CXEle *pEle,int type,int wParam, int lParam) { CXWnd::EleEventProc(pEle,type,wParam,lParam); if(XE_BN_CLICK==type) { switch(pEle->m_id) { case IDB_CLOSE: PostMessage(WM_CLOSE,0,0); break; case IDB_MENU: { CXMenuWnd *pMenu=CXMenuWnd::Create(); pMenu->AddItem(IDM_ID1,L"在线帮助"); pMenu->AddItem(IDM_ID2,L"360杀毒网站"); pMenu->AddItem(IDM_ID3,L"分隔符",0,XM_SEPARATOR); pMenu->AddItem(IDM_ID4,L"隐私申明"); pMenu->AddItem(IDM_ID5,L"关于"); RECT rc,rcWnd; CXButton *pMenuBtn=(CXButton*)GetEle(IDB_MENU); pMenuBtn->GetRect(&rc); GetWindowRect(m_hWnd,&rcWnd); pMenu->PopupMenu(this,rcWnd.left+rc.left,rcWnd.top+rc.bottom); } break; case IDB_MIN: { PostMessage(WM_SYSCOMMAND,SC_MINIMIZE,NULL); } break; case IDB_BTN1: { CXButton *pBtn1=(CXButton*)GetEle(IDB_BTN1); if(NULL==pBtn1) break; CXButton *pBtn2=(CXButton*)GetEle(IDB_BTN2); if(NULL==pBtn2) break; CXButton *pBtn3=(CXButton*)GetEle(IDB_BTN3); if(NULL==pBtn3) break; CXEle *pChild1=GetEle(ID_ELE1); if(NULL==pChild1) break; CXEle *pChild2=GetEle(ID_ELE2); if(NULL==pChild2) break; pBtn1->SetImageLeave(L"360/1.bmp"); pBtn1->SetImageStay(L"360/1.bmp"); pBtn1->SetImageDown(L"360/1.bmp"); pBtn2->SetImageLeave(L"360/5.bmp"); pBtn2->SetImageStay(L"360/6.bmp"); pBtn2->SetImageDown(L"360/6.bmp"); pBtn3->SetImageLeave(L"360/8.bmp"); pBtn3->SetImageStay(L"360/9.bmp"); pBtn3->SetImageDown(L"360/9.bmp"); pChild1->ShowEle(false); pChild2->ShowEle(false); ReDrawWnd(); } break; case IDB_BTN2: { CXButton *pBtn1=(CXButton*)GetEle(IDB_BTN1); if(NULL==pBtn1) break; CXButton *pBtn2=(CXButton*)GetEle(IDB_BTN2); if(NULL==pBtn2) break; CXButton *pBtn3=(CXButton*)GetEle(IDB_BTN3); if(NULL==pBtn3) break; CXEle *pChild1=GetEle(ID_ELE1); if(NULL==pChild1) break; CXEle *pChild2=GetEle(ID_ELE2); if(NULL==pChild2) break; pBtn1->SetImageLeave(L"360/2.bmp"); pBtn1->SetImageStay(L"360/3.bmp"); pBtn1->SetImageDown(L"360/3.bmp"); pBtn2->SetImageLeave(L"360/4.bmp"); pBtn2->SetImageStay(L"360/4.bmp"); pBtn2->SetImageDown(L"360/4.bmp"); pBtn3->SetImageLeave(L"360/8.bmp"); pBtn3->SetImageStay(L"360/9.bmp"); pBtn3->SetImageDown(L"360/9.bmp"); pChild1->ShowEle(true); pChild2->ShowEle(false); ReDrawWnd(); } break; case IDB_BTN3: { CXButton *pBtn1=(CXButton*)GetEle(IDB_BTN1); if(NULL==pBtn1) break; CXButton *pBtn2=(CXButton*)GetEle(IDB_BTN2); if(NULL==pBtn2) break; CXButton *pBtn3=(CXButton*)GetEle(IDB_BTN3); if(NULL==pBtn3) break; CXEle *pChild1=GetEle(ID_ELE1); if(NULL==pChild1) break; CXEle *pChild2=GetEle(ID_ELE2); if(NULL==pChild2) break; pBtn1->SetImageLeave(L"360/2.bmp"); pBtn1->SetImageStay(L"360/3.bmp"); pBtn1->SetImageDown(L"360/3.bmp"); pBtn2->SetImageLeave(L"360/5.bmp"); pBtn2->SetImageStay(L"360/6.bmp"); pBtn2->SetImageDown(L"360/6.bmp"); pBtn3->SetImageLeave(L"360/7.bmp"); pBtn3->SetImageStay(L"360/7.bmp"); pBtn3->SetImageDown(L"360/7.bmp"); pChild1->ShowEle(false); pChild2->ShowEle(true); ReDrawWnd(); } break; } } }

 

11.编译程序，生成可执行文件，界面效果

 

XML文件

<xml> <CXWnd id="0" x="300" y="300" width="642" height="482" caption="炫彩界面库" captionBarHeight="0" border="0" image="360/360.bmp"> <CXButton id="105" x="517" y="0" width="34" height="18" bkColor="FFFFFF" imageLeave="360/menu1.bmp" imageStay="360/menu2.bmp" imageDown="360/menu3.bmp"> </CXButton> <CXButton id="106" x="552" y="0" width="33" height="18" bkColor="FFFFFF" imageLeave="360/min1.bmp" imageStay="360/min2.bmp" imageDown="360/min3.bmp"> </CXButton> <CXButton id="104" x="586" y="0" width="44" height="18" bkColor="FFFFFF" imageLeave="360/close1.bmp" imageStay="360/close2.bmp" imageDown="360/close3.bmp"> </CXButton> <CXButton id="101" x="19" y="103" width="172" height="38" imageLeave="360/1.bmp" imageStay="360/2.bmp" imageDown="360/3.bmp"> </CXButton> <CXButton id="102" x="193" y="103" width="172" height="38" bkColor="FFFFFF" imageLeave="360/5.bmp" imageStay="360/5.bmp" imageDown="360/6.bmp"> </CXButton> <CXButton id="103" x="367" y="103" width="172" height="38" bkColor="FFFFFF" imageLeave="360/8.bmp" imageStay="360/8.bmp" imageDown="360/9.bmp"> </CXButton> <CXEle id="111" x="23" y="146" width="591" height="288" show="false" bkColor="FFFFFF" image="360/10.bmp"> </CXEle> <CXEle id="112" x="220" y="221" width="338" height="100" show="false" bkColor="FFFFFF" image="360/11.bmp"> </CXEle> </CXWnd> </xml>

 

我们也可以修改XML文件来调整编译好的程序界面；

到这里界面设计已经完成.