Update the Writing a Simple Project section. Update screenshots. Update the Adding Plugin Section according to review comments by Martin Pejcoch.
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 927 B |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 2.5 KiB |
@@ -1185,28 +1185,62 @@
|
||||
applications, using Qt Designer to design user interfaces and using the Qt
|
||||
Resource System.
|
||||
|
||||
In this example, we describe the steps involved in using Qt Creator
|
||||
to create a small Qt program, Text Finder. Inspired by the QtUiTools'
|
||||
\l{http://doc.trolltech.com/uitools-textfinder.html}{Text Finder}
|
||||
example, we write a similar but simplified version of it, as shown
|
||||
below.
|
||||
This tutorial describes how to use Qt Creator
|
||||
to create a small Qt application, Text Finder. It is a simplified version of the
|
||||
QtUiTools \l{http://doc.trolltech.com/uitools-textfinder.html}{Text Finder}
|
||||
example.
|
||||
|
||||
\image qtcreator-textfinder-screenshot.png
|
||||
|
||||
\section1 Setting Up Your Environment
|
||||
|
||||
Once you have installed Qt Creator, it detects automatically if Qt's
|
||||
location is in your \c PATH variable. If not, please follow the
|
||||
instructions in \l{Selecting the Qt version}.
|
||||
Qt Creator automatically detects whether the location of Qt is in your \c PATH variable.
|
||||
If you have installed several Qt versions, follow the
|
||||
instructions in \l{Selecting the Qt version} to set the Qt path.
|
||||
|
||||
\section1 Setting Up the Project
|
||||
\section1 Creating the Text Finder Project
|
||||
|
||||
We begin with a Qt4 Gui Application project generated by Qt Creator. The
|
||||
\l{Creating a project} document describes this process in
|
||||
detail. Remember to select QWidget as the Text Finder's base class. If
|
||||
your project is not yet loaded, load it by selecting \gui{File} > \gui{Open}.
|
||||
\list 1
|
||||
|
||||
In your project, you have the following files:
|
||||
\o Select \gui{File > New File or Project > Qt Application Project > Qt Gui
|
||||
Application > OK}.
|
||||
|
||||
\image qtcreator-new-project.png
|
||||
\o In the \gui{Name} field, type \c {TextFinder}.
|
||||
\image qtcreator-intro-and-location.png
|
||||
|
||||
\o In the \gui {Create in} field, enter the path for the project files. For example,
|
||||
\c {C:\Qt\examples}.
|
||||
|
||||
|
||||
\o Click \gui{Next}.
|
||||
|
||||
\image qtcreatorqtcreator-new-project-qt-versions.png "Select Required Qt
|
||||
Versions dialog"
|
||||
|
||||
\o Click \gui{Next} to use the Qt version set in the path in your project.
|
||||
|
||||
\image qtcreator-class-info.png
|
||||
|
||||
\o In the \gui{Class Name} field, type \c {TextFinder} as the class name.
|
||||
|
||||
\o In the \gui{Base Class} list, select \c {QWidget} as the base class type.
|
||||
|
||||
\note The \gui{Header File}, \gui{Source File} and
|
||||
\gui{Form File} fields are automatically updated to match the name of the
|
||||
class.
|
||||
|
||||
\o Click \gui{Next}.
|
||||
|
||||
\o Review the project settings, and click \gui{Finish} to create the project.
|
||||
|
||||
\image qtcreator-new-project-summary.png
|
||||
\endlist
|
||||
|
||||
\note Create the project with the \gui{Help} mode active so that you can follow
|
||||
these instructions while you work.
|
||||
|
||||
The TextFinder project now contains the following files:
|
||||
|
||||
\list
|
||||
\o \c{textfinder.h}
|
||||
@@ -1216,80 +1250,118 @@
|
||||
\o \c{textfinder.pro}
|
||||
\endlist
|
||||
|
||||
\image qtcreator-textfinder-contents.png "TextFinder project contents"
|
||||
|
||||
The \c{.h} and \c{.cpp} files come with the necessary boiler plate code.
|
||||
The \c{.pro} file is also complete.
|
||||
The \c{.pro} file is complete.
|
||||
|
||||
\section1 Filling in the Missing Pieces
|
||||
|
||||
We begin by designing the user interface and then move on to filling
|
||||
in the missing code. Finally, we add the find functionality.
|
||||
Begin by designing the user interface and then move on to filling
|
||||
in the missing code. Finally, add the find functionality.
|
||||
|
||||
\section2 The User Interface
|
||||
|
||||
To begin designing the user interface, double-click on the
|
||||
\c{textfinder.ui} file in the \gui{Project Explorer}. This launches the
|
||||
integrated Qt Designer.
|
||||
|
||||
Design the form below with:
|
||||
\list
|
||||
\o \l{http://doc.trolltech.com/qlabel.html}{QLabel}
|
||||
\o \l{http://doc.trolltech.com/qlinedit.html}{QLineEdit} (named lineEdit)
|
||||
\o \l{http://doc.trolltech.com/qpushbutton.html}{QPushButton} (named findButton)
|
||||
\o \l{http://doc.trolltech.com/qtextedit.html}{QTextEdit} (named textEdit)
|
||||
\endlist
|
||||
\section2 Designing the User Interface
|
||||
|
||||
\image qtcreator-textfinder-ui.png
|
||||
|
||||
We recommend that you use a \l{http://doc.trolltech.com/qgridlayout.html}{QGridLayout}
|
||||
to lay out the label, the line edit and the push button.
|
||||
The grid layout and the text edit can then be added to a
|
||||
\l{http://doc.trolltech.com/qvboxlayout.html}{QVBoxLayout}.
|
||||
If you are new to designing forms with \QD, see the
|
||||
\list 1
|
||||
|
||||
\o In the \gui{Editor} mode, double-click the \c{textfinder.ui} file in the \gui{Projects}
|
||||
view to launch the integrated Qt Designer.
|
||||
|
||||
\o Drag and drop the following widgets to the form:
|
||||
|
||||
\list
|
||||
\o \gui{Label} (\l{http://doc.trolltech.com/qlabel.html}{QLabel})
|
||||
\o \gui{Line Edit} (\l{http://doc.trolltech.com/qlineedit.html}{QLineEdit})
|
||||
\o \gui{Push Button} (\l{http://doc.trolltech.com/qpushbutton.html}{QPushButton})
|
||||
|
||||
\endlist
|
||||
|
||||
\o Double-click the \gui{Label} widget and enter the text \bold{Keyword}.
|
||||
|
||||
\o Double-click the \gui{Push Button} widget and enter the text \bold{Find}.
|
||||
|
||||
\o Press \gui{Ctr+A} to select the widgets and click \gui{Lay out Horizontally}
|
||||
(or press \gui{Ctrl+H}) to add them to a \l{http://doc.trolltech.com/qhboxlayout.html}{QHBoxLayout}.
|
||||
|
||||
\o Drag and drop a \gui{Text Edit} widget (\l{http://doc.trolltech.com/qtextedit.html}{QTextEdit})
|
||||
to the form.
|
||||
|
||||
\o Select the widgets and click \gui{Lay out Vertically} (or press \gui{Ctr+V})
|
||||
to add them to a \l{http://doc.trolltech.com/qvboxlayout.html}{QVBoxLayout}.
|
||||
|
||||
\o Press \gui{Ctrl+S} to save your changes.
|
||||
|
||||
\endlist
|
||||
|
||||
Applying the horizontal and vertical layouts ensures that the application UI scales to different
|
||||
screen sizes.
|
||||
|
||||
For more information about designing forms with \QD, see the
|
||||
\l{http://doc.trolltech.com/designer-manual.html}{Qt Designer Manual}.
|
||||
|
||||
\section2 The Header File
|
||||
\section2 Completing the Header File
|
||||
|
||||
The \c{textfinder.h} file already has the necessary #includes, a
|
||||
constructor, a destructor, and the \c{Ui} object. We need to add a private
|
||||
slot, \c{on_findButton_clicked()}, to carry out our find operation. We
|
||||
constructor, a destructor, and the \c{Ui} object. You need to add a private
|
||||
slot, \c{on_findButton_clicked()}, to carry out the find operation. You
|
||||
also need a private function, \c{loadTextFile()}, to read and display the
|
||||
contents of our input text file in the
|
||||
\l{http://doc.trolltech.com/qtextedit.html}{QTextEdit}. This is done with
|
||||
the following code:
|
||||
contents of the input text file in the
|
||||
\l{http://doc.trolltech.com/qtextedit.html}{QTextEdit}.
|
||||
|
||||
\list 1
|
||||
|
||||
\o In the \gui{Projects} view, double-click the \c{textfinder.h} file
|
||||
to open it for editing.
|
||||
|
||||
\o Add a private slot in a \c{private slots} section and a private function
|
||||
in the \c{private} section, after the \c{Ui::TextFinder} function, as
|
||||
illustrated by the following code snippet:
|
||||
|
||||
\snippet examples/textfinder/textfinder.h 0
|
||||
|
||||
\note The \c{Ui::TextFinder} object is already provided.
|
||||
\endlist
|
||||
|
||||
\section2 The Source File
|
||||
\section2 Completing the Source File
|
||||
|
||||
Now that our header file is complete we move on to our source file,
|
||||
\c{textfinder.cpp}. We begin by filling in the functionality to load a
|
||||
text file. This is described in the code snippet below:
|
||||
Now that the header file is complete, move on to the source file,
|
||||
\c{textfinder.cpp}.
|
||||
|
||||
\snippet examples/textfinder/textfinder.cpp 0
|
||||
\list 1
|
||||
|
||||
Basically, we load a text file using
|
||||
\o In the \gui{Projects} view, double-click the \c{textfinder.cpp} file
|
||||
to open it for editing.
|
||||
|
||||
\o Add code to load a text file using
|
||||
\l{http://doc.trolltech.com/qfile.html}{QFile}, read it with
|
||||
\l{http://doc.trolltech.com/qtextstream.html}{QTextStream}, and
|
||||
then display it on \c{textEdit} with
|
||||
\l{http://doc.trolltech.com/qtextedit.html#plainText-prop}{setPlainText()}
|
||||
which requires adding the following additional #includes to textfinder.cpp:
|
||||
This is illustrated by the following code snippet:
|
||||
|
||||
\snippet examples/textfinder/textfinder.cpp 0
|
||||
|
||||
\o To use \l{http://doc.trolltech.com/qfile.html}{QFile} and
|
||||
\l{http://doc.trolltech.com/qtextstream.html}{QTextStream}, add the
|
||||
following #includes to textfinder.cpp:
|
||||
|
||||
\snippet examples/textfinder/textfinder.cpp 1
|
||||
|
||||
For the \c{on_findButton_clicked()} slot, we extract the search string and
|
||||
\o For the \c{on_findButton_clicked()} slot, add code to extract the search string and
|
||||
use the \l{http://doc.trolltech.com/qtextedit.html#find}{find()} function
|
||||
to look for the search string within the text file. This is described in
|
||||
the code snippet below:
|
||||
to look for the search string within the text file. This is illustrated by
|
||||
the following code snippet:
|
||||
|
||||
\snippet examples/textfinder/textfinder.cpp 2
|
||||
|
||||
Once we have both of these functions complete, we call \c{loadTextFile()} in
|
||||
our constructor.
|
||||
\o Once both of these functions are complete, add a line to call \c{loadTextFile()} in
|
||||
the constructor, as illustrated by the following code snippet:
|
||||
|
||||
\snippet examples/textfinder/textfinder.cpp 3
|
||||
|
||||
\endlist
|
||||
|
||||
The \c{on_findButton_clicked()} slot is called automatically in
|
||||
the uic generated \c{ui_textfinder.h} file by this line of code:
|
||||
|
||||
@@ -1297,48 +1369,33 @@
|
||||
QMetaObject::connectSlotsByName(TextFinder);
|
||||
\endcode
|
||||
|
||||
\section2 The Resource File
|
||||
\section2 Creating a Resource File
|
||||
|
||||
We require a resource file (\c{.qrc}) within which we embed the input
|
||||
text file. This can be any \c{.txt} file with a paragraph of text.
|
||||
You need a resource file (\c{.qrc}) within which you embed the input
|
||||
text file. The input file can be any \c{.txt} file with a paragraph of text.
|
||||
Create a text file called \c{input.txt} and store it in the \c{textfinder}
|
||||
folder.
|
||||
|
||||
To add a resource file:
|
||||
\list 1
|
||||
\o Right-click on \gui{Resource Files} in the \gui{Project Explorer}.
|
||||
\o Select \gui{Add New File...}.
|
||||
\endlist
|
||||
The wizard dialog below is displayed.
|
||||
|
||||
\o Select \gui{File > New File or Project > Qt > Qt Resource File > OK}.
|
||||
\image qtcreator-add-resource-wizard.png
|
||||
|
||||
\list 3
|
||||
\o Enter "textfinder" in the \gui{Name} field. Use the given \gui{Path}.
|
||||
\o Click on \gui{Continue}.
|
||||
\endlist
|
||||
This page is displayed:
|
||||
\o In the \gui{Name} field, enter \bold{textfinder}.
|
||||
\o In the \gui{Path} field, enter \c{C:\Qt\examples\TextFinder},
|
||||
and click \gui{Next}.
|
||||
|
||||
\image qtcreator-add-resource-wizard2.png
|
||||
|
||||
\list 5
|
||||
\o Choose to which project you want to add the new file. Select "TextFinder"
|
||||
as the \gui{Project}.
|
||||
\o Make sure that \gui{Add to Project} is checked.
|
||||
\o Click on \gui{Done}.
|
||||
\o In the \gui{Add to project} field, select \bold{TextFinder.pro}
|
||||
and click \gui{Finish}.
|
||||
\image qtcreator-add-resource.png
|
||||
\o Select \gui{Add > Add Prefix}.
|
||||
\o In the \gui{Prefix} field, replace the default prefix with a slash (\c{/}).
|
||||
\o Select \gui{Add > Add Files}, to locate and add \c{input.txt}.
|
||||
|
||||
\endlist
|
||||
|
||||
Your resource file is now displayed in the resource editor.
|
||||
|
||||
\list 8
|
||||
\o Select \gui{Add} > \gui{Add Prefix} from the drop-down list. The prefix we
|
||||
require is a slash (\c{/}).
|
||||
\o Select \gui{Add} > \gui{Add File} from the drop-down list.
|
||||
\o Locate the text file you are going to use. We use \c{input.txt}.
|
||||
\endlist
|
||||
|
||||
Once the resource file has been successfully added, the following is displayed:
|
||||
|
||||
\image qtcreator-add-resource.png
|
||||
|
||||
\section1 Compiling and Running Your Program
|
||||
|
||||
Now that you have all the necessary files, click the \inlineimage qtcreator-run.png
|
||||
@@ -3014,13 +3071,14 @@
|
||||
change the default plugin path, see \l{How to Create Qt Plugins}.
|
||||
|
||||
For more information about how to create plugins for Qt Designer, see
|
||||
\l{Creating and Using Components for Qt Designer}.
|
||||
\l{http://doc.trolltech.com/4.6/designer-using-custom-widgets.html}{Creating and Using Components for Qt Designer}.
|
||||
|
||||
\section1 Locating Qt Designer Plugins
|
||||
|
||||
Qt Designer fetches plugins from the standard locations and loads the plugins
|
||||
that match its build key. Qt Designer is integrated into Qt Creator and, in addition,
|
||||
comes as a standalone application. The correct folder to place the plugins depends on
|
||||
that match its build key. Qt Designer is delivered both as a standalone application
|
||||
and as part of an SDK, where it is integrated into Qt Creator.
|
||||
The correct folder to place the plugins depends on
|
||||
which one you use.
|
||||
|
||||
The integrated Qt Designer fetches plugins from the \c {%SDK%\bin\designer} folder on Windows
|
||||
@@ -3033,8 +3091,6 @@
|
||||
\c {%SDK%\qt\plugins\designer}. To check which plugins were loaded successfully and which
|
||||
failed, choose \gui{Help > About Plugins}.
|
||||
|
||||
|
||||
|
||||
\section1 Matching Build Keys
|
||||
|
||||
The Qt Creator that is included in pre-built SDK packages on Windows is built with the
|
||||
|
||||