Chapter 2 feelings (II) -- 4th. Hello GUI layout (2)

[Back To Directory] vernacular C ++

 

4.2.hello GUI layout (2)

(The animated version of this tutorial is provided on the supporting CD)

In the previous section, make sure that the project "helloguilayout" is opened in code: blocks, and switch out the wxsmith visual design interface. In this section, we have two responsibilities:

First, by designing a real application interface, we will be more familiar with the use of wxsmith.

Second, the design results of this section will become the window interface required by "Hello database GUI version" in this Chapter.

4.3.1. design objectives

Let's take a look at our design goals (the final effect of the design period window ):

Figure 76 layout design objectives

Such an interface is not complicated. Programmers familiar with wxsmith can do it in less than three minutes. However, for beginners, you need to take it into consideration, and there is an additional premise: You have carefully studied the previous section.

First, we can see that there are four boxsizer, and their layout (nesting) relationships are shown in:

Figure 77 four boxsizer nesting relationships

Boxsizer1 is nested with boxsizer2 and boxsizer3. Boxsizer3 is nested with boxsizer4.

In the lower left corner of the design target diagram, we also see a small grid-like block, which is a "spacer/blank" control and can only be seen during design, it is used to "Occupy the location ". In this example, its responsibility is to "stick to" the blank space on the left of the window, and unswervingly squeeze the buttons and other controls on the right of the window.

4.3.2. Design Steps

Step 1: Select "boxsizer1" (if you do not feel good about selecting it, please turn to "Control tree panel "). Change the "orientation" attribute value from "wxhorizontal" to "wxvertical ".

Step 2: Select boxsizer2 and change the value of orientation from wxvertical to wxhorizontal ". Use the "control positioning panel" to tick all the border in the four directions. Then select "extension/expand" (check ).

Step 3: select the separation line between the two buttons and change its "width/width" attribute value to 3.

Step 4: Select the "statictext1" label and change its "label" attribute value to "Beijing 2008 Olympic Chinese gold medalist ". Modify the "proportion" attribute value to 0.

Step 5: Select the "about" button and change its "label" attribute value to "about" (after modification, press enter to confirm). Modify its "proportion" attribute value to 0.

Step 6: Select the "quit" button and change its title to "exit". Modify its "proportion" attribute value to 0.

The above steps show the following design results:

Figure 78 Hello GUI layout design result 1

Click the first icon in the "quick actions toolbar. Follow these steps:

Step 7: Switch the "control panel" to the "layout" Page and select the "wxboxsizer" Control (the images of different versions are slightly different ); move the cursor to the end of statictext1 in the design period window, as shown in:

Figure 79 Add a sizer after the tag

Click the mouse to add a wxboxsizer after the tag.

Step 8: select the newly added "boxsizer3", modify its "proportion" attribute value to 1 (usually 1 is the default value), and select its "extension/expand" attribute.

Step
Step 9:
On the "layout" page of the "control panel", select the "wxboxsizer" control, move the cursor over "boxsizer3", and click.
And then modify the "proportion" of boxsizer4"
The property value is 0. And select its "extension/expand" attribute. Modify the value of "orientation" to "wxvertical ".

Step
Step 10: Switch the Control Panel to the standard page, and select the wxstatictext Control (
), Move the cursor to the newly added "boxsizer4", click, and add "statictext2. Modify its "proportion" attribute value to 0 and select its "extension"
/Expand property.

Step 11:
Select the "wxstatictext" Control in the "control panel", move the cursor to the end of the added "statictext2", and add the "statictext3" control to it.
. For a similar method, add "statictext3", "statictext5", and "statictext6 ". For each "statictext ",
The "proportion" attribute is changed to 0 and its "extension/expand" attribute "is selected ".

Step 12: Set "statictext2 ~ The "Var name/variable name" of the five static label controls statictext6 are sequentially changed to "statictextline1 ~ Statictextline5 (and make sure that their "is member" attribute is selected ).

Now, the design result is:

Figure 80 Hello GUI layout design result 2

Step
Step 13: on the "standard" page of the "control panel", select the "wxtextctrl" Control (
), Add it to "statictextline5", and set its "Var"
Name is changed from "textctrl1" to "textctrlmemo ". Make sure that the "proportion" property value is 1 and select its "extension/expand"
Attribute.

