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

[Back To Directory] vernacular C ++

4.1.hello GUI Basics

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

We went back to the origin and prepared to write a new "Hello World", but this time, we will be reunited with "Hello World" on the "Gui" platform.

We use a cross-platform wxWidgets C ++ GUI library. Before learning this course, make sure that you have completed the preparations mentioned in chapter 2nd, compile and configure wxWidgets.

4.1.1.code: blocks configuration -- Global File default encoding

Of
We have been creating a "console" Application project all the time before. Every time we mention changing the file encoding to "System Default", there are some changes: we have prepared a unicode version.
WxWidgets, so for all gui projects in this chapter, its file encoding should be changed to "UTF-8" (one of the Unicode encoding formats ). Using UTF-8 encoding should be a kind
Development trend, so we use the following operation to code: blocks file encoding, set to default with "UTF-8 ".

Code: "Settings> Editor" on the blocks Main Menu. In the displayed dialog box, select the first "general settings" in the left-side list, and find the "default encoding when opening files" in the right-side pane, change its options to UTF-8 ".

4.1.2. Wizard-wxWidgets Project

Step 1:Code: blocks Main Menu "file" → "new" → "project ...", In the displayed dialog box, select the "Gui" type, select "wxWidgets Project", and click "start ".

Figure 57 wxWidgets Project Wizard

Step 2:After the Wizard starts, the welcome page appears. click Next.

Step 3:Select "wxWidgets 2.8.x ".

Step 4:In this step, enter "hellogui" for the project ".

Step 5:Enter your name, email, website, and other information.

Step 6:Select the visual designer and application type of wxwidets. For the former, we select "wxsmith", which comes with code: blocks, and for the latter, "dialog base", which means that we will create a "dialog box" for the main interface application:

Figure 58 select a visualization designer and Application Type

Step 7:In this step, we need to enter the installation path of wxWidgets. Please keep the default value: $ {# wx }. Because we have already configured the global PATH variable wx before.

Step 8:Compile the relevant configuration. Select "GNU gcc complier" as the compiler ". For compilation settings, both "Debug/debug" and "release/release" are checked. This is the most common configuration, although this time we do not need to debug this program.

Step 9:Only enable Unicode is selected ". Because we only compiled the wxWidgets library of the Unicode version, this is an option we will always use.

Figure 59 use the Unicode wxWidgets Library

If you do not select "use wxWidgets DLL", the "static" instead of "dynamic" wxWidgets library will be used to generate independent executable files.

Step 10:Select the wxWidgets library to be used. When using a static library (Step 9), we need to select an additional module for Tiff and JPEG support (Press and hold down the ctrl key to click the option to achieve multiple selections ):

Figure 60 wxwidgetes library for additional use

In this step, click "finish" to end the wizard.

4.1.3. Interface Design

End
In the preceding wizard, code: blocks opens the automatically generated dialog box resource file "helloguidialog. WXS ". Press the F9 key to start compilation and operation.
. If everything is normal, a dialog box with "Welcome to wxWidgets" is displayed. Click "quit" to exit.

Next, we will perform "Chinese" for the aforementioned interface ".

Step 1:Press SHIFT + F2 to make sure that the "management" panel appears and select the "resource files" page. On this page, the upper part will be the various controls contained in the dialog box. The following is the property table of the selected control:

Figure 61 Control tree and Attribute Table

Step 2:In
The design interface of "helloguidialog. WXS" is displayed with the following selected content: "Welcome
WxWidgets text label, and then select the "..." button on the right of the "label" attribute setting row. In the displayed dialog box, change the edit content to "welcome to use ".
WxWidgets, including line feed.

Figure 62 modify label content

Step 3:Click OK to exit. The design window is as follows:

Figure 63 result of label attribute value Modification

Step 4:Save the preceding modification results. Select the "about" button and modify the label attribute value to "about" on the control property panel ". In the same way, modify the label attribute value of the "quit" button to "exit ". You can directly edit the attribute on the right. After the modification, press enter to confirm the modification. The final result is as follows:

Figure 64 final results of the hello GUI Design

Step 5:On the Control tree, select the "helloguidialog/" node to select the entire dialog box. Modify the "title" attribute value of the dialog box to "Hello Gui", for example:

Figure 65 modify the dialog box title

Save the above design results (hot key: Ctrl + S ).

4.1.4. Compile and run

Compile (CTRL + F9) and run (F9). The result is as follows:

Figure 66 Hello GUI running result

 

4.1.5. Publish a program

The so-called "release program" is to install the program on the "user" Machine for use.

「 Easy moments 」: Who is the "user?

For ourselves, "the first GUI program" is of course of great significance, but for others, our work is indeed useless-so, who are our users?

Please find a person who has nothing to do with programming-the Code: blocks or wxWidgets is definitely not installed on his machine, and then use the soft grinding bubbles to make it difficult, coupled with your decades of Excellent personality guarantee, he can safely allow you to copy the program to his machine and run it.

 

We used the "debug" configuration for the previous compilation. To change the compilation option configuration to "release", you can change the "build target" to "release" in the toolbar as shown in ".

Figure 67 Change build target to release

Recompile (1st buttons) to obtain the release executable file. For a wxWidgets application project, the typical feature of its release executable file is that the block header of the executable file is greatly reduced than that of the debug version.

Code: Blocks
By default, the new project is saved in the "codeblocks Projects" directory under "My documents. Go to the directory and find "hello"
"Gui" subdirectory. The executable files of the two versions generated by the project are located in the debug and release in the bin subdirectory of the project by default. Therefore, the release version is executable.
File in the following directory:

"_ My_文_file _ directory/codeblocks projects/Hello GUI/bin/release ".

[Classroom assignments]: Compare the executable files of debug and release versions.

Compare the file size of debug and release versions. You may be surprised by the large size of the debug file. The debug version of The wxWidgets application contains a large amount of debugging information.

 

Please use a USB flash drive or network to "publish" your first GUI application (release version) to the user's machine and run it, the correct result is that it can be run. If not, it is likely that you have made a mistake during the aforementioned "wxWidgets project" Project Wizard, especially Step 9.

 

Vernacular C ++

[Back To Directory]