forked from qt-creator/qt-creator
We called that "Target" before Change-Id: Ie0d673c643947c26ac2706907f6250fc1739388a Reviewed-by: Leena Miettinen <riitta-leena.miettinen@nokia.com>
220 lines
8.3 KiB
Plaintext
220 lines
8.3 KiB
Plaintext
/****************************************************************************
|
|
**
|
|
** This file is part of Qt Creator
|
|
**
|
|
** Copyright (c) 2012 Nokia Corporation and/or its subsidiary(-ies).
|
|
**
|
|
** Contact: http://www.qt-project.org/
|
|
**
|
|
**
|
|
** GNU Free Documentation License
|
|
**
|
|
** Alternatively, this file may be used under the terms of the GNU Free
|
|
** Documentation License version 1.3 as published by the Free Software
|
|
** Foundation and appearing in the file included in the packaging of this
|
|
** file.
|
|
**
|
|
**
|
|
****************************************************************************/
|
|
|
|
// **********************************************************************
|
|
// NOTE: the sections are not ordered by their logical order to avoid
|
|
// reshuffling the file each time the index order changes (i.e., often).
|
|
// Run the fixnavi.pl script to adjust the links to the index order.
|
|
// **********************************************************************
|
|
|
|
/*!
|
|
|
|
\contentspage index.html
|
|
\previouspage creator-visual-editor.html
|
|
\page quick-projects.html
|
|
\nextpage creator-using-qt-quick-designer.html
|
|
|
|
\title Creating Qt Quick Projects
|
|
|
|
\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 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.
|
|
|
|
You can select a template that uses either the built-in QML elements
|
|
or Qt Quick components for a particular platform. The built-in QML
|
|
elements enable you to create cross-platform applications with a
|
|
custom look and feel, whereas the components provide the look and
|
|
feel for a particular platform.
|
|
|
|
\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 (from Existing QML File)} converts
|
|
existing QML applications to Qt Quick application projects. This
|
|
enables you to run them from \QC and to deploy them to mobile
|
|
devices.
|
|
|
|
\o \gui {Custom QML Extension Plugin} (in the \gui Libraries category)
|
|
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 defined(qcmanual)
|
|
\note Qt 4.7.3 supports Qt Quick 1.0 and Qt 4.7.4 supports Qt Quick 1.1. The
|
|
application wizards import Qt Quick 1.1, and therefore, you can use them
|
|
without changes if you target only platforms that run Qt 4.7.4 (such as
|
|
MeeGo or the desktop). If you also target platforms that run Qt 4.7.3
|
|
(such as Maemo), you must change the import statement to
|
|
import Qt Quick 1.0.
|
|
\endif
|
|
|
|
|
|
\section1 Creating Qt Quick UI Projects
|
|
|
|
\list 1
|
|
|
|
\o Select \gui {File > New File or Project > Applications >
|
|
Qt Quick UI > Choose}.
|
|
|
|
The \gui{Introduction and Project Location} dialog opens.
|
|
|
|
\image qmldesigner-new-ui-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.
|
|
|
|
\endlist
|
|
|
|
\QC creates the following files:
|
|
|
|
\list
|
|
|
|
\o .qmlproject project file defines that all QML, JavaScript, and image
|
|
files in the project folder belong to the project. Therefore, you do
|
|
not need to individually list all the files in the project.
|
|
|
|
\o .qml file defines an element, such as a component, screen, or the
|
|
whole application UI.
|
|
|
|
\endlist
|
|
|
|
The \c import statement in the beginning of the .qml file specifies the
|
|
\l{http://qt-project.org/doc/qt-4.8/qdeclarativemodules.html}{Qt modules} to
|
|
import. Each Qt module contains a set of default elements. Specify a version
|
|
to get the features you want.
|
|
|
|
To use JavaScript and image files in the application, copy them to the
|
|
project folder.
|
|
|
|
\section1 Creating Qt Quick Applications
|
|
|
|
\list 1
|
|
|
|
\o Select \gui {File > New File or Project > Applications >
|
|
Qt Quick Application (Built-in Elements) > Choose}.
|
|
|
|
\note We recommend that you use the \gui {Qt Quick Application for
|
|
MeeGo Harmattan} template when you develop for MeeGo Harmattan
|
|
devices.
|
|
|
|
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}.
|
|
|
|
The \gui {Kit Selection} dialog opens.
|
|
|
|
\image qmldesigner-new-project-qt-versions.png "Kit Selection dialog"
|
|
|
|
\o Select build and run \l{glossary-buildandrun-kit}{kits} for your project,
|
|
and then click \gui{Next}.
|
|
|
|
\note If only one kit is specified in \gui Tools > \gui Options >
|
|
\gui {Build & Run} > \gui Kits, this dialog is skipped.
|
|
|
|
The \gui {Mobile Options} dialog opens.
|
|
|
|
\image qmldesigner-new-app-project-mobile-options.png "Mobile Options dialog"
|
|
|
|
\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 This dialog opens only if you select a \l{glossary-buildandrun-kit}{kit}
|
|
with \gui Maemo5 device type in the \gui {Kit Selection} dialog. On
|
|
Harmattan, the Qt Quick Components for MeeGo provide native-looking
|
|
rotation.
|
|
|
|
\o Click \gui Next.
|
|
|
|
The \gui {Harmattan Specific} dialog opens.
|
|
|
|
\image qmldesigner-new-project-harmattan-options.png "Harmattan Specific dialog"
|
|
|
|
\o In the \gui {Application icon} field, select the application
|
|
icon to use on Maemo or Harmattan targets, or use the default icon.
|
|
|
|
The \gui {Project Management} dialog opens.
|
|
|
|
\image qmldesigner-new-project-summary.png "Project Management dialog"
|
|
|
|
\o In the \gui {Add to project} field, you can add this project to
|
|
another project as a subproject.
|
|
|
|
\o In the \gui {Add to version control} field, you can add the project
|
|
to a version control system.
|
|
|
|
\o Click \gui Finish to create the project.
|
|
|
|
\endlist
|
|
|
|
\QC creates the necessary boilerplate files. Some of the files are
|
|
specific to the Maemo or MeeGo Harmattan platform.
|
|
|
|
\section1 Importing QML Applications
|
|
|
|
If you have existing QML applications that you want to run in \QC or deploy
|
|
to mobile devices, select the \gui {Qt Quick Application (from Existing QML
|
|
File)} template to import the main .qml file in your project.
|
|
|
|
\image qmldesigner-import-project.png "Select Existing QML File dialog"
|
|
|
|
All the other files in the project are automatically added to the
|
|
application project.
|
|
\QC adds references to the QML files to a project and creates the additional
|
|
files necessary for deploying applications to mobile devices.
|
|
|
|
*/
|