Creating an interface using QT Designer

in the blog "Creating an interface using C + + code in QT" (Address: http://blog.csdn.net/rl529014/article/details/51345619), I talked about how to create a qt GUI with pure C + + code,

This is the traditional way of developing GUI programs, using only C + + code, C + + is responsible for both the design interface and the processing of business logic.

Interface is the user can directly see, called "front-end", Business logic processing users can not see, in the back silently, called "backstage."

• Traditional GUI program development does not distinguish between front-end and background, unified use of C + + code management, source files have both the code to create and set up the control, but also the business logic to deal with the code, very messy.
  
  
• Creating controls directly using C + + code, both syntactically and in terms of code, looks "troublesome". Friends who have learned web development should be aware that the Web is a classic example of seamlessly integrating front-end and back-office.
  
  
• In the Web page, we can see a variety of text, colors, pictures, layouts, buttons, menus, lists and other interface elements are created using HTML+CSS (specifically designed to design the interface of the declarative language), the latter logic requires JavaScript, Python, PHP, Java and other programming languages to handle.
  
  
• The design of modern GUI programs, perhaps also borrowed from the idea of web development, can use XML to design the interface, using C + + to handle the background logic, in Qt can be easily done in front-end and background separation, so that the code logic clearer, more efficient development.

Using QT Designer

QT Designer is the interface design tool with QT, using it can easily drag and drop a simple interface, below we come to learn.

in the blog "Creating an interface using C + + code in QT" The fourth step in creating a Qt Widgets Application project is to fill in the class information,

As shown in the following:

The "Create interface" option is checked by default.

After the project is created, you can see that the "Create interface" option is checked and the IDE generates an Mainwindow.ui file as shown in:

Double-click Mainwindow.ui to enter design mode and start Qt Designer, as shown in:

Switching back to edit mode, you can see the source code for Mainwindow.ui, as shown in:

The. ui file is a Qt designer interface design file, which is made up of XML code. QT Creator does not allow modifying. ui files in edit mode, only switch to design mode automatically generated by QT designer.


XML is a markup language (also called a declarative language), consisting of a single node, each node can also contain multiple attributes, and HTML is an embodiment of XML.
XML is a prerequisite for programmers, but also very simple, the development will often use, can not be skilled, but to have some understanding.
The interface that you see in the edit area, which contains only the client area of the program, does not contain a title bar, so you will not see the common buttons such as maximize, minimize, close, and so on.

The newly created program contains the menu bar, toolbars, and status bar by default. As shown in the following:

You can test the effect yourself by dragging several controls from the control box on the left to the window in the editing area. As shown: (Controls in the left-hand control box can be dragged to the editing area with the mouse)

is a notepad interface that I dragged out. The result of the operation is:

Creating an interface using QT Designer