diff --git a/doc/images/qmldesigner-button.png b/doc/images/qmldesigner-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..21556d56e988dc5e54a5233efaee19ef16f5de8c
Binary files /dev/null and b/doc/images/qmldesigner-button.png differ
diff --git a/doc/images/qmldesigner-visual-editor.png b/doc/images/qmldesigner-visual-editor.png
index f5d54b7ba858a8641020f4819f35902b24772690..ee60aa353410ce3a6e84d4dc6692c22b447fb01d 100644
Binary files a/doc/images/qmldesigner-visual-editor.png and b/doc/images/qmldesigner-visual-editor.png differ
diff --git a/doc/qtcreator.qdoc b/doc/qtcreator.qdoc
index 9622c4184019c17421c74aab244c9722b821b595..98877b050228e9e883e09cd64db7db04eb93a924 100644
--- a/doc/qtcreator.qdoc
+++ b/doc/qtcreator.qdoc
@@ -15,12 +15,12 @@
\section1 Version 1.3.82
Qt Creator provides integrated tools for both application designers
- and developers to create applications for desktop and mobile device
+ and developers to create applications for multiple desktop and mobile device
platforms.
- For application designers, Qt Creator provides an integrated \QMLD
- tool that you can use to design and develop application UIs for mobile
- devices.
+ For application designers, Qt Creator provides two integrated
+ visual editors, \QD and \QMLD, that you can use to design and develop
+ application user interfaces.
For application developers,
Qt Creator provides a cross-platform, complete integrated development
@@ -63,9 +63,9 @@
\o \l{Setting Up a Generic Project}
\o \l{Managing Sessions}
\endlist
+ \o \l{Developing QML Applications}
\o \l{Developing Mobile Applications}
\list
- \o \l{Implementing Application UI}
\o \l{Developing Maemo Applications}
\o \l{Developing Symbian Applications}
\endlist
@@ -89,19 +89,41 @@
\title Introducing Qt Creator
- Qt Creator provides you with tools to design and develop animated applications for
- mobile devices and to develop complex applications for multiple desktop
+ Qt Creator provides you with tools to design and develop user interfaces and
+ complex applications for multiple desktop and mobile
platforms.
- \section1 Developing for Mobile Devices
+ \section1 Designing User Interfaces
+
+ Qt Creator provides two integrated visual editors, \QD and \QMLD.
+
+ \QD is a tool for designing and building graphical user interfaces (GUIs) from
+ Qt widgets. You can compose and customize your widgets or dialogs and test
+ them using different styles and resolutions.
+
+ Widgets and forms created with \QD are integrated seamlessly with programmed code,
+ using the Qt signals and slots mechanism, that lets you easily assign behavior to
+ graphical elements. All properties set in \QD can be changed dynamically within the code.
+ Furthermore, features like widget promotion and custom plugins allow you to use your
+ own widgets with \QD.
+
+ UIs that use widgets are clearly structured and enforce a platform look and feel,
+ which makes them useful for traditional applications. However, they are static, and
+ do not fully make use of the large high-resolution screens, touch input, and significant
+ graphics power that are becoming common in portable consumer devices, such as mobile
+ phones, media players, set-top boxes, and netbooks.
\QMLD allows you to easily develop animations by using a declarative programming
- language called QML. You use a visual editor to create widgets and define changes
+ language called \l {http://qt.nokia.com/doc/4.7-snapshot/declarativeui.html}{QML}.
+ In QML, a user interface is specified as a tree of objects with properties.
+
+ You use a visual editor to create items, screens, and applications, as well as define changes
in their state. \QMLD generates the necessary code for you.
- You can edit the code in the code editor to add transitions and interaction. You
- can write JavaScript to implement the application logic.
+ You can edit the code in the code editor to add transitions from one state to another,
+ and interaction to specify user actions that change the states. You
+ can use Qt to implement the application logic.
- \section1 Developing for Desktop Platforms
+ \section1 Coding Applications
As an IDE, Qt Creator differs from a text editor in that it knows how to build and run
applications. It understands the code as code, not just as plain text. This allows
@@ -257,8 +279,8 @@
\list
\o \gui Welcome mode for opening recent sessions and projects.
\o \gui{\l{Using the Editor}{Edit}} mode for editing project and source files.
- \o \gui{\l{Implementing Application UI}{Design}} mode for designing and developing animated applications for
- mobile devices.
+ \o \gui{\l{Developing Application UI}{Design}} mode for designing and developing
+ application user interfaces.
\o \gui{\l{Debugging}{Debug}} mode for inspecting the state of your program while
debugging.
\o \gui{\l{Managing Projects}{Projects}} mode for configuring project building and
@@ -465,12 +487,12 @@
For more information on \QD, see
\l{http://doc.trolltech.com/designer-manual.html}{Qt Designer Manual}.
- \section1 Using QML Designer
+ \section1 Using Quick Designer
You can edit .qml files in either the visual \QMLD editor or in the
code editor.
- In \gui Projects, double-click a .gml file to open it in the code
+ In \gui Projects, double-click a .qml file to open it in the code
editor. Then select the \gui {Design} mode to edit the file in the
visual editor.
@@ -488,10 +510,10 @@
images and other files that you copy to the project folder appear in the
\gui {Resources} pane.
- \o \gui {Properties} pane displays the properties of the selected item.
+ \o \gui {Properties} pane displays the properties of the selected component.
You can also change the properties in the code editor.
- \o \gui {State} pane displays the different states of the item. To add
+ \o \gui {State} pane displays the different states of the component. To add
states, click the empty slot. Then modify the new state in the editor.
In the code editor, you can see the changes recorded as changes to
the base state.
@@ -1301,8 +1323,8 @@
\title Creating an Animated Application
- \note This tutorial assumes that you are familiar with the QML declarative
- language.
+ \note This tutorial assumes that you are familiar with the \l {http://qt.nokia.com/doc/4.7-snapshot/declarativeui.html}
+ {QML declarative language}.
This tutorial describes how to use Qt Creator to create a small animated
Qt application, Hello World.
@@ -1366,9 +1388,9 @@
\o Drag and drop a \gui {Rectangle} from the \gui {Library} pane to the
scene.
- \image qmldesigner-helloworld-widget-add.png "Add widget to Hello World"
+ \image qmldesigner-helloworld-widget-add.png "Add component to Hello World"
- \o Edit the \gui {Properties} of the item to turn it into a red ball:
+ \o Edit the \gui {Properties} of the component to turn it into a red ball:
\list
@@ -1378,7 +1400,7 @@
\o In the \gui {Radius} field, use the slider to set the radius value
to \bold 50.
- \image qmldesigner-helloworld-widget-edit.png "Edit the widget"
+ \image qmldesigner-helloworld-widget-edit.png "Edit the component"
\endlist
@@ -1467,6 +1489,9 @@
\endlist
+ \note In the \gui {QML Viewer}, select \gui {Skin} and select a mobile device
+ type to view the application as on a mobile device.
+
*/
@@ -1960,7 +1985,7 @@
It is also possible to enter only a part of a search string.
As you type, the locator shows the occurrences of that string regardless
- of where in the name of an item it appears.
+ of where in the name of an component it appears.
To narrow down the search results, you can use the following wildcard
characters:
@@ -2110,7 +2135,7 @@
\contentspage index.html
\previouspage creator-project-generic.html
\page creator-project-managing-sessions.html
- \nextpage creator-developing-applications.html
+ \nextpage creator-visual-editor.html
\title Managing Sessions
@@ -3030,13 +3055,13 @@
/*!
\contentspage index.html
- \previouspage creator-project-managing-sessions.html
+ \previouspage creator-visual-editor.html
\page creator-developing-applications.html
- \nextpage creator-visual-editor.html
+ \nextpage creator-developing-maemo.html
\title Developing Mobile Applications
- Use \QMLD to design and implement application UI.
+ \omit Use \QD or \QMLD to design and implement application UI. \endomit
Set up the development environment for your chosen mobile device
platform, Maemo or Symbian. Then specify build and run settings
@@ -3048,11 +3073,11 @@
/*!
\contentspage index.html
- \previouspage creator-developing-applications.html
+ \previouspage creator-project-managing-sessions.html
\page creator-visual-editor.html
- \nextpage creator-developing-maemo.html
+ \nextpage creator-developing-applications.html
- \title Implementing Application UI
+ \title Developing QML Applications
You can either create QML projects from scratch or import them to
Qt Creator.
@@ -3069,7 +3094,7 @@
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 item, such as a widget, screen, or the whole
+ \o .qml file defines an element, such as a component, screen, or the whole
application UI.
\endlist
@@ -3082,31 +3107,91 @@
\section1 Designing Application UI
- One .qml file can define a widget, screen, or the whole application.
+ One .qml file can define a component, screen, or the whole application.
+
+ \section2 Creating Components
- \section2 Creating Widgets
+ A QML component provides a way of defining a new type that you can re-use in other QML
+ files. A component is like a black box; it interacts with the outside world
+ through properties, signals, and slots, and is generally defined in its own QML file.
+ You can import components to screens and applications.
- You can use the \gui Library items to create your own widgets. Drag and drop
+ You can use the \gui Library items to create components. Drag and drop
them to the editor and modify their properties in the \gui Properties pane.
- You can use QML to add properties for a widget. The properties are automatically
+ You can use QML to add properties for a component. The properties are automatically
displayed in the \gui Properties pane.
- Save the widgets as .qml files. You can import them to screens and applications.
+ For example, to create a button component:
+
+ \list 1
+
+ \o Select \gui {File > New File or Project > Qt > Qt QML File} to create a QML file
+ called button.qml.
+
+ \o Double-click the file to open it in the code editor.
+
+ \o Click \gui {Design} to edit the file in the visual editor.
+
+ \o Drag and drop a \gui Rectangle from the \gui Library pane to the scene.
+
+ \o In the \gui Properties pane, click \gui Advanced, to modify the appearance of the button.
+
+ \o In the \gui Color field, select the button color, and in the \gui Radius field, use
+ the slider to set the radius of the rectangle and produce rounded corners for the button.
+
+ \o Drag and drop a \gui {Text} item on top of the \gui Rectangle.
+
+ \o In the \gui Properties pane, click \gui Advanced, and type \bold Button in the
+ \gui Text field.
+
+ You can select the text color, font, size, and style in the \gui Font field.
+
+ \o In the \gui Alignment field, select the center button to align the text to the
+ center of the button.
+
+ \o Click \gui {Anchor}, and then click the
+ \inlineimage qmldesigner-anchor-fill-screen.png
+ button to anchor the text to the whole button area.
+
+ \o Click \gui Edit to edit the \c width and \c height properties of the button
+ to fit the button size.
+
+ \o Press \key {Ctrl+S} to save the button.
+
+ \image qmldesigner-button.png "Button component"
+
+ \endlist
\section2 Creating Screens
You can use the \gui Library items to create screens. Use states and transitions
to navigate between screens.
- To add interaction methods, drag and drop a \gui {Focus Scope} or \gui {Mouse Area}
- to the screen. In the code editor, add functions to execute when users select
- the scope or area.
+ QML states typically describe user interface configurations, such as the UI elements,
+ their properties and behavior and the available actions.
+
+ To make movement between states smooth, you can specify transitions. The
+ \c from and \c to properties define the states between which the transitions run. To
+ run the transitions in reverse when changing back from the down state to the default state,
+ set \c reversible to \c true. This is equivalent to writing the two transitions separately.
+
+ You can use the \c ParallelAnimation element to start several animations at the same time.
+ Or use the \c SequentialAnimation element to run them one after another.
+
+ \section2 Adding User Interaction Methods
+
+ To add interaction methods, drag and drop a \gui {Focus Scope} or \gui {Mouse Area}
+ to the screen. In the code editor, add signal handlers to execute when users select
+ the scope or area. Signal handlers allow actions to be taken in reponse to an event.
+ For instance, the \gui {MouseArea} element has signal handlers to handle mouse press,
+ release, and click.
+
\section1 Implementing Application Logic
- You can write JavaScript to implement the application logic. To include the script
- files in the project, copy them to the project folder.
+ A user interface is only a part of an application, and not really useful by itself.
+ You can use Qt to implement the application logic.
*/
@@ -3114,7 +3199,7 @@
/*!
\contentspage index.html
- \previouspage creator-visual-editor.html
+ \previouspage creator-developing-applications.html
\page creator-developing-maemo.html
\nextpage creator-developing-symbian.html
diff --git a/doc/qtcreator.qdocconf b/doc/qtcreator.qdocconf
index c531f2aae0e9363fb08383baa13a939698ca76fd..19ad069c598682be2406c095e8c6699ec063f1ca 100644
--- a/doc/qtcreator.qdocconf
+++ b/doc/qtcreator.qdocconf
@@ -51,7 +51,7 @@ macro.QA = "\\e{Qt Assistant}"
macro.QD = "\\e{Qt Designer}"
macro.QL = "\\e{Qt Linguist}"
macro.QC = "\\e{Qt Creator}"
-macro.QMLD = "\\e{QML Designer}"
+macro.QMLD = "\\e{Quick Designer}"
macro.param = "\\e"
macro.raisedaster.HTML = "<sup>*</sup>"
macro.reg.HTML = "<sup>®</sup>"