feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: Describe Qt Quick Designer Form Editor and Text Editor tabs

Browse Source 
Users can now use the code editor within the Qt Quick Designer.

Change-Id: I2ad30bafc4b61ce9c1115c9a8b1c019d2b21151e
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2017-02-03 15:43:05 +01:00
parent 541dd8643d
commit 8f53c02296
9 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
doc/src/howto/creator-keyboard-shortcuts.qdoc
View File

@@ -549,7 +549,8 @@
\li Open the QML file that defines the selected component
\li F2
\row
\li Move between code editor and visual editor
\li Move between \uicontrol {Text Editor} and
\uicontrol {Form Editor}
\li F4
\row
\li Toggle left sidebar

5
doc/src/overview/creator-design-overview.qdoc
View File

@@ -47,8 +47,9 @@
\li \l{Developing Qt Quick Applications}
You can use wizards to create Qt Quick projects that contain
boiler-plate code. You can use the code editor (Edit mode) or the
visual editor (Design mode) to develop Qt Quick applications.
boiler-plate code. You can use \QMLD to develop Qt Quick
applications in the \uicontrol Design mode.
\li \l{Developing Widget Based Applications}
Widgets and forms created with \QD are integrated seamlessly with

13
doc/src/qtquick/creator-mobile-app-tutorial.qdoc
View File

@@ -121,7 +121,8 @@
\list 1
\li Select \uicontrol Edit to open Page1Form.ui.qml in the code editor.
\li Select \uicontrol {Text Editor} to open Page1Form.ui.qml in the
text editor tab.
\li Right-click \uicontrol Image and select \uicontrol Refactoring >
\uicontrol {Move Component into Separate File}.
@@ -142,7 +143,7 @@
Bubble.qml with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file.
The UI is now ready and you can switch to editing the Page1.qml and
Bubble.qml files in the \uicontrol Edit mode, as described in the
Bubble.qml files in the \uicontrol {Text Editor}, as described in the
following section.
\section1 Moving the Bubble
@@ -153,15 +154,15 @@
UI Form, so you also need to remove the corresponding code from Page1.qml
(or the application cannot be built).
In the code editor, edit Bubble.qml to add properties that we will use to
position the image:
In the \uicontrol {Text Editor}, edit Bubble.qml to add properties that we
use to will position the image:
\quotefromfile accelbubble/Bubble.qml
\skipto Image
\printuntil }
In the code editor, edit main.qml to specify the application title, as
illustrated by the following code snippet:
In the \uicontrol {Text Editor}, edit main.qml to specify the application
title, as illustrated by the following code snippet:
\quotefromfile accelbubble/main.qml
\skipto ApplicationWindow

7
doc/src/qtquick/creator-tutorial-create-qq-project.qdocinc
View File

@@ -34,6 +34,7 @@
\endlist
\QC generates a UI file, \e MainForm.ui.qml, that you can modify in the
\uicontrol Design mode and a QML file, \e main.qml, that you can modify in
the \uicontrol Edit mode to add the application logic.
\QC generates a UI file, \e Page1Form.ui.qml, that you can modify in the
\QMLD \uicontrol {Form Editor} and two QML files, \e Page1.qml and
\e main.qml, that you can modify in the \uicontrol {Text Editor} to add the
application logic.

5
doc/src/qtquick/qtquick-app-development.qdoc
View File

@@ -52,8 +52,9 @@
\li \l {Using Qt Quick Designer}
You can use the code editor (Edit mode) or the visual editor (Design
mode) to develop Qt Quick applications.
You can use the \uicontrol {Form Editor} or the
\uicontrol {Text Editor} of \QMLD in the \uicontrol Design mode to
develop Qt Quick applications.
\li \l {Editing PathView Properties}

9
doc/src/qtquick/qtquick-buttons.qdoc
View File