Next, find the style/styles attribute from the control property panel, expand options, and select the following three sub-items: "wxte_multiline, wxte_readonly, wxte_wordwrap (three sub-options are multiline, read-only, and automatic line feed ). Finally, properly stretch the length and width of the control.

Step
Step 14: on the "standard" Page, select the "wxstaticbitmap" Control (
And add it to the right of "boxsizer4" in "boxsizer3. Set "proportion" attribute value of "staticbitmap1"
1. select its "extension/expand" attribute to moderately stretch its width.

Now, the design result is:

Figure 81 design result 3 of Hello GUI Layout

Note: The content of staticbitmap1 is empty, so it cannot be seen when it is unselected.

Step 15: on the "standard" Page, select the "wxbutton" Control () and move it with the mouse. Add to the "exit" button. Set "Var name" to "buttonget", set its "proportion" attribute value to 0, and set its title to "get (& R )";

Step
Step 16: on the "standard" Page, select the "wxtextctrl" control, add it to the front of the "get" button, and set the "Var"
Name "is" textctrlpassword ",
Set its "proportion" attribute value to 0. Select "wxte_password" in the "style/style" attribute, and set its "text" attribute
"1234" is displayed as "*****".

Step 17: on the "standard" Page, select the "wxstatictext" control, add it to the front of "textctrlpassword", set its "proportion" property value to 0, and set its "label" property value: "Database Password :".

Now, the design result is:

Figure 82 Hello GUI Layout Design Result 4

Step 18: Next, add four buttons to the left of the "about" button. Each button is set as follows:

The property value of "proportion" is 0;

Cancel "Default size" and set "width" and "height" to 24 (you can change the button size with the mouse ).

Then, change the four buttons from left to right to "| <", ">", ">", and "> | "; change "Var name" to "buttonfirst", "buttonprior", "buttonnext", and "buttonlast" in sequence ".

Step 19: Switch the "control panel" to the "layout" Page and select the "spacer" Control (different versions of code: blocks images are slightly different ), add it to the front of the "| <" button. Make sure that the "proportion" of the "spacer" is 1.

Step
Step 20: On the Control tree panel, select the "wxdialog" Node corresponding to the "design period window" and change the "title" attribute value to "Hello Gui" on the "control properties panel"
Layout, and then modify the "style" option in the dialog box, and select "wxdefault_dialog_style, wxresize_border.

So far, we have achieved the design goal.

4.3.3. design results

• Preview

Click the "preview" button in the "quick operation toolbar" to see the following window:

Figure 83 preview of Hello GUI Layout

• Check

Check whether all your steps are correct. It is not enough to look like the dialog box. Check the list below. If a problem occurs, see the following brackets for each item.

First, the content of the edit box containing "text" should be read-only. (Step 13, "wxte_readonly ");

2. In the edit box after "Database Password:", you can enter the content, but the content is displayed as an asterisk. (Step 16, "wxte_password ");

Third, the dialog box can be (pulled to the edge through the mouse) to change the size. (Step 20, "wxresize_border ");

Fourth, when the dialog box width increases, the buttons and other controls in the bottom row should always lean to the right, and the size of all buttons does not change. (In Step 19, the "proportion" value of the "spacer" control should be 1, and the "proportion" value of all other controls should be 0)

Fifth, when the height of the dialog box increases, the edit box that says "text" should increase accordingly. (In Step 13, the value of "proportion" should be 1 .);

6. When the dialog box width increases, the words "Beijing 2008 Olympic Chinese gold medalist" should be centered horizontally.

7. The title of the dialog box is "Hello GUI layout ". (Step 20)

The setting of "Var name/variable" is not visible on the interface, but is very important. If the setting is incorrect, it may cause you trouble in "Hello database Gui. Please check carefully.

• Compile

Save the results. Press Ctrl + F9 to compile the project. (If any compilation error occurs, check whether the Global File default encoding is complete ").

Press F9 to run the program. Click "about" to see the pop-up message box. Click "exit" to close the program.

 

Vernacular C ++

[Back To Directory]