首先將本節要介紹的控件全部拖到界面上,並調整好位置,如圖:
然後將Name屬性改成其他名字,
不能是【控件名+UI+數字】這種,因爲這是DuiDesigner默認的名字,它不會實際寫入到XML,所以如果控件的名字被取成ActiveXUI1、ActiveXUI2、ButtonUI1這種格式的話,Name屬性會被忽略,可以看到XML是沒有Name屬性的:
所以我們必須給它們指定其他的名字,這裏格式統一爲【控件名+Demo+數字】,如圖:
XML如下(刪除了暫時沒用到的屬性,刪除了標題欄區域,要關閉窗口請按Esc或者在任務欄右鍵關閉):
<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="800,600" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="600,400"> <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"> <HorizontalLayout> <Progress name="ProgressDemo1" text="Progress" float="true" pos="30,28,0,0" width="139" height="30" /> <Slider name="SliderDemo1" text="Slider" float="true" pos="30,77,0,0" width="139" height="30" /> <Combo name="ComboDemo1" float="true" pos="30,264,0,0" width="139" height="30" /> <List name="ListDemo1" float="true" pos="30,314,0,0" width="139" height="218" > <ListHeader /> </List> <ActiveX name="ActiveXDemo1" float="true" pos="202,265,0,0" width="568" height="266" /> <Option name="OptionDemo1" text="Option1" float="true" pos="207,28,0,0" width="60" height="30" /> <Option name="OptionDemo2" text="Option2" float="true" pos="284,28,0,0" width="60" height="30" /> <Option name="OptionDemo3" text="Option3" float="true" pos="361,28,0,0" width="60" height="30" /> </HorizontalLayout> </VerticalLayout></Window>
各種控件的圖片資源請點擊這裏下載(這是整個工程的地址,資源都在Release目錄下),也是解壓到exe目錄即可。
由於複雜控件都需要初始化,所以這裏介紹一個初始化函數InitWindow,相當於MFC的OnInitDialog,所有的初始化操作都在這裏進行。
一、ActiveX控件
由於ActiveX控件必須要初始化,否則啓動時會崩潰,所以第一個介紹它。
因爲ActiveX控件用到了COM,所以需要初始化COM,此時main.cpp的代碼如下:
class CDuiFrameWnd : public WindowImplBase{public: virtual LPCTSTR GetWindowClassName() const { return _T("DUIMainFrame"); } virtual CDuiString GetSkinFile() { return _T("duilib.xml"); } virtual CDuiString GetSkinFolder() { return _T(""); } virtual void InitWindow(){ CActiveXUI* pActiveXUI = static_cast<CActiveXUI*>(m_PaintManager.FindControl(_T("ActiveXDemo1"))); if( pActiveXUI ) { IWebBrowser2* pWebBrowser = NULL; pActiveXUI->SetDelayCreate(false); // 相當於界面設計器裏的DelayCreate屬性改爲FALSE,在duilib自帶的FlashDemo裏可以看到此屬性爲TRUE pActiveXUI->CreateControl(CLSID_WebBrowser); // 相當於界面設計器裏的Clsid屬性裏填入{8856F961-340A-11D0-A96B-00C04FD705A2},建議用CLSID_WebBrowser,如果想看相應的值,請見<ExDisp.h> pActiveXUI->GetControl(IID_IWebBrowser2, (void**)&pWebBrowser); if( pWebBrowser != NULL ) { //pWebBrowser->Navigate(L"https://code.google.com/p/duilib/",NULL,NULL,NULL,NULL); pWebBrowser->Navigate(L"http://www.baidu.com/",NULL,NULL,NULL,NULL); // 由於谷歌時不時被牆,所以換成反應快的網站 pWebBrowser->Release(); } } }}; int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow){ CPaintManagerUI::SetInstance(hInstance); HRESULT Hr = ::CoInitialize(NULL); if( FAILED(Hr) ) return 0; CDuiFrameWnd duiFrame; duiFrame.Create(NULL, _T("DUIWnd"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE); duiFrame.CenterWindow(); duiFrame.ShowModal(); ::CoUninitialize(); return 0;}
此Demo用的是瀏覽器控件,其他的ActiveX控件也是一樣的原理,就不贅述了,duilib自帶了一個FlashDemo,裏面用的是Flash控件,請自行參閱。不過關閉窗口後,會發現產生了崩潰,這是CActiveXUI的一個Bug,詳情請點擊這裏~ 暫時給出一個臨時的快速解決方案,就是將主框架用new的方式生成,而不是直接用變量生成,所以_tWinMain改爲下面這樣:
int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow){ CPaintManagerUI::SetInstance(hInstance); HRESULT Hr = ::CoInitialize(NULL); if( FAILED(Hr) ) return 0; CDuiFrameWnd *pFrame = new CDuiFrameWnd; pFrame->Create(NULL, _T("DUIWnd"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE); pFrame->CenterWindow(); pFrame->ShowModal(); delete pFrame; ::CoUninitialize(); return 0;}
二、進度條控件
給Progress 加上背景圖片(foreimage屬性)和位置信息(value屬性)即可生成如下效果:
XML代碼如下:
<Progress name="ProgressDemo1" text="Progress" float="true" pos="30,28,0,0" width="139" height="30" foreimage="Progress/progress_fore.png" min="0" max="100" value="50" hor="true" align="center" />
如果要改變進度條的位置,則調用以下代碼即可:
CProgressUI* pProgress = static_cast<CProgressUI*>(m_PaintManager.FindControl(_T("ProgressDemo1"))); pProgress->SetValue(100);
三、滑塊控件
給Slider 加上背景圖片(bkimage屬性)和滑塊圖片(thumbimage屬性)即可生成如下效果:
XML代碼如下:
<Slider name="SliderDemo1" float="true" pos="30,77,0,0" width="139" height="18" thumbsize="12,20" bkimage="file='Slider/slider_fore.bmp' mask='0xffff00ff'" thumbimage="file='Slider/SliderBar.png' mask='0xffffffff'"/>
其他的操作和進度條類似~
四、組合框控件
XML如下:
<Combo name="ComboDemo1" float="true" pos="30,264,0,0" width="139" height="30" normalimage="file='ComboBox/Combo_nor.bmp'" hotimage="file='ComboBox/Combo_over.bmp' " pushedimage="file='ComboBox/Combo_over.bmp' " > <ListLabelElement text="張三" selected="true" /> <ListLabelElement text="李四" /> </Combo>
由於此教程是入門教程,所以只加上了最基本的屬性,如果想要將文字對齊等等,請參閱duilib自帶的GameDemo的登錄窗口。
五、列表控件
由於ListBox只是ListCtrl的一個子集,並且比較簡單,所以先介紹ListBox控件。XML如下:
<List name="ListDemo1" float="true" pos="30,314,0,0" width="139" height="218" header="hidden" bkcolor="#FFFFFFFF" itemtextcolor="#FF000000" itembkcolor="#FFE2DDDF" itemselectedtextcolor="#FF000000" itemselectedbkcolor="#FFC1E3FF" itemhottextcolor="#FF000000" itemhotbkcolor="#FFE9F5FF" itemdisabledtextcolor="#FFCCCCCC" itemdisabledbkcolor="#FFFFFFFF" >
<ListLabelElement text="張三" selected="true" />
<ListLabelElement text="李四" />
</List>
親們可以發現ListBox和上面的ComboBox基本沒啥區別,這是因爲duilib的各個控件並沒有嚴格的界限,很多控件都是通過一些基本控件組合起來的~
需要說明的就是:這裏需要加上header="hidden" 隱藏ListCtrl的表頭。
接下來介紹ListCtrl,只有一列的ListCtrl和ListBox並無明顯區別,只需要將header="hidden"去掉,並且設置好ListHeader屬性即可,這裏直接介紹多列的ListCtrl。
先加上表頭,XML如下:
<List name="ListDemo1" float="true" pos="30,314,0,0" width="139" height="218" bkcolor="#FFFFFFFF" itemtextcolor="#FF000000" itembkcolor="#FFE2DDDF" itemselectedtextcolor="#FF000000" itemselectedbkcolor="#FFC1E3FF" itemhottextcolor="#FF000000" itemhotbkcolor="#FFE9F5FF" itemdisabledtextcolor="#FFCCCCCC" itemdisabledbkcolor="#FFFFFFFF" > <ListHeader name="domain" bkimage="List/list_header_bg.png"> <ListHeaderItem text="序號" width="40" height="23" minwidth="16" sepwidth="1" align="center" hotimage="List/list_header_hot.png" pushedimage="List/list_header_pushed.png" sepimage="List/list_header_sep.png" /> <ListHeaderItem text="文件名稱" width="84" height="23" minwidth="16" sepwidth="1" align="center" hotimage="List/list_header_hot.png" pushedimage="List/list_header_pushed.png" sepimage="List/list_header_sep.png" /> </ListHeader> <ListLabelElement text="張三" selected="true" /> <ListLabelElement text="李四" /> </List>
可以發現雖然表頭有兩列了,但是內容還只是一列,由於在XML裏直接添加多列並不方便,所以這裏採取和MFC類似的方式,即內容動態添加。那麼XML代碼需改爲如下:
<List name="ListDemo1" float="true" pos="30,314,0,0" width="139" height="218" vscrollbar="true" hscrollbar="true" bkcolor="#FFFFFFFF" itemtextcolor="#FF000000" itembkcolor="#FFE2DDDF" itemselectedtextcolor="#FF000000" itemselectedbkcolor="#FFC1E3FF" itemhottextcolor="#FF000000" itemhotbkcolor="#FFE9F5FF" itemdisabledtextcolor="#FFCCCCCC" itemdisabledbkcolor="#FFFFFFFF" > <ListHeader name="domain" bkimage="List/list_header_bg.png"> <ListHeaderItem text="序號" width="40" height="23" minwidth="16" sepwidth="1" align="center" hotimage="List/list_header_hot.png" pushedimage="List/list_header_pushed.png" sepimage="List/list_header_sep.png" /> <ListHeaderItem text="文件名稱" width="84" height="23" minwidth="16" sepwidth="1" align="center" hotimage="List/list_header_hot.png" pushedimage="List/list_header_pushed.png" sepimage="List/list_header_sep.png" /> </ListHeader> </List>
然後在main.cpp的InitWindow裏添加如下代碼:
CDuiString str;
CListUI* pList = static_cast<CListUI*>(m_PaintManager.FindControl(_T("ListDemo1")));
// 添加List列表內容,必須先Add(pListElement),再SetText
for (int i = 0; i < 100; i++)
{
CListTextElementUI* pListElement = new CListTextElementUI;
pListElement->SetTag(i);
pList->Add(pListElement);
str.Format(_T("%d"), i);
pListElement->SetText(0, str);
pListElement->SetText(1, _T("haha"));
}
即可生成如下效果:
是不是比duilib自帶的Demo簡潔明瞭得多呢~O(∩_∩)O~
不過還沒完工,因爲滾動條好像不太美觀~~~
還記得前面介紹的Default屬性嗎?它不僅僅讓我們少敲更多代碼,而且還減少了錯誤的機率,提高了代碼的可讀性,真是一個強大的屬性,那麼我們的滾動條繼續沿用此屬性~
滾動條的XML代碼如下:
<Default name="VScrollBar" value="button1normalimage="file='ScrollBar/scroll.png' source='0,0,16,16'" button1hotimage="file='ScrollBar/scroll.png' source='0,0,16,16' mask='#FFFF00FF'" button1pushedimage="file='ScrollBar/scroll.png' source='0,16,16,32' mask='#FFFF00FF'" button1disabledimage="file='ScrollBar/scroll.png' source='0,0,16,16' mask='#FFFF00FF'" button2normalimage="file='ScrollBar/scroll.png' source='0,32,16,48' mask='#FFFF00FF'" button2hotimage="file='ScrollBar/scroll.png' source='0,32,16,48' mask='#FFFF00FF'" button2pushedimage="file='ScrollBar/scroll.png' source='0,48,16,64' mask='#FFFF00FF'" button2disabledimage="file='ScrollBar/scroll.png' source='0,32,16,48' mask='#FFFF00FF'" thumbnormalimage="file='ScrollBar/scroll.png' source='0,64,16,80' corner='2,2,2,2' mask='#FFFF00FF'" thumbhotimage="file='ScrollBar/scroll.png' source='0,64,16,80' corner='2,2,2,2' mask='#FFFF00FF'" thumbpushedimage="ffile='ScrollBar/scroll.png' source='0,64,16,80' corner='2,2,2,2' mask='#FFFF00FF'" thumbdisabledimage="file='ScrollBar/scroll.png' source='0,64,16,80' corner='2,2,2,2' mask='#FFFF00FF'" railnormalimage="file='ScrollBar/scroll.png' source='0,80,16,96' corner='2,2,2,2' mask='#FFFF00FF'" railhotimage="file='ScrollBar/scroll.png' source='0,80,16,96' corner='2,2,2,2' mask='#FFFF00FF'" railpushedimage="file='ScrollBar/scroll.png' source='0,96,16,112' corner='2,2,2,2' mask='#FFFF00FF'" raildisabledimage="file='ScrollBar/scroll.png' source='0,80,16,96' corner='2,2,2,2' mask='#FFFF00FF'" bknormalimage="file='ScrollBar/scroll.png' source='0,128,16,146' corner='2,2,2,2' mask='#FFFF00FF'" bkhotimage="file='ScrollBar/scroll.png' source='0,128,16,146' corner='2,2,2,2' mask='#FFFF00FF'" bkpushedimage="file='ScrollBar/scroll.png' source='0,128,16,146' corner='2,2,2,2' mask='#FFFF00FF'" bkdisabledimage="file='ScrollBar/scroll.png' source='0,128,16,146' corner='2,2,2,2' mask='#FFFF00FF'" " /> <Default name="HScrollBar" value="button1normalimage="file='ScrollBar/scrollH.png' source='0,0,16,16'" button1hotimage="file='ScrollBar/scrollH.png' source='0,0,16,16' mask='#FFFF00FF'" button1pushedimage="file='ScrollBar/scrollH.png' source='16,0,32,16' mask='#FFFF00FF'" button1disabledimage="file='ScrollBar/scrollH.png' source='0,0,16,16' mask='#FFFF00FF'" button2normalimage="file='ScrollBar/scrollH.png' source='32,0,48,16' mask='#FFFF00FF'" button2hotimage="file='ScrollBar/scrollH.png' source='32,0,48,16' mask='#FFFF00FF'" button2pushedimage="file='ScrollBar/scrollH.png' source='48,0,64,16' mask='#FFFF00FF'" button2disabledimage="file='ScrollBar/scrollH.png' source='32,0,48,16' mask='#FFFF00FF'" thumbnormalimage="file='ScrollBar/scrollH.png' source='64,0,80,16' corner='2,2,2,2' mask='#FFFF00FF'" thumbhotimage="file='ScrollBar/scrollH.png' source='64,0,80,16' corner='2,2,2,2' mask='#FFFF00FF'" thumbpushedimage="ffile='ScrollBar/scrollH.png' source='64,0,80,16' corner='2,2,2,2' mask='#FFFF00FF'" thumbdisabledimage="file='ScrollBar/scrollH.png' source='64,0,80,16' corner='2,2,2,2' mask='#FFFF00FF'" railnormalimage="file='ScrollBar/scrollH.png' source='80,0,96,16' corner='2,2,2,2' mask='#FFFF00FF'" railhotimage="file='ScrollBar/scrollH.png' source='80,0,96,16' corner='2,2,2,2' mask='#FFFF00FF'" railpushedimage="file='ScrollBar/scrollH.png' source='96,0,112,16' corner='2,2,2,2' mask='#FFFF00FF'" raildisabledimage="file='ScrollBar/scrollH.png' source='80,0,96,16' corner='2,2,2,2' mask='#FFFF00FF'" bknormalimage="file='ScrollBar/scrollH.png' source='128,0,146,16' corner='2,2,2,2' mask='#FFFF00FF'" bkhotimage="file='ScrollBar/scrollH.png' source='128,0,146,16' corner='2,2,2,2' mask='#FFFF00FF'" bkpushedimage="file='ScrollBar/scrollH.png' source='128,0,146,16' corner='2,2,2,2' mask='#FFFF00FF'" bkdisabledimage="file='ScrollBar/scrollH.png' source='128,0,146,16' corner='2,2,2,2' mask='#FFFF00FF'" " />
XML好亂,複製到XML編輯器上慢慢看吧~(*^__^*)
稍微說明下:
source='0,0,16,16' 相當於source='0,0,16,16',意思就是隻顯示圖片中'0,0,16,16'矩形包含的那一部分,其中'0,0,16,16'分別是矩形的左上右下四個點
至此,列表控件就大功告成啦~
六、Tab控件
MFC的Tab控件在duilib被稱爲Option控件,我們先給Tab上個色,XML如下:
<Option name="OptionDemo1" text="Option1" float="true" pos="207,28,0,0" width="60" height="30" bkcolor="#FFC5D4F2" selectedtextcolor="#FF0000FF" selectedbkcolor="#FFC5D4F2" group="tabDemo" selected="true" /> <Option name="OptionDemo2" text="Option2" float="true" pos="284,28,0,0" width="60" height="30" bkcolor="#FFFFDC78" group="tabDemo" /> <Option name="OptionDemo3" text="Option3" float="true" pos="361,28,0,0" width="60" height="30" bkcolor="#FFBECEA1" group="tabDemo" />
接下來給每個Tab的點擊做出響應,這裏介紹一個新的佈局,名爲TabLayout,專門用於給Tab佈局。
由於我們添加了3個Option,所以要給TabLayout也加上三個控件,分別對應3個Option,在Option 節點下面添加如下XML代碼:
<TabLayout name="tabTest" bkcolor="#FF757676"> <Label text="Option1" bkcolor="#FFC5D4F2" align="center" /> <Text text="Option2" bkcolor="#FFFFDC78" align="centerwrap" /> <Text text="Option3" bkcolor="#FFBECEA1" align="center" /> </TabLayout>
咦~ 怎麼整個背景都變色了?其他控件呢?
這是因爲前面忘記指定TabLayout的位置和大小了,下面我們繼續使用界面設計器來調整它的位置和大小吧,
由於我們已經在XML裏面添加了TabLayout節點,所以無需再從DuiDesigner裏面添加此控件,直接調節大小和位置即可,記得將float設置爲true哦~
XML如下:
<TabLayout name="tabTest" float="true" pos="202,75,0,0" width="568" height="169" bkcolor="#FF757676"> <Label text="Option1" bkcolor="#FFC5D4F2" align="center" /> <Text text="Option2" bkcolor="#FFFFDC78" align="centerwrap" /> <Text text="Option3" bkcolor="#FFBECEA1" align="center" /> </TabLayout>
但是點擊後還是沒有反應,因爲Tab控件還需要手動添加代碼來切換,代碼如下:
virtual void Notify( TNotifyUI& msg )
{
if(msg.sType == _T("selectchanged"))
{
CDuiString strName = msg.pSender->GetName();
CTabLayoutUI* pControl = static_cast<CTabLayoutUI*>(m_PaintManager.FindControl(_T("tabTest")));
if(strName == _T("OptionDemo1"))
pControl->SelectItem(0);
else if(strName == _T("OptionDemo2"))
pControl->SelectItem(1);
else if(strName == _T("OptionDemo3"))
pControl->SelectItem(2);
}
__super::Notify(msg);
}
註釋:Notify函數是消息通知函數,所有的控件消息(比如點擊、切換)都會經過這裏。
而Tab控件的切換會觸發selectchanged消息,所以我們可以在這裏處理它,此處的處理是切換到相應的Tab頁(不過我覺得duilib應該做成自動切換的,無需寫代碼,只需寫前面的XML即可自動切換)
此時tab控件可以切換了,不過可以看到Option1並沒有佔據全部的Tab界面,這是因爲沒有佈局的情況下,Label 和Text只會自動調整寬度(TabLayout的父節點是HorizontalLayout)、或高度(TabLayout的父節點是VerticalLayout)之一,而Control則會同時調整寬度和高度來沾滿屏幕。
所以此時我們可以給TabLayout的子節點添加布局,或者手動調整高度,這些已經在前面的教程裏介紹過啦,下面就直接上代碼了,
<TabLayout name="tabTest" float="true" pos="202,75,0,0" width="568" height="169" bkcolor="#FF757676"> <HorizontalLayout> <Label text="Option1" bkcolor="#FFC5D4F2" align="center" /> </HorizontalLayout> <Text text="Option2" bkcolor="#FFFFDC78" align="centerwrap" height="160"/> <Button text="Option3" bkcolor="#FFBECEA1" align="centerwrap" width="300"/> </TabLayout>
到現在爲止,DuiDesigner上面除了Container、TileLayout這兩個控件,其他控件都介紹完畢啦,由於Alberl學習duilib的時間非常有限,還沒看到這兩個控件,並且現在已能實現絕大部分界面,所以這兩個控件將排到Alberl的下一輪學習中,如果有大神願意貢獻一下教程就太感謝啦~O(∩_∩)O~
全家福: