duilib duilib Concise Guide to Getting Started tutorial 13 complex controls introduced

First, the controls in this section to introduce all onto the stage, and adjust the position, as shown: 
 

    and then change the Name property other names,
     
    can not control name is [+ UI + digital] this, because this is the default name DuiDesigner it does not actually written to XML, so if the name of the control is taken into ActiveXUI1, ActiveXUI2, ButtonUI1 this format, then, the name property will be ignored, you can see there is no name XML attribute:
 
    so we have assigned to them other names, unified format here [+ Demo + digital control name] as:
     

    XML as follows (deleted temporarily unused property, delete the title bar area, press Esc to close the window or turn off the taskbar, right) :

1. <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
2. <Window size="800,600" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="600,400">
3.     <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
4.         <HorizontalLayout>
5.             <Progress name="ProgressDemo1" text="Progress" float="true" pos="30,28,0,0" width="139" height="30" />
6.             <Slider name="SliderDemo1" text="Slider" float="true" pos="30,77,0,0" width="139" height="30" />
7.             <Combo name="ComboDemo1" float="true" pos="30,264,0,0" width="139" height="30" />
8.             <List name="ListDemo1" float="true" pos="30,314,0,0" width="139" height="218" >
9.                 <ListHeader />
10.             </List>
11.             <ActiveX name="ActiveXDemo1" float="true" pos="202,265,0,0" width="568" height="266" />
12.             <Option name="OptionDemo1" text="Option1" float="true" pos="207,28,0,0" width="60" height="30" />
13.             <Option name="OptionDemo2" text="Option2" float="true" pos="284,28,0,0" width="60" height="30" />
14.             <Option name="OptionDemo3" text="Option3" float="true" pos="361,28,0,0" width="60" height="30" />
15.         </HorizontalLayout>
16.     </VerticalLayout>
17. </Window>

Copy the code

    Picture controls various resources, please click here to download the  2013 duilib Concise Guide to Getting the whole project (including resource code) .7z  (216.45 KB, downloads: 93) (which is the address of the whole project, the resources are in the Release directory) but also to extract the exe directory.

    Due to the complex controls are required to initialize, so Here's an initialization function InitWindow, the equivalent of MFC's OnInitDialog, all the initialization operations are carried out here.

A, ActiveX controls
    due to the ActiveX control must be initialized, otherwise it will crash at startup, so the first introduction to it.
    Because ActiveX controls used in the COM, so you need to initialize COM, this time main.cpp code is as follows:

1. class CDuiFrameWnd : public WindowImplBase
2. {
3. public:
4.     virtual LPCTSTR    GetWindowClassName() const   {   return _T("DUIMainFrame");  }
5.     virtual CDuiString GetSkinFile()                {   return _T("duilib.xml");    }
6.     virtual CDuiString GetSkinFolder()              {   return _T("");  }
8.     virtual void       InitWindow()
9.     {
10.         CActiveXUI* pActiveXUI = static_cast<CActiveXUI*>(m_PaintManager.FindControl(_T("ActiveXDemo1")));
12.         if( pActiveXUI ) 
13.         {
14.             IWebBrowser2 * pWebBrowser = NULL;
16.             pActiveXUI-> SetDelayCreate (false); // corresponds to the interface of the Designer DelayCreate property to FALSE, this property can be seen in duilib comes to TRUE in FlashDemo             
17.             pActiveXUI-> CreateControl (CLSID_WebBrowser); // equivalent interface designer in the properties in the filled Clsid {8856F961-340A-11D0-A96B-00C04FD705A2}, CLSID_WebBrowser suggested, to see if the corresponding value, see <ExDisp. h>
18.             pActiveXUI->GetControl(IID_IWebBrowser2, (void**)&pWebBrowser);
20.             if( pWebBrowser != NULL ) 
21.             {
22.                 //pWebBrowser->Navigate(L"https://code.google.com/p/duilib/",NULL,NULL,NULL,NULL);  
23.                 pWebBrowser-> Navigate (L "http://www.baidu.com/", NULL, NULL, NULL, NULL); // Since Google is the wall from time to time, so replace the quick response website
24.                 pWebBrowser->Release();
25.             }
26.         }
27.     }
28. };
30. int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)
31. {
32.     CPaintManagerUI::SetInstance(hInstance);
33.     HRESULT Hr = ::CoInitialize(NULL);
34.     if( FAILED(Hr) ) return 0;
36.     CDuiFrameWnd duiFrame;
37.     duiFrame.Create(NULL, _T("DUIWnd"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
38.     duiFrame.CenterWindow();
39.     duiFrame.ShowModal();
41.     ::CoUninitialize();
42.     return 0;
43. }

Copy the code

 



    This Demo use the browser controls, other ActiveX controls is the same principle, not go into details, duilib comes with a FlashDemo, which use the Flash control, refer to themselves. But the window is closed, you will find produce a crash, this is a Bug CActiveXUI details, please click here - temporarily given a temporary quick fix, is the main frame with a new way to generate, rather than directly with variable generation, so _tWinMain read this:

1. int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)
2. {
3.     CPaintManagerUI::SetInstance(hInstance);
4.     HRESULT Hr = ::CoInitialize(NULL);
5.     if( FAILED(Hr) ) return 0;
7.     CDuiFrameWnd *pFrame = new CDuiFrameWnd;
8.     pFrame->Create(NULL, _T("DUIWnd"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
9.     pFrame->CenterWindow();
10.     pFrame->ShowModal();
12.     delete pFrame;
13.     ::CoUninitialize();
14.     return 0;
15. }

Copy the code

Second, the progress bar control
    to add a background image Progress (foreimage properties) and location information (value property) to generate the following effects:
     
    XML code is as follows:

3. <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" />

Copy the code

    If you want to change the position of the progress bar, you can call the following code:

1. CProgressUI* pProgress = static_cast<CProgressUI*>(m_PaintManager.FindControl(_T("ProgressDemo1")));    
2.     pProgress->SetValue(100);

Copy the code

  

     



Third, the slider control
    to add background images Slider (bkimage properties) and slide images (thumbimage property) to generate the following effects:
     
    XML code is as follows:

           

1. <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'"/>

Copy the code

Other similar operations and the progress bar ~


IV ComboBox control
    XML as follows:

1.             <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' " >
2.                 <ListLabelElement text="张三" selected="true" />
3.                 <ListLabelElement text = "John Doe" />
4.             </Combo>  

Copy the code

 


Since this tutorial is introductory tutorial, so add only the most basic attributes, if you want to align text, etc., please refer duilib comes GameDemo login window.

Fifth, the list control
    due ListCtrl only a subset of the ListBox, and is relatively simple, we first introduce the ListBox control. XML is as follows:

1.             <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" >
2.                 <ListLabelElement text="张三" selected="true" />
3.                 <ListLabelElement text = "John Doe" />
4.             </List>

Copy the code

      
 


    Parents can find ListBox and ComboBox above the basic lacks distinction, because duilib of the controls and no strict boundaries, many controls are combined with some of the basic controls -
It should be noted that: here need to add header = "hidden" hidden ListCtrl the header.

    Next comes ListCtrl, ListCtrl only a ListBox and there is no significant difference, simply header = "hidden" get rid of, and can be set up ListHeader property, directly introduced here ListCtrl columns.
    Plus the first header, XML as follows:

1. <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" >
2.                 <ListHeader name="domain" bkimage="List/list_header_bg.png">
3.                     <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" />
4.                     <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" />
5.                 </ListHeader>
6.                 <ListLabelElement text="张三" selected="true" />
7.                 <ListLabelElement text = "John Doe" />
8.             </List>

Copy the code

 


    Can be found that although there are two headers, but the content is only one, the addition of multiple columns directly in XML is not convenient, so here MFC and take a similar manner, that is content dynamically added. Then the XML code to be replaced by the following:

1. <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" >
2.                 <ListHeader name="domain" bkimage="List/list_header_bg.png">
3.                     <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" />
4.                     <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" />
5.                 </ListHeader>
6.             </List>

Copy the code

     Then add the following code InitWindow main.cpp's:

1. CDuiString str;
2.         CListUI* pList = static_cast<CListUI*>(m_PaintManager.FindControl(_T("ListDemo1")));
4.         // add content List list, you must first Add (pListElement), then SetText
5.         for (int i = 0; i < 100; i++)
6.         {
7.             CListTextElementUI * pListElement = new CListTextElementUI;
8.             pListElement-> SetTag (i);
9.             pList->Add(pListElement);
11.             str.Format(_T("%d"), i);
12.             pListElement->SetText(0, str);
13.             pListElement->SetText(1, _T("haha"));
14.         }

Copy the code

You can generate the following effects:


 
    is not better than duilib Demo comes with much more simple and straightforward it ~ O (∩_∩) O ~
    but not yet completed, because the scroll bar does not seem beautiful ~ ~ ~
    remember Default attributes described earlier ? It not only do we knock little more code, but also reduces the chance of errors and improve the readability of the code, is really a powerful attribute, then we continue with this scroll bar property ~
XML code that follows the scroll bar

1. <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'" " />
2.     <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'" " />

Copy the code

    XML mess, copied to take your XML editor ~ (__ ^ * ^ *)


    slightly lower Description:
source = '0,0,16,16' corresponds source = '0,0,16,16' , meaning that only shows the picture '0,0,16,16' that contains part of the rectangle, where '0,0,16,16' are rectangular bottom right of the upper left four points
    so far, list control and you're done friends ~
 

six, Tab controls
    the MFC Tab control is called Option controls duilib, we give the last color Tab, XML as follows:

1.             <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" />
2.             <Option name="OptionDemo2" text="Option2" float="true" pos="284,28,0,0" width="60" height="30" bkcolor="#FFFFDC78" group="tabDemo" />
3.             <Option name="OptionDemo3" text="Option3" float="true" pos="361,28,0,0" width="60" height="30" bkcolor="#FFBECEA1" group="tabDemo" />

Copy the code

          

     


    Next to respond to each Tab Click here introduce a new layout, called TabLayout, dedicated to the Tab layout.
    Since we added 3 Option, so give TabLayout also add three controls, corresponding to three Option, add the following XML code in the Option node below:
           

1.             <TabLayout name="tabTest" bkcolor="#FF757676">
2.                 <Label text="Option1" bkcolor="#FFC5D4F2" align="center" />
3.                 <Text  text="Option2" bkcolor="#FFFFDC78" align="centerwrap" />
4.                 <Text  text="Option3" bkcolor="#FFBECEA1" align="center" />
5.             </TabLayout>

Copy the code

    
 


    Hey ~ how the entire background are discolored? Other controls it?
    This is because the front Forget the location and size specified TabLayout of, let's continue to use interface designer to adjust its position and size of it,
    because we have been in XML which added TabLayout nodes, so no need to add this control from DuiDesigner inside, directly regulates the size and position can remember the float is set to true oh ~
　  
 

    the XML as follows:

1.             <TabLayout name="tabTest" float="true" pos="202,75,0,0" width="568" height="169" bkcolor="#FF757676">
2.                 <Label text="Option1" bkcolor="#FFC5D4F2" align="center" />
3.                 <Text  text="Option2" bkcolor="#FFFFDC78" align="centerwrap" />
4.                 <Text  text="Option3" bkcolor="#FFBECEA1" align="center" />
5.             </TabLayout>

Copy the code

 


    But still no response after click, because Tab controls also need to manually add code to switch, as follows:

1. virtual void Notify( TNotifyUI& msg )
2.     {
3.         if(msg.sType == _T("selectchanged"))
4.         {
5.             CDuiString    strName     = msg.pSender->GetName();
6.             CTabLayoutUI* pControl = static_cast<CTabLayoutUI*>(m_PaintManager.FindControl(_T("tabTest")));
8.             if(strName == _T("OptionDemo1"))
9.                 pControl->SelectItem(0);
10.             else if(strName == _T("OptionDemo2"))
11.                 pControl->SelectItem(1);
12.             else if(strName == _T("OptionDemo3"))
13.                 pControl->SelectItem(2);
14.         }
16.         __super::Notify(msg);
17.     }

Copy the code

    Comment: Notify message notification function is a function of all the controls messages (such as clicking, switch) will have been here.


    Tab switching control triggers selectchanged news, so we can deal with it here, deal with here is the switch to the corresponding Tab page (but I think duilib should be made automatically switch without the need to write code, just write in front of XML can automatically switch)

    at this time, tab controls can be switched, but you can see Option1 did not occupy all of the Tab interface, because the absence of the layout of the situation, Label and Text will automatically adjust the width (TabLayout parent is the HorizontalLayout), or high (TabLayout parent node is the VerticalLayout) one, while Control will simultaneously adjust the width and height of the screen covered.
So at this point we can add a node to the child TabLayout layout, or manually adjust the height, these friends have been introduced in the previous tutorial, directly below the code

1. <TabLayout name="tabTest" float="true" pos="202,75,0,0" width="568" height="169" bkcolor="#FF757676">
2.                 <HorizontalLayout>
3.                     <Label text="Option1" bkcolor="#FFC5D4F2" align="center" />
4.                 </HorizontalLayout>
5.                 <Text   text="Option2" bkcolor="#FFFFDC78" align="centerwrap" height="160"/>
6.                 <Button text="Option3" bkcolor="#FFBECEA1" align="centerwrap" width="300"/>
7.             </TabLayout>

Copy the code

    Until now, DuiDesigner above except Container, TileLayout two controls, other controls are introductions matter, because the Alberl learning duilib very limited time, have not seen these two controls, and now has been able to achieve most of the interface, so these two controls will be discharged Alberl next round of learning, if God is willing to contribute a large tutorial about it thank you very much ~ O (∩_∩) O ~


    family portrait: