From 0c99b5c776e9fe4dfd68a6a730ad375852c94f57 Mon Sep 17 00:00:00 2001
From: Leena Miettinen <riitta-leena.miettinen@nokia.com>
Date: Fri, 2 Jul 2010 17:12:43 +0200
Subject: [PATCH] Doc - Remove most instructions for using Qt Quick visual
editor.
Reviewed-by: Kai Koehne
---
doc/qtcreator.qdoc | 609 +++++----------------------------------------
1 file changed, 67 insertions(+), 542 deletions(-)
diff --git a/doc/qtcreator.qdoc b/doc/qtcreator.qdoc
index 82275bdf1d8..3a4037557b3 100644
--- a/doc/qtcreator.qdoc
+++ b/doc/qtcreator.qdoc
@@ -73,12 +73,8 @@
\o \l{Developing Qt Quick Applications}
\list
\o \l {Creating Qt Quick Projects}
- \o \l {Designing Application UI}
\o \l {Creating Components}
- \o \l {Creating Buttons}
- \o \l {Creating Scalable Buttons and Borders}
\o \l {Creating Screens}
- \o \l {Creating List Views}
\o \l {Animating Screens}
\o \l {Adding User Interaction Methods}
\o \l {Implementing Application Logic}
@@ -720,11 +716,6 @@
\endlist
- For more information on using the \QMLD visual editor, see
- \l{Developing Qt Quick Applications}.
-
- \endif
-
*/
@@ -2516,16 +2507,19 @@
\image qmldesigner-run-custom-exe.png "Run settings for custom executables"
- \if defined(qtquick)
-
\section1 Specifying Run Settings for Qt Quick Projects
Select run settings in the \gui {Run configuration} field. The settings
- are specified automatically and, usually, you do not need to change them:
+ are specified automatically and, you mostly need to change them if you
+ develop applications that use both C++ and QML:
\list
\o \gui {QML Viewer} is the path to the \QQV executable.
+ Qt Creator ships with a specific version of \QQV and imported
+ modules, which is used by default. If you develop applications
+ that use both C++ and QML, you must select the \QQV version
+ shipped with your Qt version here.
\o \gui {QML Viewer arguments} sets arguments for running \QQV.
The \c{-I <directory>} argument searches for C++ or QML plugins from
@@ -2921,7 +2915,6 @@
/*!
- \if defined(qtquick)
\contentspage index.html
\previouspage creator-mobile-example.html
\page creator-qml-application.html
@@ -2932,20 +2925,13 @@
\note This tutorial assumes that you are familiar with the \l {http://doc.qt.nokia.com/4.7-snapshot/declarativeui.html}
{QML declarative language}.
- \note The Qt Quick specific features and the QDeclarative help are based on a
- preview version of the QtDeclarative package. Update Qt Creator when Qt 4.7 is
- released.
-
- This tutorial describes how to use Qt Creator to create a small animated
+ This tutorial describes how to use Qt Creator to create a small
Qt Quick application, Hello World.
- \image qmldesigner-helloworld.png "Hello World"
+ \image qmldesigner-helloworld-edited.png "Hello World"
\section1 Creating the Hello World Project
- \note Create the project with the \gui{Help} mode active so that you can follow
- these instructions while you work.
-
\list 1
\o Select \gui{File > New File or Project > Qt Quick Project > Qt QML Application > Choose}.
@@ -2976,141 +2962,79 @@
\o HelloWorld.qml
\endlist
+ The \gui Projects pane in the \gui Sidebar displays the project files:
+
\image qmldesigner-new-project-contents.png "HelloWorld project contents"
The .qmlproject file defines that all QML, JavaScript, and image files in
- the project folder belong to the project. The .qml file contains some example
- code that specifies the screen size (200x200) and a label that contains
- the text \bold {Hello World}.
-
- \section1 Designing the User Interface
-
- \list 1
-
- \o In the \gui{Edit} mode, double-click the HelloWorld.qml file in
- the \gui{Projects} pane to open it in the code editor.
-
- \o To set the screen size to that of some Symbian devices in portrait
- mode, for example, change the \c width to \bold 240 and \c height to \bold 320.
-
- \image qmldesigner-helloworld-screen-size.png "Setting the screen size"
-
- \o Click \gui{Design} to design the UI in the visual editor.
-
- \note The visual \QMLD editor is provided as an experimental plugin that you must
- enable to be able to edit QML files in the \gui Design mode. Enabling the
- visual editor can negatively affect the overall stability of Qt Creator.
-
- \o Restart Qt Creator to enable the visual editor.
-
- \o Drag and drop a \gui {Rectangle} from the \gui {Library} pane to the
- scene.
-
- \image qmldesigner-helloworld-widget-add.png "Add component to Hello World"
-
- \o Edit the \gui {Properties} of the component to turn it into a red ball:
-
- \list a
-
- \o In the \gui {Colors} section, click the color picker to select a red
- color.
-
- \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 component"
-
- \endlist
+ the project folder belong to the project.
- \o To create a blue ball, press \key {Ctrl+C} and \key {Ctrl+V} to copy
- and paste the red one, and then change its color to blue.
-
- \image qmldesigner-helloworld-base-state.png "Hello World first view"
-
- The first view of your application is now ready.
-
- \note You can use graphical design tools to create nice images and
- copy them to the projects folder to display them in the \gui {Library}
- pane in \gui {Resources}.
-
- \o In the \gui State pane, click the plus sign to add another view, or \e state
- to the application.
-
- \o Modify the state by dragging and dropping the widgets to switch their
- places.
-
- \image qmldesigner-helloworld-state1.png "Hello World second view"
-
- \endlist
-
- \section1 Animating the Scene
-
- Animate the scene so that the widgets appear to switch places
- on the screen.
-
- \list 1
-
- \o Click \gui {Edit} to open HelloWorld.qml in the code editor.
-
- \o Add the following code to create a transition:
-
- \code
- transitions: [
- Transition {
- NumberAnimation { properties: "x, y"; duration: 500 }
- }
- \endcode
-
- \note The code editor completes the code for you as you type.
+ The .qml file contains the following example code that specifies a rectangle
+ and a label that contains
+ the text \bold {Hello World}.
- \o Click the \inlineimage qtcreator-run.png
- button to check that the application can be built and run.
+ \code
- \endlist
+ import Qt 4.7
- \section1 Adding Interaction
+ Rectangle {
+ width: 200
+ height: 200
+ Text {
+ x: 66
+ y: 93
+ text: "Hello World"
+ }
+ }
- Add interaction to the scene to allow users to click on the screen to start
- the animation.
+ \endcode
- \list 1
+ Your application is now ready.
- \o Click \gui{Design} to open HelloWorld.qml in the visual editor.
+ \section1 Running the Application
- \o Drag and drop a \gui {Mouse Area} from the \gui {Library} to the scene.
+ Press \key {Ctrl+R} to run the application in the QML Viewer.
- \o In the \gui {Properties} pane, \gui {Geometry} tab, click the
- \inlineimage qmldesigner-anchor-fill-screen.png
- button to make the mouse region cover the whole screen.
- \o In the code editor, use data binding to add a \c when statement to
- the states sections, as illustrated by the following code:
- \code
+ \image qmldesigner-helloworld.png "Hello World"
- states: [
- State {
- name: "State1"
- when: mousearea1.pressed
- \endcode
+ \section1 Changing Hello World Properties
- \endlist
+ To experiment with QML and to try some of the code editor features, change the
+ properties of the rectangle and text. Move the cursor on \gui Rectangle and
+ press \key F1 to get help on the available properties. Try adding a \gui color
+ property to the \gui Rectangle. When you start to type,
+ the code completion feature of the code editor suggests properties, IDs, and
+ code snippets to complete the code. Select an item in the list and press
+ \key Tab or \key Enter to complete the code.
- \section1 Building and Running the Application
+ The code editor checks the code syntax and underlines syntax errors.
+ Move the cursor over an error to display detailed information about it.
- \list 1
+ The following code illustrates how to set the backround color
+ to light steel blue and the text color to white:
- \o Press \key {Ctrl+R} to build and run the application.
+ \code
- \o Click the screen and keep the mouse button pressed down to run the
- animation.
+ import Qt 4.7
+
+ Rectangle {
+ width: 200
+ height: 200
+ color: "lightsteelblue"
+ Text {
+ x: 66
+ y: 93
+ text: "Hello World"
+ color: "white"
+ }
+ }
- \endlist
+ \endcode
- \note In the \gui {QML Viewer}, select \gui {Skin} and select a mobile device
- type to view the application as on a mobile device.
+ \image qmldesigner-helloworld-edited.png "Hello World in blue and white"
- \endif
*/
@@ -5381,23 +5305,15 @@
\l {http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeexamples.html} {QML examples and demos}
to learn how to use various aspects of QML.
- \note The Qt Quick specific features and the QDeclarative help are based on a
- preview version of the QtDeclarative package. Update Qt Creator when Qt 4.7 is
- released.
-
- You can use the code editor (\gui Edit mode) or the visual editor
- (\gui Design mode) to develop Qt Quick applications.
+ 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.
The following sections describe typical tasks you can do with Qt Creator.
\list
\o \l {Creating Qt Quick Projects}
- \o \l {Designing Application UI}
\o \l {Creating Components}
- \o \l {Creating Buttons}
- \o \l {Creating Scalable Buttons and Borders}
\o \l {Creating Screens}
- \o \l {Creating List Views}
\o \l {Animating Screens}
\o \l {Adding User Interaction Methods}
\o \l {Implementing Application Logic}
@@ -5426,7 +5342,9 @@
Select \gui {File > New File or Project > Qt Quick Project > Qt QML Application}.
- \QMLD creates the following files:
+ \image qmldesigner-new-project.png "New File or Project dialog"
+
+ Qt Creator creates the following files:
\list
@@ -5441,7 +5359,7 @@
The \c import statement in the beginning of the .qml file specifies the
\l {http://doc.qt.nokia.com/4.7-snapshot/qdeclarativemodules.html} {Qt modules}
- to import to \QMLD. Each Qt module contains a set of default elements.
+ 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
@@ -5453,20 +5371,6 @@
*/
-/*!
-
- \contentspage index.html
- \previouspage quick-projects.html
- \page quick-ui.html
- \nextpage quick-components.html
-
- \title Designing Application UI
-
- One .qml file can define a component, screen, or the whole application.
-
-*/
-
-
/*!
\contentspage index.html
@@ -5481,8 +5385,7 @@
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 components. Drag and drop
- the following QML elements to the editor and modify their properties in the \gui Properties pane:
+ You can create the following QML components:
\list
@@ -5506,246 +5409,6 @@
\endlist
- You can use QML to add properties for a component in the code editor.
-
- The following sections describe some use cases for the QML elements.
-
-*/
-
-
-/*!
-
- \contentspage index.html
- \previouspage quick-components.html
- \page quick-buttons.html
- \nextpage quick-scalable-image.html
-
- \title Creating Buttons
-
- 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 (for example).
-
- \note Components are listed in the \gui Library pane only if the filename begins
- with a capital letter.
-
- \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, modify the appearance of the button.
-
- \list a
-
- \o In the \gui Color field, select the button color.
-
- \o In the \gui Radius field, use
- the slider to set the radius of the rectangle and produce rounded corners for the button.
-
- \endlist
-
- \o Drag and drop a \gui {Text} item on top of the \gui Rectangle. This creates a
- nested element where \gui Rectangle is the parent element of \gui Text. Elements
- are positioned relative to their parents.
-
- \o In the \gui Properties pane, edit the properties of the \gui Text item.
-
- \list a
-
- \o In the \gui Text field, type \bold Button.
-
- You can select the text color, font, size, and style in the \gui Font section.
-
- \o In the \gui Alignment field, select the center button to align the text to the
- center of the button.
-
- \o Click \gui {Geometry}, and then click the
- \inlineimage qmldesigner-anchor-fill-screen.png
- button to anchor the text to the whole button area.
-
- \endlist
-
- \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"
-
- \o Click the \gui Run button to view the button in \QQV.
-
- \endlist
-
- To create a graphical button that scales beautifully without using vector graphics,
- use the \l{http://doc.qt.nokia.com/4.7-snapshot/qml-borderimage.html}{Border Image}
- element.
-
-*/
-
-
-/*!
-
- \contentspage index.html
- \previouspage quick-buttons.html
- \page quick-scalable-image.html
- \nextpage quick-screens.html
-
- \title Creating Scalable Buttons and Borders
-
- You can use the \l{http://doc.qt.nokia.com/4.7-snapshot/qml-borderimage.html}{Border Image}
- element to display an image, such as a PNG file, as a border and a background.
-
- Use two Border Image elements and suitable graphics to make it look like the button
- is pushed down when it is clicked. One of the Border Image elements is visible by default.
- You can specify that it is hidden and the other one becomes visible when the mouse is clicked.
-
- Add a MouseArea that covers the whole area and emits the clicked signal (\c {parent.clicked()})
- when it detects a mouse click.
-
- You can add text to the button and set it up as a property. The text can then be initialized
- from the outside, making the button a reusable UI component. The font size is also available in case
- the default size is too big. You can scale down the button text and use smooth text rendering
- for some extra quality.
-
- \image qmldesigner-borderimage.png "Graphical button"
-
- To create a graphical button:
-
- \list 1
-
- \o Select \gui {File > New File or Project > Qt > Qt QML File} to create a QML file
- called Button.qml (for example).
-
- \o Double-click the file to open it in the code editor.
-
- \o Replace the \gui Rectangle with an \gui Item, as illustrated by the
- following code snippet:
-
- \code
-
- Item {
-
- }
-
- \endcode
-
- \o Click \gui {Design} to edit the file in the visual editor.
-
- \o Drag and drop two \gui BorderImage items from the \gui Library pane to
- the scene.
-
- \o Drag and drop a \gui Text item to the scene.
-
- \o Drag and drop a \gui MouseArea to the screen.
-
- \o Click \gui Edit to specify properties for the \gui Item, as
- illustrated by the following code snippet:
-
- \code
-
- property string text: ""
- property int fontSize: 44
-
- signal clicked
-
- \endcode
-
- \o In the \gui Navigator view, select \gui borderimage1 to specify
- settings for it in the \gui Properties pane:
-
- \list a
-
- \o In the \gui Source field, select the image file for the
- button, for example button_up.png.
-
- \o In the \gui Left, \gui Right, \gui Top, and \gui Bottom fields,
- enter 32 to set the margins for the image.
-
- \o Click \gui {Geometry}, and then click the
- \inlineimage qmldesigner-anchor-fill-screen.png
- button to anchor the border image to the \gui Item.
-
- \o Click \gui Advanced, and select \gui {Set Expression} in the menu
- next to the \gui Visibility check box.
-
- \o Enter the following expression to specify that the image is visible
- when the mouse is not pressed down: \c {!mousearea1.pressed}.
-
- \endlist
-
- \o Select \gui borderimage2 to specify similar settings for it:
-
- \list a
-
- \o In the \gui Source field, select the image file for the
- button when it is clicked, for example button_down.png.
-
- \o In the \gui Left, \gui Right, \gui Top, and \gui Bottom fields,
- enter 32 to set the margins for the image.
-
- \o Click \gui {Geometry}, and then click the
- \inlineimage qmldesigner-anchor-fill-screen.png
- button to anchor the border image to the \gui Item.
-
- \o Click \gui Advanced, and set the following epression for
- \gui Visibility, to specify that the the image is visible
- when the mouse is pressed down: \c {mousearea1.pressed}.
-
- \endlist
-
-
- \o Select \gui Text to specify font size and color, and text
- scaling and rendering:
-
- \list a
-
- \o In the \gui Color field, use the color picker to select
- the font color, or enter a value in the field.
-
- \o In the \gui Text field, select \gui {Set Expression} and
- enter a pointer to the \c {text} property that you specified
- earlier: \c {parent.txt}.
-
- \o In the \gui Size field, select \gui {Pixel} to specify
- the font size in pixels. By default, the size is specified in
- points.
-
- \o In the \gui Size field, select \gui {Set Expression} and
- enter a pointer to the \c {fontSize} property that you specified
- earlier.
-
- \o Select the \gui Smooth check box to enable smooth text
- rendering.
-
- \o Click \gui {Geometry}, and then click the
- \inlineimage qmldesigner-center-in.png "Anchor buttons"
- buttons to inherit the vertical and horizontal centering from
- the parent.
-
- \o Click \gui Advanced to specify scaling for the text in the
- \gui Scale field.
-
- \o Select \gui {Set Expression} and enter the following expression:
- \c {if (!mousearea1.pressed) { 1 } else { 0.95 }}.
-
- \note You can enter long and complicated expressions also in the
- code editor.
-
- \endlist
-
- \o In the code editor, add to the \c MouseArea item
- a pointer to the \c clicked expression that you added earlier:
- \c {onClicked: parent.clicked()}.
-
- \o Click the \gui Run button to view the button in \QQV.
-
- \endlist
-
*/
@@ -5758,7 +5421,7 @@
\title Creating Screens
- You can use the \gui Library items and your own components to create screens.
+ You can use predefined QML elements and your own components to create screens.
You can create the following types of views to organize items provided by
\l{http://doc.qt.nokia.com/4.7-snapshot/qdeclarativemodels.html}{data models}:
@@ -5778,139 +5441,7 @@
QML states typically describe user interface configurations, such as the UI elements,
their properties and behavior and the available actions. For example, you can use
- states to create two screens:
-
- \list 1
-
- \o Use the \gui Library items, resources and your own components to create a screen.
- For example, drag and drop the button component from the \gui Library pane to the screen.
-
- \o In the \gui State pane, click the plus sign to add another view, or \e state
- to the application.
-
- \o Modify the second state of the screen to create a new screen.
-
- \endlist
-
-*/
-
-
-/*!
-
- \contentspage index.html
- \previouspage quick-screens.html
- \page quick-list-views.html
- \nextpage quick-animations.html
-
- \title Creating List Views
-
- You use list views and list models to create lists. You use delegates to handle list items.
- Typically, the list model is provided by a QAbstractListModel C++ model object,
- but you can also create it in QML.
-
- \list 1
-
- \o Select \gui {File > New File or Project > Qt > Qt QML File} to create a QML file
- called ListView.qml (for example).
-
- \o Double-click the file to open it in the code editor.
-
- \o Add a list model that contains the data to be shown on the list, as
- illustrated by the following code snippet:
-
- \code
-
- import Qt 4.7
-
- Rectangle {
- width: 360
- height: 640
-
- ListModel {
- id: myListModel
- ListElement {
- item_index: 0
- item_name: "Item 1"
- item_description: "Description 1"
- }
- ListElement {
- item_index: 1
- item_name: "Item 2"
- item_description: "Description 2"
- }
- ListElement {
- item_index: 2
- item_name: "Item 3"
- item_description: "Description 3"
- }
- }
-
- \endcode
-
- \o Add a delegate that draws each item in the list.
-
- \code
-
- Component {
- id: myListDelegate
- Item {
- id: wrapper
- width: parent.width
- height: 40
- Column {
- x: 5; y: 5
- Text { text: '<b>Name:</b> ' + item_name }
- Text { text: '<b>Descriptionr:</b> ' + item_description }
- }
- MouseArea {
- anchors.fill: parent
- onClicked: myList.currentIndex = item_index
- }
- }
- }
-
- \endcode
-
- You can use a separate delegate to hilight the currently selected item.
-
- \code
-
- Component {
- id: myListHilight
- Rectangle {
- width: parent.width
- height: 40
- color: "lightsteelblue"
- radius: 5
- SpringFollow on y {
- to: myList.currentItem.y
- spring: 3
- damping: 0.2
- }
- }
- }
-
- \endcode
-
- \o Add the list view, as illustrated by the following code snippet:
-
- \code
-
- ListView {
- id: myList
- width: parent.width; height: parent.height
- model: myListModel
- delegate: myListDelegate
- highlight: myListHilight
- focus: true
- }
- }
-
- \endcode
-
- \o Click the \gui Run button to view the list view in \QQV.
-
- \endlist
+ states to create two screens.
*/
@@ -5965,12 +5496,6 @@
\endlist
- 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 response to an event.
- For instance, the \gui {MouseArea} element has signal handlers to handle mouse press,
- release, and click.
-
*/
--
GitLab