Skip to content

GitLab

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

Doc - sync up master with 2.1 

Apparently, the forward merges lost quite some information.

Reviewed-by: ossi
parent 29b6b2fe
Hide whitespace changes
Inline Side-by-side
doc/qtcreator.qdoc
View file @ b3c2be6e
......@@ -96,11 +96,13 @@
\o \l{Developing Application UI}
\list
\o \l{Optimizing Applications for Mobile Devices}
\o \l{Using Qt Designer}
\o \l{Adding Qt Designer Plugins}
\if defined(qtquick)
\o \l{Developing Qt Quick Applications}
\list
\o \l {Creating Qt Quick Projects}
\o \l {Using Qt Quick Designer}
\o \l {Creating Components}
\o \l {Creating Screens}
\o \l {Animating Screens}
......@@ -941,12 +943,32 @@
You can easily develop animations by using a declarative programming
language called \l {http://doc.qt.nokia.com/4.7/qtquick.html}{QML}.
In QML, a user interface is specified as a tree of objects with properties.
You can edit QML code in the code editor. You
You can edit QML code in the code editor or in the integrated \QMLD. You
can use Qt or JavaScript to implement the application logic.
The integration includes project management and code completion.
\section1 Using Qt Designer
The following sections describe how to develop application UI:
\list
\o \l{Optimizing Applications for Mobile Devices}
\o \l{Using Qt Designer}
\o \l{Adding Qt Designer Plugins}
\o \l{Developing Qt Quick Applications}
\endlist
*/
/*!
\contentspage index.html
\previouspage creator-usability.html
\page creator-using-qt-designer.html
\nextpage adding-plugins.html
\title Using Qt Designer
Qt Creator automatically opens all .ui files in \QD.
......@@ -985,7 +1007,16 @@
For more information on \QD, see
\l{http://doc.qt.nokia.com/4.7/designer-manual.html}{Qt Designer Manual}.
\section1 Using Qt Quick Designer
*/
/*!
\contentspage index.html
\previouspage quick-projects.html
\page creator-using-qt-quick-designer.html
\nextpage quick-components.html
\title Using Qt Quick Designer
You can edit .qml files in the visual \QMLD editor or in the
code editor.
......@@ -1140,6 +1171,29 @@
\key{Ctrl+E, 0}. To remove all but the currently selected split view,
select \gui Window > \gui{Remove All Splits} or press \key{Ctrl+E, 1}.
\section1 Semantic Highlighting
Qt Creator understands the C++ and QML languages as code, not as plain text.
It reads the source code, analyzes it, and highlights it based on the
semantic checks that it does for the following code elements:
\list
\o Types (such as classes, structs, and type definitions)
\o Local variables
\o Class fields
\o Virtual methods
\endlist
To specify the color scheme to use for semantic highlighting, select
\gui {Tools > Options... > Text Editor > Fonts & Color}.
Qt Creator supports syntax highlighting also for other types of files than
C++ or QML. For more information, see \l{Generic Highlighting}.
\section1 Highlighting and Folding Blocks
......@@ -1189,14 +1243,8 @@
\section1 Completing Code
Qt Creator understands the code as code, not just as plain text. This
allows it to help you to write well formatted code and to anticipate
what you are going to write and complete the code.
The code completion differs somewhat depending on whether you write Qt code or QML code.
\section2 Completing Qt Code
As you write code, Qt Creator provides a list of context-sensitive
As you write code, Qt Creator suggests properties, IDs, and code
snippets to complete the code. It provides a list of context-sensitive
suggestions to the statement currently under your cursor.
\image qtcreator-codecompletion.png
......@@ -1214,6 +1262,8 @@
To apply full or no case-sensitivity, select the option in the
\gui {Case-sensitivity} field.
\section2 Summary of Available Types
The following table lists available types for code completion and icon
used for each.
......@@ -1262,7 +1312,16 @@
\i A protected slot
\row
\i \inlineimage completion/keyword.png
\i A keyword
\i A C++ keyword
\row
\i \inlineimage completion/snippet.png
\i A C++ code snippet
\row
\i \inlineimage completion/element.png
\i A QML element
\row
\i \inlineimage completion/qmlsnippet.png
\i A QML code snippet
\row
\i \inlineimage completion/macro.png
\i A macro
......@@ -1271,10 +1330,9 @@
\i A namespace
\endtable
\section2 Completing QML Code
\section2 Completing Code Snippets
As you write QML code, Qt Creator suggests properties, IDs, and code
snippets to complete the code. The snippets can consist of multiple
Code snippets can consist of multiple
fields that you specify values for. Select an item in the list and press
\key Tab or \key Enter to complete the code. Press \key Tab to
move between the fields and specify values for them.
......@@ -1726,6 +1784,10 @@
\o To go to an occurrence, double-click it.
\endlist
\endlist
\note You can use \gui{Advanced Find} also to search for symbols. For more
information, see \l{Finding Symbols}.
*/
......@@ -1762,6 +1824,14 @@
files)
\o Header files of used frameworks and libraries
\endlist
\note You can also select \gui{Edit > Find/Replace > Advanced Find >
C++ Symbols} to search for classes, methods, enums, and declarations
either from files listed as part of the project or from all files that
are used by the code, such as include files.
\image qtcreator-search-cpp-symbols.png
\o The \gui{Search Results} pane opens and shows the location and
number of instances of the symbol in the current project.
......@@ -1822,6 +1892,57 @@
\o In the \gui {Rename id} field, enter the new ID.
\endlist
\section1 Applying Refactoring Actions
Qt Creator allows you to quickly and conveniently apply actions to refactor
your code by selecting them in a context menu. The actions available depend on
the position of the cursor in the code editor and on whether you are writing
C++ or QML code.
To apply refactoring actions to C++ code, right-click an operand, conditional
statement, string, or name to open a context menu. In QML code, click an element
ID or name.
In the context menu, select \gui {Refactoring} and then select a refactoring action.
You can also press \gui {Alt+Enter} to open a context menu that contains refactoring
actions.
\section2 Refactoring C++ Code
You can apply the following types of refactoring actions to C++ code:
\list
\o Change binary operands
\o Simplify if and when conditions (for example, move declarations out of
if conditions)
\o Modify strings (for example, set the encoding for a string to Latin-1, mark
strings translatable, and convert strings to camel case)
\o Create variable declarations
\o Create method declarations and definitions
\endlist
\section2 Refactoring QML Code
You can apply the following types of refactoring actions to QML code:
\list
\o Rename IDs
\o Split initializers
\o Move a QML element into a separate file to reuse it in other
.qml files
\endlist
*/
......@@ -1889,10 +2010,9 @@
Follow the instructions of the wizard.
This example uses \gui {Qt Gui Application}.
\o Name the project and set its path. To select the path from a
directory tree, click \gui Browse.
\o Name the project and set its path, and then click \gui Next.
Avoid using spaces and special characters in the project name and
Do not use spaces and special characters in the project name and
path.
\image qtcreator-intro-and-location.png
......@@ -1900,7 +2020,7 @@
\o Select the Qt versions to use as build targets for your project, and click
\gui{Next}.
\image qtcreator-new-project-qt-versions.png "Target setting dialog"
\image qtcreator-new-project-qt-versions.png "Qt Versions dialog"
\note If you have only one Qt version installed, this dialog is skipped.
......@@ -3517,28 +3637,28 @@
\o In the \gui {Create in} field, enter the path for the project files. For example,
\c {C:\Qt\examples}, and then click \gui{Next}.
The \gui{Select Required Qt Versions} dialog opens.
The \gui{Qt Versions} dialog opens.
\image qtcreator-mobile-project-qt-versions.png "Select Required Qt Versions dialog"
\image qtcreator-mobile-project-qt-versions.png "Qt Versions dialog"
\o Select \gui Maemo, \gui {Qt Simulator}, and \gui {Symbian Device} targets,
and click \gui{Next}.
\note Targets are listed if you installed the appropriate development
environment, for example, as part of the Nokia Qt SDK.
environment, for example, as part of the Nokia Qt SDK. You can add targets
later in the \gui Projects mode.
The \gui{Class Information} dialog opens.
\image qtcreator-mobile-class-info.png "Class Information dialog"
The \gui {Application Options} dialog opens.
\o In the \gui{Class Name} field, type \bold {BatteryIndicator} as the class name.
\image qtcreator-mobile-project-app-options.png "Application Options dialog"
\o In the \gui{Base Class} list, select \bold {QDialog} as the base class type.
\o In the \gui {Orientation behavior} field, determine how the application
behaves when the orientation of the device display rotates between portrait
and landscape, and then click \gui{Next}.
\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}.
\note Qt Creator contains a default program icon and generates a UID for testing
the application on a device. You only need to specify the \gui {Symbian Specific}
and \gui {Maemo Specific} settings if you deliver the application for public use.
The \gui{Project Management} dialog opens.
......@@ -3552,26 +3672,29 @@
\list
\o batteryindicator.h
\o batteryindicator.cpp
\o main.cpp
\o batteryindicator.ui
\o BatteryIndicator.pro
\o main.cpp
\o BatteryIndicator.svg
\o BatteryIndicator.png
\o BatteryIndicator.desktop
\o deployment.pri
\o mainwindow.cpp
\o mainwindow.ui
\o mainwindow.h
\o templates for debian deployment files
\endlist
\image qtcreator-mobile-project-contents.png "Project contents"
The files come with the necessary boiler plate code that you must
modify, as described in the following sections. You do not need
to change the main.cpp file.
modify, as described in the following sections.
\section1 Declaring the Qt Mobility API
The \gui New wizard automatically adds information to the .pro file
that you need when you use the Qt Mobility APIs or develop applications
for Symbian devices. You must modify the information to declare the
Qt Mobility APIs that you use.
To use the Qt Mobility APIs or develop applications for Symbian
devices, you must modify the .pro file to declare the Qt Mobility APIs
that you use.
This example uses the System Info API, so you must declare it, as
illustrated by the following code snippet:
......@@ -3588,28 +3711,11 @@
corresponding values that you can assign to MOBILITY, see the
\l {http://doc.qt.nokia.com/qtmobility-1.0/quickstart.html}{Quickstart Example}.
The following code snippet shows information that is needed for
applications developed for Symbian device. Qt Creator generated
the UID for testing the application on a device. You only need
to change the UID and capabilities if you deliver the application
for public use and need to have it Symbian Signed.
\code
symbian {
TARGET.UID3 = 0xecbd72d7
# TARGET.CAPABILITY +=
TARGET.EPOCSTACKSIZE = 0x14000
TARGET.EPOCHEAPSIZE = 0x020000 0x800000
}
\endcode
\section1 Designing the User Interface
\list 1
\o In the \gui{Editor} mode, double-click the batteryindicator.ui
\o In the \gui{Editor} mode, double-click the mainwindow.ui
file in the \gui{Projects} view to launch the integrated \QD.
\o Drag and drop a \gui{Progress Bar} (\l{http://doc.qt.nokia.com/4.7/qprogressbar.html}{QProgressBar})
......@@ -3620,22 +3726,15 @@
\o In the \gui Properties pane, change the \gui objectName to
\bold batteryLevelBar.
\o Right-click the \gui BatteryIndicator object and select
\o Right-click the \gui MainWindow object and select
\gui {Lay Out > Lay Out Horizontally} to ensure that the battery
indicator widget size is adjusted correctly on Maemo devices.
To adjust widget size correctly on Qt Simulator, remove the condition
from the main.cpp file (displayed in the following code snippet) and just
leave the \c {w.showMaximized();} line:
\snippet examples/batteryindicator/main.cpp 0
\endlist
\section1 Completing the Header File
The batteryindicator.h file contains some of the necessary #includes, a
The mainwindow.h file contains some of the necessary #includes, a
constructor, a destructor, and the \c{Ui} object. You must include
the System Info header file, add a shortcut to the mobility name
space, and add a private function to update the battery level value in
......@@ -3643,48 +3742,48 @@
\list 1
\o In the \gui{Projects} view, double-click the \c{batteryindicator.h} file
\o In the \gui{Projects} view, double-click the \c{mainwindow.h} file
to open it for editing.
\o Include the System Info header file, as illustrated by the following
code snippet:
\snippet examples/batteryindicator/batteryindicator.h 1
\snippet examples/batteryindicator/mainwindow.h 1
\o Add a shortcut to the mobility name space, as illustrated by the
following code snippet:
\snippet examples/batteryindicator/batteryindicator.h 2
\snippet examples/batteryindicator/mainwindow.h 2
\o Declare a private function in the \c{private} section, after the
\c{Ui::BatteryIndicator} function, as illustrated by the following code
\c{Ui::MainWindow} function, as illustrated by the following code
snippet:
\snippet examples/batteryindicator/batteryindicator.h 3
\snippet examples/batteryindicator/mainwindow.h 3
\endlist
\section1 Completing the Source File
Now that the header file is complete, move on to the source file,
batteryindicator.cpp.
mainwindow.cpp.
\list 1
\o In the \gui{Projects} view, double-click the batteryindicator.cpp file
\o In the \gui{Projects} view, double-click the mainwindow.cpp file
to open it for editing.
\o Create a QSystemDeviceInfo object and set its value. Then connect the signal
that indicates that battery level changed to the \c setValue
slot of the progress bar. This is illustrated by the following code snippet:
\snippet examples/batteryindicator/batteryindicator.cpp 1
\snippet examples/batteryindicator/mainwindow.cpp 1
\o Use the constructor to set initial values and make sure that the
created object is in a defined state, as illustrated by the following
code snippet:
\snippet examples/batteryindicator/batteryindicator.cpp 2
\snippet examples/batteryindicator/mainwindow.cpp 2
\endlist
......@@ -3709,7 +3808,7 @@
\list 1
\o Install Qt 4.6.2 libraries, the Qt mobile libraries, and the TRK
\o Install Qt libraries, Qt mobile libraries, and the TRK
debugging application on the device. For more information,
see \l{Setting Up Development Environment for Symbian}.
......@@ -3780,7 +3879,7 @@
configurations by clicking \gui {Device}. You can also simulate various
mobile functions and create your own scripts.
\o To test the application on a Symbian device install Qt 4.6.2
\o To test the application on a Symbian device install Qt libraries
and the TRK debugging application on the device. For more information,
see \l{Setting Up Development Environment for Symbian}.
......@@ -4100,17 +4199,7 @@
\o Press \key {Ctrl+R} to run the application in the QML Viewer.
Rectangle {
width: 200
height: 200
color: "lightsteelblue"
Text {
x: 66
y: 93
text: "Hello World"
color: "white"
}
}
\endlist
Click the rectangles to view the animated transitions.
......@@ -4161,9 +4250,9 @@
\o In the \gui {Create in} field, enter the path for the project files. For example,
\c {C:\Qt\examples}, and then click \gui{Next}.
The target setting dialog opens.
The \gui {Qt Versions} dialog opens.
\image qtcreator-new-project-qt-versions.png "Target setting dialog"
\image qtcreator-new-project-qt-versions.png "Qt Versions dialog"
\o Select the Qt versions to use as build targets for your project, and click
\gui{Next}.
......@@ -4174,12 +4263,12 @@
\image qtcreator-class-info.png "Class Information dialog"
\o In the \gui{Class Name} field, type \bold {TextFinder} as the class name.
\o In the \gui{Class name} field, type \bold {TextFinder} as the class name.
\o In the \gui{Base Class} list, select \bold {QWidget} as the base class type.
\o In the \gui{Base class} list, select \bold {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
\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}.
......@@ -6404,10 +6493,8 @@
\title Developing Qt Quick Applications
You can either create Qt Quick projects from scratch or import them to
Qt Creator. For example, you can import and run the
\l {http://doc.qt.nokia.com/4.7/qdeclarativeexamples.html} {QML examples and demos}
to learn how to use various aspects of QML.
You can either create Qt Quick projects from scratch or import existing projects to
Qt Creator.
You can use the code editor (\l{Using the Editor}{Edit mode}) or the visual editor
(\l{Using Qt Quick Designer}{Design mode}) to develop Qt Quick applications.
......@@ -6416,6 +6503,7 @@
\list
\o \l {Creating Qt Quick Projects}
\o \l {Using Qt Quick Designer}
\o \l {Creating Components}
\o \l {Creating Screens}
\o \l {Animating Screens}
......@@ -6432,13 +6520,62 @@
\contentspage index.html
\previouspage creator-visual-editor.html
\page quick-projects.html
\nextpage quick-components.html
\nextpage creator-using-qt-quick-designer.html
\title Creating Qt Quick Projects
Select \gui {File > New File or Project > Qt Quick Project > Qt QML Application}.
\image qmldesigner-new-project.png "New File or Project dialog"
When you create a new Qt Quick project from scratch, you have the following options:
\list
\o \gui {Qt Quick UI} creates a Qt Quick UI project with a single QML file that
contains the main view. You can review Qt Quick UI projects in the QML Viewer and you
need not build them. You do not need to have the development environment installed on your
computer to create and run this type of projects.
\o \gui {Qt Quick Application} creates a Qt Quick application project that can
contain both QML and C++ code. The project includes a QDeclarativeView. You can build
the application and deploy it on desktop and mobile target platforms. For example, you
can create signed Symbian Installation System (SIS) packages for this type of projects.
\o \gui {Custom QML Extension Plugin} creates a C++ plugin that makes it possible
to offer extensions that can be loaded dynamically into applications by using the
QDeclarativeEngine class.
\endlist
If you have existing QML applications that you want to run in Qt Creator or deploy
to mobile devices, use the \gui {Qt Quick Application} wizard to convert them
to Qt Quick applications.
\section1 Creating Qt Quick UI Projects
\list 1
\o Select \gui {File > New File or Project > Qt Quick Project > Qt Quick UI
> Choose...}.
The \gui{Introduction and Project Location} dialog opens.
\image qmldesigner-new-project-location.png "Introduction and Project Location dialog"
\o In the \gui Name field, give a name to the project.
Do not use spaces and special characters in the project name and path.
\o In the \gui {Create in} field, enter the path for the project files. For example,
\c {C:\Qt\examples}. To select the path from a directory tree, click \gui Browse.
\o Click \gui{Next}.
\image qmldesigner-new-ui-project-summary.png "Project Management dialog"
\o Review the project settings, and click \gui{Finish} to create the project.
\image qmldesigner-new-project.png "New File or Project dialog"
\endlist
Qt Creator creates the following files:
......@@ -6461,8 +6598,122 @@
To use JavaScript and image files in the application, copy them to the
project folder.