Commit dde8cfc4 authored by Leena Miettinen's avatar Leena Miettinen

Update information about Qt Quick Designer to reflect the changes made to the...

Update information about Qt Quick Designer to reflect the changes made to the UI. Add information about QML elements and links to docs. Add and update images.
parent cea49be4
doc/images/qmldesigner-new-project.png

28.8 KB | W: | H:

doc/images/qmldesigner-new-project.png

23.6 KB | W: | H:

doc/images/qmldesigner-new-project.png
doc/images/qmldesigner-new-project.png
doc/images/qmldesigner-new-project.png
doc/images/qmldesigner-new-project.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -46,8 +46,8 @@
\o \l{Quick Tour}
\o \l{Getting Started}
\list
\o \l{Writing a Simple Program}
\o \l{Creating an Animated Application}
\o \l{Creating a Qt C++ Application}
\o \l{Creating a Qt Quick Application}
\endlist
\o \l{Using the Editor}
\list
......@@ -1742,8 +1742,8 @@
integrated design tools, \QD and \QMLD, to create simple applications:
\list
\o \l{Writing a Simple Program}
\o \l{Creating an Animated Application}
\o \l{Creating a Qt C++ Application}
\o \l{Creating a Qt Quick Application}
\endlist
*/
......@@ -1755,13 +1755,13 @@
\page creator-qml-application.html
\nextpage creator-editor-using.html
\title Creating an Animated Application
\title Creating a Qt Quick Application
\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.
Qt Quick application, Hello World.
\image qmldesigner-helloworld.png "Hello World"
......@@ -1772,7 +1772,7 @@
\list 1
\o Select \gui{File > New File or Project > Qt Quick Project > QML Application > OK}.
\o Select \gui{File > New File or Project > Qt Quick Project > Qt QML Application > OK}.
\image qmldesigner-new-project.png "New File or Project dialog"
......@@ -1811,13 +1811,16 @@
\list
\o In the \gui{Editor} mode, double-click the HelloWorld.qml file in
the \gui{Projects} pane to open it in the code editor.
\o In the \gui{Edit} mode, double-click the HelloWorld.qml file in
the \gui{Projects} pane to open it in the visual \QMLD editor.
\o To set the screen size to that of some Symbian devices in portrait
mode, for example, change the \c height to \bold 240 and \c width to \bold 320.
\o Click \gui{Edit} to edit the screen size in the code editor.
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.
\o Click \gui{Design} to design the UI in the visual \QMLD editor.
\image qmldesigner-helloworld-screen-size.png "Setting the screen size"
\o Click \gui{Design} to design the UI in the visual editor.
\o Drag and drop a \gui {Rectangle} from the \gui {Library} pane to the
scene.
......@@ -1935,7 +1938,7 @@
\page creator-writing-program.html
\nextpage creator-qml-application.html
\title Writing a Simple Program
\title Creating a Qt C++ Application
\note This tutorial assumes that you have experience in writing basic Qt
applications, using \QD to design user interfaces and using the Qt
......@@ -2935,7 +2938,7 @@
\section1 Walkthrough for the Debugger Frontend
The \l{Writing a simple program}{TextFinder} example reads a text file into
The \l{Creating a Qt C++ Application}{TextFinder} example reads a text file into
QString and then displays it with QTextEdit.
If you want to look at the example's QString, \c{line}, and see the
......@@ -3562,7 +3565,7 @@
\section1 Creating Qt Quick Projects
Select \gui {File > New File or Project > Qt Quick Project > QML Application}.
Select \gui {File > New File or Project > Qt Quick Project > Qt QML Application}.
\QMLD creates the following files:
......@@ -3600,16 +3603,39 @@
You can import components to screens and applications.
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 component. The properties are automatically
displayed in the \gui Properties pane.
the following QML elements to the editor and modify their properties in the \gui Properties pane:
\list
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-borderimage.html}{Border Image}
uses an image as a border.
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-image.html}{Image}
adds a bitmap to the scene. You can stretch and tile images.
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-item.html}{Item}
is the most basic of all visual items in QML. Even though it has no visual appearance,
it defines all the properties that are common across visual items, such as the x and
y position, width and height, anchoring, and key handling.
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-rectangle.html}{Rectangle}
adds a rectangle that is painted with a solid fill color and an optional border.
You can also use the radius property to create rounded rectangles.
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-text.html}{Text}
adds formatted read-only text.
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-textedit.html}{Text Edit}
adds a single line of editable formatted text that can be validated.
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-textinput.html}{Text Input}
adds a single line of editable plain text that can be validated.
\endlist
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.
called Button.qml.
\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.
......@@ -3658,20 +3684,37 @@
\endlist
You can use QML to add properties for a component. The properties are automatically
displayed in the \gui Properties pane.
\section2 Creating Screens
You can use the \gui Library items and your own components to create screens. Use states and transitions
You can use the \gui Library items and your own components to create screens.
You can create the following types of views to organize items provided by
\l{http://qt.nokia.com/doc/4.7-snapshot/qdeclarativemodels.html}{data models}:
\list
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-gridview.html}{Grid View}
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-listview.html}{List View}
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-pathview.html}{Path View}
\endlist
In the code editor, write the code to use the data models.
Use states and transitions
to navigate between screens.
QML states typically describe user interface configurations, such as the UI elements,
their properties and behavior and the available actions. For example, you can specify
different states of a screen to allow users to view and edit the properties of an
object:
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, add the button component to the 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.
......@@ -3698,6 +3741,22 @@
\section2 Adding User Interaction Methods
You can add the following basic interaction methods to scenes:
\list
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-flickable.html}{Flickable}
items can be flicked horizontally or vertically.
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-flipable.html}{Flipable}
items can be flipped between their front and back sides by using rotation,
state, and transition.
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-focusscope.html}{Focus Scope}
assists in keyboard focus handling when building reusable QML components.
\o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-mousearea.html}{Mouse Area}
enables simple mouse handling.
\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.
......
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