@@ -49,7 +49,8 @@
\note Types are listed in the \uicontrol Library only if the
filename begins with a capital letter.
\li Click \uicontrol {Design} to edit the file in the visual editor.
\li Click \uicontrol {Design} to edit the file in the
\uicontrol {Form Editor}.
\li In the \uicontrol Navigator, select \uicontrol Item and set the
width (\uicontrol W) and height (\uicontrol H) of the button in the
@@ -153,7 +154,8 @@
\note Types are listed in the \uicontrol Library only if the
filename begins with a capital letter.
\li Click \uicontrol {Design} to edit the file in the visual editor.
\li Click \uicontrol {Design} to edit the file in the
\uicontrol {Form Editor}.
\li In the \uicontrol Navigator, select \uicontrol Item and set the
width (\uicontrol W) and height (\uicontrol H) of the button in the
@@ -263,7 +265,8 @@
\image qmldesigner-borderimage-connections.png "Item connections"
\li In the code editor, specify the \c clicked signal for the Item:
\li In the \uicontrol {Text Editor}, specify the \c clicked signal for
the Item:
\qml
Item {

3
doc/src/qtquick/qtquick-components.qdoc
View File

@@ -115,7 +115,8 @@
\li Click \uicontrol Design to open the .qml file in \QMLD.
\li Drag and drop a QML type from the \uicontrol Library to the editor.
\li Drag and drop a QML type from the \uicontrol Library to the
\uicontrol Navigator or \uicontrol {Form Editor}.
\li Edit its properties in the \uicontrol Properties pane.

24
doc/src/qtquick/qtquick-screens.qdoc
View File

@@ -62,7 +62,8 @@
\list 1
\li Drag and drop components from the \uicontrol Library to the editor.
\li Drag and drop components from the \uicontrol Library to the
\uicontrol Navigator or \uicontrol {Form Editor}.
\li Select components in the \uicontrol Navigator to edit their
properties in the \uicontrol Properties pane.
@@ -92,8 +93,9 @@
\l{PathView}{Path View}, the ListModel and the delegate component that
creates an instance for each item in the model are added automatically.
You can edit item properties in the \uicontrol Properties pane or
in the code editor. You can also replace the default model and
delegate with other, more complex models and delegates in the code editor.
in the \uicontrol {Text Editor}. You can also replace the default model and
delegate with other, more complex models and delegates in the
\uicontrol {Text Editor}.
\section1 Positioning Items on Screens
@@ -171,7 +173,7 @@
\image qmldesigner-anchor-buttons.png "Anchor buttons"
Specifying the baseline anchor in \QMLD is not supported. You can specify it
using the code editor.
in the \uicontrol {Text Editor}.
For performance reasons, you can only anchor an item to its siblings and
direct parent. By default, an item is anchored to its parent when you
@@ -302,13 +304,13 @@
example, you can use states to create two screens.
To add states, click the empty slot in the \uicontrol States pane. Then modify the
new state in the visual editor.
new state in the \uicontrol {Form Editor}.
\image qmldesigner-states.png "States pane"
The properties that you change in a state are highlighted with blue color.
In the code editor, you can see the changes recorded as changes to the base
state.
In the \uicontrol {Text Editor}, you can see the changes recorded as changes
to the base state.
To keep the QML code clean, you should create a base state that contains all
the types you will need in the application. You can then create states,
@@ -355,8 +357,8 @@
or opacity of the items in the screen.
\li To determine which view opens when the application starts, use the
code editor to set the state of the root item of the .qml file, as
specified by the following code snippet:
\uicontrol {Text Editor} to set the state of the root item of the
.qml file, as specified by the following code snippet:
\qml
Item {
@@ -378,8 +380,8 @@
the same time. Or use the \c SequentialAnimation type to run them one
after another.
You can use the code editor to specify transitions. For more information,
see \l{Transition}.
You can use the \uicontrol {Text Editor} to specify transitions. For more
information, see \l{Transition}.
\section1 Adding User Interaction Methods

5
doc/src/qtquick/qtquick-ui-forms.qdoc
View File

@@ -71,8 +71,9 @@
\section1 Using Qt Quick UI Forms
You can edit the forms in the \uicontrol Design mode. Items that are supposed to
be used in QML code have to be exported as properties:
You can edit the forms in the \uicontrol {Form Editor} and
\uicontrol {Text Editor} tabs in the \uicontrol Design mode. Items that are
supposed to be used in QML code have to be exported as properties:
\code
Item {