Duilib study Note "02"-Interface layout

1. Interface description XML file

Duilib is primarily the layout configuration of the interface through XML, and the program creates the corresponding form by reading and parsing the XML file. Duilib page layouts are divided into three categories: form (Window), container (contain), and control. As the name implies, the form is the window to be created, and the container is the same as a subform within the window, where you can add containers or controls, and of course define the position relative to the upper-left vertex of the container, and the control is the basic element on a form such as Button, Edit, label, and so on.

Containers are often used with verticallayout (vertical layout container), horizontallayout (horizontal layout container), tablayout (page label layout container), RichEdit (Rich text box), Combo (drop-down text box), List (lists)

Controls often use labels (tags), button (buttons), option (selection box), Edit (text box), ScrollBar (scroll bars), and so on.

First the root node must be window, which represents the form, and then the content can be added within the node. Each node can add attributes that include the name, location, size, background color, foreground color, background picture, display text, mouse hover hints, and so on. (Note: In Duilib, there is a "attribute list. xml" file that details the properties of each space for easy access)

2. Simple blank Form Interface

Here is an example of creating a simple blank gray background form. The corresponding XML layout file is also very simple. As follows:

<?xml version="1.0" encoding="UTF-8"? ><window size ="800,600 " roundcorner="bis" >     < Verticallayout bkcolor="#AAA0AAA0">     </verticallayout></window >

You can easily see the form properties represented by the XML file by literal means, the form size (size) is 800x600, the window fillet size (roundcorner) is (3,3), and so on.

Next, create the Duilibdemo program to read parsing the XML file to create the corresponding form (note: the corresponding implementation code is not specifically explained, in the end of the note will be given a pair of code to facilitate the download lookup.) This section is mainly for the XML form Layout section, how the specific code shows the following will be detailed separately, the effect is as follows:

3. title bar CreationWith the simple blank form created in the second step, you may find that the final form effect is not much different from the way MFC was created. Because the simple form created above simply reads the parsing XML and then creates the corresponding form, the specific related message flow is not processed. So, next, we'll show you the description by doing a title bar creation. 3.1 Shielding system title bar

In between, we have to block out the system title bar. In the message handler, we block the system title bar by handlemessage the message wm_ncactivate, wm_nccalcsize, wm_ncpaint processing in the message handler function. The specific masking message processing code is as follows (can be viewed in the pairing code):

 LRESULT cmainwnddlg::onncactivate (UINT umsg, WPARAM WPARAM, LPARAM LPARAM, bool&  bhandled) { if  (:: Isiconic (*this ))    bhandled = FALSE;  return  (WParam = = 0 )?  True:false;} LRESULT cmainwnddlg::onnccalcsize (UINT umsg, WPARAM WPARAM, LPARAM LPARAM, BOOL  &  bhandled) { return  0  ;} LRESULT Cmainwnddlg::onncpaint (UINT umsg, WPARAM WPARAM, LPARAM LPARAM, BOOL  &  bhandled) { return  0  ;}

This will then run with a gray blank form without the system title bar.

3.2 Creating a self-drawing title bar

After masking the system title bar, you can then create a self-drawing title bar. In fact, creating a self-drawn title bar does not require additional modification of the program Code section, just add the title bar to the caption section of the XML layout. For the title bar, we are familiar with the main is divided into two parts: the upper left corner of the title and the upper right corner of the system button. Plus the title bar itself occupies a portion of the area, and in the region can support the mouse drag the form, all the original XML file based on the corresponding we need to add changes in three places:

3.2.1) Zone Size declaration . Specify the form to drag the title bar size margin as needed before creating the form.

<window size="800,600" caption="0,0,0,64" roundcorner= " bis ">

3.2.2)Title Area

"Captiontitle"childpadding="6"> <control width="Ten"/> <!--occupies a vacancy, occupying the left 10 units size space-<VerticalLayout> <control height=" -"/> <label text="Demo Demo Form"Textcolor="#FF447AA1"Width=" $"/> </VerticalLayout></HorizontalLayout>

3.2.3) System button Area

"captionsysbtn"Width="126"height=" -"inset="0,1,0,0"> <button name="menubtn"Maxwidth=" -"maxheight=" -"Normalimage="file= ' sys_dlg_menu.png ' source= ' 52,0,78,17 '"Hotimage="file= ' sys_dlg_menu.png ' source= ' 26,0,52,17 '"Pushedimage="file= ' sys_dlg_menu.png ' source= ' 0,0,26,17 '"/> <button name="minbtn"Maxwidth=" -"maxheight=" -"Normalimage="file= ' sys_dlg_min.png ' source= ' 52,0,78,17 '"Hotimage="file= ' sys_dlg_min.png ' source= ' 26,0,52,17 '"Pushedimage="file= ' sys_dlg_min.png ' source= ' 0,0,26,17 '"/> <button name="maxbtn"Maxwidth=" -"maxheight=" -"Normalimage="file= ' sys_dlg_max.png ' source= ' 52,0,78,17 '"Hotimage="file= ' sys_dlg_max.png ' source= ' 26,0,52,18 '"Pushedimage="file= ' sys_dlg_max.png ' source= ' 0,0,26,17 '"/> <button name="restorebtn"visible="false"Maxwidth=" -"maxheight=" -"Normalimage="file= ' sys_dlg_restore.png ' source= ' 52,0,78,17 '"Hotimage="file= ' sys_dlg_restore.png ' source= ' 26,0,52,17 '"Pushedimage="file= ' sys_dlg_restore.png ' source= ' 0,0,26,17 '"/> <button name="closebtn"Maxwidth=" $"maxheight=" -"Normalimage="file= ' sys_dlg_close.png ' source= ' 90,0,135,17 '"Hotimage="file= ' sys_dlg_close.png ' source= ' 45,0,90,17 '"Pushedimage="file= ' sys_dlg_close.png ' source= ' 0,0,45,17 '"/>
Note: In order to make the interface more beautiful, some image resources are introduced. such as the form background, button pictures and so on. The use of the method is simple, the reference code can be used. Although the interface effect is achieved, but careful people may find that the mouse click on the title bar area will pop up the system comes with the menu and so on. This is because we are currently only in the interface to achieve the shield of the system comes with the title bar, and self-painted title bar effect, but the processing of the message has not changed. So there is also the need to add message processing for actions such as clicks, which is to add the processing of the message wm_nchittest in Handlemessage. The processing functions under the corresponding Onnchittest branch are as follows:
LRESULT cmainwnddlg::onnchittest (UINT umsg, WPARAM WPARAM, LPARAM LPARAM, bool&bhandled) {Point pt; pt.x= Get_x_lparam (LPARAM); Pt.y =Get_y_lparam (LPARAM); :: ScreenToClient (* This, &PT);    RECT rcclient; :: GetClientRect (* This, &rcclient); RECT rccaption=M_paintmanager.getcaptionrect (); if(pt.x >= rcclient.left + rccaption.left && pt.x < rcclient.right-Rccaption.right&& pt.y >= rccaption.top && Pt.y <rccaption.bottom) {Ccontrolui* Pcontrol = static_cast<ccontrolui*>(M_paintmanager.findcontrol (PT)); if(Pcontrol && _tcscmp (Pcontrol->getclass (), _t ("Buttonui")) !=0&&_tcscmp (Pcontrol->getclass (), _t ("Optionui")) !=0&&_tcscmp (Pcontrol->getclass (), _t ("Textui")) !=0 )                returnhtcaption; }    returnhtclient;}
This also achieves the desired effect. Of course, this is only the simplest interface effect, want to get a complex interface effect, first of all, you need to add the relevant control in the interface to draw and so on. The specific layout can be added directly in the XML file above, and second, the interface of some control of the message response processing, the specific message effect will be mentioned in subsequent chapters. The result of the above layout is as follows:

 
  
 4. Uidesigner
The WYSIWYG form designer Uidesigner is actually provided in Duilib. As shown in the following:
This designer may be a favorite for people who are accustomed to the layout of the MFC dialog box by dragging controls directly. The designer can also drag and drop the relevant controls directly to complete the layout, and the final save will automatically generate the corresponding XML file. If you are familiar with the XML layout, it might be easier to write your handwriting, and for some complex interface layouts, it should be much more convenient than using the designer for manual XML files.

 
  
 5. Additional Information
1) The above layout is just a simple layout, the properties of many controls in the layout can refer to the information listed in "Properties file. xml" in the downloaded duilib.
2) Global properties. In the final demo image above, you can see that the fonts are not the same as the default, and are actually related to the settings. For the font, default, and other properties set specific reference example code:
<font name="Song Body"Size=" -"Bold="true"/><font name="Song Body"Size=" A"Bold="true"Underline="true"/><font name="Song Body"Size=" A"/><font name="Song Body"Size=" A"Bold="true"/>
Here we have defined four font styles, and the sequence number is incremented by default starting from 0. For specific use, such as the font settings for the title bar in the demo:
<label text="demo demo form " textcolor="#FF447AA1" width="   "font="3 "/>
Here font= "3″ means that the text in the label uses the ordinal 3 corresponding to the <font name=" Arial "size=" 22″bold= "true"/> This style.
3) Layout This piece, above is just a simple layout, guide everyone familiar. For how to better learn the layout, on the one hand can follow-up in-depth learning, and further familiar with the relevant controls and properties, to be able to flexibly apply to practical examples; On the other hand, a good way is to look at some examples and learn by example. For a well-designed layout, the XML file can be opened directly through the Uidesigner to easily view the sample interface.
Finally, attach the corresponding code in this section (instructions, follow-up chapters are based on this code gradually improved). Code download
Duilib study Note "02"-Interface layout