Commit d1464aee authored by Leena Miettinen's avatar Leena Miettinen Committed by Oswald Buddenhagen
Browse files

Update the Writing a Simple Project section. Update screenshots. Update the...

Update the Writing a Simple Project section. Update screenshots. Update the Adding Plugin Section according to review comments by Martin Pejcoch.
parent b56d33ab
doc/images/qtcreator-add-resource.png

40.6 KB | W: | H:

doc/images/qtcreator-add-resource.png

43.4 KB | W: | H:

doc/images/qtcreator-add-resource.png
doc/images/qtcreator-add-resource.png
doc/images/qtcreator-add-resource.png
doc/images/qtcreator-add-resource.png
  • 2-up
  • Swipe
  • Onion skin
doc/images/qtcreator-class-info.png

18.9 KB | W: | H:

doc/images/qtcreator-class-info.png

14.5 KB | W: | H:

doc/images/qtcreator-class-info.png
doc/images/qtcreator-class-info.png
doc/images/qtcreator-class-info.png
doc/images/qtcreator-class-info.png
  • 2-up
  • Swipe
  • Onion skin
doc/images/qtcreator-new-project.png

20.5 KB | W: | H:

doc/images/qtcreator-new-project.png

19.2 KB | W: | H:

doc/images/qtcreator-new-project.png
doc/images/qtcreator-new-project.png
doc/images/qtcreator-new-project.png
doc/images/qtcreator-new-project.png
  • 2-up
  • Swipe
  • Onion skin
doc/images/qtcreator-run.png

1.26 KB | W: | H:

doc/images/qtcreator-run.png

927 Bytes | W: | H:

doc/images/qtcreator-run.png
doc/images/qtcreator-run.png
doc/images/qtcreator-run.png
doc/images/qtcreator-run.png
  • 2-up
  • Swipe
  • Onion skin
doc/images/qtcreator-textfinder-ui.png

7.42 KB | W: | H:

doc/images/qtcreator-textfinder-ui.png

2.48 KB | W: | H:

doc/images/qtcreator-textfinder-ui.png
doc/images/qtcreator-textfinder-ui.png
doc/images/qtcreator-textfinder-ui.png
doc/images/qtcreator-textfinder-ui.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -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
\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.
In your project, you have the following files:
\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
\section2 Designing 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.
\image qtcreator-textfinder-ui.png
\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:
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)
\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
\image qtcreator-textfinder-ui.png
\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}.
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
\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
\o In the \gui{Projects} view, double-click the \c{textfinder.cpp} file
to open it for editing.
Basically, we load a text file using
\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}.
\endlist
Your resource file is now displayed in the resource editor.
\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}.
\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
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment