For Embedded Linux, use QtDesigner for quick development-general Linux technology-Linux programming and kernel information. For more information, see the following. RAD (Rapid Application Development) is an efficient form of software development that allows users to create a graphical user interface in a very short time. In general, in a blank form, developers can drag or click to add some input boxes, buttons, and other window components in the appropriate position of the window. The RAD tool automatically writes and maintains the code. All you have to do is determine what will happen when you click the button or select the menu option.
In Linux, a popular RAD tool is Qt Designer. It is an integral part of the Qt software package of the embedded company Trolltech. If you are using a KDE Desktop, Qt has been automatically installed and Qt Designer may have been installed. If your system is not installed, you can find and install KDE Development Tools for different versions. Taking Red Hat 9.0 as an example, you can select KDE software development from the main menu → system settings → Add/delete applications to complete the installation of Qt Designer (1 ).
(400) {this. resized = true; this. width = 400; this. alt = 'click here to open new window';} "onmouseover =" if (this. resized) this. style. cursor = 'hand'; "onclick =" window. open ('HTTP: // tech.ccidnet.com/pub/attachment/2004/10/350453.jpg'); ">
Install Qt Designer
Create
To quickly show you the Qt Designer function, we need to first create a simple conversion program between Celsius and Fahrenheit. This article will design a simple GUI and add some simple code to achieve temperature conversion. Because it is to show the rapid development process, rather than the development of a rigorous software project, no error check will be conducted here, do not perform input tests (that is, check whether the user input is in a valid temperature format), buffer overflow checks, and other steps that must be done in daily software development.
If you are using KDE, the Qt Designer icon should already exist in the menu. Different releases have different icon positions. If your release version does not have the Qt Designer icon, you can run the "designer" command in command line mode to start the development tool. In Red Hat 9.0, you can click the main menu → programming → more programming tools → Qt Designer to start (2 ).
(400) {this. resized = true; this. width = 400; this. alt = 'click here to open new window';} "onmouseover =" if (this. resized) this. style. cursor = 'hand'; "onclick =" window. open ('HTTP: // tech.ccidnet.com/pub/attachment/2004/10/350455.jpg'); ">
Start Qt Designer
Qt Designer first presents a New/Open dialog box (3) to the user ). To create a C ++ program, select the C ++ Project and click "OK.
(400) {this. resized = true; this. width = 400; this. alt = 'click here to open new window';} "onmouseover =" if (this. resized) this. style. cursor = 'hand'; "onclick =" window. open ('HTTP: // tech.ccidnet.com/pub/attachment/2004/10/350457.jpg'); ">
New/Open dialog box
Select a location where you want to save the file and provide a file name. The file name used here is cfconv. Note that the file name extension must be. pro. Click "Save" and return to the Project Settings dialog box (SEE ).
(400) {this. resized = true; this. width = 400; this. alt = 'click here to open new window';} "onmouseover =" if (this. resized) this. style. cursor = 'hand'; "onclick =" window. open ('HTTP: // tech.ccidnet.com/pub/attachment/2004/10/350459.jpg'); ">
Save files
(400) {this. resized = true; this. width = 400; this. alt = 'click here to open new window';} "onmouseover =" if (this. resized) this. style. cursor = 'hand'; "onclick =" window. open ('HTTP: // tech.ccidnet.com/pub/attachment/2004/10/350461.jpg'); ">
Main Window of Qt Designer
Now it is on the main window of Qt Designer (SEE) to make sure the Property Editor is visible. If it is invisible, you can use the Windows → Views → Property Editor/Signal Handlers menu options to make it visible (visible by default ).
(400) {this. resized = true; this. width = 400; this. alt = 'click here to open new window';} "onmouseover =" if (this. resized) this. style. cursor = 'hand'; "onclick =" window. open ('HTTP: // tech.ccidnet.com/pub/attachment/2004/10/350463.jpg'); ">
Create a new form
(400) {this. resized = true; this. width = 400; this. alt = 'click here to open new window';} "onmouseover =" if (this. resized) this. style. cursor = 'hand'; "onclick =" window. open ('HTTP: // tech.ccidnet.com/pub/attachment/2004/10/350465.jpg'); ">
Change the attributes of a form
Select File> New and select Dialog to create a New Dialog box. In this case, Qt Designer creates a new blank form (see figure) where users can place input boxes and buttons.
Open the Property Editor (SEE), change the value of name to "cfconvMainForm", and change the value of caption to "Celsius to Fahrenheit Converter ".
Here, the form name is the internal name used by the application. This name is sometimes used when you write code. Caption refers to the name to be displayed on the title bar.
Select Common Widgets from the Toolbox on the left and double-click "TextLabel ". Place a label in the upper left corner of the form, and place the same label under the label position. Select the label above and change its text value to "Celsius". Correspondingly, change the text value of the second label to "Fahrenheit ". Add two corresponding input boxes behind the two labels to enter the temperature to be converted and the temperature after the output conversion. Double-click "LineEdit" from Common Widgets and create two LineEdit tabs.
Change the name values of the two LineEdit boxes to "celsiusLineEdit" and "fahrenheitLineEdit" respectively, and change the readOnly attribute of the fahrenheitLineEdit text box to True.
Select PushButton from Common Widgets and create two buttons to change the name and text attributes to quitPushButton, Quit, convertPushButton, and Convert. The form looks like 8.
(400) {this. resized = true; this. width = 400; this. alt = 'click here to open new window';} "onmouseover =" if (this. resized) this. style. cursor = 'hand'; "onclick =" window. open ('HTTP: // tech.ccidnet.com/pub/attachment/2004/10/350467.jpg'); ">
Figure 8 completed GUI
Press Ctrl + S or select File> Save from the menu. Then, enter the File name. By default, the name value of the form is used, and the extension is. ui. You can accept this name and click "Save ".
If you want to see the effect, you can press Ctrl + T or select Preview> Preview Form from the menu to Preview the application. But now the button cannot do anything, so the next step is to associate the button with a specific action. When you click the "Quit" button, the application is required to be closed. When you click the "Convert" button, the input temperature is required to be converted from Celsius to Fahrenheit.
Right-click the "Quit" button, select Connections, and click "New ". Select quitPushButton from the Sender list, clicked () from the Signal list, cfconvMainFrom from the worker er list, and close () from the Slot list (). See Figure 9.
(400) {this. resized = true; this. width = 400; this. alt = 'click here to open new window';} "onmouseover =" if (this. resized) this. style. cursor = 'hand'; "onclick =" window. open ('HTTP: // tech.ccidnet.com/pub/attachment/2004/10/350469.jpg'); ">
Figure 9 create association for the Quit button
Now, when you click the "Quit" button, a mouse clicking signal is sent to the form, which will close this form (because this form is the main form, so the application is closed at the same time ). To perform a test, select Preview> Preview Form. Click "Quit" to close the preview window.
The following shows how to create a connection with the "Convert" button. Right-click the "Convert" button and select Connections. In this case, the user will find that this is a global connection window, rather than a connection to a window part. Click "New" to create a New connection. Select convertPushbButton from the Sender list, clicked () from the Signal list, And cfconvMainFrom from the worker list. I wanted to associate the button with the fahrenheitLineEdit widget, but there was no column in the list that could meet this requirement. Therefore, you need to create a new topic to complete the connection.
(400) {this. resized = true; this. width = 400; this. alt = 'click here to open new window';} "onmouseover =" if (this. resized) this. style. cursor = 'hand'; "onclick =" window. open ('HTTP: // tech.ccidnet.com/pub/attachment/2004/10/350471.jpg'); ">
0. Create a new column.
(400) {this. resized = true; this. width = 400; this. alt = 'click here to open new window';} "onmouseover =" if (this. resized) this. style. cursor = 'hand'; "onclick =" window. open ('HTTP: // tech.ccidnet.com/pub/attachment/2004/10/350473.jpg'); ">
1. Complete connection Creation
Click "Edit Slots" and "New Function" (see "0") to change the Function name to convert (). Other values can remain unchanged. Click "OK" to close the window.
To complete the connection, select convert () (see 1) from the Slot list ).
Now, complete the code section of the application: Create the convert () function. Click "cfconvmainform. ui. h" in the Project Overview window to start Code Editor. At this time, the convert () function actually exists, but it is empty. Enter the following C ++ code to complete the function:
